Phonegap - 18.194.172.147
Transcript of Phonegap - 18.194.172.147
![Page 1: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/1.jpg)
PhonegapSebastian Viereck & Mathias Münscher
1
![Page 2: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/2.jpg)
1. Worum geht es?
2
![Page 3: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/3.jpg)
Worum geht es?
• Phonegap ist ein Framework
• für Rich Internet Applications
• auf Mobilen Systemen
3
![Page 4: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/4.jpg)
Geschichte• Ursprünglich ein Open-Source Projekt einer Web-
Agentur
• 2009 People's Choice Award (O'Reilly Media's Web 2.0 Conference)
• 2011 von Adobe gekauft und weiter als freies Projekt gefördert
• Gleichzeitig als Apache Cordova Projekt übergeben worden (PG ist eine Distribution von Cordova)
• Mitte 2012 Release 2.0
4
![Page 5: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/5.jpg)
Philosophie
Die Phonegap Entwickler sind überzeugt:
1. Web-Technologie wird die universelle Plattform
2. Alle Technik wird irgendwann wieder ausgemustert
5
![Page 6: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/6.jpg)
Philosophie
.. und daraus leiten sie Ihre Ziele ab:
1. Web-Technologie als “first class” Entwicklungs-Plattform
2. Phonegap soll irgendwann überflüssig sein
3. [Inoffiziell:] Keeping proprietary plattforms out
6
![Page 7: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/7.jpg)
Welche Rolle spielt PG?
• Größte Verbreitung bei mobilevision.com Befragung 2012 (Knapp vor Sencha Touch,10% Vorsprung vor Appcelerator Titanium)
• Appcelerator Titanium geht anderen Weg
• Kampf zwischen Web und Native: Facebook wechselt zu Native
7
![Page 8: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/8.jpg)
2. Übersicht
8
![Page 9: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/9.jpg)
Spezifikation
• Alle großen Plattformen (und weitere)
• iOS
• Android
• Blackberry
• Windows
9
![Page 10: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/10.jpg)
Spezifikation
10
![Page 11: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/11.jpg)
Features
• Online Doc: http://docs.phonegap.com/
• Bewegung
• Accelerometer
• Compass
• Geolocation
11
![Page 12: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/12.jpg)
Features
• Persistieren
• File Access
• SQL-DB
12
![Page 13: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/13.jpg)
Features
• Multi-Media
• Foto (kein Video!)
• Audio Rec + Playback
13
![Page 14: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/14.jpg)
Features
• Contacts (lesen/schreiben)
• Connection (Wifi, 3G,..)
• Device-Identifikation
• Events (PG loaded, Device-Lock,..)
• Notification (Alert, Sound, Vibration)
14
![Page 15: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/15.jpg)
Plugins
• Cloud-Storrage
• Barcode Scanner
• Bannerwerbung
• Login via Social Platform
Plugins sind teilweise kostenpflichtig!
15
![Page 16: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/16.jpg)
3. Praxis
16
![Page 17: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/17.jpg)
Was zeigen wir?
• Einbindung von PG in Javascript
• Eigene Native Funktionen einbauen
• Kleiner Einblick in die Phonegap Library
17
![Page 18: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/18.jpg)
GPS Query function onSuccess (position) {
alert('Latitude: ' + position.coords.latitude +
'Longitude: ' + position.coords.longitude + 'Altitude: ' + position.coords.altitude + 'Accuracy: ' + position.coords.accuracy + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'Heading: ' + position.coords.heading + 'Speed: ' + position.coords.speed + 'Timestamp: ' + new Date(position.timestamp) +
); };
function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); }
navigator.geolocation.getCurrentPosition(onSuccess, onError);
JS
18
![Page 19: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/19.jpg)
Demonstration
19
![Page 20: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/20.jpg)
In JS: Eigenes natives Plugin starten
Upload Photo
cordova.exec( uploadSuccess, uploadFail, "UploadImage", "upload", [
imageUrl]
);
JS
20
![Page 21: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/21.jpg)
Eigener Nativer CodeUpload Photo
public class UploadImage extends Plugin { @Override public PluginResult execute(String action, JSONArray data, String callbackId) { if (action.equals(“upload”)) { String imageUrl = data.getString(0);
upload(imageUrl);
return new PluginResult(PluginResult.Status.OK, 'Upload finished!'); } return null; }}
21
![Page 22: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/22.jpg)
JS Callback
Upload Photo
function uploadSuccess (message) {
" navigator.notification.alert( message, // message alertDismissed, // callback 'Success: ', // title 'Ok' // buttonName ); }
JS
22
![Page 23: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/23.jpg)
Demonstration
23
![Page 24: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/24.jpg)
Aufruf Phongap
Camera
function capturePhoto() {
function onSuccess(imageData) {updateView(imageData);
}
function onFail(message) { // wenn der User kein Bild ausgewählt hat
}
navigator.camera.getPicture(onSuccess, onFail, { sourceType: Camera.PictureSourceType.CAMERA, destinationType: Camera.DestinationType.FILE_URI, quality: 100});
}
JS
24
![Page 25: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/25.jpg)
Demonstration
25
![Page 26: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/26.jpg)
Cordova Javascript Library
Camera
cameraExport.getPicture = function(successCallback, errorCallback, options) {
exec(successCallback, errorCallback, "Camera", "takePicture", args);};
JS
26
![Page 27: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/27.jpg)
Phonegap Native LibraryCamera
public CameraLauncher() {
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
if (action.equals("takePicture")) {"
if (srcType == CAMERA) { this.takePicture(...); } } }
27
![Page 28: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/28.jpg)
Phonegap Native LibraryCamera
public void getImage() { Intent intent = new Intent();intent.setType("image/*");
startActivityForResult(intent); }}
28
![Page 29: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/29.jpg)
Javascript Call to Java
1. Javascript Layer: alle Cordova Methoden rufen Cordova.exec()
2. Javascript Layer: Cordova.exec() ruft die Javascript Methode prompt() auf
3. Java Layer: CordovaChromeClient.class überschreibt onJsPrompt(), wodurch ein Java Event getriggert wird
29
![Page 30: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/30.jpg)
2. Aufruf: prompt() in Javascript
Javascript Call to Java
prompt(argsJson, //Aufforderungstext'gap:'+JSON.stringify([service, action, callbackId]) //Feldvorlbelegung
);
Source: promptbasednativeapi.js
JS
30
![Page 31: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/31.jpg)
3. Aufruf: onJsPrompt() in Java
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
if (defaultValue.substring(0, 4).equals("gap:")) { JSONArray array = new JSONArray(defaultValue.substring(4)); String service = array.getString(0); String action = array.getString(1); String callbackId = array.getString(2); exec(service, action, callbackId, message); }
Source: CordovaChromeClient.class
Java Chrome Hack
31
![Page 32: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/32.jpg)
4. Review
32
![Page 33: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/33.jpg)
Pros
• Quasi-Native Apps machbar ohne Kenntnisse➡ Sales-Systeme nutzbar➡ Phonegap Build Service
• (Begrenzte) Plattform-Unabhängigkeit➡ Ein Code für mehrere Plattformen
33
![Page 34: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/34.jpg)
Cons
• Erheblicher Performance Nachteil gebenüber Nativ➡ Kritisch bei GUI, DB, 3D,..
• Plattform-Unterschiede müssen berücksichtigt werden (auch PG-unabhängige Aspekte)
34
![Page 35: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/35.jpg)
5. Fazit
35
![Page 36: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/36.jpg)
Fazit
• Zwitter-Wesen: Wer die Vorteile beider Syteme nutzen will, muss sich mit beiden auseinandersetzen
• Nicht für jede Anwendung geignet
• Entwicklung nicht aufzuhalten: PG schafft sich ab.
36
![Page 37: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/37.jpg)
Quellen• Phonegap Download, FAQ, Docs, Blog, Build..
http://www.phonegap.com
• Buch: Phonegap Beginner’s Guide[Andrew Lunny, Packt Publishing, 2011]http://tinyurl.com/dxtsokb
• Sebastian Vierecks Entwickler Blog - Eintrag zu PGhttp://tinyurl.com/c44lekz
• Marktanlyse Crossplattform-Toolshttp://tinyurl.com/84fy73s
• Vergleich auf Stackoverflowhttp://tinyurl.com/yecq9mj
37
![Page 38: Phonegap - 18.194.172.147](https://reader034.fdocuments.net/reader034/viewer/2022050207/626df6f97e039441d0042636/html5/thumbnails/38.jpg)
Danke!
38