Ionic 2 i SQLite

Ionic 2 – SQLite za trajno spremanje podataka

Share Button

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.

Objavio

Tomislav Stanković

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

4 misli o “Ionic 2 – SQLite za trajno spremanje podataka”

  1. Hey man, nice job. Your blog is very good.
    What can you tell me about that: ApiProvider file?
    import { ApiProvider } from ‘../../providers/api-providers’;

    Could you show me the code?

    And I’m having problems with SQLite too, it seems that the: “openDatabase” (this._sqlite.openDatabase(…)) method no longer exist.

    1. Hi Marcus,

      Thanks for your comment.

      You can see more advanced and better version of this blog post at http://www.tomislavstankovic.com/blog/ionic-2-3-sqlite-servis/.

      Yes, in the meantime some methods have changed. For example this._sqlite.openDatabase is now this._sqlite.create

      More about content of ApiProvider you can find at http://www.tomislavstankovic.com/blog/ionic2-prikaz-json-podatak-api/

      Content of ApiProvider:

      import { Injectable } from '@angular/core';
      import { Http } from '@angular/http';
      import 'rxjs/add/operator/map';

      @Injectable()
      export class ApiProvider {

      constructor(public _http: Http) {
      //console.log('Hello ApiProvider');
      }

      getMyData(){
      return this._http.get('https://randomuser.me/api/?results=10')
      .map(res => res.json());
      }

Odgovori

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