====== LU03.A03 - Array darstellen mit Node-Server ======
- Programmierung eines Node.js Webservers, der mittels GET ein Liste von Namen mittels ausgibt.
- Programmierung eines Node.js Webservers, der in eine Liste einen Namen mittels POST hinzufügt.
===== Rahmenbedingungen =====
* Sozialform: individual
* Hilfsmittel: Node-Webserver als JavaScript-Code
* Zeit: 20 Minuten
* Erwartetes Resultat: Node-Server, der abgefragte Daten am Monitor/Browser ausgibt und Daten im Array ergänzen kann.
===== Ausgangslage =====
Wir haben die Grundfunktionen eine Webservers in der letzten Aufgabe kennen gelernt. Nun wollen wir speziefischer werden und die Methoden POST und GET gezielt anwenden.
**Hinweis:** Um diesen zu Programmieren, nutzen wir hierfür das JavaScript-Framework Express, welches in der Branche Standard ist.
===== Vorarbeit =====
- Installieren Sie im Visual Studio Code das Framework "express" in ihr Visual Studio Code durch die nachfolgenden zwei Codezeilen.
- npm init -y: package.json-Datei wird erstellt, dass alle Abhängigkeiten des Projektes verwaltet.
- npm install express: Installation des express-Frameworks mit wichtigen Funktionen/Tools des Servers
==== Projekt-Abhängigkeiten verwalten ====
npm init -y
**Ergebnis**
Das Ergebnis im Terminalfenster von Visual Studio Code sollte wie folgt aussehen.
{{:de:modul:m307:learningunits:lu03:aufgaben:npm-init-y.png?600|}}
==== Framework express installieren ====
npm install express
**Ergebnis**
Das Ergebnis im Terminalfenster von Visual Studio Code sollte wie folgt aussehen.
{{:de:modul:m307:learningunits:lu03:aufgaben:installiertexpress.png?600|}}
===== Aufgabe =====
Das nachfolgende Script enthält einen JSON-Satz, der am Monitor anzeigt. Damit Sie das Script zum laufen bekommen befolgen Sie die nachfolgenden Anweiseungen.
- Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code.
- Starten Sie den Server
- Lassen Sie sich die Daten im Browserfenster anzeigen.
- Ergänzen Sie den angezeigten Person-Datensatz durch weitere mindestens 3 Personen.
- Lassen Sie sich durch eine AI eine passende HTML-Darstellung für die Daten generieren.
**server.js**
const express = require('express');
const app = express();
const path = require('path');
// Die Daten der drei Personen
const personen = [
{ id: 1, name: "Max Mustermann", alter: 28, beruf: "Entwickler" }
];
// Server erstellen
const server = http.createServer((req, res) => {
// Wichtig: Wir setzen den Content-Type auf 'application/json'
res.writeHead(200, { 'Content-Type': 'application/json' });
// Die Personen-Objekte in einen JSON-String umwandeln und senden
res.end(JSON.stringify(personen));
});
// Server auf Port 3000 starten
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server läuft unter http://localhost:${PORT}`);
});
Personen Übersicht
Personenliste
----
===== Lösungen =====
[[de:modul:m307:learningunits:lu03:Lösungen:03|LU03.L03]]
----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir