Sviluppare Applicazioni Mobile Native in HTML e
Download
Report
Transcript Sviluppare Applicazioni Mobile Native in HTML e
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