Sencha Touch 2.1 + PhoneGap 2.2.0 + Android

This post aims to provide a guide for anyone who wants to package a Sencha Touch 2.1 app with PhoneGap(Cordova) 2.2.0 for Android.

What You need:

 - Sencha Touch 2.1
 - Android SDK
 - Sencha Cmd 3.0 (For Mac)
 - PhoneGap 2.2.0

Assuming you have Sencha Cmd and Android SDK installed, we can now begin creating our app.

Open your Terminal.app and cd into your Sencha Touch 2.1 directory:

cd path/to/sencha-touch-2.1/directory

Create a new Sencha Touch app. I will name my app MyApp for this tutorial:

sencha generate app MyApp path/to/MyApp

After your app has been generated, cd into you new app's folder:

cd path/to/MyApp

Now copy the cordova-2.2.0.js file from your PhoneGap directory to the root of your Sencha Touch app:

cp path-to-phonegap-directory/lib/android/cordova-2.2.0.js ./

We now have to ensure that we include the path of the cordova-2.2.0.js file in our app.json which was generated for us. So, go ahead and open up app.json in your favorite editor and place the path to the cordova-2.2.0.js file like so:

Before you continue, make sure you set your PATH variable to include both the Android tools directory and the platform-tools directory. If you haven't done so, run the following command in your Terminal.

vim ~/.bash_profile

Copy and paste the following lines in your .bash_profile ensuring that you set the correct path to your Android SDK.

export PATH=${PATH}:path-to-android-sdk/tools
export PATH=${PATH}:path-to-android-sdk/platform-tools

After you have done this, create a new Android project using PhoneGap.

cd path-to-phonegap-directory/lib/android/bin

./create path-to-MyApp/build/MyApp/android com.example.myapp MyApp

Return to the root folder of your Sencha Touch app:

cd path/to/MyApp

You will notice the build folder that was created after creating the android project using PhoneGap.

You will notice a build.xml file in the root of your app's folder. Open this file with your favorite editor, and place the following code just above the comments.

Your final build.xml file should look like this:

The Light At The End Of The Tunnel 

To test out your Super Cool app, ensure that:

• You are in the root of your app's folder 
• Your phone is plugged into you computer OR your Android emulator is running

Now run the following command: 

sencha app build package && build/MyApp/android/cordova/debug

DONE!!!

My next post will be about a simple DemoApp (Android) which uses PhoneGap's Camera API for camera access.