Construisez une application Web de chat de Chatroom à propulsion Node.js: interface utilisateur de chat avec bootstrap

Les plats clés

• Ce tutoriel montre comment créer une interface utilisateur de discussion à l'aide de bootstrap dans une application Web propulsée par node.js, en mettant l'accent sur la création d'une conception réactive qui s'adapte à différents appareils.
• Le processus consiste à ajouter du bootstrap au projet, à créer la disposition de l'interface utilisateur de chat et à ajouter CSS pour forcer la zone d'édition de message au bas de la fenêtre.
• Le tutoriel décrit les étapes spécifiques pour incorporer Bootstrap dans le projet, y compris la modification du fichier Layout.jade pour inclure des liens de fichiers Bootstrap CSS et des fichiers javascript.
• La disposition de l'interface utilisateur de chat est construite à l'aide du système de grille bootstrap, et des règles CSS personnalisées sont ajoutées pour s'assurer que la zone de montage du message est positionnée au bas de la fenêtre.

Cet article fait partie d'une série Web Dev Tech de Microsoft. Merci de soutenir les partenaires qui rendent le point de point possible.

Cette série de didacticiels Node.js vous aidera à créer une application Web de chat en temps réel Node.js entièrement déployée dans le cloud. Dans cette série, vous apprendrez à configurer Node.js sur votre machine Windows (ou simplement apprendre les concepts si vous êtes sur Mac), comment développer un frontage Web avec Express, comment déployer une application Node.js Express pour Azure, comment utiliser socket.io pour ajouter une couche en temps réel, et comment déployer tout ensemble.

Le tutoriel utilisera le plug-in Visual Studio en option et les outils Node.js pour Visual Studio comme environnement de développement. J'ai fourni des liens vers des téléchargements gratuits des deux outils. Ceci est un article de niveau débutant à intermédiaire - vous devez connaître HTML5 et JavaScript.

Partie 1 - Introduction à Node.js

Partie 2 - Bienvenue à l'expression avec Node.js et Azure

Partie 3 - Construire un backend avec Node.js, Mongo et Socket.io

Partie 4 - Construire une interface utilisateur de discussion avec bootstrap

Partie 5 - Connecter le salon de discussion avec WebSockets

Partie 6 - La finale et le débogage des applications Remote Node.js

Partie 4 - Construire une interface utilisateur de discussion avec bootstrap

Bienvenue dans la partie 4 de la série de didacticiels Node.js pratique: Créez une application Web de Chatroom à propulsion Node.js.

Dans cet épisode, je vais vous montrer comment ajouter un frontend de style bootstrap Twitter au backend de chat que vous avez construit en partie 2 et partie 3.

Qu'est-ce que Bootstrap?

Bootstrap est un cadre HTML et CSS très populaire pour la création de sites Web et d'applications Web. Il s'agit du projet numéro un sur GitHub. Bootstrap prend en charge la conception Web réactive, permettant à la disposition de votre page de s'adapter à l'appareil (bureau, tablette, mobile).

Ajout de bootstrap à notre projet

Pour ajouter Bootstrap à notre projet, nous devons télécharger les fichiers CSS et JS minifiés pour bootstrap. Vous pouvez télécharger Bootstrap à partir de ce lien. Après avoir téléchargé Bootstrap, dézippez le fichier et copiez sur les dossiers CSS, JS et FONTS dans le dossier public de votre projet.

Vous remarquerez quelques incohérences avec la structure du dossier existant. Nous unifierons les styles de styles et les dossiers JavaScript. Je préfère la nomenclature bootstrap de CSS pour les feuilles de style et JS pour JavaScript, car cela est partagé avec d'autres bibliothèques tierces. Copiez les fichiers dans Stylesheets dans CSS et supprimez le dossier JavaScript car il devrait être vide. Ensuite, allez sur Layout.jade et modifiez la ligne suivante:

link(rel='stylesheet' href='/stylesheets/style.css')

à:

link(rel='stylesheet' href='/css/style.css')

