Repository files navigation

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

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

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 withAngular. All the same. TypeORM will work everywhere

• Make sure you arewebpack-ing your project.

  TypeORM's browser library is in ES7 (withimport/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 thenativescript-sqlite plugin

  Please make sure you install it as a tns plugin and notjust 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 onhttp://typeorm.io

TypeORM can be used with/without a repository and it can be usedinDataMapper fashion orActiveRecord fashion. Please do whateverfeels comfortable. Everything is supported.

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

import{createConnection,getManager}from"typeorm/browser";importTodofrom'./models/Todo';(async()=>{try{constconnection=awaitcreateConnection({database:'test.db',type:'nativescript',entities:[Todo],logging:true})console.log("Connection Created")// setting true will drop tables and recreateawaitconnection.synchronize(false)console.log("Synchronized")}catch(err){console.error(err)}})();

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

import{BaseEntity,Entity,PrimaryGeneratedColumn,Column}from"typeorm/browser";@Entity()exportdefaultclassTodoextendsBaseEntity{    @PrimaryGeneratedColumn()id?:number;    @Column()task:string;    @Column()done:boolean;constructor(task:string,done:boolean){super();this.task=task;this.done=done;}}

You can check outapp/components/App.ts

importTodofrom"./models/Todo";functionrefreshTodos(){Todo.find().then((todos)=>{console.log(todos)this.todos=todos}).catch(console.error)}functionaddTodo(){consttodo=newTodo(this.newtask,false);todo.save().then(()=>this.refreshTodos()).catch(console.error)}