Sencha Touch native packaging for Android & OSX


stapppackage

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

Details

Step 1 : Install NodeJS on Linux platform :

  • Open the terminal and type below command,

yum install nodejs

OR

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

npm http GET https://registry.npmjs.org/cordova
 npm http 200 https://registry.npmjs.org/cordova
 npm http GET https://registry.npmjs.org/cordova/-/cordova-3.4.0-0.1.0.tgz
 npm http 200 https://registry.npmjs.org/cordova/-/cordova-3.4.0-0.1.0.tgz
 .
 .
 .
 .
 .
 /usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
 cordova@3.4.0-0.1.0 /usr/local/lib/node_modules/cordova
 ├── mime@1.2.11
 ├── q@0.9.7
 ├── semver@2.0.11
 ├── underscore@1.4.4
 ├── shelljs@0.1.4
 ├── plist-with-patches@0.5.1 (xmlbuilder@0.4.3, xmldom@0.1.19)
 ├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.8)
 ├── elementtree@0.1.5 (sax@0.3.5)
 ├── xcode@0.6.6 (node-uuid@1.3.3, pegjs@0.6.2)
 ├── npmconf@0.1.13 (once@1.3.0, inherits@2.0.1, osenv@0.0.3, ini@1.1.0, mkdirp@0.3.5, nopt@2.2.0, config-chain@1.1.8)
 ├── tar@0.1.19 (inherits@2.0.1, block-stream@0.0.7, fstream@0.1.25)
 ├── request@2.21.0 (json-stringify-safe@4.0.0, forever-agent@0.5.2, aws-sign@0.3.0, qs@0.6.6, tunnel-agent@0.3.0, oauth-sign@0.3.0, cookie-jar@0.3.0, node-uuid@1.4.1, http-signature@0.9.11, hawk@0.13.1, form-data@0.0.8)
 └── plugman@0.19.0 (bplist-parser@0.0.4, nopt@1.0.10, npm@1.3.4, dep-graph@1.1.0, rc@0.3.0, tar.gz@0.1.1, glob@3.2.8

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

"builds": {
 "web": {"default": true},
 "native": {
 "packager": "cordova",
 "cordova" : {
 "config": {
 // Uncomment the line below and add the platforms you wish to build for
 //"platforms": "ios android",
"id": "com.domain.TestApp",

"name": "TestApp"

}
}
}
},

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

Uncomment the following line for packaging iOS and Android

//"platforms": "ios 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:

welcome           video

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

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , , ,
Posted in Sencha Touch
One comment on “Sencha Touch native packaging for Android & OSX
  1. Mayank says:

    make[1]: g++: Command not found
    make[1]: *** [/home/wtc086/Downloads/node-v0.10.26/out/Release/obj.target/v8_base/deps/v8/src/accessors.o] Error 127
    make[1]: Leaving directory `/home/wtc086/Downloads/node-v0.10.26/out’
    make: *** [node] Error 2

    getting this error how to rectify ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: