创建您的第一个应用_应用魔方 AppCube_快速入门

背景信息

本应用功能简洁：主要是开发一个简单页面，在页面上的输入框中，输入一条新词条，单击“新增”按钮，将添加的词条保存到对象模型中，并以表格形式展示出来，如图1所示。

通过体验如何创建第一个应用，您将了解到：在AppCube中创建一个应用的步骤及相关操作注意事项。

图1 HelloWorld应用效果

前提条件

1. 已注册华为云账号，并完成实名认证。
2. 已开通AppCube服务。

   具体如何注册，申请公测请查阅“注册租户”章节。

如何创建一个应用

在使用AppCube前，您需要先了解，在AppCube中，创建一个应用的大致开发流程：

1. 在开发环境中，创建应用。

   相关操作请参见创建应用。

2. 在开发环境中，开发应用。

   包括开发模型、开发逻辑层以及开发前端UI层。开发后，您还可设置应用。

   相关操作请参见用户指南中相关章节（开发模型、开发逻辑层、开发前端UI层以及设置应用）。

3. 在开发环境中，编译发布应用。

   相关操作请参见发布应用。

4. 在沙箱或运行环境中，部署运行应用。

   在沙箱环境中测试应用、在运行环境中部署运行应用，相关操作请参见安装应用。

步骤1：创建应用

1. 使用华为云账号，登录华为云，并在控制台搜索AppCube服务。
2. 在控制台，单击“进入AppCube开发环境”。
3. 在AppCube开发环境首页的“项目”页签下，单击“轻应用”卡片。
   图2 创建轻应用
   

4. 在“轻应用”页面，单击“创建空白轻应用”。
   图3 创建空白轻应用
   

5. 定义命名空间（可选）。如果未提示需要创建命名空间，则直接跳过本步骤。

   首次创建应用时，需要定义私有的命名空间，以区别您与其他租户的应用及应用元素，命名空间唯一且不能重复，不能修改。后续您创建的对象、脚本、服务编排、页面等的名称中，系统都会为其增加命名空间的前缀。

   例如，本应用中定义的命名空间为“CNAME”，后续创建的所有对象、脚本、页面等都将以“CNAME__”开头，请您根据实际情况设置。

   

   命名空间一旦设定不能修改，请慎重定义；建议您使用公司或者团队的缩写作为命名空间。

6. 选择“应用”页签，然后在弹窗中，输入应用“标签”为“我的第一个应用”，“名称”为“HelloWorld”，然后单击“创建”。
   App创建完成后，自动进入应用。

   图4 创建应用
   

   表1 应用基本信息

   参数名	参数说明	本实例需要填写的值
   标签	应用中用于展示的文字，为了区分不同应用的描述信息，例如，标签在“我的应用”下显示的应用名，应用创建之后，应用“标签”可以在应用设置中修改。	我的第一个应用
   名称	应用在系统内的唯一标识。 系统会自动在该名称前添加命名空间__。应用创建之后，应用“名称”不支持修改。 设置要求：必须以字母开头，没有连续的下划线，空格和特殊字符。	HelloWorld 说明： 应用创建后，应用名称自动添加命名空间前缀CNAME__HelloWorld。

   轻应用创建完成后，将自动跳转到应用开发界面，如图5所示，轻应用中有4个默认目录。默认目录是AppCube推荐使用的应用文件目录结构，后续开发的页面、对象及后台逻辑，建议按照以下对应关系进行创建，以便应用目录管理。

   • Model：数据对象
   • Logic：服务编排、脚本等
   • Page：前端页面
   • Internal dependencies：BO商业对象

   您也可以根据自己的开发习惯，单击“我的第一个应用”右侧“+”，添加新的应用目录，自定义放置应用资源。

   图5 轻应用默认目录
   
   

   • 在应用开发界面，单击页面顶部的“首页”，可以返回开发环境首页。
   • 如果想再次进入应用，请在“首页 > 项目 > 我的应用”下，单击应用名，例如“我的第一个应用”，即可进入应用开发界面。

步骤2：开发应用-创建对象

【信息】什么是对象？对象是AppCube的核心功能之一，对象相当于传统数据库里的一张表，用于持久化业务数据。AppCube中有内置的标准对象，也有租户开发者创建的自定义对象。

