手把手教学！从0搭建员工运动打卡应用原创

大家晚上好。欢迎大家来到腾讯云的实战微低代码系列直播专栏第21期啊，我们这期的话会讲一个呃，手把手教学，从零搭建。员工运动打卡的应用的一个实操课程啊，我是本次课程直播课程的讲师，Booker啊，就是英文名是booker。然后我来自腾讯云V大代码团队，OK，今天晚上的直播议程的话，首先会我们演示这个运动打卡的一个应用的一个呃，功能实操的一个搭建。利用我们的工具啊，另外呢，打之础。啊，这个积分商城的功能，就是让员工的这个啊，通过运动可以获得积分，然后通过积分来兑换啊这个礼品这样的一个商城的例子，然后同时的话。

那我们会配套的搭建出来这个，呃，与之相对应的这个后台管理系统。啊，那最后呢，我们是一个大家在一个在进行一个学习指导和交流，主要就是针对大家在直播过程当中提出的一些问题，然后进行一个。统一的解答，对今天的主要的这个议题的话，是大概是分为这个几个部分啊，首先的话我来呃安利一下，我们最近在维达代码在组织的一个呃训练营啊，就这个训练营是我们最近推出来的，是一个呃限时免费的一个活动，它呢呃可以让我们的就是对第代码感兴趣的同学呢，可以通过这个。动手实操加线上学习，还有在线的考试，然后来去呃掌握快速的掌握腾讯云的一个呃迭代码的一个技术开发技术啊，那么通过我们的考试的话，可以获得一个证书，这个证书的话是权威机构对低代码相关的一些技能和熟练度的一个认证，这样的话，我们在呃无无论是找工作还是啊怎样的就是过程当中可以增加一些履历的亮点。

那同时呢，我们也可以就是啊，在这个呃，完成通过完成这个学习任务和学习的体会的分享啊，这个可以啊。呃，获得一些我们的运营同学准备的一些礼品啊。嗯，欢迎大家去扫码去啊报名啊，这个不需要基础也可以学习啊。然后大家如果有问题的话，欢迎大家在评论区里面随时提出来，我会会经常去看这个这个问题啊，然后在讲的过程当中，也可以根据大家的问题来去回答啊。嗯，这个大家可以截截个屏吧，就我下下面的话就可以进入下一个环节，如果就是呃，有感兴趣的同学想加入这个训练营的，可以截个屏，然后去后期去啊加入训练营。

嗯，那我快速的讲一下这个咱们这个今天想搭建的一个应用的一个例子啊，这个例子大家可以看一下，大概会分为呃，这么些页面啊，这个页面的话。嗯，有几个功能啊，就是虽然这个应用比较简单它但是它其实也是五脏俱全，它会实现一个通过打卡运动啊获得积分，然后呢，然后通过花积分呢，就是能我们这个积分叫做能量币啊，这个来兑换商品，然后呢，呃，然后这个在呃打卡的时候呢，可以选择各种类型，可以上传一些图片啊，那我们的积分类类型的话也可以，就是兑换的话，也可以有很多礼品可以选择啊，这个是一个。呃，包含了web端，小程序端啊，这个多端的一个应用，同时的话也包含了数据库的交互啊，还有管理后台啊等等的功能啊，所以呢，呃，我我今天的话会完整的大家来看一下如何去搭建啊，这么一一款就是包含了多端的啊这样的一个应用，包含了就是像打卡呀，兑换呀，还有就是呃管理呀这样的一个应用的一个过程。

嗯。整个过程的话，我们会分为几个部分，在正式的一个演示之前，我我来给大家看一下，大概我们会有几个环节啊，首先就是呃，后台逻辑部分就是。呃。我们在任何一个应用当中啊，其实咱们除了这种工具类的就比较简单的之外呢，我们会首先呢，去考虑咱们这个应用的话，它应该是怎样的去啊管理这个数据，然后怎样的业务逻辑，所以呃，在第一部分的话，我们就会看一下如何去在微大代码当中去开发我们的后台逻辑。啊，包括呢什么呢？包括这个如何去新建这个数据模型来当管理数据表啊，如何去存储用户的打卡记录商品啊，还有就是用户的一些头像昵称啊，还有就是兑换的一些记录等等的，还有就是我怎样去呃实现这个业务逻辑，对吧？有了这个表还不够，有了这些模型之后还不够。

我们应该怎么去实现这样的业务逻辑，那我们就会介介绍到我们的维达的APS的功能，它是啊，这个能够去啊编写业务逻辑，同时呢，可以支持多种类型的一个功能，那第一部分的话就是后台逻辑，第二部分呢，是咱们的业页面搭建，就是我们用户直观看到的部分，我们怎么样利用低代码的这个优势。能够快速的将我们的这些页面呢，能够通过拖拽式的开发，然后去快速开发出来呢，这个这个是我们的啊一个比较重点的部分，就是我们怎么样去呃去搭建这样的一个页面，那我看评论区讲的有没有回放，这个一般都是有回放的，就是我们课程的话，如果大家有时就是时间来来不及的话，可以后面可以观看回放，但是呢，我为了这个效果啊，大家尽量的还是能够通过直播的形式参与，如果呃，尤其在开发的过程当中，还可以跟讲师啊，跟我们一起去交流，这个我相信还是比较呃好的。

然后呢，呃，在这一部分的话，我们除了这个页面搭建之外呢，还会介绍到如如何利用微大来实现。页面的交互啊，页面的布局，页面的样式主题，包括怎么样去配置组件，还有前端的一些代码逻辑，如何去编写，对。啊，那这是页面的部分。嗯，然后除了页面，呃，除了这个刚才那个应用前面截图这个应用之外啊，这个这是我们面向呃，就是用户端的一个页面，那我们还有就是啊。

管理端的应用，那如何去管理整整整个一个应用呢？比如说我的商品啊，如何去维护。我的打卡记录，包括我的用户啊，这些我们是不是能够快速的去管理，那这这一部分的话，我们会也是如何快速的构建出来这样一个。管理后台不需要嗯开发工作就可以生成出来，嗯那嗯当然就是最后的话，呃，我我因为我的课程啊，毕竟也是短短的一个小时啊，就是所以有些东西啊可能不会去呃介绍特别细，所以可能会有一些呃内容的话会在我们的官网文档啊，还有社区啊等等当中会有一些体现，然后呃，大家也可以关注我们的这个公众号啊，维达的公众号，腾讯订代码的公众号。然后去啊，就是学习到更多的这个实战知识啊，和一些啊，就是案例啊等等这些，包括还还可以找我们的客服去获得一些折扣优惠啊。

这个是另外的话题，嗯，然后另外还给大家留了一些扩展的资料，包括课后我会把今天我们讲的东西啊。打包的方式给到大家，让大家去啊，那个下载到今天的这个应用，然后呢，自己在这个基础上去添加到自己的逻辑去研究啊，这个因为课上的话是听我讲这个东西，可能大家是就是耳听为虚啊，这个可能自己下去，然后研究研究，那这个可能就变成实操的，我们真正能够掌握这个啊，这个这块的技术好。那说完了这些就是啊，那个PP的内容我们来重来看到我们的今天的实操的部分，这是我们的重点。对呃，首先呢，呃，我介绍一下，就是大家有用过微大家代码嘛，如果有用过的话，可以在这个评论区啊，这个打个一，如果没用过可以打个二啊，这个可以，呃，给大家给我一些反馈，我可以看一下大家的一个情况，然后来针对性的调整我的讲讲的速度啊。

然后，嗯。嗯，首先的话，V的话，我们是一个整个的一个集成的开发低代码开发平台，那我们呢，其实里面会包含了应用啊数据源，然后啊，包括工作流啊，做流程相关的，还有就是我们的呃，支持多端开发，就是像小程序呃，企业微信啊，这个集成到我们的整个的微信生态啊和企业微生态啊，这些里面包括我们可以支持自定义域名，那我们首先的话怎样去搭建一个呃这个。呃，应用呢，我们首先就是从今天这个打卡应用来说，我们首先当然是要建一个应用先。啊，我今天的话就以这个我已经新建出来这个应用为例子啊，咱们首先要啊，我先把它打开，然后我我给大家演示一下怎么怎么新建应用啊啊这里的话有几种类型，就可能对于不了不太了解的话，我简单啰嗦一下，就是我们的应用的话，首先的话，它在端方面会分为像小程序H5和呃，就是PCR这个三端，那从这个类型方面，其实有两种啊，一种是叫做啊这个模型应用，它其实是一个偏管理的，呃，门户的这种这种应用，比如说它呃，像是这种啊后台类的，就是需要员工登录的这种啊，就所谓叫数据模型应用，另外一类呢，就是非常的灵活的，我们现在比较推荐大家的用的就是这个自定义应用，这个应用的话。

