Monthly Archives: November 2010

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

Posted on by
Reply

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” />

    Tech Doesn’t Care About You: Gary Vaynerchuk Celebrates Death of Old Media

    Posted on by
    Reply

    Pretty much sums up how not to fail – just do something, and how to fail – keep complaining that everything is changing while doing nothing!

    User Interface Design – Keeping it simple

    Posted on by
    Reply

    Sencha Touch Adding Records to a Store From a Client Side SQL Lite DB

    Posted on by
    6

    OK, with RC1 and some free time I decided it was time to tackle the client side data entry using SQL Lite and Sencha Touch. I started developing a project using PhoneGap that was to operate fully even off of the net, there was no use for any scripting languages like PHP as there would be no call outside of the program to a server. This left me struggling to find a way to get the data from the device into the Touch stores without an Ajax call, since the user input the data it had to come out of the DB. The easiest method I could find was to simply loop through the records and add then to the store using the .add() function; the code is shown below.

    // Declare variable to use as data when instantiating store
var favorites = [];

// Set up datamodel
Ext.regModel('Codes', {
    fields: [
        {name: 'code',      type: 'string'},
        {name: 'desc',		type: 'string'}
    ]
});

var favorites_store = new Ext.data.Store({
	model  : 'Codes',
	data: favorites
});

// Get the data from the database and call the function allDataSelectHandler when finished
function getFavorites(){
  CodesDB.transaction(
      function (transaction) {
          transaction.executeSql('SELECT * FROM favorites;', [],  allDataSelectHandler);
      }
  );
}

function allDataSelectHandler(transaction, results){ 
 if (results.rows.length == 0){
   
} else {   
// Loop through the records and add them to the store   
    for (var i=0; i < results.rows.length; i++){
          row = results.rows.item(i);
	        favorites_store.add({'code':row['code'],'desc':row['desc']}); 
				//alert(row['code']);
     }  
  }
}
initDatabase();
getFavorites();

    It’s all been done before …

    Posted on by
    Reply

    For those that fail to start anything giving the excuse that the it’s all been done before .. maybe all you need to do is think about the different applications of common solutions, or uncommon uses of common parts to turn something that exists into something useful.