PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript
-
Upload
francesca1980 -
Category
Technology
-
view
2.116 -
download
4
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/1.jpg)
Lo sviluppo mobile con PhoneGap
The web in your hand!!
![Page 2: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/3.jpg)
Sviluppare per il Mobile:
Applicazioni Native
Mobile Web
![Page 4: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/4.jpg)
App Native negli anni..
Piattaforme
Proprietarie
JavaMe
Piattaforme
Proprietarie
![Page 5: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/5.jpg)
Mobile Web negli anni..
Wap cHTML HTML
![Page 6: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/6.jpg)
..Mobile Web Oggi!!
![Page 7: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/10.jpg)
La soluzione è:
SviluppareNative App!!!
![Page 11: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/11.jpg)
Native App e App. Store
![Page 12: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/12.jpg)
…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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/14.jpg)
Dubbio??
Ok, capito!! Ma allora cosa
faccio?
![Page 15: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/16.jpg)
Un esempio?
PhoneGap
![Page 17: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/20.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/21.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/22.jpg)
Quali API PhoneGap espone?
![Page 23: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/23.jpg)
Accelerometer
![Page 24: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/24.jpg)
Camera
![Page 25: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/25.jpg)
Contacts
![Page 26: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/26.jpg)
Geolocation
![Page 27: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/27.jpg)
Notification
![Page 28: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/28.jpg)
Framework di supporto?
• XUI• jQueryMobile• jQuery• jQuery UI• jQTouch• QuelloCheVolete.js• …
![Page 29: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/29.jpg)
PhoneGap
Demo
![Page 30: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/30.jpg)
Applicazioni già sviluppate
http://phonegap.com/projects
![Page 31: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/31.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/32.jpg)
è 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](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/33.jpg)
Siamo giunti alla fine..
Domande??Tutto chiaro??
![Page 34: PhoneGap ovvero lo Sviluppo Mobile Nativo con HTML, CSS e JavaScript](https://reader036.fdocuments.net/reader036/viewer/2022081414/5484c712b4af9f8c0d8b4d24/html5/thumbnails/34.jpg)
Alla prossima ragazzi!
Fabio FranziniConsulente, Sviluppatore e
Trainer
blog: www.fabiofranzini.comemail: [email protected]
twitter: @franzinifabio