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