构建应用程序

在本快速入门指南中，您将学习：

• 创建一个新的应用程序

• 连接到数据库

• 通过将小部件拖放到画布上来构建 UI

• 编写查询以从数据库中获取数据

• 将数据绑定到小部件

• 部署和共享应用程序

先决条件

在开始之前，您需要在 pageplug 云端环境上创建一个帐户，或者也可以在本地或您选择的服务器实例上自行部署 pageplug。

创建新应用程序

• 创建新的 pageplug 账号时，首先会在新建一个应用组。

• 在应用组下创建应用会有两种应用类型，移动应用和桌面应用。

在 pageplug 上创建应用程序

• 选择一种类型应用后，会出现采用空白页面编辑或使用数据表自动生成页面两个选项

• 使用空白页面拖放构建选项以从头开始并创建您的自定义 UI

• "Page1"是应用程序的默认页面，可点击"Page1"旁的设置按钮修改应用及页面的信息

修改 pageplug 应用程序及页面的信息

连接数据库

我们将使用 pageplug 上名为 "users" 的模拟 PostgreSQL 数据库。

• 在"资源管理"选项卡上，单击"数据源"旁边的 + 号，在"样例数据库"下，选择 "users"。

• "users"数据库将添加到"资源管理"选项卡里的"数据源"下。

创建新数据源

构建用户界面

• 导航到页面下的 "Page1" ，拖放 表格 小部件到画布上，点击表格右上角编辑组件属性，将表格重新命名为 "usersTable" 。

• 拖放 容器 到画布右侧，让我们添加标题为 "用户信息" 的标签和一些小部件来显示表上所选中的用户详细信息。

• 拖入 输入框 小部件，分别设置为名称、邮件、电话的输入框，日期选用 日期选择器 小部件，图像选用 图片 小部件，最后是 按钮 小部件将标签更改为 "更新"

通过在画布上布置小部件来构建UI

创建查询并将数据绑定到小组件

• 在"资源管理"选项卡上，导航到"数据源"下的数据库"users"。

• 单击数据源旁边的"+新建查询"按钮。

在数据源上创建新查询

• 将查询重命名为"getUsers"。

• 编写一下查询以从数据库中的"users"表中提取十条记录。

SELECT * FROM users ORDER BY id LIMIT 10;

编写查询代码获取数据

• 单击右上角的"运行"按钮，确认查询返回数据。

• 导航到"Page1"画布，悬停在名称为"usersTable"的表格上，单击右上角属性按钮以打开属性窗口，在属性的数据窗口里写入 JS 代码块 {{getUsers.data}}，用于在表格中显示"getUsers"数据源查询出的数据结果。

{{mustache}}模块用于在小部件内查询和编写 JS

将查询到的数据绑定到小部件中

• 同样，要显示表中所选中的信息，请阅读下文将相应的数据。

• 需要将小部件对应 Value 输入到小部件属性里默认值下方的框内。

组件	名称	Value
图片	-	{{usersTable.selectedRow.image}}
输入框	名称输入	{{usersTable.selectedRow.name}}
输入框	电子邮件输入	{{usersTable.selectedRow.email}}
日期选择器	日期输入	{{usersTable.selectedRow.dob}}
输入框	电话输入	{{usersTable.selectedRow.phone}}

在设置日期选择器小部件需在默认日期下切换 JS 模式输入表格上的值以绑定数据

• 在"users"数据库上创建另一个查询，并将其重命名为"updateUsers"，使用以下 update 命令将小部件上任何已修改的数据写回数据库。

UPDATE users SET name = '{{nameInput.text}}', email = '{{emailInput.text}}', dob = '{{dobInput.selectedDate}}', phone = '{{phoneInput.text}}' WHERE id = {{usersTable.selectedRow.id}} 

• 在"更新"按钮的属性窗口中，在 onClick 选择执行查询 updateUsers，在下一阶的 onSuccess 里选择执行查询 getUsers。

将查询执行绑定到按钮的 onClick 事件上

• 你可以通过修改表格中用户的电话号码来测试"更新"按钮。

你已完成第一个应用，该应用可以显示数据库中的信息并更新数据，所有这些操作只需要几分钟即可完成。

发布和共享

• 单击 pageplug 编辑器右上角的"发布应用"按钮，将应用发布可进行查看以及测试。

• 发布后，你可以与用户共享你的应用程序，单击 pageplug 编辑器右上角的"共享应用"按钮

  • 通过指定用户的电子邮件 ID 邀请

    • 为用户选择适当的角色

    • 与用户共享应用程序的 URL

恭喜！你已完成 pageplug 快速入门教程。