使用AppMobi* XDK 的跨平台应用程式开发入门

跨平台应用程式开发意指仅编写一次程式，便可于多个平台上部署。应用程式开发者可善加利用倾向跨平台设计与开发的开发工具，使获利更丰。Android* 与iOS* 为目前应用程式开发者最看好的两大行动装置应用程式开发平台，两者在运作上的软体堆叠(stack) 架构和装置硬体效能等皆有所差异，使得应用程式的跨平台开发困难重重。HTML5 为可使跨平台应用程式开发更为轻松的一项技术，提供不同平台间的可移植性(portability)。

AppMobi XDK 提供跨平台应用程式开发工具，开发者可轻松建构能于不同行动平台上运作的HTML5 和JavaScript* 应用程式。本文将介绍如何建构混合式应用程式(hybrid application)，利用AppMobi XDK 提供的JavaScript 应用程式介面(API)，设计出可于Android 装置上运作的应用程式。

AppMobi XDK 软体开发生命周期

AppMobi XDK 不仅提供跨平台应用程式开发工具，也包含部署至指定平台前的应用程式测试，如下图所示。

可建构以HTML5、JavaScript 或CSS 编写的网页应用程式(web app)，或是能够进一步利用硬体功能(如加速计、相机等) 的混合式应用程式。同时可透过模拟器(emulator) 来测试应用程式在不同类型、不同方向的Android 与iOS 装置上的运作效果，也可透过Wi-Fi* 或云端主机服务(cloud-hosting service)，直接于实机上测试应用程式。只要确认应用程式功能运作无误，便可立刻将应用程式部署到各个应用程式商店，如Android Marketplace 或Apple App Store。

安装AppMobi XDK

AppMobi XDK 可透过Chrome 线上应用程式商店安装。必须先至appmobi.com 建立AppMobi 帐号，才能下载安装AppMobi XDK。还有个先决条件即是必须安装Google Chrome* 浏览器和Java* 6。XDK 的运作结合了网页应用程式以及用Java 应用程式运作的本地网页伺服器。

一旦安装了XDK，便可点击Chrome 浏览器的XDK 图示来启动应用程式。请注意，AppMobi XDK 并不会取代您选用的网页开发工具，而是提供一个单独平台，来建构、测试并部署网页或混合式应用程式，同时仍可使用自选的整合开发环境(IDE)。

开发第一个跨平台应用程式

透过AppMobi XDK 环境开发应用程式既方便又容易，所有的开发、测试、部署工具皆可于同一处执行，也可以继续使用熟悉的工具开发网页应用程式，如Eclipse* IDE，因为AppMobi XDK 并不会取代这些工具。若无已组态的开发环境，XDK 也会提供编辑器。此部分将新建一个加速计专案，利用AppMobi JavaScript API 存取Android 装置上的加速计。也可另外加入想要的其他功能，不过本文中会使用准系统(barebone) 结构来展现使用AppMobi XDK 与API 有多么简单。

步骤 1

若要建立您的第一个应用程式，请先依以上步骤安装并启动XDK。启动XDK 后即可看见下图所示的介面，按一下左上角的「Start Menu」，如下图标示。

步骤 2

由于我们的目标为建立可于行动装置上运作的混合式应用程式，因此请选择客户端应用程式类型，如下图：

步骤 3

于以下画面中输入专案名称与其他详细资料。请注意，专案名称开头会自动加上帐号名称，以防名称重复，且IDE 允许选择已存在的网页专案。

步骤 4

选择加速计功能，此步骤会将存取智慧型手机的动作感应器所需的程式码片段包含进应用程式中。

步骤 5

现在专案内已具有加速计的支援，来瞧瞧JavaScript API 如何启用这项硬体功能。在此范例中，将以固定间隔非同步地检查装置感应器。AppMobi 提供加速计物件「watchAcceleration」方法，可根据计时器间隔非同步地取得加速计数值。

开启index.html 可看见此方法的实作。欲开启应用程式原始档时可点击「Emulator」切换按钮，可于程式码编辑模式与模拟器模式间作切换，立即透过模拟器检查程式码的改变对应用程式特性的影响。

