1 / 18

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

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

jules
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) 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 Note: this step should NOT be required in the labs: should already be installed inC:\Program Files\Android\android-sdk-windows\ • See the slide set on running the emulator for details of installing the Android SDK Chris Greenhalgh (cmg@cs.nott.ac.uk)

  5. Installing Eclipse Note: this should already be installed in the labs under C:\G54UBI\ • 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) Chris Greenhalgh (cmg@cs.nott.ac.uk)

  6. Starting Eclipse Note: this should already be installed in the labs under C:\G54UBI\ • 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) Chris Greenhalgh (cmg@cs.nott.ac.uk)

  7. Setting the web proxy Note: this should only need to be done ONCE • 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) Chris Greenhalgh (cmg@cs.nott.ac.uk)

  8. Installing the ADT plugin Note: this should already be installed in the labs under C:\G54UBI\ • (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 Chris Greenhalgh (cmg@cs.nott.ac.uk)

  9. Configuring the ADT plugin Note: this should only need to be done ONCE • 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) 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 overview Explorer: all files File editor The project “Web” files Main page Other views, e.g. errors Project settings 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 “package” Must be different for each app. = App “package” App version must increase for each version of one app. Project settings 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 Chris Greenhalgh (cmg@cs.nott.ac.uk)

More Related