CROSS PLATFORM APP CON HTML, CSS E JS

Transcript

1 CROSS PLATFORM APP CON HTML, CSS E JS Framework Cordova 1 Overview 1

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

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 2 Configurazione dell ambiente 3

4 Cosa installare? Ambiente di sviluppo Apache ant 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 Client Git 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

5 Cosa installare? Libreria android Android sdk 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 >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

6 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

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 3 La prima app 7

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 plugin utilizzati nella nostra applicazione. 8

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

10 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

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 dim 1024x1024 px e attraverso il sito 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

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 12

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 Inizializzazione Preparazione Descrizione È 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(). 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

14 Stati di un applicazione Fase Disponibilità Avvio Descrizione 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. 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. 4 Progettare un applicazione 14

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 digito cordova plugin add 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); 15

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

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

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

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

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

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

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(){ } 6 Plugin 22

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: File Accelerometer Geolocation Camera Media Notification La lista completa si trova : ns/pluginapis.html 23

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

25 1 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 <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" /> Keyboard: Supported on ios & BlackBerry (QNX) 1 <input style="width: 400px;" type=" " value=" " /> 25

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