Getting started with SQLlite

Ionic Framework Ionic React
1

Hi everyone,
I am new to Ionic and I admit I don’t have a lot of experience either with React.

I wanted to do a first sample application with a small db.
Nothing complex but I am going mad for 3 days and can’t find much resources.

Is there any example I can see on how to use SQLite with ionic?
I have followed a tutorial on youtube, which is already outdated though and I am still stuck.

Even just connecting to the database and how to insert/delete one line from an input.

I am getting a bit frustrated as I can’t find much help or info googling as usual, sigh.

:smiley: Thanks for any help

2

Are you absolutely certain you need structured queries? It’s overkill for most mobile apps, and life is much simpler if you can just use a key-value storage system like Ionic Storage.

3

I am actually not and I would be happy to get advise on this.
What I need to do will be quite easy I believe.

I want to take a pic, where you can write a note and date.
But I would also need to add later on a category.
And in the future might get some other things.

I tried to read on the key-value storage, but I admit I don’t know so much.
I will try to find tutorials, if you have any specific in mind feel free to share it, it would help!
Thank you!

4
5

IONIC REACT JS: How To Use SQLite Capacitor Plugin In Ionic React Applications: create update delete IONIC REACT JS: How To Use SQLite Capacitor Plugin In Ionic React Applications: create update delete - YouTube

6

Thanks I have been reading that.

But from my non experience with key-value I think it’s not suitable as I need to organise things in categories?

E.g. need to save pics and give them a category
If I want to return only the pics of a category, I can’t, correct?

Sorry if it’s basic question, but because you said it’s overkill for most mobile apps, I am wondering if there is a way to achieve it

7

Thanks aaron, will check the video

8

Key-value systems can still store arrays and maps, so you can still store each category with a separate key, and the value can be a list containing the pictures (or just their ids). Yes, modification becomes a bit more expensive, but I would bet it would still beat a full-blown SQL system.

9

In app.module.ts import sqlite

import { SQLite } from '@awesome-cordova-plugins/sqlite/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    SQLite,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

To create database

 this.sqlite.create({
          name: 'data.db',
          location: 'default'
        })
        .then((db: SQLiteObject) => { 
            this.db=db; 
            alert('database created/opened');        
          })
          .catch(e => alert(JSON.stringify(e)));

///more details Ionic 7 : SQLite CRUD in Ionic Capacitor angular app - YouTube

10

You posted an angular example as an answer to a react question?

1 Like
11

Opps !! sorry for that. The word react might be missed while reading the query.