Working with Worklight, Part 1: Getting started with your first Worklight application

Setting up an application for iOS and Android

With IBM® Worklight® V5, a leading Mobile Enterprise Application Platform (MEAP), IBM expands its overall mobile capabilities across its product portfolio. This series of articles introduces the Worklight platform by showing how you can build mobile applications that leverage a variety of IBM products. Part 1 describes the process of setting up a Worklight development environment and creating a simple application that will be used as the basis for iterative development in subsequent articles.

Jeremy Nortey, Software Developer, IBM

Jeremy Nortey is a Software Developer for the IBM Mobile Foundation within Software Group. He develops software and quality assurance for mobile solutions. He specializes in iOS and dabbles in building native apps for the iPhone in his spare time. His hobbies include soccer and running.



Carlos Andreu , Software Developer, IBM

Carlos Andreu is a Software Developer in IBM Software Group. He is currently working on the creation of a framework to build Hybrid, Android and iOS applications. His interests range from following the latest trends and tech blogs, to reading, television, and enjoying to all kinds of music. You can learn more about him at http://dev.yapr.org/carlosandreu.



Raj Balasubramanian, Consulting IT Architect, IBM Mobile Foundation, IBM

Raj Balasubramanian is a Product Architect for IBM Software Group working on the IBM Mobile Foundation. He leads the client-services interaction for the IBM Worklight and IBM Mobile Foundation. Prior to his development role, he lead customer engagements delivering application and infrastructure related projects around SOA, BPM, Web 2.0 and Portal technologies. His interests range from anything technical to history, math and physics. He is currently pursuing his PhD at University of Texas at Austin. You can read about his past technical and personal escapades on his personal blog Gurukulam at http://balasubramanians.com/blog.



August 2012 (First published 15 June 2012)

Also available in Chinese Russian Japanese Vietnamese Portuguese Spanish

Introduction

In recent years, IBM has invested heavily in the mobile space by ensuring support of its core software products on various mobile devices, and also by providing tooling and application runtimes for building mobile applications. With IBM Worklight, IBM can further expand its overall mobile capabilities across its product portfolio.

IBM Worklight provides an open, comprehensive and advanced mobile application platform that can help you efficiently develop, run, and manage HTML5, hybrid, and native applications, using standards-based technologies and tools, mobile-optimized middleware, a variety of security mechanisms, and integrated management and analytics capabilities.

As an introduction to Worklight, this article establishes the basic mobile app developer workflow and showcases the setup of the Worklight environment for developing applications. In the process, you will be guided on how to build a simple “Hello World” application (see Resources to view a companion video). Part 2 in this series will show how you can use this environment setup with iterative app development to create a functional application around the simple use case of creating a task list application (called "Todo"). Subsequent articles will add on integration with other IBM products to showcase the functions and features of Worklight.

Worklight basics

Get Worklight now

Download IBM Worklight Developer Edition 5.0 now at no cost, and with no expiration date!

Worklight is a leading Mobile Enterprise Application Platform (MEAP) that is an integral part of the IBM Mobile Foundation. There are four main components of the Worklight platform:

  • IBM Worklight Studio is an Eclipse-based IDE for creating Worklight applications.
  • IBM Worklight Device Runtime Components make up the SDK that facilitates the mobile application runtime on the device.
  • IBM Worklight Server is the Java™-based server that provides secure connectivity to enterprise and Internet information sources.
  • IBM Worklight Console is a web-based UI dedicated to helping manage and monitor the entire mobile application ecosystem.

These components are depicted in Figure 1.

Figure 1. Worklight components
Figure 1. Worklight components

At a high level, the workflow tasks you follow when developing a mobile application are similar to that of traditional application development. A simplified view of the steps might look like this (Figure 2):

  1. Set up Worklight and begin to build the application.
  2. Proceed through the usual development and test process of verifying application functionality by running or simulating the application.
  3. When you think it's ready, publish the test application for feedback from key users.
  4. Based on the feedback, either continue to work on improving the application, or make it available for a larger test audience.
  5. If you decide to expand usage of the test application, you can publish the application to a restricted set of users onto a local or private application repository, or to an enterprise or public application repository (such as the Apple App Store, Google Play, and so on).
