Huomautus: Koska tämä kirjoitettiin alun perin, olen päivittänyt tämän artikkelin toimimaan [sähköposti suojattu] 0,0, [sähköposti suojattu] ja [sähköposti suojattu]

Mobiilisovellukset hiipivät kaikkialle, alkaen älypuhelimista ja tableteista, älykelloihin, ja ne löytyvät pian myös muista puettavista. Kehittäminen kullekin erilliselle mobiilialustalle voi kuitenkin olla tyhjentävä tehtävä, varsinkin jos resurssit ovat rajalliset tai jos olet yksi kehittäjä eikä mobiilisovellusten kehitysyritys .

Täällä tulee hyvin perehtynyt Apache Cordova -kehittäjä voi olla kätevä tarjoamalla tapa kehittää mobiilisovelluksia tavallisilla verkkotekniikoilla - HTML5, CSS3 ja JavaScript.

Vuonna 2009 Nitobi-niminen käynnistysyritys loi PhoneGapin, avoimen lähdekoodin sovellusliittymän, jolla pääsee käsiksi alkuperäisiin mobiiliresursseihin, tavoitteena kehittäjät voivat luoda mobiilisovelluksia tavallisilla verkkotekniikoilla. Nitobin näkemyksen mukaan suurin osa mobiilisovelluksista kehitettäisiin pian PhoneGapin avulla, mutta kehittäjillä olisi silti mahdollisuus kirjoittaa natiivikoodi tarvittaessa, joko suorituskykyongelmien vuoksi tai menetelmän puuttumisesta tiettyihin laitteistoihin.

Cordova PhoneGap?

Tällaista ei oikeastaan ​​ole. Tapahtui, että Adobe osti Nitobin vuonna 2011 ja lahjoitti avoimen lähdekoodin ytimen Apache Software Foundationille, joka nimitti sen uudelleen Apache Cordovalle. Yleinen analogia, johon usein törmäät, on se, että Cordova on PhoneGapille mikä WebKit on Chromelle tai Safarille.

Ilmeisesti erot Cordovan ja PhoneGapin välillä olivat alussa vähäiset. Ajan kanssa, Adobe PhoneGap kehitti omat patentoidut piirteensä, kun taas avoimen lähdekoodin yhteisö tuki - ja tukee edelleen - Cordovaa. Tässä Apache Cordova -katsauksessa ja opetusohjelmassa tutkitaan Cordova-sovelluksen kehitystä tarkemmin, ja vaikka jotkut niistä saattavat koskea PhoneGapia, tätä ei pidä pitää PhoneGap-opetusohjelmana, sinänsä .

Apache Cordova -ominaisuudet

Pohjimmiltaan Cordovalla ei ole rajoituksia suhteessa alkuperäisesti kehitettyihin sovelluksiin. Cordovan avulla saat yksinkertaisesti JavaScript-sovellusliittymän, joka toimii natiivikoodin kääreenä ja on yhdenmukainen kaikissa laitteissa. Voit pitää Cordovaa verkkosovellussovelluksena, joka kattaa laitteen koko näytön. Cordovan käyttämä verkkonäkymä on sama web-näkymä, jota natiivi käyttöjärjestelmä käyttää. IOS: ssä tämä on oletusarvo Objective-C UIWebView tai mukautettu WKWebView luokka; Androidissa tämä on android.webkit.WebView.

Apache Cordovan mukana tulee joukko valmiita laajennuksia, jotka tarjoavat pääsyn laitteen kameraan, GPS: ään, tiedostojärjestelmään jne. Mobiililaitteiden kehittyessä lisälaitteiden tuen lisääminen on yksinkertaisesti uusien laajennusten kehittämistä.

Lopuksi Cordova-sovellukset asennetaan aivan kuten alkuperäiset sovellukset . Tämä tarkoittaa, että koodin rakentaminen iOS: lle tuottaa IPA-tiedoston, Androidille APK-tiedoston ja Windows Phone -rakennus XAP-tiedoston. Jos panostat kehitystyöhön tarpeeksi, käyttäjät eivät ehkä edes tiedä, etteivät he käytä natiivisovellusta.

