乐趣区

关于华为:华为云应用魔方-AppCube-创建问卷调查应用的使用体验

因为工作起因,笔者常常有一些创立问卷调查的需要。尽管微信小程序里有不少疾速创立问卷调查的工具,然而这些工具没有提供定制化性能,因此无奈满足我的需要。

近日在华为云社区理解到华为云上提供的 利用魔方 AppCube 这个工具,既能疾速创立问卷调查,又为开发人员提供了定制化性能,因而笔者第一工夫就申请了试用,将应用体验通过本文分享给大家。

华为云利用魔方 AppCube 是一款零代码和低代码利用开发平台,源于华为利用开发和数字化转型的实际,提供了云上无码化、低码化、反对多码化的利用开发模式,屏蔽了技术的复杂性,晋升了企业开发的效率。

每一位开发人员都能够通过点击下图的 收费试用 来对其进行体验。

咱们进入 AppCube 的工作台,点击 开始创立 -> 应用模板新建

在低代码专区的模板列表里,找到 问卷调查 (高阶) 模板,

单击进入明细页面,点击 装置模板 即可:

咱们会看到关上了一个在线编辑器,屏幕左侧的我的项目文件夹内,蕴含的就是这个问卷调查利用的实现源代码,全副通过模板生成。本文咱们首先来学习这个创立好的问卷调查利用如何应用,而后再来探索通过 AppCube 主动生成的源代码的一些细节。

点击在线 IDE 左侧这个 查看利用 按钮:

能看到上面的问卷治理界面 (Home Page)。咱们在这里能够创立问卷调查的实例。点击 创立问卷

能够保护问卷题目,Banner 和形容信息,让填写问卷的人员,可能高深莫测晓得该问卷应该如何填写,以及考察的目标:

点击 增加问题,创立可供用户答复的问题选项。比方咱们创立的问卷,想收集程序员日常工作中应用的编程语言品种。

点击保留按钮,而后点击这个纸飞机图标进行公布:

当这份问卷的状态变为 已公布 后,能够通过点击 分享 按钮,以二维码或者链接的模式,把这份问卷投递到目标群体去。

下图是我在手机上扫描二维码后关上的问卷界面:

提交之后,在问卷调查治理页面,点击 统计 按钮:

能够看到问卷调查的填写状况:

以上不难看出,华为云利用魔方提供的基于模板创立的问卷调查创立程序,其应用体验还是十分顺畅的,上手也没有任何难度。上面咱们就来理解一下这个基于模板创立的利用的一些技术细节。

咱们回到最后的在线 IDE 界面,左侧的 Logic,Model 和 Page,咱们能够类比成一个基于 MVC 架构的 Web 利用的控制器(Controller),模型(Model) 和视图层(View).

单击 Page 文件夹下以 HomePage 结尾的文件,发现这就是咱们点击 创立问卷 按钮的起始页面。

咱们无奈间接查看这个页面视图实现的源代码,这也是 低代码解决方案 的主旨:将利用的底层技术细节进行封装,确保终端用户可能 通过图形化的用户界面, 来开发满足本人理论须要的应用程序。

咱们点击 获取锁 这个按钮,从而进入该页面的编辑模式:

而后单击 创立问卷 按钮,就能够对这个按钮进行自定义编辑了,比方批改其文字:

咱们把 创立问卷 批改成 创立一份新的问卷

还能够对按钮款式进行批改,比方背景色,字体,暗影等等。

咱们对按钮的外观进行微调后,从新点击 查看利用, 会发现咱们对按钮的文字和背景色的调整,曾经立刻失效了:

在 Model 文件夹里,咱们能够查看视图里每个区域的 UI 元素,到底绑定到了哪个模型字段上。

咱们选中下图高亮的 Model 文件夹内的文件,点击超链接 Questionaire Definition Detail

而后单击 Name 字段,就能够查看到,问卷创立视图页面里,显示问卷名称的界面元素,绑定的数据模型字段为 form0.name

如果咱们之前在 Page 文件夹里的页面里新增了 UI 自定义字段,并且又想让那些新增的自定义字段反对数据绑定,那么能够在此通过 新增模型 的按钮,创立对应的数据模型字段:

在 Model 文件编辑页面里,咱们能够给模型字段削减一些表单校验逻辑,包含正则表达式的校验反对等等。

在 Logic 文件夹里,咱们能够通过浏览源代码的形式,理解问卷利用的控制器层面的编写逻辑。

咱们通过一个理论的例子来了解。下图是咱们查看问卷提交后果的页面:

咱们关上 Chrome 开发者工具,刷新页面,在 network 面板,可能看到下列的 HTTP 申请。从这些申请里,很容易就能找到返回问卷提交后果的 HTTP 申请,url 如下:

https://appcube.cn-north-4.huaweicloud.com/service/N277027076__Questionnaire/0.1.0/queryQuestionaireStats?questionaireDefId=cSOm000000wbWfX1Ak1g

从 HTTP 申请的响应构造里能看出,问卷问题的答案,ABAP,Java 和 JavaScript 三门语言别离有一份答案,临时没有人抉择 其余

这个 HTTP 申请的 query 参数名称为 questionaireDefId,其值为以后问卷利用定义的技术 id:

咱们回到在线 IDE,应用 Visual Studio Code 的快捷键 Ctrl+P,输出刚刚在 Chrome 开发者工具 network 面板观测到的 HTTP 申请蕴含的关键字 stat,搜寻后果列表里最初一条 queryQuestionaireStats,就是这个 HTTP 申请的后盾实现所在。

单击进入这条搜寻后果,而后双击下图这个 Script0 图标:

而后就能看到这个申请具体的实现代码了:

第三行的 import * as db from 'db',提醒咱们这个实现文件里蕴含了数据库的操作。

来到名为 Main 的 class,这就是返回问卷填写后果的 HTTP 申请的后盾实现入口。图例 1 的 description 字段,阐明这个办法用于实现 Query Questionaire Stats 性能,图例 2 的 QuestonaireDefinition.get 办法,通过 Questionaire 定义 id,返回该问卷的模型明细,而后在图例 3 通过拼接数据库查问条件 db.Condition,为行将发动的数据库查问做筹备。

最初调用第 151 行的 list 办法进行数据库查问操作。

咱们按住 Ctrl 不放,再单击上图的 list 办法,即可跳转到这个办法的实现文件里。这些快捷键 (包含前文提到的 Ctrl + P) 其实都是 Visual Studio Code 的惯例操作。

总结

本文介绍了通过华为云利用魔方 AppCube 来实现一个问卷调查治理利用的低代码实现,笔者首先给大家展现了基于 AppCube 的模板来创立该利用整个过程的高效和流程,接着简要剖析了 AppCube 主动创立的资源文件的一些细节。从创立和应用创立进去的利用置信大家不难看出:

  • 应用 AppCube 创立低代码利用没有任何技术门槛,即便没有编程背景的用户也能轻松把握;
  • 基于 AppCube 规范模板创立的低代码利用,给有肯定编程技术功底的用户提供了诸多能够灵便对该利用进行定制化的路径,高级用户能够利用这些路径来实现我的项目中各种个性化的需要。
退出移动版