创建手机应用

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

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

创建数据库访问服务

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

创建用户界面

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

Figure 2. 图4.6 创建用户界面

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

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

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

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

将数据映射到用户界面

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

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

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

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

Table 1. 表 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.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），这就是我们为创建这个手机应用所做的所有事情了。

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

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

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

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

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

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

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

本章小结

使用 Scrapy 和 Appery.io 这两个工具，我们拥有了一个可以抓取网站并且能够将数据插入到数据库中的系统。此外，我们还得到了 RESTful API，以及一个简单的可以用于 Android 和 iOS 的手机应用。对于高级特性和进一步开发，你可以更加深入到这些平台中，将其中部分开发工作外包给领域专家，或是研究替代方案。现在，你只需要最少的编码，就能够拥有一个可以演示应用理念的最小产品。

你会注意到，在如此短的开发时间中，我们的应用看起来还不错。这是因为它使用了真实的数据，而不是占位符，并且所有链接都是可用且有意义的。我们成功创建了一个尊重其生态（源网站）的最小可用产品，并以流量的形式将价值回馈给源网站。

现在，我们可以开始学习如何使用 Scrapy 爬虫在更加复杂的场景下抽取数据了。