Tutorial Apache Cordova: sviluppo di applicazioni mobili con Cordova

Le applicazioni mobili si stanno insinuando ovunque, a partire da smartphone e tablet, fino agli smartwatch, e presto si troveranno anche in altri dispositivi indossabili. Tuttavia, lo sviluppo per ciascuna piattaforma mobile separata può essere un compito esauriente, soprattutto se le tue risorse sono limitate o se sei un singolo sviluppatore piuttosto che una società di sviluppo di app mobili.

È qui che diventare uno sviluppatore Apache Cordova esperto può tornare utile fornendo un modo per sviluppare applicazioni mobili utilizzando tecnologie Web standard: HTML5, CSS3 e JavaScript.

Nel 2009, una startup chiamata Nitobi ha creato PhoneGap, un'API open source per l'accesso a risorse mobili native, con l'obiettivo di consentire agli sviluppatori di creare applicazioni mobili utilizzando tecnologie web standard. Nella visione di Nitobi, la maggior parte delle applicazioni mobili sarebbe stata presto sviluppata utilizzando PhoneGap, ma gli sviluppatori avrebbero comunque la possibilità di scrivere codice nativo quando necessario, a causa di problemi di prestazioni o della mancanza di un metodo per accedere a hardware specifico.

Cordova PhoneGap?

Non esiste una cosa del genere, davvero. Quello che è successo è che Adobe ha acquisito Nitobi nel 2011 e ha donato il core open source alla Apache Software Foundation, che lo ha rinominato Apache Cordova. Un'analogia comune in cui ti imbatterai spesso è che Cordova sta a PhoneGap come WebKit sta a Chrome o Safari.

Ovviamente, le differenze tra Cordova e PhoneGap all'inizio erano minime. Con il tempo, Adobe PhoneGap ha sviluppato il proprio set di funzionalità proprietarie, mentre Cordova era, ed è tuttora, supportato dalla comunità open source. Questa recensione e tutorial di Apache Cordova esamineranno lo sviluppo dell'app Cordova in modo più dettagliato e, sebbene alcuni di essi possano essere applicati a PhoneGap, questo non dovrebbe essere considerato un tutorial PhoneGap, di per sé .

Capacità di Apache Cordova

In sostanza, Cordova non ha limitazioni in relazione alle applicazioni sviluppate in modo nativo. Quello che ottieni con Cordova è semplicemente un'API JavaScript, che funge da wrapper per il codice nativo ed è coerente su tutti i dispositivi. Puoi considerare Cordova un contenitore di applicazioni con una vista Web, che copre l'intero schermo del dispositivo. La visualizzazione Web utilizzata da Cordova è la stessa visualizzazione Web utilizzata dal sistema operativo nativo. In iOS, questa è la UIWebView di Objective-C predefinita o una classe WKWebView personalizzata; su Android, questo è android.webkit.WebView .

Apache Cordova viene fornito con una serie di plug-in pre-sviluppati che forniscono accesso alla fotocamera del dispositivo, al GPS, al file system, ecc. Con l'evoluzione dei dispositivi mobili, l'aggiunta del supporto per hardware aggiuntivo consiste semplicemente nello sviluppo di nuovi plug-in.

Infine, le applicazioni Cordova si installano proprio come le applicazioni native. Ciò significa che la creazione del codice per iOS produrrà un file IPA, per Android un file APK e la creazione per Windows Phone produrrà un file XAP. Se metti abbastanza impegno nel processo di sviluppo, i tuoi utenti potrebbero non rendersi nemmeno conto che non stanno utilizzando un'applicazione nativa.

Flussi di lavoro di sviluppo di Apache Cordova

Ci sono due percorsi di base che puoi seguire quando sviluppi con Cordova:

