
2.2 创建一个应用
在学习jQuery Mobile时笔者拒绝复杂的环境搭建,我们没有必要去了解复杂的环境,否则会反客为主,时间浪费在环境上。
2.2.1 创建跨平台应用
利用APICloud创建跨平台应用有两种方法:一种是在云端直接创建;一种是在APICloud Studio中创建。我们这里先在云端创建一个,然后在APICloud Studio中打开,让读者熟悉这两种界面的操作。
步骤01 首先注册一个APICloud账号,目前只支持手机注册,打开http://www.apicloud.com/signup,输入手机号码和接收的验证码,如图2-1所示。
步骤02 登录APICloud系统,点击左上角的“创建应用”按钮,如图2-2所示。选择“Native”选项卡,填写“名称”及“说明”,单击“创建”按钮,应用即创建完成。

图2-1 注册APICloud账号

图2-2 创建应用
步骤03 创建完成后,自动打开应用预览页http://www.apicloud.com/appoverview,这里可以看到应用的相关信息,留意一下应用ID,如图2-3所示,APICloud Studio会用到。其实此时应用已经创建完成,但这个应用没有任何内容。我们可以通过APICloud Studio来看看默认的应用会有什么内容。

图2-3 应用ID
步骤04 下载APICloud Studio,在这个(http://docs.apicloud.com/Download/download)界面中下载“APICloud SDK”,它包括了APICloud Studio和一些插件。下载的安装包里有一个“APICloudStudio_win”文件夹,找到里面的APICloud.exe文件,不用安装可以直接运行。
步骤05 运行后出现登录界面,如果是第一次使用,则会出现一个设置工作文件夹的界面,这里不给图了,读者可以选择默认。利用上面注册的APICloud账号来登录APICloudStudio,如图2-4所示。登录后,选择左侧的“云端资源库”,根据APICloud创建的应用ID选择SVN项目,如图2-5所示。

图2-4 登录IDE

图2-5 选择SVN项目
提示
目前APICloud只支持Windows系统。
步骤06 右击项目,选择“检出为”命令,如图2-6所示。
步骤07 检出后出现“从SVN检出”对话框,直接单击“完成”按钮。这时我们的应用中已经包含了一些基本的HTML文件。我们采用传统的浏览方式,打开APICloud Studio的工作文件夹C:\APICloud\workspace\HelloApp,这就是新创建的应用,默认有一个index.html文件,选择在浏览器中打开它,如图2-7所示。

图2-6 检出

图2-7 第一个App效果
2.2.2 同步本地应用到云端资源库
开发者在APICloud Studio创建的应用会和云端资源库建立连接。项目代码改动后,可以使用APICloud Studio的代码提交功能提交代码到云端资源库。
操作流程:
步骤01 首先选择一个需要同步到云端资源库的项目,注意这个操作是在“我的App项目”选项卡下。
步骤02 右击该项目,选择“云端同步”|“提交”命令,如图2-8所示。
步骤03 在打开的“提交”对话框中输入提交信息后,单击OK按钮完成,如图2-9所示,即可提交项目代码到云端资源库中。

图2-8 选择“云端同步”|“提交”命令

图2-9 云端资源库
2.2.3 真机同步调试
APICloud提供了两种真机测试方式。
- WiFi真机同步:这种方式同步速度慢、效率低,环境兼容问题严重,而且需要安装手机驱动程序或手机助手、iTunes、iTools等各种辅助工具软件。
- USB真机同步:可以通过HTTP方式,同步工具插件中的App代码文件到真机上,由于当设备和工具插件在同一个WiFi环境下时,文件传输速度非常快,所以WiFi真机同步操作相比USB方式速度要快很多,并且工具插件中会进行智能处理,每次只同步只会更新有修改的文件。
如果使用真机同步,则必须在手机上安装AppLoader,从官方或本书提供的安装包中找到它的下载文件,安卓手机是.apk格式(可以直接安装),苹果手机是.ipa(需借助iTool等工具安装)。我们这里以“WiFi真机同步”测试下我们默认生成的HelloAPP。
步骤01 打开手机上安装的AppLoader,默认是一片空白,只有一个灰色圆球。单击这个圆球,弹出一个对话框,要求输入IP地址和端口号。
步骤02 可以通过选择APICloud的“帮助”|“查看WiFi真机同步服务器地址”命令来获取IP地址和端口号,如图2-10所示。

图2-10 IP和端口号
步骤03 输入IP和端口后,灰色圆球变为绿色圆球,如图2-11所示。
步骤04 此时在APICloud中右击项目名称,在弹出的快捷菜单中选择“WiFi真机同步”命令,移动设备上的AppLoader自动启动,即可实现真机同步调试(图2-12)。

图2-11 配置好真机

图2-12 测试App效果
2.2.4 云端编译打包
云端编译在浏览器中完成,不需要本地APICloud。
步骤01 在浏览器中登录APICloud,选中我们要编辑的项目,单击“云编译”按钮,如图2-13所示。

图2-13 打开云编译
步骤02 填写“应用名称”,选择“生成平台(iOS或Android)”,单击“云编译”按钮,如图2-14所示。耐心等待编译完成。

图2-14 填写相关信息
步骤03 完成后,用户扫描二维码就可以下载安装应用至移动设备了,如图2-15所示。

图2-15 扫描安装