U pravilu, sve što radi u web pregledniku radit će i u vašoj hibridnoj mobilnoj aplikaciji. Ipak, mobilne aplikacije često zahtijevaju više od mogućnosti samog web preglednika jer ipak mobilni uređaji imaju različite senzore i ostale funkcionalnosti (žiroskop, vibracija i dr.) bez čega vaša hibridna mobilna aplikacija ne bi bila ništa više od neke obične responzivne web stranice. Tu uskaču Apache Cordova tj. ngCordova koji će vam omogućiti korištenje upravo tih nativnih funkcionalnosti mobilnog uređaja.
Prije nego se odlučite za korištenje nekog plugina zapitajte se koliko vam je stvarno potreban i koja ograničenja povlači za sobom.
P.S. Pluginove isprobavajte i testirajte na mobilnom uređaju umjesto u web pregledniku.
Apache Cordova
Cordova se u vašem Ionic projektu nalazi od samog početka ako se sjetite naredbe $ npm install -g cordova ionic, a da je to stvarno tako možete se uvjeriti ako bacite pogled na index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </head> <body ng-app="starter"> <!-- The nav bar that will be updated as we navigate between views. --> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <!-- The views will be rendered in the <ion-nav-view> directive below Templates are in the /templates folder (but you could also have templates inline in this html file if you'd like). --> <ion-nav-view></ion-nav-view> </body> </html> |
S tako postavljenim Ionic projektom spremni ste za korištenje Cordova pluginova.
Plugin ćete dodati jednostavnom naredbom cordova plugin add. Svaki plugin ima svoju dokumentaciju, ili bi trebao imati, i svakako ju detaljno proučite prije nego se odlučite na korištenje nekog plugina.
|
1 |
cordova plugin add naziv-plugina |
ngCordova
Kako je ovdje primarno riječ o razvoju hibridnih mobilni aplikacija pomoću Ionic Frameworka važno je znati da postoji puno elegantnije rješenje kada su u pitanju pluginovi, a to je ngCordova.
ngCordova je set odabranih Apache Cordova pluginova prilagođenih Ionic Frameworku.
Koristeći Ionic CLI dodajte podršku za korištenje ngCordova pluginova unutar Ionic aplikacije.
|
1 |
$ bower install ngCordova |
Primjetit ćete novi direktorij unutar www/lib/
Sljedeći korak je pozvati ng-cordova.js unutar index.html
|
1 2 |
<script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> |
I zadnji korak je uključiti taj novi modul u Ionic aplikaciju. Otvorite www/js/app.js i dodajte ‘ngCordova’ unutar uglate zagrade.
|
1 2 3 4 5 6 |
angular.module('starter', [ 'ionic', 'starter.controllers', 'starter.services', 'ngCordova' ]) |
Sada ste spremni za dodavanje pluginova.
|
1 |
cordova plugin add ... |
Nakon što ste dodali plugin ubacite njegov kod, kojega ćete vidjeti u dokumentaciji, u kontroler i obavezno ga pišite unutar $ionicPlatform.ready() jer inače bi mogli vidjeti hrpu undefined errora.
|
1 2 3 4 5 |
.controller('TestCtrl', function($ionicPlatform, $scope, $cordovaPlugin) { $ionicPlatform.ready(function() { $scope.devicePlatform = $cordovaPlugin.getPlatform(); }); }) |
Prikažite rezultat.
|
1 2 3 4 5 6 |
<ion-view title="Dashboard"> <ion-content class="has-header padding"> <h1>Naslov</h1> <h2>{{devicePlatform}}</h2> </ion-content> </ion-view> |
Zaključak
Nadam se da ste kroz ovaj blog post uspjeli shvatiti što su Apache Cordova tj. ngCordova i kako na jednostavan način mogu nadopuniti vašu Ionic aplikaciju. U nekom od idućih blog postova planiram prikazati konkretnu implementaciju pojedinih ngCordova pluginova.
