Introduction of phonegap installation and configuration of Phonegap with Android
Intro to PhoneGap
-
Upload
jussi-pohjolainen -
Category
Technology
-
view
1.118 -
download
0
Transcript of Intro to PhoneGap
Intro to PhoneGap
Jussi Pohjolainen Tampere University of Applied Sciences
PhoneGap » Mo?va?on
• Use web technologies to build hybrid apps – PhoneGap wraps your html – files inside of na?ve app that can be upload to app stores
• Cross-‐pla1orm development – iOS, Android, Windows Phone, Blackberry, Symbian (well, basically everything)
• Possible to access some na6ve features, like sensors, camera …
Installa?on
• Install NodeJS (hMp://nodejs.org/) – Built on top of V8 Chrome JS engine – PhoneGap uses this
• Install PhoneGap (hMp://phonegap.com/install/)
– > sudo npm install –g phonegap • Install SDK for Android, iOS, Windows Phone.. • You can also build apps using PhoneGap Build – Compile in the cloud for Android, iOS.. no need to install separate SDKs.
CLI • Creates template project
– phonegap create my-app • Move inside project folder
– cd my-app/ • Compile to android
– phonegap –V build android • Compile to iOS
– phonegap –V build ios • Deploy the App
– phonegap install android/ios • Last two can be combined: compile and deploy
– phonegap run android/ios
About Android PlaXorm • Once you have installed Android SDK and you have put development tools to path, you can configure emulators – android avd
• See plaXorm guides – http://docs.phonegap.com/en/edge/guide_platforms_index.md.html#Platform%20Guides
• Emulator can be slow… use real device if possible. If not, see ?ps: – http://stackoverflow.com/questions/2662650/making-the-android-emulator-run-faster/12941873#12941873
Project Structure
• When crea?ng the project the project you get various directories – merges/ // Target files to different platforms – platforms/ // Android/iOS projects – plugins/ // Installed plugins – www/ // Your Web app
• The last one contains your app that is wrapped inside of na?ve applica?on. Other directories are empty un?l you compile the app for some plaXorm.
www/config.xml
• App rely on a common config.xml that provides info about the app and specifies parameters how it works
• Packaged Web Apps specifica?on (W3C) – http://www.w3.org/TR/widgets/
www/index.html
• App itself is implemented as a web page that is linked to whatever css and js.
• App executes inside of "WebView" -‐ component of na?ve app. – Can be distributed
• The WebView can take the whole screen or you can develop mix na?ve components and the WebView
• If you want to access na?ve features of phone, you do it by using phonegap.js
Compiling Locally and Remote
• You must install SDK to be able to compile your apps locally – Or you can use PhoneGap Build cloud service – PhoneGap Build does not support Windows Phone 8 and Windows 8.
• Locally supported pla1orms -‐ iOS (Mac) -‐ Android (Mac, Linux, Windows) -‐ Windows Phone (Windows)
PhoneGap Build • Create account
– https://build.phonegap.com/ – github account is not supported, use adobe id!
• Login in CLI – phonegap remote login --username [email protected] --password mYpASSw0RD
• A`er that – phonegap remote build android/ios
• Device install? – phonegap remote install android/ios – You will get a qr code, use that to install on device!
PhoneGap Build
Adding Device Specific Features • If you need to access device specific features using JS, you must install
plugins • How?
– phonegap local plugin add url • Where url can be
– https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
• See: – http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The
%20Command-line%20Interface
• To see all currently installed plugins – phonegap local plugin list
• And delete plugins – phonegap local plugin remove org.apache.cordova.core.console
Debugging • Possible to use desktop browsers – Although na?ve APIs are not available!
• PhoneGap Ripple emulator – http://emulate.phonegap.com/ – Emulates the na?ve APIs in desktop
• Log messages – console.log(…); – Android:
• Unix: adb logcat | grep 'web console' • Win: adb logcat | findstr 'web console'
– iOS: Xcode Debug Area console
LIFECYCLE EVENTS
Events • Your app can listen to life-‐cycle events such as
– deviceready • When PhoneGap is fully loaded and na?ve APIs can be called
– pause • When app is put to background
– resume • When app is retrieved from background
– online • When app is online
– offline • When app is offline
• When your app is fully loaded, deviceready event is raised. AOer that you can start to listen to other events.
<!DOCTYPE html> <html> <head> <title>Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for device API libraries to load function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } // device APIs are available function onDeviceReady() { // Now safe to use device APIs } </script> </head> <body onload="onLoad()"> </body> </html>
This is a dynamically generated js – file depending
on the plaXorm!
function main() { "use strict"; var DEBUG = 1; document.addEventListener("deviceready", deviceReady, false); function deviceReady() { // Now safe to use device APIs debug("deviceReady()", "Device is now ready", 1); document.addEventListener("pause", devicePause, false); document.addEventListener("resume", deviceResume, false); document.addEventListener("online", deviceOnline, false); document.addEventListener("offline", deviceOffline, false); } function devicePause() { debug("devicePause()", "Device is now paused", 1); } function deviceResume() { debug("deviceResume()", "Device is now resumed", 1); } function deviceOnline() { debug("deviceOnline()", "Device is now online", 1); } function deviceOffline() { debug("deviceOffline()", "Device is now offline", 1); } function debug(functionName, text, level) { if(level <= DEBUG) { var now = new Date(); console.log(now.toISOString() + " | " + text); } } }
Other Android Events
• Also following events available – backbutton // android – platform – menubutton // android - platform – searchbutton // android - platform
• When listening to these, in Android the normal back-‐buMon behavior is suppressed!
USING NATIVE APIS: ACCELEROMETER
function main() { var options = { frequency: 100 }; // Update every 100 ms var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, options); } function accelerometerSuccess(acceleration) { debug("accelerometerSuccess", 'Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n', 1); } function accelerometerError() { debug("accelerometerError()", "Accelerometer error", 1); }