https://www.youtube.com/watch?v=DKKml9_1AUQ
Vidéo précédente: 🇫🇷 Profil (7/8)
Vidéo suivante: 🇫🇷Présentation des Fonctionnalités (1/8)
On est ravis de vous retrouver dans la dernière vidéo de cette formation, on espère que vous avez apprécié les cours jusqu’ici.
Pour compléter la création de comptes utilisateurs, on va aborder le thème des avatars.
Allons-y!
Définir son avatar (0:00-8:37) Vérification de l’application (8:37-10:02)
Bonjour. Dans cette nouvelle vidéo, je vais aborder la gestion de l’avatar. Pour l’avatar, les choses sont différentes car les images ne peuvent pas être directement stockées dans une base de données. Il va falloir aller chercher l’image dans l’ordinateur ou le téléphone. Il faut ensuite l’uploader dans la base de données grâce à Supabase Storage. Cet élément permet de stocker les fichiers. Ensuite, il faut connecter cet avatar au profil en soi. Pour faire cela, je vais modifier le graphe de l’image. Quand je clique dessus je vais ouvrir la sélection de fichiers grâce à un bloc de contrôle. En cliquant sur ce bloc-là , l’application va récupérer le fichier et en faire quelque chose. Je configure le type de fichier à récupérer. Seulement des images peuvent être récupérées. Ensuite, je fais tester le succès par un bloc condition. En cas d’échec, je définis errorProfilemessage tout en le connectant à l’erreur de la sélection de fichier. En cas de succès, je définis cette variable en ne lui donnant aucune valeur. Maintenant que j’ai fait ça, il faut que j’upload l’image sur Supabase. Grâce à Supabase Storage, l’opération est assez facile. Vous vous rappelez que dans les nœuds parents de nos écrans, j’ai mis les nœuds Supabase comme « auth », « data » et « storage ». Storage va fournir des méthodes pour manipuler les fichiers dans Supabase. J’utilise donc le bloc « Uploader ». Le bucket est le dossier où vous pourrez déposer vos fichiers. Je vais mettre profiles. Je connecte le fichier du bloc de contrôle au fichier du bloc « uploader ». Le chemin représente l’endroit où vous pourrez déposer le fichier dans le bucket. Pour éviter les collisions, j’aime bien créer un dossier par utilisateur avec leur user id, un slash et le nom du fichier. Je vais donc connecter le fichier à la concaténation de texte (b). Je vais en mettre en 3 comme ça. Je vais mettre le fichier dans la branche (c). En (a) je mets la variable user.id. En (b) je mets un / et en (c) je mets mon fichier. Je peux donc connecter ça au chemin du bloc « uploader ». Je remets une condition comme à mon habitude. Par contre, en cas de succès, je mets l’image dans le profil. Comme dans la précédente vidéo, je vais mettre à jour les colonnes. Je vais seulement modifier la colonne correspondante, « avatar_object_id ». Je transforme where en formule « where userid=’userid’ ». Comme vous pouvez le voir dans valeurs, l’id attend plusieurs choses : le nom du champ et la valeur. Ici, je ne fais qu’une colonne mais si vous vous occupez de plusieurs colonnes à l’avenir, il faudra toutes les faire. Je vais donc connecter l’id à un bloc pour structurer l’objet. Ce bloc se configure en fonction de sa valeur. Je vais donc d’abord le connecter au bloc qui met à jour les lignes. J’avais un champ de type avatar et j’ai donc l’objet comme je le souhaite. En créant le bloc ex nihilo, je n’ai pas le bloc que je veux. Je crée donc un objet depuis le bloc « uploader » puis je le stocke dans Supabase. Je remets une condition comme à mon habitude. En cas de succès, je définis la variable avatar url à partir de ce que le bloc « uploader » donne. Cette manière est un peu longue et fastidieuse. A la place, je peux directement mettre l’image du fichier que je trouve au début du graphe. Le bon avatar sera directement configuré. Il faut ensuite vérifier que l’avatar est bien connecté à la variable « avatar.url ». Normalement, le template le fait déjà .