phonegap new

04/01/2016
CROSS PLATFORM APP
CON HTML, CSS E JS
Framework Cordova
1
Overview
1
04/01/2016
Che cos’è?
PhoneGap/Cordova è un framework che consente di
sviluppare delle applicazioni cross-platform, in grado di
girare su qualunque dispositivo mobile, utilizzando
HTML5, CSS3 e Javascript.
E’ una sorta di wrapper (contenitore) per applicazioni
Web. L’interfaccia grafica dell’app è costituita da una
Webview che occupa l’intero schermo del device,
all’interno della quale viene visualizzato l’HTML/CSS ed
eseguito il codice JavaScript.
Come funziona?
Cordova espone, tramite una libreria Js, una serie di
funzioni attraverso le quali è possibile accedere alle API
che interfacciano l’applicazione Web con le funzionalità
della piattaforma ospite (es. geolocalizzazione, sensori,..)
Cordova si occupa quindi di mappare queste funzioni
sulle chiamate native della piattaforma specifica. Ad
esempio, per mostrare un alert si usa la funzione Js
notification.alert, la quale verrà poi declinata da
Cordova per mostrare la MessageBox di Windows
Phone, di iOS o di Android.
2
04/01/2016
Come funziona?
Per questo motivo un progetto Cordova non è una generica
applicazione web, ma viene creato un progetto specifico per
ogni piattaforma a partire da una cartella comune che contiene
il codice html/js/css.
All’avvio di un’applicazione, l’homepage (file html) è caricata
all’interno della webview a cui, successivamente, sarà ceduto
il controllo. In questo modo l’utente può interagire con i
contenuti dell’app stessa.
Gli eventi generati dall’interazione saranno gestiti con codice
javascript (file js) che potrebbe, ad esempio,
visualizzare/nascondere contenuti, riprodurre file multimediali,
effettuare calcoli,..
Il look and feel dell'app è determinato dalle impostazioni
contenute nel file css
2
Configurazione dell’ambiente
3
04/01/2016
Cosa installare? Ambiente di sviluppo
Apache ant
http://mirror.nohup.it/apache//ant/binaries/apache-ant1.9.6-bin.zip
Impostare la variabile d’ambiente relativa ad ANT
Andare su Sistema->Impostazioni di Sistema
Avanzate->Avanzate->Variabili d’ambiente
Aggiungere la variabile ANT_HOME e impostare come
valore la directory di installazione di ANT
Aggiungere alla variabile PATH il valore
%ANT_HOME%\bin
Cosa installare? Ambiente di sviluppo
Node js
https://nodejs.org/en/download/
Client Git
http://git-scm.com/download/win
Durante il processo di installazione selezionare
l’opzione ‘use git from the windows command prompt’
Cordova
Aprire il prompt dei comandi come amministratore e
digitare:
npm install -g cordova
4
04/01/2016
Cosa installare? Libreria android
Android sdk
http://dl.google.com/android/installer_r24.4.1windows.exe
Attraverso lo strumento sdk manager appena installato
dobbiamo aggiungere le librerie android necessarie :
Tools->Android SDK Platform tools + Android SDK
Build tools
Android 6.0->Documentation + SDK Platform +
Source
Android 5.1.1->Documentation + SDK Platform +
Source
Extras-> Android Support Library + USB Driver +
Android Support Repository
Cosa installare? Libreria android
Impostare le variabili d’ambiente relative all’SDK
Andare su Sistema->Impostazioni di Sistema
Avanzate->Avanzate->Variabili d’ambiente
Aggiungere la variabile ANDROID_HOME e impostare
come valore la directory di installazione dell’SDK
Aggiungere alla variabile PATH i valori:
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
Verificare di aver già installato la jdk e controllare la
presenza della relativa variabile d’ambiente JAVA_HOME
5
04/01/2016
Strumenti per coding e debbugging
Le applicazioni sono scritte in html/css/javascript
Coding:
Non è necessario quindi utilizzare uno specifico editor
o ide
Scegliete l’ambiente che già utilizzate per lo sviluppo
web (es. notepad/ brackets/ netBeans)
Debugging:
Utilizziamo un emulatore browser-based chiamato
Ripple, che ci permette di effettuare un test iniziale
dell’app senza doverla istallare su un dispositivo reale.
È un plugin eseguito in chrome, dove è possibile
utilizzare gli strumenti per gli sviluppatori di chrome
(tasto destro-> ispeziona elemento)
Strumenti per il debugging
Attraverso gli strumenti per sviluppatori è
possibile:
Modificare dom e css a runtime (attraverso la
scheda elements)
Debuggare javascript attraverso la scheda sources
attraverso l’uso di breakpoint
Utilizzare la scheda console in combinazione con
le istruzioni console.log()
6
04/01/2016
Framework grafici e architetturali
In combinazione con Cordova è possibile utilizzare
alcuni framework:
Per realizzare una migliore interfaccia grafica
Es. bootstrap
Jquery mobile
Per costruire l’app secondo l’architettura MVC
Angular js
Ionic
3
La prima app
7
04/01/2016
Creazione del progetto
Da linea di comando, con i privilegi di amministratore,
spostarsi nella cartella dove intendono creare i sorgenti e
digitare:
cordova create hello com.example.hello HelloWorld
Comando: create
Primo parametro: hello
Specifica il nome della directory in cui sarà
contenuto il progetto
Secondo argomento: it.example.hello
Specifica l’id dell’app nel formato paese.autore.app
Terzo argomento: HelloWord
Specifica il nome dell’app
Struttura del progetto creato
Il progetto creato possiede questa struttura:
La directory platforms contiene lo scheletro dei
progetti nativi per ciascuna piattaforma mobile
La directory plugins contiene gli eventuali plugin
utilizzati nella nostra applicazione.
8
04/01/2016
Struttura del progetto creato
Il file config.xml contiene le informazioni dell’app come
l’id, il nome definiti durante la creazione
La cartella www è la nostra directory di lavoro e
contiene inizialmente un file html, uno css e uno
javascript che costituiscono il progetto di default
Index.html -> è la pagina che viene caricata all’avvio
Index.css -> è il foglio di stile di default che viene
utilizzato
Index.js -> è il file che contiene tutti gli script che
realizzano la logica applicativa
Architettura single-page application
Un solo file html contiene il codice dell’intera app.
In alcuni dispositivi infatti il link tra una pagina ed
un’altra può causare problemi di memoria o soffrire di
un’interazione lenta
Una delle pratiche migliori è quindi quella di cercare di
mantenere quante più funzionalità possibili in un’unica
pagina e di usare le funzioni di javascript per caricare
dinamicamente le informazioni , aggiungere e
rimuovere viste (single-page architecture )
Si può usare la funzione document.getElementById()
di Javascript o la notazione $() di jQuery.
9
04/01/2016
Build dell’app
Una volta che l’applicazione è stata creata deve essere
incorporata in un applicazione nativa per poter essere
eseguita su un device. Per costruire l’app, il contenuto
web (HTML, CSS, JavaScript, ..) deve quindi essere
aggiunto ad un progetto specifico per le caratteristiche
della piattaforma di destinazione.
Ogni piattaforma (android, ios, ..) possiede strumenti
specifici da utilizzare per poter effettuare questa
operazione.
Il progetto Cordova ha messo ha disposizione un servizio
chiamato PhoneGap Build (basato su cloud) per
garantire l’accesso a tutti gli strumenti e le librerie
necessarie
Build per android
Posizionarsi con il prompt nella cartella del progetto e
digitare:
cordova platform add android
cordova build android
I seguenti comandi aggiungono una cartella android,
all’interno della cartella platform, che contiene il
progetto Android generato da quello di partenza in
contenuto nella cartella www.
10
04/01/2016
Icona app
Una volta che l’applicazione sarà installata sul
dispositivo, l’icona utilizzata è quella di default di Cordova
Per sostituirla scegliete una nuova icona di dim
1024x1024 px e attraverso il sito
www.makeappicon.com generate il set di icone per
android che andranno poi sostituite a quelle che si
trovano all’interno delle cartelle «Drawable» in
platforms\android\res
Splash screen
Uno splash screen è l'immagine che viene visualizzata
quando un'applicazione è in fase di caricamento.
Gli splash screen delle applicazioni mobile occupano
tutto lo schermo del dispositivo.
E’ possibile modificare lo plash screen di default
sostituendo le immagini che si trovano nelle cartelle
«Drawable» in platforms\android\res (mantenendo le
dimensioni)
11
04/01/2016
Emulazione dell’app con Ripple
Trasferire la directory dell’app su un server http (si può
utilizzare il server apache contenuto nell’installazione di
easyphp)
Aprire il file index.html (contenuto in www) con chrome
Cliccare sull’icona di Ripple ed attivarlo
Esecuzione dell’app su device
Collegare un dispositivo android al pc tramite cavo usb
Attivare la modalità debug usb sul dispositivo
Installare su pc i driver del dispositivo
Digitare sul prompt il comando
cordova run android –-device
Accettare la richiesta di autorizzazione che compare sul
telefono e attendere l’avvio dell’app
12
04/01/2016
Codice di default
L’app appena creata ed eseguita è quella di default ( un
po’ come l’hello world di c e java)
Per comprenderne il funzionamento specifico si
rimanda al codice commentato (struttura app)
Concettualmente si potranno distinguere alcune fasi
durante l’esecuzione di un’app:
Inizializzazione (initialize)
Preparazione (bind)
Disponibilità (deviceReady)
Avvio attività specifiche dell’app
Stati di un’applicazione
Fase
Descrizione
Inizializzazione
È la fase nel corso della quale vengono effettuate tutte
le operazioni preliminari come ad esempio
l’assegnamento di variabili globali. Nel nostro caso
l’unica attività che eseguiamo è l’invocazione della
fase successiva tramite il metodo bind().
Preparazione
In questa fase vengono effettuate le attività di
preparazione del funzionamento dell’applicazione
come ad esempio la definizione dei gestori di eventi.
Nel nostro esempio definiamo il gestore dell’evento
deviceready assegnandogli il metodo omonimo della
nostra app. L’evento deviceready è fondamentale nello
sviluppo di applicazioni Cordova: il verificarsi di questo
evento garantisce che il framework è stato
correttamente caricato e le API per interfacciarsi al
dispositivo sono pronte per essere utilizzate.
13
04/01/2016
Stati di un’applicazione
4
Fase
Descrizione
Disponibilità
Questa fase si verifica quando le API mobile sono
disponibili e pronte all’uso. Da qui in poi possiamo
avviare le attività specifiche della nostra app. Nel
codice d’esempio ci limitiamo a chiamare il
metodo receivedEvent () della nostra app.
Avvio
In questa fase l’applicazione interagisce con l’utente.
Nel nostro caso ci limitiamo a nascondere il
messaggio Connecting to Device e a rendere visibile il
messaggio Device is Ready.
Progettare un applicazione
14
04/01/2016
Applicazione torcia
Per creare una semplice applicazione, come la torcia, è
necessario tenere a mente tre diversi aspetti da
approfondire
1. Funzionalità del dispositivo ( con quali funzionalità
devo interfacciarmi? Sono supportate dalla piattaforma
target?)
2. Interazione con l’utente (quali eventi sarà
necessario gestire?)
3. Interfaccia grafica ( realizzazione mockup + scelta
eventuale framework)
Funzionalità
Per realizzare questa applicazione devo accedere alle
funzionalità del flash della fotocamera
Mi sposto con il prompt dei comandi nella directory
dell’app e digito
cordova plugin add https://github.com/TelerikVerified-Plugins/Flashlight
Posso ora utilizzare le seguenti istruzioni javascript per
accendere o spegnere la luce del flash:
window.plugins.flashlight.switchOn(onSuccess,
onError);
window.plugins.flashlight.switchOff(onSuccess,
onError);
15
04/01/2016
Gestione eventi
Per realizzare le funzionalità di questa applicazione sarà
necessario gestire 2 eventi:
DeviceReady:
come abbiamo visto nell’app di default, è obbligatorio
gestire quest’evento. Il codice che determina le
funzionalità specifiche dell’app può essere eseguito
solo dopo che quest’evento si è verificato
Click:
L’utente interagisce con questa applicazione
cliccando su un pulsante on/off. L’evento click deve
essere catturato e deve attivare o disattivare la luce
del flash
Interfaccia grafica
Mock-up
ON
OFF
Per la realizzazione di un mockup interattivo si può
utilizzare l’app POP presente sul playStore
Implementiamo poi l’interfaccia senza l’uso di
framework (v1) e successivamente vedremmo
come fare per integrare un framework come
bootstrap (v2)
16
04/01/2016
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initialscale=1, maximum-scale=1, minimum-scale=1, width=devicewidth, height=device-height, target-densitydpi=devicedpi" />
<link rel="stylesheet" type="text/css"
href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript"
src="js/index.js"></script>
<title>Applicazione Torcia</title>
</head>
Index.html
<body>
<div class="header">
<h3>MyTorcia</h3>
</div>
<div class="content“>
<div id="torcia">
<button id="onOff" value="ON">ON</button>
</div>
<div id="log">
</div>
</div>
<div class="footer">
<p>L'applicazione permette di attivare/disattivare
</br> la luce del flash premendo il bottone</p>
</div>
</body>
</html>
17
04/01/2016
Index.js
document.addEventListener('deviceready', dispositivoPronto,
false);
function dispositivoPronto() {
addEventButton();
}
function addEventButton(){
document.getElementById("onOff").addEventListener("click",
onOff);
}
function onOff(){
var bottone=document.getElementById("onOff");
var log=document.getElementById("log");
log.style.visibility="visible";
if(bottone.value=="ON"){
bottone.setAttribute("value","OFF")
bottone.innerHTML="OFF";
log.innerHTML="torcia accesa";
Index.js
if(bottone.value=="ON"){
bottone.setAttribute("value","OFF")
bottone.innerHTML="OFF";
log.innerHTML="torcia accesa";
window.plugins.flashlight.switchOn();
}
else{
bottone.setAttribute("value","ON");
bottone.innerHTML="ON";
log.innerHTML="torcia spenta";
window.plugins.flashlight.switchOff();
}
}
18
04/01/2016
Index.css
body {
background-color: #b0c4de;
font-family: Arial, Helvetica, sans-serif;
width:100%;
height:100%;
min-height:100%; }
.header{
border-bottom:2px dotted #333;
text-align:center;
width:100%;
top:0; }
.content{
text-align: center;
width:100%;
padding:0;
margin-top:50px; }
Index.css
.footer{
border-top:2px dotted #333;
text-align:center;
width:100%;
position: absolute;
bottom: 0; }
#onOff{
width: 200px;
height: 200px; }
#log{
border:1px dotted #333;
width:80%;
margin: 50px auto;
padding: 10px;
visibility: hidden; }
19
04/01/2016
5
Gestione di eventi
Eventi
Un evento è un’azione che cordova può rilevare.
Nella programmazione web tradizionale ogni elemento di
una pagina può generare uno specifico evento che può
essere gestito con javascript (click su un bottone, un
immagine in caricamento, la selezione di un campo di
una form,..)
Tutti questi eventi sono disponibili anche nella
programmazione di app insieme ad altri che sono
specifici dell’ambiente mobile perché legati alle
funzionalità dei dispositivi
L’elenco di questi eventi si trova:
http://cordova.apache.org/docs/en/latest/cordova/event
s/events.html
20
04/01/2016
Esempio eventi di cordova
deviceready
si attiva quando la webwiew di Cordova è stata
completamente caricata
pause e resume
si attiva quando l’applicazione viene messa in
background/foreground
online/offline
si attiva quando l’applicazione è/non è connessa a
internet (necessità dell’api network-information)
batterystatus / batterycritical
si attiva quando lo stato della batteria cambia o
raggiunge la soglia critica (necessità dell’api batterystatus)
Rilevare e gestire un evento
Per rispondere ad un evento è necessario utilizzare un
event listener
La sintassi da utilizzare è
target.addEventListener(‘tipo’, codice, false);
target -> elemento dom a cui aggiungere il listener
tipo -> evento su cui mettersi in ascolto
codice -> funzione javascript da eseguire quando
l’evento si verifica
Ad esempio, per rilevare l’evento deviceready:
document.addEventListener(“deviceready”, onDeviceReady,
false);
function onDeviceReady() {
// azioni
}
21
04/01/2016
Rilevare e gestire un evento
Tutti gli altri event listener devono essere registrati dentro
alla funzione onDeviceReady(). Ad esempio:
Function onDeviceReady() {
// call the Cordova api
document.addEventListener(“pause”, onPause, false);
document.addEventListener(“resume”, onResume, false);
}
function onPause(){
}
function onResume(){
}
6
Plugin
22
04/01/2016
Plugin Api
Le API sono degli strumenti che permettono
all’applicazione di interfacciarsi con il dispositivo per
utilizzare una delle sue funzionalità native mediante
JavaScript, ignorando i dettagli implementativi di
ciascuna piattaforma mobile.
Un plugin Cordova è un componente software che
consente di mappare una funzione JavaScript ad una
funzionalità nativa.
Esso è costituito da un’unica interfaccia JavaScript e da
tante implementazioni dipendenti dalla specifica
piattaforma mobile.
Se vogliamo implementare una feature che utilizzi un api
dobbiamo prima istallare il relativo plugin e poi utilizzare
imetodi specifici forniti dal plugin stesso
Plugin Api
Per installare un plugin si usa il comando
cordova plugin add cordova-plugin-nomeplugin
Il parametro nomeplugin è specifico per ogni plugin (vedi
link)
Cordova fornisce una suite di JavaScript APIs che
comprendono ad es:
File
Accelerometer
Geolocation
Camera
Media
Notification
La lista completa si trova :
http://cordova.apache.org/docs/en/latest/cordova/plugi
ns/pluginapis.html
23
04/01/2016
Plugin di terze parti
Esistono un buon numero di plugin non ufficiali che
forniscono diverse funzionalità aggiuntive rispetto a
quelle offerte da cordova
Sono reperibili un po’ ovunque su internet ed in
particolare:
su gitHub (nei repositori dei vari sviluppatori)
https://github.com/
su http://plugins.telerik.com/cordova
Per installare un plugin non ufficiale si usa lo stesso
comando passando come argomento l’url del repository
in cui si trova il plugin:
cordova plugin add repository
7
Uso di bootstrap/jquery mobile
24
04/01/2016
Managing the Keyboard
Have you ever experienced an an app or web site on a mobile device where you have to enter numeric data, and the default
keyboard pops up. Before entering any text, you have you switch to the numeric input. Repeat that for 100 form inputs, and try to
tell me that you aren’t frustrated… Luckily, you can manage the keyboard in mobile HTML experiences very easily using HTML5
Form elements.
Default Keyboard: Supported Everywhere
1
<input style="width: 400px;" type="text" value="default" />
Numeric Keyboard: Supported on iOS, Android & BlackBerry (QNX)
1
<input style="width: 400px;" type="number" value="numeric" />
Numeric Keyboard: Supported on iOS
1
<input style="width: 400px;" type="text" pattern="[0-9]*" value="numeric" />
Phone Keyboard: Supported on iOS
1
<input style="width: 400px;" type="tel" value="telephone" />
URL Keyboard: Supported on iOS & BlackBerry (QNX)
1
<input style="width: 400px;" type="url" value="url" />
Email Keyboard: Supported on iOS & BlackBerry (QNX)
1
<input style="width: 400px;" type="email" value="email" />
25
04/01/2016
Disable User Selection
One way to easily determine that an application is really HTML is that everything on the UI is selectable and can be
copied/pasted – Every single piece of text, every image, every link, etc… Not only is this annoying in some scenarios (and
very useful in others), but there may be instances where you explicitly don’t want the user to be able to easily copy/paste
content. You can disable user selection by applying the following CSS styles. Note: This works on iOS, and partially works on BlackBerry/QNX for
the PlayBook. It did not work on Android in my testing.
1
2
3
4
5
6
<style>
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
The -webkit-touch-callout css rule disables the callout, and the -webkit-user-select rule disables the ability to select content within an element. More
details on webkit css rules from the Mobile Safari CSS Reference. More detail about disabling copy/paste on iOS is available at StackOverflow.com.
Disable Zoom
If you want your content to feel like an app instead of a web page, then I strongly suggest that you disable gestures for pinch/zoom and panning for all use
cases where pinch/zoom is not required. The easiest way to do this is to set the viewport size to device-width and and disable user scaling through the
HTML metadata tag.
1
<meta name="viewport" content="width=device-width, user-scalable=no" />
You can read further detail on the viewport metadata tag from the Apple Safari HTML Reference, or the Mozilla reference.
26