Some thoughts on Sencha Touch 2.0

Wow, I just started playing with Sencha Touch version 2 which you can now download, and which comes with an extjs 4 style API on the sencha website, and I was so impressed I spent a few hours this weekend ditching my entire ICD10 app that was being written in jquery mobile. Why? The one word answer is speed, both in development time, and performance. Unlike version 1 I could hardly tell if I was coding extjs or touch, they seemed to work and act the same, this is a great plus for someone with a 9 – 5 in extjs coding. As far as performance is concerned take a look at the two apps side by side, then try to do a search for a medical term like ‘strep’ and see how they both respond. Now, imagine this difference playing out on a mobile device and not your desktop.

jquery mobile ICD 10 app

Sencha Touch 2 ICD 10 app

In addition, it looks like phonegap was purchased by Adobe, and it is now easier than ever to package and create native app files from your html5 / javascript application code, although the ‘free’ aspect of it has fallen by the wayside, the time saved is well worth the cost.

What’s wrong with writing apps for phones in non-native languages?

The book ReWork devotes a page to the principle of focusing on what won’t change when developing software. So if you you think about that for a second the timeless customer wish list for software can be boiled down to speed, simplicity, ease of use and clarity. If you can deliver that and just that your product will be relevant not only today but years from now. So, what’s the easiest way to stray from the path of speed, simplicity, and clarity. It might just be the next big thing.

Can you remember when Visual Basic was going to end programming as we know it; allowing those proficient in word processing and spreadsheets the ability to program complex applications. How about dumb terminals all connecting to a central server that would revolutionize the workplace desktop; that concept has been repackaged and is now called the cloud. Then there is the obvious misapplication of productivity applications, case in point, Sharepoint was supposed to be the answer to the document sharing problem facing many corporate offices by allowing people to collaborate across great distances and keeping multiple copies of documents all stored on the server. This program performs this task well, but maybe not with the clarity or simplicity of google docs, however, the real problem is that this product is often misapplied as a content management system. In reality, this product makes some really awful public facing websites. This is a clear misapplication.

You see where this is going, just like in life every trade-off comes with unintended consequences, and there are no shortcuts.

Mobile app development with non native languages is no exception to the rule. It comes with quite a few limitations, including, speed, access to all of the native phone features, and reliance on third party software for deployment to app stores. I found this out the hard way as I wrote an app for the iPhone using Sencha that worked great, but would not run on my Android device, so the one code base multiple platforms did not materialize in my case. The setup of Eclipse and the Android SDK was about the same as the setup outlined in the phonegap tutorial on this site. So for the past four weeks I decided to rewrite the Sencha apps into Native android apps using the eclipse and the Android SDK. The resulting pure Java product offers simplicity, clarity, and the learning curve is smaller than figuring out all of the moving pieces required to compile JavaScript apps to native phone apps.

Going (almost) native! From a Sencha Touch ( or any HTML / JS ) Web App to the Android Store step by step

You may have found this post frustrated by hours of searching for some instructions that actually work, right up front I can tell you this will tackle the problem of the automated download for Eclipse 3.6 (doesn’t work, known bug ) and show you how to set up the various targets in the Android SDK with a little more depth than “navigate to the SDK folder in the SDK location field under Eclipse -> Preferences”. It seems that a few tutorials left out a few steps that cost a few hours to figure out.

Ok the last post focused on the app store, but as you learn in business school, the more channels the better so the real advantage is you wrote your application in HTML 5 / CSS 3 / JS so distributing your app is as simple as following two tutorials. The android OS development tools rely on Eclipse as the base so the first thing you will need to do is download Eclipse:

Installing the development environment … really

