一、注册 Appery.io 用户
登陆 appery.io/account/signup 网站，填写信息之后点击Sign Up按钮。系统会发送一个确认信息到你的邮箱。单击邮箱中的链接，将看到图1所示。
[img=700,350]http://img.blog.csdn.net/20140626115837359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图1）
二、创建 Mobile App
点击图1中的Create new app，帮这个app输入一个名字（Appery Project），之后将进入App开发主界面。
2.1 创建页面
单击左侧Pages-->startScreen，如图2所示。首先把startScreen页面的名字重命名下，可以把鼠标移到名字上，在这个名字的右侧会出现一个设置的小图标，可以用它来修改名字。现在把它改成DotA。
[img=707,350]http://img.blog.csdn.net/20140626142710265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图2）
2.2 设置页面主题
单击Project-->App settings，在页面右侧将看到Theme属性，文中的项目主题为gelato。
[img=707,350]http://img.blog.csdn.net/20140626143632109?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图3）
2.3 修改页面的上的头部和底部
在设备中，单击页面顶部，右侧会出现顶部的相关属性，修改Text为DotA，Swatch设置为G。同理单击底部，设置Swatch为G。如图4所示。
[img=707,350]http://img.blog.csdn.net/20140626144357171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图4）
2.4 在设备上添加List组件
拖动工具栏中的List组件到页面中间，在右侧属性面板中设置name为list，Item等于1，并单击Apply按钮。如图5所示。
[img=707,350]http://img.blog.csdn.net/20140626144749875?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图5）
另外如果想快速的定位某一个组，可以单击面板上的路径。如图6所示。
[img=707,350]http://img.blog.csdn.net/20140626145119609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图6）
2.5 创建数据库
现在需要创建一个数据库（Database）。
在App开发页面的顶部单击Database按钮（如图7所示），将出现一个弹出框，输入数据库（Database）的名字是Appery，单击Create。
[img=707,0]http://img.blog.csdn.net/20140626145550265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图7）
2.6创建一张表（Collection）
继2.5之后，页面的显示如图8所示。
[img=707,350]http://img.blog.csdn.net/20140626150616484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图8）
2.6.1 创建表Heros
在数据库Appery下单击Create new collection，系统将弹出一个对话框，输入表（Collection）的名字Heros，单击Add按钮，系统将创建表Heros。
2.6.2 创建字段和添加数据
单击图8中的+Col（添加一个字段）图标，弹出如图9所示。输入字段的名字（Name）并选择该字段的类型。目前系统支持的类型有（String、Number、Boolean、Date、Array、Pointer、Object、Geo Point）。如果要删除字段，则单击图8中的-Col图标。
[img=707,350]http://img.blog.csdn.net/20140626151803281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图9）
文中仅仅创建了一个字段，当然可以创建多个。接下来单击+Row添加数据。数据添加后如图10所示。
[img=707,0]http://img.blog.csdn.net/20140626154127750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]
2.7 绑定数据
将数据库（Appery）中的表（Heros）和页面（DotA）进行关联。
（1）创建一个数据库服务，在Mobile App中选择Create New-->Database Services.单击Database Services后弹出一个页面选择数据库（Appery）。在页面下方会看到可扩展的Heros，单击并展开。将出现多个可选项，每一项都直接关联着后台的一个方法。在这里仅仅显示表（Heros）中的数据，因此只需要勾选List多选框，如图11所示。
最后单击Import selected services按钮，将看到Project-->Services目录下生成两个services文件。其中的Settings service是用来设置数据库的API Key，而另一个Heros_list service作用页面层和数据层的一个桥梁，页面发送请求到Heros_list service，Heros_list service调用数据库中的数据，在返回到页面。如图12所示。打开Appery_Heros_list service文件，在右侧的选项卡中选择Test选项，然后直接单击Test按钮，在Response面板中将看到下列代码：
[img=707,0]http://img.blog.csdn.net/20140626160347421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图13）
接下来单击Edit Mapping按钮，把页面上的元素影射到Response选项的属性上。如图14所示。
[img=707,0]http://img.blog.csdn.net/20140626160733437?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图14）
2.8 事件调用服务
双击Project-->Pages-->DotA页面，在右侧单击Design选项，在页面顶部选中DotA组件。如图15所示。
单击页面下方的EVENTS，添加触发事件。选择Component-->DotA，Event-->Page show，Action-->Invoke service后单击Add event按钮。如图16所示。到此工作基本已经完成，接下来将发布Mobile App。
[img=707,0]http://img.blog.csdn.net/20140626161822078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图16）
三、发布 Mobile App
单击右上角的Test-->Launch in a web browser按钮，如果没有保存这个App，它的功能将保存当前的Mobile App，之后再次单击Launch in a web browser，将显示最终的效果图。
单击工具栏上的Export，如图17所示。根据需要可以下载不同的资源。
效果图，如图18所示。
[img=707,350]http://img.blog.csdn.net/20140626163337750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FpemVkb25nMTk5MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[/img]（图18）
附件：加入搜索功能，但未完善
