工具:APICloud Studio

概述

APICloud Studio专为HTML5前端开发者快速开发原生苹果与安卓APP而定制。 APICloud Studio是基于Eclipse和Aptana Studio3进行扩展,集成了包括:应用管理、模版框架、云端同步、代码管理、代码提示、本地打包、真机同步、AppLoader管理,编译自定义AppLoader等功能。企业和开发者也可以在此开源代码的基础上定制自己的APICloud开发工具。

APICloud Studio使用说明

名词解释

  • APICloud Studio:由APICloud提供的移动应用集成开发环境。

  • 本地打包:APICloud Studio把APICloud引擎和开发人员创建的APICloud移动应用结合在一起打成Android(apk)或者iOS(ipa)安装包。

  • 真机同步:APICloud Studio为开发者提供了Android和iOS平台的真机调试器,将本地开发的应用代码放入真机调试器的指定目录,即可实现真机模拟、调试,与最终完成的原生应用功能、体验保持统一。

  • 自定义Loader:添加了自定义模块或第三方模块的AppLoader,不需要云端编译即可用于真机同步调试。详细说明请看自定义loader说明

启动APICloud Studio

APICloud Studio是绿色版,不用修改注册表。下载后解压缩,运行可执行文件即可。

图片说明

打开向导页面

操作流程

  • 首先运行APICloud Studio。
  • 在APICloud Studio中点击下图的功能按钮,便可以打开向导页面。

图片说明

创建一个移动应用

说明

在APICloud中一套应用代码可以对应生成 Android 和 iOS 两个平台的应用。并且APICloud Studio中的操作都是以移动应用为单位进行的。

操作流程

创建一个应用有3个入口。

  • 在向导页面中“创建app项目”中创建移动应用。如下图。

图片说明

  • 在我的app项目视图中,右键鼠标选择,新建—创建APICloud项目 如下图。

图片说明

  • 在文件菜单栏中选择,文件--新建—创建APICloud项目

图片说明

在打开的向导中输入应用名称(必需)和应用说明(非必需),也可以选择需要的应用框架(或空白应用),然后点击完成。即可创建一个APICloud应用。

图片说明

同步本地应用到云端资源库

说明

APICloud Studio开发工具提供了云端上传应用的功能。开发者创建的应用会和云端资源库建立连接。并且网站也通过云端资源库和APICloud Studio共享应用同步开发。

操作流程

  • 首先选择一个需要同步到云端资源库的APICloud应用。
  • 在APICloud应用上右键,选择云端同步—提交。

图片说明

  • 在打开的提交界面输入提交信息后点击完成。即可提交应用到云端资源库中。

图片说明

从云端资源库下载应用到本地

说明

APICloud Studio开发工具提供了云端下载应用的功能。开发者通过同步功能将APICloud应用上传到云端资源库以后,其他开发人员可以通过云端资源库再把最新的应用下载到本地APICloud Studio中。

操作说明

  • 首先选择云端资源库视图。

图片说明

  • 找到你要下载的应用(可以先从云平台找到该应用的应用ID),右键选择检出为。如下图。

图片说明

  • 在检出向导中点击完成按钮即可。

图片说明

使用云端svn同步功能

说明

云端svn同步功能可以刷新云端资源库中的应用,开发者如果在网站上修改过应用可以通过这个功能同步到本地。

操作流程

  • 在APICloud Studio 云端资源库视图下。

  • 点击“同步SVN”按钮。即可发起同步远端资源库的功能刷新云端资源库。如下图所示。

图片说明

真机同步测试

说明

a. USB真机同步测试功能是APICloud Studio为开发者提供的一个快速将应用运行在手机上的功能。这样可以方便开发人员测试,并且提高开发效率。(需要手机连接电脑,并且iPhone手机需要下载iTunes,Android手机需要下载豌豆荚、91等手机助手)

操作说明

真机同步测试有2个入口:

1, 首先在我的APP项目视图中选择一个需要真机测试的应用,然后在应用上右键选择一键真机同步测试。 图片说明

2, 在APICloud Studio 顶部快捷按钮中找到【USB真机同步】按钮 ,点击后在弹出的窗口中选择需要真机测试的应用。运行即可。

