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

Post on 05-Dec-2014

2.114 views 4 download

description

 

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

Lo sviluppo mobile con PhoneGap

The web in your hand!!

Mi Presento

Fabio FranziniConsulente, Sviluppatore e

Trainer

blog: www.fabiofranzini.comemail: fabio@fabiofranzini.com

twitter: @franzinifabio

Sviluppare per il Mobile:

Applicazioni Native

Mobile Web

App Native negli anni..

Piattaforme

Proprietarie

JavaMe

Piattaforme

Proprietarie

Mobile Web negli anni..

Wap cHTML HTML

..Mobile Web Oggi!!

Le App Mobile oggi sono:

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

Vantaggi del Web?

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

Svantaggi del Web?

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

avanzate della piattaforma/device!

La soluzione è:

SviluppareNative App!!!

Native App e App. Store

…il problema si ripresenta!!

iPhone

Object C

Android

Java

Simbian

C / JavaScri

pt

WP7

Silverlight / XNA

Altri

JavaMe

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!!

Dubbio??

Ok, capito!! Ma allora cosa

faccio?

La verità sta nel mezzo!

HTML, CSS, JavaScript+

API native del telefono=

Native Web Application

Un esempio?

PhoneGap

Cos’è PhoneGap?

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

la costruzione veloce e facile di Applicazioni Mobile con 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.

PhoneGap in dettaglio

Device OS

My Native App (PhoneGap)

Web Browser + Device API

(NATIVE CODE)

PhoneGap.js HTML CSS JavaScript Images

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.

Piattaforme supportate

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

Quali API PhoneGap espone?

Accelerometer

Camera

Contacts

Geolocation

Notification

Framework di supporto?

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

PhoneGap

Demo

Applicazioni già sviluppate

http://phonegap.com/projects

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!!!!

è l’unico runtime? No, ma…

• PhoneGap

• Nokia WRT

• Appcelerator

Nokia S60iPhoneAndroidBlackberryWindows Mobile / WP7

Siamo giunti alla fine..

Domande??Tutto chiaro??

Alla prossima ragazzi!

Fabio FranziniConsulente, Sviluppatore e

Trainer

blog: www.fabiofranzini.comemail: fabio@fabiofranzini.com

twitter: @franzinifabio