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/16 11:17] – 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 190: 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 223: 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 258: Zeile 262:
 app.post('/api/posts', (req, res) => { app.post('/api/posts', (req, res) => {
 //Daten aus dem Anfrage-Objekt (Request) holen und in Variablen speichern //Daten aus dem Anfrage-Objekt (Request) holen und in Variablen speichern
-const userId = req.body.user_id;+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) - ohne titel oder user_id (wer post erstellt hat) können wir keinen neuen Post erstellen. // 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 275: 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
Zeile 311: Zeile 315:
 === 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 336: 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.1765880232.txt.gz
  • Zuletzt geändert: 2025/12/16 11:17
  • von gkoch