当应用同步到手机后, 点击完成关闭同步进度向导。

图片说明

  • 在手机中测试应用。

b. WiFi真机同步

参考文档:http://docs.apicloud.com/Dev-Tools/wifi-debug

使用自定义Loader

  • 编译自定义Loader

右键点击应用项目文件夹 -> 选择“编译自定义Loader” -> 等待编译完成,编译之前请确保云端已添加需要的模块,更详细可参考自定义loader说明

图片说明

图片说明

图片说明

  • 删除自定义Loader

右键点击应用项目文件夹 -> 选择“删除自定义Loader”,删除以后即可使用官方发布的 AppLoader。

图片说明

  • 真机同步测试

功能使用参考以上真机同步测试章节

本地打包

说明

本地打包是APICloud Studio把APICloud核心引擎和开发人员创建的APICloud移动应用结合在一起打成包。达到快速测试的效果。(IOS的测试包是不能在正版系统中安装的,只能安装在越狱手机中)如果需要打正式版本的安装包,请参考云编译说明

操作流程

本地打包有2个入口:

  • 在我的APP项目视图中选择一个需要打包的应用,然后在应用上右键选择生成快速安装包。

图片说明

  • 或者在APICloud Studio 中找到按钮 ,点击后在弹出的窗口中选择需要打包的应用。点击运行。

  • 在弹出的窗口中选择需要生成测试包的类型(ios/android),然后点击完成即可生成对应的快速安装包。

图片说明

  • 生成测试安装包后,APICloud Studio会自动帮您打开安装包所在文件夹。

生成安装包

说明

可以在APICloud Studio中生成测试包或正式包,生成正式包需在网站创建或上传证书。和云端编译得到的安装包是一样的。

操作说明

  • 在APICloud Studio 中项目根目录上右键,弹出菜单,选择“生成安装包”按钮 ,编译准备就绪后,弹出菜单如图: 图片说明
  • 勾选要编译的平台,Android 或 iOS; 选择是否渠道打包; 设置版本号;设置是否加密。设置完成后,点“打包”按钮,开始编译。编译完成后会弹出安装包二维码。关闭二维码窗口,会打开安装包所在文件夹。

云端编译

说明

如果需要把应用打成正式版的安装包,需要在云端进行打包。

操作说明

  • 在APICloud Studio 中找到按钮 ,点击后APICloud Studio会帮您连接到云端编译页面。

图片说明

  • 云端编译界面

图片说明

输出手机调试日志

说明

APICloud Studio通过真机调试可以连接安卓或苹果手机的日志,用户可以使用console.log输出日志以调试程序,而当js报错时,错误日志也会输出到APICloud Studio的控制台中,方便开发人员进行错误分析,bug调试。

操作流程

  • 首先真机同步将要调试的应用同步到Android手机中
  • 点击顶部日志输出按钮,开启APICloud Studio的日志输出功能

  • APICloud Studio控制台会提示开启监听…

图片说明

  • 如果开发人员自己输出了日志,或者js报错就会出现在APICloud Studio控制台中。(如何定义输出日志请参考文档)

注意: 苹果手机日志输出,需要在网站控制台添加logger模块,编译自定义loader,真机同步使用。

在线文档

说明

APICloud提供了在线开发文档,通过阅读开发文档可以是开发人员更快上手开发应用。

操作流程

在APICloud Studio中点击按钮,即可进入APICloud 在线文档页面,也可以访问 http://docs.apicloud.com/ 获取。

图片说明

APICloud 代码提示以及自动补全

说明

APICloud 中提供了自己定义的api对象以及大量的模块(如db、fs等)。通过这些api可以大大减少用户的开发,并且开发人员只需要掌握html5和js技术就可以发开出和iOS/Android相媲美的本地应用,同时,APICloud Studio也提供了这些api的代码提示功能。

Api对象

  • 开发人员需要先熟悉APICloud提供的api文档。
  • 在APICloud Studio的编辑器中,找到js编辑区域。
  • 输入api对象后在输入一个”.”就会触发APICloud Studio的代码提示功能。
  • 其中代码提示栏分为2部分:左侧是提示的属性或者方法名(属性:P,方法:F)右侧是该提示的内容,包括:描述、参数、回调函数、可用性等说明。

