Les chats et systèmes de messagerie font partie des fonctionnalités les plus utilisées dans notre monde.
Que vous construisiez une Marketplace, un SaaS, un concurrent de Slack ou n'importe quel logiciel qui connecte les gens, vous aurez probablement besoin d'un système de chat dans votre app.
Dans cet article, vous apprendrez étape par étape comment construire ce type de fonctionnalité dans Bubble.
1. Structurer notre Database
Dans cette section, nous allons commencer par structurer notre base de données. Nous créerons donc les Data Types nécessaires et leurs Data Fields relatifs.
Voyons de quoi est composé un Chat :
1. Conversations
Un système de chat est basiquement composé de 2 data types.
Le premier est "Conversations".
Les Conversations sont ce que vous voyez habituellement à 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 voulez (dans le cas d'une conversation de groupe par exemple).
En plus de cela, une conversation peut avoir de nombreux autres champs selon les fonctionnalités de votre système.
Par exemple, une conversation pourrait avoir un champ pour une "miniature personnalisée", pour un nom de conversation personnalisé, une liste de médias partagés etc...
Les possibilités sont infinies.
Ce qui compte le plus, c'est qu'une conversation stocke une Liste de Messages et une Liste de Participants.
C'est la base d'un système de Chat.
2. Messages
Maintenant arrive le composant le plus évident de notre système, les Messages.
Les Messages sont composés de deux choses :
Un contenu (texte)
Un expéditeur (user)
En plus de cela, vous ajoutez à peu près tout ce que vous voulez, comme des réactions, des pièces jointes etc...
Mais ces deux champs sont obligatoires.
2. Construire notre UI de Chat
Maintenant que notre base de données est correctement structurée, nous devons construire notre interface (UI).
Dans cet article, nous nous concentrerons plus sur les "coulisses", et moins sur le travail Front-End.
Donc pour cet exemple, nous utiliserons un composant "Chat" prêt à l'emploi venant de la bibliothèque de composants Nocodable Components.
De cette façon, nous aurons une UI propre, professionnelle et entièrement responsive avec laquelle travailler en quelques secondes seulement.
Mais vous pouvez tout à faire créer cette interface vous même si vous le souhaitez.
3. Connecter notre base de données avec notre Interface
Afficher les conversations
Configurer notre Repeating Group
Commençons par afficher la liste des conversations auxquelles notre User a participé.
Dans notre UI, cela se fait à travers un Repeating Group, positionné à gauche de notre écran.
Commençons par définir le Content Type de notre Repeating Group à "Conversations" :
Une fois cela fait, nous pouvons dire à Bubble où récupérer effectivement les bonnes données.
Cela se fait avec un "Do a Search For" qui cherchera des "Conversations".
Sur cette recherche, nous ajouterons une contrainte pour nous assurer de récupérer seulement les conversations où le User est un participant effectif.
Finalement, vous pouvez trier cette search sur le champ "Modified date" avec "descending" défini à "yes" pour montrer la conversation modifiée le plus récemment en haut.
Cela affichera en haut les conversations qui ont les messages les plus récents.
Afficher les informations de conversation
Maintenant, tout ce que nous devons faire est nous assurer que les données passent de notre Repeating Group jusqu'à notre élément Text.
C'est pour pouvoir afficher les informations de conversation (comme son Titre, ses participants, dernier message etc...).
Donc pour chaque group présent dans le Repeating Group, vous devrez définir le bon Content Type, et la Data Source :
Une fois cela fait, vous pourrez sélectionner "Parent's group Conversation" et afficher le data field approprié.
Par exemple, dans mon cas, j'ai choisi d'afficher le prénom de chaque participant comme titre de la conversation (comme montré ci-dessous).
Répétez l'opération pour les autres champs que vous devez montrer (comme l'aperçu du dernier message), et vous serez prêt.
Ouvrir une conversation
Maintenant nous devons pouvoir ouvrir une conversation, afin de voir effectivement son contenu (c'est-à-dire les messages).
Vous avez plusieurs façons de faire cela, par exemple vous pourriez utiliser un Custom State.
Mais je préfère utiliser la Data Source du container qui contient mes messages.
Dans mon cas, c'est le container à droite de mon écran :
Pour faire cela, vous pouvez ajouter un workflow sur votre conversation et utiliser l'action "Display data in a group/popup", comme ci-dessous :
De cette façon, quand la conversation est cliquée, ce workflow enverra cette conversation dans le Group.
Et avec cela, nous pourrons afficher les messages !
Aussi, vous pouvez utiliser cette information pour changer le style de la conversation que vous avez cliquée, afin d'indiquer à l'utilisateur que c'est la conversation qu'il affiche :
Afficher les messages
Maintenant que nous avons envoyé la conversation active au bon endroit, nous pouvons l'utiliser pour afficher la liste des messages de la Conversation Active.
Pour faire cela, nous devons configurer le Repeating Group utilisé pour afficher nos messages :
Commençons par définir son Content Type :
Une fois cela fait, vous pouvez récupérer les Messages de la conversation active en référençant le Group dans lequel nous avons affiché les Data plus tôt :
Finalement, n'oubliez pas de trier les messages avec l'opérateur :sorted pour que les messages soient affichés avec les plus récents en bas.
Maintenant, tout ce qu'il nous reste à faire est de définir le bon Content Type de chaque group dans notre Repeating Group et lier chaque élément au champ pertinent (contenu texte dans mon cas).
Finalement, nous devons appliquer deux conditionnels pour montrer le bon groupe de message basée sur qui a envoyé ce message.
Pour faire cela, appliquons une condition sur les bulles Bleues (c'est-à-dire les messages envoyés par le User) :
Et appliquons une condition sur les bulles Grises (c'est-à-dire les messages envoyés par tous les autres que notre User) :
Assurez-vous aussi que ces groups sont cachés par défaut (c'est-à-dire not visible on page load) et qu'ils Collapse when hidden.
Cool ! Maintenant notre système montre les messages de la conversation active !
4. Construire la logique
Maintenant que nous avons notre UI et un système d'affichage fonctionnel, nous pouvons continuer et construire la logique pour faire fonctionner notre système de Chat.
Envoyer des messages
Pour envoyer un message, ce que votre app doit faire est :
Créer un nouveau message
Ajouter ce message à la liste des messages dans notre conversation
Facile non ?
Pour faire cela, commençons par créer un workflow sur notre bouton "Send message".
Dans sa première étape, voici ce que fait notre workflow :
Il crée simplement un nouveau message avec les champs appropriés.
Dans sa seconde é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 group dans lequel nous avons affiché nos données plus tôt.
Et comme 3ème étape, n'oubliez pas d'utiliser le "Reset relevant inputs" pour vider l'input de message après l'envoi du message.
Et voilà !
Avec ce tutoriel, vous pourrez créer n'importe quel système de messagerie ou n'importe quelle app de messagerie. Que ce soit une fonctionnalité supplémentaire dans votre app, sa fonctionnalité principale ou simplement pour le support.
J'espère que ça vous a plu.
Bon développement !
