Kategorien
JavaScript & jQuery Programmierung

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

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, wie man Socket.IO nutzt um einen Echtzeit-Layer hinzuzufügen und wie man das Ganze zum Schluss einsetzt.

nodejs-parttwo-teaser_DE
Schwierigkeitsstufe: Einsteiger bis mittlere Kenntnisse, vorausgesetzt werden HTML5 und JavaScript.

Teil 2: Express mit Node.js und Azure

Hier nun also Teil 2 der Praxis-Tutorialserie über Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web App. In diesem Teil erkläre ich wie man ein neues Express-basiertes Node-Projekt aufsetzt und es auf Azure laufen lässt.

Was ist Express?

Express ist ein minimalistisches, flexibles Open Source Web-Framework, welches die Entwicklung von Webseiten, Web Apps und APIs erheblich vereinfacht.

Wofür ist Express gut?

Express erleichtert es dank Route Support HTTP Requests zu beantworten, Responses können dadurch an bestimmte URLs geschrieben werden. Express unterstützt zudem mehrere Template Engines, um die Erstellung von HTTP Responses zu vereinfachen.

Alles bereit und Node.js installiert? Wer Hilfe braucht, schaut einfach noch mal in Teil 1: Einführung in Node.js.

Und los geht´s

Ein neues Node.js Projekt zu starten ist keine große Sache.

1. Visual Studio starten. Im Datei-Menü erst Neu klicken und dann Projekt.

clip_image001

2. Danach auf der linken Seite: Installiert > Vorlagen > JavaScript Menüpunkt aufrufen und rechts Basic Windows Azure Express Application auswählen. Speicherort und Namen für das Projekt bestimmen und OK klicken.

clip_image003

3. In der Folge informiert eine Nachricht darüber, dass in package.json definierte Abhängigkeiten installiert werden müssen, und zwar mithilfe des NPM Paketmanagers. Dieser wird hier genauer erklärt.

clip_image004

4. Nun wird ein Projekt erzeugt, das die Datei app.js enthält. Und hier fangen wir an.

Erklärung von app.js

//
/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Zeilen 6 bis 10

Die Zeilen 6 bis 10 laden verschiedene Module, einschließlich express, http und path. Besonders interessant sind aber das Modul routes (dazu später mehr) und das user Modul im routes-Ordner.

Zeile 12

In dieser Ziele riefen wir die Funktion express() auf, die unsere App erzeugen wird. Diese App werden wir benutzen, wenn wir einen HTTP Server erstellen wollen. Gleichzeitig wird dieses Objekt alle Eigenschaften unserer Web Applikation enthalten sowie das Mapping zwischen der URL, die bei einem Request übertragen wird, und der Funktion, welche die entsprechende Response abwickelt.

Zeilen 15 bis 17

In diesen Zeilen legen wir verschiedene Einstellungsparameter fest, darunter auf welchem Port der Server läuft (Zeile 15) und in welchem Verzeichnis die HTML Datei-Templates zu finden sind (Zeile 16). In Zeile 17 bestimmen wir die Template-Engine die wir benutzen wollen, in unserem Fall ist es Jade. Jade ist eine weit verbreitete Template-Engine, die das Schreiben von HTML-Code sehr erleichtert, unter anderem weil sie auf spezielle Syntax-Erfordernisse wie spitze Klammern (<>) verzichtet. Wer die Template-Engine so verändern will, dass sie einfach nur HTML ausgibt und nichts weiter, ersetzt die Zeile 17 mit folgendem Code:
app.set(‚view engine‘, ‚html‘);

Zeilen 18 bis 23

In diesen Zeilen legen wir verschiedene Einstellungsparameter fest. Die Bedeutung der einzelnen Parameter ist aus der API Dokumentation ersichtlich. Für dieses Tutorial muss man das aber nicht im Einzelnen wissen.

Zeilen 24 und 25

Diese Zeilen sind insofern interessant, als dass wir hier eine Middleware bestimmen, die Stylus CSS Sheets und HTML bearbeitet. Middleware ist dabei eine Ebene, die automatisch in die Funktionsaufrufe zwischen dem Empfang eines Requests und der Ausgabe einer Response eingefügt wird. In unserem Fall soll Express die Stylus Middleware und die Static Middleware nutzen für alle Requests bei denen die URL einen bestimmten Pfad innerhalb des öffentlichen Ordners unseres Projekts vorgibt. Dafür führen wir keine Request-Funktion für diese URL aus, sondern nehmen server CSS und JavaScript wörtlich.

