Apache Cordova Tutorial: Dezvoltarea aplicațiilor mobile cu Cordova

Aplicațiile mobile se strecoară peste tot, începând cu smartphone-uri și tablete, până la ceasuri inteligente și în curând vor fi găsite și în alte dispozitive portabile. Cu toate acestea, dezvoltarea pentru fiecare platformă mobilă separată poate fi o sarcină exhaustivă, mai ales dacă resursele dvs. sunt limitate sau dacă sunteți un singur dezvoltator, mai degrabă decât o companie de dezvoltare de aplicații mobile.

Aici poate fi util să deveniți un dezvoltator bine versat Apache Cordova, oferind o modalitate de a dezvolta aplicații mobile folosind tehnologii web standard - HTML5, CSS3 și JavaScript.

În 2009, un startup numit Nitobi a creat PhoneGap, un API open source pentru accesarea resurselor mobile native, cu scopul de a permite dezvoltatorilor să creeze aplicații mobile folosind tehnologii web standard. În viziunea lui Nitobi, majoritatea aplicațiilor mobile ar fi dezvoltate în curând folosind PhoneGap, dar dezvoltatorii ar avea în continuare opțiunea de a scrie cod nativ atunci când este necesar, fie din cauza unor probleme de performanță, fie din cauza lipsei unei metode de accesare a hardware-ului specific.

Cordova PhoneGap?

Nu există așa ceva, într-adevăr. Ceea ce s-a întâmplat a fost că Adobe a achiziționat Nitobi în 2011 și a donat nucleul open-source Apache Software Foundation, care l-a redenumit Apache Cordova. O analogie comună cu care veți întâlni adesea este că Cordova este pentru PhoneGap ceea ce WebKit este pentru Chrome sau Safari.

Evident, diferențele dintre Cordova și PhoneGap au fost minime la început. Cu timpul, Adobe PhoneGap și-a dezvoltat propriul set de caracteristici proprietare, în timp ce Cordova a fost – și este încă – susținută de comunitatea open-source. Această recenzie și tutorial Apache Cordova va examina mai detaliat dezvoltarea aplicației Cordova și, deși o parte din ele se pot aplica la PhoneGap, acesta nu ar trebui considerat un tutorial PhoneGap, în sine .

Apache Cordova Capabilities

În esență, Cordova nu are limitări în ceea ce privește aplicațiile dezvoltate nativ. Ceea ce obțineți cu Cordova este pur și simplu un API JavaScript, care servește ca un wrapper pentru codul nativ și este consecvent pe toate dispozitivele. Puteți considera Cordova ca fiind un container de aplicații cu vizualizare web, care acoperă întregul ecran al dispozitivului. Vizualizarea web folosită de Cordova este aceeași vizualizare web folosită de sistemul de operare nativ. Pe iOS, aceasta este UIWebView implicită Objective-C sau o clasă personalizată WKWebView ; pe Android, acesta este android.webkit.WebView .

Apache Cordova vine cu un set de plugin-uri pre-dezvoltate care oferă acces la camera dispozitivului, GPS-ul, sistemul de fișiere etc. Pe măsură ce dispozitivele mobile evoluează, adăugarea suportului pentru hardware suplimentar este doar o chestiune de a dezvolta noi plugin-uri.

În cele din urmă, aplicațiile Cordova se instalează la fel ca aplicațiile native. Aceasta înseamnă că crearea codului pentru iOS va produce un fișier IPA, pentru Android un fișier APK, iar crearea pentru Windows Phone va produce un fișier XAP. Dacă depuneți suficient efort în procesul de dezvoltare, este posibil ca utilizatorii să nu realizeze că nu folosesc o aplicație nativă.

Fluxuri de lucru de dezvoltare Apache Cordova

Există două căi de bază pe care le puteți urma atunci când dezvoltați cu Cordova:

