APICloud Studio 2 产品各部分功能详解
1)、打开向导页面
操作流程
首先运行APICloud Studio 2。
在APICloud Studio2中点击顶部菜单-->帮助-->欢迎页,便可以打开向导页面。
图1.1 向导页面
2)、创建一个移动应用
说明
创建一个应用应用有2个入口。
在向导页面中的新建项目中新建。如下图。
在文件菜单栏中选择,文件--新建—APICloud移动应用。
图2.1 向导页面新建app项目
图2.3 在文件菜单栏中选择创建APICloud项目
在打开向导中输入应用名称(必需)和应用说明(非必需),也可以选择需要的应用框架(或空白应用),然后点击完成。即可创建一个APICloud应用。
图2.4 创建项目向导
3)、同步本地应用到云端资源库
说明
APICloud Studio2开发工具提供了云端上传应用的功能。开发者创建的应用会和云端资源库建立连接。并且网站也通过云端资源库和APICloud Studio2共享应用同步开发。
操作流程
首先选择一个需要同步到云端资源库的APICloud应用。
在APICloud应用上右键,选择代码管理—同步到云端。
图3.1 云端同步
4)、从云端资源库下载应用到本地
说明
APICloud Studio 2开发工具提供了云端下载应用的功能。开发者通过同步功能将APICloud应用上传到云端资源库以后,其他开发人员可以通过云端资源库再把最新的应用下载到本地APICloud Studio2中。
操作说明
首先选择顶部菜单--代码管理--代码检出--APICloud 云端应用。
图4.1 代码检出菜单
找到你要下载的应用(可以先从云平台找到该应用的应用ID 或应用名称),点击确认。如下图。
图4.2 选择应用
在检出向导中输入要检出的版本,回车确认即可。
图4.3 选择版本
5)、使用云端svn同步功能
说明
云端svn同步功能可以刷新云端资源库中的应用,开发者如果在网站上修改过应用可以通过这个功能同步到本地。
操作流程
首先选择一个需要同步到云端资源库的APICloud应用。
在APICloud应用上右键,选择代码管理—从云端同步
图5.1 从云端同步
6)、真机同步测试
说明
真机同步测试功能是APICloud Studio2为开发者提供的一个快速将应用运行在手机上的功能。这样可以方便开发人员测试,并且提高开发效率。(需要手机和电脑连接同一 WIFI 热点)
操作说明
真机同步测试有2个入口:
首先在左侧树状项目视图中选择一个需要真机测试的应用,然后在应用上右键选择 WIFI 全量同步 或 WIFI 增量同步。
在APICloud Studio 2 顶部菜单,点击 项目--运行
图6.1 真机同步测试菜单
在手机中测试应用。
7)、使用自定义Loader
编译自定义Loader
右键点击应用项目文件夹 -> 选择“云编译自定义Loader” -> 等待编译完成,编译之前请确保云端已添加需要的模块,更详细可参考自定义loader说明。
图7.1编译自定义Loader菜单
图7.2编译自定义loader进度条
图7.3自定义Loader编译成功提示框
真机同步测试
功能使用参考以上真机同步测试章节
编译自定义Loader
右键点击应用项目文件夹 -> 选择“编译自定义Loader” -> 等待编译完成,编译之前请确保云端已添加需要的模块,更详细可参考自定义loader说明。
8)、新建页面框架
说明
新建页面框架功能,是 AICloud Studio 2 提供的快速创建App 页面功能.基于 APICloud 提供的定制化模板,开发者可快速进行页面的开发.
操作流程
新建页面框架有2个入口:
在我的左侧树状项目视图中选择一个添加页面框架的应用,然后在应用上右键选择新建页面框架
图8.1新建页面框架菜单
或者在APICloud Studio 2 顶部菜单,选择 文件--新建--APICloud 页面框架
在新建页面框架,选择应用(默认用户右键选中的应用),填写页面框架名称(必须),选择页面框架模板(默认使用第一个页面框架模板),点击完成即可
图8.2新建页面框架页面
9)、云端编译
说明
如果需要把应用打成正式版的安装包,需要在云端进行打包。
操作说明
在我的左侧树状项目视图中选择一个云编译的应用,然后在应用上右键选择云编译,点击后APICloud Studio 2会帮您打开对应的云编译界面。
图9.1 云端编译视图
云端编译界面
图9.2云端编译界面
10)、输出手机调试日志
说明
APICloud Studio2通过真机调试可以连接手机的日志,当用户可以自己输入日志调试程序,并且当js报错时,错误日志也会输出到APICloud Studio2的控制台中,方便开发人员进行错误分析,bug调试。
操作流程
首先通过真机同步测试功能将要调试的应用同步到手机中。
当有手机上该应用有日志输出时,APICloud Studio 2 底部控制台会自动输出。
图10.1 底部控制台输出日志
如果开发人员自己输入了日志,或者js报错就会出现在APICloud Studio控制台中。(如何定义输出日志请参考文档)。
11)、在线文档
说明
APICloud提供了在线开发文档,通过阅读开发文档可以是开发人员更快上手开发应用。
操作流程
在APICloud Studio2顶部菜单中点击 帮助-->文档,即可进入APICloud 在线文档页面,也可以访问 http://docs.apicloud.com/ 获取。
图11.1 在线文档视图
12)、APICloud 代码提示以及自动补全
说明
APICloud 中提供了自己定义的api对象以及大量的模块(db、fs等)。通过这些api可以大大减少用户的开发,并且开发人员只需要掌握html5和js技术就可 以发开出和ios/android相媲美的本地应用,同时,APICloud Studio 2也提供了这些api的代码提示功能。
Api对象
开发人员需要先熟悉APICloud提供的api文档。
在APICloud Studio2的编辑器中,找到js编辑区域。
输入api对象后在输入一个”.”就会触发APICloud Studio2的代码提示功能。
其中代码提示栏分为2部分:左侧是提示的属性或者方法名
图12.1 api对象代码提示弹出
13)、APICloud 代码本地编译功能
说明
APICloud 支持直接基于用户电脑本地的代码,编译生成 iOS/android 应用。此功能,不需要用户手动将代码上传到APICloud 服务器,同时还能结合用户在 APICloud 网站控制台的各项应用相关的设置进行编译打包。
操作流程
开发者右键项目根目录,选择 “本地编译”,以打开本地编译界面
图13.1 本地编译入口
开发者在本地编译界面,完善各种 app 相关的设置,点击“本地打包”按钮,即可进行打包。
图13.2 本地编译操作页面
14)、APICloud 本地代码时光机功能
说明
APICloud 本地代码时光机主要为了解决开发者本地未提交到代码服务器的代码管理问题。支持手动备份和自动备份。开发者可通过本地时光机中的代码备份,找到某一时间点本地未提交的代码记录。
操作流程
开发者在尝试将代码同步到 APICloud 代码服务器时,会自动进行本地未提交代码的备份。
开发者可通过右击项目根目录,选择 代码管理--本地代码时光机--手动备份,来手动备份本地所有未提交的代码
图14.1手动备份
开发者可右键选中项目根目录,选择 代码管理 -- 本地代码时光机 -- 查看所有备份 -- 选择某一备份,来从备份中恢复代码
图14.2 查看备份
图14.3 备份记录示例
图 14.4 使用备份来恢复代码
15)、APICloud 远程设备调试功能
说明
APICloud 远程设备调试功能,主要借助于 webkit 的远程调试协议来实现。支持iOS 7 + 和 Android 4.4 + 的设备。APICloud 的远程设备调试功能,可以使开发者方便地在 APICloud Studio2 中审查 app 中的页面效果,并对其中的 js 文件代码,进行断点调试。
操作流程
开发者首先需要将应用 WIFI 同步到手机上的 AppLoader 中或自定义 AppLoader 应用中。
使用USB线,将手机与电脑连接。iOS需要保证应用使用 develop 证书打包,并开启手机的“web检查器”功能;Android 需要保证开启 USB 调试功能。
选择顶部菜单 -- 远程设备 -- 苹果设备或安卓设备
图15.1远程设备调试入口
APICloud Studio 2 会列出其中手机上可以进行远程设备调试的 html页面,点击可进入其对应的远程设备调试界面
图15.2 列出支持远程设备调试的页面
图15.3远程调试界面概览
在 APICloud Studio 2 中的远程调试界面的 Sources 面板下,可选择其中的 js 文件,进行断点调试
图15.4 断点调试JS 文件
16)、APICloud 实时预览功能
说明
APICloud 预览功能,可以让开发者直接在 APICloud Studio 2 中进行 html 页面的预览,审查元素等操作。
操作流程
开发者可右击左侧树状图某个 html文件,或在 html 文件中右键,选择 “实时预览”,来进行页面的预览。
图16.1右键html文件实时预览
图16.2在html 页面内右键进行实时预览
开发者可在实时预览界面,右键某个 html 元素,进行审查,来查看其dom结构,css样式等。
图16.3审查元素
更多APICloud Studio 2功能:请关注https://www.apicloud.com/devtools