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

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

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

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

15. …quindi!!

16. Native App VS Web App

17. Ok, capito!! Ma allora?

18. Confusi??

19. 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.

20. Un esempio? PhoneGap

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

22. 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

23. 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.

24. PhoneGap in dettaglio

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

27. 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.”

28. Features Accelerometro Audio Camera Contacts File IO SMS Settings

29. Features Supportate

31. document.getElementById("platform").innerHTML = device.platform;

32. Alert

33. navigator.notification.alert(“Mio Messaggio", “Attenzione", "Ok");

34. Vibration

35. navigator.notification.vibrate(1000);

36. Media

37. var media = Media.new("hammer_time.wav", win, fail);

38. media.play();

40. function getLocation() { var win = function(p) { alert( p.coords.latitude + " " + p.coords.longitude ); }; var fail = function(){ //default query }; navigator.geolocation.getCurrentPosition(win, fail); }

42. 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); }

43. Framework di supporto? XUI jQuery jQuery UI jQTouch QuelloCheVolete.js

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

45. Applicazioni già sviluppate

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

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

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

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

50. PhoneGap Demo

51. Domande??Tutto chiaro??

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