• Atunci când intenția dvs. este să implementați o aplicație pe cât mai multe platforme posibil, cu puțină sau deloc dezvoltare specifică platformei, ar trebui să utilizați fluxul de lucru multiplatform. Instrumentul principal care sprijină acest flux de lucru este Cordova Command-Line Interface (CLI), care servește ca o abstractizare de nivel superior pentru configurarea și construirea aplicației dvs. pentru diferite platforme. Aceasta este calea de dezvoltare mai frecvent utilizată.
• Dacă intenționați să vă dezvoltați aplicația având în vedere o anumită platformă, ar trebui să utilizați fluxul de lucru centrat pe platformă. În acest fel, veți putea să vă modificați și să vă modificați codul la un nivel inferior, amestecând componente native cu componente Cordova. Chiar dacă ați putea folosi această abordare pentru dezvoltarea multiplatformă, procesul va fi mai lung și mai obositor.

De obicei, se recomandă să începeți cu fluxul de lucru de dezvoltare multiplatformă, deoarece trecerea la dezvoltarea centrată pe platformă este destul de simplă. Cu toate acestea, dacă începeți inițial cu fluxul de lucru centrat pe platformă, nu veți putea trece la dezvoltarea pe mai multe platforme, deoarece CLI vă va suprascrie personalizările odată ce rulați procesul de construire.

Cerințe preliminare și instalare Cordova

Înainte de a instala și a rula ceva legat de Cordova, va trebui să instalați SDK-ul pentru fiecare platformă pentru care intenționați să vă construiți aplicația. Ne vom concentra pe platforma Android în acest articol; cu toate acestea, procesul care implică alte platforme este similar.

Ar trebui să descărcați SDK-ul Android găsit aici. Pentru Windows, SDK-ul vine ca un program de instalare, în timp ce pentru Linux și OSX vine ca o arhivă care poate fi pur și simplu extrasă. După extragerea/instalarea pachetului, va trebui să adăugați directoarele sdk/tools și sdk/platform-tools la variabila PATH . Variabila PATH este folosită de Cordova pentru a căuta binarele de care are nevoie pentru procesul de construire. Dacă nu aveți Java instalat, ar trebui să continuați și să instalați JDK-ul împreună cu Ant. ANT_HOME și JAVA_HOME ar trebui să fie setate în folderele bin ale JDK și Ant, iar după instalarea SDK-ului Android, setați variabila ANDROID_HOME la Android/Sdk . Toate locațiile din cele trei variabile *_HOME ar trebui să fie, de asemenea, în variabila PATH .

După ce ați instalat, comanda android SDK va deveni disponibilă în linia de comandă. Execută-l pentru a deschide managerul SDK și a instala cele mai recente instrumente și API-ul Android. Probabil că veți avea nevoie de instrumente Android SDK, instrumente Android SDK, instrumente de compilare Android SDK, platformă SDK, API-uri Google Intel x86 Atom System Image, Surse pentru Android SDK și Intel x86 Emulator Accelerator (instalator HAXM) . După aceea, veți putea crea un emulator cu android avd .

Cordova CLI depinde de Node.js și de clientul Git, așa că mergeți mai departe și descărcați și instalați Node de pe nodejs.org și Git de pe git-scm.com. Veți folosi npm pentru a instala Cordova CLI în sine, precum și pentru a instala pluginuri suplimentare, iar Cordova va folosi git în culise pentru a descărca dependențele necesare. În cele din urmă, fugi

 npm install -g cordova

… pentru a instala Cordova CLI la nivel global ( npm install cordova nu este suficient de la sine.)

Pentru a rezuma, acestea sunt pachetele de care veți avea nevoie:

• Java
• Furnică
• Android SDK
• NodeJS
• Git

Și aceste variabile de mediu vor trebui actualizate:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bootstrap-ul unei aplicații

Dacă ați instalat cu succes Cordova, acum ar trebui să aveți acces la utilitarul de linie de comandă Cordova. Deschideți terminalul sau linia de comandă și navigați la un director în care doriți să vă creați primul proiect Cordova. Pentru a porni o aplicație, tastați următoarea comandă:

 cordova create toptal toptal.hello HelloToptal

Linia de comandă este formată din numele comenzii cordova , urmată de subcomandă create . Subcomanda este invocată cu trei parametri suplimentari: folderul în care va fi plasată aplicația, spațiul de nume al aplicației și numele afișat al acesteia. Aceasta pornește aplicația într-un folder cu următoarea structură:

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

