Coursework 2: getting started (4) – using PhoneGap to build mobile applications (optional) Chris Greenhalgh G54UBI /

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: (but with other limitations) 2Chris Greenhalgh

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

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

Installing Eclipse Follow the instruction for Android on this page: – 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

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

Setting the web proxy – Check that the proxy is configured correctly for Eclipse Window  Preferences: General / Network Connections (e.g. Manual, HTTP host port 8080) Note: this should only need to be done ONCE 7Chris Greenhalgh

Installing the ADT plugin ( step 3) See – 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

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

Creating an initial project steps 4-6 go through setting up an initial project and running it Alternatively you can do the following to achieve the same result… 10Chris Greenhalgh

Downloading the sample project Download the project file: Unzip it into your Eclipse workspace directory – (remember when Eclipse started… e.g. workspace/ in your home directory) 11Chris Greenhalgh

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

Eclipse interface overview Explorer: all files The project “Web” files Main page Project settings File editor Other views, e.g. errors 13Chris Greenhalgh

A simple web page File editor 14Chris Greenhalgh

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

Running the application 16Chris Greenhalgh

The sample application 17Chris Greenhalgh

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