DEV Community

Cover image for Ionic SQLite Capacitor
RONY DIAZ
RONY DIAZ

Posted on

Ionic SQLite Capacitor

Hola, aprenderemos como implementar SQLite en ionic capacitor, para este ejemplo iniciaremos un nuevo proyecto.

$ ionic start "sqlite-capacitor" blank — capacitor
Enter fullscreen mode Exit fullscreen mode

Instalar las siguientes librerías

$ npm install @ionic/storage
$ npm install @ionic/storage-angular
$ npm install cordova-sqlite-storage
$ npm install localforage-cordovasqlitedriver
Enter fullscreen mode Exit fullscreen mode

Esta implementación nos funcionara tanto para web como móvil, en la versión web utilizara IndexedDB y en la versión móvil SQLite.

Creamos los siguientes directorios y archivos.

directorios
platform.strategy.service.ts

platform.strategy.service.ts

StorageService.ts

StorageService

StorageSQLiteService.ts

StorageSQLiteService

StorageProvider.ts

StorageProvider.ts

app.module.ts

app.module.ts

app.component.ts

app.component.ts

Procedemos a levantar el proyecto en web o a construir la aplicación con capacitor.

Web

$ ionic serve
Enter fullscreen mode Exit fullscreen mode

Image description

Android

$ ionic cap copy android
$ ionic cap sync android
Enter fullscreen mode Exit fullscreen mode

Colocamos estas 2 instrucciones en el AndroidManifest.xml

<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Construimos la aplicación.

$ ionic cap build android
Enter fullscreen mode Exit fullscreen mode

Abrimos android studio y damos clic en run ‘app’.

Image description

Todo el código de referencia aquí

No olvides dejarle tu estrellita al repositorio.
Espero te haya servido de mucho, Saludos.

Discussion (1)

Collapse
sherly_canalesrosales_ac profile image
Sherly Canales Rosales

Excelente, muy buena descripción de desarrollo.