Build a Mobile Hybrid App Using IBM Worklight: Part 1

Saad Mousliki

The development of mobile applications that run on many smartphones was considered a very difficult concern for mobile developers. Mobiles are different: multi-OS, multi-devices, multi-sizes, etc., so the marriage of web technologies – HTML5, CSS3 and JavaScript – with native execution is considered one of the best solutions to this concern.

Many companies have chosen hybrid mobile apps as a solution to this diversity in the mobile world. Hybrid mobile apps combine the benefits of native and web mobile apps, so we can develop one time using HTML5, JavaScript and CSS3, and deploy for all devices.

Indeed, hybrid apps can access the mobile native features: Camera, Compass, Files, etc., cutting the development life cycle complexity, time and cost, and gaining the advantages of native apps. Thse are the main reasons companies opt for hybrid mobile apps for their mobile business model.

In this article I’ll introduce you to one of the most powerful environments for building mobile hybrid apps. We’ll start by installing and preparing the development environment, the develop a test app, and test the app in a mobile simulator.

IBM Worklight

IBM Worklight is an open, complete and advanced mobile enterprise application platform for HTML5, hybrid and native mobile applications. It lets developers use JavaScript, HTML5 and CSS3 to develop applications for different mobile devices. By avoiding the vendor lock-in, it gives also to enterprises a set of features: version management, application center, direct update, push notification, connectivity to databases, web services and an enterprise information system.

IBM Worklight consists of the following components:

  • IBM Worklight Studio is an Eclipse based IDE, allowing developers to perform all coding, testing and integration tasks for web, hybrid or native mobile applications.
  • IBM Worklight Server is a scalable gateway between mobile application and enterprise or third party back-end and services. It acts as an auditable control point for mobile activities and contains strong security features such as multi-factor authentication and mobile applications authenticity checks. The Worklight Server enables data connectivity with multi-source data extraction and manipulation, mobile application management, analytics and unified push notifications.
  • IBM Worklight Device Runtime Components consist of client-side runtime code compiled into final applications that embed functionality such as an off-line, encrypted and synchable datastore that interacts with the Worklight Server.
  • IBM Worklight Application Center is a multi-platform private enterprise app store that helps organizations govern the distribution of any production-ready mobile apps across the enterprise with appropriate access control and role based security, and elicit and organize user feed-back. It can also be used by development teams to automate the distribution of pre-release software versions, and analyze feedback by version and device – accelerating cycle time.
  • IBM Worklight Console is a web-based UI dedicated to the ongoing monitoring and administration of the Worklight Server and its deployed apps, adapters and push notifications, that helps summarize the various statistical measures of platform usage.

IBM Worklight

Installing IBM Worklight

IBM provides a trial version of Worklight Development Studio to developers who need to test the tool. As I’ve mentioned, Worklight is an Eclipse plugin, so first we should install Eclipse Juno for J2EE.

  • Download and unzip Eclipse here.
  • Open Eclipse and go to Help, choose Eclipse market place and search using the key word “worklight”.
  • You could also find it by clicking Help, choose install new software, click on add, enter worklight as a name and the following URL for location: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/.
  • Now click on the install button of the “IBM Worklight Developer Edition”.
  • Click Next and accept the license terms to install the plugin.
  • Restart Eclipse.

NOTE: You must use the JUNO SR2 version of Eclipse, if you use another version you will face some errors when installing Worklight.

Installing ADT

Now, after installing the IBM Worklight plugin we will need to install Android Developer Tools to be able to develop for Android.

  • Download and unzip the Android SDK from here.
  • Install the ADT Plugin by clicking Help > Install New Software.
  • Click Add…, and enter the ADT Plugin as the name.
  • For location enter: https://dl-ssl.google.com/android/eclipse/
  • Select Developer Tools > Next > Next > Accept License Agreement > Finish.
  • Restart Eclipse

Create a mobile hybrid application

Create a Worklight Application

After installing all the necessary Eclipse plugins, we can now start developing our first Worklight mobile application. Open Eclipse and click on New, choose Other Project and select Worklight Project from the list.

worklight project

Now click on Next, choose Hybrid Application and give it a name.

hybrid application

Click on Next.

You could add JQuery mobile to your application by downloading a zip file it from here.

Unzip it and give its location in the wizard like this:

identitfy jquery

Click on Finish.

Add Android environment

Development is undertaken in one or more environments. The mobile web application that will be packaged and built to environments is located in a folder called common. It contains HTML5, JS, CSS3 and images shared between all application environments. In our case we are using Eclipse and ADT, so we will add an Android environment.

Click on New, choose Worklight Environment, check the Android check box and click on Finish.

add Android

In the Project Explorer panel, you will notice that a new Android Environment has been added to your Worklight project.

set environment

Customize and build the app

Now, open the HTML page and use the WYSIWYG editor to modify the text. Add new HTML tags to the page using the Palette. You could also modify the code directly using the Source tab.

customize

The Palette supports HTML5 elements, JQuery Mobile and DoJo controls, so you can drag and drop the controls easily from the Palette to the page and the HTML5 element will be automatically generated in the page source.

After customizing the page that will be rendered by the mobile, to build it right-click on the application folder and choose Run As. After that, click on Build All and Deploy.

In the next article, we will see how to develop a mobile app that follows the MVC architecture to access a back end system, and test it in Mobile Browser Simulator without requiring devices or heavyweight emulators and also in a mobile emulator. We will see also the Worklight web console capabilities.

Conclusion

Now that you’ve learned how to install the development environment of Worklight and use some of Worklight’s features, you’re ready to go ahead and start developing and testing a hybrid mobile app.

In the second part of the series, we’ll discover the Worklight web console and how to establish a back end connection using the Worklight adapter.

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.

  • Malachi

    I thought the beauty of using the html5 and stuff would be so it would be platform independent. Does this mean that I still need to add ALL environments? (iphone, android, etc.) That wouldn’t make sense if you would build it platform independent. Did I miss something?

  • Anonymous

    Hi Malachi. The SDKs for iOS and Android are meant to perform final testing on their respective Simulators/Emulators, so you can see how your mobile application will behave on the actual mobile Operating System. Having said that, IBM Worklight comes with it’s own Browser-based simulators, which means you can hit the ground running without needing any of the SDKs installed.

    I hope this helps you understand?

    • Prashanth Puranik

      The IBM Worklight simulator does not simulate the native app’s environment. The simulator simulates a mobile web browser on these platforms. For example you won’t get a native dialog in it. It is like running a mobile web site inside the simulator. If you need to run the packaged app (packaged in Worklight using PhoneGap) you will have to run on Android emulator provided by Google for instance.

      That said, cross-platform tools like Worklight do reduce development times etc. by helping us factor out common code. Platform-related tweaks and platform specific-code needs to be written separately but this is a smaller percentage when compared to the common codebase.

      Hope this helped clear some confusion.

  • Saad Mousliki

    Thanks Prashanth for explaining the differences between the mobile browser simulator (Ripple) and the native simulators (Environments) : Android SDK, IOS SDK, …etc.

  • Prashanth Puranik

    You are welcome Saad. Thanks for the article. Looking forward to its following parts :)

  • neimarguerra

    When the second part of this tutorial will be available?

    • saad Mousliki

      Hi neimarguerra,

      I have already written the second part, I’m waiting for the editor appaoval ;)