一个由租户开发者创建的自定义对象，在创建之后，就会有各种操作方式：前端页面可以使用页面模型绑定此对象，并使用表格组件，直接展现对象数据；AppCube中更为常用的则是使用脚本、自定义JS代码、服务编排等，对该对象中的信息进行增删改查。

根据HelloWorld应用设计的功能，首先您需要先创建一个存放词条的对象helloObject，用于保存词条名、词条描述、创建日期信息。对象helloObject中使用到的字段，如表1所示。

对象及字段创建详细步骤如下。

1. 在“HelloWorld”应用中，在规划存放对象的目录下，创建对象：
   1. 将光标放在“Model”目录上，单击，选择“对象”。
      

      【信息】本实例中，使用默认“Model”目录存放对象，因此需要在“Model”目录下进行创建对象操作，对象添加完成后，系统默认会将该对象放在“Model”目录下，您也可以根据个人喜好选择其他目录创建。

      图6 创建对象
      

2. 输入对象的“标签”为“helloObject”，单击“名称”的输入框后，系统将自动生成名称为“helloObject”，再单击“添加”。
   图7 添加对象
   
   对象创建完成后，自动进入对象详情页面。

   

   【技巧】如果您输入“标签”的值，首字符为英文字母，单击“名称”的输入框，系统会自动生成与“标签”对应的“名称”，您也可以根据需要修改这个自动生成的“名称”。

   表3 创建对象的相关信息

   参数名	参数说明	本实例需要填写的值
   创建新对象	添加对象的方式。	保持默认，选中“创建新对象”。
   标签	对象展示的名称，为了区分不同对象的描述信息。 对象创建完后，“标签”可以在对象的“基本信息”中修改。	helloObject
   名称	对象在系统内的唯一标识。 对象创建后，系统会自动在“名称”增加租户命名空间前缀，以及增加“__CST”后缀，“__CST”后缀是AppCube中对象的唯一标识。 对象创建完后，“名称”不可以修改。	helloObject 说明： 对象创建后，系统自动为对象名称添加前后缀，实际创建的对象名为：CNAME__helloObject__CST

3. 查看并修改对象的标准字段。
   1. 查看标准字段，了解自定义对象中系统预置的标准字段。

      自定义的对象创建以后，系统将自动创建一些标准字段，供您使用，您可以在“自定义对象”的详情页面中，单击“标准字段”页签，查看自定义对象的标准字段，标准字段如图8所示，其中“name”和“createdDate”两个字段，在后续开发中将会用到。

      图8 标准字段
      
   2. 修改标准字段“name”。
      单击“name”字段右侧的，如图8所示，进入字段编辑页面，在“name”字段编辑页面中，修改“标签”为“词条名”，并勾选“是否唯一”，“是否必填”，然后单击“保存”，如图9所示。

      图9 修改“name”字段
      

      

      【思考】为什么要修改“name”字段，其他标准字段可以修改吗？因为“name”的默认属性，没有完全符合HelloWorld应用对“词条名”的要求，例如“标签”，“是否唯一”这些字段属性，因此需要自定义修改一下，修改后“name”作为存放“词条名”的字段。

      标准字段中目前只有“name”字段支持修改，而“createdDate”字段直接使用，不能修改。

4. 创建一个自定义字段“词条描述”，作为应用中存放词条描述信息的字段。
   1. 在“自定义字段”页签，单击“新建”，进入创建字段页面，设置字段类型为“文本”，单击“下一步”。
      图10 新建自定义字段
      
      

      自定义字段可以手动创建，也可以批量导入自定义字段，具体操作请查阅《用户指南》中导入方式定义对象字段章节。

   2. 输入新字段详细信息：设置字段“标签”为“词条描述”、“名称”为“detail”、字段长度“255”，并勾选“是否必填”、“大小写敏感”、“是否可搜”，然后单击“下一步”。
      图11 定义“设备编码”详细信息
      
      

      字段“名称”为“detail”，实际创建的字段，系统将自动添加前后缀“CNAME__detail__CST”，“CNAME__”前缀由租户命名空间决定，“__CST”后缀代表是自定义字段。

   3. 设置字段级的访问权限：选中“读取”和“编辑”复选框，为所有预置profile配置能编辑和读取本字段的权限，单击“下一步”。
      

      在AppCube中，预置了一些权限集，并提供了自定义对象中字段级的安全控制，这些权限配置是由管理员预置的，权限集及设置的更多详细介绍，请查阅《用户指南》中“了解权限配置”章节。

   4. 将字段添加到对象的页面布局：选中“添加本字段到该页面布局”，单击“保存”。

      在AppCube中，如果某个自定义字段在创建的时候，设置了添加到页面布局，那么在该对象的页面布局的页面表格中，将可以对该字段进行增删改查等操作。

      

      【技巧】自定义对象的页面布局，可以直接操作对象，进行增删改查等操作，更为方便的是可以作为前端页面直接使用，对象页面布局更多详细介绍，请查阅《用户指南》中“编辑对象的页面布局”章节。

步骤3：开发应用-创建服务编排

【思考】什么是服务编排？服务编排功能是AppCube的核心功能之一，即是在可视化、模板化的服务编排页面，通过拖拽图元，并配置图元，再拖拽相关参数，就可以实现特定的业务逻辑的一种开发方式。

服务编排类似于编程中一段有流程、条件处理、判断逻辑的程序；这段程序有输入参数和输出参数，可以独立成为一个对外调用的方法；同时，在服务编排内部，也可以调用其他的方法。

本实例中，创建的服务编排目的是操作一个存放词条的自定义对象，实现将服务编排中获得的入参信息，分别以“词条名”、“词条描述”字段写入到词条对象helloObject中。如果您还没有创建，请查阅创建存放词条的自定义对象章节，进行创建。

1. 在规划存放服务编排的目录“Logic”下，创建服务编排：

   将光标放在“Logic”目录上，单击右侧“+”。在弹窗菜单中，选择“服务编排”。

   图12 创建服务编排
   

2. 在对话框中，输入服务编排的“名称”为“helloFlow”，单击“标签”的输入框后，系统将自动生成名称为“helloFlow”，再单击“添加”。
   图13 添加服务编排
   

   表4 服务编排基本信息

   参数名	参数说明	本实例需要填写的值
   创建一个新的服务编排	创建一个新的服务编排流程。	保持默认，选中“创建一个新的服务编排”。
   使用已有的服务编排	基于已有的服务编排创建。方便用户快速继承已有服务编排的配置，增加效率。	不设置。
   标签	服务编排用于展示的名称。创建之后不支持修改。	helloFlow
   名称	服务编排在系统内的唯一标识。 系统会自动在该名称前添加命名空间__。当其他功能调用服务编排时，调用的是服务编排的“名称”，而不是标签。 创建之后不支持修改。	helloFlow 说明： 实际创建的服务编排名为：CNAME__helloFlow
   类型	服务编排的类型。 Autolaunched Flow：自启动Flow，在接口调用后会立即执行服务编排模型定义的逻辑。 Event Trigger：事件触发的服务编排，则会在事件触发时才会开始执行服务编排模型定义的逻辑。当选择该类型时，您需要配置具体的事件以及条件规则。	保持默认类型：Autolaunched Flow

3. 定义变量，作为后续获取前端页面的输入值，同时也是操作词条对象helloObject的字段：

   单击，展开“全局上下文”，再单击“变量”后的“+”，修改“variable0”为“name”；再次单击“+”，创建变量“detail”。这里创建的“name”、“detail”分别对应词条对象helloObject中的“词条名”、“词条描述”字段。

   

   “全局上下文”是定义服务编排中使用到的变量列表区域，服务编排中支持定义变量、变量集、常量、结构体等参数，具体变量创建方式及变量说明请查阅《用户指南》中“配置服务编排变量以及输入输出参数”章节。

   图14 新增变量
   

4. 在服务编排中添加并配置“记录创建”图元。
   

   “记录创建”图元是通过关联当前应用（HelloWorld）中已存在的一个对象（词条对象helloObject），然后通过设置对应的操作字段（name、CNAME__detail__CST），实现向这个对象中增加记录的功能。AppCube预置了多种逻辑图元，详细图元分类及功能介绍，请查阅《用户指南》中“图元介绍”

   1. 从左侧图元列表中，单击“基本”拖拽“记录创建”图元到画布中。
      图15 拖拽创建记录
      
   2. 单击，配置“记录创建”图元：
      先单击“对象”下拉框，选中词条对象“CNAME__helloObject__CST”，对象设置后，“赋值”下自动显示对象下可以被赋值的字段（name、CNAME__detail__CST）；再单击“全局上下文”，然后从全局上下文中，分别拖拽变量“name”、“detail”到对应“源”输入框中。关联之后，变量从前端获取到值后，将会传给对象中的字段。

      图16 拖拽需要修改对象字段
      

5. 定义输入参数，并保存服务编排。
   这里的入参、出参指的是整个服务编排的入参、出参，具体参数需要从“全局上下文”列表中拖曳。

   1. 在画布上，把鼠标放在起点图元上，从“+”拖动鼠标，在起点图元和“创建记录”图元间增加连线。
   2. 鼠标在画布空白处点一下，单击右侧，设置服务编排的输入参数。
      图17 拖拽服务编排的输入参数
      
   3. 单击服务编排界面上部的保存图标，保存服务编排。

      系统会弹出窗口，显示编译结果。

6. 测试服务编排能否正常执行。
   1. 单击服务编排编辑器上方执行图标。
   2. 在"Flow Run"界面中输入测试数据，单击“运行”。

      {
          "name": "helloWorld",
          "detail": "helloWorld 是我的第一个应用"
      }

      执行成功，界面上会返回设备对象中的全部信息，样例如下：

      图18 返回样例
      

7. 启用服务编排：测试成功，单击服务编排编辑器上方启用图标，发布服务编排。
   

   【约束】如果服务编排创建完成后，未启用默认是属于编辑状态，不能被页面调用。

   图19 服务编排启用后高亮状态
   

步骤4：开发应用-创建页面

【信息】AppCube有三种前端页面类型，标准页面、高级页面、大屏页面，那么什么场景下使用标准页面？

标准页面常用于业务数据的增、删、改、查，并且对页面样式要求相对简单的场景。而标准页面的优势在于，只需要拖、拉、拽页面组件，配置组件属性，绑定页面模型，再加上少量事件代码，即可快速拼装出一个完整的页面。

HelloWorld应用的业务功能主要是通过标准页面呈现出来的：通过使用“标准页面”能力，将“对象”、“服务编排”与页面中的组件、事件代码关联、绑定、调用，实现将前端输入的数据信息传递到对象中，并最终再通过页面呈现出来的效果。

页面中使用的词条对象helloObject及服务编排helloFlow需要提前创建。

如果您还没有创建，请先查阅词条对象及服务编排章节，并根据相关步骤进行创建。

1. 进入“HelloWorld”应用。
2. 在规划存放标准页面的目录下，创建标准页面：
   将光标放在“Page”目录上，单击右侧“+”。在弹窗菜单中，选择“标准页面”，弹出创建标准页面对话框。

   

   【信息】本实例中，使用默认“Page”目录存放服务编排，您也可以根据个人喜好选择其他目录创建。

3. 在创建标准页面对话框中，输入页面的“名称”、“标签”，单击“添加”。
   图20 添加标准页面
   

   表5 服务编排基本信息

   参数名	参数说明	本实例需要填写的值
   标签	服务编排用于展示的文字。创建之后不支持修改。	helloPage
   名称	服务编排在系统内的唯一标识。 系统会自动在该名称前添加命名空间__。当其他功能调用服务编排时，调用的是服务编排的“名称”，而不是标签。 创建之后不支持修改。	helloPage 说明： 实际创建的服务编排名为：CNAME__helloPage
   另存为模板	是否保存为模板。保存为模板后，该标准页面会作为模板出现在页面开发界面左侧“模板 > 我的模板”中。 说明： 另存为模板后，可以基于模板，快速创建页面。	不启用，保持默认。

   页面创建后，直接进入页面设计视图，新建的页面，默认是当前用户锁定状态，可以进行编辑保存等操作。

   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。

