Whymca - Sviluppare applicazioni mobile native in html e javascript

2,642 views

Published on

Published in: Technology
  • Be the first to comment

Whymca - Sviluppare applicazioni mobile native in html e javascript

  1. 1. Sviluppare Applicazioni Mobile Native in HTML e JavaScript<br />Fabio Franzini<br />Consulente, Programmatore e MCT Trainer su piattaforma .NET<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />
  2. 2. Evoluzione del Web per Mobile<br />Evoluzione del “Mobile Web”<br />Albori: WAP, cHTML, mHTML<br />Phone’s WEB Browser<br />WAP: puah!!<br />
  3. 3. 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 />
  4. 4. Sviluppare oggi per il Mobile Web<br />Powerfull Web Browser<br />Web 2.0<br />Social<br />Geo-localization<br />Ecc..<br />
  5. 5. Vantaggi<br />HTML<br />CSS<br />JavaScript<br />Deploy semplice<br />Ecc..<br />
  6. 6. Limitazioni<br /><ul><li>Web Browser??
  7. 7. Sandbox indipendente dal resto del OS</li></li></ul><li>Soluzione<br />Native App!!!<br />
  8. 8. Native App e App. Store<br />
  9. 9. 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 />
  10. 10. …quindi!!<br />
  11. 11. Native App VS Web App<br />
  12. 12. Ok, capito!! Ma allora?<br />
  13. 13. 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 supportoalle API del telefono.<br />
  14. 14. Un esempio?<br />PhoneGap<br />
  15. 15. Cos’è PhoneGap<br />PhoneGap è uno strumento di sviluppo open source, realizzato da Nitobi, per la costruzione veloce e facile di Applicazioni Mobile con JavaScript<br />
  16. 16. 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 rendedisponibilitramite JavaScript<br />
  17. 17. 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 />
  18. 18. PhoneGap in dettaglio<br />
  19. 19. Piattaforme supportate<br />iPhone / iPad??<br />Android<br />Blackberry<br />Palm ~<br />Symbian ~<br />Windows Mobile ~<br />
  20. 20. 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 />
  21. 21. Features<br />Accelerometro<br />Audio<br />Camera<br />Contacts<br />File IO<br />SMS<br />Settings<br />
  22. 22. Features Supportate<br />
  23. 23. Esampio di API 1/3<br /><ul><li>Platform
  24. 24. document.getElementById("platform").innerHTML = device.platform;
  25. 25. Alert
  26. 26. navigator.notification.alert(“Mio Messaggio", “Attenzione", "Ok");
  27. 27. Vibration
  28. 28. navigator.notification.vibrate(1000);
  29. 29. Media
  30. 30. var media = Media.new("hammer_time.wav", win, fail);
  31. 31. media.play();
  32. 32. media.stop();</li></li></ul><li>Esempio di API 2/3<br />GetCurrentPosition<br />function getLocation() <br />{<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 />
  33. 33. Esempio di API 3/3<br />GetCurrentAcceleration<br />function getAccel() <br />{ <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 />
  34. 34. Framework di supporto?<br />XUI<br />jQuery<br />jQuery UI<br />jQTouch<br />QuelloCheVolete.js<br />
  35. 35. Alcuni numeri<br />iPhone App = 364 kb<br />Html, CSS, JavaScript, Media = 124 kb<br />Stessa Web App + PhoneGap = 240 kb<br />
  36. 36. Applicazioni già sviluppate<br />
  37. 37. Applicazioni già sviluppate<br />http://phonegap.com/projects<br />
  38. 38. 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 />
  39. 39. Svantaggi di PhoneGap<br />Documentazione in costruzione<br />Non realmente all’altezza per applicazioni con uso massivo di grafica (almeno per adesso).<br />
  40. 40. è 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 />
  41. 41. PhoneGap<br />Demo<br />
  42. 42. Domande??Tuttochiaro??<br />
  43. 43. Ciao, allaprossima!! ;-)<br />Fabio Franzini<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />

×