• Quando la tua intenzione è quella di distribuire un'applicazione su quante più piattaforme possibili, con poco o nessun sviluppo specifico della piattaforma, dovresti usare il flusso di lavoro multipiattaforma. Lo strumento principale che supporta questo flusso di lavoro è Cordova Command-Line Interface (CLI), che funge da astrazione di livello superiore per la configurazione e la creazione dell'applicazione per piattaforme diverse. Questo è il percorso di sviluppo più comunemente utilizzato.
• Se prevedi di sviluppare la tua applicazione pensando a una piattaforma specifica, dovresti utilizzare il flusso di lavoro centrato sulla piattaforma. In questo modo, sarai in grado di modificare e modificare il tuo codice a un livello inferiore mescolando componenti nativi con componenti Cordova. Anche se è possibile utilizzare questo approccio per lo sviluppo multipiattaforma, il processo sarà più lungo e noioso.

Di solito si consiglia di iniziare con il flusso di lavoro di sviluppo multipiattaforma, poiché il passaggio allo sviluppo incentrato sulla piattaforma è abbastanza semplice. Tuttavia, se inizi inizialmente con il flusso di lavoro incentrato sulla piattaforma, non sarai in grado di passare allo sviluppo multipiattaforma poiché l'interfaccia a riga di comando sovrascriverà le tue personalizzazioni una volta eseguito il processo di compilazione.

Prerequisiti e installazione Cordova

Prima di installare ed eseguire qualsiasi cosa relativa a Cordova, dovrai installare l'SDK per ciascuna piattaforma per la quale intendi creare la tua applicazione. Ci concentreremo sulla piattaforma Android in questo articolo; tuttavia, il processo che coinvolge altre piattaforme è simile.

Dovresti scaricare l'SDK Android trovato qui. Per Windows, l'SDK viene fornito come un programma di installazione, mentre per Linux e OSX viene fornito come un archivio che può essere semplicemente estratto. Dopo aver estratto/installato il pacchetto, dovrai aggiungere le directory sdk/tools e sdk/platform-tools alla tua variabile PATH . La variabile PATH viene utilizzata da Cordova per cercare i file binari necessari per il processo di compilazione. Se non hai installato Java, dovresti andare avanti e installare il JDK insieme ad Ant. ANT_HOME e JAVA_HOME devono essere impostati nelle cartelle bin di JDK e Ant e, dopo aver installato l'SDK Android, impostare la variabile ANDROID_HOME su Android/Sdk . Tutte le posizioni nelle tre variabili *_HOME dovrebbero trovarsi anche nella tua variabile PATH .

Dopo aver installato il comando android SDK sarà disponibile nella riga di comando. Eseguilo per aprire il gestore SDK e installare gli strumenti più recenti e l'API Android. Probabilmente avresti bisogno di Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, Google APIs Intel x86 Atom System Image, Sources for Android SDK e Intel x86 Emulator Accelerator (programma di installazione HAXM) . Dopodiché sarai in grado di creare un emulatore con android avd .

Cordova CLI dipende da Node.js e dal client Git, quindi vai avanti e scarica e installa Node da nodejs.org e Git da git-scm.com. Utilizzerai npm per installare Cordova CLI stessa e per installare plug-in aggiuntivi e Cordova utilizzerà git dietro le quinte per scaricare le dipendenze richieste. Infine, corri

 npm install -g cordova

...per installare Cordova CLI a livello globale ( npm install cordova non è sufficiente da solo.)

Riassumendo, questi sono i pacchetti di cui avrai bisogno:

• Giava
• Formica
• SDK Android
• NodeJS
• Idiota

E queste variabili di ambiente dovranno essere aggiornate:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Avvio di un'applicazione

A condizione che tu abbia installato correttamente Cordova, ora dovresti avere accesso all'utilità della riga di comando Cordova. Apri il terminale o la riga di comando e vai a una directory in cui desideri creare il tuo primo progetto Cordova. Per avviare un'applicazione, digitare il seguente comando:

 cordova create toptal toptal.hello HelloToptal

La riga di comando è composta dal nome del comando cordova , seguito dal sottocomando create . Il sottocomando viene richiamato con tre parametri aggiuntivi: la cartella in cui verrà posizionata l'applicazione, lo spazio dei nomi dell'applicazione e il relativo nome visualizzato. Questo esegue il bootstrap dell'applicazione in una cartella con la seguente struttura:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

La cartella www contiene il core dell'applicazione. Qui è dove posizionerai il codice dell'applicazione che è comune a tutte le piattaforme.

Sebbene Cordova ti consenta di sviluppare facilmente un'app per piattaforme diverse, a volte è necessario aggiungere personalizzazioni. Quando si sviluppa per più piattaforme, non si desidera modificare i file di origine nelle varie directory platforms/[platform-name][assets]/www , perché vengono regolarmente sovrascritti con i file www di primo livello.

A questo punto puoi anche aprire il file config.xml e modificare i metadati della tua applicazione, come autore e descrizione.

Aggiungi la tua prima piattaforma utilizzando:

 cordova platform add android

Se cambi idea in seguito, puoi rimuovere facilmente una piattaforma dal processo di compilazione:

 cordova platform rm android

Dopo aver ispezionato la directory delle piattaforme, noterai la cartella android al suo interno. Per ogni piattaforma che aggiungi, Cordova creerà una nuova directory nelle piattaforme e duplicherà la cartella www al suo interno. Se, ad esempio, desideri personalizzare la tua applicazione per Android, puoi modificare i file in platforms/android/assets/www e passare a strumenti shell specifici della piattaforma.

Tuttavia, ricorda che se ricostruisci la tua applicazione con la CLI (usata per lo sviluppo multipiattaforma), Cordova sovrascriverà le modifiche che hai apportato per ciascuna piattaforma, quindi assicurati di averle sotto il controllo della versione, o fai specifiche della piattaforma modifiche dopo aver terminato lo sviluppo multipiattaforma. Come accennato in precedenza, passare dallo sviluppo multipiattaforma allo sviluppo specifico per piattaforma è facile. Muoversi nell'altra direzione non lo è.

Se si desidera continuare a utilizzare il flusso di lavoro multipiattaforma e apportare comunque personalizzazioni specifiche della piattaforma, è necessario utilizzare la cartella di unione di primo livello. Da Cordova versione 3.5 in poi, questa cartella è stata rimossa dal modello di applicazione predefinito, ma se ne hai bisogno, puoi semplicemente crearla insieme alle altre directory di primo livello ( hooks , platforms , plugins e www ).

Le personalizzazioni specifiche della piattaforma vengono inserite in merges/[platform-name] e vengono applicate dopo i file di origine nella cartella www di primo livello. In questo modo, puoi aggiungere nuovi file di origine per determinate piattaforme oppure puoi sovrascrivere interi file di origine di primo livello con quelli specifici della piattaforma. Prendi ad esempio la seguente struttura:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

In questo caso, il file di output per Android conterrà sia i file app.js che android.js , ma il file di output per Windows Phone 8 conterrà solo il file app.js che si trova nella cartella merges/wp8 , poiché il i file in merges/[platform] sovrascrivono i file in www .

La directory dei plugin contiene informazioni per i plugin di ciascuna piattaforma. A questo punto, dovresti avere solo il file android.json che dovrebbe avere la seguente struttura:

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

Creiamo l'applicazione e la distribuiamo su un dispositivo Android. Puoi usare anche l'emulatore, se vuoi.