4. 创建页面模型。
   

   AppCube的标准页面是通过数据模型驱动的，页面所有的逻辑都是围绕数据模型展开的，前端组件与对象及服务编排关联都需要创建页面模型。

   1. 创建页面对象模型“userInfo”，关联自定义对象“CNAME__helloObject__CST”，后续将绑定页面表格。
      1. 在页面底部单击“模型视图”，然后在“模型视图”中，单击“新增模型”。
      2. 设置“模型名称”为“helloObject”，“来源”选择“对象”，单击“下一步”。
      3. 设置“选择对象”为“CNAME__helloObject__CST”，并在“选择字段”中，勾选“name”、“id”、“createdDate”，然后单击“下一步”，再单击“确定”。
      4. 单击页面上部的保存图标。
         图21 对象模型
         
   2. 创建页面服务模型“helloFlow”，关联服务编排“CNAME__helloFlow”，服务编排的输入值，后续将绑定页面上表单中的输入框。
      1. 在“模型视图”中，单击“新增模型”。
      2. 设置“模型名称”为“helloFlow”，“来源”选择“服务”，单击“下一步”。
      3. 设置“选择服务类型”为“Flow”，并在弹窗中，“选择项目”设置为“我的第一个应用”，“搜索”中输入“CNAME__helloFlow”，在搜索结果中选择“CNAME__helloFlow”，然后单击“确定”。如果未搜索到服务编排，请检查服务编排是否已启用。
      4. 单击“下一步”，再单击“确定”。
      5. 单击页面上部的保存图标。

5. 单击页面底部“设计视图”，切换到页面设计视图，在左侧上方单击“组件”，展开组件列表，方便拖拽组件到页面。
   图22 展开组件列表
   
   

   标准页面有设计视图、模型视图、事件视图、样式代码以及更多中的组件代码、第三方库等，详细介绍及用法请查阅《用户指南中》“标准页面”章节。

6. 拖拽组件，组装页面。
   1. 拖拽一个“标题”组件到“页面内容”，并设置“标题”组件属性：
      

      在“设计视图”中，拖拽一个页面组件到页面中，选中该组件后，在右侧“属性”页签，即可设置该组件的绑定数据、样式等属性。

      1. 修改“标题内容”为“HelloWorld”。
      2. 在“样式”属性中，设置标题“字体”为白色，大小“25px”，居中显示；并设置标题背景为蓝色“#4A90E2”。
         图23 设置标题组件样式
         
         

         【技巧】在配置使用组件前，在组件列表区，先将光标放在组件上，组件右上角将显示帮助信息的问号图标，单击问号图标，即可进入该组件介绍页面，在组件介绍页面，您可以了解并学习这些预置的前端组件的使用场景及参数配置方法，组件说明详细介绍。

         图24 查看组件帮助信息
         
   2. 拖拽一个“表单”组件到“标题”组件下，然后在数据绑定弹窗底部，单击“取消”，创建一个空表单。
      因为现在还不需要定义数据源，因此需要单击“取消”，创建一个空的表单组件。

      图25 拖拽表单
      
   3. 从左侧组件列表最底部“高级”中，拖拽一个“栅格容器”到“表单”。栅格容器默认是1个分栏，2个栏，选中“分栏”，然后在属性的“行布局”下，单击PC下的，将分栏设置为3栏。
      图26 拖拽栅格容器并设置为3栏
      
      

      栅格容器是一种灵活的容器类页面布局，可以将页面进行横向和纵向分割。

   4. 向第1栏、第2栏分别拖拽一个“输入框”，第三栏中拖拽一个“按钮”组件。
      图27 拖拽输入框及按钮
      
   5. 选中第1栏中的“输入框”，设置“标签”为“词条名”，“占位符”为“请输入词条”。
   6. 选中第2栏中的“输入框”，设置“标签”为“词条描述”，“占位符”为“请输入词条描述”。
   7. 选中“按钮”，设置“显示名称”为“新增”，“类型”为“主要按钮”，然后选中按钮所在“栏”，设置“样式”中“布局”上边距为“35px”。
      图28 修改按钮属性
      
   8. 拖拽一个“表格”到“表单”下（表单之外），并选中“表格容器”下“表格”，在右侧属性最下端，关闭“多选”选项。
      图29 拖拽表格
      
   9. 单击页面上方保存按钮。

7. 绑定组件与页面模型，将前端页面与对象及服务编排关联。
   1. 选中“词条名”输入框，在右侧“数据绑定”下，单击，进入选中模型弹窗。

      

   2. 在选择模型弹窗中，勾选“helloFlow”下“ inputParam”的“name”，单击“确定”。
      图30 选中模型字段
      
   3. 同样方式，为“词条描述”绑定模型字段：选中“词条描述”输入框，在右侧“数据绑定”下，单击，进入选中模型弹窗，勾选“helloFlow”下“ inputParam”的“detail”，单击“确定”。

      绑定之后，由页面“词条名”、“词条描述”输入框输入的值将作为服务编排的输入参数“name”、“detail”值，当页面调用服务编排时，即可将前端页面输入的值写入到词条对象helloObject中。

   4. 选中“表格容器”下的“表格”，在右侧“数据绑定”下，单击，然后在选择模型弹窗中，勾选“helloObject”，单击“确定”。
      图31 选中对象模型helloObject
      

      表格绑定页面对象模型后，系统自动将对象字段做为表格的列名显示，如果对象模型关联的自定义对象（这里是词条对象helloObject）中，有词条记录，将会自动查询并显示在页面表格里。

      图32 绑定页面模型后
      
      

      【技巧】表格组件绑定页面模型后，可以自动添加页面模型里面的字段为表格列，也可以将模型的字段作为表格列查询的条件，您可以在表格组件的属性中“表格列”及“表格区块”中设置。

8. 添加按钮事件。
   1. 选中“新增”按钮，在右侧属性区中，单击“事件”页签。
   2. 单击“点击”后的“+”，进入“添加事件”弹窗。
   3. 在“自定义动作”中，输入如下事件代码，然后单击底部“创建”。

      $model.ref('helloFlow').run().then(() => {
          // 根据Name获取组件
          var _table = context.$component.get('table_0');
          _table.doQuery();
      }).catch(e => {
          // 失败消息
          context.$message.error('新增词条失败:' + e.resMsg, 5);
      });

      图33 添加自定义动作代码
      
      

      按钮事件主要是通过页面服务对象（helloFlow），调用服务编排，完成新增数据功能。

   4. 单击页面上方保存按钮。

9. 单击页面上方预览图标，进入预览页面。
10. 在预览页面的输入框中，输入“helloworld”，单击“新增”，查看表格中新增的词条记录。

步骤5：开发应用-预览验证

在页面开发时，单击预览按钮，进入的预览页面，是开发环境中的预览，跟实际效果稍有差距，本节将介绍如何在应用的预览环境中，预览应用效果。这里预览效果跟实际在运行环境中基本一致。在应用配置下，还可以更改应用框架的样式和颜色。

1. 进入“HelloWorld”应用。
2. 将页面挂载到导航条上，作为应用菜单。
   如果没有将页面挂载到导航条上，预览应用的时候，是无法找到应用的相关页面和对象等信息的。

   1. 单击应用左侧导航下部的“配置”。
      图34 配置
      
   2. 在“导航条”页签单击“菜单树”右侧的“+”，选择“添加页签”。
      图35 导航条添加页签
      
      

      在导航条上的页面较多时，您可以添加目录。添加目录可以更方便区分页面类型，方便导航使用。目录添加之后，会在应用导航中直接显示，目录下可以添加页签。另外，应用配置中还可以设置应用选项列表，系统参数等信息，您可以在系统配置章节查看。

3. 在“添加页签”弹窗中，设置以下信息，然后单击“保存”。

   表6 页签信息

   参数名	参数说明	本实例需要填写的值
   页面类型	当前要添加的页面的类型： 主页页签：用于展示个人任务相关的信息。 对象页签：关联一个对象的布局，将展示指定对象的某个布局页面。 标准页面页签：用于关联并展示一个标准页面。 高级页面页签：用于关联并展示一个高级页面。 BPM页签：用于关联并展示一个BPM。 Web页签：用于关联一个URL，将展示URL对应的网页或页面。 状态机页签：用于关联并展示一个状态机。 报表页签：用于关联并展示一个报表。	标准页面页签
   标签	显示在应用导航的名称。	HelloWorld
   名称	用于唯一标识页签的名称。	helloPage
   图标	导航页签的展示图标。	这里可以不设置，如果有可以选择一个图标直接上传。
   页面	需要添加的页面	helloPage（CNAME__helloPage）。
   描述	当前页面的描述信息，用于了解当前页面的主要内容。	不设置。

   图36 我的应用
   

