Over a million developers have joined DZone.

PhoneGap Build: A Hosted Platform For Rapid Mobile App Development

To enrich your PhoneGap Build knowledge, we have covered a brief guide for developing a simple Android “Counter Tap” application using PhoneGap Build. Take a look.

· Mobile Zone

PhoneGap Build, launched in 2010, is a framework that helps developers build native applications with the standard web technologies like HTML, CSS, and JavaScript using PhoneGap. It simplifies the development process by uploading your HTML, CSS and JavaScript assets to PhoneGap Build cloud service. This service then compiles your app in the cloud to easily and quickly deliver app-store ready mobile app that supports multiple mobile platforms including Android, iOS, BlackBerry, Symbian, Palm and more.

Right since the launch of PhoneGap Build, the PhoneGap team has been introducing new features and enhancements to make the service better than ever. Some of the important benefits it provides to PhoneGap app developers are:

  • It compiles applications in the cloud using up-to-date SDKs to deliver app-store ready apps. Consequently, it helps you get rid of maintaining the native SDKs.

  • It helps you reduce your development time significantly by utilizing your existing web development skills, tools, and frameworks. In addition, it also provides all the obvious benefits of cross-platform development.
  • It helps you accelerate team collaboration by allowing you to create roles right within your PhoneGap Build projects.

Though the benefits mentioned above are minimal, they are far-reaching. Leveraging PhoneGap Build for developing your enterprise mobile app is not a just cost-effective decision but also a right platform you need to build and deliver high-end products with Rapid Prototyping features along with best-in-breed cross-platform development capabilities. To enrich your PhoneGap Build knowledge, we have covered a brief guide for developing a simple Android “Counter Tap” application using PhoneGap Build. Take a look.

Pre-requisites

Download and install the APK of your mobile app on Android device.

Using the Source Code

Create a folder called "Counter Tap" and within that folder create three other folders - img, css, and js for image, CSS and JavaScript files respectively. Create an XML file with the name "config.xml" and then an HTML file as "index.html".

Adding Configurations to config.xml

Now go to config.xml file which is the main source code file and declare the name, icon, the orientation (landscape or portrait) of your app, fullscreen mode, plugins and other elements. Copy the following code to config.xml file.

<widget xmlns           = "http://www.w3.org/ns/widgets" 
        xmlns:gap       = "http://phonegap.com/ns/1.0" 
        xmlns:android   = "http://schemas.android.com/apk/res/android"
        id              = "com.simpleappsagain.countertap" 
        version         = "1.0.0">

    <name>Counter Tap</name>

    <description>Simple application to count stuff.</description>

    <icon src="icon.png"/>

    <platform name="android">
    <preference name="fullscreen" value="true" />
<preference name="orientation" value="portrait" />
<preference name="phonegap-version" value="cli-5.1.1" />
    </platform>

    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.vibration" />

</widget>

In the widget, you can look for id and version of your of your app and use your own. For the name tag, you can define the name of your app and for description tag, add some description of the app. For platform tag, use Android as that's the target platform and use following three preferences in it:

    1. fullscreen
    2. portrait
    3. PhoneGap version cli 5.1.1 (if you do not mention the version, PhoneGap Build will use the latest cli version automatically).

For the last two, use Dialog and Vibration plugins for which you can write the code and use it later. These plugins can be used in Reset button which vibrates and shows the confirmation dialog when clicked.

Creating Other Elements:

Here is the code for index.html:

<!DOCTYPE html>
<html class="background-full">

<head>
    <meta name="viewport" 
  content="user-scalable=no, 
  initial-scale=1, 
  maximum-scale=1, minimum-scale=1, 
  width=device-width" />
    <script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />

    <title>Counter Tap</title>
</head>

<body align="center">
<div class="div-decount-reset-button">
<input type="button" 
   class="border-counter-button counter-button-decount teal" 
   value='-1' 
   onClick='decount()'>

<input type="button" 
       class="border-counter-button counter-button-reset teal" 
   value='RESET' 
   onClick='reset()'>
</div>

<span class="running-number" id="running-number">
0
</span>

<div class="div-counter-button">
<input type="button" 
   class="border-counter-button counter-button-count teal" 
   value="COUNT" 
   onClick="count()" >
</div>

<footer style="color: white; font-weight: bold;">
Counter Tap
</footer>

<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {

}
</script>
<script type="text/javascript" src="js/counter.js"></script>
</body>

</html>

Writing app logic in js/counter.js:

Follow the below instructions to write app logic in counter.js file.

  • Tap COUNT Button - the number will be added by one.

  • Change the color of the number to blue or white if it is divisible by 10.
  • Tap '-1' button, the number will be subtracted by 1 if it is not 0.
  • Tap RESET Button and vibrate the device to show the dialog for resetting or not resetting the counter. If 'OK', reset the number to 0.

Creating JavaScript File:

Create a JavaScript file named counter.js in js folder. Now add the following code the file.

var runningNumberElementId = 'running-number';
var counted = document.getElementById(runningNumberElementId).innerText;

// Tap COUNT button
function count() {
    counted = parseInt(counted) + 1;
    counterWithStyle(counted);
}

// Tap -1 button
function decount() {
    if(counted >= 1) {
        counted = parseInt(counted) - 1;
        counterWithStyle(counted);
    }
    else {
        counted = 0;
    }
}

// Tap RESET button
function reset() {
    // Vibrate for 100 ms
    navigator.notification.vibrate(100);
    navigator.notification.confirm('Reset counter?', 
    onConfirmReset, 
    'Reset', 
    'No,OK');
}
function onConfirmReset(button) {
    // Use the button index: No (1), OK (2)
    if(button === 2) {
        resetCounter();
    }
}

// Reset counter
function resetCounter() {
    counted = 0;
    document.getElementById(runningNumberElementId).innerHTML = counted;
}

// Change color
function counterWithStyle(counting) {
    if (counting % 10 == 0 && counting != 0) {
        document.getElementById(runningNumberElementId).innerHTML = "<font color='#23126E'>" + 
        counting + 
        "</font>";
    }
    else {
        document.getElementById(runningNumberElementId).innerHTML = counting;
    }
}

Building App on PhoneGap Build:

The source code is now ready to be used. So, login to PhoneGap Build. Select from the two available options to build the app - a .zip file or .git repository. .zip file is available only for a private app. You can upload the .zip file if you create a new account. Zip your source code, upload it for PhoneGap to build the app for you. You can then download the APK and install it on your device.

You can even use .git repository (as shown below) and build the app in the open source tab. Click on Pull from .git repository button and then Ready to build button. Now wait until it allows you to download the APK, then click Android icon.

Congratulation! The app is now built.

PhoneGap Build is a great tool to develop successful applications, especially if you love JavaScript. So, give it a try and do let us know your thoughts about using PhoneGap Build for your projects in the comments.

Topics:
phonegap build ,mobile ,app development

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}