Ionic 2 & 3 - SQLite servis

Ionic 2 & 3 – SQLite servis

Share Button

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.

Objavio

Tomislav Stanković

Web i mobile developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

7 misli o “Ionic 2 & 3 – SQLite servis”

  1. Možeš li objasniti ukratko ovaj dio koda;
    parameters = { user_id: localStorage.getItem(‘user_id’), access_token: localStorage.getItem(‘access_token’) };
    To su podaci potrebni za sinkronizaciju, a pohranjeni lokalno?
    Volila bi post o login-u korisnika (s SQLite-om). Ty!


    14/07/2017 u 13:51

    I blog post o sinkronizaciji SQLite podataka s online bazom podataka.

    1. Da, u ovom primjeru, to su podaci potrebni kako bi API vratio rezultat inače bi vratio error, a dobio sam ih u trenutku kada se korisnik prijavi u aplikaciju i spremio u localStorage.

      Naravno, ne mora svaki API imati takve parametre (npr. RandomUser API iz primjera na http://www.tomislavstankovic.com/blog/ionic2-prikaz-json-podatak-api/) i kad bolje razmislim možda je najbolje da maknem parameters objekt iz ovog primjera da bezveze ne zbunjuje ljude.

      Što se logina/prijave tiče možeš pogledati http://www.tomislavstankovic.com/blog/ionic-firebase-registracija-prijava/. Mogu eventualno napraviti primjer NodeJS API-ja za prijavu koji se onda može koristiti za Ionic aplikaciju jer logika unutar aplikacije ostaje ista – dva polja za prijavu (korisničko ime i lozinka).

  2. import { ApiProvider } from ‘../../providers/api-providers’;

    where you calling the ApiProvider in this program?
    pls reply as soon as possible.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *