mo aim1206 working with worklight 1 pdf

Copyright IBM Corporation 2012 TrademarksWorking with Worklight, Part 1: Getting started with your firstWorklight application

Page 1 of 19

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

Jeremy NorteySoftware DeveloperIBM

Carlos AndreuSoftware DeveloperIBM

Raj BalasubramanianConsulting IT Architect, IBM Mobile FoundationIBM

August 2012(First published 15 June 2012)

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

View more content in this series

IntroductionIn recent years, IBM has invested heavily in the mobile space by ensuring support of its coresoftware products on various mobile devices, and also by providing tooling and applicationruntimes for building mobile applications. With IBM Worklight, IBM can further expand its overallmobile capabilities across its product portfolio.

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

developerWorks ibm.com/developerWorks/

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

Page 2 of 19

As an introduction to Worklight, this article establishes the basic mobile app developer workflowand 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 acompanion video). Part 2 in this series will show how you can use this environment setup withiterative app development to create a functional application around the simple use case of creatinga task list application (called "Todo"). Subsequent articles will add on integration with other IBMproducts to showcase the functions and features of Worklight.

Worklight basicsGet Worklight nowDownload 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 theIBM 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 similarto 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.

ibm.com/developerWorks/ developerWorks


Page 3 of 19

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 orpublic 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 SDKsand create a sample empty application. The purpose of this process is to ensure the applicationcan be viewed on a device and published to a local Worklight server. The result will be the basisfor your forthcoming mobile application development.

Set up the environmentThe sample application you will ultimately be building is a very simple to do application thatenables the user to create a list of simple tasks that you display in a table. The user will beable to see the date of each task, delete tasks, and filter each task by keyword. The front endof the application (written using JQuery mobile) and other details of building the app will bedescribed in Part 2.

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

1. Download and install Eclipse Indigo (3.7) for Java EE DevelopersIf you need to download Eclipse, you can do so from the Eclipse Downloads site; as ofthis writing, Eclipse Juno is not yet supported, so you should install the Indigo for Java EEDevelopers edition. For the purpose of this article, well assume you already have Eclipseinstalled. For more information, see the Worklight Get Started documentation.

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



Page 4 of 19

Figure 3. Install Eclipse plugins

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

3. Install device-specific SDKsThis article series will showcase the Worklight application functioning on both Android andiOS devices.

a. Install Android SDK (optional)Follow the instructions on the Android developer site to install the Android SDK and thesimulator 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 OSmachine. If you do not have a Mac, then you will not be able to simulate the Worklightapplication you develop on an iOS device. Alternatives will be provided in a subsequentarticle using Worklight Build options, but for now, ignore the iOS specific instructions ifyou do not have a Mac.

4. Start a new Worklight projectYou 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 5 of 19

Figure 4. Create new Worklight project

5. Add a new application to the projectSelect Hybrid Application then click Next. Name your application Todo and click Finish(Figure 5).



Page 6 of 19

Figure 5. Add application to project

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



Page 7 of 19

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. IBMWorklight Studio V5 contains a local server that can be used to test the app you created aboveby building and running the app. Right-click on the app and select Build All and Deploy. Thiswill start the local server on port 8080, activate the project, and deploy the app for you to test in abrowser.



Page 8 of 19

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 9 of 19

Figure 9. Access the local server console

Develop the application

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

1. Select a JavaScript libraryThe JavaScript library selected for this example is JQuery mobile. You have the option to uselibraries such as Dojo mobile or Sencha Touch. Alternatively, you can simply develop usingpure JavaScript and create your application from scratch.

2. Download the librariesFor this example, you need to download these JQuery libraries:

JQuery 1.7.1 JQuery Mobile 1.1.0



Page 10 of 19

Figure 10. JQuery details

3. Move the files into WorklightMove 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 11 of 19

Figure 11. Reference JQuery library in the Todo app

4. Create device-specific environmentsBecause 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 blueWorklight button in your toolbar, click on the down-arrow right next to it and select WorklightEnvironment 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 12 of 19

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 foldercalled common and platform-specific files in their respective directories; android for Androidfiles, iphone for iPhone files, and so on. For example, since the iOS and Android build will beusing JQuery, the file jquery.js is in common/jquery.js. If you have some iOS-specific code, thenthe JavaScript code would be in ios-plugin.js and would go in iphone/js/iso-plugin.js rather thancommonjs/iso-plugin.js. Worklight will ensure syncing the common files into each of the specificdevice environments.

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

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



Page 13 of 19

Figure 14. Build and deploy

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



Page 14 of 19

Figure 15. Run Android app



Page 15 of 19

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 Runas XCode Project (Figure 17). In Xcode, you simply select either an actual device, or the iPhoneor iPad simulator, then click the Run button (Figure 18). Figure 19 shows the application running inan iPhone environment.



Page 16 of 19

Figure 17. Build and deploy iOS app

Figure 18. Select device or simulator for testing



Page 17 of 19

Figure 19. iPhone app test

Conclusion

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



Page 18 of 19

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 19 of 19

About the authors

Jeremy Nortey

Jeremy Nortey is a Software Developer for the IBM Mobile Foundation withinSoftware 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 sparetime. His hobbies include soccer and running.

Carlos Andreu

Carlos Andreu is a Software Developer in IBM Software Group. He is currentlyworking 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 theIBM Mobile Foundation. He leads the client-services interaction for the IBM Worklightand IBM Mobile Foundation. Prior to his development role, he lead customerengagements delivering application and infrastructure related projects around SOA,BPM, Web 2.0 and Portal technologies. His interests range from anything technicalto history, math and physics. He is currently pursuing his PhD at University of Texasat Austin. You can read about his past technical and personal escapades on hispersonal blog Gurukulam at http://balasubramanians.com/blog.

Copyright IBM Corporation 2012(www.ibm.com/legal/copytrade.shtml)Trademarks(www.ibm.com/developerworks/ibm/trademarks/)

Table of ContentsIntroductionWorklight basicsSet up the environmentStart the Worklight serverDevelop the applicationBuild a deployable application to iOS and Android devicesConclusionResourcesAbout the authorsTrademarks

mo aim1206 working with worklight 1 pdf

Documents

worklight platform

ibm worklight server

worklight environment

ibm worklight studio

ibm worklight v5

ibm worklight console

features of worklight

worklight applicationsetting