Jedna od osnovnih pretpostavki prilikom razvoja mobilne aplikacije je da će ista posebno ovisiti o povezanosti s internetom. Zbog toga je važno znati kako upravljati različitim situacijama u kojima ne postoji mrežna povezanost ili je ista ograničena. Kao developer trebate imati mogućnost dohvaćanja statusa mreže kao bi mogli implementirati opcije A (ima interneta – prikaži podatke), B (nema interneta – prikaži kopiju podataka iz lokalne memorije) ili C (nema interneta – prikaži obavijet i čekaj vezu s internetom kako bi prikazao podatke).
Korisnik aplikacije o tome treba biti obaviješten kako ne bi pomislio da nešto nije u redu s njegovim mobilnim uređajem ili s aplikacijom.
Naravno, prije dodavanja $cordovaNetwork plugina već ste pokrenuli novi Ionic projekt, dodali Android platformu i podršku za ngCordova.
|
|
$ ionic start primjerAplikacije blank $ cd primjerAplikacije $ ionic platform add android $ bower install ngCordova |
$cordovaNetwork plugin
Dodajte ga u Ionic aplikaciju pokretanjem naredbe
|
|
cordova plugin add cordova-plugin-network-information |
Nakon instalacije u direktoriju plugins primjetit ćete novi direktorij cordova-plugin-network-information
U dokumentaciji plugina možete vidjeti koje opcije vam pruža Connection objekt.
Connection Type Description
Connection.UNKNOWN Unknown connection
Connection.ETHERNET Ethernet connection
Connection.WIFI WiFi connection
Connection.CELL_2G Cell 2G connection
Connection.CELL_3G Cell 3G connection
Connection.CELL_4G Cell 4G connection
Connection.CELL Cell generic connection
Connection.NONE No network connection
Sljedećim primjerom prikazat ćete informaciju o (ne)postojanju internet veze i vrsti veze.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
angular.module('starter', ['ionic', 'ngCordova']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller('InternetCtrl', function($ionicPlatform, $rootScope, $scope, $cordovaNetwork) { $ionicPlatform.ready(function() { $scope.type = $cordovaNetwork.getNetwork() $scope.isOnline = $cordovaNetwork.isOnline() $scope.isOffline = $cordovaNetwork.isOffline() }); }); |
Prikaz statusa internet veze
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!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>primjerAplikacije</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.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="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <div class="card"> <div class="item item-divider"> Status mreže! </div> <div class="item item-text-wrap" ng-controller="InternetCtrl"> <ul class="list"> <li class="item"> type : {{type}} </li> <li class="item"> isOnline : {{isOnline}} </li> <li class="item"> isOffline : {{isOffline}} </li> </ul> </div> <div class="item item-divider text-right"> <code>ngCordova</code> plugin </div> </ion-content> </ion-pane> </body> </html> |
Na mobilnom uređaju to izgleda ovako
Apache Cordova
Sljedećim primjerom pokrivate opciju kada mobilni uređaj nije povezan s internetom (Connection.NONE). U ovom primjeru ne treba vam ngCordova.
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 |
angular.module('starter', ['ionic']) .run(function($ionicPlatform, $ionicPopup) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } if (window.cordova) { if(window.Connection) { if(navigator.connection.type == Connection.NONE) { $ionicPopup.confirm({ title: "Status mreže", content: "Mobilni uređaj nije povezan s internetom.", buttons: [{ text: 'Ok', type: 'button-positive', }] }) } } }; }); }) |
Na mobilnom uređaju to izgleda ovako
Koristiti factory!?
Najbolja opcija je napraviti factory koji onda možete koristiti kroz cijelu Ionic aplikaciju.
|
|
.factory('internetProvjera', function() { return function internetProvjera() { var internet= true; if (window.cordova) { if (window.Connection) { if (navigator.connection.type == Connection.NONE) { internet= false; } } } return internet; }; }) |
Factory možete pozvati u bilo koji kontroler.
|
|
.controller('primjerCtrl', function($scope, $ionicPopup, internetProvjera) { $scope.nesto= function() { var internet= internetProvjera(); if (internet== true) { //prikaži podatke s vanjskog izvora } else { var alertPopup = $ionicPopup.alert({ title: 'Status mreže', template: 'Za prikaz podataka potreban je internet!' }); } }; }) |
Zaključak
Ovo su samo tri mala informativna primjera kako možete koristiti $cordovaNetwork plugin u Ionic aplikaciji.
Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom.
