ionic (tim) – SQLite ToDO App

Demo

SQLite start app uitbreiden

https://github.com/capacitor-community/sqlite

We gaan deze start app gebruiken om op verder te werken.

https://github.com/jepiqueau/angular-sqlite-app-starter

We maken een kopie(clone) van deze app en gebruiken deze als basis. Maak de kopie en:

  • npm install
  • capacitor stapjes doorlopen
  • starten + testen in emulators en/of echt apparaat
  • Klik op de eerste testknop uit de starterapp die 2 databanken gaat maken. Check nadien in Android Studio bij device explorer in de folder data > data > com.jeep.app.ionic.angular

Live Reload (Android)

Lees: https://ionicframework.com/docs/angular/your-first-app/7-live-reload

ionic cap run android -l --external

Zorg voor een verbinding met Live Reload en test uit. Je kan bv. eens een titel of button aanpassen. Deze zou dan zoals bij ionic serve rechtstreeks in de Android emulator (of toestel) aangepast moeten zichtbaar zijn.

Het starterproject bevat een sqlite service. Deze is een algemene service waarmee we makkelijker alle connecties/oproepen naar de sqlite databank kunnen maken.

We gaan de home.page aanpassen en hierin de todo items gaan tonen. Voor het toevoegen van items maken we later gebruik van ion-modals. In dit onderdeel gaan we enkel een eenvoudig voorbeeld opzetten met verbinding naar een SQLite databank.

todoitem class – we maken een class om onze todo objecten voor te stellen

export class Todoitem {
    id:string;
    description:string;
}



home.page.html – we passen de header aan om hier een knopje te voorzien:

 <ion-header [translucent]="true">
    <ion-toolbar color="tertiary">
        <ion-title>
            Todo Lijst
        </ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="">
                <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>


home.page.html – als content voorzien we een ion-item met ngFor

<ion-content [fullscreen]="true">

    <ion-list>
        <ion-item *ngFor="let item of todos">{{item.description}}</ion-item>
    </ion-list>

    <!-- andere content/knoppen kan je in commentaar plaatsen -->
</ion-content>

home.page.ts – we voorzien een property voor alle items + injecteren de sqlite.service

  todos: Todoitem[] = [];

  constructor(private _sqlite: SQLiteService)
  {

  }

home.page.ts – in de ionViewWillEnter gaan we een databank maken/verbinden

  ionViewWillEnter() {
      this.exConn = this._detailService.getExistingConnection();
      this.exJson = this._detailService.getExportJson();
      console.log("**** ionViewWillEnter " + this.exConn);
      this.testDb();
  }

  async testDb(){
      
      // verbinding maken - indien DB niet bestaat, dan wordt ze aangemaakt
      // todo = naam van de databank
      this.db = await this._sqlite.createConnection("todo", false, "no-encryption", 1);
      let ret: any = await this.db.open();
       
      //CREATE TABLES - SCHEMA MAKEN (IF NOT EXISTS => HIERDOOR BIJ EEN 2DE RUN GEEN FOUTEN)
      const createTable= "CREATE TABLE IF NOT EXISTS todo (id INTEGER PRIMARY KEY,description TEXT_type NOT NULL)";
      ret = await this.db.execute(createTable);

     
      //VOORBEELD VAN EEN INSERT
      let sqlcmd: string = "INSERT INTO todo (description) VALUES (?)";
      let values: Array<any> = ["testitem"];
      await this.db.run(sqlcmd, values);

      //VOORBEELD VAN EEN SELECT => de resultaten komen in de property met todo terecht
      ret = await this.db.query("SELECT * FROM todo;");
      this.todos = ret.values;
}

Met bovenstaande aanpassingen zou je als het goed is een Sqlite databank moeten gemaakt hebben en enkel testitems zien. Start de app enkele keren opnieuw op. Er komen dan extra items bij omdat bij onze ionViewWillEnter we telkens een insert doen.

Ga terug naar