Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

@@ Zeile 1: / Zeile 1: @@
+====== LU03.A02/L02 - Datenmanagement 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 ====
+<code>
+npm init -y
+</code>
+**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 ====
+<code>
+npm install express
+</code>
+**Ergebnis**
+Das Ergebnis im Terminalfenster von Visual Studio Code sollte wie folgt aussehen.
+{{:de:modul:m307:learningunits:lu03:aufgaben:installiertexpress.png?600|}}
+===== Aufgabe =====
+  - Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code (Filename lu03_a02.js)
+  - Starten Sie den Server
+  - Fragen Sie die Liste der Namen ab durch z.B. die URL: http://localhost:3000/users
+  - Fügen Sie in die Liste Namen hinzu durch z.B. die URL: http://localhost:3000/add/Lukas
+  - Prüfen Sie durch erneute Abfrage der List, ob Sie erfolgreich einen Namen anhängen konnten.
+<code javascript>
+const express = require('express');
+const app = express();
+const PORT = 3000;
+// Middleware, um JSON-Daten verarbeiten zu können
+app.use(express.json());
+// Unser Datenspeicher im Arbeitsspeicher
+let benutzerListe = ["Maximilian", "Sophie"];
+// 1. Aufgabe: Die GET-Route vervollständigen
+app.get('/users', (req, res) => {
+    // Hier senden wir das gesamte Array als JSON-Antwort an den Client zurück
+    res.json(benutzerListe);
+});
+// 2. Aufgabe: Die POST-Route vervollständigen
+app.post('/users', (req, res) => {
+    // Wir extrahieren den Namen aus dem Request-Body
+    const neuerName = req.body.name;
+    if (neuerName) {
+        // Der Name wird mit .push() am Ende des Arrays hinzugefügt
+        benutzerListe.push(neuerName);
+        // Wir senden eine Erfolgsmeldung mit dem Statuscode 201 (Created)
+        res.status(201).send(`Benutzer ${neuerName} wurde erfolgreich gespeichert.`);
+    } else {
+        // Falls kein Name mitgeschickt wurde, senden wir den Statuscode 400 (Bad Request)
+        res.status(400).send("Fehler: Es wurde kein Name übertragen.");
+    }
+});
+app.listen(PORT, () => {
+    console.log(`Ihr Server ist nun unter http://localhost:${PORT} erreichbar.`);
+});
+</code>
+----
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir