Skip to content

How to use PhoneGap to build mobile apps

Adobe PhoneGap is a framework which allows you to build mobile apps for multiple platforms (Android, iOS, etc.), as if the app was a web service.

Get a PhoneGap Build account

To compile a PhoneGap application for multiple platforms (without installing SDKs for each one on your own machine) you will need an account on the cloud service PhoneGap Build. Go to https://build.phonegap.com/ and register for a free account, which will allow you to build one PhoneGap application. If you need to compile more apps, then speak to @snim2 or @a.garcia-dominguez -- you should NOT pay for developer resources with your own money for your work at Beautiful Canoe.

Install PhoneGap locally

Installing PhoneGap on Ubuntu

To install PhoneGap, update your OS, install npm (a Javascript package manager) and use that to install the latest version of PhoneGap:

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install npm
sudo npm install -g phonegap@latest

You can test your install by asking PhoneGap for its version number:

$ phonegap --version
8.2.2

Installing PhoneGap on Windows or Mac OS X

If you are using Windows 10 or Mac OS X please refer to the online installation guide.

Create a new PhoneGap project

Use the PhoneGap command line utility to create a new project:

phonegap create phonegap-hello

This will create a new directory called phonegap-hello with some initial code:

$ ls phonegap-hello/
config.xml  CONTRIBUTING.md  hooks  platforms  plugins  README.md  www

Open the file .../phonegap-hello/www/index.html in your favourite editor. This file will be the first screen that opens in your mobile app.

Look for the <h1> tag:

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
        ...

Change the text slightly:

        <h1>Hello, world!</h1>
        <div id="deviceready" class="blink">
            ...

Test your new project locally

Before compiling your code for a mobile platform, you should test it locally. You can do this simply with a web browser, without installing any extra packages. Firstly, tell PhoneGap to serve the application as a web service:

$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on 10.70.5.91:3000
[phonegap] listening on 192.168.10.1:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

Then open your browser at the URL on the command line (in the example above this is http://192.168.10.1:3000).

Build your app for a mobile device

Compress your application folder into a .zip file:

cd phonegap-hello
zip -r hello.zip *

Go to the PhoneGap Build apps page and click on the private tab:

PhoneGap Build apps page

Click on the Upload a .zip file button and upload the hello.zip file that you just created.

On the next page, click on the blue Ready to build button. This will build the app for the Android, Windows and iOS platforms.

Once the build has completed, the next page will take you to the build packages:

Hello world binary downloads

You will notice that the iOS build has produced an error. This is because we have not provided an Apple signing key, and clicking on the error button will take you to some instructions for doing this. If you are likely to need an iOS build for your project, please speak to @snim2 or @a.garcia-dominguez.

Testing your phone on an Android device

Follow these instructions to configure your phone to install apps that are not in the Google Play Store.

Next, use a barcode scanner to read the barcode on the helloworld build page. This should download the .apk file for you, which you will be able to install. You will see the new application in your list of apps and you can run it like any other app on your phone:

Hello world Android app

Further reading