Getting started with your first Worklight application
Setting up an application for iOS and Android
This content is part # of # in the series: Working with Worklight, Part 1
This content is part of the series:Working with Worklight, Part 1
Stay tuned for additional content in this series.
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 Related topics 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 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
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):
- Set up Worklight and begin to build the application.
- Proceed through the usual development and test process of verifying application functionality by running or simulating the application.
- When you think it's ready, publish the test application for feedback from key users.
- Based on the feedback, either continue to work on improving the application, or make it available for a larger test audience.
- 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
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
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:
- Download and install Eclipse Indigo (3.7) for Java EE
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.
- 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
Continue the next steps presented by the wizard to download and install the environment you need.
- Install device-specific SDKs
This article series will showcase the Worklight application functioning on both Android and iOS devices.
- 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.
- 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.
- Install Android SDK (optional)
- 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
- Add a new application to the project
Select Hybrid Application then click Next. Name your application
Todoand click Finish (Figure 5).
Figure 5. Add application to project
ToDoand complete this part of the application creation.
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
You can see the progress of the events in the console (Figure 8).
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
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:
- Download the libraries
For this example, you need to download these JQuery libraries:
Figure 10. JQuery details
- Move the files into Worklight
Move these files to the common/js folder:
Move these files to the common/css folder:
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
- 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
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
Build a deployable application to iOS and Android devices
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
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 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 18. Select device or simulator for testing
Figure 19. iPhone app test
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.
- Worklight product information
- Worklight documentation
- IBM Worklight Developer Edition 5.0
- Eclipse Java Development Edition
- Apple developer site
- Getting started with Worklight
- JQuery 1.7.1
- JQuery Mobile
- Boilerplate code
- Worklight Studio
- Video: Getting Started with IBM Worklight (jQuery Mobile + Android and iOS)