Zeile 27 bis 30

In diesen Zeilen geben wir an , wie Express mit Fehlern umgeht, falls die Umgebung nicht als „Produktion“, sondern als „Entwicklung“ eingestellt ist. Über diese Zeilen muss man sich keine Gedanken machen.

Zeilen 32 und 33

Hier planen wir schließlich einen URL-Pfad innerhalb eines HTTP Requests zu einer bestimmten Funktion, welche die Response verarbeitet. Darauf kommen wir gleich noch einmal zurück.

Zeilen 35 bis 38

MIt diesen Zeilen erstellen wir einen HTTP Server und bestimmen den Port, zusammen mit einem Callback für den Fall, dass der Server erfolgreich gestartet wurde.

Routing

Routing und wie man es am besten macht – das ist ein oft diskutiertes Thema und eine endgültige Antwort gibt es wohl nicht. Es gibt zahlreiche Module, die das Routing für Express und Node.js realisieren. Jedes hat seine Besonderheiten und speziellen Strukturen, da ist wohl für jeden etwas dabei. Wir arbeiten hier mit der Routing-Engine, die bereits in Express enthalten ist. In app.js hatten wir die Routing-Engine bereits festgelegt, die Route-Module können einfach aus dem Routing-Verzeichnis importiert werden. Die Routes haben wir in den Zeilen 32 und 33 hinzugefügt. Anders gesagt, wir haben die URL im Browser zur Funktion auf dem Server, die den Request bearbeiten soll, gemappt. Diese die Requests bearbeitenden Funktionen befinden sich im Routing-Verzeichnis. Schauen wir uns daher doch gleich mal index.js an.

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

Ziemlich unscheinbar, aber diese drei Zeilen erledigen tatsächlich eine Menge Arbeit. Zeile 1 fügt der Exportvariable die Funktion index hinzu. Die Exportvariable wird durch Node.js erstellt, und zwar immer dann wenn ein Modul geladen wird, das es ermöglicht, Funktionen und Variablen zu anderen Modulen zu übertragen, in diesem Fall das app.js Modul.
Die Funktion index nimmt zwei Parameter an, req und res. Wie in Teil 1 beschrieben, verwalten der req Parameter die erhaltenen Requests und der res Parameter eine Variable zu der man die Response schreibt. In unserem Fall führen wir in der Response-Variable die Render-Funktion aus, die zwei Parameter annimmt. Da ist zum einen der Parameter, der bestimmt, welche Ansicht (view) genutzt wird (view ist eine Datei im Views-Verzeichnis), eine Dateiendung ist nicht nötig, index wird index.jade. Der zweite Parameter ist ein Daten enthaltenes Objekt, das in das Jade-Template eingefügt werden kann.

Das Index Template

Das index.jade Template ist eine komplett andere Sprache, die jedoch nicht Teil dieses Tutorials ist. Für diese Tutorial-Serie ist HTML-Wissen notwendig und in diesem Fall wird schnell deutlich, dass Jade Templating das Mapping fast immer direkt zu HTML vollzieht.

extends layout

block content
  h1= title
  p Welcome to #{title}

Mit Ausnahme der Keywords “block” und “extends” bedeuten alle anderen Keywords das Gleiche wie in HTML. Dieses Template wird durch Jade Middleware umgewandelt, welches wir in das folgende HTML geladen haben.

<!DOCTYPE html>
<html>
<head>
    <title>Express</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
  <body>
    <h1>Express</h1>
        <p>Welcome to Express</p>
  </body>
</html>

Deutlich wird, dass der entstandene H1 tag den Wert des Titels enthält, den wir zuvor in der Render-Funktion übergeben haben. Außerdem wurde er, im Einklang mit dem Text, direkt in den p tag eingefügt. Auffällig ist aber auch, dass das entstandene HTML Elemente enthält, die nicht in Jade gemappt wurden. Und genau hier brauchen wir dann auch das Keyword “extends”. Im vorliegenden Fall haben wir die Datei layout.jade erweitert.

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

