App Entwicklung mit Hilfe von Phonegap

Web Advanced II - SS 2012

Jennifer Beckmann

Smartphone Markt in Deutschland: Betriebssysteme

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

2

htt

p:/

/ww

w.f

ocu

s.d

e/d

igit

al/i

nte

rnet

/net

zoek

on

om

ie-b

log/

smar

tph

on

e-go

ogl

es-a

nd

roid

-lae

uft

-ko

nku

rren

z-in

-deu

tsch

lan

d-d

avo

n_

aid

_72

35

44

.htm

l

App Entwicklung

• Android: Java

• iOS: C, Objective-C oder C#

• Symbian: Java ME, Flash Lite, Python, Ruby, .NET, C++

• WebOS: JavaScript, HTML5, CSS und C/C++

• Windows Mobile: Visual C++, Visual C#, Visual Basic, .NET

• Blackberry: Java

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

3

Funktionsweise

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

4

Qu

elle

: h

ttp

s://

bu

ild.p

ho

neg

ap.c

om

• mit HTML5, CSS und JavaScript entwickeln

• Phonegap-Wrapper für native Version

mit Phonegap erstellte Apps auch für App-Store

• native WebView Komponente:

• interpretiert HTML, CSS und JavaScript Code zur Laufzeit

• native Anwendung dient hauptsächlich als Wrapper für geschriebenen Code

• WebView Komponente erhält Schnittstelle zur PhoneGap API

Wie wird die native Anwendung für die unterschiedlichen Plattformen erstellt?

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

5

Wie wird die native Anwendung für die unterschiedlichen Plattformen erstellt?

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

6

Qu

elle

: htt

ps:

//w

ww

.mat

se.r

z.rw

th-a

ach

en.d

e/d

ien

ste/

pu

blic

/sh

ow

_do

cum

ent.

ph

p?i

d=8

43

7

Apps

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

7

Qu

elle

: h

ttp

://p

ho

neg

ap.c

om

/ab

ou

t/fe

atu

res

• http://phonegap.com/apps

Welche nativen Funktionen werden unterstützt?

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

8

Qu

elle

: h

ttp

://p

ho

neg

ap.c

om

/ab

ou

t/fe

atu

res

Native Funktionen

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

9

• durch Framework als JavaScript-API

• Befehle und Nutzung auf allen Plattformen gleich

Sensoren-Ansprache Beispiel:

• Notifications: // Show a custom alert

function showAlert() {

navigator.notification.alert(

'You are the winner!', // message

'Game Over', // title

'Done' // buttonName

);

}

// Beep three times

function playBeep() {

navigator.notification.beep(3);

}

// Vibrate for 2 seconds

function vibrate() {

navigator.notification.vibrate(2000);

}

14

.05

.20

12

B

ach

elo

r-A

rbei

t Je

nn

ifer

Bec

kman

n

10

Qu

elle

: h

ttp

://d

ocs

.ph

on

egap

.co

m/e

n/1

.7.0

/co

rdo

va_n

oti

fica

tio

n_n

oti

fica

tio

n.m

d.h

tml

Sensoren-Ansprache Beispiel:

• Buttons: document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {

// Handle the back button

}

document.addEventListener("menubutton", onMenuKeyDown, false);

function onMenuKeyDown() {

// Handle the back button

}

• weitere:

http://docs.phonegap.com/en/1.7.0/index.html

14

.05

.20

12

B

ach

elo

r-A

rbei

t Je

nn

ifer

Bec

kman

n

11

Qu

elle

: htt

p:/

/do

cs.p

ho

neg

ap.c

om

/en

/1.7

.0/c

ord

ova

_eve

nts

_eve

nts

.md

.htm

l

Plugins

14

.05

.20

12

B

ach

elo

r-A

rbei

t Je

nn

ifer

Bec

kman

n

12

Qu

elle

: htt

p:/

/wik

i.ph

on

egap

.co

m/w

/pag

e/3

67

52

77

9/P

ho

neG

ap%

20

Plu

gin

s

Plugins

14

.05

.20

12

B

ach

elo

r-A

rbei

t Je

nn

ifer

Bec

kman

n

13

Qu

elle

: htt

p:/

/wik

i.ph

on

egap

.co

m/w

/pag

e/3

67

52

77

9/P

ho

neG

ap%

20

Plu

gin

s

• Applikation für iOS und Android:

• eine JavaScript Datei für Android mit einer Java Datei für Android

• eine JavaScript Datei für iOS mit je einer .h und .m Datei für iOS

• es existieren Plugins für verschiedene Plattformen der Community, die man benutzen kann: https://github.com/phonegap/phonegap-plugins

Tools

14

.05

.20

12

B

ach

elo

r-A

rbei

t Je

nn

ifer

Bec

kman

n

14

Qu

elle

: htt

p:/

/ph

on

egap

.co

m/t

oo

ls/

• Unter anderen:

jQuery Mobile

Sencha Touch

XUI

jQTouch

GWT Mobile

…

…

Entwicklungsumgebungen für Phonegap

• Dreamweaver ab CS 5.5:

• Nitobi wurde von Adobe gekauft

• Einbindung von PhoneGap in Dreamweaver CS 5.5

• Build Service integriert

• Sonst:

• native Entwicklungsumgebung: Install SDK + PhoneGap

• Anleitungen: http://phonegap.com/start

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

15

Vor- und Nachteile im Überblick

+ schnell

einfach

viele Plattformen

einheitlicher Code

- Geschwindigkeits-Nachteil

viele Programmierfehler Code erst zur Laufzeit sichtbar

Debuggen

nicht alle nativen Funktionen werden unterstützt

Look & Feel

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

16

Fazit

• Anforderungen an die App genau analysieren

• überprüfen ob alles mit Phonegap umgesetzt werden kann

• „kleine“ Apps mit Phonegap gut zu entwickeln

• für Performanz und spezielle Features: native Entwicklung

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

17

Zusammenfassung

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

18

Qu

elle

: h

ttp

://y

ou

tu.b

e/E0

UV

5i5

jY5

0

Weiterführende Links

14

.05

.20

12

P

räse

nta

tio

n J

enn

ifer

Bec

kman

n

19

• Phonegap: http://phonegap.com/

• API: http://docs.phonegap.com/en/1.7.0/index.html

• Dreamweaver Tutorials: http://tv.adobe.com/de/search/?q=phonegap

• Getting-Started Tuturials: http://phonegap.com/start