Apache Cordovan kehitystyönkulut

Cordovalla kehittäessäsi voit seurata kahta peruspolkua:

• Kun aiot ottaa käyttöön sovelluksen mahdollisimman monelle alustalle, vain vähän tai ei ollenkaan alustekohtaista kehitystä, sinun on käytettävä alustojen välistä työnkulkua. Päätyökalu, joka tukee tätä työnkulkua, on Cordovan komentoriviliitäntä (CLI), joka toimii korkeamman tason abstraktiona sovelluksen konfiguroinnissa ja rakentamisessa eri alustoille. Tämä on yleisimmin käytetty kehityspolku.
• Jos aiot kehittää sovellustasi tiettyä alustaa ajatellen, sinun on käytettävä alustakeskeistä työnkulkua. Näin voit säätää ja muokata koodiasi alemmalla tasolla sekoittamalla alkuperäiset komponentit Cordova-komponenttien kanssa. Vaikka voit käyttää tätä lähestymistapaa alustojen väliseen kehitykseen, prosessi on pidempi ja työläs.

Yleensä on suositeltavaa aloittaa alustojen välisestä kehitystyönkulusta, koska siirtyminen alustakeskeiseen kehitykseen on melko suoraviivaista. Jos kuitenkin aloitat alustakeskeisellä työnkululla, et voi siirtyä alustojen väliseen kehitykseen, koska CLI korvaa mukautuksesi, kun suoritat koontimenettelyn.

Edellytykset ja Cordovan asennus

Ennen kuin asennat ja suoritat mitään Cordovaan liittyviä asioita, sinun on asennettava SDK jokaiselle alustalle, jolle aiot rakentaa sovelluksesi. Keskitymme tässä artikkelissa Android-alustaan; prosessi, johon liittyy muita alustoja, on kuitenkin samanlainen.

Sinun tulee ladata löydetty Android SDK tässä . Windowsille SDK tulee asennusohjelmana, kun taas Linuxille ja OSX: lle se on arkisto, joka voidaan yksinkertaisesti purkaa. Paketin purkamisen / asentamisen jälkeen sinun on lisättävä sdk/tools ja sdk/platform-tools hakemistot PATH muuttuja. PATH muuttujaa käyttää Cordova etsimään rakennusprosessille tarvittavia binäärejä. Jos Java-sovellusta ei ole asennettu, asenna JDK yhdessä Antin kanssa. ANT_HOME ja JAVA_HOME tulisi asettaa JDK: n ja Antin roskakorikansioihin, ja kun olet asentanut Android SDK: n, aseta ANDROID_HOME muuttuja arvoon Android/Sdk. Kaikki sijainnit kolmessa *_HOME muuttujien tulisi olla myös PATH muuttuja.

Kun olet asentanut SDK android komento tulee saataville komentorivillesi. Suorita se avaamaan SDK-hallinta ja asentamaan uusimmat työkalut ja Android-sovellusliittymä. Tarvitset todennäköisesti Android SDK -työkalut, Android SDK -alustatyökalut, Android SDK -rakennustyökalut, SDK-foorumi, Google-sovellusliittymät Intel x86 Atom -järjestelmäkuva, Android SDK: n lähteet ja Intel x86 -emulaattorikiihdytin (HAXM-asennusohjelma) . Sen jälkeen voit luoda emulaattorin android avd.

Cordova CLI riippuu Node.js: stä ja Git-asiakkaasta, joten lataa ja asenna solmu osoitteesta nodejs.org ja Git from git-scm.com . Käytät npm: tä itse Cordova CLI: n asentamiseen sekä lisälaajennusten asentamiseen, ja Cordova käyttää gitiä kulissien takana ladatakseen tarvittavat riippuvuudet. Lopuksi aja

npm install -g cordova

… Cordova CLI: n asentaminen maailmanlaajuisesti (npm install cordova ei yksin riitä.)

Yhteenvetona voidaan todeta, että tarvitset seuraavat paketit:

• Java
• Muurahainen
• Android SDK
• SolmuJS
• Mennä

