Ionic 2 – SQLite za trajno spremanje podataka

Jedna od najvažnijih funkcionalnosti svake mobilne aplikacije je mogućnost trajnog spremanja podataka kako bi se oni mogli koristiti kasnije. Podaci koje spremite u SQLite bazu podataka mogu se koristiti kada npr. aplikacija nije povezana s mrežom, a želite korisniku omogućiti da i dalje može pregledavati sadržaj mobilne aplikacije.

VAŽNA NAPOMENA! – Testiranje SQLite baze ne možete raditi unutar web preglednika nego isključivo na uređaju.

Instalacija plugina

Ionic Native 3.x

Ako koristite Ionic Native 3.x plugin ćete instalirati naredbama

U ovom slučaju, kada koristite novi Ionic Native 3.x, plugin se poziva na sljedeći način

Umjesto kao što je bilo do sada

Korištenje SQLite plugina

Plugin za početak trebamo dodati u app.module.ts

Kreiranje tablica

Sada se fokusiramo na app.component.ts gdje ćemo kreirati sve potrebne tablice. Svaki put kada se aplikacija pokrene ova će root komponenta kreirati potrebne tablice ako one već ne postoje.

Korištenje SQLite baze

Na sljedeći način koristimo ranije kreirane tablice. Prvo u konstruktoru moramo otvoriti SQLite bazu. Nakon toga možemo unositi podatke u SQLite bazu, čitati spremljene podatke iz nje ili ih obrisati.

Spremljene podatke možemo prikazati na sljedeći način

Zaključak

Ovo je najjednostavniji prikaz korištenja SQLite baze podataka unutar Ionic 2 projekta. U jednom od sljedećih blog postova pokazati ću kako napraviti SQLite servis koji će olakšati upravljanje offline podacima tj. u kojem će se odvijati sva logika vezana uz kreiranje tablica, spremanje, čitajne i brisanje podataka.

Ionic 2 – Dodavanje vanjskih skripti

Ionic 2 omogućava dodavanje široke palete Ionic Native pluginova koji mobilnoj aplikaciji daju mogućnost korištenja nativnih funkcionalnosti mobilnog uređaja. Inače, od nedavno se promijenio način korištenja Ionic Native pluginova.

Ipak, doći će vrijeme kada vam niti to neće biti dovoljno kako bi postigli sve ono što ste zamislili sa svojom Ionic 2 aplikacijom. Tu uskaču vanjske skripte kao što su npr. Chart.js i Moment.js, a kako njih dodati u Ionic 2 projekt možete saznati u nastavku.

Korištenje NPM-a

Pokretanjem NPM naredbe kao što je npr. $ npm install moment --save dodajete vanjsku skriptu u Ionic 2 projekt. U ovom primjeru dodat ćemo podršku za Moment.js.

Ionic2 & MomentJS

Nakon što smo instalirali željenu skriptu potrebno je reći Ionic 2 aplikaciji da je ona aktivna i da ju želimo koristiti. To činimo na način da uvezemo željenu skriptu import moment from 'moment'; na vrhu komponente u kojoj tu skriptu želimo koristiti.

Na prednjoj strani to izgleda ovako:

Ionic2 & MomentJS

Korištenje script taga

U ovom primjeru dodat ćemo Google Maps API.

U index.html dodajemo poveznicu na skriptu koju želimo koristiti.

Osim toga, kako bi imali pristup globalnom objektu potrebno je instalirati pripadajući @types paket.

NPM types google-maps

Tek sada u cijeloj aplikaciji imamo dostupan globalni objekt.

GoogleMaps Global Object

Zaključak

I to je to. Gore navedena dva načina dodavanja vanjskih skripti u Ionic 2 projekt ovise o mogućnostima svake pojedine skripte. Prije nego se odlučite za korištenje neke skripte provjerite koje sve načine dodavanja u Ionic 2 projekt nudi.

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 – Events, upravljanje događajima

Prije ili kasnije susrest ćete se s potrebom pokretanja nekog događaja (event) u jednoj komponenti i dohvaćanja tog događaja u drugoj komponenti kao što se dogodilo ovom StackOverflow korisniku, a koji me i potaknuo na objavu ovog blog posta.

Ionic2 events demo Ionic 2 koristi Events API koji omogućava objavu nekog događaja i mogućnost pretplate na taj događaj na razini aplikacije tj. u bilo kojoj drugoj komponenti. Događaj može biti varijabla, objekt ili nekakva funkcija. Ovisi što vam treba.

Recimo da je jedan od scenarija kada se korisnik prijavi u aplikaciju i otvori izbornik (sidemenu) da odmah vidi svoje korisničko ime, sliku i npr. email. S obzirom da se prijava u aplikaciju vrši u jednoj komponenti login.ts, a logika izbornika se nalazi u drugoj komponenti app.component.ts potrebno je nekako omogućiti da komponenta 2 osluškuje što se događa u komponenti 1 i da reagira prema tome.

Kako koristiti Ionic 2 Events?

U nastavku možete vidjeti primjer iz službene Ionic 2 dokumentacije.

Jedino što trebamo napraviti kako bi mogli koristiti Ionic 2 Events je u obje komponente uvesti import { Events } from 'ionic-angular';. Znači, nije potrebna instalacija nikakvog dodatka.

Za one koji žele znati više

Obradit ćemo scenarij u kojemu želimo prikazati korisničko ime i email u izborniku (sidemenu) od korisnika koji se upravo prijavio u mobilnu aplikaciju.

U login.ts vršimo prijavu korisnika i ovdje kreiramo događaj _events.subscribe.

U app.component.ts se pretplaćujemo _events.publish na taj događaj.

Zaključak

I to je sve. Kratak blog post, ali zato vrlo koristan. Za više informacija posjetite službenu dokumentaciju.

Google Drive REST API & Ionic 2 – prikaz podataka

U ovom ćemo blog postu napraviti primjer Ionic 2 aplikacije koja prikazuje podatke izravno s Google Diska pomoću Google Drive REST API-ja.

Najveći fokus biti će na postavljanju Google Drive API-ja kako bi dobili URL, na koji ćemo slati GET zahtjev, koji se onda može koristiti u svim vrstama mobilnih i web aplikacija. Ovdje je sada slučajno ispalo da će se prikaz vršiti u Ionic 2 aplikaciji, ali isto tako mogli smo napraviti običnu Angular 2 web aplikaciju ili nešto treće.

Jedna od najvećih prednosti korištenja Google Drive API-ja je što ne morate raditi svoj API jer to ipak zahtjeva nešto više vremena i znanja kako bi se sve postavilo i bilo spremno za korištenje. U ovom slučaju Google se brine za sve, a na vama je samo da smislite način kako najbolje iskoristiti to što vam Google nudi unutar svoje web ili mobilne aplikacije.

Google API Manager

Na adresi https://console.developers.google.com/ ćemo kreirati aplikaciju za koju trebamo API key.

Google Developers API

Nakon što smo to napravili trebamo odobriti (Enable) Google Drive API.

Google Developers API Enable

Google Developers Drive API

Sada moramo kreirati pristupne podatke (Credentials) kako bi Google znao da imamo pravo pristupiti podacima unutar Google Drivea.

Google Developers API Create-credentials

U ovom slučaju mi ćemo koristiti API key. Više o ostalim vrstama autentifikacije možete saznati ovdje.

Google Developers API Create credentials

API key uspješno kreiran.

Google Developers API key created

Nakon što je API key kreiran imamo mogućnost pozabaviti se njegovom sigurnošću. U ovom primjeru opciju sigurnosti ćemo ostaviti kao None jer će ovaj blog post dobiti značajno na dužini i kompleksnosti ako krenem sve opcije detaljno objašnjavati. Također, nakon objave ovog blog posta API koji smo kreirali ću ugasiti tako da neće biti sigurnosnih problema. Vi nipošto nemojte svoj Google Drive API ostaviti tako nezaštićen.

Google Developers API key restriction

Google Drive API URL

Kako bi mogli prikazati podatke iz Google Drivea osim API keya trebamo i ID mape iz koje želimo vući podatke. Više o tome na API Reference.

Na Google Driveu sada imamo mapu ZaIonic2Aplikaciju unutar koje se nalaze još dvije mape, nekoliko fotografija i jedan Word dokument.

Iz URL-a https://drive.google.com/drive/folders/0BzVqFZUj1VDhYnk4dkZ1NGVRWUE ćemo izvući ID mape 0BzVqFZUj1VDhYnk4dkZ1NGVRWUE .

ZaIonic2Aplikaciju GoogleDrive mapa

Sada još samo trebamo postaviti u opcijama naše mape da je vidljiva javno.

Google Drive Folder Share

I konačno, naš API URL izgleda ovako https://www.googleapis.com/drive/v2/files?q='0BzVqFZUj1VDhYnk4dkZ1NGVRWUE'+in+parents&key=AIzaSyC6Ifro0MzucXPKM-LpKNB2M-dP6U1yPYU.

API sada možemo testirati koristeći Postman. Rezultat je array sa objektima.

GoogleDrive API rezultat

Ionic 2 aplikacija

Ovako to izgleda kada se API koristi unutar Ionic 2 aplikacije. Kako to postići možete saznati u jednom od prethodnih blog postova pod nazivom “Ionic 2 – prikaz JSON-a sa API-ja“.

Pomoću parametra mimeType možemo si filtrirati npr. samo mape, fotografije i dr.

GoogleDriveAPI Ionic2

Zaključak

Kada radite aplikaciju u kojoj želite prikazati neke podatke jedna od mogućnosti je korištenje Google Drive API-ja. U ovom ste blog postu mogli vidjeti koliko je jednostavno postaviti funkcionalan API o kojemu kasnije ne morate previše brinuti za razliku od opcije da radite svoj NodeJS & ExpressJS API.