whymca - sviluppare applicazioni mobile native in html e javascript
DESCRIPTION
TRANSCRIPT
![Page 1: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/1.jpg)
Sviluppare Applicazioni Mobile Native in HTML e JavaScript
Fabio FranziniConsulente, Programmatore e
MCT Trainer su piattaforma .NET
@franzinifabio
![Page 2: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/2.jpg)
Evoluzione del Web per Mobile
• Evoluzione del “Mobile Web”• Albori: WAP, cHTML, mHTML• Phone’s WEB Browser• WAP: puah!!
![Page 3: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/3.jpg)
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
![Page 4: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/4.jpg)
Sviluppare oggi per il Mobile Web• Powerfull Web Browser• Web 2.0• Social• Geo-localization• Ecc..
![Page 5: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/5.jpg)
Vantaggi
• HTML• CSS• JavaScript• Deploy semplice• Ecc..
![Page 6: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/6.jpg)
Limitazioni
• Web Browser??• Sandbox indipendente dal resto del OS
![Page 7: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/7.jpg)
Soluzione
Native App!!!
![Page 8: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/8.jpg)
Native App e App. Store
![Page 9: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/9.jpg)
Ok, ma…
• iPhone: Objective-C• Android, Blackberry: Java• Nokia Symbian: C / JavaScript• Sony Ericsson: Java• Window Mobile: .NET / C++ / VB
![Page 10: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/10.jpg)
…quindi!!
![Page 11: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/11.jpg)
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
![Page 12: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/12.jpg)
Ok, capito!! Ma allora?
![Page 13: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/13.jpg)
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.
![Page 14: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/14.jpg)
Un esempio?
PhoneGap
![Page 15: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/15.jpg)
Cos’è PhoneGap
PhoneGap è uno strumento di sviluppo open source, realizzato da Nitobi, per la costruzione veloce e
facile di Applicazioni Mobile con JavaScript
![Page 16: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/16.jpg)
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
![Page 17: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/17.jpg)
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.
![Page 18: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/18.jpg)
PhoneGap in dettaglio
![Page 19: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/19.jpg)
Piattaforme supportate
• iPhone / iPad??• Android• Blackberry• Palm ~• Symbian ~• Windows Mobile ~
![Page 20: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/20.jpg)
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.”
![Page 21: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/21.jpg)
Features
• Accelerometro• Audio• Camera• Contacts• File IO• SMS• Settings
![Page 22: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/22.jpg)
Features Supportate
![Page 23: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/23.jpg)
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();
![Page 24: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/24.jpg)
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); }
![Page 25: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/25.jpg)
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); }
![Page 26: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/26.jpg)
Framework di supporto?
• XUI• jQuery• jQuery UI• jQTouch• QuelloCheVolete.js
![Page 27: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/27.jpg)
Alcuni numeri
• iPhone App = 364 kb• Html, CSS, JavaScript, Media = 124 kb• Stessa Web App + PhoneGap = 240 kb
![Page 28: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/28.jpg)
Applicazioni già sviluppate
![Page 29: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/29.jpg)
Applicazioni già sviluppate
http://phonegap.com/projects
![Page 30: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/30.jpg)
Vantaggi di PhoneGap
• Sviluppo con semplice conoscenza di HTML, CSS, JavaScript
• Creazione di Applicazioni Native!!!• Multi Piattaforma!!!!• Applicazioni accettate dall’Apple AppStore!!!! ;-)
![Page 31: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/31.jpg)
Svantaggi di PhoneGap
• Documentazione in costruzione• Non realmente all’altezza per applicazioni con uso
massivo di grafica (almeno per adesso).
![Page 32: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/32.jpg)
è l’unico runtime? No, ma…• PhoneGap
• Nokia WRT
• Appcelerator
Nokia S60iPhoneAndroidBlackberryWindows Mobile
![Page 33: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/33.jpg)
PhoneGap
Demo
![Page 34: Whymca - Sviluppare applicazioni mobile native in html e javascript](https://reader034.vdocuments.mx/reader034/viewer/2022051322/5451ce64af79590d428b9870/html5/thumbnails/34.jpg)
Domande??Tutto chiaro??