Mo Aim1206 Working With Worklight 1 PDF

Working with Worklight, Part 1: Getting started with your first Worklight application
Setting up an application for iOS and Android

Jeremy Nortey Software Developer IBM Carlos Andreu Software Developer IBM Raj Balasubramanian Consulting IT Architect, IBM Mobile Foundation IBM 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. View more content in this series August 2012 (First published 15 June 2012)
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.
Copyright IBM Corporation 2012 Working with Worklight, Part 1: Getting started with your first Worklight application Trademarks Page 1 of 19
developerWorks
ibm.com/developerWorks/
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
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.
Working with Worklight, Part 1: Getting started with your first Worklight application Page 2 of 19
developerWorks
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
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, well 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.
Working with Worklight, Part 1: Getting started with your first Worklight application Page 3 of 19
developerWorks
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. a. 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. b. 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.
Page 4 of 19
developerWorks
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).
Page 5 of 19
developerWorks
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.
Page 6 of 19
developerWorks
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.
Page 7 of 19
developerWorks
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.
Page 8 of 19
developerWorks
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: JQuery 1.7.1 JQuery Mobile 1.1.0
Page 9 of 19
developerWorks
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.
Page 10 of 19
developerWorks
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
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.
Page 11 of 19
developerWorks
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.
Page 12 of 19
developerWorks
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).
Page 13 of 19
developerWorks
Figure 15. Run Android app
Page 14 of 19
developerWorks
Figure 16. Android app test
The steps to deploy your application on an iOS device are similar to the Android process. Rightclick 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.
Page 15 of 19
developerWorks
Figure 17. Build and deploy iOS app
Figure 18. Select device or simulator for testing
Page 16 of 19
developerWorks
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.
Page 17 of 19
developerWorks
Resources
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 1.1.0 Boilerplate code Worklight Studio Video: Getting Started with IBM Worklight (jQuery Mobile + Android and iOS) IBM developerWorks Mobile development zone IBM developerWorks WebSphere
Page 18 of 19
developerWorks
About the authors

Jeremy Nortey 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 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 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. Copyright IBM Corporation 2012 (www.ibm.com/legal/copytrade.shtml) Trademarks (www.ibm.com/developerworks/ibm/trademarks/)
Page 19 of 19

Mo Aim1206 Working With Worklight 1 PDF

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mo Aim1206 Working With Worklight 1 PDF

Uploaded by

Copyright:

Available Formats

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

Setting up an application for iOS and Android

Figure 1. Worklight components

Figure 2. Developing a mobile app

Set up the environment

Figure 3. Install Eclipse plugins

Figure 4. Create new Worklight project

Figure 5. Add application to project

Figure 6. Structure of apps folder

Start the Worklight server

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

Figure 8. Local server console

Figure 9. Access the local server console

Develop the application

Figure 10. JQuery details

Figure 11. Reference JQuery library in the Todo app

Figure 12. Select device wizard

Figure 13. Create device-specific folders

Build a deployable application to iOS and Android devices

Figure 14. Build and deploy

Figure 15. Run Android app

Figure 16. Android app test

Figure 17. Build and deploy iOS app

Figure 18. Select device or simulator for testing

Figure 19. iPhone app test

About the authors

You might also like