它可以啊，就是进建完之后呢，它默认是支持PC移动端H5，然后当然也可以接入一些登录和认证啊，在这个登录里面，它可以去设置，如采用一些方式登录，但是它可能本身没有一些啊，像一些啊那个。集成的这种啊，就是统一的像一个企业的管理工作台那样的一个界面，它实际上就是一个我们像呃，比较自定义的应用啊。啊，那然后在建立完应用之后，其实啊，我现在先新建一个页面啊。

这个页面的话，我们首先啊，就是你会看到它会有空白来的，有各种各样的基于区块模板，然后来创建啊。然后我们新建一个空白的，那我们还是从这个，呃，就我们刚刚前面讲了，我们还是从后台部分开始吧，其实嗯，做任何一个应用的话，就是我们首先如何能够呃高效的去开发呢？我相信大家还是要提前的去设计一下咱们的应用的话，大概会有哪些数据，对吧，大概有那些业务，大家那些页面在这个呃呃，就是正式正式开发之前，大家可以先规划一下，那我我我的建议呢，是我们首先把这个表。啊，就是这个模型啊，我们叫数据模型建立出来，当我们创建一个数据模型，我现在在这里测试一下啊，比如说叫做呃，这个点赞，我假设我将来准备做一个啊点赞的记录表去运动。

啊，点赞记录表。然后。嗯，OK，它就可以建一个模型，然后呢，嗯。这里的话，这个这个模型相当于是数据库的一张表，那它可以添加很多字段，这个字段跟数据库不一样的点呢，是它可以啊，就是它的类型会比较啊，怎么说呢，就是更高阶一点吧，就是它会包含了什么呢？像这里比较典型的，我数据库里可能会有文本啊，数字啊，这些都会有，对吧，咱们维达这里呢，还会抽象一些像啊，像电话、网址，图片，服务文本啊，比如说啊，像文件地理位置啊，包括一些关联关系。还有公式等等，这些东西是我们的微大呢，就通过低代码这个方式抽象出来的一些概念啊，比如说啊这个。呃，点赞记录表，那我我今天的话，我想假设说做一个点赞记录吧，啊，那我首先我就是有一个打卡的，就是比如说打卡的，我想对这个打卡用户的打卡呢，可以让其他用户去点赞，那我这里就呃。

就是比如说是打卡记录，我可以关联一个数据吧。就是管理一个另外一个表。关联关系，选择这个打卡记录就是一个用户呢，可以针对一个，呃，这个。是一个打卡的一个记录啊，去点赞啊，假如是这样的吧，这个我就举个例子给大家演示一下，这个这个嗯。点赞。用不完。User user。然后呢，这里我们选择这个。嗯，它也是个关联类型吧。然后选择这个用户表，就我们的用户表好一个用户呢，可以给一个一个打卡记录呢，去关联啊，去去去去点赞啊，就是产生一条记录的话就可以去啊，这种我们弄完之后呢，就保存，保存完之后呢，它其实你会看到它就像一个OM一样，它会提供到啊，就是很多的这些查询方法，我们就可以在前端去调，就是它会有什么新增啊，新增多条新删除更新啊，查询啊等等这些方法，这些方法的话都是SDK直接集成的，我们就可以直接在前端页面上啊，比如说我现在建一个页面。

啊，新建一个。嗯。表单吧。然后呢，我可以选择这个刚才建那个表。啊，这个。然后你看，哎，他直接生成出来这个这个里面了，那我可以选择一个打卡记录，但是这个打卡记录他没有关联那个啥，这里的话我可以，但是正正正常的这个点赞不是这么做的，我只是演示一下，可能会这么写入啊，然后呃，所以就是我刚才给大家其实演示的是这个建啊数据建模的过程啊。

嗯，然后我我我就是我时间关系，我就不一个一个表去建了，因为这个还挺挺呃，就是容易，就是可能打错了或者怎么样，我我来不浪费大家时间，给大家看一下，大家今天这个应用里面大概建了一些什么表啊，这个我觉得是比较关键的，给大家讲一下。首先的话，呃，我会用一个啊，叫做这个用户表，然后来额外存储一些这个我的系统里面的用户的头像。以及啊，它的维达这边的一个关联的用户ID，以及啊它的一个能量币啊，就前面讲到这个我们的一个应用啊，我们的这个积分系统里面，它一定会有一个。这个能量币啊，就所谓的积分，它是数字类型的，OK，这就是一个用户的基本信息，然后呢，又建了一个表，就是我要做员工打卡，那打卡的时候嗯，要存储什么字段呢？这里的话我嗯就这里可以看一下，就是有会有什么字段，包括了最核心的是谁打卡了是吧，这个用户他他打卡的类型啊，比如说是。

这里是个枚举，这个枚举的话，我们定义的是一个一和二二，这个一和二对应的分别是一个是走路啊，一个是运动啊，这个就是一个定义啊。另外就是我们每次打卡呢，可能会获得多少能量币啊，这个是一个数字啊，这个这个是在后台我们给他得出来的。然后呢，他也可以像发朋友圈一样，他可以发几张图片，这里的话给大家可以看一下，我们怎么实现上传多张图片，就是我们首先要新建一个数组，然后呢，数组里面呢，选择图片啊，这个元素类型图片，这样的话每张图片限制呢十兆啊，这样的话在我们的打卡的时候呢，就可以啊。就是。上传多张图片啊，然后心情啊，运动这些啊，都是一些文本啊，这个部署是用来做这个，假如说假如说他是通过部署打卡的话，拿一个数字字段，对，这个是我们的一个啊打卡记录给的啊，这个我们先不管他怎么写入吧，先先把表现出来。

啊，大家如果有什么问题的话，欢迎大家在群里面啊，在这个呃，这个腾讯云的这个视频号，呃视频号的直播里面，就是呃那个提出来我会嗯及时的解答，然后在呃去运动的这个兑换记录表，这是干什么呢？我们因为啊首先我们看商品表，我们为了实现兑换，我们首先要存储商品嘛，所以我们会定义一个商品表。这里的话会有什么商品的名称啊，它的一些介绍啊，这是用的副文本，你们做商品的详情页啊，然后还有就是它的库存，它它有多少件啊，每个的价格啊，以及的这个呃描述，还有一些图片，图片的话为了实现多张，因为电商平台里面它也是用多张图片来做，所以我这里的话也是用了这个啊。

多张图片啊，数组跟刚才大家讲的那个技巧一样，就是建一个数组，然后数组类型里面是图片，这样的话，它最终可以上传出来的就是多个图片，OK，这个也没啥，然后兑换的话，其实跟刚才打卡记录表一样的话，我们就就用来存储啊，我们在一次啊，跟订单是类似的啊，就是我们啊买了什么东西，然后买了几件，然后谁买了，然后消耗了多少，对吧，类似这样的一个东西，所以这里的话也是一个啊点赞记录是我们刚才去啊这个。建出来的。OK，嗯，然后呃，这是我们的数据模型的建模，就数据源的后台逻辑部分的一半啊，建完这些表啊，基本上就完成了一半的这个啊后台的逻辑了，因为很多情况它其实都是c rud的一个增删改查，所以呢，那这些东西其实都是默认会我们会提供上啊，就是会有这些方法都可以直接调用了，就不用说像后台我要写代码写半天，然后发布，然后呢，最终再通过什么协议文档，然后给到前端啊，这个不不用，这个非常简单，现在前端就可以，刚才我们演示到这个已经可以调了，对吧，它已经可以去使用了。

就非常的快速，然后呢，当然我们的这个业务远远不止这么简单啊，我们想想这么简单的一个系统，它其实也有一些业务逻辑啊，它其实。我想一个问题啊，就是这个，呃，打卡呢，这个记录啊，里面这个能量币啊，这个积分能不能够用户自己传过来呢？肯定是不能，对吧，因为用户如果自己可以传，那我是不是可以把自己传成1万个啊，这个我一次获得1万个，那这种事情本身就是，呃呃，就是应该要有些业务逻辑来处理的，那我这就是我们要去实现的一个API，就是我们怎么实现打卡的时候给他随机生成一些啊这个能量币，然后呢，对吧，而且限制他当天只能打卡一次啊，这个就是我们的业务逻辑了。对吧，这是一个业务逻辑，另外呢，还有就是我们商品。怎么兑换啊，这个也是我们的业务逻辑。

我们的商品啊，总不能说用户自己啊，写写数据库，然后直接啊把我们的商品给啊，就是减库存，然后来去啊发货或者怎么样的吧，这个肯定也不是这样的，所以我们必须还是有一些业务逻辑的，所以给大家举这个例子呢，还是会有一些业务逻辑。那这里的话，我给大家演示一下，就是APS的功能，这个呢，就是我们的那个呃，实现这个小呃小小的例子的一个地方，我首先的话可以新建一个APS，大家可以看一下这个as是什么呢？它实际上呢，你可以把它理解为就是一个后台的业务接口，那咱咱们看一下这里面都有啥吧。就首先第一个它可以支持咱们就是调一个。HTTP请求直接啊，有现成的接口我可以直接用，那也可以呢，比如说我我有一些postman这种，嗯，这种客户端发包的工具，我里面已经配置好了啊一些啊后台接口的调用的，我们也可以直接导导入进来，还包括open API也是一样，类似的这种协议的这些，呃，我们格式文件我们都可以直接丢进来，可以创建啊，前端就可以直接用了。

嗯，那我们今天的话演示的，因为这些都不满足啊，我们没有一个后台接口来做这个，所以我们要自己来实现，那我们直接怎么实现呢？我们会用这个自定义代码啊。这个就是还还可以用这个云开发云函数啊，这两个都可以用，那那这个区别是什么呢？云开发云函数的话，它实际上呢，相当于是什么呢？相当于就是我可以调用我们的云开发的环境的这些各种呃版本的，比如说Java的，PHP的各种的这些云函数是吧，就是它实际上呃呃是不限语言不限呃呃这个呃也也不是不限，就是语言会更丰富啊，就是它的代码逻辑可能会相对来说啊，可能会重一点。那当然它比这个服务要轻很多啊，本身云函数也是一种so类的一种轻量级的一种计算方式，那我们其实还想用一种更简单的方式，就叫叫叫叫做这个自定义代码。

我们可以看一下这个自定代码，当它创建之后呢。我们就可以像写一个前端的一个方法一样，去写这个啊，这个API接口了，像嗯，不同于我们做这个note服务啊什么的，我们还要去用个框架或者什么的，我们这里不需要，我们只要去定一个方法啊，比如说啊叫打卡。我们实现一个打卡的业务逻辑，然后呢，这个叫啊record，然后呢，这里自定代码，这里给大家看一下它的，呃，这里的功能啊，主要的核心逻辑是什么呢？就是会有一个代码区用来实现呢，我们的核心业务逻辑。这个代码区呢，大家熟悉呃那个呃就是所谓的呃，云函数的同学可以，呃可能感觉比较熟悉啊，因为它都是导出了一个方法。

啊，这个方法呢，就是一个啊云函数里面的核心实现。那么他会接收到两个参数，一个叫做一个叫做context，啊，这个是什么呢。就是我们前啊，就是调用这个方法，它相当于只是一种远程的方法而已，就是RPC的感觉啊，就是在调用这个函数的时候，我也可以传一些参数啊，比如说我打卡，我是不是可以传一下打卡，我就刚才讲的那个数据表里面要创建出来的那些包括啊，就是运动类型啊，我的步数啊，我的一些什么东西，对吧，这些就是参数来传递，还有一些是上下文里面我们会获取啊，可以给到一些。啊，这个API让大家呢，去方便去编写这个云函数，或者这个自定义代码，因为这个我们除了实现一个简单的把参数打印出来呢，我可能还要去实现业务逻辑，比如说。当我接收到这个用户的给到这个打卡的记录是吧，打打卡的一些呃就是需要的字段，那我们怎么把它存存到库里面呢？对吧，我怎么给它生成这个呃，就所谓的呃，积分呢，或者能量，能量币呢，对吧？这里呢，其实还是需要一些业务逻辑，那这里我们就提供了便捷的方式来获取到我们的维达的一些其他的功能，比如说可以获取这个呃database，然后去操作云开发的数据库，当然这个我们这个例子不是不是很推荐我们直接用啊，这个就是调用我们的数据模型，然后来去写。

只不过呢，这个是在服务端进行操作的，还有一种是调用connector，就是调用其他的APS。啊，另外呢，还还可以通过call function这种方式来调用同一个环境的云开发的函数，云开发呢，是我们微单呢底底座的一个产品啊，就是他是做所有类似的这个东西，其实里面可能会有一些很多同同同同同学可能会用过我们的就是云开发啊，就是他可能已经实现了一些云函数，那也可以去通过这种方式去调用。

嗯，这个DEMO的话，这个例子呢，其实看到非常简单，他引了一个包。叫做note fact，然后去引了一个这个API，然后呢，他去把它这个Jason打印出来，然后响应出来，对吧，这是它的一个实现，然后我们看一下测试一下。啊。哦，大家可以看到他就是，呃，他把这个接口的内容吐回来了，就是成功了，这个是他访问的内容，OK，然后呢，我们可以有一个很好的功能，把它的出餐进行映射，就是我们的接口呢，其实除了入餐之外呢，它可能会有一些出餐。啊，就是参数的类型，这个是方便什么呢？方便我们的前端啊，或者是客户端页面很方便的去对接，相当于我们后端的接口协议了，我只需要通过这种方式去啪一生成是吧，或者自己也也可以修改啊，我可以修改给个中文名是吧，叫数据啊。

然后呢，等等的这个就是一些呃描述吧，就是方便就是大家去使用了，有了这个之后呢，保存之后呢，前端的页面呢，其实就可以去调用了，比如说我在这里我就可以调用点击。然后去调用，嗯，数据源方法，然后选择这个自定义代码，选择这个，然后就可以去调用了，非常简单，就直接就上线了一个接口了，好，那这个还不是我们讲的这个天天打卡的部分，打卡的部分的话，我时间关系我就步一行一行去写代码了，我给大家嗯review一下代码这个嗯。打卡的部分呢，我们实现了四个类似的小方法。第一个方法呢，我呃，我觉得就是呃，我们系统啊，首先嗯，它里面呢，应该能够查询到用户的积分，对吧，就是因用户进来之后，我我很多页面都要展示他大概有多少积分，然后呢，我也能够展示他的一些用户的信息，比如说他的昵称啊，头像这些东西，那怎么实现呢？这里的话啊，我。

呃，做一个APS，然后呢，里面跟刚才那个例子非常像啊，就是只不过你看到有两个com model，调用这个数据源去查数系统表啊，系统表里面匹配到这个上下文里面，它传过来的UID。找到他的用户信息，然后呢，找到我们的额外存储的那一份啊，用户积分记录，然后给他返回回来啊，那大家可可能要问啊这个嗯，那如果一个用户在我们的表里面没有怎么办？对吧？这个问题如果是这样的话，我们会在前端页面去做相应的一个判断，如果没有的话，会把它跳转到嗯，一个呃，补充信息的页面让他去啊。就是填写那个昵称啊，头像那些东西，对，这就是我们，嗯嗯，这个很简单的一个函数啊，就可以通过这种com model，然后传一个数据源的标识，就是我们前面讲的模型标识，然后调一个弹内置的一个get item，查询单条的方法，然后呢，查询条件就是查询这个用户的身份。

然后呢？这里呢，也是查他的一个，呃，就是根据上一步的条件，然后查询到我们存储的这一份用户的数据，OK，那我们有了，如果说用户他没有啊，这个数据该怎么去更新呢？啊，这里的话就实现了一个更新的逻辑，就是跟刚才很类似啊，就是。我可以呃接受一些入参，入参的话可能是用户的，呃呃，你看有个昵称和头像，我定义两个参数，一个昵称和头像，对吧，当然我们我我们是不能把那个那个金币信息啊，或者能量币信息要给到他，让他去更新的，因为这个东西属于我们的后台的一个，嗯。实现的部分对吧，不能随便给自己加一些积分啊，这个是就不被允许，所以我们只接受两个参数，一个是头像，一个是昵称啊。然后这里的话，我们判断了，如果有用户信息的话，我们就更新，如果啊，如果没有的话就创建，创建的时候默认给它初始化积分是零啊，这就完成了一个用户信息的一个更新啊，然后还有两个接口，一个接口是嗯，核心的是打卡。

我们我们怎么实现这个打卡呢，对吧，打卡呢，本质上是什么呢？它就是呃，它要去实现添加一条这个打卡记录来得，同时呢，我们要去在积分表里面。去把它增加一点积分，对吧，这是它的核心逻辑，同时要控制它，控制一下呢，它当天呢，只允许打卡一次，所以我们看一下这个接口设计，就是我们啊，只允许它传入什么呢？就是它的部署打卡类型，心情照片啊，这些东西是允许它传进来的。那初三呢，就是就是啊会比这个全一点吧，就是也差不多，那呃我们的那怎么样去呃做这个呃嗯刚才的业务逻辑呢，我们还是拆解一下，就是首先我们要查询他有没有打卡过，对吧，查查询到他的打卡记录表里面这个这另外刚才那个嗯，打卡记录表里面他是不是打卡过，对吧。

