How to develop Android Mobile App using KendoUI Mobile & PhoneGap

Been playing with KendoUI with many of our web projects and love it! Now, since everyone is talking about mobile app, we wanted to try if we can build a native Android app using PhoneGap with our beloved KendoUI as the UI components.

Instead of a being a complete step by step guide, this guide is actually complement to the official PhoneGap guide, we added extra info and notes that we discovered and think worth mentioning but missing in the guide.

Below is the list of installation steps we followed

 

Note* If you are Visual Studio 2013 users, this tutorial might no longer needed after the release of build-in tooling support for Apache Cordova after Visual Studio 2013 Update 3. For more information, visit http://blogs.msdn.com/b/visualstudio/archive/2014/08/04/apache-cordova-tooling-update-with-support-for-windows-7.aspx (Updated 2014.Aug.06)

 

1. Install Node.js

The popular server side javascript library is required, in case you haven’t install, here’s the download link – http://nodejs.org/

 

2. Install PhoneGap

Download and install PhoneGap from – http://phonegap.com/

 

3. Install Android SDK

Download and install Android SDK  from https://developer.android.com/sdk/index.html#download You will need this before you are able to run the Android Phone Simulator on your PC.

During the installation, you might be prompt to install JRE and JAVA SDK in case you don’t have it install on your PC. You can get both of them on http://www.oracle.com/technetwork/java/javase/downloads/index.html

NOTE:  Anyway, we found that developing on the simulator is painfully slow; hence, we recommend you to get an Android phone to deploy and test your app. Trust me, you will get way more productive that way than spending time waiting for the simulator to run

 

4. Configure and Setup the environment

Follow the instruction and settings posted on the official guide – http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html (Step 3B).

On top of the listed environment path, make sure that you create also

ANDROID_HOME: [*your android sdk path*]\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

Example:
ANDROID_HOME: E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

 

5. Test the environment settings

To test if the installation is successful, try running the PhoneGap command on your command prompt.

NOTE: Make sure you relaunch the cmd tool before testing the “phonegap run android” command.  In case it doesn’t work, try rebooting your PC; we found this step is required after the change of the environment path.

In case you run into path problem, which we do. Here’s some extra guide that you will guide your through until you resolve all the path problem.

Here’s a sample working path on my PC:
PATH: C:\Users\JeeShen\AppData\Roaming\npm;C:\Program Files\Java\jdk1.7.0_45\bin;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\tools;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

 

In case we missed any important steps, here are some of the reference links which we bookmark while solving the installation problems

 

The main challenge in on the installation part, once install, you can develop and mobile app project using KendoUI Mobile as usual. To run the created app, just run the phonegap run command on the project folder. The app will automatically be compile and package to android app and deploy to you connected Android phone. I manage to get my laptop setup and successfully ported our native Windows Phone App – GarageFinder to Android – Here’s the download link – https://play.google.com/store/apps/details?id=com.bizvise.garagefinder&hl=en

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s