BUILDING MOBILE WEB APPS WITH PHONEGAP. Matt Zukowski

Transcription

1 BUILDING MOBILE WEB APPS WITH PHONEGAP Matt Zukowski

2 This slide deck

3 1. Install Android Development Tools 2. Install Phonegap 3. Build a simple app using Phonegap 4. Build a better app using Phonegap + jquery Mobile

4 PHONEGAP? ( also known as Cordova ) for example:

5 WINDOWS: 32-BIT OR 64-BIT? If you're on Windows, figure out whether you're 32- bit or 64-bit: 1. Click Start, then right-click on Computer, then click Properties 2. Look for System Type 3. Are you 32-bit or 64-bit? Remember this it will be important later!

6 java -version DO YOU HAVE JAVA? Open a Terminal (or cmd.exe) and type: You should see something like: java version "1.6.0_65" Java(TM) SE Runtime Environment (build 1.6.0_65-b M4609) Java HotSpot(TM) 64-Bit Server VM (build b04-462, mixed mode) (make sure it says 64-bit if you're on 64-bit windows) Also see if you have the Java Development Kit (JDK): javac -version If either doesn't work, download the JDK from Windows: Mac:

7 SET YOU SYSTEM'S "PATH" On a Mac: Open a Terminal and paste the following (change username to your username) echo 'export PATH=$PATH:/Users/username/adt/sdk/platform-tools' >> ~/.bash_profile echo 'export PATH=$PATH:/Users/username/adt/sdk/tools' >> ~/.bash_profile echo 'export PATH=$PATH:/Users/username/adt/ant/bin' >> ~/.bash_profile echo 'export PATH=$PATH:/usr/local/share/npm/bin' >> ~/.bash_profile On Windows 7 and 8: Start -> cmd.exe and paste the following: setx PATH "%PATH%;%HOMEDRIVE%%HOMEPATH%\adt\sdk\tools" setx PATH "%PATH%;%HOMEDRIVE%%HOMEPATH%\adt\sdk\platform-tools" setx PATH "%PATH%;%HOMEDRIVE%%HOMEPATH%\adt\ant\bin" setx PATH "%PATH%;%PROGRAMFILES%\Java\jdk1.7.0_51\bin"

8 On Windows Vista or older: 1. Click Start -> Control Panel and search for "environment variables" 2. Click Edit the system environment variables 3. Under Advanced click Environment Variables 4. Under System variables edit "Path" 5. Add the following to the end (all in one line): ;C:\Users\username\adt\sdk\tools;C:\Users\username\adt\sdk\platform-tools;C:\Users\username\ad

9 INSTALL ADT 1. Download the Android SDK from 2. Unzip SDK into your home directory 3. Rename the unzipped directory from "adt-bundle-xxx-x86_ " to just "adt" Mac: /Users/username/adt Windows: C:\Users\username\adt 4. Open the eclipse directory in adt 5. Double-click Eclipse * * If you get an error, go back and check your PATH

10 CONFIGURE ADT 1. In Eclipse, go to Window -> Android SDK Manager 2. Install the Android version (API 17): SDK Platform ARM EABI v7a System Image In Eclipse go to Window -> Android Virtual Device Manager Set up a virtual device you would like to test your apps on Launch the virtual device by selecting it and clicking Start... and then Launch...

11 INSTALL ANT 1. Check if this works in your Terminal (cmd.exe): ant You should see something like: Buildfile: build.xml does not exit! Build failed 2. If not, download ant from 3. Unzip the archive into: Mac: /Users/ username/adt/ant Windows: C:\Users\username\adt\ant

12 INSTALL NODE.JS Download the appropriate package for your computer 3. Double-click on the installer and follow on-screen instructions

13 INSTALL CORDOVA (PHONEGAP) Open a Terminal (or cmd.exe) and enter: npm install -g cordova

14 PREPARE YOUR ANDROID DEVICE 1. Enable Developer options 2. Enable USB debugging under Developer options 3. Connect your device to your computer using a USB cable 4. In a Terminal: adb devices 5. You should see something like: List of devices attached HT36JW device 6. If you see no devices, make sure USB debugging is enabled. If adb is not found, go back and check your PATH.

15 CREATE A PHONEGAP APP (FINALLY!) cordova create hello_world cd hello_world cordova platform add android cordova run Create an app: configure it for Android: and run it:

16 INSTALL SUBLIME TEXT Download Sublime Text 2 from and install it. (you can skip this if you already have a preferred text editor)

17 PHONEGAP PROJECT STRUCTURE config.xml hooks merges platforms plugins www css index.css <- look and feel img index.html <- home page of your app js index.js <- javascript logic

18 INDEX.HTML Just a plain HTML5 document Note the viewport meta tag: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimu Add jquery to make things easier: <script src="

19 INDEX.HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for ios 7, remove the width=device-width and height=device-height attributes. See <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=de <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>hello World</title> </head> <body> <div class="app"> <h1>apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">connecting to Device</p> <p class="event received">device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>

20 PHONEGAP PLUGINS Enable different pieces of functionality: Geolocation cordova plugin add org.apache.cordova.geolocation Dialogs cordova plugin add org.apache.cordova.dialogs Vibration cordova plugin add org.apache.cordova.vibration Compass cordova plugin add org.apache.cordova.device-orientation... and more:

21 JQUERY MOBILE Basic index.html template: <!DOCTYPE html> <html> <head> <title>hello World!</title> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-wid <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body>...content goes here... </body> </html>

22 PAGES <body> <div data-role="page" id="foo"> <div data-role="header"> <h1>foo</h1> </div> <div role="main" class="ui-content"> <p>i am a page!</p> <a href="#bar" data-transition="slide">go to bar</a> </div> </div> <div data-role="page" id="bar"> <div data-role="header"> <h1>foo</h1> </div> <div role="main" class="ui-content"> <p>i am another page!</p> <a href="#foo">go to foo</a> </div> </div> </body>

23 WHERE TO GO FROM HERE? Phonegap + Android Setup Instructions Phonegap Reference Phongap Tutorial Phonegap Questions & Answers