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

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U ovom ću blog postu pokazati postupak ažuriranja Angular CLI-a sa verzije angular-cli (1.0.0-beta.28.3) na verziju @angular/cli (1.7.4).

Zašto ažuriranje?

Angular ima mnogo značajki kao što su TypeScript i Ahead of Time (AOT) koje pomažu kod prepoznavanja pogrešaka prilikom ‘buildanjaAngular aplikacije. Tim koji stoji iza Angulara trudi se svakom novom verzijom te značajke poboljšavati kako bi prepoznale još više grešaka i radile brže.

Zbog toga se zna dogoditi da kod ažuriranja na noviju verziju budu prepoznate neke greške koje ranije nisu bile uočene.

Uz to, ne treba zaboraviti niti dosta novih značajki koje dolaze s novijim verzijama kao što su Service Worker za progresivne web aplikacije (PWA) i mnoge druge.

Sve to su razlozi za ažuriranje.

Kako ažurirati?

Ažuriranje je potrebno napraviti na dvije razine. Globalno na računalu i lokalno tj. unutar svakog projekta.

Globalna razina

Za početak, provjeravam trenutnu globalnu verziju CLI-a i vidim da je u pitanju angular-cli 1.0.0-beta.28.3 što znači da je ažuriranje potrebno.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Odmah ću očistiti i cache

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Sada ću instalirati novi @angular/cli

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je sve što se tiče globalne razine.

Lokalna razina

Sada se prebacujem unutar lokalnog projekta i ako ga pokušam pokrenuti koristeći $ ng serve dobit ću sljedeću poruku

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Uzrok tome nalazi se unutar package.json datoteke, a znači da se globalna i lokalna verzija CLI-a ne slažu i da zato nije moguće pokrenuti projekt.

Ako želim postojeći projekt prilagoditi da radi sa novim Angular CLI-em trebam napraviti više izmjena. S druge strane, imam i sljedeću opciju, a to je kreirati novi projekt i onda u njega prebaciti dijelove postojećeg projekta što ću sada i napraviti.

Novi projekt kreiram naredbom

Iz postojećeg projekta u novi prebaciti ću sljedeće:

– mapu src/assets
– mapu src/app
– datoteku src/index.html
– datoteku src/styles.css
– datoteku src/favicon.ico

Osim toga, unutar nove datoteke package.json trebam dodati i module iz postojećeg projekta.

package.json sada izgleda ovako. Označio sam module koje sam dodao iz ‘stare’ package.json datoteke

Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je to! Projekt je sada temeljen na novom Angular CLI-u i moguće ga je pokrenuti naredbom $ ng serve

CSS i JS se nisu učitali!

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U slučaju da nisu učitane sve JS tj. CSS datoteke potrebno ih je iz src/index.html prebaciti unutar src/angular-cli.json na sljedeći način:

Iz index.html-a uzimam

i stavljam ih unutar angular-cli.json

Zaključak

Iako na prvu ovaj proces može djelovati komplicirano zapravo je vrlo logičan i jednostavan. Ovisno od projekta do projekta može se dogoditi da je potrebno napraviti još dodatne prilagodbe. O svemu tome obavijesti će se nalaziti unutar CMD prozora.

Angular & Marvel API – demo aplikacija

U ovom ću blog postu pokazati kako koristiti Marvel API unutar Angular projekta. Fokus će biti na pravilnoj konfiguraciji API-ja nakon koje je moguće, prema dokumentaciji, koristeći različite parametre dobiti konkretne rezultate.

O Marvel API-ju

Marvel API je RESTful alat koji pomaže developerima stvoriti web stranice i aplikacije pomoću podataka iz 70 godišnje povijesti Marvela. Trenutno je dostupno šest vrsta resursa kao što su individualni stripovi (Comics), grupe ili serije stripova (Comic series), dijelovi pojedinih stripova (Comic stories), veliki događaji iz pojedinih stripova (Comic events and crossovers), žene, muškarci i organizacije koji su kreatori stripova (Creators) i likovi iz stripova (Characters).

Originalna putanja za pristup resursima nalazi se na http(s)://gateway.marvel.com/ i trenutno je moguće koristiti samo GET metodu.

Svaki zahtjev koji se uputi na gore navedeni URL mora u sebi sadržavati nekoliko parametara koji se dobiju nakon registracije.

Angular i Marvel API

API koji ću koristiti u nastavku ima sljedeći oblik

http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150

