Nodemailer & NodeJS – API za slanje emaila

Cilj ovog blog posta je pokazati kako napraviti API za slanje emaila. To ću postići koristeći NodeJS, ExpressJS, Nodemailer i naravno Gmail.

Postavljanje projekta

Kreiram mapu za projekt i unutar nje pokrećem naredbu

i odmah nakon toga instaliram potrebne NPM pakete:

Express.js: $ npm install express --save
Nodemailer: $ npm install nodemailer--save
bodyParser: $ npm install body-parser -save

Struktura projekta prema package.json sada izgleda ovako:

Sada imam sve spremno za kreiranje datoteke unutar koje će se nalaziti logika API-ja.

API sada mogu i pokrenuti te se uvjeriti da radi. Pokrećem ga naredbom u kojoj riječ “index” označava naziv .js datoteke.

Nodemailer & NodeJS – API za slanje emaila

To je mogla biti i npr. server.js datoteka. U tom bi slučaju API pokrenuo naredbom $ node server.

Na adresi http://localhost:8080/api mogu vidjeti da je API uspješno pokrenut.

Nodemailer & NodeJS – API za slanje emaila

Slanje testnog e-maila

Unutar datoteke index.js sada ću kreirati API za slanje e-maila.

S obzirom na parametar secureConnection: false vrlo je važno da omogućim dopuštanje nesigurnijim aplikacijama da pristupe računu na adresi https://myaccount.google.com/security?pli=1

“Less Secure Apps” - Google

Jer ako to ne napravim dobit ću poruku o grešci što znači da e-mail neće biti poslan/primljen. Ovaj dio mi je zadavao najviše problema prije dvije godine kada sam prvi put radio Nodemailer API. U pitanju je bila funkcionalnost vezana uz resetiranje lozinke.

Nodemailer & NodeJS – API za slanje emaila

Ako sada putem Postmana pokrenem POST zahtjev na adresu http://localhost:8080/api/posaljiEmail vrlo brzo će mi stići e-mail.

Nodemailer & NodeJS – API za slanje emaila

Zašto se u slici iznad kao adresa primatelja nalazi drugačija adresa od one navedene gore u API-ju? To je zbog postavki unutar Gmaila gdje je navedeno da je adresa k*n*a*t@tomislavstankovic.com zadana adresa pošiljatelja. S obzirom da ovdje koristim Gmail kao servis za slanje e-maila jasno je da će on uzeti te zadane postavke.

Nodemailer & NodeJS – API za slanje emaila

E-mail sa “pravim” podacima

U gornjem sam se primjeru uvjerio da moj Nodemailer API uredno radi, a sada želim imati mogućnost određivanja na koju adresu i koji sadržaj želim poslati.

API sada izgleda ovako:

Nodemailer & NodeJS – API za slanje emaila

Ovdje se može vidjeti da podatke šaljem kroz req.body i upravo je to razlog zbog kojeg koristim body-parser. U slučaju da nisam koristio body-parser dobio bi sljedeću grešku.

Ovdje se može vidjeti da podatke šaljem kroz <span class="lang:js decode:true  crayon-inline">req.body</span> i upravo je to razlog zbog kojeg koristim <strong><em><a href="https://www.npmjs.com/package/body-parser" rel="noopener" target="_blank">body-parser</a></em></strong>. U slučaju da nisam koristio <em>body-parser</em> dobio bi sljedeću grešku.

Također, ako ne unesem sve potrebne podatke body-parser neće imati s čime raditi i opet ću dobiti grešku. U ovom slučaju nisam poslao e-mail adresu primatelja.

Nodemailer & NodeJS – API za slanje emaila

Nakon što unesem sve potrebne podatke, body-parser će odraditi svoje i e-mail će biti uspješno poslan/primljen.

Nodemailer & NodeJS – API za slanje emaila

Uvod u Google Sheets API

Nedavno mi je pala na pamet ideja korištenja Google Sheetsa kao baze podataka za nekakvu jednostavniju web ili mobilnu aplikaciju pa sam išao malo istražiti koje sve mogućnosti Google Sheets API ima i kako ih koristiti. U nastavku se može vidjeti nekoliko primjera na osnovu jednog dokumenta s dvije kartice podataka.

Google Developer konzola

Na URL-u https://console.developers.google.com/ kreiram novi projekt.

