Arhiva AngularJS - Tomislav Stanković

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.

Stvaranje novog Ionic projekta

Nakon što ste postavili razvojnu okolinu možete pokrenuti svoj prvi Ionic projekt.

$ ionic start nazivAplikacije vrsta_predloška

1	$ ionic start nazivAplikacije vrsta_predloška

Prije nego krenete u razvoj razmislite za što će služiti aplikacija, koja će joj biti svrha i kako ste ju zamislili. Prema tome možete odabrati predložak koji je najsličniji onome što želite napraviti kako biste si ubrzali posao. Npr. ako želite nešto jednostavnije možete iskoristiti tabs predložak ili ako u startu znate da ćete imati dosta opcija koje želite smjestiti u jedan veći izbornik onda možete početi s predloškom sidemenu.

Vrste predložaka (prva tri su osnovna):
blank – $ ionic start nazivAplikacije blank
tabs – $ ionic start nazivAplikacije tabs
sidemenu – $ ionic start nazivAplikacije sidemenu
maps – $ ionic start nazivAplikacije maps
tests – $ ionic start nazivAplikacije tests
complex-list – $ ionic start nazivAplikacije complex-list
salesforce – $ ionic start nazivAplikacije salesforce

Pokretanje projekta

Pokrenite novi projekt temeljen na tabs predlošku pomoću naredbe

$ ionic start primjerAplikacije tabs

1	$ ionic start primjerAplikacije tabs

i uskoro ćete vidjeti sljedeću poruku s korisnim informacijama o tome kako upravljati aplikacijom. O svemu tome će detaljnije biti riječi kasnije.

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd primjerAplikacije

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: https://ionicframework.com/docs

Your Ionic project is ready to go! Some quick tips:

* cd into your project: $ cd primjerAplikacije

* Setup this project to use Sass: ionic setup sass

* Develop in the browser with live reload: ionic serve

* Add a platform (ios or Android): ionic platform add ios [android]

Note: iOS development requires OS X currently

See the Android Platform Guide for full Android installation instructions:

https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

* Build your app: ionic build <PLATFORM>

* Simulate your app: ionic emulate <PLATFORM>

* Run your app on a device: ionic run <PLATFORM>

* Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: https://ionicframework.com/docs

Osim toga biti će vam ponuđeno da napravite Ionic.io korisnički račun. Ne morate u ovom koraku, jer će vam ta opcija svaki put biti ponuđena, ali svakako napravite svoj Ionic.io korisnički račun.

Create an ionic.io account to send Push Notifications and use the Ionic View app?
(Y/n):

1 2	Create an ionic.io account to send Push Notifications and use the Ionic View app? (Y/n):

Pregled aplikacije u web pregledniku

$ ionic serve --lab — $ ionic serve –lab

Pristupite direktoriju u kojemu se nalazi vaš projekt.

cd primjerAplikacije

1	cd primjerAplikacije

Već sada možete vidjeti kako vaša aplikacija izgleda u web pregledniku. To možete učiniti sljedeće dvije naredbe. Prva prikazuje jedno sučelje aplikacije koje je pogodno za debugiranje, a druga sa dodatkom --lab je uljepšani istovremeni prikaz iOS i Android sučelja.

Važno je za napomenuti da se puno ne pouzdate u ove preglede jer se mogu poprilično razlikovati od verzija koje ćete testirati i provjeravati na mobilnim uređajima. Taj dio ćemo obraditi kasnije. Za sada se držimo web preglednika.

$ ionic serve
$ ionic serve --lab

1 2	$ ionic serve $ ionic serve --lab

Kada pokušate pokrenuti prvu naredbu dobit ćete poruku koja vam nudi na izbor s koje adrese želite da se vaša aplikacija prikaže u web pregledniku. Prva opcija omogućava vam da aplikaciju mogu pregledavati svi u vašoj mreži, dok ćete u drugoj opciji jedino vi na svojem računalu imati pristup aplikaciji.

Ova će vam se opcija prikazati samo jednom.

Multiple addresses available.
Please select which address to use by entering its number from the list below:
 1) 192.0.1.100 (en0)
 2) localhost
Address Selection:

Multiple addresses available.

Please select which address to use by entering its number from the list below:

1) 192.0.1.100 (en0)

2) localhost

Address Selection:

Uređivanje aplikacije

Pretpostavljam da sada već želite dodati nešto svoje u mobilnu aplikaciju. Za to će vam trebati text editor tj. IDE. Notepad++, Sublime Text, Atom, Visual Studio Code,…

Otvorite direktorij vaše aplikacije i spremni ste za uređivanje.

Sublime Text 2 - Ionic tabs app — Sublime Text 2

Sa lijeve strane vidite strukturu direktorija, a sa desne možete uređivati kod. Najvažniji vam je direktorij www i u njemu ćete provesti najviše vremena. Ovdje saznajte više o MVC strukturi Ionic aplikacija.

/www
    /css
        style.css
    /img
    /js
        app.js
        controllers.js
        services.js
     /lib
     /templates
        chat-details.html
        tab-account.html
        tab-chats.html
        tab-dash.html
        tabs.html
index.html

/www

/css

style.css

/img

/js

app.js

controllers.js

services.js

/lib

/templates

chat-details.html

tab-account.html

tab-chats.html

tab-dash.html

tabs.html

index.html

Zaključak

Sve ranije navedeno tiče se pregledavanja aplikacije u web pregledniku. Znači, ako pratite prethodne korake možete pokrenuti novi Ionic projekt, urediti ga u text editoru i prikazati u web pregledniku što je dobro i tako ćete inače raditi.

Ipak, konačni cilj izrade mobilne aplikacije je da se ista može poslati na mobilni uređaj i ondje pokrenuti. Kako to napraviti pokazat ću u sljedećem blog postu.