Local First avec React Native et Expo - 1. setup de WatermelonDB

Mise en ligne : dimanche 6 octobre 2024

Configuration de watermelonDB dans un projet React Native / Expo

Cet article marque le début d'une série dédiée à WatermelonDB, une librairie conçue pour offrir une approche local-first dans le développement d'applications avec React Native. Nous partirons d'un exemple simple, une Todo List, et nous la ferons évoluer progressivement en lui ajoutant des fonctionnalités avancées. Cela nous permettra de découvrir les différentes possibilités offertes par WatermelonDB, telles que la gestion des migrations et les relations entre les tables.

À travers cette série, vous découvrirez comment utiliser WatermelonDB pour créer des applications réactives, robustes et capables de gérer des données locales de manière efficace.

1. Récupérer le repo GitHub.

Pour nous concentrer sur l'essentiel, c'est-à-dire, l'utilisation de watermelonDB, je vous ai préparé un projet de démarrage, que vous pouvez récupérer ici : branche start du projet expo-watermelon-todo-app

2. Installation de watermelonDB

Installation de watermelonDB

npm install @nozbe/watermelondb

Installation du plugin-proposal-decorators

npm install -D @babel/plugin-proposal-decorators

Installation de la librairie expo-build-proprerties

 npx expo install expo-build-properties

Configuration du plugin-proposal-decorators

babel.config.js
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],

Configuration de watermelonDB avec d'expo-build-properties

Ajoutons ce code, dans les plugins du fichier app.json (à la suite de "expo-router", :

app.json
[
   "expo-build-properties",
        {
          "ios": {
            "extraPods": [
              {
                "name": "simdjson",
                "configurations": ["Debug", "Release"],
                "path": "../node_modules/@nozbe/simdjson",
                "modular_headers": true
              }
            ]
          }
     }     
 ]

3. Configuration de watermelonDB

Nous allons créer un dossier databasedans lequel nous mettrons tous les fichiers liés à watermelonDB.

Le schema.

Nous créons un fichier schema.js, qui contiendra le schema de la base de données :

src/database/model/schema.js
import { appSchema, tableSchema } from '@nozbe/watermelondb'

export default appSchema({
  version: 1,
  tables: [
  ]
})

Les migrations.

Ensuite, nous créons un fichier qui contiendra toutes nos migrations :

src/database/model/migrations.js
import { schemaMigrations } from '@nozbe/watermelondb/Schema/migrations'

export default schemaMigrations({
  migrations: [
  ],
})

La database.

Pour finir, nous créons un fichier qui contiendra toute la configuration de notre base de données.

src/database/database.js
import { Platform } from 'react-native'
import { Database } from '@nozbe/watermelondb'
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite'

import schema from './model/schema'
import migrations from './model/migrations'

// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  schema,
  // (You might want to comment it out for development purposes -- see Migrations documentation)
  migrations,
  // (optional database name or file system path)
  // dbName: 'myapp',
  // (recommended option, should work flawlessly out of the box on iOS. On Android,
  // additional installation steps have to be taken - disable if you run into issues...)
  jsi: true, /* Platform.OS === 'ios' */
  // (optional, but you should implement this method)
  onSetUpError: error => {
    // Database failed to load -- offer the user to reload the app or log out
  }
})

// Then, make a Watermelon database from it!
export const database = new Database({
  adapter,
  modelClasses: [
  ],
})

4. Création du build de développement pour pouvoir utiliser watermelonDB

Pour utiliser watermelonDB, nous aurons besoin de sortir d'Expo Go et d'utiliser un build de développement.

pour cibler android et iOS
npx expo prebuild

pour android seulement
npx expo run:android

pour iOS seulement
npx expo run:ios

Pensez à ajouter les deux dossiers qui seront créés à la suite du prebuild dans votre fichier .gitignore

.gitignore
android/
ios/

5. Conclusion

Tout est prêt désormais pour pouvoir utiliser watermelonDB dans notre application React Native.

Lien vers la documentation de watermelonDB