Arhiva Razvoj - Stranica 26 od 27

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.

Što je i čemu služi ngCordova unutar Ionic aplikacije?

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.

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

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<!--

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.

cordova plugin add naziv-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.

$ bower install ngCordova

1	$ bower install ngCordova

Primjetit ćete novi direktorij unutar www/lib/

Sljedeći korak je pozvati ng-cordova.js unutar index.html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

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.

angular.module('starter', [
  'ionic', 
  'starter.controllers', 
  'starter.services', 
  'ngCordova'
  ])

angular.module('starter', [

'ionic',

'starter.controllers',

'starter.services',

'ngCordova'

])

Sada ste spremni za dodavanje pluginova.

cordova plugin add ...

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.

.controller('TestCtrl', function($ionicPlatform, $scope, $cordovaPlugin) {
     $ionicPlatform.ready(function() {
     $scope.devicePlatform = $cordovaPlugin.getPlatform();
  });
})

.controller('TestCtrl', function($ionicPlatform, $scope, $cordovaPlugin) {

$ionicPlatform.ready(function() {

$scope.devicePlatform = $cordovaPlugin.getPlatform();

});

})

Prikažite rezultat.

<ion-view title="Dashboard">
  <ion-content class="has-header padding">
    <h1>Naslov</h1>
     <h2>{{devicePlatform}}</h2>
  </ion-content>
</ion-view>

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

Što je Ionic View?

Kada radite Ionic mobilne aplikacije i želite ih podijeliti s drugima tj. dobiti povratne informacije imate nekoliko mogućnosti:

Svaki put kada napravite neku promjenu svima slati mail koji sadržava .apk/.ipa
Čekati da osobe dođu kod vas kako bi mogli spojiti njihove mobilne uređaje na računalo i ručno instalirati .apk/.ipa
Napraviti Google Play Developer i/ili Apple App Developer korisnički račun, platiti članarinu i postaviti aplikaciju u beta test
Putem Ionic Viewa omogućiti svima da gotovo trenutno vide svaku promjenu koju ste napravili

Vjerujem da vam se najboljom čini zadnja opcija. Upravo to, pa i više od toga omogućava Ionic View kao što ćete vidjeti u nastavku.

1. Registracija

Ako ste se već registrirali prema uputama iz prethodnog blog posta onda ovaj korak možete preskočiti. U suprotnom unesite potrebne podatke i kliknite na Sign Up.

2. Upload aplikacije

U direktoriju aplikacije pokrenite naredbu te unesite svoje korisničko ime i lozinku.

$ ionic upload

1	$ ionic upload

U slučaju da se prvi put prijavljujete, vidjet ćete sljedeće. Posebno obratite pažnju na liniju broj 11 u kojoj se nalazi ID aplikacije. Upravo ćete putem tog ID-a omogućiti određenim osobama da pregledavaju vašu aplikaciju.

No prevoius login existed. Attempting to log in now.

To continue, please login to you Ionic account.
Don't have one? Create a one at: https://apps.ionic.io/signup

Email:
Password:
Logged in! :)
Uploading app...
Saved app_id, writing to ionic.io.bundle.min.js...
Successfully uploaded (ee1b1c1c)

Share your beautiful app with someone:

$ ionic share EMAIL

Saved api_key, writing to ionic.io.bundle.min.js...

No prevoius login existed. Attempting to log in now.

To continue, please login to you Ionic account.

Don't have one? Create a one at: https://apps.ionic.io/signup

Email:

Password:

Logged in! :)

Uploading app...

Saved app_id, writing to ionic.io.bundle.min.js...

Successfully uploaded (ee1b1c1c)

Share your beautiful app with someone:

$ ionic share EMAIL

Saved api_key, writing to ionic.io.bundle.min.js...

3. Preuzimanje Ionic View aplikacije

Preuzmite Ionic View mobilnu aplikaciju. Aplikaciju možete pronaći na Apple App Store i Google Play Store.

Nakon instalacije aplikacije potrebno je samo prijaviti se sa svojim korisničkim podacima. Odaberite aplikaciju, kliknite na Download files i konačno View app.

4. Dijeljenje aplikacije

4.1. Aplikaciju možete početi dijeliti pomoću naredbe

$ ionic share mojmail@example.com

1	$ ionic share mojmail@example.com

Nakon čega pozvanoj osobi stiže email

Aplikaciju također možete vidjeti i na https://apps.ionic.io/apps

U web sučelju možete vidjeti kome ste sve poslali pozivnice za pristup vašoj aplikaciji, vidjeti koje su osobe pozivnicu prihvatile i poslati nove pozivnice.

4.2. Aplikaciju možete podijeliti i pomoću ID-a na način da unesete ID aplikacije i učitate aplikaciju u sučelje Ionic Viewa.

Zaključak

Ionic View je odličan i jednostavan način da podijelite svoju aplikaciju, posebno tijekom razvoja. Osim toga Ionic.io nudi još i Ionic Push, Ionic Analytics, Ionic Deploy i Ionic User. O tim funkcionalnostima se ima što za pisati tako da ih neću detaljnije obrađivati u ovom blog postu, ali planiram u nekom od sljedećih.