Tomislav Stanković, Autor na Tomislav Stanković

Priprema i objava Ionic aplikacije na Google Play Store

Ako čitate ovaj blog post vjerojatno već imate gotovu Ionic aplikaciju koju još samo želite postaviti na Google Play Store. Na pravom ste mjestu. U ovom blog postu možete vidjeti koje je sve korake potrebno napraviti kako bi Ionic aplikacija bila spremna za objavu.

Ovaj blog post pokriva scenarij objave besplatne Android aplikacije tj. aplikacije koja ne sadržava in-app purchase ili neke druge specijalne uvjete, a Google će vašu aplikaciju odobriti kroz nekoliko sati ili najviše nekoliko dana.

Ovakve slične upute već postoje na službenim Ionic Framework web stranicama, ali one govore samo kako nešto napraviti, ali ne i zašto pa sam primjetio da se većina novih developera češe po glavi prateći sve te silne korake, a da pri tome ne znaju zašto nešto rade. Ovdje ćete dobiti širu sliku i imati mogućnost postaviti pitanje u slučaju da negdje zapnete.

Uvod

Priprema i objava aplikacije, neovisno o tome o kojoj platformi je riječ u osnovi sadržava iste korake:

Mehanizam za potpisivanje aplikacije – za Android se koristi keystore, a za iOS se koristi signing identity. Različiti nazivi, ali ista svrha, a to je omogućiti vam potvrdu da ste autor neke aplikacije. Ta će vam potvrda trebati svaki put kada budete htjeli napraviti nadogradnju (update) aplikacije na trgovini aplikacijama.
Mjesto za unos detalja o aplikaciji – čak i prije nego završite s izradom aplikacije za pretpostaviti je da već znate koje ćete joj ime dati, koja joj je namjena i vjerovatno već imate ostale promotivne materijale pomoću kojih ćete se potencijalnim korisnicima pokušati što više približiti kako bi preuzeli aplikaciju.
Izrada i optimizacija izvršne datoteke koja će se pokretati na mobilnom uređaju – za Android se ta izvršna datoteka tj. APK postavlja direktno na Google Play Store stranici dok se za iOS (IPA) obavlja koristeći Xcode.

Prije izrade produkcijske verzije Ionic aplikacije:

uklonite nepotrebne datoteke koje ste tijekom razvoja aplikacije koristili
uklonite nepotrebne pluginove i ostale dodatke
umanjite slike korištene u aplikaciji tj. kompresirajte ih
kreirajte ikonu aplikacije i početni zaslon

Priprema Android aplikacije

1.) Uklonite Cordova Console plugin

Ovaj vam plugin omogućava testiranje aplikacije tijekom izrade i nije vam potreban u produkciji. Uklonit ćete ga pomoću naredbe:

$ cordova plugin rm cordova-plugin-console

1	$ cordova plugin rm cordova-plugin-console

2.) Kreirajte privatni ključ s kojim ćete potpisati aplikaciju

Bez privatnog ključa aplikaciju niti ne možete postaviti na Google Play Store i zbog toga je jasno koliko je ovaj korak bitan. Ovaj ćete ključ koristiti kroz cijeli životni vijek aplikacije tj. prilikom dodavanja nadogradnji (updatea). Kako bi kreirali privatni ključ koristit ćete keystore unutar naredbenog retka (command-line utility). Privatni ključ vrijedi 10 000 dana što bi trebalo biti više nego dovoljno da pokrije životni vijek aplikacije.

$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg 
RSA -keysize 2048 -validity 10000

1 2	$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg RSA -keysize 2048 -validity 10000

Ova će naredba stvoriti MojaAplikacija.keystore datoteku koju možete smjestiti bilo gdje na računalo i koju morate čuvati jer će vam trebati prilikom prvog potpisivanja aplikacije, ali i prilikom svake nadogradnje. Svaka verzija aplikacije mora biti potpisana sa istim privatnim ključem.

P.S. Ako dobijete poruku „ bash: keytool: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Program Files\Java\jdk1.8.0_111\bin“ pod Environment Variables – System variables – Path.

3.) Kreirajte nepotpisani APK

Pomoću naredbe build izradite nepotpisani APK.

$ cordova build --release android

1	$ cordova build --release android

Novi APK ćete moći pronaći u platforms/android/build/outputs/apk/android-release-unsigned.apk . Kako bi si olakšali idući korak APK možete odmah preimenovati u NazivAplikacije.apk.

4.) Potpišite APK koristeći privatni ključ

Potpisivanje APK-a obavlja se pomoću alata jarsigner. Kopirajte privatni ključ NazivAplikacije.keystore (morate znati lozinku privatnog ključa) i APK NazivAplikacije.apk u istu mapu te pokrenite naredbu:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore 
NazivApliakcije.keystore NazivAplikacije.apk NazivAplikacije

