Question

创建一个新的手机应用非常简单。我们只需单击Apps选项卡（1），然后单击绿色的Create new app按钮（2）。填写应用名称为properties（3），然后单击Create按钮进行创建就可以了，该过程如图4.5所示。

图4.5　创建新手机应用及数据库集合

4.4.1　创建数据库访问服务

创建新应用时的选项数量可能会有些多。使用Appery.io的应用编辑器，可以写出复杂的应用，不过我们将尽可能保持事情简单。我们最初需要的就是创建一个服务，能够让我们从应用中访问Scrapy数据库。为了达到这一目的，需要单击长方形的绿色按钮CREATE NEW（5），然后选择Database Services（6）。这时会弹出一个新的对话框，让我们选择想要连接的数据库。选择scrapy数据库（7）。这个菜单中的大部分选项都不会用到，现在只需要单击展开properties区域（8），然后选择List（9）。在后台，它会为我们编写代码，使得我们使用Scrapy爬取的数据可以在网络上使用。最后，单击Import selected services按钮完成（10）。

4.4.2　创建用户界面

下面将要开始创建应用所有的可视化元素了，这将会使用编辑器中的DESIGN选项卡来实现，如图4.6所示。

图4.6　创建用户界面

从页面左侧的树中，展开Pages文件夹（1），然后单击startScreen（2）。UI编辑器将会打开该页面，我们可以在其中添加一些控件。下面使用编辑器编辑标题，以便对其更加熟悉。单击头部标题（3），然后会发现屏幕右侧的属性区域会变为显示标题的属性，其中包含一个Text属性，将该属性值修改为Scrapy App，屏幕中间的标题也会相应地更新。

然后，需要添加一个网格组件，从左侧面板（5）中拖曳Grid控件即可实现。该控件有两行，而根据我们的需求，只需要一行即可。选择刚刚添加的网格。当手机视图顶部的缩略图区域（6）变灰时，就可以知道该网格已经被选取了。如果没有被选取，单击该网格以便选中。然后右侧的属性栏会更新为网格的属性。这里只需要将Rows属性设置为1，然后单击Apply即可（7）和（8）。现在，该网格就会被更新为只有一行了。

最后，拖拽另外一些控件到网格中。首先要在网格左侧添加图片控件（9），然后在网格右侧添加链接（10），最后在链接下面添加标签（11）。

就布局而言，此时已经足够。接下来将从数据库中向用户界面输入数据。

4.4.3　将数据映射到用户界面

目前为止，我们花费了大量时间在DESIGN选项卡中，以创建应用的可视化效果。为了将可用的数据链接到这些控件中，需要切换到DATA选项卡（1），如图4.7所示。

图4.7　将数据映射到用户界面

选择Service（2）作为数据源类型。由于前面创建的服务是唯一可用的服务，因此它会被自动选取。然后可以继续单击Add按钮（3），此时服务属性将会在其下方列出。只要按下了Add按钮，就会看到像Before send以及Success这样的事件。我们可以通过单击Success后面的Mapping按钮，定制服务成功调用后要做的事情。

此时会打开Mapping action editor，我们可以在这里完成连线。该编辑器有两侧。左侧是服务响应中可用的字段，而在右侧中可以看到前面步骤中添加的UI控件的属性。两侧都有一个Expand all链接，单击该链接可以看到所有可用的数据和控件。接下来，需要按照表4.2中给出的5个映射，从左侧向右侧拖曳。

表4.2

响应	组件	属性	备注
$[i]	mobilegrid_2		使用for循环创建每一行
title	mobilelink_8	Text	设置链接文本
price	mobilelabel_9	Text	在文本域中设置价格
image_ urls	mobileimage_7	Asset	从图片容器的URL中加载图片
url	mobilelink_8	URL	为链接设置URL。当用户单击时，将会加载关联的页面

4.4.4　数据库字段与用户界面控件间映射

表4.2中项的数量可能会与你的情况有些许差别，不过由于每种控件都只有一个，因此出错的可能性非常小。通过设置这些映射，我们通知Appery.io在后台编写所有代码，以便在数据库查询成功时使用数据库中的值加载控件。下面，可以单击Save and return按钮（6）继续。

此时又回到了DATA选项卡，如图4.7所示。由于还需要返回到UI编辑器当中，因此需要单击DESIGN选项卡（7）。在屏幕下方，你会发现一个EVENTS区域（8），尽管该区域一直存在，但它刚刚才被展开。在EVENTS区域中，我们让Appery.io做一些事情，作为对UI事件的响应。这是我们需要执行的最后一个步骤。它会让应用在UI加载完成后立即调用服务取回数据。为了实现该功能，我们需要选择startScreen作为组件，并将事件保持为默认的Load选项。然后选择Invoke service作为action，保持Datasource为默认的restservice1选项（9）。最后，单击Save（10），这就是我们为创建这个手机应用所做的所有事情了。

4.4.5　测试、分享及导出你的手机应用

现在，可以测试这个应用了。我们所需要做的事情就是单击UI生成器顶部的TEST按钮（1），如图4.8所示。

图4.8　运行在你浏览器中的手机应用

手机应用将会在浏览器中运行。这些链接都是有效的（2），可以浏览。可以预览不同的手机屏幕方案以及设备方向，也可以单击View on Phone按钮，此时会显示一个二维码，你可以使用移动设备扫描该二维码，并预览该应用。你只需分享其生成的链接，其他人也可以在他们的浏览器中尝试该应用。

只需单击几下，我们就可以将Scrapy抓取的数据组织起来，并展示在手机应用中。如果你需要更进一步地定制该应用，可以参考Appery.io提供的教程，其网址为http://devcenter.appery.io/tutorials/。当一切准备就绪时，就可以通过EXPORT按钮导出该应用了，Appery.io提供了非常丰富的导出选项，如图4.9所示。

图4.9　你可以将应用导出到大部分主流移动平台

你可以导出项目文件，在自己喜欢的IDE中进一步开发；也可以获得二进制文件，发布到各个平台的手机市场当中。