Ja nämä ympäristömuuttujat on päivitettävä:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bootstrapping-sovellus

Jos olet asentanut Cordovan onnistuneesti, sinulla on nyt oltava pääsy Cordova-komentorivin apuohjelmaan. Avaa pääte tai komentorivi ja siirry hakemistoon, johon haluat luoda ensimmäisen Cordova-projektisi. Voit käynnistää sovelluksen kirjoittamalla seuraavan komennon:

cordova create toptal toptal.hello HelloApeeScape

Komentorivi koostuu komennon nimestä cordova, jota seuraa alikomento create. Alikomentoon kutsutaan kolme lisäparametriä: Kansio, johon sovellus sijoitetaan, sovelluksen nimitila ja sen näyttönimi. Tämä käynnistyshihna pakottaa sovelluksen kansioon, jolla on seuraava rakenne:

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

www kansio sisältää sovelluksen ytimen. Täällä sijoitat sovelluskoodisi, joka on yhteinen kaikille alustoille.

Vaikka Cordovan avulla voit helposti kehittää sovelluksen eri alustoille, sinun on joskus lisättävä mukautuksia. Kun kehität useita käyttöympäristöjä, et halua muokata lähdetiedostoja eri platforms/[platform-name][assets]/www hakemistoja, koska ne korvataan säännöllisesti ylätasolla www tiedostot.

Tässä vaiheessa voit myös avata config.xml tiedosto ja muuta sovelluksesi metatietoja, kuten tekijä ja kuvaus.

Lisää ensimmäinen foorumi seuraavilla tavoilla:

cordova platform add android

Jos muutat mieltäsi myöhemmin, voit poistaa alustan rakennusprosessista helposti:

cordova platform rm android

Tarkastellessasi alustan hakemistoa huomaat android sen kansio. Cordova luo jokaiselle lisäämällesi alustalle uuden hakemiston alustoille ja kopioi www sen kansio. Jos esimerkiksi haluat mukauttaa sovellustasi Androidille, voit muokata tiedostoja platforms/android/assets/www -sivulla ja vaihda alustakohtaisiin kuorityökaluihin.

Muista kuitenkin, että jos rakennat sovelluksesi uudelleen CLI: llä (käytetään alustojen väliseen kehitykseen), Cordova korvaa jokaiselle alustalle tekemäsi muutokset, joten joko varmista, että sinulla on ne versionhallinnan alla, tai teet alustakohtaisen muutokset, kun olet suorittanut alustojen välisen kehityksen. Kuten aiemmin mainitsimme, siirtyminen alustojen väliseltä alustakohtaiselle kehitykselle on helppoa. Toiseen suuntaan siirtyminen ei ole.

Jos haluat jatkaa alustojen välisen työnkulun käyttöä ja silti tehdä alustakohtaisia ​​mukautuksia, käytä ylätason yhdistämiskansiota. Cordovan versiosta 3.5 alkaen tämä kansio on poistettu oletussovelluspohjalta, mutta jos tarvitset sitä, voit yksinkertaisesti luoda sen muiden ylätason hakemistojen (hooks, platforms, plugins ja www).

Alustakohtaiset mukautukset sijoitetaan merges/[platform-name] -kansioon ja niitä käytetään ylätason lähdetiedostojen jälkeen www kansio. Tällä tavoin voit joko lisätä uusia lähdetiedostoja tietyille alustoille tai voit ohittaa kokonaiset ylätason lähdetiedostot alustakohtaisilla. Otetaan esimerkiksi seuraava rakenne:

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

Tässä tapauksessa Android-tulostetiedosto sisältää sekä app.js ja android.js tiedostoja, mutta Windows Phone 8: n tulostetiedosto sisältää vain app.js tiedosto, joka löytyy merges/wp8 kansion, koska tiedostot merges/[platform] ohittaa tiedostot kansiossa www

Laajennushakemisto sisältää tietoja kunkin alustan laajennuksista. Tässä vaiheessa sinulla pitäisi olla vain android.json tiedosto, jonka rakenteen tulisi olla seuraava:

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

