00:00
各位同学,大家晚上好。然后有好久不见了,然后感谢大家来参加今天晚上的维达代码的分享和交流,我是维达代码的rockie。然后今天要讲的主要内容呢,是两块。一个是这个微达代代码的产品介绍,然后第二块的话是一个实操,就是维达代码基于下载gpt去搭建一个聊天的应用的一个实践。啊,第一部分的话,因为之前我们也讲的比较多,我们会快一点,然后把更多的时间留到我们的第二部分,好,那我们现在就开始。啊,我们先看一下,就是低代码的这个。就是开发方式啊,就是嗯,传统的开发方式的一个演进的过程啊,以及他们的关系啊,从传统的开发方式前后端到我们中间的语音开发,然后云开发的话,可能只需要关注到前端交互逻辑,到现在的这个低代码前后端啊,全部的做到了可视化的操作,那微代码电脑平台呢,本身是啊,有基于腾讯云的这个底座,搭建了一个可视化的应用搭建平台。
01:07
然后呢,本们融入了很多的腾讯的这些底层的能力和一些特色的行业能力,核心是一个一站式的云端开发工具平台。那同时我们与传统的低代码开发相比的话,为大T代码其实也有自己的一个差异化定位,那么核心呢,其实做连接重点是连接整个腾讯生态的一些啊的所有的一些。行业服务。TOC和to的服,我们的微信小程序,企微,腾讯讯会等等,那这些S平台的话,能够很快的达平台上完成这个对接和能力的集成,从而去降低整个企业的这个开发流程。和接入的成本。看一下台电脑能做什么?首先啊,最常见的外B端去PC小程序,我们主打的小程序,然后尤其是还有一些企业门户,包括一些落地页的场景,同时我们也支持一些企业内部啊,常见的一些管理系统。
02:13
像一些啊,客户管理,CRM,人事管理等等。回到前面说的这些,那我们整个这搭建系统。上面这些能力是基于怎么如何去做的啊,今天也就重点讲后面几个核心的能力啊,首先第一个是可视化的拖拽。其实也是第一代整个的核心组件了,可视化的搭建的话,它其实支持所有的这个各种各样的,就是多样化的这个组件,然后通过拖拽的方式来完成一个各种布局。然后我们也有。各种丰富的这个图片,表单,布局列表等等。然后我们接近有有70多个组件,然后我们也支持后PC的后台管理小程序的啊,包括啊整个的一体化的可视化去通过组件投胎去完成,相当于针对一些不是特别专业的开发者,也能比较快的去完成这个应的构建。
03:13
那第二步呢,是我们的这个可视化的流程,以及画布网,其实这个核心是去构建一些自动化的流程和以及一些审批的流程,那这个话布也是通过拖拽就可以去完成这个搭建,这个其实很多时候呢是去啊跟页面的可视化进行一个协同,他可能更多的是啊专注在一些后端逻辑的可视化。那说这么多的话,低代码的开发流程是什么样的,我们可以简单看一下,对比传统开发的呃,架构设计来,从架构设计到数据库建库建表等等,其实他的流程是会简单很多,主要的可能就就是三部啊,那后面我们也会等,后面有机会我们也会开啊,针对啊维达低代码开发方式和传统低代码方式,他们之间的更细的拆分是如何去做映射关系的。
04:04
那我们可以从这都会看到,基本上这三步都可以在云端完成,从在线创建应用,到在线的这个应用页面的设计和开发,到最后应用的一键发布,包括发布之后的运维也都是在云端去完成。然后一定程度上我们也可以在这个过程中去适配各种啊多端以及一些啊相对复杂的一个运维的一些操作。OK,然后同时呢,我们也支持呃,很多存量客户啊,就是比如说我们之前已经有一些小程序或者外部应用比较快来集成到V代码。然后更加方便的来进行这个增量功能的开发。所以我们也支持小程序和外部端的的全代码混合开发,同时也支持小程序的这个主子包的混合开发。
05:04
这是这个针对这个全链的一个小程序运和外部运营的一个情况。对于中小,还有对于中小企业的一些政策化需求的话啊。本身代码提供比较丰富的这个组件库,然后我们整个组件库底层是开放的。然后包括然后是整个是全代码的方式来构建我们的这个组件库,然后。然后能够很就是很方便的能够去集成到维达的啊,整个应用编器里边去,可以在编器里面拖拽自己的自定义的组件库里面的组件,这种方式呢,也方便了,就是很多的企业的话,比较容易去沉淀自己的it通这个对应的自己的it系统的这个知识,你自己开发基于自己的风格开发的组件库的话,你其实还可以在其他地方可以再进行一个复用。然后也是完全的自定义的样式和UI啊。
06:03
那最后就是说,其实也是比较关键的一点,就是。很多情况下,我们为什么选择大地代码,在最前面也说了,我们的一个差异化的一个优势和定位,就是区别于我们各种其他的地方化。啊,微代地板有个天然的优势,就是我们跟微信生态,尤其微信小程序这一块是无缝的一个集成的,可以非常方便的在微ID代码平台上去开发小程序,发布小程序,包括预览调试小程序。整个是跟。微信小程序的开发ID是集成在一起。同时,我们也支持。企业微信的应用的一个一键发布到企微的工作台,包括我们跟企业微的这些组织架构啊,人员管理这些信息的一个同步。然后也是通过一个可视化的配置可以去完成的。好吧,低代码的那个维代码的这个这个核心能力和定位呢,基本上我就讲到这。
07:03
主要的时间留到我们第二部分啊,也是今天重点要讲的就是如何基于啊。下载gpt来搭建我们的这个聊天的小程序应用,好,首先呢,来看一下我们做这个业务之前的一个准备工作啊。首先有三个部分,第一是我们首先得有个小程序账号,如果这个咱不用说,就是大家可以自行注册,然后企业资质或者小这个个人资质都OK,然后第二步的话,开通微达地代码,这个也不用说了,这个我们现在开通的话,也有一个一个月的免费的试用期,大家可以去啊体验一下。第三部分也是比较重要的一个模块,就是啊open AI的账号,因为我们都知道下的gpt的话,它是本身是open AI旗下的一个自己的一个模型吧,它现在的话我们。啊。
08:01
整个的这个聊天应用啊,是基于GPT3GT3它开放的API来进行一个呃服务和对话的,所以的话,我们有个前提的话,就首先得有他的一个账号,我们才能拿到他的这个API,所以这一步的话,可能大家需要去注册一个open的账号,但这个账号注册的教程网上也特别多,大家可以去搜索,然后注册成功之后的话,可以去在个人中心里面拿到这个A,然后可以复制下来啊保存,然后留到后边的步骤用。啊,这里有一些文档,待会我也会讲到,主要的准备工作就是这些,然后我们再看一下这个单的聊天机器人应用的一些。从界面上它看分哪些部分,然后核心就是四个,呃,四个一个是。那个整个的这个聊天界面,这个我们如何用微大代码去快速把它拉出来,这个基本上跟我们平时用的微信聊天界面是差不多的,然后大家也可以去自由发挥了,然后第二部分的话,我们就是一个数据查询接口,也就是说我们如何根据拿到的发送信息去请求这个远程的AI模型。
09:17
然后能拿到对应的这个数据的返回。然后第三部分的话,可能就是整个UI和后,就API数据的这个联动和渲染,如何把数据。动态的表现到界面上,然后。右边那个图其实也是一个整个是个用到的比较主要的一个数据结构吧,就是我们聊天记录大概分这个。这个response就是说一个回复,这个request就是我们发送的这个请求,就是提问的内容。然后。最后一块就是整个发呃,发送事件的一个响应的配置啊,就是我们可能核心的一些逻辑和交互都在这个发送按钮上,核心可能是这四个块。
10:03
嗯,会,待会儿会一一来展开讲。那我们现在就差不多就可以开始了,然后大概分那么几步,一那个我会待会在我们的这个浏览器上给大家演示,然后一步步来进行一个拆解。好,我现在就停止这个投屏,回到我们这个。界面。首先呢,那个就是。这个前提假定大家大家都三个准备工作都做好的前提啊,就为大已经开通,然后小程序也已经开通,然后那个openi的账号,就是刚刚说的那个API也已经拿到啊,我们就可以直接来到维达的这个创建应用啊,我们可以随意的创建一个,我们可以选择从空白创建啊,直接点创建一个自定义应用就可以了。
11:06
然后这里我就直接用我之前创建的一个现成的应用,我就不做那个啥了,就我们可以看到也是一个空白的,可以直接在这新建一个空白页面就行。新建一个后台页面,然后这里那个。随便去。OK,那我们可以回到还记得我们刚刚那几个步骤啊,首先就说先完成这个界面的这个。配置。好,直接。拖拽。我们可以知道,就是前面最最主要的这个聊天框,其实是一个聊天记录的一个滚动容器,所以整过程呢,我们可能一个核心的一个外围组件,就是我们的滚动容器组件。
12:05
可以先把投进来。那我们在这里面呢,就会可以插入的具体的聊天内容,然后呢,除了这个滚动容器呢,我们还记得有一个发送输入框和发送按钮,对吧?啊这个这个。第二个组件前放到放到这个滚动容器。后面。那滚动容器,那我现在开始往里面拖对应的这个组件内容啊。想问一个负极的仪器?然后紧接着。我们在。这个我们再我们的。然后你们来拖我们的叫。回复吧,向回复。
13:01
好。消息回复的一个容器,这个容器里面呢。如果我们还记得那个界面呢,可以先把待会把这个。这个偶一下,方便大家记下。我们这里面是有一个头像和一个文本框,对吧,可以接。一个。图片,一个文本。那这个图片的话,我们会。配置稍微配置一下。可以小一点,默认是三,差不多头像大小80就可以。
14:01
然后这里可以先选一个任意一个图片啊,我这里就先随便选一个,当然可以换成自己的,然后当然后面也可以换成动态的,这个就大家的需要。然后。紧接着我们配一下这个原本。那针对这个回复消息的容器呢?我们选择居住。嗯,默认是这个弹性布局居左之后的话,它整个会在。然后呢,你看一下现在还是比较紧凑啊,其实可以啊,简单设有一些定值,包括这个。啊,这个。圆角值,那它整个会看起来会比较好看一点。这个。就开始。是一个圆角。在。
15:00
是的。文本差不多。是不是?然后给他一个宽度吧,宽度大概4%的60%应该有一个。可以看到这个文本离图像比较紧,可以给他稍微来个market。这些都可以,整个看起来稍微宽松一点。那边去把它设一下。然后呢?我们可以设下这个整个滚动器的位置啊,做一个区别啊,其实我们也可以看到啊。
16:05
我们常用的微信聊天框其实是一个简单的淡色背景。我们在这里简单一个。淡颜色的一个背景色。灰色。差不多吧,先用这个看一下效果。然后呢,现在我们可以给文本也是一个景色。可以选一个白色。可以看到这个基本的效果已经有了啊。然后还有一个。编剧,这里也可以设一个边。
17:02
差不多。好。然后我们再给他加一个。这里加一个,因为我们后面这里还有个容器啊,待会我们会把它就是底部的这个发送按钮。然后会给他设一个固定位置,这个待会我们下一步分,然后所以在之前的位置来留出来,先随便设一个。回到这。滚动容器做完,然后我们接着容器。嗯,基本上效果差不多了。那我们这个时候呢。就是。回复就可以了。然后我们。接着做提问,这个就是对话框的练习册,这个时候可以偷个懒,直接复制上一。
18:08
把它挪到平级的位置。这里我们就叫提问啊,一个回复一个提问,好,然后这里可能稍微调一下。位置,把文本放左边,然后呢,让他。去对这个。OK。然后这里给我。这里设一个。好,我看。上面也可以设一个编辑。太紧了。这里了一个编剧。
19:05
这个是。对不起。然后。换一个背景,这里就是提问的时候,我们也可以区别一下这个消息的颜色。用那个。微信的绿。就先用这个,这个大家可以自己去调啊,这里我就不花太多时间。OK,这个。简单的这个。回QA的这个配置应该是差不多了。可以看看。话相配。
20:02
下面。我们来做一下底部。底部的话呢,它是一个。多含的速度快。一个东方输入框和一个按钮。然后我们先那个我们的动画输入框。一个按钮。一些啊。做一个。布局布局。很可以。然后。哦。
21:00
刚开始。然后。这个相应的一些。标题这些我们其实不需要,所以就把它先隐藏,包括这个字。统计,我们也不需要你做个简单。可以说,请说您的物质。OK。这个。宽度也可以稍微调一下。70%。三七分一下。好。一个基本的,然后,但是你看现在其实是。跟着在动的,所以我们要把这个。底部固定住,那我们这个底部容器哦,定位选择不对。
22:07
然后具体的我们就直接离。你先数。后去。左也是。然后。可以看到这个背景色稍微有点问题,所以我们啊。加一个。白底。OK。华为正常,但是还是可以微调一个拍进去啊。因为这个可以看到这个底部啊,其实是尤其在在一些啊,现在那些iPhone的新的X之后的手机的话,可能会有遮挡那个。
23:00
调的话,我们可以简单。加一个判定值。OK,就这些具体的值,大家也可以去。微微调一下啊,就是其实这个样式面板的调整,跟平时我熟悉CSS的话,或者熟悉我们的非码的话,就是整个逻辑和流程是差不多的。这里我就。先调一下啊,也可以看到这个。界面基本是差不多了。那我们现在界面完了,然后我们啊第二步啊,就是跟数据相关的一个操作,数据相关操作我们嗯,可以先建一个变量。就是我们的聊天记录的,这个比我们叫。这个选一个对象,然后选我们相应固定的这个静态值。
24:08
这里我刚在PPT里面有啊,就是这个。初始值,那直接可以。啊,这个变量,然后我们再建一个这个变量呢,其实实际上用于就是来存储这个聊天记录,那我们还需要一个变量。那这个变量是用来存储我们这个提交的问题输入框面,这个问题就我们叫tax。第二个变。然后第三个变量,我们啊会用来做这个。
25:01
发送的这个状态的控制,但这个可要可不要,因为这整个。比较简单,我先建吧。就是为了在交互上。整个。会更顺畅一点。然后就默认就牵不动它。就是否正在加载。那这个变量建好了三个,我们其实整个就需要三个变量,基本就够了。那核心要的主要是两个。然后我们这里可以试一试给我们。绑定一下刚刚新建的变量池。哦,在这。嗯,选中这个。容的普通容器。一个我们刚刚定的这个变量,全部变量这个聊天记录这个。OK,好,紧接着呢,给。
26:00
回复消息的文本。妈的。具体内容。循环对象这里回复是response,就直接。对吧。然后在这里。还有一个提问。这是request。循环里面。应该可。这个我们可以看到有一点。其实是。没有换行,没有选,直接让它对齐就行了,这个计划也OK了。然后大家可以看到这个,其实这边的数据已经是那个换成了我们的动态的数据了。这里刚刚可能有块白的,应该是刚刚只。滚动容器的直射的过程。调小一点。
27:02
2550先试一个。可以改一下这个值这个地方。可以用。默认值来代替,然后等一下我们会整个也会把它换成变量的值。然后这个高度大家也可以动态去控制啊,然后回头把我们这个拍进去。进行这个切换,像这里的边距间距啊,大家都可以去调一下,这里我看还是稍微有点紧。作为。一个。稍微正常一点。
28:01
然后。这个图画。然后这里其实如果大家也存存动态数据的话,也可以直接在这就个版到那样版成你的这个UR地址就行,就是你的头像的U址,然后这里就直接选了一个。大家可以去修改。呃,数据已经换成动态了,可能现在其实就做。关键的。就是去。我们的API。在这。然后可以直接在这个新建API的时候,然后选择我们的这个自定义的API在这里。然后。都从空白创建就行了。然后不需要做太多操作,因为这个已经创建过了,我这边就。这个进来的话,基本上这个样子,然后呢,可以添加一个新的。
29:04
就是你创建空白KPI之后呢。这里方法可以自己。自己自定义啊,这里就中文老师给我提问,然后这个标识可以用随机生成类,可以自己区,然后意图这个基本上没有什么影响,然后这里就是关键的几个步骤,其实是需要我们把呃,Open AI的这个接口给填进来,以及对应的方法,那这个东西我们从它看到,我们可以之前我在这个。准备工作里面有提到这个文档啊,这里我打开看了。在这。会看这个官方的这个文档的话,如果我们是用它的文本模型的话。可以直接看到他的AA。可以。这create a completion。
30:00
那这个地方我们可以看到它的调用方式啊,是它的演示的是一个。然后它接口是这个。直接可以把它复制出来。然后content type是这个Jason,然后这个。Authorization的话是就是我们刚刚提到的这个apik,把这key填进去就行了,最后是这个啊请求题,也就是说我们post之后的这个形体,它其实也是个介词结构。然后所以我们知道这些信息之后呢,我们直接把对应的信息啊,映射到刚刚我们的这个。搭建这里。这个发现这里PI填进来,然后post方法。那这里添加个入仓,其实我们刚入仓就是我们刚刚说的文本这个自己可以任意定义一个2.0。类型的文本就可以了。然后呢,这里就是刚刚说到的几个关键的。
31:00
那个头说明这个。可以。可以。还有一个关键的就是。他的那个AP。A的话啊,大家注意了,就是在登录之后,个人中心里面就可以看到。然后。但是需要。做一个。就是把这里的这个UAP这里替换就行了,这个这个地方,这个这个地方不用去动。可能你是拿到一串16位左右的一个密钥,那这里呢,我就不做远伸,因为我呃我自己。就是每个人可能都有自己的一个API,拿到之后粘贴就行了,那这里我就暂时不做演示,然后。Body这个地方的话。
32:00
我们选杰森他们这里。这个地方。然后他也有些参数啊,就比如你用什么模型,就是是文本的达芬奇就是GP3。啊,这个是提示语,就是你提问的内容,这个max token是每次消耗的这个token的值,因为本身你一个账号调用API的话,会有一些本身的token的消耗,这个temperature是应该是随机性啊,本身啊你是要随机性高一点还是低一点,然后可能会反映到你回答的就是AI给你的模型回复之后的这个答案的准确准确性。然后这里就先用默认值。然后把这里关键的一个换成我们刚刚定义的这个。变。
33:03
这个就是这个。好了,基本上配置线就是这些。啊,这里这个入参会等一下会给到我们的这个页面的调用事件的时候,做一个传参传进来,传进来我们再传到呃,Open的这个接口。整个整个请求这个API定义就是这些,然后因为之前已经定义过了,我就直接可看一下。基本上是一样的。不需要做什么配置,然后这头可能换成你自己的,这里我直接用一个代替吧。然后可以用这个方法测试个。测试。周杰伦。的新专辑,随便说一个。
34:06
可以看到这个返回了。这个就是我们定义好接口之后啊,可以在这个地方进行一个测试,然后确保自己的整个接口定义是正确的,以及跟远程服务的这个联通性也是OK的,这样我们才能方便到啊,给刚刚的业务页面搭建的过程中,才能够跟他进行一个联。可以看到它的返回值啊。时间和消耗的这个的量。模型以及它的啊回复的内容可以看到它是一个choices,就是一般情况下的话,会给你多个备备选,那我们现在默认是六个备选,所以我们choices它的数组只有一个成员,只有一个属性,然后他的回复内容是这个text字段里边。这份2020年发布了第13个点,就因为现在应该是open AI这个GPT3的模型是数据是截止2021年,我们记住啊,所以这些数据都是其实121年前的这个数据,所以他回答也是2021年的升级。
35:07
那这里我就不多说了,可以点个出舱映射在这,然后对应的出仓结构就在这有了,我们实际上要拿到的是什么呢?其他的数我们其实都不需要,核心是这个。Choices里面的对吧,就是他回复的文本内容。点保存就可以了。这个我就不做那个啥定义好之后你就回到。页面转。前面的几个数据API也用了数据变异讲完现在就可以开始。这个发送按钮配置事件。那发送按钮其实的话,嗯。核心要做什么呢?就是我们比如在这输入输入内容之后。输入内容之后啊,其实。
36:02
其实是需要。啊。发送给API请求了,所以我们这个点时可能配对,我们就需要把它配一个点击事件。然后呢,但在这之前呢,我们需要拿到这个输入框的值,那这个怎么拿呢。可以选中这个输入,输入这个组件。然后我们这里可以。下,我们可以看到它有一个改变的事件,就是change事件。事件变。然后把它复制给刚刚我们新建那个的这个。这个变量就是默认选中当前的就可以了,不需要去做什么配置。应该可以了。那这个值已经拿到了,并且存到T这个变量里。那我们现在就。给发送。这个调用API的这个事件,那我们这里其实直接调用数据源方法,因为我们所有的API都在数据源里边。所以可以看到刚刚我们新建的那个G的API。
37:02
然后选择默认这个提问的方法。这个这个是我们定义的,这个差就是刚刚定义的。还记得在这儿有一个入仓。提问内容就是太。那我们直接把在这呢,就把刚刚的这个。拿到的换成值传给他,我们也是选可以了。保存,那这样的话就是。这个调用就就OK了。然后呢,接下来我们要做的事情就是说啊。调用这个API成功之后,怎么把值拿到?我们。可以看一下。成功。
38:02
成功史。也就是说。这一个关键就是这个API返回回来之后,我们要做什么事情。我们可能有这么几个事情啊,一个是把值拿到,然后把它这个返回的内容存到我们这个。这个这个聊天记录这个变量里边,我们刚刚是定义一个数组嘛,所以把这个值进去,然后第二步的话,我们还有一个这个加载状态的这个修改。对吧,就是我们。当然你没有配啊,我们需要配置的话,比如说。点击发送的时候,我们整个。默认是开始。加载就开始去请求远程API,然后这里成功之后呢,那就停止请求API,那就是这个状态就做一个修正就可以了,那我们现在先关键的一步啊,就是先把这个返回值。成功时拿到这个值,给到这个数,这里我们还是一样的,我们的这个变量值选中这个。
39:06
然后这个时候呢,我们把。这个。其实这个其实。相当于往以前的这个。啊,数组这个聊天聊天记录里面的一个新的指标,所以其实这个时候你直接把之前的这个进行个构。然后呢,再构造一个新的数组,再给他,这个情况下,数组的这个结构我们之前也知道了,这个时候我们是。他。返回AF是回答的值。这个值怎么?这个值我们如果熟悉未大的同学可能都知道,就是我们每一个事件在上一个事件拿到上一个事件只是用event detail,因为那detail,那实际上大家可能还记得那个结构啊,那个结构是在choice上,对。
40:08
第一个。现场只有访问一个,一个备选答案。OK。这就可以了。你把它保存一下。好,就是就是第一步成功时的一个反馈。然后呢,刚刚说了就是说啊,有一个加载状态,我们也在这配置。其实是在。点击这个发送的时候呢。对吧,点击发送的时候呢。会发起一个请求。这个时候。可以给。点击十个再加一个变量。
41:01
这个值就是给loading的状态,刚刚默认是。那个无价的,那我们现在其实。就是一旦点击,那这个请求就开始了,对吧,点击这个请求就开始,然后。一旦结束呢?一旦这个返回成功之后呢,那这个。状态也进行扭转。就是刚刚说到的这里,在成功时。给它做一个变量复制,这个时候。这个值就是。这个用。然后现在再把说的这个加载状态挂上。刚刚也在说这个变量,其实没给他绑到这个里面去。下面可以看。可以简单先试试啊。
42:02
出来。还在请求。失代,或者是一个的。然后。现在我们在在做第二步。请求,刚刚可能发起了请求啊,如果大家要调试请求问题,可以打开直接这个开发条的工具,这里network这里可以看到我们前面发的请求。然后我我点了一下这个发送按钮,应该是发送了一次请求,然后。所以可以看到刚刚有一次有一个信息的这个post弹出啊。其实还有一步没有做的,就是说发送之后,你本身自己的这个内容。自己的提问的内容也得把它发上去。
43:00
这个时候怎么做呢,其实也是跟刚刚这个请求一样的逻辑,就点击之后呢,也做一个标准赋值。那这个赋值还是给它。然后呢?一样的。一样的结构的方式。这个的话我就直接复制之前的啊。之前我们写了A部分。对吧,那我们在这就直接这个逻辑都一样的解构我们这个数组,然后呢。这个这个我们是发送请求,那这个呢,实际是。好。这个。就配置完了。OK,我们看一下,我们就是所有的这些配置项。然后这个是这个。
44:01
这个OK,这个是扭转状态。加载中状态的。这个是。这个是把这个提问内容放到数组里的。然后这个这个地方是。这个是发请求,请求这里我们。没有什么问题。些问题。这么一个状态。加上。整个配置应该是这些保存一下。这里我们在发送,诶可以看到这个加载状态有了,现在就是在加载就发送中,因为我们本身这个API啊,它是在境外,所以整个加载过程可能会比较慢,这个。
45:02
有个这个点还是很重要的。有问题,这个就。可以,这个时候如果发现调用问题的话,可以直接在这。看我们的这个请求录制啊。可以看一下。啊,这个地方应该是。你看可以看到这个参数text的值是空的,所以呢,我们可能是刚刚那个值是有问题了。哦。可以回到这个地方再来确认一下之前的配置线。打个问号。
46:09
这。有问题。这里没有上。好了,这个负值。再试一下。周杰。新专辑。大家可以看到这个已经有了。也是我们的提问内容已经进来一个这个回答内容也都进来,然后刚刚这个加载状态也正常。整个主要的流程应该都可以了,当然我们也可以看到还有一些问题。这个调试面码啊,再再给大家提一下,其实还是很有必要的,大家可以去看看,有一些报错内容啊,网络请求啊,现在的内容,嗯嗯,中间漏了什么东西,也来检查一下。
47:11
还是很完整的条件的话,用这个element这边自己打些日,大家可以看到。没回来,这还漏了一些,比如说像这里有一些空白的情况,那可能是不是有时候你的值是空,那我们这里可以加一个选中这个回复消息容和这个消息容。然后在这儿。可以条件尝试这里。我们如果无值的话,是不是可以不展示?它无值和有值的判断依据是什么呢?对于这个回复,限我们rest的值是空的,我就不两次否。看到没有?在这个这个地方也一样的。我操。
48:03
去。看到这个比较。简单的一个聊天。聊天记录连宽应该是可以了,其实你再往下做还是也还有很多东西可以做的啊。就比如说我们。可以把我们的这个所有的聊天记录进行入库,其实我们刚刚是新建了一个啊对象数组对吧,一个对象数组,那这个呢,其实是整个是存在前端的,那很多时候呢,我们可能想把所有的聊天记录存在云端,那这个也比较简单。我也我我我可能时间还可以跟大家再讲一下,然后呢,第二个就比如说我们这个自动滚动。这个也可以去做。然后你看这有个排。都可以去进行一个微调。可以调大一点。就跟跟那个咱们本身的这个输入三就可以。
49:07
然后在每次。啊,进行有新的这个数,就新的数据到数组的时候呢,进行一个滚动,就可以直接调我们的这个啊滚动方法就可以了。这里我也不做具体展开,但是我刚说的第一点就是说。可以做的第一个点就是把我们的数据,整个聊天记录进行一个入库存储,这里比较简单,给大家讲一下啊。我们依然是新建一个数据模型。然后。比如说聊天。是这意思吧?然后。有默认生成的这个标识就可。然后再新建几个。其实这几个字也跟他是一样的。
50:03
一个就是。回复。新建一个。那就是。就是。提问。OK。基本上不做,那大家可以按需再去加啊,比如说提问人啊,提问ID啊都可以。持续。然后呢,这个模型建好之后,我们可以直接。在什么时候去提交到入库呢?其实这个也很简单。直接也在第二。数据源成功之后。可以。在。但是成功之后再调的这个数据源。创建记录。那对应的这个回复呢?回复,那其实就是。
51:01
啊,刚刚提到这个返回值嘛,对吧,返回值。然后。对应的这个。对应的这个提问的话,也是我们之之前的一个变量值,我们也可以在这给他。现在直接把先把回复,不知大家还记得吧,就是。然后。四零。X。好吧。OK,这是回复,还有个提问。其实就刚刚已经处理过了。可以。整个一个两个啊,默认选记录就行。
52:03
可以了。我们再再试,再试一下。你去哪?有,当然是看有问题,但实际上那个值返回了也是2021年的数据啊。大家可以看一下。这个请求其实是成功的。停止。然后。可以看看我们的数据啊。数据。刚刚的数据应该是有。是不是?过程是在这。没有把他的这个数据全下来。
53:01
再来一次。保存。OK。可以看到这正常。我们可以看看。的数据。有了,提问和回复都有。可以看到。对了,如果这是就是自己的的话,其实所有的啊。研发完成之后发布到。小程序也好啊,还是一个H5也好啊,我们都可以把对应的这个,呃,聊天记录都存到了,原因说。整个搭建过程大概是这样,然后我们剩下的应该就是发布了啊,发布的话我们这里支持小程序,如果刚刚大家注册过小程序的话,直接在这啊。
54:06
进行一个授权,在微大控制台这里有一个小程序的开发认证。把自己的这个小程序。给个授权就行了,这个是企业或者个人都可以。然后之后的话。在这进行发布,那我们这里的话,因为既然我们的小程序已经发布过了,我在这就不做了,然后可以直接发布一个吧。整个开发过程大概是这样。可以看啊,这是这是我们啊。完成发布。
55:00
还在发布中。按颜色也配一下。让他发给我后台发过来就行。按钮的颜色我们可以。一次。这里我们其实可以用取色器啊,为了保持一致的话,我们都用这个颜色。OK。依然不是很好看,这个就大家自己调吧。好,今天的主要整个搭建过程大概是这样子,发布成功之后直接预览就行了,这里我也不做赘述了,小程序实验了成功之后,会有个体验的二维码,直接扫码可以体验。没问题的话,可以直接在这一键提交到微信的后台。我会进行一个。在这里会进行一个审核。就是那个微信那边会直接帮我们审核。开发这个过程呢,是直接在维拉就可以一键闭环完成。
56:00
OK,然后。到我们的这个内容啊,可以再简单的回顾一下啊,整个搭建过程。首先进行一个界面配置,界面配置之后新建变量和新建的数据,到最后第三步我们送啊给发送按钮去配一些事件。然后把返回的数据在页面中进行一个渲染。包括我们刚才说的对。对这个数组进行结构。然后最后完成开发。然后进阶的,就是说聊天记录入库呢,刚刚也。也进行了一个。大家简单做了一个演示。其实都很简单,这就是本身低代码的优势吧,就是你整个的一些数据的操作,用的操作清单,基本上几分钟就可以完成。相比写代码的话。今天的主要内容大概是这以上这些啊。然后随便。
57:00
看看大家有没有什么问题。我也欢迎大家关注我们微来的代码的公众号,扫码的关注,我们会定期会推出一些,嗯。新的功能的预告,嗯,包括一些教程,实操的一些教程。都会不断的待遇。更新。那剩下的时间看看大家有没有什么问题。啊,我今天的主要内容大概就是这些了。
58:09
嗯嗯。我看很多问题啊,群里面已经有回复啊,就是在聊天,我们的这个小助手也给大家做了回复了。那要是没什么其他的问题,我们今天就到这了。再给大家啊最后一分钟吧,八点半准时准时结束。朋友提到这个维纳是怎么收费啊,维收费呢,其实是有几种方式啊,可以如果大家在维的官网的话就可以看。后我们默认是提供一个月的这个免费的这个套餐的,就是一个月的套餐,大家。可以。完全去体验,然后呢。
59:00
同时呢,我们也有其他的版本的套餐,比如说我们在这儿。嗯。不同的套餐配置不同的资源包,然后对应的一些CD的流量啊,静态cos存储啊,数据库的存储都不一样,这个呢,一般默认的版本就可以了。然后。套餐我们可以跑到这儿来给大家看一看。这可以看的话,就说我们有基础的团队版,然后有企业版,企业版不同的版本的价格也不一样,然后我们的基础的团队版应该是在啊,一个月大概是不到100块钱,几十块钱。发布的代码可以看到,可以看到,发布之后其实本身就是一个,如果是H5的话,就是H5的一个链接地址嘛,大家可以直接去查看源代码可以去看。
60:03
嗯,OK,刚刚有问那个check里边除了request和这个response,还有一个,还有个其实那个用途不大啊,那是我其实是为了,但是为了调整这个排序啊,可能有的时候。有一些置顶啊,就是你这个就看大家的需求啊,就是做更更多更。很全的,更复杂的功能的话,其实也可能不断的去完善数据结构。还有同学问,这个生成代码导出来开发工具可以的。不然可以导出来开发者工具,就是如果是微信的开发者工具的话,不然可以导出来。还可以直接调,就是我们在这有一个微信的预览,你可以直接调这个微信的ID。按照我们这个步骤的话。装一个我们的这个C。行就可以了啊,就当然你前提把开发的工具都做好,然后就可以调起。
61:02
可以进行预览开发。看还有没有其他的问题。好,那我们今天的直播就到这里,然后再次呼吁大家可以关注我们的这个公众号。关注更多我们的这个关于低代码的临时信息。啊,今天就谢谢大家,我们下次再见。
我来说两句