1 2	jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore NazivApliakcije.keystore NazivAplikacije.apk NazivAplikacije

Ako dobijete poruku o grešci ponovite prijašnje korake.

5.) Optimizacija APK-a

Ovo je zadnji korak u pripremi vašeg APK-a za objavu. Alat zipalign će optimizirati vaš APK tako da bolje iskorištava resurse mobilnog uređaja.

Pokrenite naredbu:

$ zipalign -v 4 NazivAplikacije.apk NazivAplikacijeObjava.apk

1	$ zipalign -v 4 NazivAplikacije.apk NazivAplikacijeObjava.apk

U ovom primjeru novi APK koji ćete postaviti na Google Play Store zove se NazivAplikacijeObjava.apk.

P.S. Ako dobijete poruku „ bash: zipalign: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Users\Tomislav\AppData\Local\Android\android-sdk\build-tools\24.0.3“ pod Environment Variables – System variables – Path.

Postavljanje APK-a na Google Play Store

1.) Registracija

Posjetite Google Play Developer Console i registrirajte se.

2.) Prijavite se u Google Developer Console i dodajte aplikaciju klikom na Add new application te navedite jezik i naziv aplikacije pa odaberite Upload APK

3.) Dodajte APK

APK možete odmah poslati u produkciju, ali isto tako možete pokrenuti i alfta tj. beta test ako želite aplikaciju testirati među kontroliranom grupom osoba prije objave produkcijske verzije koja bi bila dostupna svima. Kada pokrenete alfa tj. beta test korisnike možete pozvati unosom njihove adresa elektroničke pošte ili im poslati URL na alfa tj. beta verziju aplikacije.

3.) Odaberite Store Listing kako bi dodali osnovne informacije o aplikaciji

4.) Unesite grafičke elemente

5.) Unesite ostale detalje i kliknite na Save draft u gornjem densom uglu ekrana kako bi sve ranije uneseno spremili

6.) Ispunite kratak upitnik kako bi vaša aplikacija dobila pripadajuću ocjenu (Content Rating) te navedite koje države želite pokriti svojom aplikacijom te eventualno dodajte cijenu (Pricing & Distribution). Svaka stavka iz ovog izbornika mora biti zelena.

7.) Objavite aplikaciju

Kada ste ispunili sve navedeno, Ready to publish, spremni ste za objavu aplikacije Publish app.

Nadogradnja (update)

Svaki sljedeći put kada želite nadograditi aplikaciju morate proći gore navedene korake od 1 do 5 osim koraka 2 jer keystore već imate.

Prije nego ponovite taj proces pobrinite se da u config.xml navedete novi version broj koji mora biti veći od onoga koji se u tom trenutku nalazi na Google Play Store.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.tomislavstankovic.nazivaplikacije" version="0.0.2" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">
  <name>myApp</name>
  <description>
        Primjer Ionic aplikacije.
    </description>
  <author email="you@example.com" href="https://example.com.com/">
     Tomislav Stanković
    </author>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<name>myApp</name>

Primjer Ionic aplikacije.

</description>

Tomislav Stanković

</author>

Kako Ionic aplikaciju ugraditi u postojeće web stranice

Na službenim web stranicama Ionic Frameworka navedena je sljedeća definicija

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

S obzirom da Ionic aplikacija u svojoj osnovi nije ništa više od obične web stranice nameće se pitanje – može li se Ionic aplikacija prikazati kao web aplikacija ili ugraditi u postojeće web stranice? Može.

Neovisno o tome radi li se o Ionic1 ili Ionic2 aplikaciji sve što trebate je uzeti www mapu i smjestiti ju na svoj web server. Npr. u ovom slučaju ja sam www mapu putem FTP-a stavio unutar /public_html/tomislavstankovic.com/ . I to je to.

Ipak, ako koristite ngCordova pluginove za Ionic1 ili Ionic Native za Ionic2 trebate znati da ti dodaci neće raditi u web pregledniku.

Cordova plugins do not work while developing in your browser, because each plugin accesses a specific API (such as camera, microphone, accelerometer) which is not available in your browser. Additionally, some plugins don’t work in the emulator, such as the Camera plugin, so development on your physical device is required.

Jednom kada ste www mapu postavili na web server aplikaciju možete prikazati na dva načina:

1) Direktno putem URL-a na https://example.com/www/

2.) Na web stranici unutar <iframe> taga

<section id="ionic">
  <div class="container">
     <div class="row">
         <div class="col-lg-12 text-center">
              <h2>Primjer ugrađene Ionic aplikcije</h2>
              <iframe src="https://www.tomislavstankovic.com/www/" width="320" height="568"></iframe>
         </div>
      </div>
  </div>
</section>

<h2>Primjer ugrađene Ionic aplikcije</h2>

</div>

