Mobilne aplikacije se prikradejo povsod, začenši s pametnimi telefoni in tabličnimi računalniki, do pametnih ur, kmalu pa jih najdemo tudi v drugih nosljivih napravah. Vendar je lahko razvoj za vsako ločeno mobilno platformo izčrpna naloga, še posebej, če so vaši viri omejeni ali če ste en sam razvijalec in ne podjetje za razvoj mobilnih aplikacij .
Tu je postajanje dobro podkovan razvijalec Apache Cordova lahko pridejo v poštev z zagotavljanjem načina za razvoj mobilnih aplikacij z uporabo standardnih spletnih tehnologij - HTML5, CSS3 in JavaScript.
Leta 2009 je zagon z imenom Nitobi ustvaril PhoneGap, odprtokodni API za dostop do izvornih mobilnih virov, s ciljem razvijalcem omogočiti, da ustvarjajo mobilne aplikacije z uporabo standardnih spletnih tehnologij. V Nitobijevi viziji bi večino mobilnih aplikacij kmalu razvili s pomočjo PhoneGap, vendar bi razvijalci še vedno imeli možnost pisanja izvorne kode, kadar je to potrebno, pa naj bo to zaradi težav z zmogljivostjo ali pomanjkanja načina dostopa do določene strojne opreme.
Tega v resnici ni. Zgodilo se je, da je Adobe leta 2011 kupil Nitobi in odprtokodno jedro podaril fundaciji Apache Software Foundation, ki ga je preimenovala v Apache Cordova. Pogosta analogija, s katero boste pogosto naleteli, je, da je Cordova PhoneGap, kaj je WebKit za Chrome ali Safari.
Očitno so bile razlike med Cordovo in PhoneGapom na začetku minimalne. S časom, Adobe PhoneGap razvil svoj nabor lastniških funkcij, medtem ko je Cordova podpirala in je še vedno podprta s strani odprtokodne skupnosti. Ta pregled in vadnica Apache Cordova bo podrobneje preučila razvoj aplikacije Cordova, in čeprav se nekateri od njih lahko nanašajo na PhoneGap, tega ne bi smeli obravnavati kot vadnico PhoneGap, same po sebi .
Cordova v bistvu nima nobenih omejitev glede na samorazvite programe. Kar dobite pri Cordovi, je preprosto API za JavaScript, ki služi kot ovoj za domačo kodo in je skladen med napravami. Cordova lahko štejete za vsebnik aplikacije s spletnim pogledom, ki pokriva celoten zaslon naprave. Spletni pogled, ki ga uporablja Cordova, je enak spletnemu pogledu, ki ga uporablja izvorni operacijski sistem. V iOS-u je to privzeti Objective-C UIWebView
ali po meri WKWebView
razred; v Androidu je to android.webkit.WebView
.
Apache Cordova ima nabor vnaprej razvitih vtičnikov, ki omogočajo dostop do kamere, GPS-ja, datotečnega sistema itd. Ko se mobilne naprave razvijajo, je dodajanje podpore za dodatno strojno opremo zgolj stvar razvoja novih vtičnikov.
Končno se namestijo aplikacije Cordova tako kot domače aplikacije . To pomeni, da bo izdelava vaše kode za iOS ustvarila datoteko IPA, za Android datoteko APK, gradnja za Windows Phone pa datoteko XAP. Če se dovolj potrudite v razvojni postopek, se vaši uporabniki morda niti ne zavedajo, da ne uporabljajo izvorne aplikacije.
Pri razvoju s Cordovo lahko sledite dvema osnovnima poti:
Običajno je priporočljivo začeti z razvojem med platformami, saj je prehod na razvoj, osredotočen na platformo, dokaj enostaven. Če pa sprva začnete z delovnim tokom, osredotočenim na platformo, ne boste mogli preklopiti na razvoj več platform, saj bo CLI po zagonu postopka gradnje prepisal vaše prilagoditve.
Preden namestite in zaženete kar koli, kar je povezano s Cordovo, boste morali namestiti SDK za vsako platformo, za katero nameravate izdelati svojo aplikacijo. V tem članku se bomo osredotočili na platformo Android; vendar je postopek, ki vključuje druge platforme, podoben.
Naložite najti najdeni Android SDK tukaj . Za Windows je SDK nameščen, za Linux in OSX pa kot arhiv, ki ga lahko preprosto izvlečete. Po ekstrakciji / namestitvi paketa boste morali dodati sdk/tools
in sdk/platform-tools
imenike na vaš PATH
spremenljivka. The PATH
spremenljivka uporablja Cordova za iskanje binarnih datotek, ki jih potrebuje za postopek gradnje. Če Java ni nameščena, namestite JDK skupaj z Antom. ANT_HOME
in JAVA_HOME
je treba nastaviti na mape za smeti JDK in Ant, po namestitvi paketa Android SDK pa ANDROID_HOME
spremenljivka na Android/Sdk
. Vse lokacije v treh *_HOME
spremenljivke naj bodo tudi v vašem PATH
spremenljivka.
Po namestitvi SDK android
ukaz bo na voljo v vaši ukazni vrstici. Izvedite ga, da odprete upravitelja SDK in namestite najnovejša orodja in API za Android. Verjetno bi potrebovali Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, Google APIs Intel x86 Atom System Image, Viri za Android SDK in Intel x86 Emulator Accelerator (namestitveni program HAXM) . Po tem boste lahko ustvarili emulator z android avd
.
Cordova CLI je odvisen od Node.js in odjemalca Git, zato nadaljujte in prenesite in namestite Node iz nodejs.org in Git iz git-scm.com . Npm boste uporabljali za namestitev samega Cordova CLI, pa tudi za namestitev dodatnih vtičnikov, Cordova pa bo za prenos potrebnih odvisnosti uporabila git v ozadju. Končno teči
npm install -g cordova
… Za globalno namestitev Cordova CLI (npm install cordova
samo po sebi ni dovolj.)
Če povzamemo, to so paketi, ki jih potrebujete:
In te spremenljivke okolja bo treba posodobiti:
PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME
Če ste uspešno namestili Cordova, bi morali imeti zdaj dostop do pripomočka za ukazno vrstico Cordova. Odprite terminal ali ukazno vrstico in se pomaknite do imenika, v katerem želite ustvariti svoj prvi projekt v Cordovi. Če želite zagnati aplikacijo, vnesite naslednji ukaz:
cordova create toptal toptal.hello HelloApeeScape
Ukazna vrstica je sestavljena iz imena ukaza cordova
, ki mu sledi ukaz create
. Podkomanda se prikliče s tremi dodatnimi parametri: Mapa, kamor bo nameščena aplikacija, imenski prostor aplikacije in njeno prikazno ime. To zažene aplikacijo v mapo z naslednjo strukturo:
toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml
The www
mapa vsebuje jedro vaše aplikacije. Tu boste postavili kodo aplikacije, ki je skupna za vse platforme.
Čeprav vam Cordova omogoča enostavno razvijanje aplikacije za različne platforme, morate včasih dodati prilagoditve. Ko razvijate za več platform, ne želite spreminjati izvornih datotek v različnih platforms/[platform-name][assets]/www
, ker se redno prepisujejo z najvišjo stopnjo www
datotek.
Na tej točki lahko odprete tudi config.xml
datoteko in spremenite metapodatke za vašo aplikacijo, kot sta avtor in opis.
Dodajte svojo prvo platformo z uporabo:
cordova platform add android
Če si pozneje premislite, lahko platformo enostavno odstranite iz postopka gradnje:
cordova platform rm android
Po pregledu imenika platform boste opazili android
mapo v njej. Za vsako platformo, ki jo dodate, bo Cordova ustvarila nov imenik na platformah in podvojila www
mapo v njej. Če na primer želite prilagoditi svojo aplikacijo za Android, lahko datoteke spremenite v platforms/android/assets/www
in preklopite na orodja lupine, specifična za platformo.
Vendar ne pozabite, da bo Cordova, če boste svojo aplikacijo znova zgradili s pomočjo CLI (ki se uporablja za razvoj med platformami), prepisala spremembe, ki ste jih naredili za vsako platformo, zato bodite prepričani, da jih imate pod nadzorom različic, ali pa za platformo. spremembe, ko končate z razvojem več platform. Kot smo že omenili, je prehod s platforme na platformo specifičen razvoj enostaven. Premikanje v drugo smer ni.
Če želite še naprej uporabljati potek delovanja med različnimi platformami in kljub temu izdelovati prilagoditve za posamezne platforme, uporabite mapo za spajanje na najvišji ravni. Od različice Cordova 3.5 dalje je bila ta mapa odstranjena iz privzete predloge aplikacije, če pa jo potrebujete, jo lahko preprosto ustvarite skupaj z drugimi imeniki najvišje ravni (hooks
, platforms
, plugins
in www
).
Prilagoditve za platformo so postavljene v merges/[platform-name]
in uporabljene za izvornimi datotekami na najvišji ravni www
mapo. Na ta način lahko dodate nove izvorne datoteke za določene platforme ali pa preglasite celotne izvorne datoteke na najvišji ravni s posebnimi za platformo. Za primer vzemimo naslednjo strukturo:
merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js
V tem primeru bo izhodna datoteka za Android vsebovala app.js
in android.js
datoteke, vendar bo izhodna datoteka za Windows Phone 8 vsebovala samo app.js
datoteka, ki se nahaja v merges/wp8
mapo, saj so datoteke v merges/[platform]
preglasi datoteke v www
.
Imenik vtičnikov vsebuje informacije o vtičnikih vsake platforme. Na tej točki bi morali imeti samo android.json
datoteka, ki mora imeti naslednjo strukturo:
{ 'prepare_queue': { 'installed': [], 'uninstalled': [] }, 'config_munge': { 'files': {} }, 'installed_plugins': {}, 'dependent_plugins': {} }
Zgradimo aplikacijo in jo namestimo v napravo Android. Če želite, lahko uporabite tudi emulator.
Cordova ponuja več korakov CLI za sestavljanje in zagon vaših aplikacij: cordova prepare
, cordova compile
, cordova build
(kar je bližnjica do prejšnjih dveh), cordova emulate
in cordova run
(ki vključuje build
in lahko zažene tudi emulator). To vas ne bi smelo zmediti, ker bi v večini primerov želeli zgraditi in zagnati aplikacijo v emulatorju:
cordova run --emulator
Če želite, lahko svojo napravo priključite na vrata USB, omogočite način za odpravljanje napak USB in svojo prvo aplikacijo Apache Cordova postavite naravnost v svojo napravo, ki se preprosto izvaja:
cordova run
S tem boste kopirali vse vaše datoteke v platforms/*
in izvedite vse zahtevane naloge.
Obseg postopka gradnje lahko omejite z določitvijo imena platforme, za katero želite zgraditi aplikacijo, in / ali celo določenega emulatorja, npr .:
cordova run android --emulator
ali
cordova run ios --emulator --target='iPhone-8-Plus'
Ustvarimo preprosto vadbeno aplikacijo, ki bo prikazala uporabo Cordove in njenih vtičnikov. Celotno predstavitev najdete v to skladišče GitHub tako da ga lahko prenesete in si ogledate njegove dele skupaj s to kratko vadnico iz Cordove.
Uporabili bomo začetno nastavitev, ki ste jo ustvarili, in dodali dodatno kodo. Recimo, da želimo v namišljeno bazo podatkov ApeeScape dodati nove projekte, pa tudi ogledati obstoječe. Odprite index.html in nastavite dva zavihka na naslednji način:
Hello ApeeScape
Opazite, da sem dodal Bootstrap in jQuery Mobilni kot odvisnosti. Upoštevajte, da so bile za izdelavo sodobnih hibridnih aplikacij razvite veliko boljše rešitve in okviri, toda ker večina (če ne vsi) spletnih razvijalcev pozna te dve knjižnici, jih je smiselno uporabiti za vaje za začetnike. Tabele slogi lahko prenesete iz GitHub ali uporabite svoje, če želite.
Premaknimo se na index.js
datoteko in jo razstavite na naslednje:
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();
Ne pozabite, da zagovorjena arhitektura za aplikacije Cordova postavlja program za eno stran (SPA). Tako se vsi viri naložijo samo enkrat, ko se aplikacija zažene, in lahko ostanejo v spletnem pogledu, dokler se aplikacija izvaja. Poleg tega s SPA-ji uporabnik ne bo mogel ponovno naložiti strani, kar ni preprosto za domače aplikacije. Upoštevajoč to, nastavimo preprost krmilnik za preklapljanje med obema zavihkoma:
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; }
Zaenkrat ima krmilnik dve metodi, eno za upodabljanje iskalnega pogleda in eno za upodabljanje pogleda Post Project. Inicializirajmo ga v naših index.js
datoteko tako, da jo najprej navedete na vrhu in sestavite v metodi onDeviceReady:
// top of index.js var controller = null
// inside onDeviceReady method controller = new Controller();
Na koncu dodajte sklic na skript v index.html
nad sklicem na index.js
. Poglede Search and Post lahko prenesete neposredno iz GitHub-a. Ker se delni pogledi berejo iz datoteke, se bodo nekateri brskalniki, kot je Chrome, med poskusom upodabljanja vaše strani pritoževali nad zahtevami med domenami.
Tu bi bila možna rešitev zagon lokalnega statičnega strežnika, na primer z uporabo node-static
npm modul. Tu lahko začnete razmišljati tudi o uporabi nekega okvira, kot je PhoneGap in / ali Ionic. Vsi ponujajo vrsto razvojnih orodij, vključno z emulacijo v brskalniku, vročim ponovnim nalaganjem in ustvarjanjem kode (gradbeni odri).
Za zdaj se preprosto postavimo na napravo Android, tako da zaženemo naslednje:
cordova run android
Na tej točki mora imeti vaša aplikacija dva zavihka. Prvi zavihek omogoča iskanje projektov:
Drugi zavihek omogoča objavo novih projektov:
Vse, kar imamo zdaj, je klasična spletna aplikacija, ki se izvaja v spletnem pogledu. Pravzaprav nismo uporabili nobene izvorne funkcije, zato poskusimo to storiti zdaj. Pogosto vprašanje je, kako lokalno shraniti podatke v napravi ali natančneje, katero vrsto pomnilnika uporabiti. Obstaja več načinov:
LocalStorage je v redu za shranjevanje majhnih količin podatkov, vendar ne bo zadostovalo, če gradite podatkovno intenzivno aplikacijo, saj je razpoložljiv prostor od 3 do 10 MB. IndexedDB je morda boljša rešitev za ta primer. WebSQL je zastarel in na nekaterih platformah ni podprt. Nazadnje, uporaba spletnih storitev za pridobivanje in spreminjanje podatkov se dobro prilega paradigmi SPA, vendar se pokvari, ko aplikacija preneha delovati. PWA tehnike so skupaj s uslužbenci nedavno prišle v svet Kordove, da bi pri tem pomagale.
Obstaja tudi veliko dodatnih neodvisnih vtičnikov, ki zapolnijo vrzeli v jedru Cordove. Vtičnik File je lahko zelo koristen, saj vam omogoča dostop do datotečnega sistema naprave, ki vam omogoča ustvarjanje in shranjevanje datotek. Za zdaj poskusimo SQLitePlugin, ki vam ponuja lokalno bazo podatkov SQLite. Lahko ga dodate v svoj projekt tako, da zaženete:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin
SQLitePlugin zagotavlja API za bazo podatkov SQLite v napravi in služi kot resnični mehanizem obstojnosti. Preprosto storitev za shranjevanje lahko ustvarimo na naslednji način:
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(); }
Kodo za pridobivanje in dodajanje projektov lahko prenesete iz GitHub-a in jo prilepite v ustrezne ograde. Ne pozabite dodati SQLiteStorageService.js v datoteko index.html nad Controller.js in jo inicializirati v krmilniku, tako da spremenite funkcijo init Controllerja:
initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }
Če si ogledate storitev.addProject (), boste opazili, da pokliče metodo navigator.geolocation.getCurrentPosition (). Cordova ima vtičnik za geolokacijo, s katerim lahko pridobite trenutno lokacijo telefona, lahko pa uporabite tudi metodo navigator.geolocation.watchPosition () za prejemanje posodobitev, ko se položaj uporabnika spremeni.
Na koncu dodajte še ročaje dogodkov krmilnika za dodajanje in pridobivanje projektov iz baze podatkov:
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); }); }); }
Če želite dodati konzolo in vtičnike za pogovorno okno, izvedite naslednje:
cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console
Vtičnik cordova.console vam bo pomagal pri odpravljanju napak z omogočanjem console.log()
funkcijo znotraj emulatorjev.
Z aplikacijami za oddaljeni razhroščevalnik Chrome lahko naloge Android preprosto odpravite. Ko povežete svojo napravo, kliknite spustni meni v zgornjem desnem kotu (pod gumbom X), razširite Več orodij in kliknite Preglej naprave. Na seznamu bi morali videti svojo napravo in imeti možnost, da odpre konzolo za odpravljanje napak.
Safari ponuja enako funkcionalnost za odpravljanje napak aplikacij iOS, ki se izvajajo v napravi ali emulatorju, povezani z USB. Preprosto omogočite orodja za razvijalce na zavihku Safari Settings> Advanced.
Vtičnik cordova.dialogs omogoča izvorna obvestila. Običajna praksa je na novo opredeliti windows.alert
metoda z uporabo API-ja cordova.dialogs na naslednji način:
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
funkcijo je treba poklicati znotraj deviceready
vodnik dogodkov.
Zdaj bi morali imeti možnost dodajanja novih projektov in ogled obstoječih iz baze podatkov. Če potrdite polje »Vključi lokacijo«, bo naprava poklicala Geolocation API in v projekt dodala vašo trenutno lokacijo.
Naj dodamo piko na i aplikaciji z nastavitvijo ikone in začetnega zaslona. V svoj config.xml
dodajte naslednje mapa:
www/img
Na koncu postavite sliko logotipa v
|_+_|mapo.
Šli smo skozi osnovne korake razvoja aplikacije Apache Cordova in uporabili lastno arhitekturo JavaScript in Preglednica slogov CSS . Ta vadnica v Cordovi je poskusila pokazati potencial Apache Cordova kot sredstva za razvoj mobilnih aplikacij z uporabo znanih tehnologij, s čimer se je zmanjšal čas razvoja in napor, potreben za izdelavo več aplikacij za različne platforme.
Vendar pa pri izdelavi aplikacij, ki bodo začele delovati, priporočamo, da uporabite obstoječi okvir. Poleg strukturiranja vaše aplikacije v vnaprej določeni arhitekturi vam lahko to nudi tudi nabor komponent, ki bodo vaši aplikaciji pomagale, da se približa izvornemu videzu in občutku. Nekateri okviri, ki jih je vredno omeniti, so Jonski , Okvir7 , Weex , Ratchet , Kendo UI , in Uporabniški vmesnik Onsen . Srečno!
Sorodno: Cordova Frameworks: Ionic vs. Framework7Apache Cordova je okvir za ustvarjanje mobilnih aplikacij z več platformami z uporabo standardnih spletnih tehnologij. V bistvu gre za vsebnik aplikacij s spletnim pogledom, ki pokriva celoten zaslon naprave.
Danes se PhoneGap nanaša na izdelek, ki ga je Adobe zgradil na vrhu Apache Cordova. Prvotno je bil okvir Nitobi, preden jih je Adobe pridobil in ga odprl kot Apache Cordova.
Android WebView in iOS 'UIWebView sta razreda, ki ju posamezni operacijski sistemi uporabljajo za prikaz spletnih strani v celozaslonskem načinu. Razvijalci lahko z njimi izdelajo spletne brskalnike ali pa jih v primeru Apache Cordova uporabijo za prikaz spletne aplikacije, kot da bi bila izvorna aplikacija.
Vtičniki Apache Cordova omogočajo nadaljnji dostop do funkcij na več platformah. To so lahko storitve, ki temeljijo na strojni opremi, kot je geolokacija, ali izključno programska oprema, kot je dostop do baze podatkov SQLite, ki ga zagotavlja OS.