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

Share Button

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.

Postavljanje kontrolera

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

U kontroleru možete odmah definirati primatelja $scope.recipient = "tomislavstankovic1@gmail.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.

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.

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

Ionic & Mailgun forma za slanje e-maila

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

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

Sada ste spremni za slanje prvog e-maila.

Ionic Framework & Mailgun API - Uspješno poslan email

I to je to. Provjerite svoj inbox.

Ionic Framework & MailgunAPI uspješno primljen e-mail-1

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

Share Button

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.

$cordovaNetwork plugin

Dodajte ga u Ionic aplikaciju pokretanjem naredbe

Nakon instalacije u direktoriju plugins primjetit ćete novi direktorij cordova-plugin-network-information

Ionic Cordova Network plugin

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.

Prikaz statusa internet veze

Na mobilnom uređaju to izgleda ovako

Ionic ngCordova Network Android

Apache Cordova

Sljedećim primjerom pokrivate opciju kada mobilni uređaj nije povezan s internetom (Connection.NONE). U ovom primjeru ne treba vam ngCordova.

Na mobilnom uređaju to izgleda ovako

Ionic Cordova Network Android

Koristiti factory!?

Najbolja opcija je napraviti factory koji onda možete koristiti kroz cijelu Ionic aplikaciju.

Factory možete pozvati u bilo koji kontroler.

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

Share Button

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

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

Ionic Framework predlosci

Pokretanje projekta

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

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

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.

Pregled aplikacije u web pregledniku

$ ionic serve --lab
$ ionic serve –lab

Pristupite direktoriju u kojemu se nalazi vaš projekt.

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.

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.

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.

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.