Build a Mobile Hybrid App Using IBM Worklight: Part 1By Saad Mousliki
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 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.
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.
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.
Now click on Next, choose Hybrid Application and give it a name.
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:
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.
In the Project Explorer panel, you will notice that a new Android Environment has been added to your Worklight project.
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.
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.
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.
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
Introduction to Swift
Building an App with AngularJS
Android Programming from Scratch
Jump Start Responsive Web Design
Killer UX Design
Killer UX Design
- 1 Build Your Own Dropbox Client with the Dropbox API
- 2 Picking the Brains of Your Customers with Microsoft's Text Analytics
- 3 6 Things to Know Before Launching Mobile Apps on the App Store
- 4 Is It Possible to Write and Run PHP Code on an iPad?
- 5 There Are More Virtual Reality Headsets Than You Realize!