图片说明

  • 当选择一个提示后APICloud Studio会自动帮您补全代码。

图片说明

Api函数param参数

  • 选择一个api函数中的param区域。

图片说明

  • 使用组合键"Alt"+"/",APICloud Studio会根据这个函数提示出相应的param参数。

图片说明

  • 选择一个参数后APICloud Studio会自动帮您补全。

图片说明

模块对象

  • APICloud 中模块是基于api调用的。
  • 如果需要使用模块需要先利用api的require函数调用该模块。如下图操作

图片说明

  • 当选择了需要的函数后,APICloud Studio会自动帮您补全代码。

图片说明

WiFi真机同步和实时预览

说明

WiFi真机同步,通过在Studio中建立调试服务,接收真机设备主动连接调试的方式,配合apploader及自定义loader,为开发者提供在局域网内通过WiFi实现应用快速真机同步和实时预览的服务,摆脱应用开发调试过程中,真机同步时必须依赖USB数据线的困扰,完美解决了USB数据线真机同步方式存在的各种问题,具有更强的稳定性和兼容性。WiFi真机同步支持一对多的同步,即同一个项目可同时同步到多个真机;WiFi真机的同步策略为“增量”策略,即每次同步仅同步被编辑过的文件,因此同步速度非常快,几乎可以达到“秒同”;

WiFi真机实时预览,提供在真机上实时加载运行指定页面并预览效果的功能,支持对包括模块在内的所有端API的调试和预览。

WiFi真机同步、WiFi真机实时预览视频教程

使用流程

  • 1、点击Studio菜单栏的“帮助”按钮,在弹出的下拉菜单中点击“查看WiFi真机同步服务器地址”: 图片说明

  • 2、您将查看到Studio在本地建立的调试服务地址及端口: 图片说明

  • 3、打开您手机上的AppLoader或自定义loader(如果手机上还未安装最新版AppLoader,请先安装最新版AppLoader,),最新版AppLoader将在应用UI最上层展示一个灰色的“球”: 图片说明

  • 4、点击该“球”,AppLoader将会在屏幕上弹出一个配置调试服务信息的对话框: 图片说明

  • 5、将2中在Studio中查看到的IP地址及端口号依次填入配置框中: 图片说明

  • 6、点击对话框中的“连接”按钮,如果配置正确,将显示连接成功,同时“球”变为绿色(如果连接不成功,可关闭电脑防火墙后重试。): 图片说明

  • 7、连接成功后,即可在Studio中通过在项目上右键,或者快捷键的方式对某项目进行WiFi真机同步: 图片说明

  • 8、同步状态将实时显示在真机屏幕上,同步完成后AppLoader将自动热重启该应用: 图片说明

  • 9、连接成功后,也可在Studio项目的任意html文件上右键,或者快捷键的方式对该文件进行WiFi真机实时预览: 图片说明

自定义WiFi同步时忽略的文件、文件夹

在项目根目录下增加.ignore.txt 文件。 支持忽略指定文件夹,指定文件。 如.ignore.txt中的内容为:

image   // 文件夹名

res     // 文件夹名

1.png   // 文件名

其他说明

  • 1、快捷键:WiFi真机同步快捷键为[Control + I],WiFi真机预览快捷键为[Control + E]
  • 2、自定义loader和AppLoader默认开启WiFi真机同步和实时预览功能,云编译APP会自动关闭该功能
  • 3、WiFi真机同步需保证手机和Studio在同一个局域网及同一个网段内。WiFi真机同步服务正常时,“球”显示为绿色,未连接则显示为灰色
  • 4、只有当自定义loader或者AppLoader位于前台时,才可进行WiFi同步,应用退到后台,WiFi同步服务将自动关闭,直到回到前台时,再次自动开启。
  • 5、WiFi真机同步与USB真机同步互不冲突,可同时使用
  • 6、自定义loader只支持对该loader所在项目进行WiFi真机同步或实时预览,AppLoader支持对所连接的Studio中所有项目进行WiFi真机同步或实时预览

开源地址

APICloud Studio开源地址:https://github.com/apicloudcom/APICloud-Studio