NativeScript Vue TypeORM Sample

Okay let's break this down

• NativeScript : Runs Javascript as Native apps on Android and iOS
• VueJS: A frontend framework that can be used in NativeScript (Angular is possible too)
• nativescript-sqlite: A Sqlite library for {N}, used here as the Sqlite driver
• TypeORM: A TypeScript/ES7 based ORM that works on NodeJS as well as browsers

Demo

As you can see the task list is persisted even when the app is killed and reopened.

Setting this up

Okay so the TL;DR version is this -

• Setup a NativeScript project

  This creates a NativeScript-Vue app

  tns create nativescript-sample --template nativescript-vue-template
  

  Feel free to use NativeScript without any frontend framework, or with Angular. All the same. TypeORM will work everywhere

• Make sure you are webpack-ing your project.

  TypeORM's browser library is in ES7 (with import/export statements) This is something that cannot be executed directly in NativeScript (At least not untill we have a JavascriptCore or V8 that start supporting it)

  So please make sure you are using {N} in bundle mode

  tns install webpack
  

  When running the project, always use bundle mode

  tns run ios --bundle
  

• Install the nativescript-sqlite plugin

  Please make sure you install it as a tns plugin and not just npm install

  tns plugin add nativescript-sqlite
  

• Install TypeORM

  npm install typeorm
  

At this stage you are ready to use TypeORM. Please read the documentation on http://typeorm.io

TypeORM can be used with/without a repository and it can be used in DataMapper fashion or ActiveRecord fashion. Please do whatever feels comfortable. Everything is supported.

Trying things out quickly

1. Setup TypeORM somewhere your app starts

I have done this in the app/main.ts file. You should ideally do this wherever your app is initialised.

import {createConnection, getManager} from "typeorm/browser";
import Todo from './models/Todo';

(async () => {
    try {
        const connection = await createConnection({
            database: 'test.db',
            type: 'nativescript',
            entities: [
                Todo
            ],
            logging: true
        })

        console.log("Connection Created")

        // setting true will drop tables and recreate
        await connection.synchronize(false) 

        console.log("Synchronized")


    } catch (err) {
        console.error(err)
    }
})();

2. Define your model

I am using ActiveRecord. If you want to use DataMapper, you should not extend from BaseEntitiy

import {BaseEntity, Entity, PrimaryGeneratedColumn, Column} from "typeorm/browser";

@Entity()
export default class Todo extends BaseEntity {
    @PrimaryGeneratedColumn()
    id?: number;

    @Column()
    task: string;

    @Column()
    done: boolean;

    constructor(task: string, done: boolean) {
        super();
        this.task = task;
        this.done = done;
    }

}

3. Use the entities in your app

You can check out app/components/App.ts

import Todo from "./models/Todo";

function refreshTodos() {
     Todo.find().then((todos) => {
         console.log(todos)
         this.todos = todos
     }).catch(console.error)
 }
function addTodo() {
    const todo = new Todo(this.newtask, false);
    todo.save().then(() => this.refreshTodos())
        .catch(console.error)
}