Cordova fornisce diversi passaggi della CLI per creare ed eseguire le tue app: cordova prepare , cordova compile , cordova build (che è una scorciatoia per i due precedenti), cordova emulate e cordova run (che incorpora build e può anche eseguire l'emulatore). Questo non dovrebbe confonderti, perché nella maggior parte dei casi vorresti creare ed eseguire la tua app nell'emulatore:

 cordova run --emulator

Se lo desideri, puoi collegare il tuo dispositivo tramite la porta USB, abilitare la modalità di debug USB e distribuire la tua prima applicazione Apache Cordova direttamente sul tuo dispositivo semplicemente eseguendo:

 cordova run

Questo copierà tutti i tuoi file in platforms/* ed eseguirà tutte le attività richieste.

È possibile limitare l'ambito del processo di compilazione specificando il nome della piattaforma per la quale si desidera creare l'applicazione e/o anche l'emulatore specifico, ad esempio:

 cordova run android --emulator

o

 cordova run ios --emulator --target="iPhone-8-Plus"

Tutorial pratico di Apache Cordova

Creiamo una semplice applicazione tutorial per dimostrare l'uso di Cordova e dei suoi plugin. L'intera demo può essere trovata in questo repository GitHub in modo che tu possa scaricarla ed esaminarne parti insieme a questo breve tutorial di Cordova.

Utilizzeremo la configurazione iniziale che hai creato e aggiungeremo codice aggiuntivo. Diciamo che vogliamo aggiungere nuovi progetti a un immaginario database Toptal, oltre a visualizzare quelli esistenti. Apri index.html e imposta due schede nel modo seguente:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="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/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Si noti che ho aggiunto Bootstrap e jQuery Mobile come dipendenze. Tieni presente che sono state sviluppate soluzioni e framework molto migliori per la creazione di moderne applicazioni ibride, ma poiché la maggior parte (se non tutti) gli sviluppatori Web hanno familiarità con queste due librerie, ha senso usarle per un tutorial per principianti. Puoi scaricare i fogli di stile da GitHub o usarne uno tuo, se preferisci.

Passiamo al file index.js e lo riduciamo a quanto segue:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Ricorda che l'architettura consigliata per le applicazioni Cordova sta configurando un'applicazione a pagina singola (SPA). In questo modo, tutte le risorse vengono caricate solo una volta all'avvio dell'app e possono rimanere nella visualizzazione Web per tutto il tempo in cui l'applicazione è in esecuzione. Inoltre, con le SPA, l'utente non avrà ricaricamenti di pagina che non sono semplicemente tipici delle applicazioni native. Tenendo questo a mente, impostiamo un semplice controller per passare da una scheda all'altra:

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

Il controller ha finora due metodi, uno per il rendering della vista di ricerca e uno per il rendering della vista Post progetto. Inizializziamolo nel nostro file index.js dichiarandolo prima in alto e costruendolo nel metodo onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Infine, aggiungi un riferimento allo script in index.html sopra il riferimento a index.js . Puoi scaricare le visualizzazioni Cerca e Pubblica direttamente da GitHub. Poiché le visualizzazioni parziali vengono lette da un file, alcuni browser come Chrome, durante il tentativo di eseguire il rendering della pagina, si lamenteranno delle richieste tra domini.

La possibile soluzione qui sarebbe quella di eseguire un server statico locale, ad esempio utilizzando il modulo npm node-static . Inoltre, qui puoi iniziare a pensare all'utilizzo di alcuni framework come PhoneGap e/o Ionic. Tutti forniscono una gamma di strumenti di sviluppo, tra cui l'emulazione nel browser, il ricaricamento a caldo e la generazione di codice (scaffolding).

Per ora, eseguiamo semplicemente il deployment su un dispositivo Android eseguendo quanto segue:

 cordova run android

A questo punto, l'applicazione dovrebbe avere due schede. La prima scheda consente di cercare i progetti:

La seconda scheda consente di pubblicare nuovi progetti:

Tutto ciò che abbiamo ora è una classica applicazione Web in esecuzione all'interno di una visualizzazione Web. Non abbiamo davvero utilizzato nessuna delle funzionalità native, quindi proviamo a farlo ora. Una domanda comune è come archiviare i dati localmente sul dispositivo o, più precisamente, quale tipo di archiviazione utilizzare. Ci sono diversi modi per andare:

• Memoria locale
• WebSQL
• IndicizzatoDB
• Archiviazione lato server accessibile tramite un servizio web
• Plugin di terze parti che forniscono altre opzioni

LocalStorage va bene per l'archiviazione di piccole quantità di dati, ma non sarà sufficiente se stai creando un'applicazione ad alta intensità di dati, poiché lo spazio disponibile varia da 3 a 10 MB. IndexedDB potrebbe essere una soluzione migliore per questo caso. WebSQL è deprecato e non supportato su alcune piattaforme. Infine, l'utilizzo dei servizi Web per recuperare e modificare i dati si adatta bene al paradigma SPA, ma si interrompe quando l'applicazione va offline. Le tecniche PWA insieme ai Service Workers sono recentemente entrate nel mondo di Cordova per aiutare in questo.

Inoltre, ci sono molti plugin aggiuntivi di terze parti che arrivano per colmare le lacune nel core di Cordova. Il plug-in File può essere molto utile in quanto ti fornisce l'accesso al file system del dispositivo, consentendoti di creare e archiviare file. Per ora, proviamo SQLitePlugin che ti fornisce un database SQLite locale. Puoi aggiungerlo al tuo progetto eseguendo:

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin fornisce un'API al database SQLite del dispositivo e funge da vero meccanismo di persistenza. Possiamo creare un semplice Servizio di Stoccaggio nel seguente modo:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Puoi scaricare il codice per recuperare e aggiungere progetti da GitHub e incollarlo nei rispettivi segnaposto. Non dimenticare di aggiungere SQLiteStorageService.js al tuo file index.html sopra Controller.js e inizializzarlo nel tuo controller modificando la funzione init del controller:

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

Se dai un'occhiata a service.addProject(), noterai che effettua una chiamata al metodo navigator.geolocation.getCurrentPosition(). Cordova ha un plug-in di geolocalizzazione che puoi utilizzare per ottenere la posizione corrente del telefono e puoi persino utilizzare il metodo navigator.geolocation.watchPosition() per ricevere aggiornamenti quando la posizione dell'utente cambia.

Infine, aggiungiamo gli handle di evento del controller per l'aggiunta e il recupero di progetti dal database:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Per aggiungere la console e i plug-in di dialogo, eseguire quanto segue:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

Il plug-in cordova.console ti assisterà nel debug abilitando la funzione console.log() all'interno degli emulatori.

Puoi facilmente eseguire il debug di applicazioni Android tramite il debugger remoto di Chrome. Dopo aver collegato il dispositivo, fai clic sul menu a discesa nell'angolo in alto a destra (sotto il pulsante X), espandi Altri strumenti e fai clic su Ispeziona dispositivi. Dovresti vedere il tuo dispositivo nell'elenco e dovresti essere in grado di aprire la sua console di debug.

Safari offre la stessa funzionalità per il debug di app iOS eseguite su dispositivi o emulatori collegati tramite USB. Abilita gli Strumenti per sviluppatori in Impostazioni Safari > scheda Avanzate.

Il plug-in cordova.dialogs abilita le notifiche native. Una pratica comune consiste nel ridefinire il metodo windows.alert utilizzando l'API cordova.dialogs nel modo seguente:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

La funzione overrideBrowserAlert deve essere chiamata all'interno del gestore di eventi deviceready .

Ora dovresti essere in grado di aggiungere nuovi progetti e visualizzare quelli esistenti dal database. Se selezioni la casella di controllo "Includi posizione", il dispositivo effettuerà una chiamata all'API di geolocalizzazione e aggiungerà la tua posizione corrente al progetto.

Aggiungiamo un tocco finale all'applicazione impostando un'icona e una schermata iniziale. Aggiungi quanto segue al tuo file config.xml :

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Infine, posiziona un'immagine del logo nella cartella www/img .

La tua app Cordova

Abbiamo eseguito i passaggi di base dello sviluppo dell'app Apache Cordova e utilizzato la nostra architettura JavaScript e il foglio di stile CSS. Questo tutorial di Cordova è stato un tentativo di mostrare il potenziale di Apache Cordova come mezzo per lo sviluppo di applicazioni mobili utilizzando tecnologie familiari, riducendo sia i tempi di sviluppo che lo sforzo richiesto per creare più applicazioni per piattaforme diverse.

Tuttavia, quando si creano applicazioni che andranno in produzione, si consiglia di utilizzare un framework esistente. Oltre a strutturare la tua applicazione in un'architettura predefinita, questo potrebbe anche fornirti un set di componenti che aiuteranno la tua applicazione ad avvicinarsi all'aspetto nativo. Alcuni framework degni di nota sono Ionic, Framework7, Weex, Ratchet, Kendo UI e Onsen UI. Buona fortuna!