Partager:
){kind=small}
Éducateur technique sympathique, père de famille, défenseur de la diversité, il discute probablement un peu trop. Anciennement ingénieur backend. Parlez-moi de JavaScript (frontend ou backend), de l'incroyable Vue.js, de DevOps, de DevSecOps, de tout ce qui concerne JamStack. Rédacteur sur DEV.to
Créer une interface de messagerie simple avec Bootstrap
Temps de lecture : 29 minutes
BootstrapBootstrap, initialement appelé Twitter Blueprint, a été développé par @mdo (Mark Otto) et @fat (Jacob Thornton) alors qu'ils travaillaient chez Twitter, afin d'encourager la cohérence des outils. Aujourd'hui, il s'agit de l'un des frameworks frontaux et projets open source les plus populaires au monde. Bien qu'il soit encore considéré comme un raccourci par de nombreux développeurs frontaux, il a joué un rôle important en apportant une expérience utilisateur cohérente et conviviale dans les mains de tous les développeurs, dans le monde entier.
Le web design regorge de toutes sortes d'exemples d'interfaces utilisateur de messagerie, mais les développeurs manquent de choix sur les frameworks qui leur offrent des interfaces utilisateur de messagerie rapides et faciles à mettre en œuvre, qui s'appuient sur quelque chose d'aussi simple que Bootstrapet qui n'utilisent pas beaucoup de CSS ou de JavaScript personnalisés. Vous pouvez pouvez trouver des interfaces de messagerie pour Bootstrap dans la nature, mais aucune d'entre elles ne semble vous faciliter la tâche en utilisant des composants standards simples de la bibliothèque Bootstrap .
Dans ce guide, vous allez améliorer une application de chat existante avec Bootstrap 4en utilisant des composants standards et une édition CSS minimale.
L'application application de démonstration et un exemple terminé sont disponibles sur GitHub.
Pour commencer, vous aurez besoin d'installer Node et NPM. Ce guide utilise Node 8 et NPM 6. Vérifiez qu'ils sont installés et à jour.
Node et NPM doivent être installés et à la bonne version. Allez sur nodejs.org et installez la bonne version si vous ne l'avez pas.
Pour configurer votre application, vous devez installer le CLI de Vonage. Installez-le en utilisant NPM dans le terminal.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Ouvrez un compte Vonage gratuit et configurez le CLI de Vonage avec la clé API et le secret trouvés sur le tableau de bord.
Le CLI de Vonage comporte des modules d'extension qui, lorsqu'ils sont installés, offrent des capacités supplémentaires. Dans ce tutoriel, vous travaillerez avec Conversations, voici donc la commande pour installer son plugin :
Vous pouvez utiliser git pour cloner l'application application de démonstration à partir de GitHub.
Pour ceux qui ne sont pas à l'aise avec les commandes git, ne vous inquiétez pas, je vous couvre. Ce guide contient des instructions pour télécharger le projet sous forme de fichier ZIP.
Suivez ce pour installer git.
L'application de démonstration est simplement une implémentation de base du Vonage Client SDK de Vonage, qui est une bibliothèque JavaScript permettant de mettre en œuvre WebRTC rapidement et facilement.
Pour que ce guide soit facile à suivre, clonez l'application de démonstration directement depuis GitHub.
Pour ceux qui ne sont pas à l'aise avec les commandes git, vous pouvez télécharger l'application de démonstration sous forme de fichier zip et le décompresser localement.
Une fois cloné ou décompressé, passez dans le nouveau répertoire de l'application de démonstration.
Installer les dépendances npm.
Configurez le port d'application à l'aide d'un fichier d'environnement. Copiez le fichier d'exemple :
Maintenant, éditez le fichier d'environnement .env et fixez le port à 3000 (ou tout autre port souhaité).
Parmi les autres paquets installés par votre dernière commande, il y a un paquet appelé nodemonqui vous permet de recharger votre application si vous modifiez des fichiers automatiquement.
Pour lancer l'application de manière standard, exécutez :
Pour démarrer l'application, mais avec nodemon à la place, exécutez :
Conseil : Si vous exécutez l'application avec l'option
nodemonpour le reste de ce tutoriel, chaque fois que je suggérerai de redémarrer l'application, vous n'aurez pas besoin de le faire carnodemonle fait pour vous. Cependant, si vous devez vous réauthentifier avec l'application, vous devrez quand même le faire, car les informations de session sont stockées en mémoire et ne sont pas configurées pour utiliser un autre type de stockage.
Quelle que soit la façon dont vous choisissez d'exécuter l'application, une fois qu'elle est lancée, vous pouvez l'essayer dans votre navigateur préféré, qui devrait être en mesure de la trouver en cours d'exécution localement : http://localhost:3000.
A blank, broken Chat application
Il est en grande partie vide, vous ne pouvez envoyer de message à personne, et si vous regardez dans la console de votre navigateur, vous trouverez des erreurs de l'API de Vonage, parce qu'il est temps de configurer l'application.
Pour vous connecter à Vonage et envoyer ou recevoir des messages du service, vous devez configurer l'application de démonstration.
Tout d'abord, créez une Applications Vonage avec des capacités RTC (communication en temps réel). L'URL de l'événement sera un journal en direct des événements qui se produisent sur le service Vonage, comme l'arrivée/le départ d'utilisateurs, l'envoi de messages, l'activation de l'audio (si vous avez eu envie de l'activer).
Deuxièmement, créez une conversation Vonage, qui agit comme un salon de discussion. Ou un conteneur pour les messages et les événements.
Créez maintenant un utilisateur pour vous-même.
Remarque : Dans cette démonstration, vous ne discuterez pas entre deux utilisateurs. D'autres guides vous montrent comment créer des conversations entre plusieurs utilisateurs. Ce guide se concentre sur la mise en forme de l'interface utilisateur de votre message d'une manière simple mais attrayante.
Ensuite, ajoutez votre nouvel utilisateur à la conversation. Un utilisateur peut être membre d'une application, mais il doit tout de même rejoindre la conversation.
Enfin, générez un jeton pour votre nouvel utilisateur. Ce jeton représente l'utilisateur lorsqu'il accède à l'application. Ce jeton d'accès l'identifie, de sorte que toute personne l'utilisant sera supposée être le bon utilisateur.
En pratique, vous configurerez l'application avec ce jeton. En production, ces jetons doivent être protégés, gardés secrets et exposés avec précaution à l'application cliente, si tant est qu'ils le soient.
Après avoir généré toutes les parties dont vous aurez besoin, éditez le fichier views/layout.hbs et trouvez le JavaScript illustré ici :
<script>
var userName = '';
var displayName = '';
var conversationId = '';
var clientToken = '';
</script>Editez la configuration avec les valeurs que vous avez générées dans les commandes ci-dessus.
<script>
var userName = 'luke'; // <USER_NAME>
var displayName = 'Luke Oliff'; // <DISPLAY_NAME>
var conversationId = 'CON-123...y6346'; // <CONVERSATION_ID>
var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c'; // this will be much much longer
</script>Maintenant configurée, redémarrez l'application. Accédez-y en utilisant la même URL d'application.
La première chose que vous remarquerez est une ligne indiquant que vous avez rejoint la conversation avec votre utilisateur.
An almost blank, working Chat application
Ensuite, vous pouvez envoyer des messages à l'aide du formulaire, où vous pourrez vous envoyer des messages à votre guise.
Sending some messages to our working Chat application
Votre application de base étant opérationnelle, vous pouvez maintenant la styliser à l'aide de Bootstrap.
Chaque étape de ce guide est engagée individuellement dans la branche branche de l'exemple fini de ce projet. Ainsi, si à tout moment vous rencontrez une erreur dans le processus, vous pouvez vous référer aux commits eux-mêmes. Vous trouverez également des liens vers le commit correspondant à chaque étape.
Vous commencerez par éditer le fichier views/layout.hbs et en modifiant la conception principale de l'application pour y inclure les ressources CSS et JavaScript de Bootstrap.
En suivant le guide Guide de démarrage de Bootstrap ajoutez cette balise <link> à l'intérieur de votre <head> avant toutes les autres feuilles de style, pour charger les ressources CSS. La balise <link> ci-dessous est un exemple, vous pouvez soit vous référer à l'engagement dans l'application de démonstration, ou utiliser la balise <link> dans le guide Bootstrap Getting Started.
<!-- views/layout.hbs -->
<!DOCTYPE html>
<html>
<head>
<!-- //... -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous">
<!-- //... -->
</head>
<!-- //... -->
En outre, vous aurez besoin des bibliothèques Bootstrap et JavaScript recommandées. On peut dire que ces bibliothèques ne sont pas nécessaires ici. Mais de nombreux composants Bootstrap nécessitent l'utilisation de JavaScript pour fonctionner correctement, en s'appuyant également sur Popper.js et jQuery. Encore une fois, vous pouvez soit vous référer à le commit dans l'application de démonstration ou utiliser les balises <script> dans le guide Bootstrap Getting Started.
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<!-- //... -->
<script src="https://code.jquery.com/..." integrity="..." crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js..." integrity="..." crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous"></script>
</body>
</html>
Redémarrez l'application et regardez à nouveau. jeter un coup d'œil à nouveau. Vous pouvez constater que ces changements n'ont eu qu'un effet minime.
Styled the working Chat application with Bootstrap
Bootstrap étant désormais inclus dans votre application, vous pouvez ajouter vos éléments <nav> et votre conteneur à la présentation principale.
Toujours en cours d'édition views/layout.hbsajoutez le code suivant pour envelopper l'expression existante {{{body}}} existante.
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">{{title}}</a>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-12">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Bootstrap Chat</h1>
</div>
{{{body}}}
</main>
</div>
</div>
<!-- //... -->
<!-- //... -->Si vous souhaitez voir les modifications exactes apportées au fichier, vous pouvez consulter le commit.
Vous verrez maintenant que vous avez ajouté une barre de navigation, mais que le chat reste en mode non stylisé, ce qui entraîne des problèmes d'affichage. Redémarrez l'application pour pour voir à quoi elle ressemble maintenant.
Added navbar and container to Chat application
Les interfaces de messagerie étant constituées d'une liste de messages, vous utiliserez un élément list <ul> d'un point de vue sémantique.
Modifier views/index.hbs et remplacer l'élément <div id="messageFeed"> en un élément de liste non ordonnée (à puces) <ul> comme indiqué. La classe list-unstyled est une classe Bootstrap qui supprime les puces et l'indentation dans le style natif de la liste.
<ul class="list-unstyled" id="messageFeed">
</ul>L'utilisation du balisage sémantique approprié pour les listes présente l'avantage d'afficher correctement les informations dans les navigateurs textuels et les lecteurs d'écran. Vos messages seront éventuellement des éléments de liste <li> également.
Lors de l'édition de views/index.hbsvous pouvez également effectuer les remplacements suivants. Trouvez ces deux <input> éléments.
<input type="text" id="messageTextarea">
<input type="button" id="send" value="Send" />
Remplacez-les par cette balise, qui contient un groupe de boutons Bootstrap, une zone de texte stylisée et un bouton d'envoi.
<div class="input-group mb-3">
<input type="text" class="form-control" id="messageTextarea">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="send">Send</button>
</div>
</div>Jetez un coup d'œil à le commit pour voir exactement comment le fichier doit être modifié.
Redémarrez l'application et regardez à nouveau. jeter un coup d'œil à nouveau. Bien que vous ayez modifié la façon dont les messages sont ajoutés, le style n'a pas beaucoup changé. Mais, au moins, le formulaire est plus proche de ce que l'on attend d'une interface utilisateur de messagerie.
Chat application now using list items and chat-style inputs
Une fois les modifications de balisage terminées, des choses étranges se produisent dans la mise en page.
Ces trois changements de CSS sont disponibles dans un seul commit à public/stylesheets/style.css.
La première modification CSS consiste à ajouter padding-top au conteneur de contenu principal, en tenant compte de la hauteur de la barre de navigation (40px) et d'un espace blanc approprié basé sur le style par défaut de Bootstrap (8px).
/* ... */
[role="main"] {
padding-top: 48px; /* space for fixed navbar (40px) and margin (8px) */
}Redémarrez l'application et essayez-la.
Fixed header margins in chat application
Ce changement messageFeed fixe la hauteur de l'élément qui contient les messages de sortie à 100 % de la hauteur de la fenêtre, moins les hauteurs de la barre de navigation (48px), de la barre de titre principale (71px) et du pied de page (qui doit encore être stylisé, à 53px).
/* ... */
#messageFeed {
height: calc(100vh - 172px); /* space for fixed navbar (48px), "main" title (71px), footer (53px) */
overflow-y: scroll; /* vertical scroll for the message feed */
}Redémarrez l'application et essayez-la. Pour voir le défilement du débordement pour le message messageFeedvous devrez envoyer d'autres messages.
Chat application message feed now scrollable
Cette dernière modification CSS concerne la page <footer>qui contient le texte et le bouton. Vous voudrez les fixer au bas de la fenêtre, en pleine largeur. Définissez la hauteur (53px), donnez-lui une couleur d'arrière-plan et ajoutez une marge standard définie par le thème Bootstrap.
/* ... */
#messages footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%; /* 100% of page width */
padding: 0 15px 15px 15px; /* standard edge margin (15px) */
height: 53px; /* space for input height (38px) + bottom padding (15px) */
background-color: #fff;
}Redémarrez l'application et essayez-la.
Chat application inputs now fixed to footer
Les dernières modifications que vous apporterez à l'application de démonstration concernent le JavaScript fourni avec la démo. Ces modifications sont toutes apportées au fichier public/javascripts/chat.js dans le fichier
Modifiez le fichier et trouvez la fonction memberJoined . Modifiez-la pour qu'elle renvoie un élément de liste <li> comme indiqué ci-dessous.
// public/javascripts/chat.js
//...
memberJoined(member, event) {
const date = new Date(Date.parse(event.timestamp));
return `<li class="my-2 text-center">` +
`<p>${member.display_name} joined the conversation <small>@ ${date.toLocaleString('en-GB')}</small></p>` +
`</li>`;
}
//...Pour voir comment la fonction JavaScript est modifiée, jetez un coup d'œil à le commit.
Redémarrez l'application et essayez-la à nouveau en utilisant l'adresse URL de l'application. Vous verrez maintenant que le message joint par l'utilisateur est joliment centré dans le flux de messages.
Chat application events now using line items
Dans le même fichier, trouvez la fonction senderMessage . Modifiez-la pour qu'elle renvoie un élément de liste <li> qui est un objet Media. Les objets multimédias sont similaires aux messages en ce sens qu'ils ont un titre (pour l'auteur et les métadonnées), un contenu (le message) et une image facultative.
Dans ce cas, une condition détermine la sortie :
Un objet Media standard si le message actuel
user.nameest égal au messageuser.name- De moi.Un objet Media dont le texte est aligné à droite, si le texte actuel
user.namen'est pas égal au messageuser.name- À moi.
// public/javascripts/chat.js
//...
senderMessage(user, sender, message) {
const date = new Date(Date.parse(message.timestamp))
var output = '';
if (user.name === sender.user.name) {
output = `<li class="media my-3">` +
`<div class="media-body">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
} else {
output = `<li class="media my-3">` +
`<div class="media-body text-right">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
}
return output;
}
//...Pour voir comment cette fonction JavaScript est modifiée, jetez un coup d'œil à le commit.
Redémarrez l'application et réessayez en utilisant l'URL par défaut : http://localhost:3000. Vous verrez maintenant que vos messages sont joliment stylisés.
Now using from-me and to-me message style in chat application
En l'absence de profils d'utilisateurs dans votre application, l'absence d'avatars lui donne un air un peu vide. Ainsi, pour compléter le look de l'objet Media et lui donner l'effet d'une application de chat moderne, vous pouvez utiliser un service d'avatar placeholder comme adorable.io basé sur les informations de l'utilisateur.
Adorable accepte n'importe quelle chaîne de caractères comme partie d'une URL, https://api.adorable.io/avatars/64/my-string-here.png et renvoie un visage amusant. C'est un excellent moyen d'ajouter une image de remplacement qui change d'un utilisateur à l'autre.
Ainsi, toujours en éditant le même fichier, revenez à la fonction senderMessage et ajoutez cette ligne après l'élément de ligne d'ouverture <li> pour les messages from-me.
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="mr-3" alt="" />` +
//...
Ensuite, ajoutez cette ligne dans le fichier à moi de la condition, juste avant l'élément de clôture </li> de clôture.
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="ml-3" alt="" />` +
//...
La différence essentielle entre ces lignes est que l'une a la mr-3 et que l'autre a la classe ml-3 classe. L'une concerne une image alignée à gauche avec une marge à droite. L'autre est une image alignée à droite avec une marge à gauche. Si l'on mélange ces deux éléments, le résultat risque d'être un peu bizarre. Jetez donc un coup d'œil à ce commit pour vérifier que vous l'avez fait dans le bon sens.
Une fois que vous êtes satisfait de vos modifications, redémarrez et jeter un coup d'œil à l'application.
Adorable.io avatars in chat application
Dans les interfaces utilisateur de messagerie classiques, les messages les plus récents sont affichés en bas de l'écran, et il faut faire défiler l'écran vers le haut pour voir les messages plus anciens. L'application de démonstration commande les messages et les événements de cette manière également. Ainsi, pour rester concentré sur le bon contenu, vous pouvez maintenant ajouter le code suivant. Ce code fera défiler le flux de messages vers le bas automatiquement lorsqu'un nouveau message arrive, uniquement si le flux de messages était déjà en bas. Ainsi, si vous faites défiler le fil vers le haut pour voir des messages plus anciens, cela ne fera rien.
Ajoutez deux nouvelles fonctions au fichier chat.js au fichier La première fonction renverra un booléen, indiquant si messageFeed est au bas de l'écran ou non. L'autre fera défiler messageFeed jusqu'au bas de l'écran.
// public/javascripts/chat.js
//...
isFeedAtBottom() {
return (this.messageFeed.offsetHeight+this.messageFeed.scrollTop)===this.messageFeed.scrollHeight;
}
scrollFeedToBottom() {
this.messageFeed.scrollTop = this.messageFeed.scrollHeight;
}
//...Ensuite, modifiez les récepteurs d'événements pour les nouveaux messages envoyés et les nouveaux membres ajoutés à la conversation. Dans les deux cas, vous enregistrerez la position de défilement du flux de messages avant d'ajouter le poste. Ensuite, vous ferez défiler (ou non) le message en fonction du contexte précédant la modification.
// public/javascripts/chat.js
//...
setupConversationEvents(conversation, user) {
//...
conversation.on('text', (sender, message) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
conversation.on("member:joined", (member, event) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
//...
}
//...
La dernière modification apportée à l'application de démonstration consiste à faire défiler le flux de messages vers le bas lorsque la page se charge. Ainsi, après la ligne où vous ajoutez le eventsHistory au flux de messages (this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML), ajoutez this.scrollFeedToBottom();.
// public/javascripts/chat.js
//...
showConversationHistory(conversation, user) {
// ...
// ...
this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML;
this.scrollFeedToBottom();
// ...
// ...
}
//...Pour vous assurer que vous avez appliqué ce changement correctement, vous pouvez consulter le commit.
Une fois que vous êtes satisfait de vos modifications, redémarrez et jeter un coup d'œil à l'application.
Chat application message feed now scrolls to bottom
Si I je construisais une application de chat, voici comment j'aurais voudrais qu'elle ait l'air.
Nous espérons que ce guide sur la création d'une interface utilisateur de messagerie vous sera utile. Il comprend les éléments de base, tels que De moi et À moi le défilement automatique vers le bas et les espaces réservés pour l'avatar de l'utilisateur.
Vous pouvez maintenant appliquer ces techniques d'interface utilisateur dans d'autres tutoriels du Client Client SDK de Vonage tels que Ajouter une fonctionnalité Voice à une application de chat existante, S'inscrire pour chatter avec Typeformet le tutoriel Vue d'ensemble du Client SDK JavaScript.
Certains de nos autres guides incluent l'envoi de messages entre plusieurs utilisateurs ! Je vous mets au défi d'envoyer des messages entre plusieurs utilisateurs à l'aide d'une interface de messagerie soignée et de partager vos progrès.
Chat application using multiple users
Et n'oubliez pas, si vous avez des questions, des conseils ou des idées que vous souhaitez partager avec l'ensemble de la communauté, n'hésitez pas à vous rendre sur notre Communauté Slack ou répondez ci-dessous 👇.
Partager:
Éducateur technique sympathique, père de famille, défenseur de la diversité, il discute probablement un peu trop. Anciennement ingénieur backend. Parlez-moi de JavaScript (frontend ou backend), de l'incroyable Vue.js, de DevOps, de DevSecOps, de tout ce qui concerne JamStack. Rédacteur sur DEV.to