PhoneGap

1 .Coursework 2: getting started (4) – using PhoneGap to build mobile applications (optional) Chris Greenhalgh G54UBI / 2011-02-24

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) 2 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 3 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 4 Note: this step should NOT be required in the labs: should already be installed in C :\Program Files\Androidndroid- 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\ 5 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\ 6 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 7 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\ 8 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\Androidndroid- sdk -windows ) Note: this should only need to be done ONCE 9 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… 10 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) 11 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” 12 Chris Greenhalgh (cmg@cs.nott.ac.uk)

13 .Eclipse interface overview Explorer: all files The project “Web” files Main page Project settings File editor Other views, e.g. errors 13 Chris Greenhalgh (cmg@cs.nott.ac.uk)

14 .A simple web page File editor 14 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. 15 Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

17 .The sample application 17 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 18 Chris Greenhalgh (cmg@cs.nott.ac.uk)