APICloud Studio 2 快速入门

概述

APICloud Studio 2 是 APICloud 推出的一款更适合 前端工程师 的 移动应用 集成开发工具. 基于前端工程师偏爱的开源 Atom 编辑器深度定制, 与 APICloud 平台的各种云端移动开发服务紧密结合,是新一代名副其实的 云端一体 的移动应用快速开发工具!

简介

同时支持 macOS/Windows/Linux 三个操作系统

为了满足不同操作系统者的需要,新版Studio,同时支持 macOS/Windows/Linux 三个操作系统.各个操作系统上,Studio 的功能都是同样地完整和强大.新版Studio发布伊始,即同时支持三个操作系统,这得益于 APICloud 多年以来在开发工具领域的技术积淀,更表明了 APICloud 始终坚持以开发者为本,坚持多开发工具支持策略，坚持满足各类开发者的使用习惯。

与 APICloud 各种云端移动应用服务打通

新版Studio,进一步阐释了 APICloud 云端一体 的开发理念.在保留 Atom 强大编码功能的基础之上,如何更优雅地与 APICloud 已有的各种云端移动应用开发服务结合,以切实提高开发者的开发效率,一直是 Studio2.0 着重思考与努力优化的问题.我们创造性地将 云端一体 的理念,应用于新版 Studio 的开发过程中,努力打磨云端业务与基础编码功能的结合点,以近乎无感的方式,实现了 Studio 和 APICloud云端的互联互通.举例来说,现在开发者只需要在 Studio 中右击项目根目录,即可快速进行应用的云端打包操作.开发者现在,基本上不需要再单独打开浏览器,就可以完整使用 APICloud 的各种云端服务了.

代码改用 GIT 管理,没有网也能提交代码了

为了保证代码管理服务的稳定性,我们的服务器依然采用的是 SVN 服务器.但考虑到开发者管理代码的便利性,我们在新版的 Studio 中,使用 GIT 来作为主要的代码管理客户端.新版 Studio,应用了 git-svn 技术,使广大 APICloud 开发者,现在就可以使用 GIT 来管理自己的代码了.创建本地代码分支,无网时本地代码提交等 GIT 支持的功能,现在都可以在新版 Studio 中使用了.

GIT-SVN 完全兼容原有的 SVN 各种操作.有SVN 使用经验的开发者,也可以更快地迁移转换到 GIT-SVN 上来.

完整保留 Atom 的插件和主题扩展机制

如何优雅地保留 Atom 的插件和主题扩展机制,是我们在新版 Studio 研发过程中,不断思考的一个问题!在做 Atom 的底层定制开发时,不可避免地要做出一些取舍.但是,为了尽可能保证新版 Studio 的灵活性,以尽可能满足更多的开发者个性化的需要,我们的研发工程师付出了极大的努力和智慧,完整保留了 Atom 的插件和主题扩展机制.现在,你可以在 Studio 中安装任何你喜欢的 Atom 主题或者插件.更重要的是,Studio 的插件设置和 Atom 编辑器是完全独立的,绝对不会互相干扰!

无需VPN,同时支持 iOS/Android 远程设备调试

新版的 Studio,现在支持 iOS/Android 远程设备调试了.更通俗点说,现在你可以在 Studio 中断点调试使用 APICloud 开发的应用了!相较于谷歌浏览器只支持Android的远程调试功能,新版的Studio,同时支持 iOS(甚至支持 iOS 10+) 和 Android 设备的远程调试.最重要的是,不需VPN ,无需 fanqiang,就可以进行远程调试!!!

媲美谷歌浏览器的页面预览功能

新版 Studio 使用源于 chromium 的 devtool 工具,一切只为前端工程师,更高效地编码.现在你不仅可以在 Studio 预览页面效果,还可以像在谷歌浏览器中那样,动态修改样式,打断点等.前端开发过程中,以后就不用再单独开一个浏览器窗口进行预览与调试了!

用心搭配的前端集成开发工具

Atom 的成功,更多地应归功于其海量的插件.但是不同的开发场景,往往需要组合使用不同的插件,才能将开发效率最大化. APICloud 的工程师们,结合自己的深入使用和实践,已经用心为大家搭配组合了一套足够高效和优雅的,专门适用于前端开发的集成开发环境.比如 minimap,可以帮助大家快速定位自己的代码; file-icons 可以提高不同类型文件的辨识度; emmet,可以帮助大家快速布局和编码等.

下载

安装

1. 在 Mac 上安装 Studio

下载完成后,解压,并把解压后,把 APICloud Studio 2 手动复制或移动到 应用程序 目录.

如果不把 APICloud Studio 2 放置到 应用程序 目录,可能会无法使用 “增量更新” 功能.

如果提示”未信任的开发者,无法打开”一类的信息,请到”系统—>偏好设置—>安全性与隐私”,选择继续打开 Studio 即可.

2. 在 Windows 上安装 APICloud Studio 2

下载完成后,解压即可使用.

3. 在 Linux 上安装 APICloud Studio 2

下载完成后,解压即可使用.

基础操作

1. 登录,注销,切换账户

登录,注销,切换账户

直接使用您在 APICloud 官网注册的账号登录即可.

2. 新建应用,新建页面框架,新建模板文件

新建应用,新建页面框架,新建模板文件

应用模板和页面框架模板,会不定期更新.

3. 检查更新

检查更新

每次启动时,会自动检查更新;您也可以在需要时,自己手动检查更新.

APICloud Studio2 创造性使用 bsdiff 算法,来减小增量包的体积,一般增量更新体积不超过 100k,更新时间不超过 30 秒.所以,请放心即时升级 Studio.

代码管理

APICloud Studio 2 将 git-svn 技术深度应用于代码管理功能中. 相较于 SVN,GIT 客户端的分布式和可离线提交的特性,更贴合开发者的代码管理需要.借助于 GIT-svn 技术, 开发者只需要使用 Studio2.0 重新检出自己的项目,就可以立即使用 GIT 管理自己的项目了!

快捷键 cmd+ shift + P (macOS)或 ctrl+ shift + P (Win/Linux) 可以唤醒命令输入框.当熟悉 APICloud Studio 2 一段时间后,你可能更喜欢直接使用命令来执行各种操作.

1. 检出 APICloud 应用

检出项目

  • 可使用 checkout 命令 或 顶部菜单 —> 代码管理 —> 代码检出 —> APICloud 云端应用.

  • GIT 默认检出全部历史提交记录,可手动输入 HEAD , 来指定只检出最新版.

  • 支持检出第三方 GIT/SVN 仓库

2. 代码更新与提交

代码更新与提交

  • 和 SVN 不同的是,GIT 的提交和同步操作是两个独立的操作

  • 想要与云端同步,需要先在本地执行一次 commit 操作

  • 每次本地 commit 之后, 不需要立即 提交到云端

  • 即时在没有网络的情况下,依然可以进行本地提交;联网后只需要提交向服务器提交一次,就可以保留离线时的所有代码记录

3. 查看当前文件变更

查看当前文件变更

当文件内容有修改时,对应位置和代码小地图上会有对应的不同颜色的标记.再也不用担心忘记修改了哪里了.

4. 查看项目历史修改记录

查看项目历史修改记录

  • 可以通过 log 命令,来显示项目的代码提交记录

  • 本地代码提交记录,只含有代码检出时指定的版本区间的代码;所以当发现本地代码记录似乎不够用时,可以尝试重新完整检出项目

  • 在日志区域按住 cmd (macOS) 或 ctrl (Win/Linux) 键, 并点击变更细节的 index 部分,可以以左右分屏对比的方式,查看文件变更

5. 合并代码冲突

合并代码冲突

APICloud Studio 2 有足够完善和智能的机制来解决代码冲突问题.绝大多数情况下,根据 APICloud Studio 2 提示有序解决冲突即可.

当然,你仍然可以通过 顶部菜单 —> 扩展 —> MergeConflicts —> Detect 来手动检测和解决冲突.

本地项目管理

1. 添加本地项目

添加本地项目

APICloud Studio 2 也可以作为常规的文本开发工具使用,所以您完全可以将其作为日常开发的常备工具.内置了绝大多数语言的高亮支持,不仅仅是一款 前端开发工具!

