de:modul:m307:learningunits:lu03:aufgaben:02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m307:learningunits:lu03:aufgaben:02 [2026/05/03 12:53] – vdemirde:modul:m307:learningunits:lu03:aufgaben:02 [2026/05/04 09:07] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU03.A01 ======+====== 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 mittels GET ein Liste von Namen mittels ausgibt. 
   - Programmierung eines Node.js Webservers, der in eine Liste einen Namen mittels POST hinzufügt.    - Programmierung eines Node.js Webservers, der in eine Liste einen Namen mittels POST hinzufügt. 
Zeile 5: Zeile 5:
 ===== Rahmenbedingungen ===== ===== Rahmenbedingungen =====
   * Sozialform: individual   * Sozialform: individual
-  * Hilfsmittel: Youtube-Lernvideo+  * Hilfsmittel: Node-Webserver als JavaScript-Code
   * Zeit: 20 Minuten   * Zeit: 20 Minuten
   * Erwartetes Resultat: Node-Server, der abgefragte Daten am Monitor/Browser ausgibt und Daten im Array ergänzen kann.   * Erwartetes Resultat: Node-Server, der abgefragte Daten am Monitor/Browser ausgibt und Daten im Array ergänzen kann.
  
 ===== Ausgangslage ===== ===== Ausgangslage =====
-Wir haben die Grundfunktionen eine Webservers in der letzten Aufgabe kennen gelernt. Nun wollen wir speziefischer werden und die Methoden POST und GET geziehlt anwenden. +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.  **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 ===== ===== Aufgabe =====
   - Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code (Filename lu03_a02.js)   - Kopieren Sie die nachfolgende JS-Vorlage in Ihre Visual Studio Code (Filename lu03_a02.js)
   - Starten Sie den Server   - 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> <code javascript>
 +
 const express = require('express'); const express = require('express');
 const app = express(); const app = express();
Zeile 26: Zeile 59:
 app.use(express.json()); app.use(express.json());
  
 +// Unser Datenspeicher im Arbeitsspeicher
 let benutzerListe = ["Maximilian", "Sophie"]; let benutzerListe = ["Maximilian", "Sophie"];
  
 // 1. Aufgabe: Die GET-Route vervollständigen // 1. Aufgabe: Die GET-Route vervollständigen
 app.get('/users', (req, res) => { app.get('/users', (req, res) => {
-    // Senden Sie hier die benutzerListe als Antwort zurück+    // Hier senden wir das gesamte Array als JSON-Antwort an den Client zurück
     res.json(benutzerListe);     res.json(benutzerListe);
 }); });
Zeile 36: Zeile 70:
 // 2. Aufgabe: Die POST-Route vervollständigen // 2. Aufgabe: Die POST-Route vervollständigen
 app.post('/users', (req, res) => { app.post('/users', (req, res) => {
 +    // Wir extrahieren den Namen aus dem Request-Body
     const neuerName = req.body.name;     const neuerName = req.body.name;
          
     if (neuerName) {     if (neuerName) {
-        // Fügen Sie den Namen dem Array hinzu (Tipp: .push())+        // Der Name wird mit .push() am Ende des Arrays hinzugefügt
         benutzerListe.push(neuerName);         benutzerListe.push(neuerName);
 +        
 +        // Wir senden eine Erfolgsmeldung mit dem Statuscode 201 (Created)
         res.status(201).send(`Benutzer ${neuerName} wurde erfolgreich gespeichert.`);         res.status(201).send(`Benutzer ${neuerName} wurde erfolgreich gespeichert.`);
     } else {     } else {
 +        // Falls kein Name mitgeschickt wurde, senden wir den Statuscode 400 (Bad Request)
         res.status(400).send("Fehler: Es wurde kein Name übertragen.");         res.status(400).send("Fehler: Es wurde kein Name übertragen.");
     }     }
Zeile 50: Zeile 88:
     console.log(`Ihr Server ist nun unter http://localhost:${PORT} erreichbar.`);     console.log(`Ihr Server ist nun unter http://localhost:${PORT} erreichbar.`);
 }); });
 +
 </code> </code>
    
 ---- ----
 +
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  • de/modul/m307/learningunits/lu03/aufgaben/02.1777805620.txt.gz
  • Zuletzt geändert: 2026/05/03 12:53
  • von vdemir