Fast PhoneGap Development for Android with AppLaud

July 25, 2012By 2 Comments

At PhoneGap Day last week I saw a demo showing the AppLaud Eclipse plugin by Mobile Developer Solutions (MDS), a plugin for creating PhoneGap templates to make your PhoneGap/Cordova for Android development fast and easy. I found it particularly interesting as I had discovered this pain point myself and been trying to address it with my own set of templates, but always thought a plugin would be ultimate. It appears the MDS folks concurred and were nice enough to share :-).

Install the Plugin

First ensure you have the Android SDK and your Eclipse environment setup for Android development via the ADT Plugin. Once the plugin is installed, you will have an Android option in your Eclipse | Preferences you can use to point to the installed SDK path such as shown below:

Next install the AppLaud plugin in Eclipse by going to Help | Install New Software… and point to this URL: http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download.

Hit Next and then Finish on the next dialog and you will be prompted to reboot Eclipse for the new plugin to be available.

Note: If you have any trouble, more details on installing the plugin can be found on the MDS site.

Create an Application

Once Eclipse has been restarted you should see a new Project option for your newly installed plugin. If you go to File | New | Project, you should now see an option to create a PhoneGap for Android Project such as shown here:

The AppLaud plugin is handy because it gives you the option to create a blank project or options to create a project containing a couple different UI libraries depending on your preference (includes jQuery Mobile and Sencha Touch options). You also have the option to create an application template that includes PhoneGap API sample code for GeoLocation, Accelerometer, Compass, Camera, Files, Contacts and more. This is something I actually created a template to address myself, but having it included in a plugin is even better. If you have a newer version of PhoneGap you want to use, there’s an option to enter the path to it as well. For instance, PhoneGap 2.0 was announced on Friday at PhoneGap Day, so I would prefer to use that over 1.9 which is the current built-in version. I can do that by specifying the path to the root folder unzipped from the downloaded file shown here:

Run the App!

You can leave most of the defaults for the project on the next screens, except you will need to enter a project name of course, and I typically change the base Android target SDK to the currently recommended 2.1 base. Next just ensure you have a package name specified on the last screen and hit Finish. Once finished, the created project structure will look like the following:

Notice the project is automatically set up for you to include the correct Cordova JavaScript and JAR files in the proper place, along with the default Java activity and AndroidManifest.xml all set up and ready to go.

Note: at this point you may have received this error depending on your versions error: No resource identifier found for attribute ‘xlargeScreens’ in package ‘android’ AndroidManifest.xml /AppLaudTest line 9). If that happens, remove the xlargeScreens propery line from the supports-screens element in the AndroidManifest.xml file and once saved the error should go away:

<supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
/>

Create an App with PhoneGap/Cordova API Code

If you choose to create a PhoneGap for Android Project with the PhoneGap API Example radio button selected, your generated project will look like this:

The generated project template in this case will include a main.js file that contains all the functions used by index.html to invoke PhoneGap API functions. Here’s a snippet from the generated main.js:

...
var deviceInfo = function() {
    document.getElementById("platform").innerHTML = device.platform;
    document.getElementById("version").innerHTML = device.version;
    document.getElementById("uuid").innerHTML = device.uuid;
    document.getElementById("name").innerHTML = device.name;
    document.getElementById("width").innerHTML = screen.width;
    document.getElementById("height").innerHTML = screen.height;
    document.getElementById("colorDepth").innerHTML = screen.colorDepth;
};

var getLocation = function() {
    var suc = function(p) {
        alert(p.coords.latitude + " " + p.coords.longitude);
    };
    var locFail = function() {
    };
    navigator.geolocation.getCurrentPosition(suc, locFail);
};

var beep = function() {
    navigator.notification.beep(2);
};

var vibrate = function() {
    navigator.notification.vibrate(0);
};

function roundNumber(num) {
    var dec = 3;
    var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
    return result;
}

var accelerationWatch = null;

function updateAcceleration(a) {
    document.getElementById('x').innerHTML = roundNumber(a.x);
    document.getElementById('y').innerHTML = roundNumber(a.y);
    document.getElementById('z').innerHTML = roundNumber(a.z);
}

var toggleAccel = function() {
    if (accelerationWatch !== null) {
        navigator.accelerometer.clearWatch(accelerationWatch);
        updateAcceleration({
            x : "",
            y : "",
            z : ""
        });
        accelerationWatch = null;
    } else {
        var options = {};
        options.frequency = 1000;
        accelerationWatch = navigator.accelerometer.watchAcceleration(
                updateAcceleration, function(ex) {
                    alert("accel fail (" + ex.name + ": " + ex.message + ")");
                }, options);
    }
};
...

Below are a couple of screenshots showing this template application running on my Android Nexus One:

AppLaud Cloud (PhoneGap for Android Dev’t in the Cloud)

These same Mobile Developer Solutions folks also created a cloud-based IDE called AppLaud Cloud that can be used to rapidly build for Android without having to set up or use Eclipse at all. Their editor is based on the ACE JavaScript editor and integrates the weinre debugger and the Ripple emulator for easier testing and debugging of your mobile apps. The IDE also gives you the option to create a jQuery Mobile project and includes the necessary libraries and code references for you. There’s also a companion mobile app in Google Play you can download to view any of the apps you’ve created in the IDE so you can run them from your device immediately.

Below are some screenshots showing the AppLaud Cloud Editor:

Project Creation Options

AppLaud Cloud IDE

Make a point to check out AppLaud Cloud here.

Filed in: CordovaMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. really nice tuts thanx

  2. Sanne says:

    Please note that AppLaud Cloud will unfortunately be discontinued from the 31st of August.

    Read more here: http://goo.gl/OXw8o

Leave a Reply