2. 移除本地项目

移除本地项目

此处的移除,只是从开发工具中移除,并不会真正删除项目.

代码编辑

1.语法提示

语法提示

  • 输入 api.require 可以模糊提示平台已有模块

  • 可以根据上下文,推断出变量的真实模块类型

  • 可以根据模块类型,模糊提示对应的模块方法

  • 可以使用 Tab 键,在默认参数间快速切换

2. 自定义安装主题与插件

自定义安装主题与插件

顶部菜单 —> APICloud —> 偏好设置

https://atom.io/packages/ Atom 插件,足够丰富;但国内安装,有极大可能会安装失败.此时可选择手动安装插件:

  1. 到某个插件的 github 主页的 releases 区,找到合适版本的插件,并下载;

  2. 源码下载后,解压放到 ~/.apicloud /packages/ (macOS/Linux) 或 C:\Users\用户名.apicloud\packages\ (Win) 目录

  3. cd 到插件目录,执行 npm i 命令,然后重启 Studio 即可.

3. 格式化代码

格式化代码

因为代码格式化会产生许多冗余的代码记录,所以对于已经使用 GIT/SVN 管理的项目,不建议频繁大范围使用代码格式功能.

4. 使用 emmet 快速编码

emmet 示例

emmet 有自己特定的书写规则, 详见:https://emmet.io/

5. 使用 AUI 快速布局

emmet 示例

AUI 是 APICloud 官方推荐使用 CSS 框架, 文档详见:https://github.com/liulangnan/aui

编译与调试

1. WIFI 真机同步

WIFI 真机同步

开发者需要自行在手机上下载并安装 AppLoader 或使用自定义 AppLoader,正确填写对应的APICloud Studio 2 显示的ip和端口,即可通过 WIFI 调试应用.

2. 自定义 WIFI 调试端口

自定义WIFI 调试端口

允许同时打开多个窗口,窗口会优先使用自定义的 WIFI 调试端口.当遇到端口冲突时,会使用某个随机端口.不同窗口使用的端口,总是不同的.

  • 对于 Andorid,建议使用 Android 6.0.0 以上版本进行远程调试,需要开启 USB调试

  • 对于 iOS, 因为 Apple 自身的安全限制,需要自己上传 develop 模式下的证书,并确认手机上开启设置 Web 检查器

3. 云编译,模块管理,编译自定义AppLoader

云编译

你看到的,就是 APICloud 官网控制台,这里的任何设置,都是和网站实时同步的,因为它们其实是同一个页面.云端一体的 APICloud Studio 2,让云和端的界限,越来越模糊,各种 APICloud 云端服务的使用越来越便利.

4. 远程设备调试

远程调试

远程调试-手机

远程设备调试功能,需要一根可以用于数据传输的 USB 数据线.

Android,需要在手机上开启 USB 调试功能(设置—>更多设置—>开发者选项—>USB调试),手机上需要装有 AppLoader 或自定义 AppLoader.

iOS, 需要在手机手机上开启Web检查器(设置—>Safari—>高级—>Web检查器),并且需要安装的应用,是使用 develop 证书编译的.

5. 在Studio中预览HTML文件

在Studio中预览HTML文件

6.自定义真机同步时想要忽略的文件或目录

支持在项目根目录添加 .syncignore 文件,来自定义想在在真机同步时忽略的文件.这一功能,对于那些基于webpack等自动化工具构建项目的开发者来说,意义重大.

不同于svn/git等的ignore,APICloud Studio 2 真机同步的 ignore 功能基于node-glob开发,支持标准的Glob表达式.

