Converting your existing Web Applications to Mobile Apps using IBM Worklight
ThejaswiniR 120000MVTD Visits (15440)
For enterprises, having a mobile presence has become a requirement today. Given that building a native application in mobile requires significant amount of investment, many companies are looking to build mobile web applications that has same look and feel as native without compromising on the user experience.
Some of the questions frequently asked by our customers are how can I optimize my existing webapp for mobile with Worklight? Will my website run as is on a mobile web browser without any changes? While the chances are that your website will run on a web browser in a mobile environment, it may not render fine given the mobile real estate is smaller than your laptop/desktop and the user experience may not be great if not optimized for mobile phones. Optimizing their web apps for mobile is the first step for many companies looking to go mobile are opting for.
In this blog, I will walk you through the steps on how you can build a mobile web app form your existing web application using Worklight.
Let me give you a quick introduction to different components of Worklight. Worklight consists of a Studio which is the development environment for building mobile applications, a Server which is the middle piece providing functions like connecting to your backend, offering security services, app lifecycle management, push notifications services, etc. and finally a Console, which is a dashboard where you can visualize all the applications and adapters deployed.
We will be using the Worklight Studio which is available as a plugin for eclipse as the development IDE for building the application. You can download it from here http
Start by creating a Worklight Project and a Worklight application. Worklight application contains a common folder that has code that is common for all platforms. Common folder in-turn has folders for css, images and java script code that is a part of your application. The html file generated in the common folder is an entry point for your application. In the below example Webs
Next step is to add an environment. Right click on your application and select New-> Worklight Environment. Select the Mobile web app option.
Your Worklight application will now have a mobile web app environment added.
If you have used server-side technologies like jsp,php, asp.net etc in your web app to layout the client side UI and want to reuse them, you can use Worklight http adapters to access them. Worklight adapters can also be used to access your backend services (rest based services, relational database etc). These adapters are server-side components i.e they run on the Worklight server and can be accessed by the apps running on the devices. Worklight provides 3 kinds of adapters http,sql and Cast Iron. Cast Iron is an middleware IBM product that is used for connecting to various different backends like SAP, Seibel, CRM etc.
Now, you have your mobile web app built using Worklight . You can right click on your application and select "Build and Deploy" option. This deploys the application to the Worklight server and also web archive (.war) file is generated in your project’s bin folder. You can deploy this web archive project to WebSphere/Tomcat and start accessing your application.
In the Worklight console, you can view the application deployed. Refer to the Worklight documentation for the url to access the Worklight console.
There is a "Get App URL" link next to the Mobile Web environment, on clicking which you can get the URL to access this mobile app.
This was just the first step in taking your existing apps to mobile. There is more you can do with IBM Worklight. You can create a wrapper to this mobile web app and make it a hybrid application and distribute it through app stores. You can also build a true hybrid application by reusing the web part and add some native parts or build a pure native application. You can also leverage the various functions Worklight provides like authentication, app management, direct update, push notifications etc while building hybrid apps.
There are couple of other approaches to integrate an existing mobile website. Refer to the following samples that ship with Worklight.
How webViewOverlay approach allows reusing and integrating existing mobile websites within a new mobile applicationftp:
Demonstrates remote loading of dynamic content capability