然后如果打卡过了啊，已经打卡过的话，他就。抛个错说他已经打卡过了，明天再来啊，如果没有的话，那我们。嗯，生成一个这个啊，一个随机的一个数字啊，我们假设说我们这个每天呢，可以他可以打卡的时候，可以随机呢，可以得到一些能量币啊，随机呢是多少呢？我看一下这个随机啊是五到30这个币啊这个。写一个master，这是javascript的代码，大家可以就是非常简单啊，就是学学学会JS，基本上前端后端为大，这边都可以玩了，都可以写啊，就可以生成一个随机的一个能量币，然后在后面的这个。啊，增加积分的时候呢，我们就可以给他啊，这个积分表里面啊，给他首先是给他自己的，呃，积分表里面更新一下对吧，然后呢，也可以写，另外就是写入一个打卡记录，这个打卡记录的话，我们可以在前端进行展示，也可以就让他自己查看，对嗯，那大家可能呃，可能有些对后端同学，后端比较熟悉的同学可能会认为这个呃，这个系统啊，可能还可以有提升的空间啊，比如说能不能够实现事务操作，比如说我这次打卡实际上是一个事物，就是事物呢，就是我这次。

我加积分。对吧，然后嗯，写入打卡记录等等这些东西应该是要同时成功的，对吧，我不能够说啊，我只给他加了积分，或者是怎么样，就是我没有去啊，就完做做完可能做一半就失败了，那这这这个的话可能就不是我们啊今天讲的主要内容了，就是实际上是因为我们的DEMO呢，其实更多的演示这个过程啊，就是大家可以在真实的业务当中啊去参考，比如说如果真的是像做电商类的，就需要那种啊事物操作的话，其实建议呢，是我们用使用了那个就是一些啊数据库的这些事物操作，然后来实现这个逻辑，而不是说像我这个例子啊这样就这么简单，但但这个例子其实核心思是类似的，只是实现手段上可能会有一些区别，这个也是给大家提个醒。

啊嗯，那这里其实看到这里的话，有一个点，就是我们也可以关注一下我们的，嗯，每一个API呢，实际上是有一个运行详情的，我们可以点一下这个链接进去，就是它相当于我们后端自自动就有日志了，就是大家就像写了接口之后，你怎样，嗯上发就它其实已经自动发布了。我们该怎么样去看日志呢？对吧，跳过去是吧，它有两个，一个是查看啊开发环境的运行详情，一个是发布环境的运行详情，相当于我们V大为大家提供了内置的日志服务了，对吧，通过云函数这种方式，然后可以看，哎，这个切不过来了。

嗯。啊，就是刚才看到那个那个有一个日志啊，这里其实给大家也也可以看一看啊。这个日志日志的话，它可以去检索，比如说刚才我们去运行的时候呢，啊，就是那个测试的例子，对吧，它实际上能看到呢，这个返回的结果，包括我们在里面打印的日志啊，这个打印了很多日志，比如说打印的这个入参啊，里面做了什么动作啊，这个如果是大家遇到一些问题。可以通过日志来进行排查，排查障碍，呃排查问题和这个故障，就我们就比如说代码写的写错了对吧。看一下这里就可以解决。好的，嗯，那这是我们的，呃这个嗯第一部分的这个后台逻辑部分，后台逻辑的话，嗯，再总结一下，其实嗯就两件事情，一件事情是我们把我们的这个整个系统吧，啊这个数据库啊，或者说这个模型啊，数据模型就像建Excel表格一样啊，这个快速的把它建出来，对吧，大家想好这个做任何一个系统啊，都是要去先思考好你的系统里面大概会有哪些数据。

然后呢，在思考呢，你什么时候需要啊一些业务逻辑，比如说我这个系统里面可能就需要四个啊，一个打卡，一个兑换啊兑换我刚刚是不是也讲了是吧，然后还有就是查询用户信息，更新用户信息，就四个接口，这个搞定了啊，那有了这些之后，相当于我们后台的逻辑已经开发完了，那我们开始做前端页面。啊，前端页面的话，刚才也给大家去演示了一部分啊，这个去看我们的，呃，这个页面该怎么怎么怎么搭建，我们从头来一遍啊，这是个教大家去看看怎么去搭建一个页面，首先我们看一下已经搭建好的这个首页，来也给大家看一下，这个首页呢，是包含了几个部分，就是它会有一张logo，然后呢，分两个模块，一个模块呢，就是我们去打卡的入口。

还有一个呃模块呢，是叫做能量币兑换啊，就分别对应了一个加积分和一个啊消耗积分，包括还有几个tab栏，这个它可以切换到一些其他的页面，比如说这个广场页面啊，这个相当于是一个类似于朋友圈一样的，大家可以晒啊，晒晒这个这个打卡，比如说我们做一个员工内部的一个，呃，健康的一个打卡的话，其实也可以通过这种方式来展示。啊，兑换的话是有一个专门的页面，然后包括这个详情，我可以去兑换，然后还有这个我的啊，可以去管理我的头像和昵称啊，比如说我叫妹啊，我改成改成booker，对。我的英文名，然后。提交对这些是我们要去打开的，嗯，就是。要实现的页面，那我们给大家，嗯，就是重点演示一下这个页面该怎么做啊，首先我们去做新建一个页面，我们看一下怎么做这个首页。首先呃，我非常建议大家呢，就是在做一个页面的时候呢，首先考虑整体的布局，所以我们去添加一个维达的一个网格布局组件啊，网格布局呢，它其实是一个行列式的一个布局组件，它可以去添加行列的方式来控制啊我们的整个页面啊，那这里的话，我们是先不管了，我先加很多行，先给大家加个很多行。

啊，放东西啊这个，然后嗯。这里的话，首先我们放一张图片，就是那个logo啊，图片搜索一下图片啊，这个图片的话，我们可以选择素材库里面的图片，也可以上传这里，嗯，添加素材的话就相当于从本地传了，我这里用现在本就是我的素材库里面有的，OK，加了一个logo，然后呢，我加一个，嗯。就是刚才讲那个文本是吧，文本。嗯，这个文本的话是叫做什么来着，嗯，看一下我是个大的字体，那是标题三等于四。

啊V3嘛，然后嗯，叫运动打卡吧。第一这是这是第一个啊，第一个呃部分。我们的运动打卡，然后我们的网格布局呢，我想它两边留点空间啊，加一点空间编距。可以调样式，样式面板的话也加一点空间，然后呢，上下的话，我也想调一下间距，我们点击这个网格布局，然后呢，它有一个间距，我们想把它搞大一点。行间距我们也搞大一点啊，然后能默认它有点留白的部分，感觉会好看一点，OK，然后呢啊，我们做第一个模块，第一个模块呢，其实就是两个卡片，那我们一行两列嘛，然后我们就啊这个这一行呢，我们加两列，我们在右边呢添加一列。OK，放两张图片。图片。一个图片，嗯。另外一张图片，OK，这个图片的话，我们选择这个。

啊，这张图片呢，选择。另外一个OK，这个就看着就还行了是吧，然后呃。这是这个跳转的话，我们等一会儿再加吧，这下面的话我们就放一个一样的文字啊，就放一个用这个积分兑换吧。那我们怎么显示我们的商品呢，列表呢，那我们用用到我们的这个数据列表的功能。添加一个数据列表，它是显示一个列表这种啊，我们选择一个模型，就是我们新建的那个商品列表。嗯，商品表的话，因为我们提前的话已经录入了一些数据信信息啊，这里的话其实只要选择就好了，嗯，那然后呢，呃，我希望它是默认是按照创建时间去降序排列，可加一下排序对。然后这个效果它不是很好啊，这个这个模板啊，我我们想选择一些卡片或者图文啊，可以切换，因为它这里面都是一些模板的东西啊，比如卡片。

啊，这些都是可以切换的这个卡片啊，我们我们也可以自己搭，我们选择空白。空白的话，然后呃，在这里的话，我看一下，我希望呢，它每一行呢是呃。它循环一个，我想一下。去循环两两两个吧。嗯。我还是加一个网格布局。网格布局呃，加到这个数据列表里面，那数据列表里面呢，然后我们它实际上本质上是一个循环展示内容的东西。所以呢，我们就是循环个很多个列就好了。嗯，然后在这个行，这一行里面的话，我们循环了很多列，那我想一行展示两列，怎么办呢？我们在这个行上面啊，在列上面。