Nakon toga klikom na ‘Enable Apis And Services‘ krećem u odabir Google Sheets API-ja kako bi ga aktivirao.

Google Sheets API

Nakon aktivacije kreiram API key koji mi je potreban za slanje upita na API.

Bez njega bi dobio poruku o grešci:

Google Sheets API

Korištenje API-ja

Na sljedećoj se slici može vidjeti koji su mi upiti dostupni

Google Sheets API

Prikaz podataka

Na sljedećoj adresi https://docs.google.com/spreadsheets/d/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/ nalazi se moja proračunska tablica. Njezin ID je 1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M.

Google Sheets API

Ako, prema dokumentaciji na slici iznad, odem na Services > Google Sheets API v4 > sheets.spreadsheets.get i unesem ID svoje proračunske tablice dobit ću rezultat s hrpom, meni trenutno nepotrebnih, meta podatka.

Google Sheets API

S obzirom da se moja proračunska tablica sastoji od dva lista posebno ću pozvati API za svaki list.

Na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Zadaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Zadaci’.

Google Sheets API

Dok na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Podaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Podaci’.

Google Sheets API

Dodavanje podataka

Na sljedećoj adresi https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append nalazi se dokumentacija vezana uz dodavanje sadržaja.

Google Sheets API

Ovo još moram testirati u Postmanu.

Zaključak

Ovo je samo uvod u mogućnosti Google Sheets API-a. Za sada je ovo dovoljno čisto da se vidi kako stvar funkcionira, a dalje sve ovisi o specifičnim potrebama. Možda na kraju zaključim da ovo i nije najsretnije rješenje za korištenje unutar web ili mobilne aplikacije.

Google Sheets API

nodemon – automatski restart NodeJS aplikacije

Tijekom razvoja NodeJS aplikacija potrebno je prilikom svake promjene restartati aplikaciju kako bi se promjene vidjele. To nije problem napraviti nekoliko puta, ali s vremenom čovjek se zapita postoji li mogućnost da se to automatizira.

Rješenje se nalazi u obliku nodemon skripte koja će pratiti sve promjene unutar projekta u kojemu je pokrenuta i automatski restartati aplikaciju kako bi se učinjene promjene odmah vidjele u npr. web pregledniku.

Novu ću aplikaciju kreirati naredbom

i odmah instalirati ExpressJS.

Sada u mapi projekta mogu vidjeti package.json datoteku sa sljedećim sadržajem

Sada ću kreirati index.js datoteku u kojoj određujem da će se API pokrenuti na portu 1337

API pokrećem naredbom $ node index.js

nodemon - automatski restart NodeJS aplikacije

U web pregledniku sada mogu vidjeti sljedeće

nodemon – automatski restart NodeJS aplikacije

Trenutno u projekt nije instaliran nodemon i zato prilikom svake promjene moram ručno stopirati (CTRL+C) i ponovno pokrenuti (node index.js) API.

nodemon - automatski restart NodeJS aplikacije

nodemon instalacija

nodemon se može instalirati na dva načina. Lokalno unutar projekta i globalno na računalu.

Sljedećom naredbom instaliram nodemon lokalno unutar projekta

U slučaju da želim nodemon instalirati globalno na računalo koristim sljedeću naredbu

Datoteka package.json sada ima jedan novi redak.

Projekt sada pokrećem naredbom

I sada će bilo koja promjena unutar projekta rezultirati automatskim restartom

nodemon – automatski restart NodeJS aplikacije

Zaključak

nodemon je posebno koristan prilikom razvoja NodeJS aplikacija, dok će se u produkciji koristiti npr. PM2, jer tada se događa najviše promjena i može biti jako naporno nakon svake promjene ručno raditi restart projekta. Više o skripti moguće je pronaći na poveznici https://github.com/remy/nodemon

Ionic 3 – Slanje podataka na API

Ovim blog postom želim pokazati kako na jednostavan i brz način možete napraviti Ionic aplikaciju koja će slati podatke na API. U ovom ću slučaju koristiti jednostavan JSON Server, ali jednako samo tako mogao koristiti i NodeJS API, API koji podržava slanje datoteka ili Google Drive API. Ali kao što sam i rekao, kako bi zadržao jednostavnost i kako ne bi otišao previše u širinu u ovom ću primjeru koristiti jednostavan JSON Server API.

Postavljanje aplikacije

Kreirati ćemo novi Ionic projekt, i dodati podršku za Android platformu

Izrada i pokretanje API-ja

API se nalazi u datoteci db.json sa sljedećim sadržajem

Pokrećemo ga naredbom

Servis za API

Sada ćemo napraviti servis koji će u našoj Ionic aplikaciji služiti za pozivanje API-ja.

Servis za API će izgledati ovako

Znači, imamo funkciju getUsers(); koja će dohvaćati popis svih osoba u imeniku, kao i funkciju postUser(a:any); za dodavanje nove osobe u imenik.

Forma za unos

Sada možemo napraviti formu za unos sadržaja. Forma će se sastojati od samo tri polja. Jedno polje za ime i prezime, drugo za broj telefona, a treće polje tj. padajući izbornik s opcijama za odabir poslovnog ili privatnog broja. Ispod svega toga prikazat ćemo popis svih osoba.

Forma nema nikakvih specijalnih uvjeta i provjera niti je bilo koje polje označeno kao obavezno. Osim toga, ispod forme imamo popis do sada dodanih osoba.

Funkcionalnost će se nalaziti u home.ts

Sada možemo provjeriti radi li uopće naša forma za unos.

Ionic 3 – Slanje podataka na API

Kada smo zaključili da forma ispisuje podatke koje smo upisali možemo dovršiti funkciju za unos osobe dodajOsobu(); koja će sada izgledati ovako

I konačni rezultat izgleda ovako

Ionic 3 - Slanje podataka na API

Zaključak

Primjer koji ste ovdje imali priliku vidjeti najosnovnija je verzija i samo jedan od načina kako slati podatke iz Ionic aplikacije na API i ne preporučujem da ovaj način slanja podataka koristite u produkcijskim verzijama aplikacije. Zapravo, ako ga i koristite neće se dogoditi ništa loše, ali samo želim naglasiti da postoje i bolji načini o kojima ću nekom drugom prilikom.

Ionic 2 – prosljeđivanje parametara između stranica

Kada se radi mobilna aplikacija pitanje je vremena kada će ona postati kompleksnija tj. imati više stranica između kojih će trebati postojati interaktivnost, a to podrazumijeva prosljeđivanje nekih parametara s jedne stranice na drugu.

Pod pretpostavkom da već imate pokrenut Ionic 2 projekt možemo krenuti dalje.

Kreiranje stranica

Za početak trebamo kreirati dvije stranice. Jedna će služiti za prikaz svih korisnika $ ionic g page korisnici, a druga za prikaz jednog korisnika $ ionic g page korisnik.

Servis za dohvaćanje korisnika

Naša aplikacija će komunicirati s dva API-ja. Jedan će dohvaćati popis svih korisnika koji će se prikazivati na korisnici.html stranici, a drugi će dohvaćati detalje jednog korisnika koji će se prikazivati na stranici korisnik.html.

Servis kreiramo naredbom $ ionic g provider Korisnici

Kao što se vidi iz dolje navedene funkcije dohvatiKorisnika() ona zahtjeva parametar a.id koji je zapravo ID jednog korisnika.

Popis korisnika

Funkcija u 16. liniji prosljeđuje samo jedan parametar id koji nam je i potreban na sljedećoj stranici jer prema tom parametru ćemo aktivirati API za dohvaćanje jednog korisnika koji je vezan uz taj parametar tj. uz taj ID.

Funkcija u 18. liniji prosljeđuje čitav objekt koji smo u ovom slučaju nazvali test.

U ovom kontroleru koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica.

Jedan korisnik

U ovom kontroleru također koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica. Ipak, ovdje nam još treba i NavParams za dohvaćanje prosljeđenih parametara.

U slučaju kada smo kao parametar proslijedili čitav test objekt podatke ćemo prikazati na sljedeći način. Znači, prilikom učitavanja stranice ne trebamo pozivati nikakav drugi API jer smo si proslijedili potrebne podatke o korisniku koje možemo prikazati na ekranu.

Ali ako smo proslijedili samo parametar id pomoću kojega aktiviramo API za prikaz detalja jednog korisnika tada podatke prikazujemo na sljedeći način

Zaključak

I to je to. Ovo su osnove koje se tiču prosljeđivanja parametara između stranica u Ionic 2 aplikaciji. Sve dalje ovisi o specifičnim potrebama svake Ionic 2 aplikacije.