Académique Documents
Professionnel Documents
Culture Documents
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.
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
ibm.com/developerWorks/
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).
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.
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
ibm.com/developerWorks/
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 4 of 19
ibm.com/developerWorks/
developerWorks
5. Add a new application to the project Select Hybrid Application then click Next. Name your application Todo and click Finish (Figure 5).
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 5 of 19
developerWorks
ibm.com/developerWorks/
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 6 of 19
ibm.com/developerWorks/
developerWorks
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 7 of 19
developerWorks
ibm.com/developerWorks/
You can see the progress of the events in the console (Figure 8).
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 8 of 19
ibm.com/developerWorks/
developerWorks
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 9 of 19
developerWorks
ibm.com/developerWorks/
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 10 of 19
ibm.com/developerWorks/
developerWorks
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).
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 11 of 19
developerWorks
ibm.com/developerWorks/
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 12 of 19
ibm.com/developerWorks/
developerWorks
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).
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 13 of 19
developerWorks
ibm.com/developerWorks/
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 14 of 19
ibm.com/developerWorks/
developerWorks
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 15 of 19
developerWorks
ibm.com/developerWorks/
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 16 of 19
ibm.com/developerWorks/
developerWorks
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.
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 17 of 19
developerWorks
ibm.com/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
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 18 of 19
ibm.com/developerWorks/
developerWorks
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/)
Working with Worklight, Part 1: Getting started with your first Worklight application
Page 19 of 19