Dosarul www conține nucleul aplicației dvs. Aici veți plasa codul aplicației, care este comun pentru toate platformele.

În timp ce Cordova vă permite să dezvoltați cu ușurință o aplicație pentru diferite platforme, uneori trebuie să adăugați personalizări. Când dezvoltați pentru mai multe platforme, nu doriți să modificați fișierele sursă din diferitele directoare platforms/[platform-name][assets]/www , deoarece acestea sunt în mod regulat suprascrise cu fișierele www de nivel superior.

În acest moment, puteți deschide și fișierul config.xml și puteți modifica metadatele aplicației dvs., cum ar fi autorul și descrierea.

Adăugați prima platformă folosind:

 cordova platform add android

Dacă vă răzgândiți mai târziu, puteți elimina cu ușurință o platformă din procesul de construire:

 cordova platform rm android

La inspectarea directorului platformelor, veți observa folderul android din acesta. Pentru fiecare platformă pe care o adăugați, Cordova va crea un nou director în platforme și va duplica folderul www din cadrul acestuia. Dacă, de exemplu, doriți să vă personalizați aplicația pentru Android, puteți modifica fișierele din platforms/android/assets/www și puteți trece la instrumentele shell specifice platformei.

Totuși, amintiți-vă că, dacă vă reconstruiți aplicația cu CLI-ul (utilizat pentru dezvoltarea multiplatformă), Cordova va suprascrie modificările pe care le-ați făcut pentru fiecare platformă, așa că fie asigurați-vă că le aveți sub controlul versiunilor, fie faceți specific platformei. modificări după ce ați terminat cu dezvoltarea multiplatformă. După cum am menționat mai devreme, trecerea de la dezvoltarea multiplatformă la dezvoltarea specifică platformei este ușoară. Mișcarea în cealaltă direcție nu este.

Dacă doriți să continuați să utilizați fluxul de lucru pe mai multe platforme și să faceți în continuare personalizări specifice platformei, ar trebui să utilizați folderul de îmbinări de nivel superior. De la versiunea Cordova 3.5 încolo, acest folder a fost eliminat din șablonul implicit de aplicație, dar dacă aveți nevoie de el, îl puteți crea pur și simplu împreună cu celelalte directoare de nivel superior ( hooks , platforms , plugins -uri și www ).

Personalizările specifice platformei sunt plasate în merges/[platform-name] și sunt aplicate după fișierele sursă din folderul www de nivel superior. În acest fel, puteți fie adăuga fișiere sursă noi pentru anumite platforme, fie puteți suprascrie întregi fișiere sursă de nivel superior cu unele specifice platformei. Luați, de exemplu, următoarea structură:

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

În acest caz, fișierul de ieșire pentru Android va conține atât fișierele app.js , cât și fișierele android.js , dar fișierul de ieșire pentru Windows Phone 8 va conține doar fișierul app.js care se găsește în folderul merges/wp8 , deoarece fișierele din merges/[platform] suprascriu fișierele din www .

Directorul de pluginuri conține informații pentru pluginurile fiecărei platforme. În acest moment, ar trebui să aveți doar fișierul android.json care ar trebui să aibă următoarea structură:

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

Să construim aplicația și să o implementăm pe un dispozitiv Android. Puteți folosi și emulatorul, dacă doriți.

Cordova oferă mai mulți pași CLI pentru construirea și rularea aplicațiilor dvs.: cordova prepare , cordova compile , cordova build (care este o scurtătură pentru cele două anterioare), cordova emulate și cordova run (care încorporează build și poate rula și emulator). Acest lucru nu ar trebui să vă încurce, deoarece în cele mai multe cazuri doriți să vă construiți și să rulați aplicația în emulator:

 cordova run --emulator

Dacă doriți, puteți conecta dispozitivul prin portul USB, puteți activa modul de depanare USB și puteți implementa prima aplicație Apache Cordova direct pe dispozitivul dvs. pur și simplu rulând:

 cordova run

Aceasta va copia toate fișierele dvs. în platforms/* și va executa toate sarcinile necesare.

Puteți limita domeniul de aplicare al procesului de construire specificând numele platformei pentru care doriți să construiți aplicația și/sau chiar emulatorul specific, de exemplu:

 cordova run android --emulator

sau

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

Tutorial practic Apache Cordova

Să creăm o aplicație tutorial simplă pentru a demonstra utilizarea Cordova și a pluginurilor sale. Întreaga demonstrație poate fi găsită în acest depozit GitHub, astfel încât să îl puteți descărca și să parcurgeți părți din acesta împreună cu acest scurt tutorial Cordova.

Vom folosi configurația inițială pe care ați creat-o și vom adăuga cod suplimentar. Să presupunem că vrem să adăugăm proiecte noi la o bază de date imaginară Toptal, precum și să le vedem pe cele existente. Deschideți index.html și configurați două file în felul următor:

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

Observați că am adăugat Bootstrap și jQuery Mobile ca dependențe. Vă rugăm să fiți conștienți de faptul că au fost dezvoltate soluții și cadre mult mai bune pentru construirea de aplicații hibride moderne, dar deoarece majoritatea (dacă nu toți) dezvoltatorii web sunt familiarizați cu aceste două biblioteci, este logic să le folosiți pentru un tutorial pentru începători. Puteți descărca foile de stil de pe GitHub sau le puteți folosi pe ale dvs., dacă preferați.

Să trecem la fișierul index.js și să-l reducem la următoarele:

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

Amintiți-vă că arhitectura susținută pentru aplicațiile Cordova este configurarea unei aplicații cu o singură pagină (SPA). În acest fel, toate resursele sunt încărcate o singură dată când aplicația pornește și pot rămâne în vizualizarea web atât timp cât aplicația rulează. În plus, cu SPA-uri, utilizatorul nu va avea reîncărcări ale paginilor care nu sunt pur și simplu tipice pentru aplicațiile native. Ținând cont de asta, haideți să configuram un controler simplu pentru a comuta între cele două file:

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

Controlerul are două metode până acum, una pentru redarea vizualizării de căutare și una pentru redarea vizualizării Post Project. Să-l inițializam în fișierul nostru index.js declarându-l mai întâi în partea de sus și construindu-l în metoda onDeviceReady:

 // top of index.js var controller = null

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

În cele din urmă, adăugați o referință de script în index.html deasupra referinței la index.js . Puteți descărca vizualizările Căutare și Postare direct din GitHub. Deoarece vizualizările parțiale sunt citite dintr-un fișier, unele browsere precum Chrome, în timp ce încearcă să redeze pagina dvs., se vor plânge de solicitările pe mai multe domenii.

Soluția posibilă aici ar fi să rulați un server static local, de exemplu folosind modulul node-static npm. De asemenea, aici puteți începe să vă gândiți să utilizați un cadru precum PhoneGap și/sau Ionic. Toate oferă o gamă largă de instrumente de dezvoltare, inclusiv emularea în browser, reîncărcarea la cald și generarea de cod (schelă).

Deocamdată, să implementăm pur și simplu pe un dispozitiv Android rulând următoarele:

 cordova run android

În acest moment, aplicația dvs. ar trebui să aibă două file. Prima filă permite căutarea proiectelor:

A doua filă permite postarea unor proiecte noi:

Tot ce avem acum este o aplicație web clasică care rulează într-o vizualizare web. Nu am folosit cu adevărat niciuna dintre funcțiile native, așa că hai să încercăm să facem asta acum. O întrebare frecventă este cum să stocați datele local pe dispozitiv sau, mai precis, ce tip de stocare să utilizați. Există mai multe moduri de a merge:

• Stocare locală
• WebSQL
• IndexedDB
• Stocare pe partea serverului accesată printr-un serviciu web
• Pluginuri terțe care oferă alte opțiuni

LocalStorage este OK pentru stocarea unor cantități mici de date, dar nu va fi suficient dacă construiți o aplicație cu consum mare de date, deoarece spațiul disponibil variază de la 3 la 10 MB. IndexedDB poate fi o soluție mai bună pentru acest caz. WebSQL este depreciat și nu este acceptat pe unele platforme. În cele din urmă, utilizarea serviciilor web pentru a prelua și modifica datele se încadrează bine în paradigma SPA, dar se defectează atunci când aplicația dvs. este offline. Tehnicile PWA împreună cu Service Workers au venit recent în lumea Cordova pentru a ajuta în acest sens.

De asemenea, există o mulțime de pluginuri suplimentare, terță parte, care vin pentru a umple golurile din nucleul Cordova. Pluginul Fișier poate fi destul de util, deoarece vă oferă acces la sistemul de fișiere al dispozitivului, permițându-vă să creați și să stocați fișiere. Deocamdată, să încercăm SQLitePlugin care vă oferă o bază de date locală SQLite. Îl puteți adăuga la proiect rulând:

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

SQLitePlugin oferă un API pentru baza de date SQLite a dispozitivului și servește ca un adevărat mecanism de persistență. Putem crea un serviciu de stocare simplu în felul următor:

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

Puteți descărca codul pentru preluarea și adăugarea proiectelor din GitHub și să-l lipiți în substituenții respectivi. Nu uitați să adăugați SQLiteStorageService.js la fișierul dvs. index.html deasupra Controller.js și să-l inițializați în controler modificând funcția de inițiere a Controllerului:

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

Dacă aruncați o privire la service.addProject(), veți observa că face un apel la metoda navigator.geolocation.getCurrentPosition(). Cordova are un plugin de geolocalizare pe care îl poți folosi pentru a obține locația curentă a telefonului și poți chiar să folosești metoda navigator.geolocation.watchPosition() pentru a primi actualizări atunci când poziția utilizatorului se schimbă.

În cele din urmă, să adăugăm mânerele de eveniment controler pentru adăugarea și preluarea proiectelor din baza de date:

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

Pentru a adăuga consola și pluginurile de dialog, executați următoarele:

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

Pluginul cordova.console vă va ajuta la depanare activând funcția console.log() în cadrul emulatorilor.

Puteți depana cu ușurință aplicațiile Android prin intermediul depanatorului de la distanță Chrome. După ce v-ați conectat dispozitivul, faceți clic pe meniul drop-down din colțul din dreapta sus (sub butonul X), extindeți Mai multe instrumente și faceți clic pe Inspectați dispozitivele. Ar trebui să vedeți dispozitivul dvs. în listă și ar trebui să puteți deschide consola de depanare.

Safari oferă aceeași funcționalitate pentru depanarea aplicațiilor iOS care rulează pe un dispozitiv sau un emulator conectat prin USB. Doar activați Instrumentele pentru dezvoltatori în Setări Safari > fila Avansat.

Pluginul cordova.dialogs permite notificări native. O practică comună este redefinirea metodei windows.alert folosind API-ul cordova.dialogs în următorul mod:

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

Funcția overrideBrowserAlert ar trebui apelată în cadrul handler-ului de evenimente deviceready .

Acum ar trebui să puteți adăuga proiecte noi și să le vedeți pe cele existente din baza de date. Dacă bifați caseta de selectare „Include locația”, dispozitivul va efectua un apel către API-ul de geolocație și va adăuga locația dvs. curentă la proiect.

Să adăugăm o atingere finală aplicației prin setarea unei pictograme și a unui ecran de introducere. Adăugați următoarele în fișierul dvs. 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>

În cele din urmă, plasați o imagine de logo în folderul www/img .

Propia dvs. aplicație Cordova

Am parcurs pașii de bază ai dezvoltării aplicației Apache Cordova și am folosit propria noastră arhitectură JavaScript și foaia de stil CSS. Acest tutorial Cordova a fost o încercare de a arăta potențialul Apache Cordova ca mijloc de dezvoltare a aplicațiilor mobile folosind tehnologii familiare, reducând atât timpul de dezvoltare, cât și efortul necesar pentru a construi mai multe aplicații pentru diferite platforme.

Cu toate acestea, atunci când construiți aplicații care vor intra în producție, este recomandat să utilizați un cadru existent. Pe lângă structurarea aplicației dvs. într-o arhitectură predefinită, aceasta vă poate oferi și un set de componente care vă vor ajuta aplicația să se apropie mai mult de aspectul nativ. Unele cadre care merită remarcate sunt Ionic, Framework7, Weex, Ratchet, Kendo UI și Onsen UI. Mult noroc!