基于UI引擎创建“工业产品问卷调查”前端项目

场景说明

本示例模拟工业产品使用情况调研场景，即面向企业最终用户收集产品使用反馈。假设存在以下账号：

user001：具有UI引擎的“开发人员”权限。

前提条件

• 已将工业数字模型驱动引擎-数据建模引擎（xDM Foundation，简称xDM-F）升级至可使用UI引擎的版本。
• 已完成xDM-F应用的数据建模与部署，具体操作可参见基于数据建模引擎创建“工业产品问卷调查”应用。

开发流程

在使用UI引擎之前，您需要先了解在UI引擎中创建一个前端项目的大致开发流程。

图1 创建“工业产品问卷调查”前端项目流程图

步骤1：创建xDM-F模型服务数据源

1. 使用场景说明中的“user001”账号登录iDME控制台。
2. 在左侧导航栏中，单击“数据建模引擎”，进入数据建模引擎页面。
3. （可选）如果同时有部署在公有云上和边缘云上的运行服务，请切换到公有云。
4. 在“公有云运行服务”列表中，找到已部署至基础版数据建模引擎的应用（如“QuestionnaireSurvey”），单击“登录运行态”，登录应用运行态。
5. 在左侧导航栏中，单击“UI引擎”，进入“UI引擎”。
6. 在左侧导航栏中，选择“数据源管理”，进入“数据源管理”页面。
7. 单击“创建数据源”，在弹出的窗口中，设置如下信息。
   图2 设置数据源
   

   表1 创建数据源配置信息

   参数名称	参数说明	示例
   数据源分类	选择数据源类型。	xDM-F模型服务
   xDM-F应用来源	选择xDM-F应用的来源。	xDM-F设计态
   数据源名称	自定义数据源名称。	QuestionnaireSurvey
   xDM-F应用	选择目标xDM-F应用。	工业产品问卷调查（QuestionnaireSurvey）
   请选择认证方式	选择访问数据源所需的认证方式。	IAM鉴权
   鉴权配置	配置认证信息（可前往“iDME服务总览 > 个人中心”获取凭证）。	鉴权账号名：admin 鉴权项目：123456 用户名：user001 用户密码：123456
   描述	填写数据源的业务用途说明。	工业产品问卷调查

8. 配置完成后，单击“保存”。
   图3 xDM-F模型服务列表
   

步骤2：创建前端项目

1. 在左侧导航栏中，单击“前端项目”，进入“前端项目”页面。
2. 在“前端项目”页面，单击“创建项目”，展开“创建前端项目”页面。
3. 在展开的“创建前端项目”页面，填写如下信息，单击“完成”。
   图4 设置前端项目
   

   表2 创建项目参数

   参数名称	参数说明	示例
   唯一标识	填写项目唯一标识。	QuestionnaireSurvey_UI
   名称	填写项目显示名称。	工业产品问卷调查前端项目
   描述	填写项目的业务用途说明。	工业产品问卷调查的前端项目

步骤3：配置认证源与数据源

1. 在“工业产品问卷调查前端项目”所在行，单击“项目设置”，展开“项目设置”页面。
2. 切换至“运行时认证源配置”页签，单击“编辑”。
3. 选择“认证源类型”，单击“保存”。
   图5 配置运行时认证源
   

   表3 运行时认证源配置信息

   参数名称	参数说明	示例
   认证源类型	选择运行前端项目时的认证源。	IAM认证

4. 切换至“运行时数据源配置”页签，单击“新增关联”，在弹出的窗口中，设置如下信息。
   图6 新增运行时引用数据源的关联
   

   表4 运行时数据源配置信息

   参数名称	参数说明	示例
   数据源分类	选择当前配置的数据源类型。	xDM-F模型服务
   数据源名称	选择需要绑定的目标数据源。	QuestionnaireSurvey
   xDM-F应用来源	系统根据所选“数据源名称”自动填充。	xDM-F设计态
   xDM-F应用	系统根据所选“数据源名称”自动填充。	工业产品问卷调查（QuestionnaireSurvey）
   请选择认证方式	系统根据所选“数据源名称”自动填充。	IAM鉴权
   鉴权配置	系统根据所选“数据源名称”自动填充。	鉴权账号名：admin 鉴权项目：123456 用户名：user001 用户密码：123456
   描述	系统根据所选“数据源名称”自动填充。	工业产品问卷调查

5. 配置完成后，单击“保存”。

步骤4：开发前端项目

1. 在“项目设置”页面，单击“页面设计器”，进入项目的“页面设计器”。
   图7 进入页面设计器
   

2. 在弹出的“应用下暂无页面，需新建页面后体验画布功能”提示框中，单击“确定”，关闭窗口。
3. 在左侧插件栏中，单击，展开“页面”插件面板。
   图8 页面插件面板
   

4. 在“页面”插件面板中，单击，展开“页面设置”页面。
5. 在展开的“页面设置”页面中，配置如下主要信息，其他参数保持默认，单击“保存”。
   图9 页面设置
   

   表5 页面的基本设置

   参数名称	参数说明	示例
   页面名称	自定义页面名称。	HomePage
   访问路由	定义页面的访问路由地址。	questionnairesurvey/ui

6. 在左侧插件栏中，单击，展开“页面”插件面板。
7. 在新建的“HomePage”页面所在行，单击，选择“设置为主页”。
   图10 设置为主页
   

8. 在弹出的提示框中，单击“确定”。
9. 根据自身业务需求，设计“HomePage”页面布局。
   1. 单击左侧插件功能区的，选择“模板”或“组件”页签，将所需组件（如“模板表单”组件）拖拽至中心画布区。
      图11 添加组件
      
   2. 选中画布区的模板表单组件，在右侧属性设置面板中，单击“模型属性”区域中“xdm模型”的“选择模型”。
   3. 在弹出的“绑定数据模型”窗口中，选择对应应用、租户与数据模型。

      例如：“xDM-F模型服务”选择“QuestionnaireSurvey”（步骤1：创建xDM-F模型服务数据源创建的数据源），“租户”选择“basicTenant”，“模型名称”选择“工业产品问卷”。

      图12 绑定数据模型
      
   4. 单击“确认”，完成绑定。

10. 完成页面设计后，单击页面设计器右上方的“保存”。
    图13 保存设置
    

11. 单击页面设计器右上方的，预览页面效果。
    图14 页面预览
    

步骤5：发布与访问前端项目

页面开发完成后，需要将项目发布至生产环境以便外部访问。

1. 关闭预览页面，切换回页面设计器。
2. 单击页面设计器右上方的“发布”，弹出“项目发布”窗口。
3. 在弹出的窗口中，填写如下主要信息。
   图15 项目发布
   

   表6 项目发布参数说明

   参数名称	参数说明	示例
   发布版本生成方式	指定前端项目版本号的生成方式。	自动
   发布版本	定义前端项目当前发布的版本号。	-

4. 单击“确定”，执行项目发布。

   系统将自动切换至“日志”窗口监控发布进度。

5. 待显示项目发布成功后，单击“点击访问”，即可在浏览器中打开前端项目。
   图16 项目发布成功