Sencha Touch native packaging for Android & OSX

Introduction

Building a cross platform application became very easy after the introduction of integrations with Cordova / Phonegap with Sencha Touch after release of Sencha Cmd 5.x and Sencha Touch 2.3.x. Sencha Cmd uses the NodeJS and various Cordova commands for creating native packages for various platforms.

In this article you will see how easy it is to package the Sencha Touch application into native iOS / Android app with the leverage of Cordova.

Pre-requisite

• Android development environment : Here are the detailed setup steps
• Sencha development environment (Sencha Cmd 5.x + Sencha Touch SDK): Here are the detailed setup steps

Details

Step 1 : Install NodeJS on Linux platform :

• Open the terminal and type below command,

yum install nodejs

OR

• Install from source code by executing below commands in terminal
  • wget http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz
  • tar zxvf node-v0.10.26.tar.gz
  • cd node-v0.10.26
  • ./configure
  • make
  • make install

Mac /Windows: Follow https://nodejs.org/

Step 2 : Install Apache Cordova ( Works for all platform )

To package the Sencha Touch app using Cordova install it using following command in terminal npm install -g cordova Output would looks similar as below

Step 3 : Generate Sencha Touch app

Generate the Sencha Touch app by following below commands:

sencha -sdk <sdk-path> generate app <app-namespace> <location>

Example :

sencha -sdk /home/wtc/sdk/touch-2.3.1 generate app TestApp /var/www/html/TestApp

For more details refer to Create, Build & Package Sencha Touch project using Sencha Cmd

Step 4 : Enable Cordova support to app

To enable the Apache Cordova support to generated app change to app directory and run the following command,

sencha cordova init

After running above command you will see that sencha build process added following piece of code to your app.json file

Step 5: Change the app.json file property for building native package

Uncomment the following line for packaging iOS and Android

Note : You can edit this configuration to package for specific platform

Step 6 : Prepare native package

To prepare the native Android package run the following command in terminal,

sencha app build native

Important Note : For ios package you should have OSX platform.

Your Android native package is ready, you will find the .apk file in the following location

 TestApp/cordova/platforms/android/ant-build/

Step 7 : Install app and have native feel

Now install generated .apk file on any Android device (adb install <apk file path>), and feel the native look for Sencha Touch application.

Below images shows from Sumsung Galaxy device:

If you are on OSX platform and platform config in app.json has entry for ios then you will see that .xcodeproj file at following location

TestApp/cordova/platforms/ios/

Double click on this file, this will open the xcode application on your OSX platform where you can run your app in ios simulator and test.

Conclusion

As part of this article you saw that how we can leverage the Cordova feature with Sencha Cmd for building the native Android app for Sencha Touch framework. Building an native package is now very easy as compare to earlier days with this feature from Sencha.

Note : We will be talking about different device APIS in subsequent articles.

References

• http://docs.sencha.com/touch/2.3.0/#!/guide/cordova
• The article code from GitHub