PhoneGap: Rapid Android Development, 2/3

PhoneGap: Rapid Android Development, 3/3

In this post, you will learn how to create a “Hello world” Android app from scratch, using Eclipse.  This post includes links to metadaddy-sfdc, where you’ll find all the files you’ll need to complete the app.

PhoneGap build processIn a previous post, I described how to build a simple iOS app using PhoneGap for iOS.  To keep things in balance, in this post I’ll walk you through how to build a very simple Android app using PhoneGap for Android.

For this example it is very important to be familiar with the Android development tools. But, if you are not, don’t worry, I was in the same place not that very long ago. Just follow the steps in this tutorial to complete the “Hello Android” example.

Setting Things Up

The first step is to set up your environment.  Go to the Android developers site where you can find a step-by-step tutorial to do this and all the necessary resources.  Once you’re done with that, come back to this tutorial.

At this point you should be able to create a new Android Project using Eclipse.  Go ahead and do this now.

Note: For this example I am using a Salesforce account to create all the database information and access all the objects will be needed to run the Android app. Creating a developer account is very simple, just go to Salesforce.com and create a free developer account.

In a previous post I’ve detailed how to create a Salesforce account and new objects.

Getting the Files

To keep things simple, we are going to use the example provided by metadaddy-sfdc.

  • You need to get the complete repository provided at his site.
  • You should already be familiar with how to clone a repository.  If not, no worries, it is pretty simple.  Simply follow the steps in this tutorial.
  • You will find several files in that folder just cloned, but we will only need these files,
      1. forcetk.js
      2. mobileapp.js
      3. phonegap.html
  • You now need to download these files,
      1. childbrowser.js (Android version)
      2. phonegap.0.9.5.js  (Use this specific version, Google it and download it)
      3. jquery.mobile-1.0a4.1.min.js
      4. jquery.mobile-1.0a4.1.min.css
      5. jquery-1.5.2.min.js

Note: In order to make this work, I had to download these specific file versions, specially the PhoneGap file and the childBrowser. Try downloading exactly the same file versions.

Adding Files to the Project

After creating a new project in Eclipse you should see this folder structure,
New Project in folder hierarchy

It should be pretty similar to what you have, the only difference will be the ProjectName (PhoneGapAndroid) and the Activity file class name (PhoneGapAndroidActivity.java).

    1. You will need to add a folder structure and move the files you downloaded into it.  Your folder should look like this,
      Assets
      Here a quick explanation of what’s going on,

        1. The www folder must be created. Copy the childBroswer.js file, phonegap0.9.5.js and the© phonegap.html file on it. Rename the file phonegap.html to index.html—it is a mandatory.
        2. The folder childbrowser must be created.  Include the PNG files you got in the childbrowser download.
        3. Create the folder static and populate it withe files indicated in the picture above.
    2. You need to create a folder as in this picture,
      Source hierarchy
    3. Now create a “libs” folder under your project name on Eclipse and copy the phonegap-1.2.0.jar into it, then you have to add the Jar to the libraries of the project. Go to Project Properties, click on “Java build path,” add the phonegap library, and click OK. Libs folder
    4. Now all the references should be good, without compilation issues.
    5. Open the AndroidManifest.xml file and code-and-paste this code into it,

Note: in the android:name attribute we are using our “PhoneGapAndroidActivity”.  You should use your own name, if you have chosen a different one.

    1. If you get a prompt asking to update the schema, click Accept.
    2. Create a folder named phonegap.xml as in this picture,
      Create phonegap.xml
    3. Inside the XML folder, create a file named phonegap.xml with this code,
    1. Inside the XML folder, create a file named plugins.xml with this code,

Well, you should now be ready to go, with all files in the correct place.  However, the app will not work, yet.

We first have to modify the Index.html file because it is using the iOS code.  According to the examples from metadaddy-sfdc, we have to modify several parameters in order to connect to Salesforce.

Also, depending on the business logic, we may have to modify the object mappings the application will use to prompt in the dialog. I have used my own database, but in the next post I’ll map out these objects for my previous post.

In my next post, I’m going to map the “PRODUCT object” so we can use it in the Android application.

Focus Mode

Contact Request

Close

We will call you right away. All information is kept private