Fabio Franzini Sviluppare Applicazioni Mobile Native in HTML e JavaScript

Presentazioni Fabio Franzini Consulente, Programmatore e MCT Trainer su piattaforma.NET

START!!

Background Evoluzione del Mobile Web Albori: WAP, cHTML, mHTML Phones WEB Browser WAP: puah!!

WAP, cHTML, mHTML

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

Smart Phones

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

Vantaggi HTML CSS JavaScript Deploy semplice Ecc..

Limitazioni Web Browser?? Sandbox indipendente dal resto del OS

Soluzione Native App!!!

Native App e App. Store

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

…quindi!!

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

Ok, capito!! Ma allora?

Confusi??

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.

Un esempio? PhoneGap

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

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

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.

PhoneGap in dettaglio

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

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

Features Accelerometro Audio Camera Contacts File IO SMS Settings

Features Supportate

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

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

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

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

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

Applicazioni già sviluppate

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

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

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

PhoneGap Demo

Domande?? Tutto chiaro??

Ciao, alla prossima!! ;-) Fabio Franzini