Poznámka: Pretože toto bolo pôvodne napísané, aktualizoval som tento článok, aby sa s ním dalo pracovať [chránené e-mailom] 0,0, [chránené e-mailom] a [chránené e-mailom]

Mobilné aplikácie sa vkrádajú všade, počnúc smartphonmi a tabletmi, až po inteligentné hodinky a čoskoro sa nájdu aj v iných odevoch. Vývoj pre každú samostatnú mobilnú platformu však môže byť vyčerpávajúcou úlohou, najmä ak máte obmedzené zdroje alebo ak ste skôr vývojárom ako samostatným vývojárom spoločnosť pre vývoj mobilných aplikácií .

To je miesto, kde sa stáva zbehlý vývojár Apache Cordova môže byť užitočné, ak poskytne spôsob vývoja mobilných aplikácií pomocou štandardných webových technológií - HTML5, CSS3 a JavaScript.

V roku 2009 startup s názvom Nitobi vytvoril PhoneGap, open source API pre prístup k natívnym mobilným zdrojom, s cieľom umožniť vývojárom vytvárať mobilné aplikácie pomocou štandardných webových technológií. Podľa vízie Nitobi by sa väčšina mobilných aplikácií čoskoro vyvinula pomocou aplikácie PhoneGap, vývojári by však stále mali možnosť napísať natívny kód, ak by to bolo potrebné, či už z dôvodu problémov s výkonom alebo chýbajúcej metódy prístupu k špecifickému hardvéru.

Cordova PhoneGap?

Naozaj nič také neexistuje. To, čo sa stalo, bolo to, že spoločnosť Adobe získala spoločnosť Nitobi v roku 2011 a venovala jadro open-source softvéru Apache Software Foundation, ktorý ho premenoval na Apache Cordova. Bežnou analógiou, s ktorou sa často stretnete, je, že Cordova je pre PhoneGap to, čo WebKit pre Chrome alebo Safari.

Je zrejmé, že rozdiely medzi Cordova a PhoneGap boli na začiatku minimálne. S časom, Adobe PhoneGap vyvinula svoju vlastnú sadu proprietárnych funkcií, zatiaľ čo Cordova bola - a stále je - podporovaná komunitou open-source. Táto recenzia a tutoriál Apache Cordova podrobnejšie preskúma vývoj aplikácií Cordova. Aj keď sa niektoré z nich môžu vzťahovať na PhoneGap, nemalo by sa to považovať za tutoriál PhoneGap, per se .

Schopnosti Apache Cordova

Cordova v podstate nemá žiadne obmedzenia, pokiaľ ide o natívne vyvinuté aplikácie. To, čo získate s Cordova, je jednoducho API jazyka JavaScript, ktoré slúži ako obal pre natívny kód a je konzistentné vo všetkých zariadeniach. Cordovu môžete považovať za kontajner aplikácií s webovým zobrazením, ktorý pokrýva celú obrazovku zariadenia. Webové zobrazenie, ktoré používa Cordova, je rovnaké webové zobrazenie, aké používa natívny operačný systém. V systéme iOS je to predvolený Cieľ-C UIWebView alebo vlastný WKWebView trieda; v Androide je to android.webkit.WebView.

Apache Cordova sa dodáva so sadou vopred vyvinutých doplnkov, ktoré poskytujú prístup k fotoaparátu zariadenia, GPS, súborovému systému atď. S vývojom mobilných zariadení je pridanie podpory pre ďalší hardvér jednoducho záležitosťou vývoja nových doplnkov.

Nakoniec sa nainštalujú aplikácie Cordova rovnako ako natívne aplikácie . To znamená, že zostavenie vášho kódu pre iOS vyprodukuje súbor IPA, pre Android súbor APK a zostavenie pre Windows Phone vytvorí súbor XAP. Ak venujete dostatočné úsilie vývojovému procesu, vaši používatelia si možno ani neuvedomia, že nepoužívajú natívnu aplikáciu.

Pracovné postupy vývoja Apache Cordova

Pri vývoji s Cordovou môžete nasledovať dve základné cesty:

• Ak je vaším zámerom nasadiť aplikáciu na čo najviac platforiem s minimálnym alebo žiadnym vývojom špecifickým pre danú platformu, mali by ste použiť multiplatformový pracovný postup. Hlavným nástrojom podporujúcim tento pracovný tok je rozhranie Cordova Command-Line Interface (CLI), ktoré slúži ako abstrakcia vyššej úrovne na konfiguráciu a vytváranie aplikácií pre rôzne platformy. Toto je bežne používaná vývojová cesta.
• Ak plánujete vývoj svojej aplikácie na konkrétnej platforme, mali by ste použiť pracovný postup zameraný na platformu. Týmto spôsobom budete môcť vyladiť a upraviť svoj kód na nižšej úrovni zmiešaním natívnych komponentov s komponentami Cordova. Aj keď by ste tento prístup mohli použiť na vývoj viacerých platforiem, proces bude zdĺhavejší a zdĺhavejší.

Zvyčajne sa odporúča začať s vývojovým pracovným postupom pre rôzne platformy, pretože prechod na vývoj zameraný na platformu je dosť priamy. Ak však na začiatku začnete s pracovným tokom zameraným na platformu, nebudete môcť prejsť na vývoj naprieč platformami, pretože rozhranie CLI prepíše vaše prispôsobenia po spustení procesu zostavovania.

Nevyhnutné predpoklady a inštalácia Cordova

Pred inštaláciou a spustením všetkého, čo súvisí s Cordova, budete musieť nainštalovať SDK pre každú platformu, pre ktorú chcete vytvoriť svoju aplikáciu. V tomto článku sa zameriame na platformu Android; proces zahŕňajúci iné platformy je však podobný.

Mali by ste si stiahnuť nájdenú sadu Android SDK tu . Pre Windows je sada SDK dodávaná ako inštalátor, zatiaľ čo pre systémy Linux a OSX slúži ako archív, ktorý je možné jednoducho extrahovať. Po rozbalení / nainštalovaní balíka budete musieť pridať sdk/tools a sdk/platform-tools adresáre do vašich PATH premenná. The PATH premenná používa Cordova na hľadanie binárnych súborov potrebných pre proces zostavenia. Ak nemáte nainštalovanú Javu, mali by ste nainštalovať JDK spolu s Ant. ANT_HOME a JAVA_HOME by mali byť nastavené na priečinky bin JDK a Ant a po inštalácii súpravy Android SDK nastavte ANDROID_HOME premenná na Android/Sdk. Všetky miesta v troch *_HOME premenné by tiež mali byť vo vašich PATH premenná.

Po nainštalovaní súpravy SDK android príkaz bude k dispozícii vo vašom príkazovom riadku. Vykonajte to, aby ste otvorili správcu SDK a nainštalovali najnovšie nástroje a rozhranie Android API. Pravdepodobne by ste potrebovali Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, Google APIs Intel x86 Atom System Image, Sources for Android SDK a Emulátor akcelerátora Intel x86 (inštalátor HAXM) . Potom budete môcť vytvoriť emulátor pomocou android avd.

Cordova CLI závisí od Node.js a klienta Git, takže pokračujte a stiahnite a nainštalujte Node z nodejs.org a Git z git-scm.com . Na inštaláciu samotného rozhrania Cordova CLI, ako aj na inštaláciu ďalších doplnkov budete používať npm a Cordova použije git behind the scenes na stiahnutie požadovaných závislostí. Na záver zabehnite

npm install -g cordova

… Globálna inštalácia rozhrania Cordova CLI (npm install cordova sama o sobě nestačí.)

Ak to zhrnieme, budete potrebovať tieto balíčky:

• Java
• Ant
• Android SDK
• NodeJS
• Choď

