Skip to content

Commit ecd0906

Browse files
Add readme and demo
Signed-off-by: Arnav Gupta <arnav@codingblocks.com>
1 parent ffa9633 commit ecd0906

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

README.md

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# NativeScript Vue TypeORM Sample
2+
3+
Okay let's break this down
4+
5+
- **NativeScript** : Runs Javascript as Native apps on Android and iOS
6+
- **VueJS**: A frontend framework that can be used in NativeScript (Angular is possible too)
7+
- **nativescript-sqlite**: A Sqlite library for {N}, used here as the Sqlite driver
8+
- **TypeORM**: A TypeScript/ES7 based ORM that works on NodeJS as well as browsers
9+
10+
## Demo
11+
As you can see the task list is persisted even when the app
12+
is killed and reopened.
13+
14+
![demo](docs/demo.gif)
15+
16+
17+
## Setting this up
18+
19+
Okay so the TL;DR version is this -
20+
21+
- **Setup a NativeScript project**
22+
23+
This creates a NativeScript-Vue app
24+
```
25+
tns create nativescript-sample --template nativescript-vue-template
26+
```
27+
28+
Feel free to use NativeScript without any frontend framework, or with
29+
Angular. All the same. TypeORM will work everywhere
30+
31+
- **Make sure you are _webpack_-ing your project.**
32+
33+
TypeORM's browser library is in ES7 (with `import/export` statements)
34+
This is something that cannot be executed directly in NativeScript
35+
(At least not untill we have a JavascriptCore or V8 that start supporting it)
36+
37+
So please make sure you are using {N} in bundle mode
38+
39+
```
40+
tns install webpack
41+
```
42+
43+
When running the project, always use bundle mode
44+
45+
```
46+
tns run ios --bundle
47+
```
48+
- **Install the _nativescript-sqlite_ plugin**
49+
50+
Please make sure you install it as a tns plugin and not _just_ npm install
51+
52+
```
53+
tns plugin add nativescript-sqlite
54+
```
55+
56+
- **Install TypeORM**
57+
58+
```
59+
npm install typeorm
60+
```
61+
62+
At this stage you are ready to use TypeORM.
63+
Please read the documentation on <http://typeorm.io>
64+
65+
TypeORM can be used with/without a repository and it can be used
66+
in `DataMapper` fashion or `ActiveRecord` fashion. Please do whatever
67+
feels comfortable. Everything is supported.
68+
69+
## Trying things out quickly
70+
71+
### 1. Setup TypeORM somewhere your app starts
72+
73+
I have done this in the [app/main.ts](main.ts) file. You should ideally do this
74+
wherever your app is initialised.
75+
76+
```typescript
77+
import {createConnection, getManager} from "typeorm/browser";
78+
import Todo from './models/Todo';
79+
80+
(async () => {
81+
try {
82+
const connection = await createConnection({
83+
database: 'test.db',
84+
type: 'nativescript',
85+
entities: [
86+
Todo
87+
],
88+
logging: true
89+
})
90+
91+
console.log("Connection Created")
92+
93+
// setting true will drop tables and recreate
94+
await connection.synchronize(false)
95+
96+
console.log("Synchronized")
97+
98+
99+
} catch (err) {
100+
console.error(err)
101+
}
102+
})();
103+
```
104+
105+
### 2. Define your model
106+
107+
I am using ActiveRecord. If you want to use DataMapper, you should
108+
_**not**_ extend from BaseEntitiy
109+
110+
```typescript
111+
import {BaseEntity, Entity, PrimaryGeneratedColumn, Column} from "typeorm/browser";
112+
113+
@Entity()
114+
export default class Todo extends BaseEntity {
115+
@PrimaryGeneratedColumn()
116+
id?: number;
117+
118+
@Column()
119+
task: string;
120+
121+
@Column()
122+
done: boolean;
123+
124+
constructor(task: string, done: boolean) {
125+
super();
126+
this.task = task;
127+
this.done = done;
128+
}
129+
130+
}
131+
```
132+
133+
### 3. Use the entities in your app
134+
135+
You can check out [app/components/App.ts](App.ts)
136+
137+
```typescript
138+
import Todo from "./models/Todo";
139+
140+
function refreshTodos() {
141+
Todo.find().then((todos) => {
142+
console.log(todos)
143+
this.todos = todos
144+
}).catch(console.error)
145+
}
146+
function addTodo() {
147+
const todo = new Todo(this.newtask, false);
148+
todo.save().then(() => this.refreshTodos())
149+
.catch(console.error)
150+
}
151+
```
152+

docs/demo.gif

1.82 MB
Loading

0 commit comments

Comments
 (0)