Ensuite, nous voulons ajouter les liens de fichier Bootstrap CSS vers l'en-tête et les balises META appropriées pour les applications HTML5 dans le fichier Layout.jade. Vous devez ajouter les lignes suivantes juste avant la ligne contenant le lien style.css.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

Ensuite, nous voulons ajouter le fichier JavaScript dont Bootstrap a besoin pour ses composants et plugins. Ajoutez la ligne suivante à la fin de la mise en page.jade:

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

Layout terminé.jade

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

Création de la disposition de l'interface utilisateur du chat

Il est temps de développer la disposition de l'interface utilisateur de chat. Tout d'abord, vous voudrez peut-être lire sur Bootstrap et jeter un œil à ce long tutoriel. Tous les moteurs de chat ont une zone pour les messages récemment reçus et une zone pour qu'un utilisateur puisse écrire et envoyer un message. Historiquement, la disposition était de faire attacher la zone d'édition en bas et les messages en haut.

Il n'est pas facile de corriger les éléments sur une page HTML au bas de la fenêtre sans un peu de travail. Je suivrai cet échantillon pour réparer un pied de page en bas. Nous voulons modifier le fichier index.jade et supprimer toutes les lignes de code sous le bloc de contenu.

Tout d'abord, nous ajoutons la zone de la page qui contiendra des messages reçus. Commençons par ajouter un div avec le Wrap Class. Dans Jade, tout ce que vous avez besoin d'écrire est .wrap pour générer un

. En utilisant l'indentation, nous pouvons signaler au moteur de modèles de jade que les éléments plus en retrait iront dans les éléments les moins en retrait. Jetez un œil à ce tutoriel Jade si vous l'avez manqué dans les autres tutoriels.

Ensuite, nous voulons ajouter une autre div avec le conteneur de classe-fluide pour ajouter une largeur de fluide à la page. À l'intérieur, je vais créer un élément H1 qui dit «Bienvenue dans le Node Chatroom» et une div avec des messages d'identification et une div finale avec la poussée de classe que nous utiliserons pour pousser la zone d'édition de message du salon au bas du bas du bas du fond du bas du fond de la fenêtre.

.wrap
  .container-fluid
    h1 Welcome to the Node Chatroom
    #messages
    .push

Ensuite, nous allons développer la zone d'édition de messages. Nous voulons capturer la zone de texte et envoyer un bouton dans un div appelé pied et un div appelé conteneur-fluid. Le pied de page DIV aura la même indentation que la Div Wrap Div.

Ensuite, j'utiliserai le système de grille bootstrap (lisez-le ici) pour diviser la zone d'édition de messages en deux. L'une des colonnes prendra la majorité de l'espace et contiendra la zone de texte pour rédiger le message, la deuxième colonne contiendra un bouton de niveau bloc pour envoyer le message. Notez comment Jade nous permet de spécifier les attributs d'un élément à l'aide de la notation de paragraphe. Le code ressemblera à ceci:

link(rel='stylesheet' href='/stylesheets/style.css')

Index terminé.jade

link(rel='stylesheet' href='/css/style.css')

Ajout de CSS pour forcer la zone d'édition de message au bas de la fenêtre

Nous voulons forcer la zone d'édition de messages au bas de la fenêtre, nous voulons ajouter quelques règles CSS personnalisées dans la page publique / CSS / Style. Ce fichier utilise le préprocesseur CSS Stylus, mais vous pouvez également coller CSS textuel qui sera repéré dans le fichier CSS généré.

Tout d'abord, nous voulons nous assurer que toute la page prend 100% de la hauteur.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

Deuxièmement, nous voulons nous assurer que la zone d'enveloppe prend la hauteur maximale qu'il peut mais laisse une marge de 60px en bas pour notre page de pied de page et de message.

script(type=’text/javascript’ src=’/js/bootstrap.min.js’)

Troisièmement, nous voulons nous assurer que cet espace pour la zone d'édition est respecté et l'attribuer au pied de page.

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

