modul:m290_guko:learningunits:lu16:theorie:a_intro

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
modul:m290_guko:learningunits:lu16:theorie:a_intro [2025/12/14 22:56] – gkochmodul:m290_guko:learningunits:lu16:theorie:a_intro [2026/01/02 22:59] (aktuell) – gkoch
Zeile 3: Zeile 3:
 ===== Lernziele ===== ===== Lernziele =====
  
-  * Sie können erklären, wie eine **HTTP-Anfrage** und eine **HTTP-Antwort** funktionieren. ((HTTP = „Hypertext Transfer Protocol“: ein Regelwerk, wie Clients und Server Daten austauschen.))+  * Sie können erklären, wie eine **HTTP-Anfrage** und eine **HTTP-Antwort** funktionieren.((HTTP = „Hypertext Transfer Protocol“: ein Regelwerk, wie Clients und Server Daten austauschen.))
   * Sie können die vier wichtigsten HTTP-Methoden **GET, POST, PUT, DELETE** den CRUD-Operationen zuordnen.   * Sie können die vier wichtigsten HTTP-Methoden **GET, POST, PUT, DELETE** den CRUD-Operationen zuordnen.
   * Sie verstehen, was eine **API** und was eine **Route** in Express ist.   * Sie verstehen, was eine **API** und was eine **Route** in Express ist.
Zeile 23: Zeile 23:
  
 Jetzt übertragen wir diese Idee auf das **Web**: Jetzt übertragen wir diese Idee auf das **Web**:
-Statt direkt SQL zu tippen, schicken wir **HTTP-Anfragen** an einen **Backend-Server** ((Backend-Server = Programm, das Anfragen entgegennimmt und Antworten zurückschickt; oft mit Datenbank-Logik dahinter.)) – bei uns: **Express (Node.js)**.+Statt direkt SQL zu tippen, schicken wir **HTTP-Anfragen** an einen **Backend-Server**((Backend-Server = Programm, das Anfragen entgegennimmt und Antworten zurückschickt; oft mit Datenbank-Logik dahinter.)) – bei uns: **Express (Node.js)**.
 Der Server führt für uns die passenden CRUD-Operationen aus und sendet eine Antwort zurück. Der Server führt für uns die passenden CRUD-Operationen aus und sendet eine Antwort zurück.
  
