SAPUI5 Mobile App for cross platforms(iOS/Android) using PhoneGap: PART1

[yesrajkumar]

In this blog, I want to share my development experience while creating SAPUI5 Mobile applications for native mobile platforms(iOS/Android) using PhoneGap. There are plenty of blogs in the SCN which explains in detail about how to setup the Eclipse environment for SAPUI5 developments. So, I’m going to cover only the steps to deploy and run SAPUI5 in native devices(iOS/Android).

Just a quick introduction about PhoneGap before I proceed.

What is PhoneGap?

PhoneGap is an Open source framework that helps the developers to build cross platform Mobile Applications.

It helps the developers to use HTML5, JavaScript and CSS within the PhoneGap container and to create native mobile applications for different Operating systems such as (iOS, Android, Windows 8..etc). It helps interacting with the native operating system functionality using the JavaScript. You can read more info from http://phonegap.com/

PhoneGap supported features are listed in http://phonegap.com/about/feature/

I'm covering mainly three areas and they are,

A) How to setup Android development platform in Eclipse.

B) Steps to deploy and run SAPUI5 in Android devices using PhoneGap.

C) Steps to deploy and run SAPUI5 in iOS devices using Xcode and PhoneGap.

You can move to Step B and Step C directly if you are familiar with Step A.

SAPUI5 in Android devices	SAPUI5 in iOS devices
B)Steps to deploy and run SAPUI5 in Android devices using Phone Gap-Part 2.	C)Steps to deploy and run SAPUI5 in iOS devices using Xcode and Phone Gap-Part 3.

Prerequisites: Eclipse and Xcode are already installed in your machine.

A) How to setup Android development platform in Eclipse:

    Download the Android SDK from here: http://developer.android.com/sdk/index.html

  Once you have downloaded the SDK , execute the .exe file

     Uncheck the "Start SDK manager" and click finish

Download the ADT plug in from Eclipse.

    Go to help->Install New Software

Click the ADD button and enter Name and location for the ADT download -> https://dl-ssl.google.com/android/eclipse/

Click OK and select the developer tool as mentioned in the below screen shot and click Next.

  You will see the below screen and click Next button.

    Accept the license agreements and click finish. Eclipse will automatically ask for the restart. Perform the Restart.

    Once you finish this step, Eclipse will restart. Do not open the Android SDK manager and choose the Close button to close all the pop up.

    Go to system preference and specify the path for Android as where you have downloaded the SDK

    Once you are done with the above step, open the Java perspective.

    Java perspective (Windows -> Open Perspective ->Java) and click the highlighted Android SDK Manager.

  Select the below packages and install.

    Once you have performed the above steps, after successful installation, restart the eclipse.

Create simple Android Applications in Eclipse

Go to File -> New -> Android Application Project

Enter the application name , minimum required SDK, Target SDK, Compile With, Theme as shown in below pic and click on “Next” button

Configure the launcher Icon 🙂

You will see the folder structure as shown below.

Run the application by creating the virtual device(AVD) visible in the Java Perspective of Eclipse.

You will see the app and the usual "Hello World" :smile: screen in the Virtual device