Enfin, pour des raisons stylistiques, ajoutons une couleur d'arrière-plan subtile au pied de page.

.wrap
  .container-fluid
    h1 Welcome to the Node Chatroom
    #messages
    .push

Style terminé.styl

.footer
  .container-fluid
    .row
      .col-xs-8.col-sm-9
        input(type="text"   placeholder="Write a message here..." rows="3")
      .col-xs-4.col-sm-3
        button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

Capture d'écran

Si vous avez tout fait correctement, vous devriez vous retrouver avec une interface utilisateur qui ressemble à ceci:

Conclusion

Voila! Nous avons utilisé Bootstrap et les préprocesseurs Jade / Stylus pour ajouter une belle mise en page d'interface utilisateur pour notre salle de discussion qui est servie par Node.js. Dans le prochain épisode, je vais vous montrer comment connecter l'interface utilisateur et le backend Node.js via WebSockets.

Restez à l'écoute pour la partie 5!

Partie 5 - La connexion du salon de discussion avec WebSockets est là. Vous pouvez rester à jour sur cet article et sur d'autres en suivant mon compte Twitter

Plus de node.js Apprentissage sur azure

Pour un apprentissage plus approfondi sur Node.js, mon cours est disponible ici sur Microsoft Virtual Academy.

ou quelques vidéos de format plus court sur des sujets Node.js similaires:

• Série en six parties: création d'applications avec node.js

• Une promenade à travers le nœud (coding4fun)

Cet article fait partie de la série Web Dev Tech de Microsoft. Nous sommes ravis de partager Project Spartan et son nouveau moteur de rendu avec vous. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows sur moderne.ie .

Questions fréquemment posées (FAQ) sur la création d'une application Web de chat de Chatroom de Node.js

Comment puis-je personnaliser l'interface utilisateur de chat dans mon application Web de chat à propulsion Node.js?

Personnalisation de l'interface utilisateur de chat dans votre application Web de chat à propulsion Node.js peut être effectuée en modifiant le CSS et JavaScript Fichiers associés à l'interface utilisateur de chat. Vous pouvez modifier les couleurs, les polices et la mise en page de l'interface utilisateur de chat en fonction de vos préférences. Vous pouvez également ajouter des fonctionnalités supplémentaires telles que les emojis, le partage de fichiers et les messages vocaux en intégrant des bibliothèques tierces ou en écrivant votre propre code personnalisé. N'oubliez pas de tester soigneusement vos modifications pour vous assurer qu'ils fonctionnent comme prévu et n'introduisez aucun bogue dans votre application.

Quelles sont les meilleures pratiques pour construire une interface utilisateur de chat?

