Ionic 2 & 3 – SQLite servis

Ovaj blog post je nastavak prethodnog pod naslovom Ionic 2SQLite za trajno spremanje podataka. Iako sam ondje već obradio temu spremanja podataka u lokalnu bazu podataka i prikaz tih podataka kada aplikacija nije povezana s mrežom važno je znati da postoji i bolji način kako to napraviti.

Kreiranjem SQLite servisa svu logiku vezanu uz kreiranje i korištenje lokalne baze podataka imamo na jednom mjestu.

Instalacija SQLite plugina

Plugin instalirate naredbama

Više o SQLite pluginu na adresi https://github.com/litehelpers/Cordova-sqlite-storage

Kreiranje SQLite servisa

Servis kreirate naredbom

Cilj ovog DatabaseService servisa je da na jednom mjestu kreiramo sve potrebne tablice te da ih uz što manje ponavljanja koda koristimo u ostatku aplikacije.

Unutar konstuktora kreiramo tablice mojaTablica i mojaDrugaTablica.

Funkcionalnosti poput spremanja u lokalnu bazu, čitanja iz nje i brisanja spremamo u posebne funkcije, kao što su npr saveTablicaToSqlite(), getTablicaMyOfflineData() i deleteTablicaMyOfflineData(), koje onda možemo pozivati u ostatku aplikacije.

Kako bi ovaj servis mogli koristiti trebamo ga navesti u app.module.ts

Korištenje SQLite baze u ostatku aplikacije

Ranije kreiran SQLite servis sada možemo koristiti u ostatku aplikacije za spremanje podataka koje onda možemo prikazivati korisnicima kada aplikacije nije povezana s mrežom.

Recimo da u ovom primjeru na početnoj stranici želimo povući žive podatke s API-ja dok je aplikacije povezana s mrežom i odmah ih spremiti u SQLite bazu kako bi ih mogli koristiti kada se povezanost s mrežom izgubi.

Kada se otvori home.ts i pokrene funkcija storeMyOfflineData() pozvat će se funkcija getMyLiveDataFromApi() koja dovlači vanjske podatke u mobilnu aplikaciju. Te podatke u tom trenutku odmah možemo prikazati korisnicima. Istovremeno, pozivamo _database.saveTablicaToSqlite servis kojemu prosljeđujemo niz podataka this.DataArray[i] koje smo dobili iz API-ja.

Testiranje na mobilnom uređaju

Uspješnost kreiranja SQLite baze kao i korištenje najbolje ćete testirati na fizičkom uređaju. Spojite uređaj na PC, pokrenite naredbu

i otvorite chrome://inspect/#devices u Chrome web pregledniku. Ondje ćete vidjeti svoj mobilni uređaj na kojemu je pokrenuta aplikacija. Ispod imena aplikacije kliknite na inspect.

Sada u konzoli možete vidjeti da su SQLite tablice uspješno kreiranje.

Ionic 2 & 3 – SQLite servis - kreiranje tablice

Dalje, kada se otvori početna stranica može se vidjeti da se otvara baza i da se spremaju podaci. Sljedeći put kada opet otvorimo početnu stranicu, brišu se iz lokalne baze do tada spremljni podaci i dodaju se svježi podaci.

SQLite servis - brisanje i spremanje

Zaključak

Usporedite prethodni blog post i ovaj pa zaključite koji je način korištenja SQLite baze bolji. Moje mišljenje je da je bolji način korištenje servisa jer tako ne moramo ponavljati jedan te isti kod u ostatku aplikacije nego samo pozivamo funkcije za spremanje, čitanje i brisanje lokalnih podataka.

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.