likes
comments
collection
share

前端新手快速上手APICloud App开发

作者站长头像
站长
· 阅读数 22

之前因为毕设的原因接触到了APICloud这个平台,后来又研究了一下如何从0到1的开发一款app,今天就简单给大家演示一下使用APICloud制作一个app的全流程。

首先需要到APICloud官网(www.apicloud.com)进行注册,然后下载好官方的开发工具APICloud Studio3(www.apicloud.com/studio3)。这个开发工具和APICloud官网的控制台是同步的,同一个账号下,在官网的控制台里和开发工具中都可以简单的管理自己的应用,还是很方便的。此外还需要大家下载一下逍遥模拟器。

选择应用类型并创建应用

在下载好开发工具之后,我们就可以创建应用了。创建应用有两种方式,因为开发工具和官网控制台是同步的,所以在官网控制台和开发工具中都可以创建应用的,我们就选择其中一种,在官网控制台创建应用。

首选打开官网,登录进去后打开自己的开发控制台,点击创建应用,在官方文档中说 Native App原生应用适合功能强大、性能卓越的APP开发,所以我们选择原生开发。

前端新手快速上手APICloud App开发

选择基础模板就好,其他功能暂且不管,输入好应用名后点击创建。

创建证书并编译自定义Loader

创建好应用之后点击控制台的左侧一栏的模块,然后再点击自定义Loader,编译自定义Loader需要有证书,而Android的证书比iOS证书更方便创建,为了方便我们选择创建Android的证书和自定义Loader。

在开发控制台中点击证书,然后点击右上角的一键创建证书,输入相应的信息和密码就可以成功创建了。

前端新手快速上手APICloud App开发

自定义Loader是APICloud 为方便开发者在移动设备调试App而开发的一种调试器,开发者可以在移动设备上实时调试自己的App并将日志输出到计算机上的开发工具中,方便在本地进行开发。

编译成功后我们需要将自定义Loader下载下来。这时我们就在官网控制台里创建好了一个应用,因为刚才说过,官网控制台和开发工具是连通的,所以我们只要把刚才创建好的应用导入到开发工具就可以了。

我们打开官方的开发工具APICloud Studio3,点击左上角项目,然后点击导入项目,选择云端检出,在云端检出时选择刚才创建好的应用,选择一下本地保存路径,这样就把官网控制台上创建好的项目同步下来了。

前端新手快速上手APICloud App开发

应用同步好之后,我们就可以进行开发了,我们可以选择真机和模拟器来展示开发效果,这里我选择了逍遥模拟器来进行展示。然后我们把刚才下载到本地的Loader直接拖入逍遥模拟器中进行安装,就可以了,安装成功后双击打开。

前端新手快速上手APICloud App开发

从模拟器里打开应用之后,我们要将开发工具中的应用通过WIFI同步到模拟器中,点击模拟器界面中这个灰色的小球。

前端新手快速上手APICloud App开发

这是需要我们输入IP地址和端口,此时我们去开发工具中找一下相应的地址与端口。

前端新手快速上手APICloud App开发

我们在开发工具中点击终端,然后选择通过Wi-Fi连接新的设备。

前端新手快速上手APICloud App开发

点击后会出现真机同步的界面,不需要扫码,我们只需要把最下方的调试器IP和端口输入到刚才模拟器的同步配置界面中,然后点击连接就可以成功连接了。如果不用模拟器,想要用手机展示效果的话,需要确保手机和Studio在同一网络下。

前端新手快速上手APICloud App开发

这时我们鼠标右键点击项目名称,然后点击WIFI同步【全量】,就同步成功了。

前端新手快速上手APICloud App开发

同步成功之后,当前显示的页面就是main.html页面中的信息

前端新手快速上手APICloud App开发

现在我们就可以进行开发了,我们需要用到前端开发技术,零基础的开发者们可以先简单学习一下HTML、CSS、JS的基础。然后我们在主页中写入一个按钮,设置点击事件,想要在点击按钮后弹出提示。写完后记得保存,然后再鼠标右键点击项目名demo,再次进行WIFI同步。

前端新手快速上手APICloud App开发  

同步成功,模拟器页面上出现了一个按钮,点击后也可以成功弹出提示。

前端新手快速上手APICloud App开发

进行代码同步,将代码上传到官网控制台

之后我们需要把代码上传到控制台,然后在控制台进行云编译,把我们的程序打包成安装包。

右键点击项目名,在代码管理中点击提交到云端,之后点击COMMIT就好。

前端新手快速上手APICloud App开发

然后我们点击官网的开发控制台左侧导航栏中的代码,就可以在代码更新日志里看到自己的更新记录了。

进行云编译,将应用编译为安装包

代码上传完成之后我们需要进行云编译,点击控制台左侧导航栏的云编译。云编译时可以给我们的app起一个吸引人的名字,然后选择一下应用类别(如网上购物-商城)和应用平台(iOS或Android), 编译类型可以选择正式版或者测试版,其他设置如全局加密和SVN设置暂且禁用,我们这里选择一下测试版,之后就可以进行编译了。

前端新手快速上手APICloud App开发

编译过程大概半分钟,成功后我们就可以扫码下载app进行安装了。

总结

到此为止我们就走了一遍一个app从0到1的基本流程,我们来回顾一下基本步骤:第一步需要在官网的开发控制台创建应用(在开发工具中也可以创建),第二步需要创建证书,第三步需要编译自定义Loader(应用加载器,具有调试功能,为了方便我们在本地进行开发),第四步需要同步代码,最后第五步进行云编译。

我的代码只是简单的写了一个按钮,如果大家想要快速的开发一款功能成熟的app,也可以像我之前毕设那样,把一些现成的源码导入到项目中来做一个参考。源码下载地址:https://www.apicloud.com/source_code/shiliyuanma

前端新手快速上手APICloud App开发