04/01/2016

1

CROSS PLATFORM APP

CON HTML, CSS E JS

Framework Cordova

Overview1

04/01/2016

2

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 Jsnotification.alert, la quale verrà poi declinata da Cordova per mostrare la MessageBox di Windows Phone, di iOS o di Android.

04/01/2016

3

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

Configurazione dell’ambiente2

04/01/2016

4

Cosa installare? Ambiente di sviluppo

� Apache anthttp://mirror.nohup.it/apache//ant/binaries/apache-ant-1.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 jshttps://nodejs.org/en/download/

� Client Githttp://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

04/01/2016

5

Cosa installare? Libreria android

� Android sdkhttp://dl.google.com/android/installer_r24.4.1-windows.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

04/01/2016

6

Strumenti per coding e debbugging

� Le applicazioni sono scritte in html/css/javascript� Coding:

� Non è necessario quindi utilizzare uno specifico editoro 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()

04/01/2016

7

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

La prima app3

04/01/2016

8

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 pluginutilizzati nella nostra applicazione.

04/01/2016

9

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 edun’altra può causare problemi di memoria o soffrire diun’interazione lenta

� Una delle pratiche migliori è quindi quella di cercare dimantenere quante più funzionalità possibili in un’unicapagina e di usare le funzioni di javascript per caricaredinamicamente le informazioni , aggiungere e rimuovere viste (single-page architecture )

� Si può usare la funzione document.getElementById() di Javascript o la notazione $() di jQuery.

04/01/2016

10

Build dell’app

� Una volta che l’applicazione è stata creata deve essereincorporata in un applicazione nativa per poter essereeseguita su un device. Per costruire l’app, il contenutoweb (HTML, CSS, JavaScript, ..) deve quindi essereaggiunto ad un progetto specifico per le caratteristichedella piattaforma di destinazione.

� Ogni piattaforma (android, ios, ..) possiede strumentispecifici da utilizzare per poter effettuare questaoperazione.

� Il progetto Cordova ha messo ha disposizione un serviziochiamato PhoneGap Build (basato su cloud) per garantire l’accesso a tutti gli strumenti e le librerienecessarie

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.

04/01/2016

11

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 dim1024x1024 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)

04/01/2016

12

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

04/01/2016

13

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.

04/01/2016

14

Stati di un’applicazione

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 applicazione4

04/01/2016

15

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 digitocordova plugin add https://github.com/Telerik-

Verified-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);

04/01/2016

16

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

� 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)

ON OFF

04/01/2016

17

Index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content="user-scalable=no, initial-

scale=1, maximum-scale=1, minimum-scale=1, width=device-

width, height=device-height, target-densitydpi=device-

dpi" />

<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>

04/01/2016

18

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();

}

}

04/01/2016

19

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; }

04/01/2016

20

Gestione di eventi5

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/events/events.html

04/01/2016

21

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 battery-status)

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 }

04/01/2016

22

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(){

}

Plugin6

04/01/2016

23

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:

� Accelerometer

� Camera

� Notification

� La lista completa si trova :

� http://cordova.apache.org/docs/en/latest/cordova/plugins/pluginapis.html

� File

� Geolocation

� Media

04/01/2016

24

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 repositoryin cui si trova il plugin:

cordova plugin add repository

Uso di bootstrap/jquery mobile7

04/01/2016

25

� 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 totell 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" />

04/01/2016

26

� 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.