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

    28 comments:

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

      ReplyDelete
      Replies
      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.

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

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

      why do i need it anyway?

      ReplyDelete
      Replies
      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.

        Delete

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

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

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

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

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

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

      .\phonegap-2.3.0\lib\android\bin\test2\MyTest

      bin
      cordova
      libs

      generated folders are empty

      ReplyDelete
    4. For windows, check this link out : http://docs.phonegap.com/en/2.1.0/guide_command-line_index.md.html#Command-Line%20Usage_android
      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 : http://iphonedevlog.wordpress.com/2012/11/20/building-a-phonegap-android-app-on-windows-cordova-2-2-0-with-eclipse/

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

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

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

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

      ReplyDelete
      Replies
      1. You can follow the native packing guide in sencha docs : http://docs.sencha.com/touch/2-1/#!/guide/native_packaging

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

      ReplyDelete
      Replies
      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?

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

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

        Delete
    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.
      MyApp/build/MyApp/android/custom_rules.xml












      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

      Thanks

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

      thanks
      Max

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

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

      ReplyDelete
    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 java.io.FileNotFoundException. 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 java.io.FileNotFoundException: www/Next24/model/Settings.js

      How does one fix this?

      Appreciated.

      Thx,
      Riyaa

      ReplyDelete
    14. This comment has been removed by the author.

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

      ReplyDelete