EGL Development User Group - Group home

Deploy EGL Mobile Project into a Native App

  

EGL Dojo mobile widgets were added to RBD in V8.5.1.1 and V9.0.1 depending on which release you are using.  It enables mobile web application development in RBD.  However, it is also possible to deploy the web app as a native app (hybrid) after some modification to the generated code. We will describe how to develop a native mobile app（hybrid) with RBD in this blog article.  We will use Android app deployment as an example step by step. Note that the native (hybrid) app development is not officially supported by RBD, so there is no official customer support when problems are found.  However, we wanted to provide this as-is, how-to information in case there is the need to build/deploy a native (Hybrid) mobile application built with EGL mobile widgets.

1. Setup Envrionment

Prepare and install the following:

  • RBD 8.5.1.1 or 9.0.1 or higher
  • Android SDK and Android Development Toolkit (ADT). Please refer to http://developer.android.com/sdk/installing.html for detail. If you prefer to develop the Android app inside RBD, you could install them together
  • Install and config Phonegap/Cordova(http://phonegap.com/install/)
  • Install Tomcat or WAS to deploy your web app and service

If ADT is installed together with RBD, you will need to configure RBD to make them work together since ADT cannot launch the Android application using the IBM JRE.   Therefore, you must use the Sun JDK and change to use this as the default JRE when starting RBD.   To do this:

  • Open eclipse.ini in RBD installation folder
  • Modify eclipse.ini, the sample modified file is shown below in which the text in the red color are modified. Please make the modification according to your environment. The modification includes:
    • Modify -vm argument to point to sun jdk
    • Delete contents starting from -vmargs
    • Add the contents in red at the bottom of the file
    • Do NOT modify other parts

-vm

C:\Program Files\Java\jdk1.7.0_25\bin\javaw.exe

-startup

plugins/org.eclipse.equinox.launcher_1.3.0.v20120522-1813.jar

--launcher.library

plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20120913-144807

-install

C:/IBM/RBD901

--launcher.XXMaxPermSize

256m

-vmargs

-Dosgi.requiredJavaVersion=1.6

-Xms40m

-Xmx1024m

-Declipse.p2.verifyPlan=false

-XX:PermSize=128M 

-XX:MaxPermSize=256M

-Djava.util.Arrays.useLegacyMergeSort=true

-Dcom.ibm.etools.egl.rui.preview.ie.timeout=999

-Dsdp.driver=RBDO901-I20131205_2314

 

2. Develop EGL Mobile Application

The EGL developer can use RBD to develop, debug and test the mobile application. The application can include EGL REST, SOAP or dedicated service to do the business logic like other common RUI applications. The purpose of this blog is to focus on the deployment of mobile app, so we will not go into the details of developing a new  application.  Please refer to this blog(Developing with the EGL Dojo Mobile Widgets) for more details on developing new Mobile applications.   Instead, for convenience, we are providing an already developed sample mobile project to use to demonstrate the deployment process. 
 
Please import and test the project in RBD after downloading the sample project from here
  • Create an EGL mobile project to import/setup the dependent widget projects
  • Import the attached project,  clean & run MortgageCalculatorHandler.egl in Preview mode. Click calculate button, it will invoke a dedicated service and show the result in the page.

3. Deploy to Web Server

An EGL mobile application is a web application. The developer can deploy it to web servers so that it can run in various browsers including mobile browsers.  If it will be finally deployed to a native mobile app, the service will still need to be deployed to the web server so that the mobile app can access it.
 
The deployment is just the same as RUI application deployment. Just open EGLMobileSample.egldd, create target project and other configurations, then click deploy button.  Run the deploy version to test.  The deployed application will look like below screen shot.

 

image

4. Deploy to Android Project

The EGL mobile project can also be deployed to native mobile app or otherwise known as a hybrid mobile app. We will take Android as an example here.

4.1 Create Android Project

Phonegap/Cordova is a convenient tool to create a hybrid mobile app, so we will use it to demonstrate the process. You can choose to create a Android project manually, then configure it to use webView to make a hybrid app. We will not cover this here, but you should look at the PhoneGap/Cordova documentation.
 
After setting up phonegap/cordova, run the following command in your workspace folder to create a new hybrid Android project. 

  1. $ cordova create EGLAndroidSample com.ibm.egl.EGLAndroidSample "EGLAndroidSample"
    $ cd EGLAndroidSample 
    $ cordova platform add android
    $ cordova build

    For more detail and prerequisites, please refer to Phonegap Android Guide.
  2. Import the Android project to the workspace. In RBD, run New -> Android project from Existing code, select EGLAndroidSample. Do NOT check “copy projects into workspace”. Make sure EGLAndroidSample and EGLAndroidSample-CordovaLib projects are created.
  3. Configure the Android project. To access EGL service in the deployed web server, you will need android.permission.INTERNET permission in AndroidManifest.xml. Make sure the permission is allowed in that file.

4.2 Deploy by Ant

We already provide an ant script deploy.xml in the sample project to help the user to deploy the web project into an native app project.

  • Open deploy.xml in the attached EGL project, modify the properties according to your environment.
    • SourceWebProject  The project name of the deployed EGL Web project;
    • TargetAndroidProject  The Android project to be deployed;
    • MainPageName The name of the deployed entry html file;
    • ServerAddress The url of the web server where the service deployed;
    • WWWPath The path of the web pages in the Android project. The default path in general Android project is “assets/www”; But in phonegap project, the default path for Android is “platforms/android/assets/www”

      <property name="SourceWebProject" value="EGLMobileWeb" />

      <property name="TargetAndriodProject" value="EGLAndroidSample" />

      <property name="MainPageName" value="MortgageCalculatorHandler-en_US.html" />

      <property name="ServerAddress" value="9.123.158.25:8080" />

      <property name="WWWPath" value="platforms/android/assets/www" />

  • Right click deploy.xml，Choose Run As -> Ant Build to deploy. The console shows like： Open the Android project, refresh and check the folder of WWWPath, make sure the files in the web project are copied here.image

  • Right click the Android project, select Run as -> Android Application. Once the app is started, click Calculate, the service runs fine. The deployment to native app is successful.image

Deploy to other platforms

Besides Android, you can also deploy your app to iOS, Windows phone etc. The only difference will be in step 4. You will need to create a project in your target platform. Then update the deploy.xml to modify the properties, especially the WWWPath property. Have fun!

Attachment

EGLMobileSample.zip