Schon bemerkt? Der Ausdruck “block content” erscheint in beiden Dateien. Jade nutzt das, um zu bestimmen, dass dieser HTML-Block genau hierher gehört (in der Datei layout.jade) und genau so aussehen soll (in der Datei index.jade).

In der Datei layout.jade fällt der Link zu einer style.css Datei auf, welche in unserem Ausgangsprojekt offenbar gar nicht existiert. Diese Datei wird durch den style.styl Code erstellt, mithilfe der Stylus Middleware, die wir in app.js eingestellt hatten.

Und schon haben wir’s! So kommen wir von app.js zu einem Routing, das die Response bestimmt und schließlich zu einer Ansicht (view), die angibt wie die Response letztlich aussieht. Man kann die Web App lokal laufen lassen, wenn man die Debug-Taste klickt (ein anderer Browser ist durch das Klicken des Dropdown-Menüs auf der rechten Seite möglich).

clip_image012

Als Erstes wird dann ein Node.js Server gestartet und der Internet Explorer geöffnet, der die root URL anzeigt.

Veröffentlichen über Azure (für alle, die Visual Studio nutzen)

Jetzt haben wir also eine funktionierende Express-basierte Node.js App am Start. Dann ist der nächste Schritt doch, sie auch in der Cloud laufen zu lassen. Dazu braucht es nur ein paar Klicks. Die App kann in jeder Cloud betrieben werden, die Node.js unterstützt. Beispiele sind Nodejitsu, Heroku und Engine Yard. Wir werden hier Microsoft Azure nutzen, weil man dort eine Node.js Website kostenlos laufen lassen kann.

Zur kostenlosen Testversion von Microsoft Azure geht es hier. Damit bekommt man alle Services von Azure bis zu einer Höhe von 150€ gratis. Mit Azure Websites, das wir hier nutzen, kann man bis zu zehn Webseiten kostenlos betreiben.

1. Sobald das Azure-Konto eingerichtet ist, gehen wir zurück zur IDE. Dort führen wir auf unserem Express Projekt einen Rechtsklick aus und wählen im Menü dann „Veröffentlichen“.

clip_image018

2. Das Menü „Veröffentlichen“ öffnet einen Assistenten mit einigen Optionen, wir wählen als Ziel Microsoft Azure Websites.

3. An dieser Stelle erfolgt der Login, und zwar mit dem gleichen Microsoft-Konto wie bei der Azure-Anmeldung.

4. Nun „Neu“ auswählen, um eine neue Azure Webseite zu erstellen. Existiert schon eine, dann einfach diese im Dropdown-Menü auswählen.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/4532.BLOG-POST-_2D00_-Part-2-_2D00_-Screenshot-12.png

5. Die Felder im Assistenten ausfüllen (siehe unten). Darauf achten, einen unverwechselbaren Namen für die Seite zu wählen und dann „Erstellen“ klicken.

http://blogs.msdn.com/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-00-60-29/7823.BLOG-POST-_2D00_-Part-2-_2D00_-Screenshot-13.png

6. Als Nächstes erscheint ein vorausgefüllter Assistent mit einem Button Veröffentlichen am Ende, diesen dann klicken.

clip_image024

GESCHAFFT! Das Projekt ist in der Azure Cloud veröffentlicht!

Jetzt lohnt es sich, mal ein paar Azure Webseiten im Azure Portal anzusehen. Sehr empfehlenswert ist auch dieses Video.

Wichtiger Tipp: Falls beim Veröffentlichen Probleme auftreten sollten, unbedingt das Projekt näher am Stammverzeichnis platzieren, um kurzzeitige Fehler beim Kopieren zu vermeiden.

clip_image026

clip_image028

Dranbleiben für Teil 3!

Teil 3 (Wie man ein Backend mit Node, Mongo and Socket.IO aufbaut) erscheint bald hier bei Dr.Web. Wer mehr Neuigkeiten dazu und zu anderen Artikeln erfahren will, kann mir einfach auf Twitter folgen: @ramisayar.

Weiteres Wissenswerte zu Node auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.
Sehr hilfreich auch diese Kurzvideos über ähnliche Node-Themen:

Dieser Artikel ist Teil der Web Dev Tech Series von Microsoft. Wir freuen uns, das Projekt Spartan 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: modern.IE.

Weitere Teile dieser Serie bei MSDN

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

(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.