嗯，这里删掉。这我加一个列。啊，拖进来OK，他现在默认情况下都是呃自适应了，所以我让他放两呃每行的展示，移动端的手动展示。啊，两列这里的话，你看它是一个呃，三格布局，按照12列布局的，所以这里的话选择12列里面两列的话就是六个六格对吧。然后呢，我也想让它有一些这个间距列间距，然后大一点。然后啊，OK，然后呢，呃，我们放一个卡片的组件吧。OK，这个卡片组件用来放商品，这标题我就感觉不需要，我想需要一个，呃，这个卡片内容我放一个图片吧。上面的主图。拖进来。啊，然后呢，我怎么选择这个图片呢，这里选择这个绑定表达式部分，我就可以选择我们这个，我们可以把它占满全屏啊，大家可以看的清楚一点。

这里的话，我们的表达式面板呢非常强大，它就是可以获得我们整个上下文的一些数据，我们可以看获得这个数据容器里面所在行的一个记录，比如我们现在要显示商品。啊，商品的话，因为它的图片的话有多张，所以我们选择第一张啊，默认选择第一张图片，诶大家可以看到图片出来对吧？然后下面的话，我们想显示一个商品的这个底部啊，卡片底部我们想显示商品的名称。啊，不是文本加个文本组件。文本。文本组件的话，我们也是打开这个绑定的表达式面板，选择行记录里面的啊，这个商品名称完成。啊，这个字还行，但是我们想让它就显示一列，那我们可以控制一下它的这个，呃，显示行数吧，这个。

显示函数。诶，在哪里，哎呀。风。手一只手就在这里，对一行就显示一行，对，然后呃，这里看着整齐一点，对然后这这里的话，它显示五条不太够，我们调整一下它的这个。数据数据啊选择，比如说十条。条或者多少条，这这还可以选择它的分页方式，用的是点击下载更多啊。这里有点少，我们的数据有点少，我们改一个五页吧，啊六页吧。然后对它可以点击加载更多，对这里的话就有了，好，那我们这个首页看起来就这样就搭建出来了，那那我们该怎么去搭建其他的页面呢。比如说这个商品页面的话，我们就不用搭建的，跟这个效果是一样的，对吧，那我们把这个详情页对吧，每个商品有个详情页，该怎么搭建呢？我们也给大家看一下。

啊，叫做商品详情。嗯，商品详情呢，我同样的也上来，先来一个布局组件。网格布局，然后呢，我不需要这么多列，删一下，然后加几行。就默认先先先这么来，然后呃，商品组件的话，我首先呢，我们一定是需要一个详情的查询，所以我们抽象了一个商品数据详情的一个高阶组件，那这个的话，它默认的话，可以根据一个数据模型呢和API去展示一个某个单条数据，刚才是列表数据，我们现在是单条数据。大家有什么问题可以在群里面提出来啊，在在这个或者群里在这个呃。我们的。聊天的这个群聊啊，就是直播的聊天里面去提出来这里的话，我们选择这个，呃，还是商品啊，我们想展示商品。

商品秒。OK，它默认的话，它就很简单的方式把这个商品打印出来了，我们想做成这种电商那种感觉啊，所以呢，我们呃，把这个放在数据详情呢，放在最顶上，它是高级接组件，然后下面内容我们都不要了，我们就直接把诶这个删多了。把这个删多了可以撤销啊，然后可以把这个详情呢，把这个网格放在详情里面，然后把这个内容不要了，好，那这个内容没有内容，我们该怎么去搭建呢？好，我们先放一张图片。然后这张图片的话，我们希望它它是宽度呢，占满100%。感谢样式。OK，然后呢，它的高度是自信OK，它的图片呢，选择我们的商品的主图，同样的选择这个打开表达式面板，选择数据容器里面的这个图片。啊，单条第一条如果也可以用用用一个轮播组件来显示多个啊，我们这里就用单条，然后你看哎，这个它默认选择显示第一条的图片，然后同样的就是我们也可以用这个。

文本来展示这个商品的信息啊，然后可以把它的表达式啊改一下。绑定啊，说白了这个就是我们所说的这个数据绑定啊，就是很多框架都有那种，就是啊数据绑定的部分，我可以绑绑上数据。商品名称。啊，它这个是大点，这里会实时的解析出来，我们的上这个表达式的结果，我们就用这个。OK。然后诶，他这个没生效吗。等一下。好像没选中他。然后选择内容。然后给他字搞大一点，选择一个。标题三。啊对，然后显示那个，嗯，这里兑换列表的话，我们还希望它能够呃，去展示它的价格。

上也也复制一个文本吧，搞个文本。文本内容，然后是它的价格，能量币1000，然后呢，我我还想展示，我还想去呃兑换它，那我就搞一个数字输入那个。Number啊，这个数字的输入。数字输入，数字输入的话，我们可以选择一个符合移动端的这种双侧调整的样子，然后我不想显示这个标题，然后把标题给关闭。啊，然后关闭掉，OK，这就可以显示这个，呃，我们的一个。呃，基本的一个。兑换的一个效果。OK。然后呃，再来一个按钮的兑换。放到这个行里面。或者加一个列吧，加一列。

涂到这儿。然后嗯，把这个能不能对齐。前句。这里可以对齐。啊，然后这里改成兑换。然后下面的话，我们还想展示一下它的详情信息，我们加一行。张一航。文本改一个文本。我们展示。然后绑给他来一个数据绑定，绑上我们的数据，绑上它的一个D体的信息，商品详情。OK，它这是个负面的展示，就可以有了。好。然后那怎么实现这个业务逻辑呢？我们点一下点一下这个退换，让他触发一些业务逻辑，我们可以让他呢，在兑换的时候干什么呢？就是调用我们的一个兑换的一个方法，就调用数据源的方法。

这里我们选择。我们的一个打卡的API，这里有一个兑换的功能，我们可以看到兑换的功能，它需要两个入仓，一个是商品的ID，还有一个是数量啊，我们怎么获取呢？我们可以同样的选择这个表达式。啊，那表达式里面呢，我们去选择当前的这个ID啊。当前的这个商品的ID，然后呢，数量呢，我们就选择当前的这个组件，就是我们这个输入框的这个。啊。有几件啊，这个商品的一个数量，就是我们现在用户选了几个，我们选择组件API搜索一下input。啊，我们刚才拖了一个input number，这这个就是我们的一个微机的API，就是组建的VAPI，然后呢，我们可以获取到它的value。啊，这个Y6的话，就是它的输入值现在是没有的，如我现在手动输一下哦，刚才那个没保存，你拦一下。

嗯，调用数据源。这里打卡。然后选择兑换。然后绑定ID。ID。然后绑定这个数量，数量的话就是组件API里面有一个input。Number 1.value。大家可以看一下，这个时候它的值应该是一一对吧，一百一千一百一十一个啊，这个就实时解析出来了，你保存就好了，这里的话它就可以去兑换。你看。他说商品不存在会没有库存，因为我们库存太多了，所以所以这里其实已经可发现他已经调用成功了，对吧。这个详情页其实基本上是这样的，那我们怎么样去实现这个页面的联动呢？怎么实现一个通用的一个详情页呢？我们新建一个UI的参数，就是我们这个页面是呃这个呃，他接收一个参数叫ID啊，必填的。

这个ID呢啊，就是由谁打开这个页面，谁传给他，然后呢，他传给他之后呢，他就是传给数据详情。然后数据详情里面去读取啊，这个ID就用来过滤，当它的ID等于这个就在查这这条数据，它的标识呢，等于等于这个什么呢。等于我们的表达式里面选择这个URL参数的ID，这样就可以串起来了，对吧，确定。好，那我们现在呢，就可以把刚才我们做的那个首页给他绑过来了，就跳转过来这里。点击的时候打开页面。然后呢，选择页面，然后选择刚才我们自己的商品详情，然后ID呢，它也是通过表达式来切换传参。那这里的话其实就要选择我们，我们还是展开吧。选择了当前这条行记录的所在的ID，这样的话才能够传正确对吧，所以这里的话我们就这样传。

这这行记录的ID。然后保存。对，然后我们试一下双击。嗯，环境确定，诶发现它是可以的，对吧。然后可以返回，可以回到那个。商品页面。啊，这个我们给他改个名叫首页。首页。移动端命名。OK，就这样的话，一个一个列表页，一个详情页都都有啊，然后我们第三个页面呢，我们给大家演示一下这个打卡页面。打卡。打卡页面的话，是一个表单类型的页面，它是一个表单类型的面。嗯先嗯，打卡的话，我想一想应该不需要布局了，就首先来个表单吧，表单容器。简单的话是用来做写数据的操作的，这里的话我们选择呢APS，因为我们打卡呢，我们是不希望用户直接去操作数据库的，所以我们选择APS调我们的接口选择呢，我们的这个。

去运动打卡，这个APS里面的方法叫做打卡方法。对吧。OK，这这就是一个打卡了。我看一下。打卡。所以这里的话，其实你可以看到它就可以去啊，这个部署好像生成，对这这个有有点问题，我们加一个呃输入框。嗯，数。啊，这个部分，然后给他绑定一个字段叫做。这个部署我自己之前可能把它配错类型了，对，没关系，这个我可以改一下就好了，然后嗯，标题部分我写一个部署。标题部分。

这个就是我们一个打卡的一个东西，然后我试一下我这个打卡类型，实际上它是个枚举啊，所以我想用个下拉来实现，所以呢，我们就用一个下拉组件。下拉选择。嗯，也是把它放进去选择呢，这个打卡类型，然后呢，它的选项列表呢，有有两个，一个是一。一是什么，一是运动啊，就是部署打卡。二是什么呢？二是运动打卡。OK，他就直接可以这样选了。然后呢？OK，这个就是我们的一个打卡的一个界面，我们试一下心情会很开心。然后这个步数666啊，搞个运动。试一下，我今天好像打过卡，所以好像不太行，我试一下看他应该会报错。

啊，我今天已经打过卡了，所以我们这个逻辑还是有用的，对，那这个打卡页面其实就就可以的，那这里的话给大家留一个思考啊，就是我们怎么实现说啊，点这个跳转过去显示呢，是我是默认使用这个步行打卡，点这个呢，实际上是用运动打卡，这个知识呢，就跟我们刚才讲这个商品跳转的时候的是一样了，这个我就不给大家讲了，卖个关子啊，大家可以自己去。想象想一下看怎么实现啊，我同一个页面的话，我可以啊，这个做两啊两两个不同的这个效果对吧。这个也也是可以用用我们的刚才讲到那个。嗯，那个原理啊。来实现。然后打卡。然后这里的话一点单看就进来了，好OK，嗯，行，然后这里就是我们呃比较那个呃，就是核心的几个场景的一个演示啊，其实我我选了个例子，就是想是给大家演示一下怎么去管理数据啊，怎么去把数据绑定出来，怎么去处理这个页面的这个搭建，比如说布局，包括呢啊怎么去实现页面跳转，还有就是啊，这个包括这种表单兑换啊，这种东西该怎么实现这个例子啊，虽然很简单，但是呢，真的是挺有权的啊，基本上都涉及到了。

啊都涉及到了，嗯，那然后嗯，我给大家讲讲一些啊干货啊，可能非常大家可以仔细听一下这个技巧啊，就我你看V它的按钮其实默认是蓝色的，我怎么实现让它你看我们系统里面所有的主题色都是这个绿的啊，这个好看的这个绿色是吧。包括我这些链接，那怎么实现的呢？大家看一下我们的主题的配置。点击这个代码编辑器啊，然后打开。呃，代码明细里面它可以写什么呢？它可以写一些。

啊。就是CSS和JS代码，这是我们代码的部分，就是我们D代码五不代表的我们没有代码，其实我们也可以写一些啊这个呃，这个代码的一些东西的，这里的话为了让控制我们整个主题的一个部分。啊，然后我们就给他，嗯，在这里写一些这个主题的样式啊。主题样式的话。我们可以看一下下面这个文档，这个文档呢，是我们的V呢的低代码组件，它提供的全局的样式API啊。选举样式API，这里面会包含了一些一系列的CS变量可以控制，比如说基础颜色，包括文字的大小啊，还有一些啊等等的这个分割线啊，边框的一些控制啊，通过这种方式呢，我们可以去啊全局去控制，当然呢，这这个是针对我们的标准化的一些组件，我们会在组件的列表里面当中会进行一个标识，对吧？这里会有一些标识就可以控制它。

包括组件级别呢，我们比如说啊有一些组件，比如说像啊这个弹窗卡片啊，这些组件的话，它其实自己也是有一些样式A可以暴露出来去给大家去使用的，对这个的话可以就可以实现我们快速的样式配置，这里我就实现了一个绿色的主题啊，包括它的高亮的颜色，How的颜色啊等等的这些就比较简单，这里就可以配置一下。然后呢，注意大家可以看一下这个地方有一个WW就井号W啊，这个WD page root这个东西呢，是用来干什么呢。是用来把我们的样式呢提呃，提升优先级，就是我们需要它用写在这里面的话，它是一定会高于我们目前的系统提提供的这些啊一些样式的，所以是保证可以稳定生效的，然后呢，我们还可以写一些CSS样式，比如这里的话，我可以大家可以看到我这里实现了一个圆角的按钮，用来显示这个用户的实时的积分的一个东西啊。

这个能量币的一个这个页面，其实啊，大家也可以后面也可以看研究一下怎么实现啊，因为其实啊，我们都有了数据之后。我们其实可以灵活运用刚才那些啊那些啊方式来实现，那这里的话，这个按钮呢，其实它的样式就是通过我这里有一个样式来控制的样式来控制。哎。等一下。嗯，然后，嗯。这是我们的控制这个按钮，它可以让它是一个圆形的，然后固定在下面对吧，然后包括我们的图副本里面图片的一些大小宽度啊，这是我们的一个技巧之一啊，这是我们的主题啊主题。嗯，主题部分的话是我们啊可以通过这种方式来做的，那那呃，样式是可以通过这个style，包括页面样式或者是全局样式，还有就是我们的样式面板都可以控制，样式面板的话，它的问题是所以比较简单，但是它其实你如果是有很多个组件都有类似的样式的话，其实不是很方便，所以呢，我们推荐就是如果是共性的。

这种样式的话，我们可以在它的高级里面选择style，不选择class name绑定绑定一个，像我这里定义了一个class，然后我就可以在这里实现这个class，然后呢，我们的所有页面都可以去使用，这个样子的就非常方便。OK，嗯，这个是样式的部分，嗯，然后前端的代码逻辑啊，前端代码逻辑部分也给大家继续讲一下，第二个扩展的点就是我们其实呢，大家可以注意一下，我这个页面呢，其实是有一些呃，全局的或者是一些变量的东西的，就我我我所有的页面都能获取到这个用户的积分，那怎么实现呢？我新建了一个全局的叫做数据表啊呃，外部API查询，然后呢，这个里面呢，其实可以选择我们打卡，然后让它自动的去执行，然后呢啊，这里的话就不需要什么参数了啊，这个选择方法选择查询用户信息，然后它所有的页面上都可以通过query的这个data。

啊，然后呢，去拿到数据，我们可以测试运行来看一下。看一下这个数据，可以看到它的数据实际上就是我们的用户数据啊，再通过那个呃，就我们表达室里面的访问啊，谢谢这个同学在群里面的这个啊，这个感谢大家，如果有什么问题也可以啊这个啊提出来。好，然后呃。嗯，这是一个全局的que rate，还有一个页为相当于也可以建一些query，比如说它可以呢，呃，就是调我们的数据模型，它也可以去建一些变量啊，包括一些JS的一些方法，还有一些事件流，包括我可以甚至可以连接一个MYSQL啊，这个我之前搞了一个MYSQL，然后呢，我可以在这，呃，在这去声明circleq就是，但是呢，它实际上是在。

啊，服务端进行运行的，大家可以不用担心这个安全问题，如果大家对circleq比较熟悉的话，可能呃觉得circle非常方便，那我们也可以用这种方式来实现我们的一些逻辑，对。啊，这个是第二个部分，就是我们如何实现呢，我们的啊一些页面的这个。里面的前端的代码逻辑，还有一些数据的交互啊，然后看一下，同时呢，我们可以通过这种方式来去获取到我们整个上下文的一个就是各种对象的数据啊，比如说像呃，我们的刚才讲的那个全局的query啊，包括页面的query，它的一些数据都实时的可以通过这种方式来看到，然后一些全局的变量啊，比如说可以获取到用户的一些信息，系统的信息啊，环境信息啊，还有一些包括我们每个组件其实也是有一些API的啊，这个可以灵活的去运，运用起来，这个都可以串起来，维达呢，其实其实我觉得它比较核心的点就是。

我们所有的啊，这些模块之间呢，它都都可以通过这种API呀，啊这种啊来来串起来就会感觉到非常的方便啊，就是而且是非常统一的对。嗯，然后呃，第三个部分的话，我们啊就讲一下这个怎么快速搭建这个啊一个啊管理后台啊，那管理后台是最简单的部分，对吧？我们的数据库都建好了，那我们怎么去建一个管理后台呢？可能在以往的开发当中啊，当然可能如果研发同学可能还要自己额外的去啊，花点时间去写页面啊，看是用哪个组件库搭建啊。嗯嗯，然后，嗯。就是就会发现，呃，很繁琐啊，这个东西每次都是重复的，那怎么去提交呢？那我们就可以新建一个数据模型应用。然后呢，选择上你要管理的数据表，对吧，123456这些都勾上，直接一把说直接创建。

好，那这里你看我们有了这些，一一下子有了一系列的这些页面去管理，其实呢，管理后台的功能大部分呢，都大同小异啊，它都是一些增删改查的工作啊，比如说商品我们预览一下。这个商品呢，其实啊，很多时候呢，它就是添加一个商品，比如说我添加一个呃测试或者是说呃大大礼包什么的，随便来一个吧。啊，然后。来一个图片描述对吧，描述我就随便来了，描述介绍啊测试。能量币啊，这个600。库存1000个。商品详情啊，这个里面我可以传图片，可以放很多文字是吧，就非常方便了，就随便一搞啊。然后就副本嘛都可以。可视化的操作那些东西，比如加一个大标题。

嗯，测试商品。有商品呢，是一个。可以用腾讯字体。然后大大小大一点。啊，对吧。这提交。啊，这个地方没点到提交了啊，OK，已经有了，我可以查看啊，可以编辑对吧，我就可以做很多操作了，这个过程你看大家我我们这个过程实际上一行代码都没写是吧，就快速的去搭建出来一套这个。一个管理后台了，当然如果说大家有这种诉求啊，比如说默认的不满足的情况下，大家也可以进行二次的开发，这个就是我们业务当中，比如说我们假设说我们有个商品表或者是订单表，我们想去将来假如做了这个发货什么的，我们想把这个商品的订单状态展示各种颜色，对吧，我们就可以用一些自定义列的方式，比如说来控制。啊，比如假设说我们这个商品的这个，呃，库存我想自己展示，我们可以显示自定义内容。

哎，那这个时候我就可以自己去推一个什么文本什么的，然后呢，去自己控制啊，去自己控制里面的渲染，这个就可视化的操作就非常方便了，对吧。然后点啊什么这个这个可能要选一下那个字段吧。这个字段里面的。行里面的刚才是库存是吧。OK，哎，刚刚选的时候。想多了。Stock。嗯，可能选多了这个这个地方就先不管它吧，就给大家演示一下，这个其实可以做自定义列的，就我们这也不是一成不变的，所以啊，管理后台的部分是非常简单的，我们试一下吧，把这个发布一下。啊，当然发布之前我们要去配置一下导航菜单，那后台要可能要看到这些菜单剩下发布。嗯，然后在发布的过程当中呢，大家啊也可以看一下有没有什么问题啊，就今天课程其实主要的课程啊，其演示我觉得应该呃也差不多了，然后大家看看有什么要呃呃要那个要去问的，然后我们接下来可以交流一下。

然后这个应用我们也发一下。这个好像发过了，这个大家可以扫码也可以体验一下。然后嗯，这个发布结果里面。嗯，大家可以扫这个左边这个H5，因为小程序这个我是在体验版没有正式发布。然后可以扫左边这个码，可以扫描一下他的这个二维码，这个是我们已经搭建好的一个，这个今天搭建好的一个应应用的一个实际效果，嗯，是需要手机号登录的啊，这个因为我哦对可能讲到这里我给大家漏了一部分，就讲那个。啊，因为主题讲一个员工打卡，员工打卡这个，呃呃，这个应用啊。这里的话，嗯。

我们的这个。呃，打卡的话，它实际上怎么说呢，就是呃呃，除了我我我我没有讲这个身份的问题啊，正常的话，如果员工打卡的话，一般要接入一个登录。登录的话，V达这里呢，它其实是可以去啊接入登录的啊，登录的话我们可以在这里进行开启配置里面选择各种登录方式啊，然后呢，我我今天选的是这个短信验证码，大家如果如果是企业的这种应用的话，推荐大家去建一个身份源。审份员的话，它可以呃对接各种协议的啊，这个类型，比如说像OS这种行业标准的这种授权协议，还有这种summer这种协议啊，这种CAS这三个都是一些标准化的协议啊。常见的这些企业内部的一些啊系统，它的这个登录的协议，认证协议啊，基本上都是在这个范围之内，然后呢，去配置这个登认证员之后，他就可以实现说使用咱们企业内部的自己的或者是呃，第三方系统的这些身份来登录维达。

来使用维达的一些功能，那这里的话，今天这个例子呢，其实演示的是这个，我是使用了这个，呃，就是所谓的那个。手机号验证码的登录方式，大家可以试一下，就是登录一下看一看啊，然后嗯。在我们的这个管理后台，我看一下管理后台啊。管理后台部分，我点一下发布完之后，我就可以一键通过管理员身份，在我们腾讯控制台里面，我是可以一键登录的啊，然后大家可以看到这个商品啊什么的都可以啊，直接的去去编辑了这个商，虽然这个管理后台我们给运营做的或者给谁做的已经做好了，对吧。这个真的是几分钟就搞定了，所以嗯，管理后台这一部分是最简单的部分，所以我就不再赘述啊，嗯，然后嗯。

嗯，我看群里面有有人。呃，问了一些问题啊，我来尝试解答一下啊，就是这个群直播聊天里面。嗯，第一个就是说我们跟友商竞争啊，竞品对手的一些啊，这个竞品的一些对比啊，呃，我我说一下就是V达的话，首先它是嗯腾讯云的一个，嗯，就是腾讯接代码的一个唯一的品牌啊，就是我们腾讯的一个呃专呃就是就是核心的一个迭代码平台啊，它实际上呢，它有一个比较大的优势呢，就是它连接了我们的微微信和企微的生态。这个是我们啊，就是非常呃原生的，比如说我在演示那个APS或演示一些功能的时候，你发现我们对于呃，这个腾讯的原生的这些。生态的一些东西呢，其实是非常的联系紧密的，包括呢，我们在微信ID里面，我们可以直接的开发啊这个微单应用。

也可以呢，在企微，企微里面呢，然后做企业的这个啊，管理的系统啊，包括接入企微的一些啊身份等等的这些东西，然后呢，还有就是像呃，小程序的开发的，不用说了，就是伟大这块啊，对吧，我们对接的非常好。然后包括对接，像微信支付啊，啊，微信的各种能力其实都是啊，我们非常简单就可以对接入的，所以呢，我觉得V大最核心的地方其实是我们的一个，呃，这个生态的一个优势啊，这个是我们在呃腾讯的一个生态里面，就是我相信应该市面上应该就是最最最密切的啊，可能不啊不能说最啊，这个是广告法，嗯，就可能是比较密切的这个，然后。嗯。其他的话，我相信大家可以看了我们刚才的一个呃演示啊，大家可以对比自己使用的一些其他的平台，可以看一下整个过程啊，是不是是不是和流畅功能是不是满足，大家可以根据自己的需求来去。

呃，观察去，去了解参考。然后呃，我今天没有演示的也挺多东西的，比如说像这个啊，这个流程，流程的部分我是没有演示的，因为流程的话，在这个例子里面好像塞不进去啊，所以我就没有去设计流程的一些，比如说这种审批流或者自动化流啊，但是流程这部分呢，其实是可以实现说啊就是另外一位同学提问，提问的这个定时任务是不是能够满足，我们可以看看到这个流程的话，它其实是有一些啊，这个开始节点他可以去。啊，在这个流程里面的话，其实是可以去做一些啊，就是触发的一些事件，比如说像啊，它可以有啊这个呃，我们的定时的，还有自动的，还有包括对象活动出发的啊，这个就是我们就是可以做一些异步的任务啊，比如说除了刚才我们的APS实现一些。直接对前端的应用之外流程的话，我们可以实现什么呢？比如说每天定时在什么时间去做一些啊盘点啊，做一些啊商品的一些啊处理或者是做一些。

啊，反正是这种定制的一些操作对吧，也可以呃，在一个数据在入库之前或入库之后啊，去做一些啊事情，比如说啊给他增加一些字段，或者修改一些字段，这个是啊我们的流程能够去实现的。啊，所以这个其实我们的定时任务这块问题啊，其实可以通过这种方式来实现，当然也可以，呃，通过我们的云函数，然后来实现，嗯，定时出发类似于C这种东西，它是比较灵活的啊。这个也是也是一种。嗯，大家看看有什么要，嗯，那个还有其他问题吗？看这这会儿的话，我们可以解答一下啊。然后还有就是我们维达也集成了很多这个模板。模板就是比如说大家如果不太会搭的话，其实可以参考这些模板。

啊，去去了快速了解这个应用该怎么做啊，有一位同学说这个能不能够做成OA办公可以的V达呢，其实啊，其实主要两个场景，一个场景是啊，我们的小程序的这种偏向的这种C端的这种场景，就是很灵活很百变的这种千奇百怪的这种场景啊，比如说像一些啊营销活动啊，一些商商品电商啊，打卡啊什么的很多这种面向C端的。另外一个场景呢，就是OA办公的，我们也有一些这样的一些，比如说培训管理啊，啊包括这个物品采购啊等档案管理等等这些模板，这些模板的话，其实只是一个演示啊。我们有一个啊，就是我们可以安装在企微里面。实现这种企业微信内部的一些OA也可以独立的有一个工作台，然后可以把那个应用去放在里面，有一些代办通知啊，有一些啊功能可以继承一些啊产品功能吧，就是啊这里的话。

可以把整个应用可以搭建起来，嗯，这里的话我就不演示那么多了，反正这个地方可以大家可以看一下，嗯，这块是可以做到，就是OA这块场景是我们的一个核心场景之一啊。嗯。然后我看一下我们的。嗯，教程啊，教程部分我回到我们的PPT啊，就是嗯，有如果想了解更多的课程啊，其实一个呢，是啊，关注我们的训练营啊，这个训练营就是我们最近在搞这个免费的训练营啊，限时免费的训练营啊，这个运营同学也在搞了，有一些线上的学习和交流，包括有交流群，还有动手的一些实操课程，还有考试。嗯嗯，然后，嗯。呃，这个是一个点啊，另外呢，就是我们会关可以观看一下我们的文档和这个官网的一些视频啊，还有社区的一些资料，包括关注我们的公众号，公众号的话会经常发一些这个学习资料啊，比如实际上课程或者是像类似这样的直播都会在上面通知，我相信这个是比较有效的。

大家可以截屏去关注一下，嗯，然后呃，另外同学说这个有没有API的学习资料和课程教程啊呃，我这个大家其实呃刚刚里面提到就是这个，呃呃，我们的那个链接里面，PPT里面，链接里面啊都是有的，大家可以关注一下公众号之后，应该可以跳到我们的一些文档站，那这里的话，我给大家先简单看一下这个呃一些呃为他这边的一些技术文档的一些资料吧。这个我相信应该是比较详细的，就是也相对来说啊，就是会介绍了我们为大家整个的一些各个模块的一些功能，尤其是啊这个开发相关的是吧。

包括一些问题排查的方式啊，然后一些事件什么的，然后这是整体介绍啊，另外就是我们的组件，我们的API啊，这些都是有专门的文档，每一个组件都有它的文档，包括它详细的啊这个说明，然后以及啊，比如说我们前面讲到的这个它的一些。啊，样式API方法，属性API变量啊，一些变化什么的这些东西，包括一些有一些可视化的DEMO啊，这个很多，然后另外一块呢，是我们前端啊，在做搭建应用的时候，可能会需要调用到的一些数据层的API。这里呢，其实分了很多种类啊，有什么应用的，有页面的，用户权限的，设备的，环境的，上下文的，数据源的，流程的各种包括表达式，就是我们做一些计算的类型的啊，这些包括后台有也有一些open API啊可以看到啊，那这个是一块啊，另外就是我们官方的这个文档站。

文档站里面就是V大代码，我们可以看到。也会有一些啊这个课程啊。在这个地方的话，帮助文档里面有产品文档。文档里面，它其实是会有一些像API的一些服务端API，前端API，包括数据模型，然后以及这个每一个模块。包括它的一些介绍，产品的功能的介绍。啊，然后怎么应用啊，然后怎么说明这些也是在持续更新。对，这是我们的资料啊，然后当然我们实时更新最频繁的呢，实际上是我们的啊，这个可能最实时啊，实时性最高的就是可能还是我们要关注一下我们的社交媒体的账号啊，就是包括公众号啊，以及这个嗯，这个视频号啊，这些资料啊，大家可以去截屏扫码扫码关注一下。对，然后今天呢，我们课程啊，其实只是把核心的思啊，包括我觉得最关键的部分给大家讲到了。

那我我也给大家留一些课后的一个实践吧，我觉得呃，听的再多啊，不如这个自己去实践，你只有在项目当中去实践，才能真正的去掌握这些课程。所以呢，我们嗯，给大家留了一个啊，课后的实践啊，就是我会在今天的这个结束之后，把这个今天的我搭建的这个应用。完整的给到大家，让大家可以通过这个模板的导入方式新建一个维达环境之后。我们可以在控制台里面有一个，呃，叫做模板，模板里面呢，我们除了做这个安装啊，市面上的那个模板之外，我们还可以安装一个。啊，自建的模板，对，导入自建的模板。可以导入这个自建模板，这里的话，呃，我会把今天的这个，呃，内容呢，应用包括数据接口那些东西全部打包成一个模板。

然后放在我们的哪里呢？放在我们的公众号里面，然后给大家去下载。大家要关，如果想要去实践的话，可以关注一下公众号，然后后台去发送这个运动打卡，然后呢，获取这个下载的地址，然后就可以去。拿拿拿，拿到自己的账号里面去实践，去进行二次的开发和定制可以，关键是要掌握维达的一些功能啊。留了一些思考啊，一个是我们怎么样去实现啊，点赞。比如说我们今天不是有一个啊打卡广广场那个东西能不能实现用户之间互相点赞啊，就像朋友圈一样，对吧，这个是大家可以锻炼一下这个页面的交互。怎么实现这样的点赞这种啊这种东西，嗯，然后另外就是嗯。嗯，实现一个实物的奖品发放，对吧，我们今天都是虚拟奖品，那么能能不能够做一个啊，比如说实物奖品的发放，那这里其实要关注到什么呢？有一些像收货地址对吧，发货状态，物流信息啊，这些东西其实是要把这个。

关呃嗯把这个嗯哎稍等一下，把这个业务逻辑怎么摸透了，就大家可能要去思考一下这块该怎么设计，我相信如果认真听讲的同学啊，可能对这块可能应该不是问题啊。然后另外呢，就是要用一下V家的微信生态的能力，比如说尝试我们有一个部署打卡，能不能够对接微信的API，获取微信的部署，然后来实现打卡呢，而不是让用户去自己填的对吧？嗯，然后嗯，另外呢，就是嗯，在用户权限方面，能不能够说我我我把那管理后台做成这个。嗯嗯，就是企微的这种管理后台，做成我们企业内部的一个啊应用可以尝试一下，对吧，让我们后续的话再再做类似的这个OA应用的话就有经验了。

另外呢，就是如果真的想做电商，或者是一些做一些这种啊，对于数据的一个存储啊，可靠性啊，稳定性啊，高高效性啊，操作要求比较高的话，其实可以尝试使用一下我们的那个数据连接，就MYSQL，然后呢去连接一下呢，咱们的数据库啊，然后去尝试这个，这个可能高阶一点啊，可能针对于我们的。有基础的同学啊，就是有这个MYSQL这种基础的同学，然后或者呢，就是啊，就对我们今天没有演示的工作流啊，就是流程的部分。尝试能不能够通过可视化的方式来实现这个打卡啊？可视化的方式来实现业务逻辑，而不是写代码，对吧，这个也是一个挑战的一个点。嗯，然后，嗯。今天内容的话，其实主要是这些方面啊，如果大家看他最后这几分钟还有没有什么问题啊，嗯，如果有问题的话，我们可以，呃这个。

交流一下，如果没有的话，我们后面也就在我们的官方社群，大家可以加我们的官方社群，官方的一些公众号啊，包括交流微信交流群，包括训练营的这个社群，后面可以联系我们的开发者啊，伟大的开发者，然后寻求帮助啊，或者是跟其他开发者进行交流啊。啊去啊，后面通过我们今天的课程，以及后面的大家一个进一步的挑战，然后来锻炼自己的这块在维达代码这块的一个开发能力，然后我非常希望大家呢，后面能够。去啊啊很很很好的去掌握这些技能，然后去高效的开发啊咱们的应用。去获得更高更好的价值啊，这个PPT的话，我们呃也是咱们关注这个公众号吧，关注公众号，到时候我让那个呃运营同学的话，配置一个呃这个PPT的相关的一个回复吧。

然后来下载或者是进进到我们的官方群，我们也可以到时候在官方群里面去啊。啊进行回复，对。我看有同学需要这个领呃领取PPT啊，然后其实是可以关注一下相关的这个啊，公众号和社群对。嗯。今天的直播的话，我看，嗯，如果大家没什么问题的话，我们今天就差不多就到这里差不多一个快一个半小时了，也大家也辛苦了啊。嗯，如果没有什么的话，那今天我们的分享就到此结束，感谢大家的时间，祝大家以后开发啊愉快，OK，拜拜。