{"id":4311,"date":"2016-06-12T19:02:25","date_gmt":"2016-06-12T17:02:25","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=4311"},"modified":"2019-01-05T19:58:54","modified_gmt":"2019-01-05T17:58:54","slug":"ionic-framework-mailgun-api-email","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-framework-mailgun-api-email\/","title":{"rendered":"Slanje e-maila iz Ionic mobilne aplikacije pomo\u0107u Mailgun APIja"},"content":{"rendered":"

Kada korisnicima va\u0161e Ionic <\/em>mobilne aplikacije \u017eelite omogu\u0107iti da vam direktno iz nje po\u0161alju e-mail bez potrebe za pokretanjem njihovog zadanog e-mail klijenta imate dvije mogu\u0107nosti. Slo\u017eiti svoj API ili koristiti API koji vam nudi Mailgun<\/a><\/em>. Mailgun omogu\u0107ava slanje 10 000 e-mailova mjese\u010dno potpuno besplatno, a detalje o implementaciji mo\u017eete vidjeti u nastavku blog posta i u njihovoj dokumentaciji<\/a>.<\/p>\n

Podrazumijeva se da ste prije toga postavili razvojnu okolinu<\/a>, pokrenuli novi Ionic <\/em>projekt<\/a> i dodali podr\u0161ku za Android <\/em>platformu<\/a>.<\/p>\n

$ ionic start PrimjerAplikacije blank\r\n$ cd PrimjerAplikacije\r\n$ ionic platform add android<\/pre>\n
Postavljanje kontrolera<\/h3>\n
Kontroler koji \u0107emo u ovom primjeru staviti u www\/js\/app.js<\/strong><\/p>\n
U kontroleru mo\u017eete odmah definirati primatelja  $scope.recipient = “tomislavstankovic@example.com”;<\/span> kako ga korisnici aplikacije ne bi morali svaki put unositi. Zapravo primatelj u ovom slu\u010daju uop\u0107e ne mora biti vidljiv jer ionako je uvijek isti, ali za potrebe ovog blog posta \u0107u ga ostaviti vidljivog u formi.<\/p>\n
angular.module('starter', ['ionic'])\r\n \r\n.run(function($ionicPlatform) {\r\n    $ionicPlatform.ready(function() {\r\n        if(window.cordova && window.cordova.plugins.Keyboard) {\r\n            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\r\n            cordova.plugins.Keyboard.disableScroll(true);\r\n        }\r\n        if(window.StatusBar) {\r\n            StatusBar.styleDefault();\r\n        }\r\n    });\r\n})\r\n \r\n.controller(\"EmailCtrl\", function($scope, $http) {\r\n \r\n    var mailgunUrl = \"YOUR_DOMAIN_HERE\";\r\n    var mailgunApiKey = window.btoa(\"api:key-YOUR_API_KEY_HERE\")\r\n\r\n    $scope.recipient = \"tomislavstankovic@example.com\";\r\n \r\n    $scope.send = function(recipient, subject, message) {\r\n        $http(\r\n            {\r\n                \"method\": \"POST\",\r\n                \"url\": \"https:\/\/api.mailgun.net\/v3\/\" + mailgunUrl + \"\/messages\",\r\n                \"headers\": {\r\n                    \"Content-Type\": \"application\/x-www-form-urlencoded\",\r\n                    \"Authorization\": \"Basic \" + mailgunApiKey\r\n                },\r\n                data: \"from=\" + \"ionic@primjeraplikacije.com\" + \"&to=\" + recipient + \"&subject=\" + subject + \"&text=\" + message\r\n            }\r\n        ).then(function(success) {\r\n            console.log(\"SUCCESS \" + JSON.stringify(success));\r\n            $scope.poruka = \"E-mail je uspje\u0161no poslan.\"\r\n        }, function(error) {\r\n            console.log(\"ERROR \" + JSON.stringify(error));\r\n            $scope.poruka = \"E-mail nije poslan.\"\r\n        });\r\n    }\r\n \r\n})<\/pre>\n
Kako bi kontroler uop\u0107e radio ono za \u0161to je namijenjen morate postaviti varijable mailgunUrl<\/strong> (za potrebe testiranja mo\u017eete koristiti njihovu besplatnu sandbox <\/em>domenu) i mailgunApiKey<\/strong>. Sve to dobijete odmah nakon registracije.<\/p>\n
Forma za slanje e-maila<\/h3>\n
Sada mo\u017eete napraviti i formu za slanje.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">\r\n    <title>Ionic & Mailgun<\/title>\r\n    <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\r\n    <link href=\"css\/style.css\" rel=\"stylesheet\">\r\n    <!-- ionic\/angularjs js -->\r\n    <script src=\"lib\/ionic\/js\/ionic.bundle.js\"><\/script>\r\n    <!-- cordova script (this will be a 404 during development) -->\r\n    <script src=\"cordova.js\"><\/script>\r\n    <!-- your app's js -->\r\n    <script src=\"js\/app.js\"><\/script>\r\n  <\/head>\r\n  <body ng-app=\"starter\">\r\n    <ion-pane>\r\n      <ion-header-bar class=\"bar-stable\">\r\n        <h1 class=\"title\">Ionic & Mailgun<\/h1>\r\n      <\/ion-header-bar>\r\n       \r\n      
\r\n          
\r\n                
\r\n