</section>

Inače, inspiracija za ovaj blog post stigla je sa StackOverflowa.

Slanje e-maila iz Ionic mobilne aplikacije pomoću Mailgun APIja

Kada korisnicima vaše Ionic mobilne aplikacije želite omogućiti da vam direktno iz nje pošalju e-mail bez potrebe za pokretanjem njihovog zadanog e-mail klijenta imate dvije mogućnosti. Složiti svoj API ili koristiti API koji vam nudi Mailgun. Mailgun omogućava slanje 10 000 e-mailova mjesečno potpuno besplatno, a detalje o implementaciji možete vidjeti u nastavku blog posta i u njihovoj dokumentaciji.

Podrazumijeva se da ste prije toga postavili razvojnu okolinu, pokrenuli novi Ionic projekt i dodali podršku za Android platformu.

$ ionic start PrimjerAplikacije blank
$ cd PrimjerAplikacije
$ ionic platform add android

$ ionic start PrimjerAplikacije blank

$ cd PrimjerAplikacije

$ ionic platform add android

Postavljanje kontrolera

Kontroler koji ćemo u ovom primjeru staviti u www/js/app.js

U kontroleru možete odmah definirati primatelja $scope.recipient = "tomislavstankovic@example.com"; kako ga korisnici aplikacije ne bi morali svaki put unositi. Zapravo primatelj u ovom slučaju uopće ne mora biti vidljiv jer ionako je uvijek isti, ali za potrebe ovog blog posta ću ga ostaviti vidljivog u formi.

angular.module('starter', ['ionic'])
 
.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("EmailCtrl", function($scope, $http) {
 
    var mailgunUrl = "YOUR_DOMAIN_HERE";
    var mailgunApiKey = window.btoa("api:key-YOUR_API_KEY_HERE")

    $scope.recipient = "tomislavstankovic@example.com";
 
    $scope.send = function(recipient, subject, message) {
        $http(
            {
                "method": "POST",
                "url": "https://api.mailgun.net/v3/" + mailgunUrl + "/messages",
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": "Basic " + mailgunApiKey
                },
                data: "from=" + "ionic@primjeraplikacije.com" + "&to=" + recipient + "&subject=" + subject + "&text=" + message
            }
        ).then(function(success) {
            console.log("SUCCESS " + JSON.stringify(success));
            $scope.poruka = "E-mail je uspješno poslan."
        }, function(error) {
            console.log("ERROR " + JSON.stringify(error));
            $scope.poruka = "E-mail nije poslan."
        });
    }
 
})

angular.module('starter', ['ionic'])

.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("EmailCtrl", function($scope, $http) {

var mailgunUrl = "YOUR_DOMAIN_HERE";

var mailgunApiKey = window.btoa("api:key-YOUR_API_KEY_HERE")

$scope.recipient = "tomislavstankovic@example.com";

$scope.send = function(recipient, subject, message) {

$http(

{

"method": "POST",

"url": "https://api.mailgun.net/v3/" + mailgunUrl + "/messages",

"headers": {

"Content-Type": "application/x-www-form-urlencoded",

"Authorization": "Basic " + mailgunApiKey

data: "from=" + "ionic@primjeraplikacije.com" + "&to=" + recipient + "&subject=" + subject + "&text=" + message

}

).then(function(success) {

console.log("SUCCESS " + JSON.stringify(success));

$scope.poruka = "E-mail je uspješno poslan."

}, function(error) {

console.log("ERROR " + JSON.stringify(error));

$scope.poruka = "E-mail nije poslan."

});

}

})

Kako bi kontroler uopće radio ono za što je namijenjen morate postaviti varijable mailgunUrl (za potrebe testiranja možete koristiti njihovu besplatnu sandbox domenu) i mailgunApiKey. Sve to dobijete odmah nakon registracije.

Forma za slanje e-maila

Sada možete napraviti i formu za slanje.

<!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>Ionic & Mailgun</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="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 & Mailgun</h1>
      </ion-header-bar>
       <ion-content ng-controller="EmailCtrl">
      <div class="card">
          <div class="item item-text-wrap">
                <div class="list">
                    <label class="item item-input">
                        <input type="text" placeholder="Primatelj" ng-model="recipient">
                    </label>
                    <label class="item item-input">
                        <input type="text" placeholder="Naslov" ng-model="subject">
                    </label>
                    <label class="item item-input">
                        <textarea placeholder="Poruka" ng-model="message"></textarea>
                    </label>
                </div>
                <button class="button button-block button-positive" ng-click="send(recipient, subject, message)">
                    Pošalji e-mail
                </button>
                <div class="row">
                     <div class="col" ng-show="poruka">{{poruka}}</div>
                </div>
          </div>
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ionic & Mailgun</title>

</head>

<ion-pane>

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic & Mailgun</h1>

</ion-header-bar>

<ion-content ng-controller="EmailCtrl">

</label>

</label>

</label>

</div>

Pošalji e-mail

</button>

<div class="col" ng-show="poruka">{{poruka}}</div>

</div>

</ion-content>

</ion-pane>

</body>

</html>

Forma sada izgleda ovako. Ovisno o potrebama možete određena polja prikazati ili ukloniti.

Ako sada pokrenete aplikaciju u web pregledniku $ ionic serve ili na mobilnom uređaju $ ionic run android dobit ćete poruku o grešci.

XMLHttpRequest cannot load https://api.mailgun.net/v3/mailgunUrl/messages. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

1	XMLHttpRequest cannot load https://api.mailgun.net/v3/mailgunUrl/messages. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Kako bi to zaobišli u index.html dodajte sljedeće, a možete dodati i CORS u Google Chrome.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

1	<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Sada ste spremni za slanje prvog e-maila.

I to je to. Provjerite svoj inbox.

Zaključak

Ovo je samo jedan od mogućih scenarija za slanje elektroničke pošte unutar Ionic aplikacije. Prednost ovakvog načina slanja elektroničke pošte je ta što korisnici ne moraju napustiti vašu Ionic aplikaciju kako bi vam poslali e-mail.

Ionic aplikacija (ni)je povezana s internetom

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

$ 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

1	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.

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

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

<!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>

<!DOCTYPE html>

<html>

<head>

<title>primjerAplikacije</title>

</head>

<ion-pane>

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

<ion-content>

Status mreže!

</div>

type : {{type}}

</li>

isOnline : {{isOnline}}

</li>

isOffline : {{isOffline}}

</li>

</ul>

</div>

<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.

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',
                                   }]
                    })
            }
        }
     };
  });
})

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

