PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

34
Lo sviluppo mobile con PhoneGap The web in your hand!!

description

 

Transcript of PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Page 1: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Lo sviluppo mobile con PhoneGap

The web in your hand!!

Page 2: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Mi Presento

Fabio FranziniConsulente, Sviluppatore e

Trainer

blog: www.fabiofranzini.comemail: [email protected]

twitter: @franzinifabio

Page 3: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Sviluppare per il Mobile:

Applicazioni Native

Mobile Web

Page 4: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

App Native negli anni..

Piattaforme

Proprietarie

JavaMe

Piattaforme

Proprietarie

Page 5: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Mobile Web negli anni..

Wap cHTML HTML

Page 6: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

..Mobile Web Oggi!!

Page 7: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Le App Mobile oggi sono:

• RIA: Rich Internet Application• Social• Geo-localization• …

Page 8: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Vantaggi del Web?

• HTML / HTML5• CSS• JavaScript• Deploy semplice• Cross Browser / Cross Platform

Page 9: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Svantaggi del Web?

• Web Browser, sandbox indipendente dal resto del OS!• Impossibilità di accedere alle feature

avanzate della piattaforma/device!

Page 10: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

La soluzione è:

SviluppareNative App!!!

Page 11: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Native App e App. Store

Page 12: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

…il problema si ripresenta!!

iPhone

Object C

Android

Java

Simbian

C / JavaScri

pt

WP7

Silverlight / XNA

Altri

JavaMe

Page 13: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Native App VS Web App

Native App Web App

Cross Platform? No, mah… Si

Accesso alle API del SO?

Si No

Store di dati? Si Ni

Connessione dati obbligatoria?

No Si

Velocità di esecuzione?

Ottima Buona

Tecnologia di sviluppo?

Objective C, Java, C++, ecc..

HTML, CSS, JavaScript

Update installabili? Si No, non serve!!

Page 14: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Dubbio??

Ok, capito!! Ma allora cosa

faccio?

Page 15: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

La verità sta nel mezzo!

HTML, CSS, JavaScript+

API native del telefono=

Native Web Application

Page 16: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Un esempio?

PhoneGap

Page 17: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Cos’è PhoneGap?

PhoneGap è uno strumento di sviluppo open source, realizzato da Nitobi, per

la costruzione veloce e facile di Applicazioni Mobile con JavaScript

Page 18: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

PhoneGap in dettaglio

• E’ del codice che dovrà essere compilato per la piattaforma specifica che contiene:– Wrapper sul Web Browser del dispositivo;– Wrapper su alcune API del dispositivo;– PhoneGap.js: Espone le API wrappate in modo

che siano consumabili via JavaScript.

Page 19: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

PhoneGap in dettaglio

Device OS

My Native App (PhoneGap)

Web Browser + Device API

(NATIVE CODE)

PhoneGap.js HTML CSS JavaScript Images

Page 20: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Compilo per il mio Device e:

• Il risultato è un pacchetto composto di due elementi principali fusi in un unico pacchetto: – Il runtime si occupa di dialogare direttamente

con il dispositivo, PhoneGap appunto.– Le parti statiche (HTML, JavaScript, ecc) che

sono l’effettiva applicazione che avete sviluppato.

Page 21: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Piattaforme supportate

• iPhone / iPad• Android• Blackberry• Palm• Symbian• WP7 ?? Di sicuro fra qualche mese…

Page 22: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Quali API PhoneGap espone?

Page 23: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Accelerometer

Page 24: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Camera

Page 25: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Contacts

Page 26: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Geolocation

Page 27: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Notification

Page 28: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Framework di supporto?

• XUI• jQueryMobile• jQuery• jQuery UI• jQTouch• QuelloCheVolete.js• …

Page 29: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

PhoneGap

Demo

Page 30: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Applicazioni già sviluppate

http://phonegap.com/projects

Page 31: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Vantaggi di PhoneGap?

• Sviluppo con semplice conoscenza di HTML, CSS, JavaScript

• Creazione di Applicazioni Native!!• Multi Piattaforma!!!• Non richiede la connessione dati

attiva per funzionare!!!!

Page 32: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

è l’unico runtime? No, ma…

• PhoneGap

• Nokia WRT

• Appcelerator

Nokia S60iPhoneAndroidBlackberryWindows Mobile / WP7

Page 33: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Siamo giunti alla fine..

Domande??Tutto chiaro??

Page 34: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript

Alla prossima ragazzi!

Fabio FranziniConsulente, Sviluppatore e

Trainer

blog: www.fabiofranzini.comemail: [email protected]

twitter: @franzinifabio