Build a Hybrid Mobile App Using IBM Worklight, Part 2

In the previous tutorial in this series Build a Mobile Hybrid App Using IBM Worklight, Part 1, we looked at how to set up the development environment of IBM Worklight and also created a “Hello, World” application using the WYSIWYG HTML5 editor for the Worklight plugin. We also tested the web app in the Mobile Web Browser Simulator.

In this article, we’ll walk through how to test our application in a native Android simulator and how to connect the app to a backend system using a Worklight Adapter.

Prepare the Android Simulator

As we have seen in the first article, to build an Android native mobile application, the Android SDK and the ADT plugin should be installed. After this mandatory step we should create an Android device simulator and also check for updates in the ADT manager so we don’t have an issue when compiling the native code.

First, open the SDK Manager located in your “android-sdks” folder and make sure you have installed the latest update for the Android SDK tools, build tools, and the Android platform.

Next, open the AVD Manager located in your “android-sdks” folder and create a new virtual device simulator by clicking on the “New” button. After that choose a name for the AVD and select the device:

Now that the SDK is checked and the AVD is created we should restart Eclipse to save the changes.

Simulate the application in the AVD

After preparing the SDK and AVD, we should now be able to build and run the Android native application in the created simulator. We could also get the .apk file and run it in a real Android Phone.

To simulate the application in the AVD, go to the Android project created after adding the Android environment as described in the first article, right click it, and choose “Run as”. Then click on Android Application.

Wait until the Eclipse console shows you the “BUILD SUCCESSFUL” message:

At this point the AVD should be launched and you should wait a few seconds before the app splash screen (with the IBM logo) appears. After that the app should show the ‘Hello’ message as simulated in the Mobile Web Browser simulator.

The list of Apps in the AVD:

Launch the app by clicking on its icon. The splash screen should appear now:

The app is now launched:

After understanding the workflow to simulate the Android native mobile application generated from the mobile web application, we will see how to connect this application to a backend server using the IBM Worklight HTTP Adapter.

Architecture of the enterprise backend

As I explained in the first article, IBM Worklight provides several types of adapters in the Worklight Server side. Adapters could be used to communicate with web services, databases, or other backend applications. The benefit of using adapters to communicate with third parties is to combine multiple requests into a single one that can be sent to the mobile app, cache data that are frequently requested, and parsing the data before sent it to the mobile app using the IBM Worklight Server Side JavaScript API.

In our application we will use a REST service provided by Wakanda Server via an HTTP adapter and we will use JSON as a data format.

The traffic flow will be as described by the image shown below. The Worklight mobile app will send an HTTP request to the Worklight Server, which contains the HTTP adapter. The adapter will send an HTTP request to the Wakanda Server to get the data. Then the Wakanda Server will respond to the HTTP adapter, and the adapter will send the data back to the mobile app.

In the next step we will see how to create an HTTP adapter, how to code the method that will get the data from the backend enterprise server, and deploy the adapter in the Worklight Server.

Create a new Worklight adapter

To launch the Worklight Adapter wizard click on the Worklight icon in the menu bar of Eclipse:

Choose Worklight Adapter, then choose HTTP Adapter as the Adapter type and give it a name:

Then click on Finish.

Edit the code for the Adapter Method

Now, we should edit the code of our created Worklight Adapter method to point to a backend system. For the backend system I’ll use the Wakanda REST Service created in this article.

The backend system contains a database that contains a Dataclass (table) filled with Geolocation positions of a mobile device. The backend system supports CORS (Cross-Origin Resource Sharing).

Next, open the “RestAdapter-impl.js” file in the editor and modify the getStories method name to be getPositions. You should also delete the interests arguments, add the path to the backend REST system, and modify the data type to use the JSON format:

function getPositions() {
    path = "http://127.0.0.1:8081/rest/Position/?$top=40&$params='%5B%5D'&$method=entityset&$timeout=300&$savedfilter='%24all'";

    var input = {
        method : 'get',
        returnedContentType : 'json',
        path : path
    };

    return WL.Server.invokeHttp(input);

}

Note: Make sure you have modified the method name in the RestAdapter.xml file too.

Start the Worklight server to deploy the adapter

To start the Worklight server, follow these steps:

1. Select The Worklight Project.
2. Click “Start Worklight Server”.
3. Deploy the Worklight adapter to the Worklight server:
   • Select [Worklight Project] > adapters > RestAdapter.
   • Select Run As > Deploy Worklight Adapter.

The Console view confirms the successful deployment of the Worklight adapter in Worklight Studio.

You could also verify that the Adapter is successfuly deployed to the server by entering the web console URL in your browser:

In Summary

That’s all for this tutorial. If you have had similar experience creating a hybrid app in IBM Worklight, be sure to share your thoughts in the comments!