modul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
modul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren [2025/12/08 08:28] – angelegt gkochmodul:m290_guko:learningunits:lu15:theorie:c_server_konfigurieren [2025/12/08 08:50] (aktuell) – gkoch
Zeile 22: Zeile 22:
 // Route für GET-Anfragen auf "/" // Route für GET-Anfragen auf "/"
 app.get('/', (req, res) => { app.get('/', (req, res) => {
-    res.send('test');+    res.send('Hello World');
 }); });
  
-// Server starten und auf Port 3000 lauschen+// Server starten und auf Port 3000 auf Anfragen warten
 app.listen(port, () => { app.listen(port, () => {
     console.log(`Example app listening on port ${port}`);     console.log(`Example app listening on port ${port}`);
Zeile 34: Zeile 34:
 **Was passiert in diesem Code?** **Was passiert in diesem Code?**
  
-  * ''import express from 'express';''   +  * ''import express from 'express';'' -> Lädt das Express-Framework aus ''node_modules''. 
-    Lädt das Express-Framework aus ''node_modules''. +  * ''const app = express();'' -> Erstellt eine neue Express-Anwendung – das ist Ihr Serverobjekt. 
-  * ''const app = express();''   +  * ''const port = 3000;'' -> Definiert den Port, auf dem der Server lauscht.   
-    Erstellt eine neue Express-Anwendung – das ist Ihr Serverobjekt. +  * ''app.get('/', (req, res) => { ... });'' -> Definiert eine **Route**:
-  * ''const port = 3000;''   +
-    Definiert den Port, auf dem der Server lauscht.   +
-    ''http://localhost:3000/'' bedeutet: eigener Computer (localhost), Port 3000, Pfad ''/''. +
-  * ''app.get('/', (req, res) => { ... });''   +
-    Definiert eine **Route**:+
       * Wenn eine **GET-Anfrage** an ''/'' kommt,       * Wenn eine **GET-Anfrage** an ''/'' kommt,
       * führt Express die Callback-Funktion aus.       * führt Express die Callback-Funktion aus.
       * ''req'' = Request-Objekt (Infos über Anfrage),         * ''req'' = Request-Objekt (Infos über Anfrage),  
         ''res'' = Response-Objekt (Antwort, die Sie zurückschicken).         ''res'' = Response-Objekt (Antwort, die Sie zurückschicken).
-      * ''res.send('test');'' → sendet den Text ''test'' als Antwort. +      * ''res.send('test');'' → sendet den Text ''Hello World'' als Antwort zurück an den Browser oder Postman. 
-  * ''app.listen(port, () => { ... });''   +  * ''app.listen(port, () => { ... });'' -> Startet den Server und gibt im Terminal eine kurze Meldung aus.
-    Startet den Server und gibt im Terminal eine kurze Meldung aus.+
  
 +{{:modul:m290_guko:learningunits:lu15:theorie:client_server_nodejs_http_req_response.png?direct&900|}}
 +//Das Schema zeigt, wie ein Zusammenspiel aus Anfrage (Request) und Antwort (Response) zwischen Client und Server funktioniert.//
  
 ===== Server starten und im Browser testen ===== ===== Server starten und im Browser testen =====
  
-  1. Öffnen Sie in WebStorm das **Terminal** (Projektordner). +  - Öffnen Sie in WebStorm das **Terminal** (Projektordner). 
-  2. Starten Sie den Server mit:+  - Starten Sie den Server mit:
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 63: Zeile 59:
 </WRAP> </WRAP>
  
-  3. Im Terminal sollte erscheinen: +  - Im Terminal sollte erscheinen: ''Example app listening on port 3000'' 
-     *''Example app listening on port 3000''* +  - Öffnen Sie Ihren Browser und geben Sie ein: ''http://localhost:3000/'' 
- +  - Sie sollten nur das Wort **''Hello World''** im Browser sehen. 
-  4. Öffnen Sie Ihren Browser und geben Sie ein: +  - Server stoppen: Im Terminal ''Strg + C'' (Windows/Linux) oder ''ctrl + C'' (macOS) drücken.
-     ''http://localhost:3000/'' +
- +
-  5. Sie sollten nur das Wort **''test''** im Browser sehen. +
- +
-  6. Server stoppen: +
-     * Im Terminal ''Strg + C'' (Windows/Linux) oder ''ctrl + C'' (macOS) drücken. +
  
 ===== Wichtig: Wir haben keinen „klassischen“ Webauftritt programmiert ===== ===== Wichtig: Wir haben keinen „klassischen“ Webauftritt programmiert =====
Zeile 82: Zeile 71:
 Sie haben in dieser Learning Unit **kein HTML**, **kein CSS** und **kein JavaScript für den Browser** geschrieben.   Sie haben in dieser Learning Unit **kein HTML**, **kein CSS** und **kein JavaScript für den Browser** geschrieben.  
 Sie haben **JavaScript für den Server** geschrieben. Sie haben **JavaScript für den Server** geschrieben.
- 
   * Der Browser spielt hier nur die Rolle eines **Clients**, der eine Anfrage an Ihren Server sendet.   * Der Browser spielt hier nur die Rolle eines **Clients**, der eine Anfrage an Ihren Server sendet.
   * Der Express-Server beantwortet diese Anfrage mit einer Antwort (''Response'').   * Der Express-Server beantwortet diese Anfrage mit einer Antwort (''Response'').
-  * Der Browser zeigt einfach an, was im **Response-Body** steht (in unserem Fall der Text ''test'').+  * Der Browser zeigt einfach an, was im **Response-Body** steht (in unserem Fall der Text ''Hello World.'').
 </WRAP> </WRAP>
  
Zeile 95: Zeile 83:
  
  
-===== Komfort: npm-Scripts & nodemon =====+===== Entwickler-Komfort: npm-Scripts & nodemon =====
  
 Wenn Sie nach jeder Codeänderung den Server mit ''node index.js'' neu starten müssen, ist das mühsam.   Wenn Sie nach jeder Codeänderung den Server mit ''node index.js'' neu starten müssen, ist das mühsam.  
Zeile 106: Zeile 94:
 ==== 1. nodemon installieren ==== ==== 1. nodemon installieren ====
  
-Installieren Sie ''nodemon'' als Entwicklungsabhängigkeit:+Installieren Sie ''nodemon'' als Entwicklungs-Tool:
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 116: Zeile 104:
 Dadurch ergänzt ''npm'' Ihre ''package.json'' um einen Eintrag unter ''devDependencies'' für ''nodemon''. Dadurch ergänzt ''npm'' Ihre ''package.json'' um einen Eintrag unter ''devDependencies'' für ''nodemon''.
  
 +**Was bedeutet ''devDependencies''?**
 +
 +In ''package.json'' gibt es zwei wichtige Bereiche für Pakete:
 +
 +  * ''dependencies'' → Pakete, die Ihre Anwendung **zum Ausführen** braucht (z.B. ''express''). Ohne diese Pakete kann der Server in Produktion nicht laufen.
 +  * ''devDependencies'' → Pakete, die Sie **nur während der Entwicklung** brauchen (z.B. Test-Frameworks, Build-Tools – und ''nodemon'').
 +
 +''nodemon'' ist ein typisches **Entwicklungs-Tool**:  
 +Es hilft Ihnen beim Programmieren (automatischer Neustart bei Änderungen), wird aber auf einem späteren Produktionsserver **nicht benötigt**.  
 +Darum speichern wir es mit ''--save-dev'' in den ''devDependencies''.
 +
 +{{:modul:m290_guko:learningunits:lu15:theorie:screenshot_2025-12-08_at_08.45.36.png?direct&700|}}
  
 ==== 2. Scripts in ''package.json'' ergänzen ==== ==== 2. Scripts in ''package.json'' ergänzen ====
  
-Öffnen Sie ''package.json'' und ergänzen Sie den Abschnitt ''scripts'' wie folgt (Beispiel):+Öffnen Sie ''package.json'' und ergänzen Sie den Abschnitt ''scripts'' wie folgt (Beispiel, wie im Screenshot oben):
  
 <WRAP box round center 80%> <WRAP box round center 80%>
Zeile 130: Zeile 130:
 </WRAP> </WRAP>
  
-Sie können dann:+Damit definieren Sie zwei Startvarianten:
  
-  * mit ''npm start'' den Server einmalig starten, +  * **''npm start''**   
-  * mit ''npm run dev'' den Server im Entwicklermodus mit automatischem Neustart starten.+    - Startet den Server mit ''node index.js''.   
 +    - Der Prozess läuft „ganz normal“ ohne automatischen Neustart.   
 +    - Das entspricht eher einem **Produktivbetrieb**: Der Server läuft stabil, Änderungen am Code erfordern ein manuelles Neustarten.
  
-Wenn Sie nun in ''index.js'' etwas ändern und speichern, startet ''nodemon'' den Server automatisch neu.+  * **''npm run dev''**   
 +    - Startet den Server mit ''nodemon index.js''.   
 +    - ''nodemon'' beobachtet Ihre Dateien und startet den Server **automatisch neu**, wenn Sie etwas ändern und speichern.   
 +    - Das ist ideal für die **Entwicklung im Unterricht**, weil Sie sofort die Wirkung Ihrer Änderungen sehen. 
 + 
 +Wenn Sie nun in ''index.js'' (oder Ihrer Server-Datei) etwas ändern und speichern, startet ''nodemon'' den Server bei **''npm run dev''** automatisch neu.   
 +Sie müssen ''node index.js'' nicht jedes Mal von Hand ausführen.
  
  
 ===== node_modules & IDE-Hinweise ===== ===== node_modules & IDE-Hinweise =====
  
-  * Der Ordner ''node_modules/'' kann sehr gross werden.   +  * Der Ordner ''node_modules/'' kann sehr gross werden. Er wird von ''npm'' automatisch verwaltet und muss **nicht** manuell bearbeitet werden.
-    Er wird von ''npm'' automatisch verwaltet und muss **nicht** manuell bearbeitet werden.+
   * Für Abgaben (z.B. in Moodle) reicht meist:   * Für Abgaben (z.B. in Moodle) reicht meist:
     * Quellcode-Dateien (z.B. ''index.js'')     * Quellcode-Dateien (z.B. ''index.js'')
     * ''package.json'' (und optional ''package-lock.json'')     * ''package.json'' (und optional ''package-lock.json'')
-  * In WebStorm können Sie bei Bedarf die **Inlay-Hints** (kleine Typ-Hinweise) deaktivieren, wenn diese Sie stören   +  * In WebStorm können Sie bei Bedarf die **Inlay-Hints** (kleine Typ-Hinweise) deaktivieren, wenn diese Sie stören (''Settings → Editor → Inlay Hints'').
-    (''Settings → Editor → Inlay Hints'').+
  
 In den nächsten Learning Units werden Sie: In den nächsten Learning Units werden Sie:
Zeile 152: Zeile 158:
   * weitere Routen in Ihrem Express-Server anlegen,   * weitere Routen in Ihrem Express-Server anlegen,
   * Daten nicht nur zurückgeben, sondern auch **annehmen** (''POST'', ''PUT'', ''DELETE''),   * Daten nicht nur zurückgeben, sondern auch **annehmen** (''POST'', ''PUT'', ''DELETE''),
-  * Ihre **persönlichen Use Cases** (z.B. Reisedatenbank, Lieblingsfilme, Geburtstage) mit einer echten MySQL-Datenbank verbinden   +  * Ihre **persönlichen Use Cases** (z.B. Reisedatenbank, Lieblingsfilme, Geburtstage) mit einer echten MySQL-Datenbank verbinden und alle CRUD-Operationen **über den Backend-Server** ausführen.
-    und alle CRUD-Operationen **über den Backend-Server** ausführen. +
- +
----- +
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] M290 / BZZ (adapted)+
  
  • modul/m290_guko/learningunits/lu15/theorie/c_server_konfigurieren.1765178931.txt.gz
  • Zuletzt geändert: 2025/12/08 08:28
  • von gkoch