Introduction to Cross-Platform Application Development Using AppMobi* XDK [跨平台]

Cross-platform application development implies writing once and deploying to multiple platforms. Application developers can monetize better by taking advantage of development tools that favor cross-platform design and development. Android* and iOS* are two mobile application development platforms that most app developers want to have their applications run on. The architecture of the software stack and the hardware capabilities of the devices running on the two different platforms pose challenges to cross-platform application development. HTML5 is one technology that makes cross-platform application development easy while providing portability to the different platforms.

The AppMobi XDK provides the cross-platform application development tools that developers can leverage to easily build HTML5 and JavaScript* apps that run on different mobile platforms. In this article, we will see how to build hybrid applications that leverage the JavaScript APIs provided by the AppMobi XDK to build an application that will run on Android devices.

The AppMobi XDK Software Development Life Cycle

The AppMobi XDK provides not just tools for cross-platform application development, but also for testing your applications before deploying them on the platform of choice, as shown in the screenshot below.

[Source: http://appmobi.com/]

You can build your applications as a web app using HTML5, JavaScript and CSS, or as a hybrid application to tap into hardware functionality like the Accelerometer, Camera, etc. You can simultaneously test your application using emulators for different types of Android and iOS devices in different orientations. You can also choose to test the application on an actual device using Wi-Fi* or through a cloud-hosting service. Once you are convinced about the functionality of the application, you can deploy it on different app stores like the Android Marketplace or the Apple App Store.

Installing the AppMobi XDK

The AppMobi XDK is available for installation through the Chrome store. You need to create an AppMobi account at appmobi.com to download and install the AppMobi XDK. As a pre-requisite, you also need to install Google Chrome* and Java* 6. The XDK runs as a web application together with a local web server that runs as a Java application.

Once you install the XDK, you can launch the application by clicking the XDK icon in the Chrome browser. Note that the AppMobi XDK does not replace the web development tools of your choice. It provides a single platform to build, test, and deploy your web/hybrid applications while still allowing you to use the IDE of your choice.

Developing your First Cross-Platform Application

Developing your application through the AppMobi XDK environment is convenient and easy since you can find the development, testing, and deployment tools all in one place. You will see that you can continue to use the tools that you are used to, for example an Eclipse* IDE, for developing your web application since the AppMobi XDK does not replace these tools. It also provides an editor for you to use if you do not already have a development environment configured. In this section, we will create an accelerometer project that leverages the AppMobi JavaScript APIs to access the accelerometer on the Android device. You can build additional functionality as you desire, but in this article, we use the barebones structure to show you the ease of use of the AppMobi XDK and APIs.

Step 1

To create your first application, install and launch the XDK using steps provided above. Once you launch the XDK, the interface you see is as shown below. Click the “Start Menu” button at the top left as highlighted.

Step 2

Since our goal is to create a hybrid application that will run on mobile devices, select the client-side application type in the screen below:

Step 3

Enter the project name and other project details in the following screens. Note that the project name is prefixed with the account name to avoid duplication of names. Also note that the IDE will allow you to choose an already existing web project.

Step 4

Select the Accelerometer capability. This will include the necessary code snippets in your application to access the motion sensors on smartphones.

Step 5

Now that the accelerometer support has been included in your project, let us explore the JavaScript API that enables this hardware feature. In this example, we check for changes to the device sensors asynchronously at regular intervals. AppMobi provides an Accelerometer object with a “watchAcceleration” method that asynchronously retrieves the accelerometer values based on timer intervals.

Open the index.html to see how this method is implemented. You can open the source of the application by clicking the “Emulator” toggle button that allows you to switch between code editing and emulator modes. This allows you to immediately see how changes to code affect the application behavior through the emulator.

In the code, you can see that as soon as the page loads and appMobi is activated, you can start watching for the “onDeviceReadyAccel” event handler that checks for changes to the motion sensor through the “AppMobi.accelerometer.watchAcceleration” method.

The accelerometer provides values for x, y, and z coordinates that each range between -1 to 1. You can see in the sample that these defaults are set to x= 0, y=-1, and z=0 as the reference. Now you can test the application behavior on multiple platforms by selecting the device of your choice through the “Device Emulation” section to the right. Since our goal is to deploy our hybrid application on an Android device, let us choose the Droid device from the list:

Would you now like to simulate the behavior on an actual device by changing the device orientation? You can do this using the “Accelerometer” tab on the right and change the x, y, and z values by changing the device inclination. In the figure below, you can see that the emulator simulates the end user experience by changing the device orientation and displaying the corresponding x,y,z value changes.

With this basic functionality support now available in your application, you can extend your application to perform advanced tasks such as animation by using the accelerometer sensor. In the sample Accelerometer project available as a part of the appMobi XDK, the can moves as the accelerometer values change:

Building you appMobi Application for Android

Now that you have developed your first cross-platform application, the next step is to build it for the platform of choice. appMobi provides this capability through appHub, which is a cloud-based packaging service. Through appHub, you can build applications for multiple platforms like iOS, Android, nook*, Amazon, etc. You can also build web applications that run though a web store, such as Chrome. In this section, you will learn how you can build your application for Android devices.

Step 1

Start the build process by clicking the build button at the top right of the XDK. Note that if this is the first time you are building an application, you will first need to upload it to the cloud service before you can build it. On subsequent builds, you can use the “Build only” option.

This will open the appHub control center for you where you can enter application-specific information such as an icon, splash screen, etc. Click the Android button to identify application-specific issues that must be fixed before you can proceed with building for Android devices. The control center is shown below.

Through these instructions, you see that the Android build system requires you to configure Android Push. Detailed instructions on configuring Google Cloud Messaging is provided at: http://www.appmobi.com/amdocs/lib/appMobi_Walkthrough_v2_GCM_Push.pdf

Enter the Project ID and API Key from the GCM configuration in the AppHub Control Center. Your application will now be ready to build. Click the “Build App Now” button to start the build process. Once the build is successful, on the dialog box below you can download the APK file, email the application to your device, submit it to the Android Marketplace, or move it to the Android device using the Android SDK.

Conclusion

In this article, you have learned how to build cross-platform web and hybrid applications that can be built to run on Android devices. AppMobi XDK provides a very convenient and all-in-one-place to develop, test, and build your applications that can be easily submitted to multiple platforms thus providing a build-once, deploy-anywhere convenience and helps application developers monetize their applications with ease.

Additional Resources:

1: AppMobi JavaScript API reference: Find APIs that allow your application to access multiple hardware capabilities like Camera, Geolocation, Multi-touch, Canvas, etc.: http://dev.appmobi.com/documentation/jsAPI/index.html

2: Writing Native applications with AppMobi: http://www.appmobi.com/amdocs/lib/Article-DevelopingOutsideXDK.pdf

3: HTML5 App School: http://dev.appmobi.com/?q=node/66

4: Best practices to create AppMobi applications: http://www.appmobi.com/documentation/content/Articles/Article_UsingBestPractices/index.html?r=2722

Notices

INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.

UNLESS OTHERWISE AGREED IN WRITING BY INTEL, THE INTEL PRODUCTS ARE NOT DESIGNED NOR INTENDED FOR ANY APPLICATION IN WHICH THE FAILURE OF THE INTEL PRODUCT COULD CREATE A SITUATION WHERE PERSONAL INJURY OR DEATH MAY OCCUR.

Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined." Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information.

The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request.

Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.

Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm

Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer systems, components, software, operations, and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products.

Any software source code reprinted in this document is furnished under a software license and may only be used or copied in accordance with the terms of that license.

Intel and the Intel logo are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2012 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.