Figure 2. Developing a mobile app
Figure 2. Developing a mobile app

The remainder of this article describes how to set up Worklight and the associated device SDKs and create a sample empty application. The purpose of this process is to ensure the application can be viewed on a device and published to a local Worklight server. The result will be the basis for your forthcoming mobile application development.


Set up the environment

The sample application you will ultimately be building is a very simple “to do” application that enables the user to create a list of simple tasks that you display in a table. The user will be able to see the date of each task, delete tasks, and filter each task by keyword. The front end of the application (written using JQuery mobile) and other details of building the app will be described in Part 2.

Although your ultimate objective is to build a “to do” application (see sidebar), the immediate objective of this article is to establish the basic development workflow for building, deploying, and testing your mobile application in a device simulator. To do that, you can begin working with the Worklight development environment in a handful of easy steps:

  1. Download and install Eclipse Indigo (3.7) for Java EE Developers

    If you need to download Eclipse, you can do so from the Eclipse Downloads site; as of this writing, Eclipse Juno is not yet supported, so you should install the Indigo for Java EE Developers edition. For the purpose of this article, we’ll assume you already have Eclipse installed. For more information, see the Worklight Get Started documentation.

  2. Install Worklight Eclipse plugins

    If you're familiar with installing any plugin into Eclipse, then this part will be easy. You can download IBM Worklight Developer Edition 5.0 now at no cost, and with no expiration date.

    Figure 3. Install Eclipse plugins
    Figure 3. Install Eclipse plugins

    Continue the next steps presented by the wizard to download and install the environment you need.

  3. Install device-specific SDKs

    This article series will showcase the Worklight application functioning on both Android and iOS devices.

    1. Install Android SDK (optional)

      Follow the instructions on the Android developer site to install the Android SDK and the simulator inside the same Eclipse shell as Worklight Studio.

    2. Install iOS SDK (optional)

      Follow the instructions on the Apple developer site to install Xcode on a Mac OS machine. If you do not have a Mac, then you will not be able to simulate the Worklight application you develop on an iOS device. Alternatives will be provided in a subsequent article using Worklight Build options, but for now, ignore the iOS specific instructions if you do not have a Mac.

  4. Start a new Worklight project

    You should now be able to create a new Worklight project in Eclipse. Navigate to File > New > Worklight Project, as shown in Figure 4. (If Worklight Project is not listed, try File > New > Other > Worklight Project.) Name your project folder Todo Project, then click Next.

    Figure 4. Create new Worklight project
    Figure 4. Create new Worklight project
  5. Add a new application to the project

    Select Hybrid Application then click Next. Name your application Todo and click Finish (Figure 5).

    Figure 5. Add application to project
    Figure 5. Add application to project

    Worklight will automatically generate the file structure you need to develop your Worklight application. The common folder is where you will put all of the files you need to create your application, including the HTML, JavaScript™ and CSS files. Name the application ToDo and complete this part of the application creation.

    Figure 6. Structure of apps folder
    Figure 6. Structure of apps folder

Start the Worklight server

To test the application that you build, you will need to publish it to a local Worklight server. IBM Worklight Studio V5 contains a local server that can be used to test the app you created above by building and running the app. Right-click on the app and select Build All and Deploy. This will start the local server on port 8080, activate the project, and deploy the app for you to test in a browser.

Figure 7. Build and deploy the app on the local server
Figure 7. Build and deploy the app on the local server

You can see the progress of the events in the console (Figure 8).

Figure 8. Local server console
Figure 8. Local server console

Now you can access the local server's server console by navigating to http://localhost:8080/console in your browser. You should see the Todo app that you just deployed.

Figure 9. Access the local server console
Figure 9. Access the local server console

Develop the application

This “Hello World” application will demonstrate the first iteration of the development build and simulation to help familiarize you with the process, and will be used in Part 2 for filling in actual screen and application logic for the Todo application to showcase the full Worklight application development model. To build this starter application:

  1. Select a JavaScript library

    The JavaScript library selected for this example is JQuery mobile. You have the option to use libraries such as Dojo mobile or Sencha Touch. Alternatively, you can simply develop using pure JavaScript and create your application from scratch.

  2. Download the libraries

    For this example, you need to download these JQuery libraries:

    Figure 10. JQuery details
    Figure 10. JQuery details
  3. Move the files into Worklight

    Move these files to the common/js folder:

    • jquery-1.7.1.min.js
    • jquery.mobile-1.1.0.min.js

    Move these files to the common/css folder:

    • jquery.mobile-1.1.0.css
    • jquery.mobile.structure-1.1.0.min.css
    • jquery.mobile-1.1.0/images

    Add the appropriate code your Todo.html file so it matches that shown in Figure 11.

    Figure 11. Reference JQuery library in the Todo app
    Figure 11. Reference JQuery library in the Todo app
  4. Create device-specific environments

    Because you intend to build the Todo application for both Android and iPhone devices, you need to create a Worklight environment for each device type. Look for the blue Worklight button in your toolbar, click on the down-arrow right next to it and select Worklight Environment from the drop-down list (Figure 12).

    Figure 12. Select device wizard
    Figure 12. device wizard

    Choose iPhone and Android phones and tablets from the list and click Finish (Figure 13). This will create an additional project for Android and additional folder structure within ToDo.

    Figure 13. Create device-specific folders
    Figure 13. Create device-specific folders

Build a deployable application to iOS and Android devices

Worklight is structured with common source files (HTML, CSS and JavaScript) in one folder called common and platform-specific files in their respective directories; android for Android files, iphone for iPhone files, and so on. For example, since the iOS and Android build will be using JQuery, the file jquery.js is in common/jquery.js. If you have some iOS-specific code, then the JavaScript code would be in ios-plugin.js and would go in iphone/js/iso-plugin.js rather than commonjs/iso-plugin.js. Worklight will ensure syncing the common files into each of the specific device environments.

Make sure you have XCode installed before testing the iPhone environment. There are instructions for setting up your iOS development environment in Module 2.1 and Module 3.1 of the Worklight documentation documentation. Likewise, be sure you have installed the Android SDK, ADT (Android Developer Tools) Eclipse plugin, and created a new AVD (Android Virtual Device; Android 2.2 is recommended). Instructions for setting up your Android environment are in Modules 2.2 and 3.2 of the Worklight documentation.

After you have your source code ready to deploy, simply right-click on your Android application and select Run as... > Build All and Deploy (Figure 15). A new folder should appear in your workspace with the title of your application: Name of our AppAndroid.

Figure 14. Build and deploy
Figure 14. Build and deploy

Next, right-click that project and select Run as.. > Android Application (Figure 13). If you have an actual Android phone connected via USB with developer mode enabled in the settings, the application will automatically run there, otherwise it will run in the existing AVD (Android Virtual Device). This will launch the emulator and display the “Hello World” string you entered above (Figures 16 and 17).

Figure 15. Run Android app
Figure 15. Run Android app
Figure 16. Android app test
Figure 16. Android app test

The steps to deploy your application on an iOS device are similar to the Android process. Right-click on your iPhone application and select Run as... > Build All and Deploy and then click Run as XCode Project (Figure 17). In Xcode, you simply select either an actual device, or the iPhone or iPad simulator, then click the Run button (Figure 18). Figure 19 shows the application running in an iPhone environment.

Figure 17. Build and deploy iOS app
Figure 17. Build and deploy iOS app
Figure 18. Select device or simulator for testing
Figure 18. Select device or simulator for testing
Figure 19. iPhone app test
Figure 19. iPhone app test

Conclusion

In this introductory article, you setup a Worklight development environment and built a simple “Hello World” sample application for iPhone and Android. Because the setup included the Worklight server runtime and all the supporting software, you are ready to begin adding application logic and content to your Todo app. These steps provided a preview of how you will iterate through the development workflow of creating an app and testing it on a device or simulator.

Resources

Learn

Get products and technologies

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Mobile development on developerWorks


  • Bluemix Developers Community

    Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.

  • Mobile weekly

    Innovations in tools and technologies for mobile development.

  • DevOps Services

    Software development in the cloud. Register today to create a project.

  • IBM evaluation software

    Evaluate IBM software and solutions, and transform challenges into opportunities.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Mobile development, WebSphere,
ArticleID=818970
ArticleTitle=Working with Worklight, Part 1: Getting started with your first Worklight application
publish-date=08152012