How to combine Sencha Touch and PhoneGap to create a native app for android

Prerequisites:

• Phonegap (Version 2.9 or later)
• Sencha Command Line Tool (Version 5.0.0 or later)

Firstly I’ve downloaded the Phonegap package (from the phonegap archive) and extracted it to my folder /opt/phonegap-2.9

Afterwards I’ve downloaded the Sencha Touch Framework from Sencha and placed it on my Linux Ubuntu 14.04 into the folder /opt/senchatouch2

Combination of Sencha Touch and Phonegap

Create a Sencha Touch application

To make use of this combination, we need to create a touch application.

Open a terminal and type in:

cd /opt/senchatouch2/
sencha generate app AppName /var/www/AppName
cd /var/www/AppName
sencha app build package

Now if you open your favorite web browser (webkit-browser work best for sencha touch), you should be able to see your created application:

http://localhost/AppName

If this works and you can see your application, you can try to have a look for the package build we’ve just done in addition:

http://localhost/AppName/build/package/AppName.

This version is a minified version of all the individual sencha touch files, merged into one single file.

If you are able to open the build package in your web browser, we are ready now to take one further step and go on with the Phonegap project creation.

Create the Phonegap project

cd /opt/phonegap-2.9/lib/android/bin/
./create /var/www/AppName/build/package/AppName/android com.yourdomainnamespace.AppName AppName
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

The first line changes from the current directory to the phonegap folder. There we use the create script to create a phonegap project for us. Afterwards we change to the build directory and create a apk file which will be installed directly in your running android emulator. If you don’t want to test it in an emulator, just copy the apk file onto your android device.

Warning: Test the apk on your device on your own risk! This may be harmful for your device and therefore testing on an emulator is recommended!

At this moment, what you will see, will just be like the Apache Cordova splash screen which shows the device is ready animation. If this is also works on your side, you’ve done a good job so far.

Open now the file /var/www/AppName/app.json and add the lines marked in bold to the js section of this file:

"js": [
     {
         "path": "cordova.js"
      },
      {
         "path": "touch/sencha-touch.js",
         "x-bootstrap": true
      },
      {
         "path": "bootstrap.js",
         "x-bootstrap": true
      },
      {
         "path": "app.js",
         "bundle": true,
         "update": "delta"
      }
   ]

And kick off a build:

cd /var/www/AppName/
sencha app build package

When you refresh now your application in the browser and open the developer tools (most probably F12) you should see that the app loads the cordova.js file properly.

Well, at this point, we need to change a few code lines in the build.xml file. We need to copy our desired application files into the cordova web root which is located in /android/assets/www/.

Copy following code lines below the section:

<import file="${basedir}/.sencha/app/build-impl.xml"/>
<target name="-after-build">

		<delete dir="${build.dir}/android/assets/www" />

		<copy todir="${build.dir}/android/assets/www">
		    <fileset dir="${build.dir}" />
		</copy>

		<delete dir="${build.dir}/android/assets/www/android" />
    	</target>

Afterwards kick off a build again:

cd /var/www/AppName
sencha app build package
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

In your android emulator now should your Sencha Touch application as a native app combined with phonegap features.

To make use of them either visit phonegap.com and have a look to the api, or just give it a try with following commands which you add to /var/www/AppName/app/view/Main.js to the items section:

items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                tpl: [
                    'device name: {name}<br />',
                    'phonegap version: {cordova}'
                ].join(''),
                listeners: {
                    initialize: function() {
                        this.setData(device);
                        navigator.notification.vibrate(250);
                        navigator.notification.alert('Testing the Notification feature of cordova (Phonegap)');
                        
                    }
                }
            }
        ]

Let’s kick off our last build for this how to:

cd /var/www/AppName
sencha app build package
cd /var/www/AppName/build/package/AppName/android/
ant debug && adb install -r ./bin/AppName-debug.apk

And now switch to your emulator and see the final result.