Fabio Franzini Sviluppare Applicazioni Mobile Native in HTML e JavaScript.

Presentazione sul tema: "Fabio Franzini Sviluppare Applicazioni Mobile Native in HTML e JavaScript."— Transcript della presentazione:

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

15 …quindi!!

16 Native App VS Web App Native AppWeb App Cross Platform?No, mah…Si Accesso alle API del SO?SiNo Store di dati?SiNi Connessione dati richiesta?NoSi Velocita di esecuzione?OttimaBuona Tecnologia di sviluppo?Objective C, Java, C++, ecc.. HTML, CSS, JavaScript Update installabili?SiNo

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, limplementazione sarà di sviluppata in: Objective C, Java e così via; Limplementazione è 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 linterfaccia verso lutente.

24 PhoneGap in dettaglio

25

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

27 iPhone??? http://bit.ly/7wmgsv The recent changes to Apples 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

30 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();

31 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); }

32 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); }

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

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

35 Applicazioni già sviluppate

36 http://phonegap.com/projects

37 Vantaggi di PhoneGap Sviluppo con semplice conoscenza di HTML, CSS, JavaScript Creazione di Applicazioni Native!!! Multi Piattaforma!!!! Applicazioni accettate dallApple AppStore!!!! ;-)

38 Svantaggi di PhoneGap Documentazione in costruzione Non realmente allaltezza per applicazioni con uso massivo di grafica (almeno per adesso).

39 … è lunico runtime? No, ma… PhoneGap Nokia WRT Appcelerator Nokia S60 iPhone Android Blackberry Windows Mobile

40 PhoneGap Demo

41 Domande?? Tutto chiaro??

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