Bude potrebné aktualizovať tieto premenné prostredia:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bootstrapovanie aplikácie

Ak ste aplikáciu Cordova úspešne nainštalovali, mali by ste mať teraz prístup k pomôcke príkazového riadku Cordova. Otvorte terminál alebo príkazový riadok a prejdite do adresára, kde chcete vytvoriť svoj prvý projekt Cordova. Ak chcete zaviesť aplikáciu, zadajte nasledujúci príkaz:

cordova create toptal toptal.hello HelloApeeScape

Príkazový riadok sa skladá z názvu príkazu cordova, za ktorým nasleduje podpríkaz create. Podpríkaz je vyvolaný s tromi ďalšími parametrami: Priečinok, do ktorého bude aplikácia umiestnená, menný priestor aplikácie a jej zobrazovaný názov. Týmto sa aplikácia zavádza do priečinka s nasledujúcou štruktúrou:

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

The www priečinok obsahuje vaše aplikačné jadro. Na toto miesto umiestnite kód svojej aplikácie, ktorý je spoločný pre všetky platformy.

Zatiaľ čo Cordova vám umožňuje ľahko vyvinúť aplikáciu pre rôzne platformy, niekedy je potrebné pridať prispôsobenia. Pri vývoji pre viac platforiem nechcete upravovať zdrojové súbory v rôznych platforms/[platform-name][assets]/www adresáre, pretože sú pravidelne prepisované najvyššou úrovňou www súbory.

V tomto okamihu môžete tiež otvoriť config.xml súboru a zmeňte metaúdaje svojej aplikácie, napríklad autora a popis.

Pridajte svoju prvú platformu pomocou:

cordova platform add android

Ak si to rozmyslíte neskôr, môžete platformu z procesu zostavovania ľahko odstrániť:

cordova platform rm android

Pri prehliadke adresára platforiem si všimnete android priečinok v ňom. Pre každú pridanú platformu vytvorí Cordova nový adresár na platformách a duplikuje www priečinok v ňom. Ak napríklad chcete prispôsobiť svoju aplikáciu pre Android, môžete upraviť súbory v platforms/android/assets/www a prepnúť na špeciálne nástroje platformy.

Nezabudnite však, že ak svoju aplikáciu prestavíte pomocou rozhrania CLI (používaného na vývoj viacerých platforiem), program Cordova prepíše zmeny, ktoré ste pre každú platformu vykonali, takže sa uistite, či ich máte pod kontrolou verzie, alebo urobte špecifické pre platformu zmeny po dokončení vývoja na viacerých platformách. Ako sme už spomínali, prechod z vývoja medzi platformami na vývoj konkrétnych platforiem je jednoduchý. Pohyb opačným smerom nie je.

Ak chcete naďalej používať pracovný postup pre rôzne platformy a stále robiť vlastné prispôsobenia pre jednotlivé platformy, mali by ste použiť priečinok zlúčenia najvyššej úrovne. Od verzie Cordova verzie 3.5 a viac bol tento priečinok odstránený z predvolenej šablóny aplikácie, ale ak ho potrebujete, môžete ho jednoducho vytvoriť spolu s ostatnými adresármi najvyššej úrovne (hooks, platforms, plugins a www).

Prispôsobenia špecifické pre platformu sú umiestnené v merges/[platform-name] a sú použité po zdrojových súboroch v najvyššej úrovni www priečinok. Týmto spôsobom môžete buď pridať nové zdrojové súbory pre určité platformy, alebo môžete prepísať celé zdrojové súbory najvyššej úrovne tými, ktoré sú špecifické pre danú platformu. Vezmime si napríklad nasledujúcu štruktúru:

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

V takom prípade bude výstupný súbor pre Android obsahovať app.js a android.js súbory, ale výstupný súbor pre Windows Phone 8 bude obsahovať iba app.js súbor, ktorý sa nachádza v merges/wp8 priečinok, pretože súbory v merges/[platform] prepísať súbory v www.

