1 / 42

Sviluppare Applicazioni Mobile Native in HTML e JavaScript

Sviluppare Applicazioni Mobile Native in HTML e JavaScript. Fabio Franzini. Presentazioni. Fabio Franzini Consulente, Programmatore e MCT Trainer su piattaforma .NET www.fabiofranzini.com fabio@fabiofranzini.com @franzinifabio. START!!. Background. Evoluzione del “Mobile Web”

menora
Download Presentation

Sviluppare Applicazioni Mobile Native in HTML e JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Sviluppare Applicazioni Mobile Native in HTML e JavaScript Fabio Franzini

  2. Presentazioni • Fabio Franzini • Consulente, Programmatore e MCT Trainer su piattaforma .NET • www.fabiofranzini.com • fabio@fabiofranzini.com • @franzinifabio

  3. START!!

  4. Background • Evoluzione del “Mobile Web” • Albori: WAP, cHTML, mHTML • Phone’s WEB Browser • WAP: puah!!

  5. WAP, cHTML, mHTML

  6. Mobile Web Oggi • Smart Phones • Sistemi Operativi Mobile completi • iPhone OS, Android, Simbian OS, Blackberry, Windows Mobile, WebOS, Maemo, ecc.. • Cross-platform Web Browser (Webkit!!) • 3G, WiFi

  7. Smart Phones

  8. Sviluppare oggi per il Mobile Web • Powerfull Web Browser • Web 2.0 • Social • Geo-localization • Ecc..

  9. Vantaggi • HTML • CSS • JavaScript • Deploy semplice • Ecc..

  10. Limitazioni • Web Browser?? • Sandbox indipendente dal resto del OS

  11. Soluzione Native App!!!

  12. Native App e App. Store

  13. Ok, ma… • iPhone: Objective-C • Android, Blackberry: Java • Nokia Symbian: C / JavaScript • Sony Ericsson: Java • Window Mobile: .NET / C++ / VB

  14. …quindi!!

  15. Native App VS Web App

  16. Ok, capito!! Ma allora?

  17. Confusi??

  18. Native App Cross-Platform HTML, CSS, JavaScript, Images, ecc.. + API native del telefono (Geo-localizzazione, Contatti, Accelerometro, Fotocamera, Vibrazione, ecc ..) = Wrapper sul Web Browser con supporto alle API del telefono.

  19. Un esempio? PhoneGap

  20. Cos’è PhoneGap PhoneGap è uno strumento di sviluppo opensource, realizzato da Nitobi, utile per la costruzione veloce e facile di Applicazioni Mobile con JavaScript

  21. PhoneGap in dettaglio 1/2 • E’ un container con wrapper sul Web Browser del dispositivo • Espone un insieme di API del dispositivo, astraendo le medesime, e le rende disponibili tramite JavaScript

  22. PhoneGap in dettaglio 2/2 • In base alla piattaforma con la quale dovrà interfacciarsi, l’implementazione sarà di sviluppata in: Objective C, Java e così via; • L’implementazione è fornita dallo stesso framework, il runtime si appoggia sul Web Browser e sulle estensioni per quella piattaforma. • Il risultato è un pacchetto composto di due elementi principali: • il runtime si occupa di dialogare direttamente con il dispositivo • le parti statiche (HTML, JavaScript, ecc) offrono l’interfaccia verso l’utente.

  23. PhoneGap in dettaglio

  24. Piattaforme supportate • iPhone / iPad?? • Android • Blackberry • Palm ~ • Symbian ~ • Windows Mobile ~

  25. iPhone??? • http://bit.ly/7wmgsv • “The recent changes to Apple’s iPhone developer agreement, this has ZERO impact on PhoneGap!” • “Apps built with PhoneGap will continue to be reviewed based on their own merits and NOT dismissed/rejected because they use PhoneGap.”

  26. Features • Accelerometro • Audio • Camera • Contacts • File IO • SMS • Settings

  27. Features Supportate

  28. Esampio di API 1/3 • Platform • document.getElementById("platform").innerHTML = device.platform; • Alert • navigator.notification.alert(“Mio Messaggio", “Attenzione", "Ok"); • Vibration • navigator.notification.vibrate(1000); • Media • var media = Media.new("hammer_time.wav", win, fail); • media.play(); • media.stop();

  29. Esempio di API 2/3 • GetCurrentPosition • function getLocation() { var win = function(p) { alert( p.coords.latitude + " " + p.coords.longitude ); }; var fail = function(){ //default query }; navigator.geolocation.getCurrentPosition(win, fail); }

  30. Esempio di API 3/3 • GetCurrentAcceleration • function getAccel() { var win = function(a) { document.getElementById('x').innerHTML = a.x; document.getElementById('y').innerHTML = a.y; document.getElementById('z').innerHTML = a.z; }; var fail = function(){}; navigator.accelerometer.getCurrentAcceleration(win, fail); }

  31. Framework di supporto? • XUI • jQuery • jQuery UI • jQTouch • QuelloCheVolete.js

  32. Alcuni numeri • iPhone App = 364 kb • Html, CSS, JavaScript, Media = 124 kb • Stessa Web App + PhoneGap = 240 kb

  33. Applicazioni già sviluppate

  34. Applicazioni già sviluppate http://phonegap.com/projects

  35. Vantaggi di PhoneGap • Sviluppo con semplice conoscenza di HTML, CSS, JavaScript • Creazione di Applicazioni Native!!! • Multi Piattaforma!!!! • Applicazioni accettate dall’Apple AppStore!!!! ;-)

  36. Svantaggi di PhoneGap • Documentazione in costruzione • Non realmente all’altezza per applicazioni con uso massivo di grafica (almeno per adesso).

  37. … è l’unico runtime? No, ma… • PhoneGap • Nokia WRT • Appcelerator Nokia S60 iPhone Android Blackberry Windows Mobile

  38. PhoneGap Demo

  39. Domande??Tutto chiaro??

  40. Ciao, alla prossima!! ;-) Fabio Franzini www.fabiofranzini.com fabio@fabiofranzini.com @franzinifabio

More Related