Maîtriser la prise de notes avec FlutterFlow et Supabase : Un guide complet

Dans ce tutoriel complet, vous apprendrez à construire une application de prise de notes robuste en utilisant FlutterFlow pour le front-end et Supabase pour le backend. Avec ce guide, nous vous accompagnerons à chaque étape, de la configuration de votre base de données Supabase à son intégration avec FlutterFlow, garantissant que même les débutants peuvent suivre efficacement. Commençons !

Configuration de la base de données Supabase

Complétez ces étapes fondamentales pour configurer votre base de données Supabase avant de plonger dans l'interface utilisateur et la logique de l'application.

1. Création d'un nouveau projet dans le tableau de bord Supabase

Commencez par visiter la page d'accueil Supabase, et cliquez sur "Démarrer un projet" ou connectez-vous simplement.

1. Créer un nouveau projet : Donnez un nom unique à votre projet et définissez un mot de passe de base de données fort. Sélectionnez la région de serveur de base de données préférée et cliquez sur "Créer un nouveau projet."

2. Création de la table Users

Dans le tableau de bord Supabase, naviguez vers l'Éditeur de table pour créer une nouvelle table nommée users. La structure de votre table devrait ressembler à ceci :

Champs :

• id : UUID (Clé primaire)
• email : Text
• name : Text
• created_at : Timestamp (Par défaut : NOW())

Définissez la clé primaire pour id et configurez les contraintes nécessaires.

3. Création de la table Notes

Ensuite, créez une autre table nommée notes avec le schéma suivant :

Champs :

• id : UUID (Clé primaire)
• title : Text
• description : Text
• image_url : Text (pour stocker les chemins des images)
• created_at : Timestamp (Par défaut : NOW())

4. Configuration d'un bucket de stockage dans Supabase

Pour stocker les images liées aux notes, créez un bucket de stockage :

1. Créer un bucket public : Allez dans la section Stockage, nommez votre bucket notes, et gardez-le public.

2. Définir les politiques : Sous Configuration > Politiques, créez une politique pour l'insertion de fichiers avec ces permissions :

   (bucket_id = 'notes'::text) AND (lower((storage.foldername(name))[1]) = (auth.uid())::text)

Connecter votre application FlutterFlow avec Supabase

Étape 1 : Cloner le projet de démarrage

Clonez le projet de démarrage FlutterFlow fourni pour commencer à intégrer Supabase avec FlutterFlow.

Étape 2 : Configurer l'authentification

Naviguez vers Paramètres > Paramètres de l'application > Authentification dans FlutterFlow :

1. Activer l'authentification : Définissez le Type d'authentification sur Supabase.
2. Définir les pages : Configurez la Page d'entrée vers votre écran de connexion et la Page connectée vers votre écran d'accueil.

Étape 3 : Intégrer Supabase

1. Activer Supabase : Activez Supabase dans la section Intégrations.
2. Ajouter l'URL API et la clé Anon : Ceux-ci peuvent être trouvés dans les paramètres de votre projet Supabase.
3. Récupérer le schéma : Cliquez sur "Obtenir le schéma" pour récupérer les tables de la base de données.

Étape 4 : Construire la page de connexion

Concevez une page de connexion conviviale avec des champs de texte pour les identifiants :

1. Ajouter une action 'On Tap' : Sur le bouton 'Créer un compte', ajoutez une nouvelle action Backend/Database > Supabase > Insert Row pour stocker les données utilisateur.

const userInsertAction = {
  actionType: 'Insert Row',
  table: 'users',
  fields: {
    id: AuthenticatedUser.uid,
    email: TextField.email,
    name: TextField.name,
    created_at: GlobalProperties.CurrentTime,
  },
};

Étape 5 : Ajouter la logique de connexion

Répétez le processus pour le bouton 'Se connecter', mais définissez le type d'action sur Login.

Étape 6 : Implémenter la fonctionnalité de déconnexion

Créez une action de déconnexion sur le bouton de déconnexion de la HomeListPage :

1. Type d'action : Logout
2. Propriétés : Aucun paramètre supplémentaire requis.

Récupération et affichage des notes

Étape 7 : Créer la vue liste des notes

1. Naviguer vers la page de liste des notes :
2. Interroger la table Notes : Sur la HomeListPage, définissez une requête Supabase pour récupérer la liste des notes.

const notesQuery = {
  queryType: 'List of Rows',
  table: 'notes',
  fields: ['title', 'created_at'],
};

Étape 8 : Lier les éléments UI aux données

Liez les données de la table notes aux widgets NoteItem :

• Titre : Liez à notes Row > title
• Date : Liez à notes Row > created_at

Navigation entre les pages

Étape 9 : Définir les actions de navigation

1. Naviguer vers NoteDisplayPage : Au tap sur NoteItem, naviguez vers NoteDisplayPage, en passant les données de la note sélectionnée.

Étape 10 : Afficher le contenu de la note

Liez les données de la note reçue aux éléments UI sur la NoteDisplayPage :

• Titre, Description et Image

Ajout de nouvelles notes

Étape 11 : Naviguer vers CreateNotePage

Définissez le bouton Créer pour naviguer de HomeListPage vers CreateNotePage sans paramètres.

Étape 12 : Fonctionnalité de téléchargement de fichier

Ajoutez une action au bouton de téléchargement d'image pour enregistrer le fichier sur Supabase.

const uploadAction = {
  uploadType: 'Supabase',
  bucket: 'notes',
  filePath: URL.path,
};

Étape 13 : Visibilité conditionnelle pour les images téléchargées

Configurez la visibilité conditionnelle pour le widget d'image afin d'éviter les exceptions null :

1. Condition : L'URL du fichier téléchargé n'est pas vide.

Étape 14 : Action de création de note

Assignez des actions backend au bouton 'Créer' pour insérer une nouvelle ligne dans la table notes et naviguer en arrière.

const createNoteAction = {
  actionType: 'Insert Row',
  table: 'notes',
  fields: {
    title: TextField.title,
    description: TextField.description,
    image_url: WidgetState.uploadedFileURL,
    created_at: GlobalProperties.CurrentTime,
  },
};

Conclusion

Félicitations ! Vous avez réussi à construire une application de prise de notes en utilisant FlutterFlow et Supabase. Ce guide a fourni une présentation complète, de la configuration de la base de données aux opérations CRUD, vous assurant d'avoir une base solide pour étendre davantage votre application.

Pour des tutoriels et ressources plus détaillés, consultez la documentation officielle FlutterFlow et les docs Supabase.

Merci d'avoir suivi ce guide, et bon codage !

Référence : "FlutterFlow Docs Troubleshooting Guides Docs FeedbackAsk or Search⌘ + K" disponible sur la Documentation FlutterFlow.