Thursday, 13 June 2013

Sencha Touch 2.2.1 packaging using PhoneGap

Hello guys,

Today I would like talk about native android packaging of Sencha Touch applications. SenchaTouch2.2 supports native packaging . But for any reason if you plan to use PhoneGap, this document is going to help you.

Setting up of dev environment

Okay. First we will list out all the sdks and tools that we require.

  1. Android SDK (your favorite version)
  2. Eclipse (for JavaScript developers) and ADT plugin
  3. PhoneGap 2.0.0
  4. SenchaTouch 2.2.1
  5. Ruby 1.9
  6. Ant



As the title says, we will be discussing in the context of Windows OS. This is almost same in Ubuntu and other Linux platforms if you have SDKs and tools ready for that platform.

Why not latest PhoneGap? When I was writing this blog, the latest version available was 2.8.0. I will come to that shortly.

Now, you have to ensure that following paths are exported to your environment PATH variable
  1. Android sdk platform-tools
  2. Android sdk tools
  3. JDK
  4. Ant
  5. Sencha CMD
JAVA_HOME and ANT_HOME are also required.

You can also take a look at my folder structure. Please note that I have same software having different versions. You just have to focus on the version that has mentioned earlier.

Now open a terminal and go to your folder. Start testing all your tools.

  • execute java
  • execute sencha
  • execute gem
You need to have compass and sass for sencha custom theme development. You can install these by executing following command.

gem install sass compass

If above command fails to install due to a proxy server in your work environment, you can install fiddler and run following command.

gem install --http-proxy myproxy:port sass compass


Congrats! You have set up your development environment successfully.  

Sencha project

Its time to create a sencha touch project. Open a console and navigate to your sencha touch sdk folder. In my case its D:\winster\tools\sencha-touch-2.2.1 and execute following command.

sencha generate app MyApp D:\winster\workspace\sencha\MyApp

If above command completed without any error, you can see your sencha project in given location. Now start a webserver and map sencha workspace to your virtual host. If you do not have any webserver, use the one which is packaged with sencha cmd. Command to start webserver is given below.

sencha fs web -port 8000 start -map D:\winster\workspace\sencha

You can verify the sample application by navigating to http://localhost:8080/MyApp from your WebKit based browser (firefox lovers please execuse).

So far so good. You have created a sample SenchaTouch application. Hope you are familiar with Sencha build process. CSS and JavaScript files are to obfuscated before pushing to production. Sencha has in built features for that. We will use that feature and creates required minified JS and CSS files. You can execute following command from your Sencha touch application folder to build your app.

sencha app build testing test

 Above command will create a test folder in MyApp folder. Open that folder and inspect the contents.

PhoneGap project


Next step is to create a PhoneGap project for android. Latest PhoneGap releases automate these steps. But you will find issue while integrating with SenchaTouch. After a few trial and error, I found that PhoneGap2.0.0 does not impact any issues in integration with SenchaTouch. But this version does not have any automated process. You can follow this url to create a sample PhoneGap android project.

http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

Wait..

It is okay if you have already created an app using above url. Now you know how to create a sample PhoneGap app. But our target is different here. You want to package your SenchaTouch application using PhoneGap for android platform. That means all the content of assets\www should come from SenchaTouch application.
How will you achieve that? It is very simple. Create a folder inside your MyApp directory. And using eclipse create an android application project inside that folder. You can name that folder whatever you want. In the screenshot I have used android as the folder name.



Once you create an android application project under MyApp\android, continue the steps to make it a PhoneGap integrated app.

You are just one step away from our target. We will overview current situation.


  • Now we have a SenchaTouch application project called MyApp. 
  • Inside that directory, we have a folder called android which is nothing but a android application project. 
  • We also know how to build the SenchaTouch app. In fact, we have already created a test folder under MyApp.
The last step is to remove www folder from android\assets and copy test folder to android\assets and rename it as www. In short you can run following command to achieve the same.

sencha app build testing android\assets
rm -rf www     (Windows: delete www folder)
mv testing www (Windows: rename testing folder to www)

That's all. Simple deploy your application to an emulator or device from eclipse. And find your beautiful sencha app wrapped in an android app.


Good day!

No comments:

Post a Comment