Kategorien
JavaScript & jQuery Programmierung

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js (Teil 4)

In dieser Node.js Tutorial-Serie zeigen wir, wie man eine Node.js-getriebene Echtzeit-Chatroom Web App erstellt, die vollständig cloud-fähig ist. Es wird darum gehen, Node.js auf einem Windows-Rechner aufzusetzen, ein Web-Frontend mit Express zu entwickeln, eine Node-Express-App auf Azure zu bringen, Socket.IO zu nutzen, um einen Echtzeit-Layer hinzuzufügen und zu zeigen, wie man das Ganze zum Schluss einsetzt.

Aus der Praxis: Wir bauen eine Chatroom Web App mit Node.js (Teil 4)

Schwierigkeitsstufe: Einsteiger bis mittlere Kenntnisse, vorausgesetzt werden HTML5 und JavaScript

Teil 4 – Eine Chatroom-UI mit Bootstrap erstellen

Willkommen zurück zu Teil 4 unserer Praxis-Serie zu Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web-App. In diesem Teil erkläre ich, wie man ein mit Bootstrap entworfenes Frontend dem Chatroom-Backend hinzufügt, welches wir in Teil 2 und Teil 3 gebaut haben.

Was ist Bootstrap?

Bootstrap ist ein sehr weit verbreitetes und beliebtes HTML- und CSS-Framework, um Websites und Web-Anwendungen zu erstellen. Es ist mit Abstand das Top-Projekt bei GitHub. Bootstrap unterstützt responsives Webdesign, wodurch eine Webseite unabhängig vom Gerät korrekt dargestellt wird, egal ob auf dem Desktop-Computer, einem Tablet oder anderen Mobilgeräten, wie Smartphones etc.

Bootstrap dem Projekt hinzufügen

Um Bootstrap unserem Projekt hinzuzufügen, müssen wir die verkleinerten CSS- und JS-Dateien für Bootstrap herunterladen. Das ist hier möglich. Nach dem Download von Bootstrap gilt es, die Datei zu entpacken und die Ordner “css”, “js” und “fonts” in den “public”-Ordner unseres Projekts zu kopieren.

In unserer bestehenden Ordnerstruktur fallen jetzt ein paar Unstimmigkeiten ins Auge. Wir werden daher die Stylesheets- und JavaScript-Ordner vereinheitlichen. Ich persönlich bevorzuge die Bootstrap-Benennungen, das heißt “css” statt “stylesheets” und “js” statt “javascripts”, da diese mit den Libraries von Drittanbietern geteilt werden. Nun kopieren wir die Dateien von “stylesheets” in “css” und löschen den “javascripts” Ordner, der jetzt leer sein sollte. In layout.jade ändern wir dann die folgende Zeile:

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

zu:

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

Als nächstes fügen wir die Bootstrap-CSS-Links im Header und die entsprechenden Meta-Tags für HTML5-Apps in der layout.jade-Datei hinzu. Die folgenden Zeilen müssen vor der Zeile mit dem style.css-Link eingefügt werden.

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')

Nun fügen wir die JavaScript-Datei hinzu, die Bootstrap für seine Komponenten und Plugins benötigt. Dazu fügen wir die folgende Zeile am Ende von layout.jade ein:

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

Vollständiges layout.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' src='/js/bootstrap.min.js')

Erstellen des Chat-UI-Layouts

Jetzt ist das Chat-Userinterface-Layout an der Reihe. Hier ist es sicher hilfreich, sich tiefer in Bootstrap einzulesen und dieses etwas längere Tutorial anzuschauen. Alle Chat-Engines haben einen Bereich für die aktuellen Mitteilungen und einen Bereich, in dem die Nutzer Mitteilungen schreiben und senden können. Traditionell war das Layout so gestaltet, dass die Mitteilungen oben erschienen und das Schreibfeld unten positioniert war.

Es erfordert einen gewissen Aufwand, um in HTML ein Element am unteren Rand des Viewports zu fixieren. Ich werde mich dafür an diesem Beispiel orientieren, um unten eine Fußzeile zu fixieren. Dazu modifizieren wir die index.jade-Datei und entfernen alle Code-Zeilen unterhalb des Content-Blocks.
Zunächst fügen wir den Seitenbereich ein, der die ankommenden Mitteilungen enthalten soll.