4. 在应用左侧导航下，单击，进入应用预览页面。
   图37 查看应用
   

5. 单击右侧“HelloWorld”，在右侧页面中，输入“helloWorld”，单击“新增”，查看表格中新增的词条记录。
   图38 新增词条
   

6. （可选）如果词条未能创建成功，按键盘“F12”，调测页面调试窗，重新输入词条，进行页面调试。

步骤6：编译发布应用

在应用开发完成后，应用需要编译、打包、发布，既可以发布到当前租户的运行环境，也可以共享给其他租户，在其他租户的开发环境或运行环境下安装。

AppCube支持多种发布方式，本实例中使用的则是将应用发布到“我的仓库”方式进行发布，后续将会通过“我的仓库”再部署到运行环境。

• 应用包编译类型

  AppCube支持编译2种应用包：资产包和源码包。

  • 源码包：该类型包中的所有组件都不受保护和限制。在其他环境安装后可编辑包中组件，即在原有基础上可进行再开发。若后续其他用户在开发环境安装后，会显示在开发环境首页的“项目”页签下。
    

    编译类型为“源码包”时，只有发布到“我的仓库”一种发布方式。

  • 资产包：该类型支持设置包中的组件是否受保护。打包时不做编译设置，默认打出的包都是资产包，包中组件都为只读保护模式，将包安装到其他环境时，只能运行和预览。不可编辑包中组件。若后续其他用户在其他开发环境安装资产包后，应用会显示在开发环境首页的“库”页签下。
• 发布方式

  AppCube应用（资产包）发布方式如图39所示。本实例中使用的则是将应用发布到“我的仓库”方式进行发布，后续将会通过“我的仓库”再部署到运行环境。

  图39 应用发布方式
  

1. 登录AppCube开发环境，在首页，单击“我的应用”下的“HelloWorld”，进入应用。
2. 在APP开发页面左侧单击，选择“编译”进行编译。
   

   编译前，还可以单击进行一些自定义的编译设置。

3. 编译完成后，单击左下角，选择“我的仓库”，将应用程序安装包发布到我的仓库。
4. 填写版本信息，单击“发布”。
   图40 填写版本信息
   
   发布成功后，页面显示“程序包已经被成功上传到我的仓库。”。

   

   【思考】应用发布之后的包可以下载吗，到了哪里？其他租户可以看到吗？

   在应用的“包管理”页面，可以查看已发布的应用包，也可以单击下载。不同租户之间，“我的仓库”里面的应用是不可见的。

   图41 查看发布到“我的仓库”下的应用包
   

步骤8：部署运行应用

免费版不提供运行环境，请参考升级为专业版租户或者购买商用租户，升级或者直接购买专业版后，再进行打包发布操作，并在运行环境安装该应用。

在开发环境中，将应用发布到“我的仓库”后，AppCube将会把该应用包，同步发布到当前租户的运行环境中，以便于在运行环境中部署运行。

1. 使用当前租户开发者账号访问并登录AppCube运行环境。
2. 在运行环境首页，单击“我的仓库”，进入我的仓库。
   图42 我的仓库
   

3. 在右侧“我的仓库”中，找到之前发布的“我的第一个应用”，单击“安装”，并在弹窗中单击“确定”。
   图43 在我的仓库安装应用
   

4. 设置应用。
   1. 在管理页面，选择“应用管理 > 应用导航”，在右侧中，找到发布的“我的第一个应用”，单击，进入应用布局页面。
      图44 设置页面布局
      

   2. 在“布局”下，选中第二种方式布局后，单击“保存”，然后单击“预览”，进入应用。
      图45 设置布局类型并预览应用
      

5. 验证应用。
   在应用页面中，输入“helloWorld”，单击“新增”，查看表格中新增的词条记录。

   图46 新增词条
   

   如果您已经验证成功，恭喜您！您已经完成了在AppCube上第一个应用的开发！

   您还可以查看快速入门中的其他实例，继续深入探索AppCube的应用开发之旅！