-Wir bauen zuerst eine **API für Social-Media-Posts**, noch ohne Datenbank – nur mit Daten in einem Javascript-Objekt.+Wir bauen zuerst eine **API für Social-Media-Posts**, noch ohne Datenbank – nur mit Daten in einem Javascript-Array.
 So können wir **HTTP, Routen und Postman** kennenlernen, bevor wir in in der nächsten Unterrichtseinheit MySQL an Express anbinden. So können wir **HTTP, Routen und Postman** kennenlernen, bevor wir in in der nächsten Unterrichtseinheit MySQL an Express anbinden.
 +
 +<WRAP center round tip 70%>
 +Schauen Sie sich das Video zum Unterricht an – Einführung in APIs und Umsetzung von CRUD mit express: [[https://bzzch-my.sharepoint.com/:v:/g/personal/guido_koch_bzz_ch/IQB1YVY2gQOpRLq-MepYlD29AYjnx6mzg2ci28avf1XljGA?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=6g0Jem|Einführungs-Video API/CRUD]]
 +</WRAP>
  
 ===== HTTP-Methoden – wie Bestellungen in einem Restaurant ===== ===== HTTP-Methoden – wie Bestellungen in einem Restaurant =====
Zeile 33: Zeile 37:
 Stellen Sie sich das so vor: Stellen Sie sich das so vor:
  
-  * **Client** (Browser oder Postman) = Gast im Restaurant ((Client = Programm, das eine Anfrage sendet.)) +  * **Client** (Browser oder Postman) = Gast im Restaurant((Client = Programm, das eine Anfrage sendet.)) 
-  * **Server** (Express/Node.js) = Küche ((Server = Programm, das Anfragen empfängt und Antworten liefert.))+  * **Server** (Express/Node.js) = Küche((Server = Programm, das Anfragen empfängt und Antworten liefert.))
   * **HTTP-Anfrage** = Bestellung, die der Kellner/die Kellnerin zur Küche bringt   * **HTTP-Anfrage** = Bestellung, die der Kellner/die Kellnerin zur Küche bringt
   * **HTTP-Antwort** = fertiges Gericht, das der Kellner zurückbringt   * **HTTP-Antwort** = fertiges Gericht, das der Kellner zurückbringt
Zeile 41: Zeile 45:
  
   * eine **Methode** (z.B. ''GET'', ''POST'', ''PUT'', ''DELETE''),   * eine **Methode** (z.B. ''GET'', ''POST'', ''PUT'', ''DELETE''),
-  * einen **Pfad**((Pfad = der Teil der URL nach Domain/Port, z.B. ''/food/1''.)) (z.B. ''/api/posts'', ''/api/food/1''), +  * einen **Pfad**((Pfad = der Teil der URL nach Domain/Port, z.B. ''/api/posts'', ''/api/food/1'')), 
-  * optional einen **Body**((Body = „Datenkörper“ der Anfrage, z.B. ein JSON-Objekt.)) (z.B. JSON bei ''POST''/''PUT'')+  * optional einen **Body**((Body = „Datenkörper“ der Anfrage, z.B. ein JSON-Objekt bei ''POST''/''PUT''))
  
 Der Server reagiert auf eine Anfrage, indem er: Der Server reagiert auf eine Anfrage, indem er:
Zeile 109: Zeile 113:
  
 <WRAP center round info 60%> <WRAP center round info 60%>
-Postman können Sie hier downloaden → [[[https://www.postman.com/downloads/|Postman](https://www.postman.com/downloads/|Postman) App]] </WRAP>+Postman können Sie hier downloaden → [[https://www.postman.com/downloads/|Postman downloaden]] 
 +</WRAP>
  
 {{:modul:m290_guko:learningunits:lu16:theorie:postman-http-methods.png?direct&600| Screenshot Postman-Benutzeroberfläche mit den HTTP-Requests GET/POST/PUT/DELETE.}} {{:modul:m290_guko:learningunits:lu16:theorie:postman-http-methods.png?direct&600| Screenshot Postman-Benutzeroberfläche mit den HTTP-Requests GET/POST/PUT/DELETE.}}
Zeile 118: Zeile 123:
 ===== Beispiel-API: Social-Media-Posts ===== ===== Beispiel-API: Social-Media-Posts =====
  
-Wir verwenden das vereinfachte ''post''-Modell aus Ihrem Social-Media-ERD:+Wir verwenden als Beispiel eine vereinfachte ''post''-Tabelle aus einer Social-Media-Datenbank:
  
   * ''post_id'' (PK, Nummer)((PK = Primary Key / Primärschlüssel: eindeutige ID.))   * ''post_id'' (PK, Nummer)((PK = Primary Key / Primärschlüssel: eindeutige ID.))
Zeile 189: Zeile 194:
 </WRAP> </WRAP>
  
-Wenn Sie diesen Server mit ''npm run dev'' starten, sollten Sie im Browser unter ''[http://localhost:3000/](http://localhost:3000/)'' den Text **„API ist online“** sehen.+Wenn Sie diesen Server mit ''npm run dev'' starten (falls Nodemon -> s. LU15 installiert, sonst ''node index.js''), sollten Sie im Browser unter [[http://localhost:3000/]] den Text **„API ist online“** sehen.
  
  
Zeile 222: Zeile 227:
 // READ – einzelner Post nach ID // READ – einzelner Post nach ID
 app.get('/api/posts/:id', (req, res) => { app.get('/api/posts/:id', (req, res) => {
-  const id = Number(req.params.id);     // Pfad-Parameter (Route-Parameter) holen+  const id = Number(req.params.id);     // Pfad-Parameter (Route-Parameter) holen. :id kommt immer als String -> Number(...) macht eine Zahl daraus
   const post = posts.find(p => p.post_id === id);   const post = posts.find(p => p.post_id === id);
  
Zeile 256: Zeile 261:
 <code javascript> <code javascript>
 app.post('/api/posts', (req, res) => { app.post('/api/posts', (req, res) => {
-const userId = req.body.user_id;+//Daten aus dem Anfrage-Objekt (Request) holen und in Variablen speichern 
 +const user_id = req.body.user_id;
 const title = req.body.title; const title = req.body.title;
-const imageUrl = req.body.image_url;+const image_url = req.body.image_url;
 const description = req.body.description; const description = req.body.description;
  
-// ganz einfache Validierung (Pflichtfelder) +// ganz einfache Validierung (Pflichtfelder) - ohne titel oder user_id (wer post erstellt hat) können wir keinen neuen Post erstellen. 
-if (!title || !userId) {+if (!title || !user_id) {
     return res.status(400).send('Please enter a title and a user_id');     return res.status(400).send('Please enter a title and a user_id');
 } }
Zeile 273: Zeile 279:
 const newPost = { const newPost = {
     post_id: newPostId,     post_id: newPostId,
-    user_id: userId,+    user_id: user_id,
     title: title,     title: title,
-    image_url: imageUrl || '',+    image_url: image_url || '',
     description: description || '',     description: description || '',
     likes: 0     likes: 0
 }; };
  
 +//neuer Post wird in Post-Array (Liste mit Posts) gespeichert
 posts.push(newPost); posts.push(newPost);
  
 +//Rückmeldung an Client: neuer Post und Status-Code 201 (Created)
 res.status(201).json(newPost); res.status(201).json(newPost);
  
Zeile 289: Zeile 297:
 </WRAP> </WRAP>
  
-==== Erklärung (kurz & wichtig) ====+==== Erklärung ====
  
 Pflichtfelder: ''title'' und ''user_id'' müssen vorhanden sein → sonst ''400 Bad Request''. Pflichtfelder: ''title'' und ''user_id'' müssen vorhanden sein → sonst ''400 Bad Request''.
Zeile 297: Zeile 305:
 Antwort: ''201 Created'' + das neu erstellte Post-Objekt als JSON. Antwort: ''201 Created'' + das neu erstellte Post-Objekt als JSON.
  
-<WRAP center round tip 80%> +<WRAP center round info 80%> 
-Achtung: Dieser Ansatz mit ''posts[posts.length - 1]'' funktioniert nur, wenn: +Dieser Ansatz mit ''posts[posts.length - 1]'' funktioniert nur, wenn: 
- +  * das Array mindestens 1 Element hat, und 
-das Array mindestens 1 Element hat, und +  * die Posts im Array nach ''post_id'' sortiert sind (letzter Post hat die höchste ID).
- +
-die Posts im Array nach ''post_id'' sortiert sind (letzter Post hat die höchste ID).+
  
 In echten Projekten übernimmt das später die Datenbank (AUTO_INCREMENT). In echten Projekten übernimmt das später die Datenbank (AUTO_INCREMENT).
-Optional kann man hier noch abfangen, falls das Array leer ist. ((Edge Case = „Sonderfall“, der selten vorkommt, aber Fehler verursachen kann.)) 
 </WRAP> </WRAP>
  
 === Test mit Postman === === Test mit Postman ===
  
-{{:modul:m290_guko:learningunits:lu16:theorie:post-request_new_post.png?direct&900| Screenshot: einen neuen Post hinzufügen.}}+{{:modul:m290_guko:learningunits:lu16:theorie:screenshot_2025-12-18_at_11.26.12.png?direct&900| Screenshot: einen neuen Post hinzufügen.}}
  
   - Methode: ''POST''   - Methode: ''POST''
Zeile 327: Zeile 332:
 </WRAP> </WRAP>
   - ''Send'' klicken   - ''Send'' klicken
-  * Erwartung: +    * Erwartung: 
-    * Status ''201 Created'' +      * Status ''201 Created'' 
-    * JSON-Objekt mit neuer ''post_id'' (z.B. 3)+      * JSON-Objekt mit neuer ''post_id'' (z.B. 3)
   - Anschliessend ''GET /api/posts'' erneut ausführen → der neue Post sollte in der Liste sein.   - Anschliessend ''GET /api/posts'' erneut ausführen → der neue Post sollte in der Liste sein.
  
Zeile 335: Zeile 340:
 ===== Ausblick ===== ===== Ausblick =====
  
-In dieser Learning Unit haben Sie: +Auf der nächsten Seite sind die HTTP-Methoden PUT und DELETE am gleichen Beispiel (Social-Media-Posts) ausgeführt. Sie werden diese auch für Ihr Projekt brauchen.
- +
-  * die **HTTP-Methoden** im Kontext von CRUD kennengelernt, +
-  * mit **Postman** einfache Requests an Ihren Express-Server geschickt, +
-  * eine kleine API mit einer lokalen JavaScript-Liste (Array) von ''posts'' erstellt (''GET /api/posts'', ''GET /api/posts/:id'', ''POST /api/posts'').+
  
-In der nächsten Unterrichtseinheit:+In der nächsten Unterrichtseinheit (LU17):
   * ersetzen wir die JavaScript-Liste durch eine **MySQL-Tabelle ''posts''**,   * ersetzen wir die JavaScript-Liste durch eine **MySQL-Tabelle ''posts''**,
-  * ergänzen **Update (PUT)** und **Delete (DELETE)** für vollständiges CRUD, 
   * bauen einfache **Validierung** und **Fehlerbehandlung** (HTTP-Statuscodes) ein,   * bauen einfache **Validierung** und **Fehlerbehandlung** (HTTP-Statuscodes) ein,
   * damit Sie diese Struktur für Ihren eigenen Projekt-Use-Case übernehmen können.   * damit Sie diese Struktur für Ihren eigenen Projekt-Use-Case übernehmen können.
  
  
  • modul/m290_guko/learningunits/lu16/theorie/a_intro.1765749388.txt.gz
  • Zuletzt geändert: 2025/12/14 22:56
  • von gkoch