Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/typeorm/nativescript-vue-typeorm-sample below:

GitHub - typeorm/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

As you can see the task list is persisted even when the app is 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 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

  When running the project, always use bundle mode

• 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

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.

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)
    }
})();

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;
    }

}

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)
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4