在程式码中可发现，只要页面开始载入并启动appMobi，便可开始留意「onDeviceReadyAccel」事件处置器，它负责以「AppMobi.accelerometer.watchAcceleration」方法检查动作感应器的变化。

在程式码中可发现，只要页面开始载入并启动appMobi，便可开始留意「onDeviceReadyAccel」事件处置器，它负责以「AppMobi.accelerometer.watchAcceleration」方法检查动作感应器的变化。

加速计提供x、y、z 三个座标值，范围皆为-1 到1 之间。范例中数值预设为x=0、y=-1、z=0 以作为参考。现在可于右方的「Device Emulation」栏位选择目标装置，以在多个平台上测试应用程式特性。由于我们的目标是在Android 装置上部署混合式应用程式，因此请选择清单内的Droid 装置：

想要旋转一下实机，以模拟应用程式特性？使用右边的「Accelerometer」标签便可旋转装置的角度并改变x、y、z 值。下图中可看见模拟器模仿终端使用者经验来改变装置方向，同时也可看到与其对应的x、y、z 值随之改变。

现在应用程式中已具备基本的功能支援，可以扩充应用程式以进行进阶任务，例如使用加速计感应器制作动画。在范例中，Accelerometer 专案做为appMobi XDK 的一部分来存取，当加速计数值变动时便会动作：

建构Android 的appMobi 应用程式

现在，您已开发出第一个跨平台应用程式，下一步便是选择目标平台。AppMobi 透过云端封装服务(cloud-based packaging service) appHub，可提供此功能。透过appHub，可为iOS、Android、nook*、Amazon 等多个平台建构应用程式。也可建构透过线上应用程式商店(如Chrome) 运作的网页应用程式。此部分将讲解如何为Android 装置建构应用程式。

步骤1

按一下XDK 右上方的建构按钮开始建构程序。请注意，若为首次建立应用程式，请于构建开始前先上传至云端服务，之后的构建可以使用「Build only」选项。

加速计提供x、y、z 三个座标值，范围皆为-1 到1 之间。范例中数值预设为x=0、y=-1、z=0 以作为参考。现在可于右方的「Device Emulation」栏位选择目标装置，以在多个平台上测试应用程式特性。由于我们的目标是在Android 装置上部署混合式应用程式，因此请选择清单内的Droid 装置：

依照以上指示进行后，会发现Android构建系统要求您对Android Push进行组态。Google云端通讯(Google Cloud Messaging, GCM)组态的详细教学请至：http://www.appmobi.com/amdocs/lib/appMobi_Walkthrough_v2_GCM_Push.pdf

于AppHub 控制中心的GCM 组态输入专案ID 与API 金钥。应用程式已准备好开始构建了。按一下「Build App Now」按钮开始构建程序。一旦建构成功，即可在下方的对话方块内下载APK 档，然后便能以电子邮件寄送至装置、直接提交至Android Marketplace，或用Android 软体开发套件(SDK) 将APK 档移至Android 装置上。

结论

本文提供Android 装置上的跨平台网页应用程式和混合式应用程式的建构教学。AppMobi XDK 提供方便且多功能的环境，应用程式的开发、测试、建构皆可于同一处完成，并可轻松地提交至多个平台上，因此能达到一次建构、多方部署的方便性，还可帮助应用程式开发者自应用程式中的获利更丰。

其他资源：

1：AppMobi JavaScript应用程式介面(API)引用：以下连结提供各种应用程式介面，可让应用程式使用多个硬体功能如相机、地理位置(Geolocation)、多点触控(Multi-touch)、画布(Canvas)等：http://dev.appmobi.com/documentation/jsAPI/index.html

2：以AppMobi编写原生应用程式：http://www.appmobi.com/amdocs/lib/Article-DevelopingOutsideXDK.pdf

3：HTML5应用程式教学：http://dev.appmobi.com/?q=node/66

4：练习建立AppMobi应用程式：http://www.appmobi.com/documentation/content/Articles/Article_UsingBestPractices/index.html?r=2722