.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.

Ikona i početni zaslon Ionic aplikacije

Prva stvar koju će korisnici vidjeti kada požele preuzeti vašu aplikaciju je ikona, a prva stvar koju će vidjeti prilikom pokretanja aplikacije je početni zaslon (Splash Screen). Prema tome, ikona i početni zaslon igraju važnu ulogu za prvi dojam.

S obzirom da Ionic aplikacije možete istovremeno raditi za iOS i Android te da su uređaji na kojima se nalaze različitih dijagonala ekrana postavlja se pitanje kako na što jednostavniji način obuhvatiti sve te uređaje a da na kraju ikona i početni zaslon na oba OS-a i na svim dijagonalama ekrana izgledaju dobro. Odgovor na to je Ionic Resources.

Kada pokrenete novi Ionic projekt i dodate Android platformu

$ ionic start primjerAplikacije tabs
$ cd primjerAplikacije
$ ionic platform add android

$ ionic start primjerAplikacije tabs

$ cd primjerAplikacije

$ ionic platform add android

dobijete direktorij resources u kojemu se nalaze ikona aplikacije icon.png i slika za početni zaslon splash.png

te se u config.xml pojavi sljedeće

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.primjeraplikacije143857" version="0.0.1" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">
  <name>primjerAplikacije</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="you@example.com" href="https://example.com.com/">
      Your Name Here
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
</widget>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<name>primjerAplikacije</name>

An Ionic Framework and Cordova project.

</description>

Your Name Here

</author>

</feature>

</platform>

</widget>

U config.xml po želji možete dodati i druge parametre.

<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="FadeSplashScreen" value="false"/>

Uglavnom, sada već imate ikonu aplikacije i početni zaslon u što se možete uvjeriti pokretanjem naredbe

$ ionic run android

1	$ ionic run android

Prilagođeni početni zaslon i ikona

Ako želite staviti custom ikonu i početni zaslon kopirajte u resources direktorij dvije slike. Jednu naziva icon.png veličine 1024x1024px i splash.png veličine 2208x2208px i pokrenite naredbu

$ ionic resources

1	$ ionic resources

Ionic CLI će automatski izrezati sve potrebne dimenzije ikone i početnog zaslona.

Ako sada pokrenete $ ionic run android vidjet ćete novu ikonu i novi početni zaslon

U slučaju da ne želite istovremeno promijeniti ikonu aplikacije i početni zaslon nego ih postavljate posebno možete koristiti naredbe

$ ionic resources --icon
$ ionic resources --splash

1 2	$ ionic resources --icon $ ionic resources --splash

Ako vam niti to nije dovoljno nego želite koristiti npr. različite ikone za Android i iOS to možete učiniti na način da kopirate icon.png u resources/android/ za Android odnosno u resources/ios/ za iOS.

Zaključak

Ikona vaše Ionic aplikacije i početni zaslon sigurno će utjecati na prvi dojam koji će korisnici dobiti o aplikaciji. U ovom ste blog postu mogli vidjeti koliko je jednostavno promijeniti ih.