Sviluppare Applicazioni Mobile Native
in HTML e JavaScript
Fabio Franzini
Presentazioni
 Fabio Franzini
 Consulente, Programmatore e MCT Trainer su piattaforma
.NET
 www.fabiofranzini.com
 [email protected]
 @franzinifabio
START!!
Background
 Evoluzione del “Mobile Web”
 Albori: WAP, cHTML, mHTML
 Phone’s 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 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?
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,
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
• 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
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 S60
iPhone
Android
Blackberry
Windows Mobile
PhoneGap
Demo
Domande??
Tutto chiaro??
Ciao, alla prossima!! ;-)
Fabio Franzini
www.fabiofranzini.com
[email protected]
@franzinifabio