Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sviluppare applicazioni mobile native in html e java script

5,951 views

Published on

Slide del Talk "Sviluppare Applicazioni Mobile Native in HTML e JavaScript" a BetterSoftware2010 di Fabio Franzini (ITA)

  • Be the first to comment

Sviluppare applicazioni mobile native in html e java script

  1. 1. Fabio Franzini<br />Sviluppare Applicazioni Mobile Native in HTML e JavaScript<br />
  2. 2. Presentazioni<br />Fabio Franzini<br />Consulente, Programmatore e MCT Trainer su piattaforma .NET<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />
  3. 3. START!!<br />
  4. 4. Background<br />Evoluzione del “Mobile Web”<br />Albori: WAP, cHTML, mHTML<br />Phone’s WEB Browser<br />WAP: puah!!<br />
  5. 5. WAP, cHTML, mHTML<br />
  6. 6. Mobile Web Oggi<br />Smart Phones<br />Sistemi Operativi Mobile completi<br />iPhone OS, Android, Simbian OS, Blackberry, Windows Mobile, WebOS, Maemo, ecc..<br />Cross-platform Web Browser (Webkit!!)<br />3G, WiFi<br />
  7. 7. Smart Phones<br />
  8. 8. Sviluppare oggi per il Mobile Web<br />Powerfull Web Browser<br />Web 2.0<br />Social<br />Geo-localization<br />Ecc..<br />
  9. 9. Vantaggi<br />HTML<br />CSS<br />JavaScript<br />Deploy semplice<br />Ecc..<br />
  10. 10. Limitazioni<br /><ul><li>Web Browser??
  11. 11. Sandbox indipendente dal resto del OS</li></li></ul><li>Soluzione<br />Native App!!!<br />
  12. 12. Native App e App. Store<br />
  13. 13. Ok, ma…<br />iPhone: Objective-C<br />Android, Blackberry: Java<br />Nokia Symbian: C / JavaScript<br />Sony Ericsson: Java<br />Window Mobile: .NET / C++ / VB<br />
  14. 14.
  15. 15. …quindi!!<br />
  16. 16. Native App VS Web App<br />
  17. 17. Ok, capito!! Ma allora?<br />
  18. 18. Confusi??<br />
  19. 19. Native App Cross-Platform<br />HTML, CSS, JavaScript, Images, ecc..<br />+<br />API native del telefono (Geo-localizzazione, Contatti, Accelerometro, Fotocamera, Vibrazione, ecc ..)<br />=<br />Wrapper sul Web Browser con supporto alle API del telefono.<br />
  20. 20. Un esempio?<br />PhoneGap<br />
  21. 21. Cos’è PhoneGap<br />PhoneGap è uno strumento di sviluppo opensource, realizzato da Nitobi, utile per la costruzione veloce e facile di Applicazioni Mobile con JavaScript<br />
  22. 22. PhoneGap in dettaglio 1/2<br />E’ un container con wrapper sul Web Browser del dispositivo<br />Espone un insieme di API del dispositivo, astraendo le medesime, e le rende disponibili tramite JavaScript<br />
  23. 23. PhoneGap in dettaglio 2/2<br />In base alla piattaforma con la quale dovrà interfacciarsi, l’implementazione sarà di sviluppata in: Objective C, Java e così via; <br />L’implementazione è fornita dallo stesso framework, il runtime si appoggia sul Web Browser e sulle estensioni per quella piattaforma.<br />Il risultato è un pacchetto composto di due elementi principali: <br />il runtime si occupa di dialogare direttamente con il dispositivo<br />le parti statiche (HTML, JavaScript, ecc) offrono l’interfaccia verso l’utente.<br />
  24. 24. PhoneGap in dettaglio<br />
  25. 25.
  26. 26. Piattaforme supportate<br />iPhone / iPad??<br />Android<br />Blackberry<br />Palm ~<br />Symbian ~<br />Windows Mobile ~<br />
  27. 27. iPhone???<br />http://bit.ly/7wmgsv<br />“The recent changes to Apple’s iPhone developer agreement, this has ZERO impact on PhoneGap!”<br />“Apps built with PhoneGap will continue to be reviewed based on their own merits and NOT dismissed/rejected because they use PhoneGap.”<br />
  28. 28. Features<br />Accelerometro<br />Audio<br />Camera<br />Contacts<br />File IO<br />SMS<br />Settings<br />
  29. 29. Features Supportate<br />
  30. 30. Esampio di API 1/3<br /><ul><li>Platform
  31. 31. document.getElementById("platform").innerHTML = device.platform;
  32. 32. Alert
  33. 33. navigator.notification.alert(“Mio Messaggio", “Attenzione", "Ok");
  34. 34. Vibration
  35. 35. navigator.notification.vibrate(1000);
  36. 36. Media
  37. 37. var media = Media.new("hammer_time.wav", win, fail);
  38. 38. media.play();
  39. 39. media.stop();</li></li></ul><li>Esempio di API 2/3<br /><ul><li>GetCurrentPosition
  40. 40. function getLocation() </li></ul>{<br /> var win = function(p)<br /> { <br /> alert( p.coords.latitude + " " + p.coords.longitude ); <br /> }; <br /> var fail = function(){ //default query }; navigator.geolocation.getCurrentPosition(win, fail);<br /> }<br />
  41. 41. Esempio di API 3/3<br /><ul><li>GetCurrentAcceleration
  42. 42. function getAccel() </li></ul>{ <br /> var win = function(a)<br /> { document.getElementById('x').innerHTML = a.x; document.getElementById('y').innerHTML = a.y; document.getElementById('z').innerHTML = a.z; <br /> }; <br /> var fail = function(){};<br /> navigator.accelerometer.getCurrentAcceleration(win, fail); <br /> }<br />
  43. 43. Framework di supporto?<br />XUI<br />jQuery<br />jQuery UI<br />jQTouch<br />QuelloCheVolete.js<br />
  44. 44. Alcuni numeri<br />iPhone App = 364 kb<br />Html, CSS, JavaScript, Media = 124 kb<br />Stessa Web App + PhoneGap = 240 kb<br />
  45. 45. Applicazioni già sviluppate<br />
  46. 46. Applicazioni già sviluppate<br />http://phonegap.com/projects<br />
  47. 47. Vantaggi di PhoneGap<br />Sviluppo con semplice conoscenza di HTML, CSS, JavaScript<br />Creazione di Applicazioni Native!!!<br />Multi Piattaforma!!!!<br />Applicazioni accettate dall’Apple AppStore!!!! ;-)<br />
  48. 48. Svantaggi di PhoneGap<br />Documentazione in costruzione<br />Non realmente all’altezza per applicazioni con uso massivo di grafica (almeno per adesso).<br />
  49. 49. … è l’unico runtime? No, ma…<br />PhoneGap<br />Nokia WRT<br />Appcelerator<br />Nokia S60<br />iPhone<br />Android<br />Blackberry<br />Windows Mobile<br />
  50. 50. PhoneGap<br />Demo<br />
  51. 51. Domande??Tutto chiaro??<br />
  52. 52. Ciao, alla prossima!! ;-)<br />Fabio Franzini<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />

×