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
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
<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
cd phonegap-hello zip -r hello.zip *
Go to the PhoneGap Build apps page and click on the private tab:
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:
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: