Thursday, January 3, 2013

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 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


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


    1. 'build' is not recognized as an internal or external command,
      operable program or batch file.

      1. Is Sencha Cmd in your PATH? This may be the issue. Also if you have an old version of the SDK, try uninstalling it and removing it from your PATH.

    2. thank you for response,love your article
      "sencha" is in my path and i can write it everywhere. (sencha cmd V3.0.0.250)

      the first part "sencha app build package" work okay

      the second
      "&& build/MyApp/android/cordova/debug"

      'build' is not recognized as an internal or external command,
      operable program or batch file.

      why do i need it anyway?

      1. "&& build/MyApp/android/cordova/debug" - The build is actually your build folder and not a command. Have you already already create your android project with the phone gap command? You probably don't have the build folder in the root of your project.


      2. I've

        generated sencha app
        modified app.json

        copied 'cordova-2.3.0.js' to root.

        then create a new Android project using PhoneGap

        create C:/inetpub/wwwroot/st/MyApp/build/MyApp/android com.example.myapp MyApp

        noticed the new build folder.

        modified 'build.xml' from ST app root.

        then build sencha app:

        cd path_to_sencha_MyApp sencha app build package

        the build succeed

        but when i open \MyApp\build\MyApp\android from emulator in eclipse i can see only
        "My app Hello world, my app."

        cant see sench main.js sencha page

        what am i doing wrong thanks a lot :)

      3. You shouldn't open " \MyApp\build\MyApp\android" from you emulator. After you have started up your emulator successfully, open your terminal and cd into the root of your project and run: build/MyApp/android/cordova/debug

        After running this, go to your emulator, a look for your app under "apps". Your app should have a PhoneGap (Cordova) image as its icon with name of your app.

      4. can't find debug in build/MyApp/android/cordova

      5. Thats strange. Try running the command to create your android project again but this time start with "./create" instead of just "create".

      6. I have tried both commands and don't have it either. Maybe it is because I am using cordova 2.8?

    3. it doesn't work for windows, however even if i create ./test2/MyTest com.mytest MyTest



      generated folders are empty

    4. For windows, check this link out :
      Maybe you have already looked into it and this might be a stupid question but are you "create.bat"? from the link it says for windows you should do "create.bat". And also, for building the project it would be "debug.bat" not not just debug.

      You can also check out this blog post :

    5. thanks a lot this is working, do you know how can i load phonegap plugins into sencha?

    6. This screen cast was helpful for me. I'm probably going to do a tutorial on that soon. But here is the link: . Skip to the 5 minute mark. I think he starts talking to about using the ChildBrowser plugin at that point.

    7. this is working thank you so much!!!

    8. Great post - only wish Sencha's documentation matched the quality of their framework.

      How do I build a release version of the app with all the certification?

      1. You can follow the native packing guide in sencha docs :!/guide/native_packaging

    9. Thanks for this wonderful post Chris. However, I cannot find my app listed in the emulator app list. It does not appear. Any thoughts? By the way, I'm using Cordova 2.3. Could that be an issue?

      1. I'm not exactly sure what could be causing this problem. I also haven't tried out Cordova 2.3 yet so I can't say if it is an issue with Cordova. Did you follow my guide exactly how I did or did you do it differently?

      2. Thanks for the quick reply. I believe I followed your guide to the letter. Turns out I was missing a period before the activity name in the Android manifest. That solved it. Thanks again.

      3. Great! I'm glad you go it to work :)

    10. I'm testing your tutorial with Cordova 2.4
      I think that the followin changes should be made.

      Instead of adding the after-build target to build.xml, create a new custom_rules.xml file.
      Not sue if the default should be debug or something else.

      Instead of
      sencha app build package && build/MyApp/android/cordova/debug
      we should run
      sencha app build package && build/MyApp/android/cordova/build && build/MyApp/android/cordova/run


    11. Hi Chris, thanks for this wonderful tutorial, but i have a strange problem. If i put cordova-2.4.0.js in the app.json, my app on android
      won't load, and i see the blinking dots of demo app forever.
      If i remove cordova-2.4.0.js from app.json, it works all flawless, but, obviously i can't access to the phonegap features like filesystem and so on.
      Have an idea?


      1. Also hoping someone could answer this one !!!

    12. Once again, a tutorial for Mac...

    13. Hi all,

      I followed this tutorial (to the version as stated in 'What You Need') and thank you for the effort. Problem though! My app not loading when I plug in my device and run Eclipse. What I noticed was that Eclipse complains about my files not be found and throws a To give an example...when doing "sencha app build package..."
      Copied /Users/user/Documents/workspace/Next24/./app/model/Settings.js to /Users/user/Documents/workspace/Next24/build/Next24/package/app/model/Settings.js

      Eclipse however reports this file should be in the www/Next24/model/Settings.js

      How does one fix this?



    14. This comment has been removed by the author.

    15. Peace!

      If anyone is interested , I ran this tutorial on my Windoze 7 using this command

      sencha app build package && call build\TheApp\android\cordova\run --debug

      Walked away from the system came back the app was running on my phone.