Lorsque vous construisez une interface utilisateur de chat , il est important de se concentrer sur la convivialité et la simplicité. L'interface utilisateur de chat doit être intuitive et facile à utiliser, même pour les nouveaux utilisateurs. Il doit également être réactif, ce qui signifie qu'il devrait bien paraître et bien fonctionner sur tous les appareils et tailles d'écran. Les autres meilleures pratiques incluent la fourniture de commentaires à l'utilisateur (comme l'affichage lorsqu'un message a été envoyé ou lu), permettant la personnalisation (comme la modification du thème ou de la taille de la police), et d'assurer l'accessibilité (comme fournir du texte ALT pour les images et la fabrication Bien sûr, l'interface utilisateur est navigable via le clavier).

Comment puis-je ajouter des fonctionnalités en temps réel à l'application Web de ma salle de chat?

Les fonctionnalités en temps réel peuvent être ajoutées à votre application Web de chat à l'aide de WebSocket, Un protocole qui fournit des canaux de communication complexe sur une seule connexion TCP. Cela permet une communication en temps réel entre le client et le serveur. Dans Node.js, vous pouvez utiliser des bibliothèques telles que socket.io pour implémenter facilement les fonctionnalités WebSocket. Cela permettra aux messages d'être envoyés et reçus instantanément, offrant une expérience de chat sans couture à vos utilisateurs.

Comment puis-je gérer les erreurs dans mon application Web de chat à propulsion Node.js?

Gestion des erreurs est un aspect crucial de toute application Web. Dans Node.js, vous pouvez gérer les erreurs à l'aide de fonctions middleware. Ces fonctions peuvent attraper et gérer les erreurs qui se produisent lors de l'exécution de votre code. Vous pouvez également utiliser des blocs Try / Catch pour gérer les erreurs dans le code synchrone. Il est important de fournir des messages d'erreur informatifs à l'utilisateur et de enregistrer les erreurs à des fins de débogage.

Comment puis-je assurer la sécurité de l'application Web de ma salle implique plusieurs étapes. Tout d'abord, vous devez utiliser HTTPS pour crypter les données en transit. Deuxièmement, vous devez désinfecter la saisie des utilisateurs pour éviter les attaques de scripts croisés (XSS). Troisièmement, vous devez utiliser des cookies sécurisés pour empêcher le détournement de session. Quatrièmement, vous devez mettre en œuvre la limitation des taux pour empêcher les attaques de force brute. Enfin, vous devez garder à jour votre Node.js et tous les autres logiciels pour bénéficier des derniers correctifs de sécurité.

Comment puis-je mettre à l'échelle mon application Web de Chatroom à propulsion Node.js?

La mise à l'échelle d'une application Web de chat de Chatroom propulsée Node.js peut être réalisée via diverses méthodes. Une méthode courante est la mise à l'échelle horizontale, qui implique d'ajouter plus de serveurs pour gérer une charge accrue. Une autre méthode est la mise à l'échelle verticale, qui consiste à ajouter plus de ressources (telles que CPU ou RAM) à un serveur existant. Vous pouvez également utiliser l'équilibrage de chargement pour distribuer le trafic uniformément sur plusieurs serveurs.

Comment puis-je tester l'application Web de ma salle de chat?

Tester votre application Web de chat est cruciale pour vous assurer qu'elle fonctionne comme prévu et fournit une bonne expérience utilisateur. Vous pouvez utiliser des tests unitaires pour tester les fonctions individuelles, des tests d'intégration pour tester comment les différentes parties de votre application fonctionnent ensemble et les tests de bout en bout pour tester votre application du point de vue de l'utilisateur. Vous pouvez également utiliser des tests manuels pour assister à tous les problèmes que les tests automatisés pourraient manquer.

comment puis-je être mon application Web de chat de chat à propulsion Node.js?

Déployer une salle de chat à propulsion Node.js.js? L'application Web peut être effectuée en utilisant diverses plates-formes, telles que Heroku, AWS ou Google Cloud. Ces plateformes fournissent des outils et des services qui facilitent le déploiement, l'échelle et le suivi de votre application. Vous devriez également envisager d'utiliser des outils d'intégration continue / déploiement continu (CI / CD) pour automatiser le processus de déploiement et s'assurer que votre application est toujours à jour.

Comment puis-je surveiller les performances de l'application Web de ma salle de chat?

La surveillance des performances de votre application Web de chat est cruciale pour s'assurer qu'elle reste rapide et réactive. Vous pouvez utiliser des outils tels que New Relic ou Datadog pour surveiller les performances de votre application en temps réel. Ces outils peuvent fournir des informations sur diverses mesures, telles que le temps de réponse, le taux d'erreur et la charge du serveur.

Comment puis-je améliorer l'expérience utilisateur de mon application Web de chat?

Améliorer l'expérience utilisateur de votre application Web de chat peut être réalisée grâce à diverses méthodes. Tout d'abord, vous devez vous concentrer sur les performances, car une application rapide et réactive offre une meilleure expérience utilisateur. Deuxièmement, vous devez rendre votre application accessible à tous les utilisateurs, y compris ceux qui ont handicapé. Troisièmement, vous devez écouter les commentaires des utilisateurs et apporter des améliorations en fonction de leurs suggestions. Enfin, vous devez régulièrement mettre à jour votre application pour ajouter de nouvelles fonctionnalités et corriger tous les bogues.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!