Post on 30-Oct-2014
description
Sviluppare Applicazioni Mobile Native in HTML e JavaScript
Fabio FranziniConsulente, Programmatore e
MCT Trainer su piattaforma .NET
www.fabiofranzini.comfabio@fabiofranzini.com
@franzinifabio
Evoluzione del Web per Mobile
• Evoluzione del “Mobile Web”• Albori: WAP, cHTML, mHTML• Phone’s WEB Browser• WAP: puah!!
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
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 App Web App
Cross Platform? No, mah… Si
Accesso alle API del SO? Si No
Store di dati? Si Ni
Connessione dati richiesta?
No Si
Velocita’ di esecuzione? Ottima Buona
Tecnologia di sviluppo? Objective C, Java, C++, ecc..
HTML, CSS, JavaScript
Update installabili? Si No
Ok, capito!! Ma allora?
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 open source, realizzato da Nitobi, 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, 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.
PhoneGap in dettaglio
Piattaforme supportate
• iPhone / iPad??• Android• Blackberry• Palm ~• Symbian ~• Windows Mobile ~
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.”
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
GetCurrentPositionfunction 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
GetCurrentAccelerationfunction 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
Applicazioni già sviluppate
http://phonegap.com/projects
Vantaggi di PhoneGap
• Sviluppo con semplice conoscenza di HTML, CSS, JavaScript
• Creazione di Applicazioni Native!!!• Multi Piattaforma!!!!• Applicazioni accettate dall’Apple AppStore!!!! ;-)
Svantaggi di PhoneGap
• Documentazione in costruzione• Non realmente all’altezza per applicazioni con uso
massivo di grafica (almeno per adesso).
è l’unico runtime? No, ma…• PhoneGap
• Nokia WRT
• Appcelerator
Nokia S60iPhoneAndroidBlackberryWindows Mobile
PhoneGap
Demo
Domande??Tutto chiaro??
Ciao, alla prossima!! ;-)
Fabio Franziniwww.fabiofranzini.com
fabio@fabiofranzini.com@franzinifabio