Coursework 2: getting started (4) – using PhoneGap to build mobile applications

(optional)

Chris GreenhalghG54UBI / 2011-02-24

Chris Greenhalgh (cmg@cs.nott.ac.uk) 2

Introduction• PhoneGap is an open source project which allows HTML/Javascript

mobile browser applications to be converted to installable applications (i.e. no web server at all)

• You will need to use PhoneGap if and only if:– You want to run applications where there is no wireless network or– You want to access sensors other than GPS, in particular compass,

accelerometer, camera or– You want to add other native functionality not available in a web browser,

e.g. starting other apps• You do NOT need to use PhoneGap to create a browser-based

application that uses GPS and/or user input where a wireless network is present

• Note that Google AppInventor also allows simple installable apps to be created which can use other inputs and do not require a local network: http://appinventor.googlelabs.com/about/ (but with other limitations)

Chris Greenhalgh (cmg@cs.nott.ac.uk) 3

Contents

• Installing Eclipse• Starting Eclipse• Setting the web proxy• Installing the ADT plugin• Configuring the ADT plugin• Creating an initial project• A very brief introduction to using Eclipse

Chris Greenhalgh (cmg@cs.nott.ac.uk) 4

Installing the Android SDK

• See the slide set on running the emulator for details of installing the Android SDK

Note: this step should NOT be required in the labs: should already be installed in C:\Program Files\Android\android-sdk-windows\

Chris Greenhalgh (cmg@cs.nott.ac.uk) 5

Installing Eclipse

• Follow the instruction for Android on this page: http://www.phonegap.com/start– Ensure you have JDK 1.6 installed– Download and install (unpack) Eclipse “classic”– Install and configure the Android SDK (see slides

on running an emulator)

Note: this should already be installed in the labs under C:\G54UBI\

Chris Greenhalgh (cmg@cs.nott.ac.uk) 6

Starting Eclipse

– Start Eclipse (double click eclipse\eclipse.exe)• N.B. don’t use the version of eclipse in the labs on the

desktop – it is out of date and doesn’t have the ADT or other plugins installed

– Select the initial “workspace”, i.e. where you “projects” will be stored (make a note of it)

Note: this should already be installed in the labs under C:\G54UBI\

Chris Greenhalgh (cmg@cs.nott.ac.uk) 7

Setting the web proxy

– Check that the proxy is configured correctly for Eclipse• Window Preferences: General / Network Connections

(e.g. Manual, HTTP host 128.243.253.109 port 8080)

Note: this should only need to be done ONCE

Chris Greenhalgh (cmg@cs.nott.ac.uk) 8

Installing the ADT plugin

• (http://www.phonegap.com/start step 3)• See http://developer.android.com/sdk/eclipse-adt.html#installing

– Downloading the ADT plugin – see link• You may also wish to install (from the standard

“Helios” repository) the following:– Eclipse Web Development Tools– Eclipse XML Editors and tools– JavaScript Development Tools

Note: this should already be installed in the labs under C:\G54UBI\

Chris Greenhalgh (cmg@cs.nott.ac.uk) 9

Configuring the ADT plugin

– Check that the ADT Plugin is configured with the location of the Android SDK• Window Preferences: Android• (SDK was previously installed, e.g. in C:\Program Files\Android\

android-sdk-windows)

Note: this should only need to be done ONCE

Chris Greenhalgh (cmg@cs.nott.ac.uk) 10

Creating an initial project

• http://www.phonegap.com/start steps 4-6 go through setting up an initial project and running it

• Alternatively you can do the following to achieve the same result…

Chris Greenhalgh (cmg@cs.nott.ac.uk) 11

Downloading the sample project

• Download the project file: http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloPhoneGap.zip

• Unzip it into your Eclipse workspace directory– (remember when Eclipse started… e.g. workspace/ in your home directory)

Chris Greenhalgh (cmg@cs.nott.ac.uk) 12

Importing the sample project• In Eclipse select File Import…, – expand “General”, select “Existing Projects into

Workspace” and click “Next”– Click “Browse…” and select the project directory in

the workspace– Click “Finish”

Chris Greenhalgh (cmg@cs.nott.ac.uk) 13

Eclipse interface overviewExplorer: all files

The project

“Web” files

Main page

Project settings

File editor

Other views,

e.g. errors

Chris Greenhalgh (cmg@cs.nott.ac.uk) 14

A simple web page

File editor

Chris Greenhalgh (cmg@cs.nott.ac.uk) 15

Changing application settings

Project settings

= App “package”

“package”Must be different for each

app.

App version

must increase for each

version of one app.

Chris Greenhalgh (cmg@cs.nott.ac.uk) 16

Running the application

Chris Greenhalgh (cmg@cs.nott.ac.uk) 17

The sample application

Chris Greenhalgh (cmg@cs.nott.ac.uk) 18

Conclusions

• You should now be able to– Install and configure Eclipse and the ADT plugin– Set up, edit and run a simple PhoneGap project

• You can use this sample as the basis for your own development if you wish