Local First avec React Native et Expo - 4. TP : créer une table et un modèle

Mise en ligne : vendredi 11 octobre 2024

TP 1 : Créer une table et un modèle simple avec watermelonDB dans une application React Native / Expo

1. Enoncé du problème

Nous allons créer une table, qui nous permettra de stocker des listes.

La table aura les éléments suivants :

• Un nom de type string
• Une description, optionnelle, de type string
• Un champ is_archived, de type boolean
• Il y aura également deux champs avancés, created_at et updated_at, qui nous permettrons de stocker les dates de créations et de modifications de nos listes.

Après avoir créé la table, nous devrons créer le modèle associé et le rendre accessible dans l'application.

A vous de jouer !

Essayez de réaliser ce TP sans regarder la correction.

2. Correction : la table task_lists

src/database/model/schema.js
tableSchema({
	name: 'task_lists',
			columns: [
				{ name: 'name', type: 'string' },
				{ name: 'description', type: 'string', isOptional: true },
				{ name: 'created_at', type: 'number' },
				{ name: 'updated_at', type: 'number' },
				{ name: 'is_archived', type: 'boolean' },
			],		
}),

3. Correction : le modèle TaskLIst

src/database/model/TaskList.js
import { Model } from '@nozbe/watermelondb';
import { date, text, field, readonly } from '@nozbe/watermelondb/decorators';

export default class TaskList extends Model {
	static table = 'task_lists';

	@text('name') name;
	@text('description') description;
	@readonly @date('created_at') createdAt;
	@readonly @date('updated_at') updatedAt;
	@field('is_archived') isArchived;
}

N'oubliez pas de rajouter TaskLIst dans le modelClasses de la database, sinon nous ne pourrons pas l'utiliser dans l'application.

src/database/database.js
export const database = new Database({
	adapter,
	modelClasses: [TaskList],
});

Nous pouvons désormais nous attaquer à l'ajout et la lecture des listes, mais ça sera le sujet de prochains articles 😏.