[Intel XDK] development of XDK cross-platform application based on Appmobi

Getting started with cross-platform application development using the appmobi* XDK

Cross-platform application development means that only one program can be written and deployed on multiple platforms. Application developers can take advantage of development tools that tend to design and develop across platforms to make a profit. Android* and ios* are two of the most promising mobile application development platforms for application developers, which differ in their operational software stacking (stack) architecture and device hardware performance, making application cross-platform development difficult. HTML5 is a technology that makes it easier to develop cross-platform applications, providing portability (portability) between different platforms.

The Appmobi XDK provides cross-platform application development tools that enable developers to easily build HTML5 and javascript* applications that operate on different platforms. This article will show you how to build a hybrid application (hybrid application) that uses the JavaScript application interface (API) provided by the Appmobi XDK to design applications that work on Android devices.

Appmobi XDK Software Development Life cycle

The Appmobi XDK not only provides cross-platform application development tools, but also includes application testing before deployment to a specified platform, as shown in.

You can build Web apps (Web apps) written in HTML5, JavaScript, or CSS, or hybrid applications that can further leverage hardware features such as accelerometers, cameras, and more. The simulator (emulator) can also be used to test the application on Android and iOS devices in different types and directions, as well as through the wi-fi* or cloud hosting service (cloud-hosting service), directly on the real machine. Once you've verified that your application is functioning correctly, you can deploy your application to individual app stores, such as Android Marketplace or the Apple App Store.

Installing the Appmobi XDK

Appmobi XDK can be installed via the Chrome online app Store. The Appmobi account must be established to appmobi.com to download and install the Appmobi XDK. Another prerequisite is that Google chrome* browser and java* 6 must be installed. The XDK works with Web applications and local Web servers that operate in Java applications.

Once you have the XDK installed, you can launch the app by clicking on the XDK icon in the Chrome browser. Note that the Appmobi XDK does not replace the Web development tools you choose, but rather provides a separate platform for building, testing, and deploying Web pages or hybrid applications, while still using the optional Integrated development environment (IDE).

Development of the first cross-platform application

It is easy and easy to develop applications through the Appmobi XDK Environment, where all development, testing, deployment tools can be executed in the same place, or you can continue to develop Web applications using familiar tools, such as the eclipse* IDE, because the Appmobi XDK does not replace these tools. In the absence of a configured development environment, the XDK will also provide an editor. This section will create a new accelerometer project to access the accelerometer on the Android device using the Appmobi JavaScript API. You can also add additional features you want, but this article uses the quasi-system (BAREBONE) structure to show how easy it is to use the Appmobi XDK and API.

Step 1

To build your first application, install and start the XDK in the above steps. Start the XDK to see the interface shown, click on the upper left corner of the "start menu", as indicated.

Step 2

Since our goal is to create a hybrid application that works on an action device, choose the client application type, such as:

Step 3

Enter the project name and other details in the following screen. Note that the name of the account is automatically added to the beginning of the project name to prevent duplicate names, and the IDE allows you to select existing Web page projects.

Step 4

Select the accelerometer feature, which will include the code snippets needed to access the smart phone's motion sensor into the application.

Step 5

Now you have accelerometer support in your project to see how the JavaScript API enables this hardware feature. In this example, the device sensor is checked out of sync at a fixed interval. The Appmobi provides an accelerometer object "watchacceleration" method that can be used to obtain an acceleration count value in a non-synchronous manner based on the timer interval.

Open index.html to see the implementation of this method. To open the application source, you can click the "emulator" toggle button to switch between code-editing mode and simulator mode, and immediately check the effect of code changes on the application characteristics through the simulator.

As you can see in code, as soon as the page starts loading and starts Appmobi, you can start noticing the "ondevicereadyaccel" event disposer, which is responsible for "appmobi.accelerometer.watchacceleration" method to check the change of the motion sensor.

As you can see in code, as soon as the page starts loading and starts Appmobi, you can start noticing the "ondevicereadyaccel" event disposer, which is responsible for "appmobi.accelerometer.watchacceleration" method to check the change of the motion sensor.

The accelerometer provides x, Y, z three coordinate values ranging from 1 to 1. The values in the example are preset to x=0, Y=-1, z=0 for reference. Target devices can now be selected in the "device emulation" field on the right to test application features on multiple platforms. Since our goal is to deploy hybrid applications on Android devices, please select the Droid device in the list:

Want to spin the real machine to simulate application features? Use the "accelerometer" label on the right to rotate the angle of the device and change the x, Y, z values. The simulator can be seen to imitate the end user experience to change the direction of the device, but also can see its corresponding x, Y, z values change.

Now that the application has basic functionality support, you can augment your application for advanced tasks, such as animating with the accelerometer sensor. In the example, the Accelerometer project is accessed as part of the Appmobi XDK, and when the acceleration count value changes, it moves:

Build Android's Appmobi app

Now that you have developed your first cross-platform application, the next step is to select a target platform. This feature is available through the Appmobi Cloud package service (cloud-based packaging services) AppHub. With AppHub, you can build applications for iOS, Android, nook*, Amazon, and more. You can also build Web applications that run through online app stores, such as Chrome. This section explains how to build an application for Android devices.

Step 1

Click the construct button at the top right of the XDK to start building the program. Please note that if you are building your application for the first time, please upload to the cloud service before the build starts, and then build with the "build only" option.

The accelerometer provides x, Y, z three coordinate values ranging from 1 to 1. The values in the example are preset to x=0, Y=-1, z=0 for reference. Target devices can now be selected in the "device emulation" field on the right to test application features on multiple platforms. Since our goal is to deploy hybrid applications on Android devices, please select the Droid device in the list:

Following the instructions above, you will find that Android build system requires you to configure Android push. For more instruction on Google Cloud Communications (Google Cloud Messaging, GCM) configuration, please go to: http://www.appmobi.com/amdocs/lib/appMobi_Walkthrough_v2_GCM_Push.pdf

In the GCM configuration of the AppHub control Center, enter the project ID and the API key. The application is ready to start building. Click the "build App now" button to start building the program. Once the build is successful, you can download the APK file in the dialog box below and then email it to the appliance, submit it directly to Android Marketplace, or move the apk file to the Android device using the Android Software Development Kit (SDK).

Conclusion

This article provides construction teaching of cross-platform Web applications and hybrid applications on Android devices. The Appmobi XDK provides a convenient and versatile environment in which application development, testing, and construction can be done in the same place and easily submitted to multiple platforms, making it easy to build, multi-party deployments, and help application developers gain more from their applications.

Other resources:

1:appmobi JavaScript Application Interface (API) Reference: The following links provide a variety of application interfaces that enable applications to use multiple hardware functions such as camera, geolocation (geolocation), multi-Touch (multi-touch), canvas ( Canvas), etc.: http://dev.appmobi.com/documentation/jsAPI/index.html

2: Write native application with Appmobi: http://www.appmobi.com/amdocs/lib/Article-DevelopingOutsideXDK.pdf

3:HTML5 Application Teaching: HTTP://DEV.APPMOBI.COM/?Q=NODE/66

4: Practice Building Appmobi Application: http://www.appmobi.com/documentation/content/Articles/Article_UsingBestPractices/index.html?r=2722