Building an app with Sencha Touch 2.3 and Cordova 3

NOTE: This post ist quite old (November 2013) and may be really outdated. But there still were some reasonable hits counted, so I leave it for reference. Personally I switched from SenchaTouch to native development (mainly Android so far) and have started a new blog at kekiel.com. If you are interested in android development – please come an visit.

Regards,
Karl-E.


In this post I describe how to build a simple app, for iOS and Android using Sencha Touch 2.3 and Cordova.

(Advice: Many keywords in my text are linked to the corresponding documentation and howtows. Follow and read…)

Introduction video

Shortly after I started writing this article, Ross Gerbasi from Sencha posted a great video, describing exactly this process. I highly recommend to watch this video. He explains all the steps and the technical background in 25 minutes. In consequence I will keep my explanations short and only do a quick walk through of the necessary steps / commands. I added some information regarding OS X Mavericks and Cordova 3.1 which were not released when Ross recorded his video.

Cordova or PhoneGap?

To learn about the differences you may read what Sencha says in the docs, or consider this or that blogpost. I am choosing Cordova over PhoneGap because I do not want/need to use the PhoneGap Build Service and enjoy building locally for both platforms (Android and iOS) in one step and in time.

Starting point: Basic Sencha Touch App

Sencha Touch 2.3 set up like described in the docs. Framework directory is

Java (version >= 1.7 required) and Node JS (/usr/local/bin/node) installed as written in the sencha doc.
ATTENTION: While there are some problems using cordova 3.1.0, you should use a version >= 3.2. As the time of this writing, the 3.2 RC was in the pipeline, so I set up cordova this way:

When cordova 3.2 is released (check the cordova project page), you simply have to

(You might also consider the cordova docs for setup.)

You’ll also have to install ios-sim package to start iOS simulator in the build process:

The project directory will be

Let´s start creating a new Sencha Touch App (see cmd introduction):

Take a look at the generated app, using sencha cmd build in webserver (You may want to do this in a separate terminal window to have the web server running while going on with development. To stop, simply press ctrl + C):

Open in Browser: http://localhost:1841/ and look at the created files:

 Adding Cordova Support

(make sure, your current directory is the project directory)

I am using “com.mydomain.sentoco” as my AppID and “SenToCo” as AppName.

this

  • updates native.properties and build.properties in hidden dir .sencha/app
  • modifies build.xml: Import .sencha/app/cordova-impl.xml in build.xml
  • creates config.xml
  • adds cordova.js  and config.xml to app.json
  • creates the cordova folder with its contents
  • adds cordova.local.properties

 

Adding Android Support

By default only ios is enabled in cordova.local.properties . To add android you have to add it to the cordova.platforms list. (Seperated by space!)

First test: Build and run app

This includes adding ios and android platform support to cordova. So it may take a while.

On first run, I often got a timeout error. (Especially the Android Simulator ist starting very slow.) Sometimes you’ll have to do a second try…

Android Pitfalls: If you run into java errors, please check your java version, $PATH settings, Android Tools and AVD config.
I also had to define JAVA_HOME by adding this line to my ~/.bash_profile

Also ant was missing. So I installed Hombrew and got ant by simply doing

iOS Pitfalls: There are problems with cordova 3.1.0. See setup instructions above in this article.

The result should look like this:

 Now using cordova

Ok – so far cordova is ready but not really involved. To use any of the cordova features, we have to include cordova plugins (see cordova docs). We’ll start by simply putting out the device (or in this case: simulator) UUID when the application launches.
To do this, add this code to the launch function in app.js

To include the cordova device plugin, use this command (remember change into the cordova subdirectory of your project):

After that, just go back to the project directory and re-build:

Ant that’s it:

You may take a look at the complete project code: Download as zip.

What’s next?

This is only a start. Having all tools set up, you now will be able to develop cross platform mobile app using sencha touch and cordova.

 

This entry was posted in on by Karl-E. Kiel.