Adresár doplnkov obsahuje informácie o doplnkoch jednotlivých platforiem. V tomto okamihu by ste mali mať iba android.json súbor, ktorý by mal mať nasledujúcu štruktúru:

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

Poďme vytvoriť aplikáciu a nasadiť ju do zariadenia s Androidom. Ak chcete, môžete použiť aj emulátor.

Cordova poskytuje niekoľko krokov CLI pre tvorbu a provoz vašich aplikací: cordova prepare, cordova compile, cordova build (čo je skratka pre predchádzajúce dva), cordova emulate a cordova run (ktorý obsahuje build a dokáže spustiť aj emulátor). To by vás nemalo miasť, pretože vo väčšine prípadov by ste chceli vytvoriť a spustiť svoju aplikáciu v emulátore:

cordova run --emulator

Ak chcete, môžete svoje zariadenie pripojiť cez port USB, povoliť režim ladenia USB a nasadiť svoju prvú aplikáciu Apache Cordova priamo do svojho zariadenia, ktoré jednoducho beží:

cordova run

Týmto sa skopírujú všetky vaše súbory do platforms/* a vykonať všetky požadované úlohy.

Rozsah procesu zostavenia môžete obmedziť zadaním názvu platformy, pre ktorú chcete vytvoriť aplikáciu, alebo dokonca konkrétneho emulátora, napríklad:

cordova run android --emulator

alebo

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

Praktický výukový program Apache Cordova

Poďme si vytvoriť jednoduchú výučbovú aplikáciu na demonštráciu použitia programu Cordova a jeho doplnkov. Celú ukážku nájdete v toto úložisko GitHub aby ste si ho mohli stiahnuť a prejsť jeho časťami spolu s týmto krátkym výukovým programom Cordova.

Použijeme počiatočné nastavenie, ktoré ste vytvorili, a pridáme ďalší kód. Povedzme, že chceme do imaginárnej databázy ApeeScape pridať nové projekty a zobraziť tie súčasné. Otvorte index.html a nastavte dve karty nasledujúcim spôsobom:

Hello ApeeScape

• Search Projects
• Post a Project

Všimnite si, že som pridal Bootstrap a jQuery Mobilné ako závislosti. Upozorňujeme, že pre budovanie moderných hybridných aplikácií boli vyvinuté oveľa lepšie riešenia a rámce. Pretože však väčšina (ak nie všetci) vývojári webových aplikácií tieto dve knižnice pozná, má zmysel ich použiť ako príručku pre začiatočníkov. Šablóny štýlov si môžete stiahnuť z GitHubu alebo môžete použiť vlastné.

Presuňme sa na index.js súbor a rozbaľte ho na nasledujúce položky:

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

Pamätajte, že podporovanou architektúrou pre aplikácie Cordova je nastavenie jednostránkovej aplikácie (SPA). Týmto spôsobom sa všetky zdroje načítajú iba raz pri spustení aplikácie a môžu zostať vo webovom zobrazení tak dlho, ako je aplikácia spustená. Okrem toho s SPA nebude mať používateľ opätovné načítanie stránok, ktoré nie je typické len pre natívne aplikácie. Nezabúdajme na to, nastavíme jednoduchý ovládač na prepínanie medzi týmito dvoma kartami:

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

Ovládač má zatiaľ dve metódy, jednu na vykreslenie pohľadu vyhľadávania a jednu na vykreslenie pohľadu po projekte. Inicializujme to v našom index.js súbor tak, že ho najskôr vyhlásite v hornej časti a skonštruujete pomocou metódy onDeviceReady:

// top of index.js var controller = null // inside onDeviceReady method controller = new Controller();

Nakoniec pridajte odkaz na skript v index.html nad odkazom na index.js. Zobrazenia Hľadať a Odoslať si môžete stiahnuť priamo z GitHubu. Pretože čiastočné zobrazenia sa čítajú zo súboru, niektoré prehliadače, ako je Chrome, sa pri pokuse o vykreslenie vašej stránky sťažujú na žiadosti viacerých domén.

Možným riešením by bolo spustiť lokálny statický server, napríklad pomocou node-static modul npm. Tu tiež môžete začať premýšľať o použití niektorých rámcov, ako sú PhoneGap a / alebo Ionic. Všetky z nich poskytujú celý rad vývojových nástrojov vrátane emulácie v prehľadávači, opätovného načítania za tepla a generovania kódu (lešenia).

Zatiaľ si to jednoducho nasaďte na zariadenie Android spustením nasledujúceho postupu:

cordova run android

V tomto okamihu by mala mať vaša aplikácia dve karty. Prvá karta umožňuje vyhľadávať projekty:

Druhá karta umožňuje zverejňovanie nových projektov:

Teraz máme iba klasickú webovú aplikáciu spustenú vo webovom zobrazení. Skutočne sme nepoužili žiadnu z natívnych funkcií, tak to skúsme urobiť teraz. Častou otázkou je, ako lokálne ukladať údaje do zariadenia, presnejšie aký typ úložiska použiť. Existuje niekoľko spôsobov, ako ísť:

• Lokálny obchod
• WebSQL
• IndexedDB
• K úložisku na strane servera sa pristupuje prostredníctvom webovej služby
• Doplnky tretích strán poskytujúce ďalšie možnosti

LocalStorage je vhodný na ukladanie malého množstva dát, ale nebude stačiť, ak vytvárate dátovo náročnú aplikáciu, pretože dostupné miesto sa pohybuje od 3 do 10 MB. IndexedDB môže byť v tomto prípade lepším riešením. WebSQL je zastaraný a niektoré platformy ho nepodporujú. Napokon použitie webových služieb na načítanie a úpravu údajov zapadá do paradigmy SPA, ale rozpadne sa, keď vaša aplikácia prejde do režimu offline. Techniky PWA spolu s pracovníkmi služieb nedávno prišli do sveta Cordova, aby s tým pomohli.

Existuje tiež veľa ďalších doplnkov tretích strán, ktoré vyplňujú medzery v jadre Cordova. Doplnok File (Súbor) môže byť celkom užitočný, pretože vám poskytuje prístup k súborovému systému zariadenia a umožňuje vám vytvárať a ukladať súbory. Zatiaľ vyskúšame SQLitePlugin, ktorý vám poskytuje lokálnu databázu SQLite. Môžete ho pridať do svojho projektu spustením:

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

SQLitePlugin poskytuje API do databázy SQLite zariadenia a slúži ako skutočný mechanizmus pretrvávania. Jednoduchú úložnú službu môžeme vytvoriť nasledujúcim spôsobom:

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

Môžete si stiahnuť kód na načítanie a pridanie projektov z GitHubu a vložiť ho na príslušné zástupné symboly. Nezabudnite pridať súbor SQLiteStorageService.js do súboru index.html nad súborom Controller.js a inicializujte ho v radiči úpravou funkcie init radiča:

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

Ak letmo zahliadnete service.addProject (), všimnete si, že zavolá metódu navigator.geolocation.getCurrentPosition (). Cordova má geolokačný doplnok, ktorý môžete použiť na zistenie aktuálnej polohy telefónu. Môžete tiež použiť metódu navigator.geolocation.watchPosition () na prijímanie aktualizácií pri zmene polohy používateľa.

Na záver pridajme obslužné rutiny udalostí radiča na pridávanie a načítanie projektov z databázy:

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 = ' Click to open map '; $div.find('.project-location').html(url); } else { $div.find('.project-location').text('Not specified'); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Ak chcete pridať konzolu a dialógové moduly, vykonajte nasledovné:

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

Plugin cordova.console vám pomôže pri ladení povolením console.log() funkcie v rámci emulátorov.

Aplikácie pre Android môžete ľahko ladiť pomocou diaľkového ladiča Chrome. Po pripojení zariadenia kliknite na rozbaľovaciu ponuku v pravom hornom rohu (pod tlačidlom X), rozbaľte ponuku Viac nástrojov a kliknite na položku Skontrolovať zariadenia. Mali by ste vidieť svoje zariadenie v zozname a malo by byť možné otvoriť jeho ladiacu konzolu.

Safari poskytuje rovnaké funkcie na ladenie aplikácií pre iOS, ktoré bežia na zariadení alebo emulátore pripojenom k ​​USB. Stačí povoliť Nástroje pre vývojárov na karte Nastavenia Safari> Rozšírené.

Doplnok cordova.dialogs umožňuje natívne oznámenia. Bežnou praxou je predefinovanie windows.alert pomocou rozhrania cordova.dialogs API nasledujúcim spôsobom:

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

The overrideBrowserAlert funkcia by mala byť volaná v rámci deviceready obsluha udalosti.

Teraz by ste mali byť schopní pridávať nové projekty a prezerať si tie súčasné z databázy. Ak začiarknete políčko „Zahrnúť polohu“, zariadenie zavolá rozhranie Geolocation API a do projektu pridá vašu aktuálnu polohu.

Poďme pridať aplikáciu do konca nastavením ikony a úvodnej obrazovky. Pridajte do svojho config.xml spis:

www/img

Nakoniec vložte obrázok loga do

|_+_|

priečinok.

Vaša vlastná aplikácia Cordova

Prešli sme základnými krokmi vývoja aplikácie Apache Cordova a použili sme vlastnú architektúru JavaScriptu a Šablóna štýlov CSS . Tento výukový program Cordova bol pokusom ukázať potenciál Apache Cordova ako prostriedku na vývoj mobilných aplikácií pomocou známych technológií, ktorý skracuje čas potrebný na vývoj a úsilie potrebné na vytvorenie viacerých aplikácií pre rôzne platformy.

Pri vytváraní aplikácií, ktoré sa dostanú do výroby, sa však odporúča použiť existujúci rámec. Okrem štruktúrovania vašej aplikácie do preddefinovanej architektúry vám to môže poskytnúť aj sadu komponentov, ktoré vašej aplikácii pomôžu priblížiť sa k natívnemu vzhľadu a dojmu. Niektoré rámce, ktoré stoja za zmienku, sú Iónsky , Rámec7 , Weex , Račňa , Používateľské rozhranie Kendo a Onsen UI . Veľa šťastia!

Súvisiace: Cordova Frameworks: Ionic vs. Framework7

Pochopenie základov

Čo je Cordova?

Apache Cordova je rámec pre vytváranie mobilných aplikácií pre rôzne platformy pomocou štandardných webových technológií. V podstate ide o aplikačný kontajner s webovým zobrazením, ktorý pokrýva celú obrazovku zariadenia.

Čo je PhoneGap?

V súčasnosti sa výraz PhoneGap vzťahuje na produkt postavený spoločnosťou Adobe na vrchole platformy Apache Cordova. Pôvodne to bol rámec, ktorý vytvoril Nitobi predtým, ako ich získala spoločnosť Adobe a otvorila ho ako Apache Cordova.

Čo je to WebView?

WebView pre Android a UIWebView pre iOS sú triedy, ktoré príslušné operačné systémy používajú na zobrazovanie webových stránok na celú obrazovku. Vývojári s nimi môžu zostavovať webové prehliadače alebo v prípade Apache Cordova ich použiť na zobrazenie webovej aplikácie, akoby išlo o natívnu aplikáciu.

Čo je doplnok Cordova?

Pluginy Apache Cordova umožňujú ďalší prístup k funkciám pre rôzne platformy. Môžu to byť hardvérové ​​služby, ako je geolokácia, alebo čisto softvérové ​​funkcie, ako napríklad prístup k databáze SQLite poskytovaný operačným systémom.