通过华为云Astro轻应用数据源将应用中的数据呈现在华为云Astro大屏应用
应用场景
问卷是一组与产品、社会活动等有关的问题,或者说是一份为进行调查而编制的问题表格,又称调查表。调研人员借助该调查表可对产品使用过程或社会活动过程进行准确、具体的评估,并应用社会学统计方法对收集到的问卷进行详细的分析,获取所需要的调查资料。
本实践创建一个调查问卷,用于统计学生喜欢的课程,并使用华为云Astro大屏应用将问卷结果进行汇总展示。
步骤一:在华为云Astro轻应用中创建调查问卷应用
在华为云Astro轻应用中创建一个空白应用,并根据业务需求完成应用的开发。本实践创建一个统计学生喜欢课程的调查问卷。
- 登录华为云官网,在顶部导航栏右侧单击“控制台”,进入华为云控制台。
- 在左侧导航栏上方,单击
,选择服务实例所在的区域项目。
- 单击
,在查找框中搜索“Astro轻应用”,单击查找到的结果,进入华为云Astro轻应用服务控制台。
- 在华为云Astro轻应用服务控制台的主页中,单击“进入首页”,进入应用开发页面。
- 在“应用”中,单击“新建低代码应用”或单击
,进入新建低代码应用页面。
- 在新建低代码应用页面,应用类型选择“标准应用”,单击“确定”。
- 输入应用的标签和名称,单击“新建”。
图2 新建调查问卷应用
表1仅介绍本实践中使用到的参数,其他参数解释请参见使用华为云Astro轻应用创建一个空白应用。
- 创建对象,用于存储问卷数据。
- 在应用设计器的左侧导航栏中,选择“数据”,单击对象中的“+”。
- 设置对象的名称和唯一标识,单击“确定”。
图3 创建问卷调查对象
- 在已创建的对象中,单击
,进入对象详情页面。
图4 选择编辑按钮 - 在“字段”页签,选中对象中预置的“名称”字段,将“显示名称”修改为“姓名”。
- 单击“添加”,为对象添加课程字段。
图5 添加课程字段
表3 添加课程字段参数说明 参数
说明
示例
显示名称
新建字段的名称,创建后可修改。
取值范围:1~63个字符。
课程
唯一标识
新建字段在系统中的标识,创建后不支持修改。命名要求如下:
- 长度不能超过63个字符,包括前缀命名空间的长度。
- 必须以英文字母开头,只能由英文字母,数字和单下划线组成,且不能以下划线结尾。
Courses
字段类型
单击
,在弹出的页面中,根据页面提供的参数解释,选择新建字段所属的类型。
文本
数据长度
允许输入字段的长度。
64
- 按照上述操作,为对象添加其他字段,如表4所示。
- 创建一个标准页面,用于收集问卷数据。
- 新建一个对象模型,供页面中的组件绑定。
- 在标准页面底部,单击“模型视图”,从设计视图切换到模型视图。
- 单击“新增模型”,输入模型名称(如问卷)、“来源”选择“对象”,单击“下一步”。
- 选择8中创建的对象和添加的字段,单击“下一步”。
图10 选择对象和字段
- 直接单击“确定”,完成模型创建。
- 返回设计视图页面关联模型,组件与模型中的字段绑定后,组件的属性随模型字段值的变化而变化。
- 在标准页面底部,单击“设计视图”,从模型视图切换到设计视图。
- 选中表单,在
。
图11 选中表单
中,单击 - 在“选择模型”页面中,选择10中创建的模型,单击“确定”。
图12 为表单绑定模型
- 在弹出的提示框中,单击“只绑定模型”。
图13 选择只绑定模型
- 选中姓名组件,在
,为姓名组件绑定模型中的字段。
图14 为姓名组件绑定模型字段
中,单击 - 按照上述操作,为课程、年级和期望开设的课程组件分别绑定模型中的字段。
图15 为课程组件绑定模型中的字段图16 为年级组件绑定模型中的字段图17 为期望开设的课程组件框绑定模型中的字段
- 选中课程组件,在“基本属性 > 选项”中,设置课程下拉框的选项。
图18 设置课程下拉框选项
- 同样,选中年级组件,在“基本属性 > 选项”中,设置年级下拉框的选项。
图19 设置年级下拉框选项
- 添加一个按钮组件,用于提交问卷。
- 在基本组件中,拖拽一个按钮组件到画布中。
- 选中按钮组件,修改组件的“显示名称”为“提交”。
图20 修改按钮名称
- 在“事件”页签中,单击“点击”后的“+”。
- 在“内置动作”中,单击“提交表单”,选择对应的表单,单击“创建”。
图21 为按钮添加动作
- 单击页面上方的
,保存页面。
- 单击
,进入预览页面,填报数据后单击“提交”,模拟问卷。
图22 填写问卷
步骤二:为应用添加开放接口
通过新建开放接口,将在应用中开发的对象等包装成自定义REST接口的形式,方便华为云Astro大屏应用调用。
在华为云Astro大屏应用中创建华为云Astro轻应用API数据集时,才需要执行本步骤。如果您创建的是华为云Astro轻应用数据集,则不需要执行该步骤,请直接跳过。
- 新建一个开放接口。
- 在应用设计器的左侧导航栏中,选择“集成”,单击开放接口中的“+”。
- 设置接口的参数,单击“保存”。
图24 新建开放接口
表6 新建开放接口参数说明 参数
说明
示例
操作名称
新建API接口的操作名称,命名要求如下:
- 长度不能超过40个字符。
- 必须以英文字母开头,由英文字母,数字或单下划线组成,且不能以单下划线结尾。
zeroapi
版本
API接口的版本,格式为“x.y.z”。
1.0.0
URL
API接口路径, 固定以 /service/{命名空间}__{应用名}/{版本} 开头, 后面接API的具体路径。
/zeroapi
类型
选择资源类型,只有服务编排类型的接口能够在服务编排中被调用,其他类型接口只能通过API的形式进行调用。
- 服务编排:定义URL调用的接口类型是服务编排。
- 脚本:定义URL调用的接口类型是脚本。
- 对象:定义URL是操作对象数据,包括对象数据的增删改查。
对象
资源
根据类型选择需要绑定的资源,如脚本,服务编排或操作的对象名称。
选择8中创建的对象
对象操作
“类型”选择“对象”时,该参数才会显示。- Insert Record:新增对象数据。
- Update or Insert Record:更新或者新增对象数据。
- Update By ID:按记录ID更新对象数据。
- Delete By ID:按记录ID删除对象数据。
- Query By ID:按记录ID查询对象数据。
- Update By Condition:按条件更新对象数据。
- Delete By Condition:按条件删除对象数据。
- Query By Condition:按条件查询对象数据。
Query By Condition
方法
API接口的HTTP方法。- GET:请求服务器返回指定资源。
- PUT:请求服务器更新指定资源。
- POST:请求服务器新增资源或执行特殊操作。
- DELETE:请求服务器删除指定资源。
- PATCH:请求服务器更新资源的部分内容。当资源不存在时,PATCH可能会去创建一个新的资源。
POST
- 为接口添加业务访问凭证。
步骤三:获取域名、客户端ID和密码
获取华为云Astro轻应用环境域名、客户端ID(client_id)和客户端密码(client_secret),创建华为云Astro轻应用数据源时需要使用。
- 获取华为云Astro轻应用环境的域名。
华为云Astro轻应用环境的域名即为应用的域名,在应用设计器的URL中即可获取。图28 华为云Astro轻应用环境的域名
- 获取客户端ID和密码。
- 在华为云Astro轻应用服务控制台的主页中,单击“进入首页”,进入应用开发页面。
- 单击页面左上角的
,选择“环境管理 > 环境配置”。
- 在左侧导航栏中,选择 。
- 单击“新建”,新建一个客户端模式的密钥。
图29 新建认证密钥
- 返回OAuth管理页面,单击已创建认证后的
。
图30 下载密钥文件 - 在弹出的页面,单击“确定”,将密钥下载到本地。
- 在下载的密钥文件中,获取客户端ID(client_id)和客户端密码(client_secret)。
图31 获取客户端ID和密钥
步骤四:新建华为云Astro轻应用数据源
创建一个华为云Astro轻应用数据源,用于对接华为云Astro轻应用环境。
- 在华为云Astro轻应用服务控制台的左侧导航栏中,单击“Astro大屏应用”,进入华为云Astro大屏应用服务控制台。
- 在已购买的实例中,单击“进入首页”,进入华为云Astro大屏应用界面。
- 在顶部菜单栏中,选择“数据中心”,单击“新建数据源”。
- 选择“AstroZero”,配置数据源参数。
图32 新建数据源
表7 新建数据源参数说明 参数
说明
示例
数据源名称
新建数据源的名称,用于标识该数据源。长度为1~32个字符,可包括中文、字母、数字及下划线,且不能以下划线开头或结尾。
Zero对接Canvas数据源
域名
华为云Astro大屏应用环境的域名,需要携带“https://”。
步骤三:获取域名、客户端ID和密码中获取的域名
客户端ID
调用华为云Astro大屏应用接口前,需要配置“客户端模式”OAuth鉴权的客户端ID。
步骤三:获取域名、客户端ID和密码中获取的client_id
客户端密码
调用华为云Astro大屏应用的接口前,需要配置“客户端模式”OAuth鉴权的客户端鉴权密钥。
步骤三:获取域名、客户端ID和密码中获取的client_secret
- 单击“连接测试”,显示“连接成功”,表示数据源可以调通。
- 单击“保存”,完成数据源的创建。
步骤五:基于华为云Astro轻应用数据源新建数据集
创建一个华为云Astro轻应用API数据集,通过调用华为云Astro轻应用的接口获取数据。您还可以通过华为云Astro轻应用数据集获取数据。
- 在数据中心的左侧导航栏中,选择“数据集 > 全部”。
- 在数据集管理页面,单击“新建数据集”。
- 在新增数据集页面,设置数据集名称、选择数据类型、数据源和目录,单击“保存”。
图33 新建数据集
表8 新建数据集参数说明 参数
说明
示例
数据集名称
新建数据集的名称,用于标识该数据集。长度为1~60个字符,可包括中文、字母、数字及下划线。
Zero对接Canvas数据集
数据类型
选择数据集的数据类型。
AstroZero API
数据源
选择数据集依赖的数据源。
选择步骤四:新建华为云Astro轻应用数据源中创建的数据源
目录
设置数据集的存放目录。
预置分类
- 配置数据集参数,单击“保存”。
图34 设置数据集
表9 修改数据集参数说明 参数
说明
示例
应用
选择华为云Astro轻应用中具体的应用,即步骤一:在华为云Astro轻应用中创建调查问卷应用中创建的应用。
调查问卷
AstroZero API
选择待调用的API接口。
选择1中创建的接口
Body > 字段值
请求参数,根据实际需求进行设置。
{}
步骤六:创建大屏页面展示问卷数据
创建一个大屏页面,将华为云Astro轻应用中调查问卷反馈的数据呈现在大屏页面上。
- 在华为云Astro大屏应用界面的项目列表中,单击“新建项目”,输入项目的名称,新建一个项目。
- 在项目页面,单击“新建页面”。
- 单击“新建空白页面”,输入页面标题(如最受学生欢迎课程统计大屏),单击“新建”。
图35 输入页面标题
- 从组件中,拖拽1个水平堆叠柱图、1个基本柱图和1个基本饼图到画布中(布局如图36),并单击“取消当前主题卡片装饰”。
图37 消当前主题卡片装饰
- 设置水平堆叠柱图。
- 选中水平堆叠柱图,单击组件上方的
,进入组件数据设置页面。
- “数据类型”选择“数据集”,选择步骤五:基于华为云Astro轻应用数据源新建数据集中创建的数据集。
图38 选择数据集
- 单击“全局变量配置”下方的“+”,选择“转换器”,新建一个转换器,通过转换器将数据转换为可用的数据。
图39 新建转换器
输入如下转换器代码,其中“命名空间__grade__CST”和“命名空间__Courses__CST”为8中添加年级和课程对象字段的唯一标识。
const gradeObj = {}; const grade = '命名空间__grade__CST'; const courses = '命名空间__Courses__CST'; dataset.forEach((item) => { if (!gradeObj[item[grade]]) { gradeObj[item[grade]] = {};; } const gradeItem = gradeObj[item[grade]]; if (!gradeItem[item[courses]]) { gradeItem[item[courses]] = 0;; } gradeItem[item[courses]]++; }) const data = [] Object.entries(gradeObj).forEach(([grade, courses]) => { Object.entries(courses).forEach(([course, num]) => { data.push({ "年级": grade, "课程": course, "数量": num }) }) }) return data;
如果您对接的是华为云Astro轻应用数据集,此处请输入如下转换器代码。其中“年级”和“课程”为8中添加对象字段的显示名称。
const gradeObj = {}; const grade = '年级'; const courses = '课程'; dataset.forEach((item) => { if (!gradeObj[item[grade]]) { gradeObj[item[grade]] = {};; } const gradeItem = gradeObj[item[grade]]; if (!gradeItem[item[courses]]) { gradeItem[item[courses]] = 0;; } gradeItem[item[courses]]++; }) const data = [] Object.entries(gradeObj).forEach(([grade, courses]) => { Object.entries(courses).forEach(([course, num]) => { data.push({ "年级": grade, "课程": course, "数量": num }) }) }) return data;
- 在组件预览中,从“表格字段”中拖拽字段到“配置”中,并将“刷新周期”设置为“5秒”,实时读取并展示最新数据。
图40 组件预览设置
- 选中水平堆叠柱图,单击组件上方的
,将标题“内容”设置为“课程年级分布”。
图41 修改图表标题
- 选中水平堆叠柱图,单击组件上方的
- 设置基本柱图。
- 选中基本柱图,单击组件上方的
。
- “数据类型”选择“数据集”,选择步骤五:基于华为云Astro轻应用数据源新建数据集中创建的数据集。
- 单击全局变量配置下方的“+”,选择“转换器”,新建一个转换器,通过转换器将数据转换为可用的数据。
图42 新建课程数量转换器
输入如下转换器代码,其中“命名空间__Courses__CST”为8中添加对象字段的唯一标识。
var grage = '命名空间__Courses__CST'; var map = new Map() for (var i = 0; i < dataset.length; i++) { var temp = {} if (map.get(dataset[i][grage]) == null) { map.set(dataset[i][grage], 1) } else { map.set(dataset[i][grage], map.get(dataset[i][grage]) + 1) } } var result = [] map.forEach((value, key) => { var temp = {} temp.课程 = key temp.数量 = value result.push(temp) }) return result
如果您对接的是华为云Astro轻应用数据集,此处请输入如下转换器代码。其中“课程”为8中添加对象字段的显示名称。var map = new Map() for (var i = 0; i < dataset.length; i++) { var temp = {} if (map.get(dataset[i].课程) == null) { map.set(dataset[i].课程, 1) } else { map.set(dataset[i].课程, map.get(dataset[i].课程) + 1) } } var result = [] map.forEach((value, key) => { var temp = {} temp.课程 = key temp.数量 = value result.push(temp) }) return result
- 在组件预览中,从“表格字段”中拖拽字段到“配置”中,并将“刷新周期”设置为“5秒”,实时读取并展示最新数据。
图43 基本柱图组件预览设置
- 选中基本柱图,单击组件上方的
,将标题“内容”设置为“课程数量统计”。
图44 修改基本柱图图表标题
- 选中基本柱图,单击组件上方的
- 设置基本饼图。
- 选中基本饼图,单击组件上方的
。
- “数据类型”选择“数据集”,选择步骤五:基于华为云Astro轻应用数据源新建数据集中创建的数据集。
- 单击全局变量配置下方的“+”,选择“转换器”,选择6.c中创建的转换器。
- 在组件预览中,从“表格字段”中拖拽字段到“配置”中,并将“刷新周期”设置为“5秒”,实时读取并展示最新数据。
图45 基本饼图组件预览设置
- 选中基本饼图,单击组件上方的
,将标题“内容”设置为“课程占比”。
图46 修改标题为课程占比
- 选中基本饼图,单击组件上方的
- 单击页面上方的
,保存后单击
,预览效果。