Dazu fügen wir erstmal eine div mit der Klasse wrap hinzu. In Jade müssen wir einfach nur wrap schreiben, um eine <div class=”wrap”></div> zu erstellen. Indem wir den Einzug nutzen, teilen wir der Jade-Templating-Engine mit, dass mehr eingerückte Elemente innerhalb der weniger eingerückten Elemente stehen.

Wer es in den anderen Teilen des Tutorials verpasst hat: Dieses Jade-Tutorial lohnt sich wirklich.

Als nächstes fügen wir eine weitere div mit der Klasse container-fluid hinzu, um der Seite eine flexible Breite zu geben. Dazu kommt ein H1-Element: “Welcome to the Node Chatroom” sowie eine div mit einer ID messages und schließlich eine div mit der Klasse push, mit dem wir das Bearbeitungsfeld für Mitteilungen im Chatroom an das untere Ende des Viewports schieben.

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

        .push

Nun gehen wir daran, das Schreibfeld zu programmieren. Dabei wollen wir das Textfeld und den Sende-Button in einer div namens Footer und einer div namens „container-fluid“ erfassen. Das Footer div hat den gleichen Einzug wie das wrap div.

Jetzt nutzen wir das Bootstrap-Grid-System (mehr dazu hier) um das Textfeld in zwei Teile zu trennen. In der größeren Spalte wird man die Mitteilungen schreiben können, die andere enthält den Block-Level-Button, mit dem man die Nachricht absenden kann.

Deutlich wird, dass Jade uns ermöglicht, die Attribute eines Elements mit Hilfe der Absatzvermerke genau festzulegen. Der Code sieht dann wie folgt aus:

  .footer
    .container-fluid
      .row
        .col-xs-8.col-sm-9
          input(type="text" id="message-box" class="form-control input-lg" 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

Vollständiges index.jade

extends layout

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

        .push
  .footer
    .container-fluid
      .row
        .col-xs-8.col-sm-9
          input(type="text" id="message-box" class="form-control input-lg" 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

Mit CSS das Textfeld unten fixieren

Um das Textfeld unten in der Ansicht zu fixieren, werden wir einige benutzerdefinierte CSS zur Seite public/css/style.styl hinzufügen. Diese Datei nutzt den Stylus CSS-Präprozessor, aber man kann auch textbasiertes CSS kopieren, welches erneut in die erstellte CSS-Datei kopiert wird.

Zunächst stellen wir sicher, dass die ganze Seite wirklich 100% der Höhe einnimmt.

html, body
  height: 100%

Dann achten wir darauf, dass der Wrap-Bereich die maximal mögliche Höhe einnimmt, aber unten einen Rand von 60px für unsere Fußzeile und das Textfeld lässt.

.wrap 
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto -60px

Nun stellen wir sicher, dass die Fläche für den Textbereich berücksichtigt wird und ordnen diese der Fußzeile zu.

.push, .footer 
  height: 60px

Um zum Schluss noch etwas stylisch zu werden, geben wir der Fußzeile eine dezente Hintergrundfarbe.

.footer
  background-color: #f5f5f5

Vollständige Style.styl

html, body
  height: 100%
 
.wrap 
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto -60px
 
.push, .footer 
  height: 60px
 
.footer
  background-color: #f5f5f5

Screenshot

Fazit

Perfekt! Wir haben Bootstrap und die Jade/Stylus-Präprozessoren genutzt, um unseren Node-basierten Chatroom mit einem netten UI-Layout auszustatten. Im nächsten Teil werde ich erklären, wie man die UI und das Node-Backend via WebSockets verbindet.

Dranbleiben für Teil 5!

Teil 5 — Den Chatroom mit WebSockets verbinden — wird schon bald hier bei Dr. Web veröffentlicht. Wer mehr Neuigkeiten dazu und zu anderen Artikeln erfahren will, kann mir einfach auf Twitter folgen: @ramisayar.

Weitere Teile der Serie bei MSDN (in Englisch)

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node Apps

Noch mehr Lernen über Node auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.

Sehr hilfreich sind auch diese Kurzvideos zu ähnlichen Node-Themen:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Von Rami Sayar

Rami Sayar ist technischer Evangelist bei Microsoft Kanada und dort für "Web Development" (JavaScript, AngularJS, Node.js, HTML5, CSS3, D3.js, Backbone.js, Babylon.js), Open Data und Open Source Technologien (Python, PHP, Java, Android, Linux, etc.) zuständig. Er betreibt einen Blog und ist als @ramisayar auf Twitter aktiv.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.