Build a Hybrid Mobile App Using IBM Worklight, Part 2

Saad Mousliki
Tweet

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.

SDK Manager

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:

AVD

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.

Run As the Android App

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

Console

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:

Apps in the AVD

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

The by default splash screen

The app is now launched:

App is 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.

Traffic flow architecture

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:

Worklight adapter wizard

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

HTTP Worklight adapter

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:

Choose the Adapter

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.

The Adapter was deployed

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

Verify the deployment using the web console

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • A.B

    Hi Saad,

    Could you explain how to CRUD the backend Server using the HTTP adapter ?

  • saad Mousliki

    It’ll be the topic of the next part of the serie articles (part 3) ;)