Rakennetaan sovellus ja asennetaan se Android-laitteeseen. Voit käyttää emulaattoria myös, jos haluat.

Cordova tarjoaa useita CLI-vaiheita sovellusten rakentamiseen ja käyttämiseen: cordova prepare, cordova compile, cordova build (joka on oikopolku kahdelle edelliselle), cordova emulate ja cordova run (johon sisältyy build ja joka voi käyttää myös emulaattoria). Tämän ei pitäisi hämmentää sinua, koska useimmissa tapauksissa haluat rakentaa ja käyttää sovellustasi emulaattorissa:

cordova run --emulator

Halutessasi voit kytkeä laitteen USB-portin kautta, ottaa käyttöön USB-virheenkorjaustilan ja ottaa ensimmäisen Apache Cordova -sovelluksen suoraan laitteeseesi:

cordova run

Tämä kopioi kaikki tiedostosi platforms/* ja suorita kaikki vaaditut tehtävät.

Voit rajoittaa rakennusprosessin laajuutta määrittämällä alustan, jolle haluat rakentaa sovelluksen, nimen ja / tai jopa tietyn emulaattorin, esimerkiksi:

cordova run android --emulator

tai

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

Käytännöllinen Apache Cordova -opetusohjelma

Luodaan yksinkertainen opetusohjelma, joka osoittaa Cordovan ja sen laajennusten käytön. Koko demo löytyy osoitteesta tämä GitHub-arkisto jotta voit ladata sen ja käydä läpi osia tämän lyhyen Cordova-opetusohjelman kanssa.

Käytämme luomiasi alkuasetuksia ja lisätään lisäkoodi. Oletetaan, että haluamme lisätä uusia projekteja kuvitteelliseen ApeeScape-tietokantaan sekä tarkastella olemassa olevia. Avaa index.html ja määritä kaksi välilehteä seuraavasti:

Hello ApeeScape

• Search Projects
• Post a Project

Huomaa, että olen lisännyt Bootstrapin ja jQuery Mobiili riippuvuuksina. Huomaa, että nykyaikaisten hybridisovellusten rakentamiseen on kehitetty paljon parempia ratkaisuja ja kehyksiä, mutta koska suurin osa (ellei kaikki) verkkokehittäjät tuntevat nämä kaksi kirjastoa, on järkevää käyttää niitä aloittelijoiden opetusohjelmaan. Voit ladata tyylitaulukot GitHubista tai käyttää omia, jos haluat.

Siirrytään kohtaan index.js ja poista se seuraaviin:

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

Muista, että Cordova-sovellusten suosima arkkitehtuuri on asettamassa yhden sivun sovellusta (SPA). Näin kaikki resurssit ladataan vain kerran, kun sovellus käynnistetään, ja ne voivat pysyä verkkonäkymässä niin kauan kuin sovellus on käynnissä. Lisäksi SPA: n kohdalla käyttäjällä ei ole sivujen uudelleenlatauksia, jotka eivät ole vain tyypillisiä natiivisovelluksille. Pidä tämä mielessä, asettakaamme yksinkertainen ohjain vaihtamaan kahden välilehden välillä:

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

Ohjaimella on toistaiseksi kaksi tapaa, yksi hakunäkymän ja toinen postiprojektinäkymän hahmontamiseen. Alustetaan se index.js -sivullamme tiedosto ilmoittamalla se ensin yläosaan ja muodostamalla se onDeviceReady-menetelmällä:

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

Lisää lopuksi komentoviittaus kohtaan index.html viittauksen yläpuolelle index.js. Voit ladata haku- ja lähetysnäkymät suoraan GitHubista. Koska osittaiset näkymät luetaan tiedostosta, jotkin Chrome-selaimet, kun he yrittävät hahmottaa sivua, valittavat verkkotunnusten välisistä pyynnöistä.

Mahdollinen ratkaisu tässä olisi paikallisen staattisen palvelimen suorittaminen esimerkiksi node-static: n avulla npm-moduuli. Täällä voit myös alkaa miettiä joidenkin puitteiden, kuten PhoneGap ja / tai Ionic, käyttöä. Kaikki niistä tarjoavat erilaisia ​​kehitystyökaluja, mukaan lukien emulointi selaimessa, pikalataus ja koodin generointi (rakennustelineet).

Asennetaan toistaiseksi yksinkertaisesti Android-laitteeseen suorittamalla seuraavat:

cordova run android

Tässä vaiheessa sovelluksessasi tulisi olla kaksi välilehteä. Ensimmäisen välilehden avulla voidaan etsiä projekteja:

Toisen välilehden avulla voidaan lähettää uusia projekteja:

Meillä on nyt vain klassinen verkkosovellus, joka toimii verkkonäkymässä. Emme ole oikeastaan ​​käyttäneet mitään alkuperäisiä ominaisuuksia, joten yritetään tehdä se nyt. Yleinen kysymys on, miten tietoja voidaan tallentaa paikallisesti laitteelle, tai tarkemmin sanottuna, minkä tyyppistä tallennustilaa käytetään. On olemassa useita tapoja mennä:

• Paikallinen varasto
• WebSQL
• IndeksoituDB
• Palvelinpuolen tallennustila, johon pääsee verkkopalvelun kautta
• Kolmannen osapuolen laajennukset tarjoavat muita vaihtoehtoja

LocalStorage on hyvä pienien tietomäärien tallentamiseen, mutta se ei riitä, jos rakennat paljon tietoliikennettä käyttävää sovellusta, koska käytettävissä oleva tila vaihtelee 3–10 Mt. IndexedDB voi olla parempi ratkaisu tähän tapaukseen. WebSQL on vanhentunut eikä sitä tueta joillakin alustoilla. Lopuksi verkkopalveluiden käyttö tietojen noutamiseen ja muokkaamiseen sopii hyvin SPA-paradigmaan, mutta se hajoaa, kun sovelluksesi menee offline-tilaan. PWA-tekniikat yhdessä huoltotyöntekijöiden kanssa ovat viime aikoina tulleet Cordovan maailmaan auttamaan tässä.

Lisäksi on olemassa paljon muita kolmannen osapuolen laajennuksia, jotka tulevat täyttämään aukot Cordovan ytimessä. Tiedosto-laajennus voi olla varsin hyödyllinen, koska se tarjoaa pääsyn laitteen tiedostojärjestelmään, jolloin voit luoda ja tallentaa tiedostoja. Kokeile toistaiseksi SQLitePluginia, joka tarjoaa sinulle paikallisen SQLite-tietokannan. Voit lisätä sen projektiisi suorittamalla:

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

SQLitePlugin tarjoaa API: n laitteen SQLite-tietokantaan ja toimii todellisena pysyvyysmekanismina. Voimme luoda yksinkertaisen tallennuspalvelun seuraavalla tavalla:

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

Voit ladata koodin projektien hakemista ja lisäämistä varten GitHubista ja liittää sen vastaaviin paikkamerkkeihin. Älä unohda lisätä SQLiteStorageService.js index.html-tiedostoon Controller.js: n yläpuolelle ja alusta se ohjaimessa muokkaamalla Controllerin init-toimintoa:

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

Jos vilkaiset service.addProject () -ohjelmaa, huomaat, että se kutsuu navigator.geolocation.getCurrentPosition () -menetelmää. Cordovalla on paikkatietolaajennus, jonka avulla voit saada puhelimen nykyisen sijainnin, ja voit jopa käyttää navigator.geolocation.watchPosition () -menetelmää päivitysten vastaanottamiseksi käyttäjän sijainnin muuttuessa.

Lisätään lopuksi ohjaimen tapahtumakahvat projektien lisäämiseen ja hakemiseen tietokannasta:

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

Lisää konsoli ja valintaikkunan laajennukset suorittamalla seuraavat toimet:

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

Cordova.console-laajennus auttaa sinua virheenkorjauksessa ottamalla käyttöön console.log() emulaattoreiden sisällä.

Voit helposti virheenkorjata Android-sovelluksia Chrome-etävianetsintäohjelman avulla. Kun olet liittänyt laitteesi, napsauta oikeassa yläkulmassa olevaa (X-painikkeen alla) olevaa avattavaa valikkoa, laajenna Lisää työkaluja ja napsauta Tarkasta laitteet. Sinun pitäisi nähdä laitteesi luettelossa ja pystyä avaamaan virhekonsoli.

Safari tarjoaa saman toiminnon USB-liitetyllä laitteella tai emulaattorilla toimivien iOS-sovellusten virheenkorjaukseen. Ota vain kehittäjän työkalut käyttöön Safarin asetukset> Lisäasetukset-välilehdessä.

Cordova.dialogs-laajennus mahdollistaa alkuperäiset ilmoitukset. Yleinen käytäntö on määrittää windows.alert uudelleen menetelmä käyttämällä cordova.dialogs-sovellusliittymää seuraavalla tavalla:

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

overrideBrowserAlert -funktio tulisi kutsua deviceready -alueen sisällä tapahtumakäsittelijä.

Sinun pitäisi nyt pystyä lisäämään uusia projekteja ja tarkastelemaan olemassa olevia projekteja tietokannasta. Jos valitset valintaruudun Sisällytä sijainti, laite soittaa Geolocation API: lle ja lisää nykyisen sijaintisi projektiin.

Lisätään sovellukseen viimeistely asettamalla kuvake ja tilannekuva. Lisää seuraava config.xml -kansioon tiedosto:

www/img

Aseta lopuksi logokuva

|_+_|

-kuvakkeeseen kansio.

Oma Cordova-sovelluksesi

Kävimme läpi Apache Cordova -sovelluskehityksen perusvaiheet ja käytimme omaa JavaScript-arkkitehtuuriamme ja CSS-tyylitaulukko . Tämä Cordova-opetusohjelma yritti osoittaa Apache Cordovan potentiaalin keinona kehittää mobiilisovelluksia tuttuja tekniikoita käyttämällä, mikä lyhensi sekä kehitysaikaa että vaivaa, joka tarvitaan useiden sovellusten rakentamiseen eri alustoille.

Tuotannossa käytettävien sovellusten rakentamisessa on kuitenkin suositeltavaa käyttää olemassa olevaa kehystä. Sen lisäksi, että sovelluksesi jäsennetään ennalta määritetylle arkkitehtuurille, tämä voi myös tarjota sinulle joukon komponentteja, jotka auttavat sovellustasi tulemaan lähemmäksi alkuperäistä ulkoasua. Jotkut huomionarvoiset kehykset ovat Ioninen , Kehys 7 , Weex , Räikkä , Kendo-käyttöliittymä ja Onsen-käyttöliittymä . Onnea!

Liittyvät: Cordova-kehykset: Ionic vs. Framework7

Perustietojen ymmärtäminen

Mikä on Cordova?

Apache Cordova on kehys useiden alustojen mobiilisovellusten luomiseen tavanomaisia ​​verkkotekniikoita käyttäen. Pohjimmiltaan se on sovellussäiliö, jossa on verkkonäkymä, joka peittää laitteen koko näytön.

Mikä on PhoneGap?

Nykyään PhoneGap viittaa Adoben Apache Cordovan päälle rakentamaan tuotteeseen. Alun perin se oli Nitobin tekemä kehys, ennen kuin Adobe hankki ne ja hankki avoimen lähteen Apache Cordovana.

Mikä on WebView?

Androidin WebView ja iOS: n UIWebView ovat luokkia, joita vastaavat käyttöjärjestelmät käyttävät verkkosivujen näyttämiseen koko ruudulla. Kehittäjät voivat rakentaa verkkoselaimia heidän kanssaan, tai Apache Cordovan tapauksessa käyttää niitä verkkosovelluksen näyttämiseen ikään kuin se olisi natiivisovellus.

Mikä on Cordova-laajennus?

Apache Cordova -laajennukset mahdollistavat pääsyn monen alustan ominaisuuksiin. Nämä voivat olla laitteistopohjaisia ​​palveluita, kuten maantieteellinen sijainti, tai puhtaasti ohjelmistopohjaisia ​​toimintoja, kuten käyttöjärjestelmän tarjoama SQLite-tietokantakäyttö.