/ionic-angular-sqlite-starter

A complete starter solution for Ionic 6 Angular SQLite CRUD operations using @capacitor-community/sqlite plugin with Capacitor 4

Primary LanguageTypeScriptMIT LicenseMIT


⛔️ DEPRECATED Ionic/Angular SQLite Starter

REPLACED BY ionic7-angular-sqlite-starter

ionic7-angular-sqlite-starter

which uses Ionic 7 & Capacitor 5


ionic-angular-sqlite-starter

Ionic/Angular application demonstrating the use of the

@capacitor-community/sqlite


this app uses Capacitor 4


Maintainers

Maintainer GitHub Social
Quéau Jean Pierre jepiqueau

Introduction

This application is a complete starter solution for Ionic 6 Angular SQLite CRUD operations using @capacitor-community/sqlite plugin with Capacitor 4.

This application will implement the well known Authors-Posts-Categories SQLite database.

PostData {
  id!: number;
  title!: string;
  text!: string;
  author!: Author;
  categories!: Category[];
}

Author {
  id!: number;
  name!: string;
  email!: string;
  birthday?: string;
}

Category {
  id!: number;
  name!: string;
}

Database schemas are defined using the Incremental Upgrade Database Version workflow in the folder src/app/upgrades/author-posts/upgrade-statements following the guidelines (https://github.com/capacitor-community/sqlite/blob/master/docs/IncrementalUpgradeDatabaseVersion.md).

Initial data for database version 1 are provided in the file src/app/mock-data/posts-categories-authors.ts.

Access to the @capacitor-community/sqlite plugin is made through the use of an angular service (src/app/services/sqlite.service.ts).

Authors-Posts-Categories CRUD operations are accessible through the use of an angular service (src/app/services/author-posts.service.ts).

Initialization of the application is made in the angular service (src/app/services/initialize.app.service.ts) which instantiate the sqlite service, create database schemas and upload the mock data.

In database version 2, company column was added to the author table.

Demonstrations

Demonstrations

Installation

To start building your App using this App, clone this repo to a new directory:

git clone https://github.com/jepiqueau/ionic-angular-sqlite-starter.git 
cd ionic-angular-sqlite-starter
git remote rm origin
  • then install it
npm install
  • if you use the Electron platform
npm run electron:install
  • the capacitor config parameters are:
  "appId": "com.jeep.app.ionic.angular.sqlite",
  "appName": "ionic-angular-sqlite-starter",

Building Web Project

  • development

    • angular cli
    npm run start
    • ionic cli
    ionic serve
  • production

npm run build:web

Building Native Project with standard procedure

npm run build:native
npx cap sync
npx cap copy

- Android

npx cap open android

Once Android Studio launches, make sure that you are using

  • Gradle JDK version 11
  • Android Gradle Plugin Version 7.2.2

and build your app through the standard Android Studio workflow.

- iOS

npx cap open ios

Once Xcode launches, you can build your app through the standard Xcode workflow.

Building Native Project with Ionic Cli

- Android

npm run ionic:android

Once Android Studio launches, make sure that you are using

  • Gradle JDK version 11
  • Android Gradle Plugin Version 7.2.2

and build your app through the standard Android Studio workflow.

- iOS

npm run ionic:ios

Once Xcode launches, you can build your app through the standard Xcode workflow.

Building Electron Project

npm run electron:start

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!