iz čega je vidljivo da se sastoji od tri glavna parametra

  • apikey = PublicKey
  • tstimestamp (or other long string which can change on a request-by-request basis)
  • hashmd5 ključ ts parametra (npr. md5(ts+privateKey+publicKey))

Postavljanje Angular projekta

Koristeći Angular CLI kreiram novi projekt naredbom

Odmah ću kreirati i servis za API koristeći naredbu

Angular i Marvel API

Kao što se može vidjeti na slici iznad API servis trenutno ne zadovoljava potrebne preduvjete za uspješno korištenje. S obzirom da će taj servis primarno biti korišten za pozivanje HTTP(S) protokola moram dodati @angular/http. Također, koristiti ću i map operator koji će dobivenu vrijednost transformirati u JSON. Na kraju, prema ranije spomenutoj Marevl API dokumentaciji, moram koristiti MD5 hash, u tome će mi pomoći ts-md5 NPM paket koji instaliram naredbom $ npm i ts-md5 --save.

API servis na kraju izgleda ovako

Sada taj servis mogu koristiti u bilo kojem dijelu Angular aplikacije. Za potrebu ovog primjera zadržat ću se na app.component.ts.

Otvaranjem http://localhost:4200/ adrese odmah se dohvaćaju Marvel likovi sa ranije kreiranog API-ja.

Angular i Marvel API

Na kraju to može izgledati i ovako

Angular i Marvel API

Na slici iznad se može primijetiti da je prikaz vremena lijepo formatiran i da tako nije izgledao ranije u animaciji. Za to je zaslužan MomentJS.

Zaključak

Iz cijelog ovog blog posta najvažniji dio je API servis koji sadržava sve potrebno za uspješan dohvat podataka sa Marvel API-ja. Prikaz podataka radi se ovisno o potrebama od slučaja do slučaja. Konkretno u ovom blog postu fokus je bio na uspješnom dohvatu podataka.

Struktura projekta prema package.json

Ionic Tabs App – HomePage se učitava prije AppComponent

U ovom ću blog postu pokazati kako spriječiti da se AppComponent učitava nakon HomePage.

Kada se kreira nova Ionic aplikacija koristeći tabs predložak kao rootPage odabrana je TabsPage komponenta koja unutar sebe poziva HomePage.

U tom slučaju ako se nekakva logika stavi unutar app.component.ts i onda ovisno o nekom uvjetu učita HomePage ili neka druga stranica

Kreiranje aplikacije

Novu aplikaciju kreiram naredbom

I nakon što pokrenem aplikaciju

mogu vidjeti da se HomePage učitala prije AppComponent.

Uzrok tome nalazi se unutar app.component.ts datoteke gdje se definira rootPage. U ovom slučaju to je TabsPage.

Gore se može vidjeti da TabsPage komponenta kao tab1Root uzima HomePage komponentu i zato se ona učitava prije AppComponent.

Ionic Tabs App - Kako spriječiti da se AppComponent učitava nakon HomePage

Kako bi se to spriječilo potrebno je napraviti sljedeće:

Ionic Tabs App – Kako spriječiti da se AppComponent učitava nakon HomePage

Struktura projekta prema package.json

Ionic 3 – Searchbar komponenta

Za razliku od blog postova Ionic 3 – Autocomplete polje za unos i Ionic 3 – select, search i autocomplete komponenta u kojima sam obradio temu autocomplete polja za unos u ovom ću blog postu obraditi primjer polja za filtriranje sadržaja.

Ova je funkcionalnost podržana od strane Ionic i nije potrebno instalirati dodatne Ionic Native pluginove.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju

Aplikacija će se sastojati od jednog ekrana sa prikazom trenutnih članova OSC-a na poveznici http://softwarecity.hr/clanovi/.

Ionic 3 – Searchbar komponenta

Kreiran je niz nizPodaci koji sadržava popis članova OSC-a.

Searchbar komponenta

Sada ću dodati Searchbar komponentu.

Aplikacija sada izgleda ovako

Ionic 3 – Searchbar komponenta

U pregled sam dodao </ion-searchbar>

Osim toga, dodao sam još i funkciju getItems() koja je zadužena za filtriranje.

Jedina razlika između moje funkcije i ove iz službene dokumentacije

je što sam ja omogućio filtriranje pomoću tri parametra (ime, prezime i tvrtka).

Zaključak

I to je sve! Iz ovog se primjera može vidjeti koliko je jednostavno napraviti filtriranje sadržaja koristeći search polje unutar Ionica.