dhbw: file-namen auf dash-convention vereinheitlicht (consistent mit hdm), Makefile dhbw_KAPITEL aktualisiert

slides/dhbw/05-express.md

@@ -0,0 +1,305 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2026"
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.4rem;
+}
+h1 {
+  color: #a02060;
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;
+}
+section.invert h2 {
+  color: #f48fb1;
+}
+pre {
+  background: #0f0f23;
+  color: #f48fb1;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #f48fb1;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
+
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
+- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
+- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
+- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+
+---
+
+# Inhalt
+
+1. Node.js — Fun Facts & alternative Runtimes
+2. `process` — Signal-Handling, Graceful Shutdown
+3. Express — Setup, Routing
+4. Middlewares (eigene + built-in)
+5. CRUD-Endpunkte (Create, Read, Update, Delete)
+6. Error Handling
+7. WebSockets
+
+---
+
+<!-- _class: invert -->
+<!-- _backgroundColor: #000 -->
+
+# Node.js – Advanced
+
+---
+
+# node.js – Fun Facts
+
+- Entwickelt von Ryan Dahl in 2009
+- Erste serverseitige Laufzeitumgebung in JavaScript (C++)
+- Inspiriert von Nginx (Non-blocking I/O)
+
+**Alternativen heute:**
+- **Deno** (2020): Rust, Tokio
+- **Bun** (2022): Zig
+
+---
+
+# process – Prozess-Steuerung
+
+```javascript
+process.on("SIGINT", () => {
+  console.log("Received SIGINT. Closing server...");
+  server.close(() => {
+    console.log("Server closed.");
+    process.exit(0);
+  });
+});
+
+// Signale
+process.exit(0);  // Erfolgreich
+process.exit(1);  // Fehler
+```
+
+---
+
+# node.js Module System
+
+```javascript
+// ES Modules (modern, "type": "module")
+import express from "express";
+import { port } from "./src/config/constants.js";
+import { readFileSync } from "node:fs";
+```
+
+```javascript
+// CommonJS (legacy)
+const express = require("express");
+const fs = require("fs");
+```
+
+→ Neue Projekte: ESM. Built-ins immer mit `node:`-Präfix.
+
+---
+
+# HTTP Request mit node-fetch
+
+```javascript
+// Node.js 18+ hat fetch eingebaut
+const res = await fetch('https://api.example.com/data');
+const data = await res.json();
+
+// Ältere Versionen: node-fetch
+import fetch from 'node-fetch';
+```
+
+---
+
+# Web Server, Builder, Bundler
+
+```bash
+# Boilerplates erstellen
+npm create vite@latest my-app -- --template react
+npm create svelte@latest
+npm create astro@latest
+
+# nuxt
+npm install nuxt
+npm run dev
+```
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/js-frameworks-overview.png)
+
+
+---
+
+# Express – Grundlagen
+
+```javascript
+import express from 'express';
+const app = express();
+
+app.listen(port, () => {
+  console.log(`Server läuft auf Port ${port}`);
+});
+```
+
+---
+
+# Express – Middleware
+
+```javascript
+app.use(express.json());
+
+app.use('/api', (req, res, next) => {
+  console.log('Time:', Date.now());
+  next();
+});
+
+app.use((req, res, next) => {
+  console.log('Middleware 2');
+  next();
+});
+```
+
+---
+
+# Express – CRUD Routes
+
+```javascript
+app.get('/api/:key', async (req, res) => {
+  const context = cache.get(req.params.key);
+  res.json({ context });
+});
+
+app.post('/api/:key', async (req, res) => {
+  const payload = req.body;
+  res.json({ created: cache.set(req.params.key, payload) });
+});
+
+app.put('/api/:key', async (req, res) => {
+  const payload = req.body;
+  res.json({ updated: cache.update(req.params.key, payload) });
+});
+
+app.delete('/api/:key', async (req, res) => {
+  cache.remove(req.params.key);
+  res.json({ deleted: req.params.key });
+});
+```
+
+---
+
+# Express – server.listen
+
+```javascript
+const server = app.listen(port, () => {
+  console.log(`Server läuft auf Port ${port}`);
+});
+
+server.on('error', (err) => {
+  console.error('Server error:', err);
+});
+
+server.close(() => {
+  console.log('Server geschlossen');
+});
+```
+
+---
+
+# WebSockets
+
+```javascript
+import { WebSocketServer } from 'ws';
+
+const wss = new WebSocketServer({ port: 8080 });
+
+wss.on('connection', (ws) => {
+  console.log('Client verbunden');
+
+  ws.on('message', (data) => {
+    console.log('Empfangen:', data.toString());
+    ws.send('Pong');
+  });
+});
+```
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/ts-js-compilation.png)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/docker-orchestration.png)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/test-automation-trophy.png)
+
+