Les chats et systèmes de messagerie sont parmi les fonctionnalités les plus utilisées dans notre monde.
Que vous construisiez un marketplace, un SaaS, un concurrent de Slack ou tout logiciel qui connecte des personnes, vous aurez probablement besoin d'un système de chat dans votre application.
Dans cet article, vous apprendrez pas à pas comment créer ce type de fonctionnalité sur Bubble.
1. Structuration de notre base de données
Dans cette section, nous allons structurer notre base de données. Nous allons donc créer les Data Types nécessaires ainsi que leurs Data Fields associés.
Voyons de quoi est constitué un Chat :
1. Conversations
Un système de chat est essentiellement composé de 2 Data Types.
Le premier est "Conversations".
Les Conversations correspondent généralement à ce que vous voyez à droite de l'écran. Elles sont composées d'au moins 2 Users (= participants) qui s'envoient des messages.
Vous pouvez ajouter autant de participants que vous le souhaitez (par exemple dans le cas d'une conversation de groupe).
De plus, une conversation peut avoir beaucoup d'autres champs selon les fonctionnalités de votre système.
Par exemple, une conversation peut contenir un champ pour une miniature personnalisée, un nom de conversation personnalisé, une liste de médias partagés, etc. Les possibilités sont infinies.
L'essentiel est qu'une conversation stocke une liste de Messages et une liste de Participants.
Voici les bases d'un système de chat.
2. Messages
Vient maintenant le composant le plus évident de notre système, les Messages.
Les Messages sont composés de deux éléments :
Un contenu (texte)
Un expéditeur (user)
En plus, vous pouvez y ajouter tout ce que vous souhaitez, comme des réactions, des pièces jointes, etc.
Mais ces deux champs sont indispensables.
2. Construire notre interface de chat
Maintenant que notre base de données est bien structurée, nous devons construire notre interface utilisateur.
Dans cet article, nous nous concentrerons principalement sur la logique "derrière la scène", et moins sur le travail Front-End.
3. Connexion de notre base de données avec notre interface
Affichage des conversations
Configurer notre Repeating Group
Commençons par afficher la liste des conversations auxquelles notre User participe.
Dans notre interface, cela se fait via un Repeating Group, placé à gauche de l'écran.
Commençons par configurer le Content Type de notre Repeating Group sur "Conversations" :
Une fois fait, nous pouvons indiquer à Bubble où récupérer les données nécessaires.
Cela se fait avec une action "Do a Search For" qui va chercher les "Conversations".
Dans cette recherche, nous ajoutons une contrainte pour récupérer uniquement les conversations où le User est effectivement un participant.
Enfin, vous pouvez trier cette recherche selon le champ "Modified date" avec l'option descendant activée pour afficher en premier les conversations les plus récemment modifiées.
Cela affichera en haut les conversations contenant les messages les plus récents.
Affichage des informations de la conversation
Ensuite, il faut s'assurer que les données passent du Repeating Group jusqu'à l'élément Texte.
Cela permet d'afficher les informations de la conversation (titre, participants, dernier message, etc.).
Pour chaque groupe du Repeating Group, il faut définir le bon Content Type, ainsi que la Data Source :
Une fois fait, vous pourrez sélectionner "Parent's group Conversation" et afficher le champ de données approprié.
Par exemple, dans mon cas, j'ai choisi d'afficher le prénom de chaque participant comme titre de la conversation (comme illustré ci-dessous).
Répétez l'opération pour les autres champs à afficher (comme l'aperçu du dernier message) et votre affichage sera prêt.
Ouverture d'une conversation
Nous devons maintenant pouvoir ouvrir une conversation pour voir son contenu (c'est-à-dire les messages).
Plusieurs méthodes sont possibles, par exemple utiliser un Custom State.
Mais je préfère utiliser la Data Source du conteneur qui contient mes messages.
Dans mon cas, c'est le conteneur à droite de mon écran :
Pour cela, ajoutez un workflow sur la conversation et utilisez l'action "Display data in a group/popup", comme ci-dessous :
Ainsi, lorsqu'une conversation est cliquée, ce workflow envoie cette conversation dans le groupe.
Une fois fait, nous pourrons afficher les messages !
Vous pouvez aussi utiliser cette information pour changer le style de la conversation sélectionnée, afin d'indiquer à l'utilisateur celle qu'il affiche :
Affichage des messages
Après avoir assigné la conversation active au bon endroit, nous pouvons l'utiliser pour afficher la liste des messages de la conversation active.
Pour cela, configurez le Repeating Group utilisé pour afficher les messages :
Commençons par définir son Content Type :
Une fois fait, vous pouvez récupérer les Messages de la conversation active en référençant le groupe dans lequel nous avons affiché les données précédemment :
Enfin, n'oubliez pas de trier les messages avec l'opérateur :sorted pour que les messages les plus récents s'affichent en bas.
Il ne reste plus qu'à configurer le bon Content Type pour chaque groupe dans notre Repeating Group et lier chaque élément au champ correspondant (le contenu texte dans mon cas).
Enfin, appliquez deux conditionals pour afficher la bulle de chat correcte en fonction de l'expéditeur du message.
Appliquons ce conditional sur les Bulles Bleues (messages envoyés par l'User) :
Et ce conditional sur les Bulles Grises (messages envoyés par tous les autres que notre User) :
Assurez-vous aussi que ces groupes sont cachés par défaut (c'est-à-dire non visibles au chargement de la page) et qu'ils se compressent quand ils sont cachés.
Super ! Notre système affiche maintenant les messages de la conversation active !
4. Construire la logique
Maintenant que nous avons notre interface et un système d'affichage fonctionnel, continuons et construisons la logique pour faire fonctionner notre système de chat.
Envoyer des messages
Pour envoyer un message, votre app doit :
Créer un nouveau message
Ajouter ce message à la liste des messages de notre conversation
Simple, n'est-ce pas ?
Pour cela, commençons par créer un workflow sur notre bouton "Envoyer le message".
À la première étape, voici ce que fait notre workflow :
Il crée simplement un nouveau message avec les champs appropriés.
À la deuxième étape, notre workflow ajoute le message que nous venons de créer à la liste des messages de notre Conversation.
Pour sélectionner la bonne conversation, nous utilisons la Data Source du groupe dans lequel nous avons affiché nos données plus tôt.
Et enfin, n'oubliez pas d'utiliser la commande "Reset relevant inputs" pour vider l'Input du message après l'envoi.
Et voilà !
Avec ce tutoriel, vous serez capable de créer n'importe quel système de messagerie ou application de chat. Que ce soit une fonctionnalité supplémentaire dans votre app, sa fonctionnalité principale ou juste pour de l'assistance.
J'espère que cela vous a plu.
Bonne création !