I work on a mac and chose to download Eclipse Classic 3.6.1 here, and then installed the droid development add-ons by following the steps below:

  • Eclipse 3.6 requires you to download the ADT plugin from google, the explination is found on this page ( http://developer.android.com/sdk/eclipse-adt.html ) but a direct link to the package is here ( http://dl.google.com/android/ADT-0.9.9.zip )
  • Open Eclipse and go to the help menu, then press ‘Install Software’. You will see the screen below appear.
  • The install software screen

  • Press the add button and you will see the dialog box pictured below
  • Press the button labeled Archive…, and browse to the ADT zip package that you downloaded earlier, you will see the developer tools appear in the dialog box ( just like the image below )
  • Hit the next button, and then you will have to agree to the licence and confirm that you want to install the unsigned packages.
  • Restart Eclipse, and while you wait for Eclipse to start download Phonegap if you haven’t already.
  • Finally, you’ll have to download the SDK from google which can be found here ( http://developer.android.com/sdk/index.html )
  • Unzip the SDK and navigate to the tools folder and click on the file named Android and you should see the screen appear below
  • Click on the platforms that you wish to develop for and include any of the other APIs or samples that you might need — make sure you do this FIRST!
  • Once the install is done click on the ‘Virtual Devices’ link and click ‘New’ and you should see the screen below
  • Set up at least one virtual device for testing!
  • Now it is time to tell Eclipse where the SDK is located, to do this click on ‘Eclipse’in the eclipse toolbar and hit ‘preferences…’, when the dialog box appears select ‘Android’ on the left and then browse to the location that you unzipped the SDK file to and press Apply, if you followed all of the steps above you should see a list of installed targets like those shown in the screen shot below.
  • At this point if you can not see the targets in the box above, go back to the ‘Download the Android SDK’ step above and try again, anything past this point will not work.
  • Your first Sencha Touch Droid App!

  • On the Eclipse toolbar press File -> New -> Project and you should see a folder in the dialog box named ‘Android’, click that folder and select New project not sample project, the dialog box pictured below should appear.
  • Ok did you get a chance during all of the free time you had installing eclipse to download Phonegap? If not grab a copy here ( http://www.phonegap.com/ ) it is the open source project that will allow us to run the html / js app on the phone. Now you should be able to install the phonegap files that you need to make the native / js switch into your web project, so straight from the phone gap help pages do the following:

    From the PhoneGap download earlier, we need the following two files:

  • Android/phonegap-0.9.2.jar
  • Android/phonegap-0.9.2.js
  • In the root directory of the project you created in Eclipse, create two new directories:

  • /libs
  • /assets /www
  • Now copy

  • Android/phonegap-0.9.2.jar to /libs
  • Android/phonegap-0.9.2.js to /assets/www
  • Your project files should look like those in the image here.

    You guessed it, the www folder is now going to act like the root folder on your website. Now we will follow the steps that can be found in this tutorial and reposted here:http://wiki.phonegap.com/w/page/3086272

    Make a few adjustments too the project’s main Java file found in the src folder in Eclipse.

    Change the class’s extend from Activity to DroidGap
    Replace the setContentView() line with super.loadUrl(“file:///android_asset/www/index.html”);
    Add import com.phonegap.*;

    (You might experience an error here, where Eclipse can’t find phonegap-0.9.2.jar. In this case, right click on the /libs folder and go to Build Paths/ > Configure Build Paths. Then, in the Libraries tab, add phonegap-0.9.2.jar to the Project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.)

    If all goes well your java file in the src/packages folder you should see something like the image below.

    Now, double click on the AndroidManifest.xml file and click the XMLSource link at the bottom of the screen shown below.

    Add the following entries to your XML file.

    <supports-screens
    android:largeScreens=”true”
    android:normalScreens=”true”
    android:smallScreens=”true”
    android:resizeable=”true”
    android:anyDensity=”true”
    />
    <uses-permission android:name=”android.permission.CAMERA” />
    <uses-permission android:name=”android.permission.VIBRATE” />
    <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
    <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
    <uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
    <uses-permission android:name=”android.permission.READ_PHONE_STATE” />
    <uses-permission android:name=”android.permission.INTERNET” />
    <uses-permission android:name=”android.permission.RECEIVE_SMS” />
    <uses-permission android:name=”android.permission.RECORD_AUDIO” />
    <uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
    <uses-permission android:name=”android.permission.READ_CONTACTS” />
    <uses-permission android:name=”android.permission.WRITE_CONTACTS” />
    <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
    <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />