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.

Ionic 2 – prikaz JSON-a sa API-ja

Iako su neke aplikacije same sebi dostatne ipak je više onih koje ovise o podacima s vanjskih izvora, a to su javni ili privatni API-ji. U ovom blog postu prikazat ćemo primjer dohvaćanja JSON (JavaScript Object Notation) podataka s javnog API-ja RandomUser.Me.

Zašto baš RandomUser? Zato što na jednostavniji način, bez da kreirate i pokrećete svoj API možete napraviti i testirati svoju Ionic 2 aplikaciju što je posebno korisno u procesu učenja.

Kreiranje Ionic 2 projekta

Za početak ćemo kreirati novi Ionic 2 projekt koristeći blank predložak.

Aplikacija u web pregledniku sada izgleda ovako. Znači, ništa posebno.

Ionic2 Blank RandomUser

Ako želite saznati nešto više o strukturi Ionic 2 aplikacije proučite moj prethodni blog post.

Ionic 2 provides (servisi)

Prije nego krenemo s izradom sučelja aplikacije i logike za prikaz podataka idemo napraviti servis koji će nam dohvaćati potrebne podatke. Koristiti ćemo sljedeći URL https://randomuser.me/api/?results=10. Ako kliknete na link vidjet ćete JSON sa 10 korisnika.

Servis nam služi za dohvaćanje podataka s JSON API-ja koristeći HTTP protokol. I ovdje ćemo koristiti Ionic 2 CLI pa ćemo servis kreirati pomoću naredbe $ ionic g provider RandomUserProvider.

Servisi se automatski kreiraju u mapi providers.

Ionic2Provider

U random-user-provider.ts dodat ćemo sljedeće:

Pozivanje servisa

Servis sada moramo pozvati u komponentu koja će činiti logiku naše aplikacije. Prvo je potrebno pozvati servis import { RandomUserProvider } from '../../providers/random-user-provider'; kako bi ga mogli koristiti.

Iako smo sada pozvali servis to i dalje ne znači da ga možemo koristiti. Kako bi to omogućili moramo ga navesti kao dio naše komponente @Component, a to činimo sa providers: [RandomUserProvider] .

Sljedeći korak je kreirati konstruktor _randomUser za RandomUserProvider.

Sada možemo kreirati funkciju getUsers() koja će nam prikazati korisnike.

U konačnici to izgleda ovako:

Označene linije dodali smo u našu HomePage komponentu.

P.S. Ako se odkomentira linija 16 podaci će se automatski prikazati bez potrebe za klikom na gumb GET Users.

Sučelje za prikaz

Logiku aplikacije smo napravili i sada se možemo pozabaviti sučeljem za prikaz koji će biti običan popis.

*ngFor direktiva će proći kroz popis korisnika i za svakog kreirati po jedan red u popisu.

Konačan izgled aplikacije

$ ionic serve daje nam konačan izgled naše aplikacije s uspješno dohvaćenim JSON-om.

Get Random User

Zaključak

U ovom blog postu imali ste priliku vidjeti kako u Ionic 2 aplikaciju dohvatiti JSON podatke s javnog API-ja te ih prikazati u obliku popisa.

Jednako tako, da smo htjeli, mogli smo koristiti i naš NodeJS API kako bi prikazali korisnike iz naše baze podataka. Rezultat bi bio isti.