常用格式示例

  • 忽略某一类型的文件,如 *.js.map 文件:
  1. **/*.js.map
  • 忽略项目中所有某一名称的文件夹极其子文件(夹),如node_modules目录:
  1. **/node_modules/**
  • 忽略根目录中某一目录下的所有文件(夹),如src目录:
  1. src/**
  • 基于自动化webpack等自动化构建工具常用的表达式:
  1. {**/*.js.map,**/node_modules/**,src/**}

常用快捷键汇总

常用快捷键汇总

  • 打开命令输入框: cmd + shift + P(macOS) 或 ctrl + shift + P (Win/Linux)

  • 按文件名快速查找文件: cmd + P(macOS) 或 ctrl + P (Win/Linux)

  • 查看当前文件定义的方法: cmd + R(macOS) 或 ctrl + R(Win/Linux)

  • 文件内查找: cmd + F (macOS) 或 ctrl + F(Win或Linux)

  • 全局查找: cmd + shift + F(macOS) 或 ctrl + shift + F(Win或Linux)

  • 刷新视图 ctrl + alt + cmd + L(macOS) 或 ctrl + alt + R

  • WIFI 增量同步: ctrl/cmd + I(macOS) 或 ctrl + I(Win或Linux)

  • 插入 AUI 组件: ctrl+ alt + A

  • 在电脑上预览页面: ctl + shift + V

  • 代码格式化: ctrl + alt + B

APICoud Studio 2 常见问题

一. 已有项目或源码,如何导入?

1. 在 APICloud 网站控制台创建的应用

  • 打开 Studio2
  • 选择 顶部菜单 —> 代码管理 —> 代码检出 —> APICloud 云端应用
  • 选择本地保存位置,注意一定要选择一个空目录
  • 选择代码版本.可以直接回车确认,默认检出全部版本的代码
  • 等待代码检出完成

2. 只有 APICloud 标准结构的源码

  • 需要现在 APICloud 网站创建应用,并在概览页,查看并记录其 appid
  • 参考 1. 在 APICloud 网站控制台创建的应用,把新创建的应用检出到自己电脑上
  • 右键 Studio2 项目根目录,选择”在 Finder 中显示”(macOS)或”在资源管理器中显示”(windows),找到应用代码的真实存放位置
  • 把已有的源码,复制到新检出的应用源码目录中
  • 把 config.xml 中的 id 替换为你创建的应用的 appid
  • 参考 http://apicloud.technology/2017/06/12/git-use/,把代码同步到 APICloud 云端

3. 使用第三方 GIT 管理的源码

  • 假设源码本地目录为 myapp/widget/
  • 打开 Studio 2,选择 顶部菜单 —> 文件 —> 打开
  • 在弹出的文件选择框里,选中 widget 目录即可

二. macOS 无法检出代码,提示 Can’t locate SVN/Core.pm ,怎么办?

1. 未安装过 Xcode 或 Xcode 命令行开发工具

  • 可以在 appstore 下载最新版 Xcode 或者只下载 Xcode 的命令行开发工具
  • 下载 Xcode 命令行工具,需要在 mac 自带终端,执行以下命令:
  1. ## 会弹窗提示,是否安装xcode命令行工具,选择只安装命令行工具,等待安装完成
  2. xcode-select --install
  4. ## 等待命令行安装成功后,在执行下面的命令,以重置开发工具.可能需要输入管理员密码,也即mac的开机密码.
  5. sudo xcode-select -r

2. 已安装 Xcode 或 Xcode 命令行开发工具

一般,是由某些动态库链接不正确引起的,可使用以下命令修复.

  1. sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/SVN/ /Library/Perl/5.18/SVN 
  2. sudo mkdir /Library/Perl/5.18/auto
  3. sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-multi-2level/auto/SVN/ /Library/Perl/5.18/auto/SVN

3.如果以上指令执行时,总是提示 Operation not permitted 一类的错误,可尝试以下方式:

  • 重启电脑,按住 Command+R，进入恢复模式，打开终端(Terminal),输入:
  1. csrutil disable

  • 正常打开电脑, 执行 1 和 2 中需要执行的指令.

  • 重启按住 Command+R，进入恢复模式，打开Terminal,输入指令:

  1. csrutil enable

三. windows 无法检出代码,提示 ‘git’ could not be spawned,如何处理?

  • 在 windows 自带命令行,输入 git :如果有反应,重启 Studio2 即可解决.
  • 如果已经安装过git,请先卸载.
  • 重启 Studio2,如果有提示安装 git,可以选择 “自动免下载安装”(Studio2 内置的是32位GIT,适用于32位或64位系统).安装过程中,最好关闭杀毒软件(因为 git 安装时需要修改环境变量,会被误拦截),最好安装到C盘.
  • 64 位windows系统,推荐手动下载安装 64 位版本的 Git,以释放电脑性能.下载地址: https://git-scm.com/download/win
  • 极少数 64系统的用户,在安装64位GIT后,依然报错,可尝试升级电脑系统,或下载 重新安装 2.10.x 版本的GIT,下载地址是: https://github.com/git-for-windows/git/releases/tag/v2.10.2.windows.1

四. 进行云端操作时, 提示”当前账户 * 似乎没有权限访问此应用的云端数据,请切换账号后重试!”,怎么办?

  • 请确保项目源码 config.xml 中的 id 和此应用在 APICloud 网站控制台概览中显示的 appid 一致.
  • 如果自己电脑上,曾经登录过其他账户,请尝试退出后重新登录.
  • 如果是代码管理相关的操作有问题,请尝试在重新登录后,重新检出此应用来重建部分代码管理的svn/git权限认证信息.新检出的此应用,在重建svn/git认证信息后,可直接删除,继续用原来检出的项目管理代码.

五. WIFI 同步,手机和电脑无法连接,为什么?

  • 检查下防火墙,是否禁用了 APICloud Studio2的网络连接.
  • 检查下手机和电脑,是否连接的是同一个WIFI.
  • 如果电脑上安装有其他的 APICloud 插件或工具,可尝试修改 Stuido2 的默认 WIFI 调试端口:

顶部菜单 —> APICloud —> 偏好设置 —> packages —> apicloud —> 设置 —> WIFI 真机同步调试端口 —> 修改后,需要重启 Studio 2

六. 本地代码时光机,如何使用?

本地代码时光机,仅对未提交到 APICloud 云端仓库的代码生效.在云端同步时,如果本地未做本地提交的代码,会尝试自动备份.默认最新的备份,总是在最上面,即索引为0. 当尝试从备份中获取代码时,可按一下操作执行:

  1. 假定项目名称为 repoA.在电脑文件夹中,把 repoA 复制一份,记为 repoCopy0
  2. Studio2 中,选择顶部菜单 —> 文件 —> 打开 —> repoCopy0,此时可以看到左侧树状图新添加项目 repoCopy0
  3. 把 repoCopy0 中,除 .git 目录以外的文件,都删除
  4. studio2 中,右键 repoCopy0 根目录 —> 代码管理 —> 本地代码时光机 —> 查看所有备份 —> 点击某个自己想要恢复的备份 —> 应用备份 即可.
  5. 可以自行对比 repoCopy0 和 repoA 中文件的差异,根据需要把 repoCopy0 中的文件复制到 repoA 中.
  6. 如果想尝试在多个备份中恢复,重复以上步骤即可.

七. 如何检出指定版本的代码?

历史版本代码,仅供对比或找回历史代码使用.获取方式是:

  1. 在 APICloud 网站控制台 —> 代码,获取该应用的 svn 地址和密码
  2. 使用 TortoiseSvn(适用于windows) 或 smartSvn(适用于 mac),检出代码,并查看所有版本的版本号, svn 的版本号是一个数字,比如 42.
  3. 在 Studio2 中,选择顶部菜单 —> 代码检出 —> 检出APICloud 云端应用 —> 选择 app —> 选择本地保存位置 —> 输入在步骤2中,看到的版本号,回车确认,等待检出完成即可.

八. 如何下载完整版本的 APICloud Studio 2?

  • APICloud Studio2的安装包,共分基础安装包,比如2.1.0版本,更新补丁包,包含补丁包和基础包的全量包.
  • 以2.1.2为例, 2.1.2 全量包 = 2.1.0基础包 + 2.1.1补丁包 + 2.1.2补丁包
  • 基础安装包和全量包,体积较大,一般在 100M 以上,适合初次是使用安装.补丁包,体积极小,一般在 0.1 M 左右,每次升级,Studio2会自动检测更新.
  • 基础包,可以在 //www.apicloud.com/devtools 页面下载.
  • 全量包,可以在 //docs.apicloud.com/Download/download 页面下载,即下载 “APICloud SDK For Studio”.