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)http://appinventor.googlelabs.com/about/ 2Chris 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 3Chris 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\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/starthttp://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\ 5Chris 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\ 6Chris 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 7Chris Greenhalgh (cmg@cs.nott.ac.uk)

8. Installing the ADT plugin (http://www.phonegap.com/start step 3)http://www.phonegap.com/start See http://developer.android.com/sdk/eclipse-adt.html#installing 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\ 8Chris 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 9Chris 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 http://www.phonegap.com/start Alternatively you can do the following to achieve the same result… 10Chris 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 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) 11Chris 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” 12Chris 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 13Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

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

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