From 081c3b3fadbb8bdbd242ec98950c562b6de98007 Mon Sep 17 00:00:00 2001 From: Teena Steger Date: Wed, 29 Oct 2025 09:55:55 +0100 Subject: [PATCH] 05: Labor und Demos --- web/05/demos/flowers.json | 44 +++++++ web/05/demos/flowers_components.json | 71 +++++++++++ web/05/demos/hello_get.json | 36 ++++++ web/05/demos/hello_post_json.json | 43 +++++++ web/05/demos/hello_post_string.json | 35 ++++++ web/05/labor/05_aufgaben.md | 169 +++++++++++++++++++++++++++ web/05/labor/greeting.json | 48 ++++++++ web/05/labor/hinweis_escaping.md | 35 ++++++ 8 files changed, 481 insertions(+) create mode 100644 web/05/demos/flowers.json create mode 100644 web/05/demos/flowers_components.json create mode 100644 web/05/demos/hello_get.json create mode 100644 web/05/demos/hello_post_json.json create mode 100644 web/05/demos/hello_post_string.json create mode 100644 web/05/labor/05_aufgaben.md create mode 100644 web/05/labor/greeting.json create mode 100644 web/05/labor/hinweis_escaping.md diff --git a/web/05/demos/flowers.json b/web/05/demos/flowers.json new file mode 100644 index 0000000..adae178 --- /dev/null +++ b/web/05/demos/flowers.json @@ -0,0 +1,44 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Flowers API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/yellow-flowers": { + "get": { + "summary": "Fetches a list of yellow flowers", + "responses": { + "200": { + "description": "Success", + "content": { + "application/json": { + "schema": { + "type": "array", + "items": { + "type": "object", + "properties": { + "id": { + "type": "number", + "example": 4 + }, + "name": { + "type": "string", + "example": "Mädchenauge" + } + } + } + } + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/demos/flowers_components.json b/web/05/demos/flowers_components.json new file mode 100644 index 0000000..71159a0 --- /dev/null +++ b/web/05/demos/flowers_components.json @@ -0,0 +1,71 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Flowers API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/yellow-flowers": { + "get": { + "summary": "Fetches a list of yellow flowers", + "responses": { + "200": { + "description": "Success", + "content": { + "application/json": { + "schema": { + "type": "array", + "items": { + "$ref": "#/components/schemas/Flower" + } + } + } + } + } + } + } + }, + "/blue-flowers": { + "get": { + "summary": "Fetches a list of blue flowers", + "responses": { + "200": { + "description": "Success", + "content": { + "application/json": { + "schema": { + "type": "array", + "items": { + "$ref": "#/components/schemas/Flower" + } + } + } + } + } + } + } + } + }, + "components": { + "schemas": { + "Flower": { + "type": "object", + "properties": { + "id": { + "type": "number", + "example": 4 + }, + "name": { + "type": "string", + "example": "Mädchenauge" + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/demos/hello_get.json b/web/05/demos/hello_get.json new file mode 100644 index 0000000..94324a0 --- /dev/null +++ b/web/05/demos/hello_get.json @@ -0,0 +1,36 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Hello API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/hello": { + "get": { + "summary": "Begrüßt jeden mit Namen oder die Welt", + "parameters": [ + { + "name": "name", + "in": "query", + "required": true, + "description": "Name der zu begrüßenden Person", + "schema": { + "type": "string" + }, + "example": "Farhad" + } + ], + "responses": { + "200": { + "description": "Erfolgreiche Antwort" + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/demos/hello_post_json.json b/web/05/demos/hello_post_json.json new file mode 100644 index 0000000..0da0df2 --- /dev/null +++ b/web/05/demos/hello_post_json.json @@ -0,0 +1,43 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Hello API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/hello": { + "post": { + "summary": "Begrüßt jeden", + "requestBody": { + "required": true, + "content": { + "application/json": { + "schema": { + "type": "object", + "properties": { + "name": { + "type": "string", + "example": "Zoya" + } + }, + "required": [ + "name" + ] + } + } + } + }, + "responses": { + "200": { + "description": "Erfolgreiche Antwort" + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/demos/hello_post_string.json b/web/05/demos/hello_post_string.json new file mode 100644 index 0000000..b4a600f --- /dev/null +++ b/web/05/demos/hello_post_string.json @@ -0,0 +1,35 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Hello API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/hello": { + "post": { + "summary": "Begrüßt jeden", + "requestBody": { + "required": true, + "content": { + "text/plain": { + "schema": { + "type": "string", + "example": "Zoya" + } + } + } + }, + "responses": { + "200": { + "description": "Erfolgreiche Antwort" + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/labor/05_aufgaben.md b/web/05/labor/05_aufgaben.md new file mode 100644 index 0000000..0dac650 --- /dev/null +++ b/web/05/labor/05_aufgaben.md @@ -0,0 +1,169 @@ +# Übungsblatt 05 + +## 1. REST-API-Übung: GET + +**Aufgabenstellung**: +Nutzen Sie die frei zugängliche Test-API _[JSONPlaceholder](https://jsonplaceholder.typicode.com)_ für erste Rest-API-Anfragen. + +#### Vorbereitung +- Öffnen Sie ein Terminal (macOS/Linux) oder PowerShell/CMD (Windows). +- Prüfen Sie, ob `curl` installiert ist: + `curl --version` + +#### Arbeitsschritte + +1. Führen Sie einfache GET-Requests aus und beantworten Sie die Fragen: + 1. `curl https://jsonplaceholder.typicode.com/users` + - *Frage*: Welchen Usernamen benutzt Ervin Howell? + 2. `curl https://jsonplaceholder.typicode.com/posts` + - *Frage*: Wieviele Posts wurden von dem/der Nutzer:in mit der User-ID 6 gespeichert? + 3. `curl https://jsonplaceholder.typicode.com/posts/1` + - *Frage*: Wie lautet der Titel des Posts mit der ID 1? + 4. `curl https://jsonplaceholder.typicode.com/posts/1/comments` + - *Frage*: Wieviele Kommentare hat der Post mit der ID 1 erhalten? + 5. `curl https://jsonplaceholder.typicode.com/comments` + - *Frage*: Gibt es andere Posts (außer ID 1), die Kommentare erhalten haben? + 6. *Frage*: Wie finde ich alle Posts, die von dem/der Nutzer:in mit der User-ID 2 gespeichert wurden? + +## 2. REST-API-Übung: GET + + **Aufgabenstellung**: +Nutzen Sie die frei zugängliche Test-API [HP-API (Harry Potter API)](https://hp-api.onrender.com) für weitere Rest-API-Anfragen. + +#### Arbeitsschritte: +1. Finden Sie die ID von Professor Firenze heraus. Welchen `curl`-Befehl haben Sie verwendet? +2. Nutzen Sie diese ID, um ausschließlich die Informationen zu Professor Firenze zu finden. Welchen `curl`-Befehl haben Sie verwendet? +3. Welche Haarfarbe hat er? + +## 3. REST-API-Übung: POST, PUT, PATCH, DELETE + +**Aufgabenstellung**: +Nutzen Sie die limitiert zugängliche Test-API [_crudcrud_](https://crudcrud.com) für weitere Rest-API-Anfragen. + +_Hinweis: Beachten Sie den mitgelieferten Hinweis zum Escaping unter Windows._ + +#### Vorbereitung +1. Besuchen Sie die Seite: https://crudcrud.com +2. Ihnen wird ein eindeutiger API-Endpunkt zugewiesen: Notieren Sie sich diesen. (Beispiel: https://crudcrud.com/api/bd8ba488cd2641618af6d0d016678159) +3. Öffnen Sie einen Terminal und setzen eine Variable `API_ID` mit Ihrer API-Kennung. (Beispiel: `API_ID=bd8ba488cd2641618af6d0d016678159`) + +_Hinweis: Ihr persönlicher API-Endpunkt ist nur für 24 Stunden gültig und kann nur begrenzt viele Anfragen (100) entgegennehmen._ + +#### Arbeitsschritte + +1. Führen Sie einfache POST-Requests aus (Achtung: Funktioniert nur mit gesetzter Variable oder setzen Sie Ihre eigene Endpunkt-Kennung manuell ein.) + + 1. Lavendel + ```bash + curl -X POST https://crudcrud.com/api/${API_ID}/staudenpflanzen \ + --header 'Content-Type: application/json' \ + --data '{"name": "Lavendel", "botanischer_name": "Lavandula angustifolia", "standort": "Sonnig, trocken", "besonderheiten": "Duftend, bienenfreundlich, winterhart"}' + ``` + 2. Pfingstrose + ```bash + curl -X POST https://crudcrud.com/api/${API_ID}/staudenpflanzen \ + --header 'Content-Type: application/json' \ + --data '{"name": "Pfingstrose", "botanischer_name": "Paeonia lactiflora", "standort": "Halbschatten bis sonnig", "besonderheiten": "Große Blüten, langlebig, schnittgeeignet"}' + ``` + 3. Funkie + ```bash + curl -X POST https://crudcrud.com/api/${API_ID}/staudenpflanzen \ + --header 'Content-Type: application/json' \ + --data '{"name": "Funkie", "botanischer_name": "Hosta", "standort": "Halbschatten bis Schatten", "besonderheiten": "Dekoratives Laub, schneckenanfällig, pflegeleicht"}' + ``` + 4. Formulieren Sie einen eigenen POST-Request für:
+ _Name: Sonnenhut
+ Botanischer Name: Echinacea purpurea
+ Standort: Sonnig
+ Besonderheiten: Heilpflanze, zieht Schmetterlinge an, robust
_ + + 5. Formulieren Sie einen eigenen POST-Request für:
+ _Name: Tränendes Herz
+ Botanischer Name: Lamprocapnos spectabilis
+ Standort: Halbschatten
+ Besonderheiten: Herzförmige Blüten, romantisch, giftig
_ +2. Überprüfen Sie das Ergebnis Ihrer POST-Requests: + + 1. + ```bash + curl https://crudcrud.com/api/${API_ID}/staudenpflanzen + ``` + 2. Finden Sie die IDs der Funkie, des Sonnenhuts und der Pfingstrose heraus und notieren Sie sich diese. + +3. Führen Sie einfache PUT-Requests aus, indem Sie die richtige ID einsetzen ``: + 1. Sonnenhut + ```bash + curl -X PUT https://crudcrud.com/api/${API_ID}/staudenpflanzen/ \ + --header 'Content-Type: application/json' \ + --data '{"name": "Sonnenhut", "botanischer_name": "Echinacea purpurea", "standort": "Sonnig", "besonderheiten": "Heilpflanze, zieht Schmetterlinge, schneckenanfällig"}' + ``` + 2. Formulieren Sie einen eigenen PUT-Request für die Funkie und ändern Sie die Besonderheiten zu "Dekoratives Laub, schneckenanfällig, robust". + +4. Führen Sie einen einfachen DELETE-Request aus + 1. Pfingstrose + ```bash + curl -X DELETE https://crudcrud.com/api/${API_ID}/staudenpflanzen/ + ``` + +5. Geben Sie die gesamte Liste der Staudenpflanzen aus + 1. + ```bash + curl https://crudcrud.com/api/${API_ID}/staudenpflanzen | jq + ``` + Speichern sie das zurückgelieferte JSON und geben Sie es als Lösung der Übung ab. + + _Tipp: `jq` ist ein Kommandozeilen-Tool zur Formatierung von JSON-Daten. In diesem Beispiel filtert `jq` die Antwort von `curl`, sodass die JSON-Daten strukturiert und lesbar angezeigt werden._ + +## 4. JSON-Übung + +**Aufgabenstellung**: +Erstellen Sie erste JSON-Objekte. + +*Hinweis: Es ist nicht technisch vorgeschrieben, aber **Best Practice**, Schlüssel in Kleinbuchstaben zu halten (`camelCase`oder `snake_case` möglich, aber nicht mischen).* + +#### Arbeitsschritte + +1. Erstelle ein JSON-Objekt mit Informationen über eine Person: + 1. Name: Alex + 2. Alter: 30 + 3. Wohnort: Berlin + +2. Erstelle ein JSON-Objekt zu einem Produkt: + 1. Produktname: Kopfhörer + 2. Preis: 89.99 + 3. Verfügbarkeit: Ja + 4. Farben: Schwarz und Weiß (als Liste) + +3. Erstelle ein JSON-Objekt zu einem Benutzer inklusive Adresse: + 1. Benutzername: maria1999 + 2. Passwort: abc123 + 3. Rolle: Admin + 4. Adresse: Bauernring 15 (Straße), Weilbach (Stadt) und 12345 (Postleitzahl) (*als verschachteltes Objekt*) + +4. Erstelle ein Array mit zwei Aufgabenobjekten. Jede Aufgabe hat einen Titel und einen erledigt-Status (true/false) + +5. Erstelle ein JSON-Objekt für einen Blogeintrag mit folgendem Aufbau: + 1. Titel, Autor, Inhalt des Beitrags + 2. Ein Kommentar als verschachteltes Objekt mit Autor und Text + +## 5. SWAGGER-Übung + +**Aufgabenstellung**: +Erweitern Sie eine bestehende API um Parameter (`GET`) und Request-Body (`POST`). + +#### Arbeitsschritte + +1. Öffnen Sie die "Simple Greeting API" (`05_loesungen/greeting.json`) in VS Code und starten Sie die _OpenAPI Preview_ (`Shift+Alt+P`). + +2. Erweitern Sie die `GET`-Anfrage um einen Parameter `name` vom Typ `string`. + +3. Erweitern Sie die `POST`-Anfrage um einen Request-Body vom Typ `string`. + +4. Erweitern die API um einen weiteren `POST`-Endpunkt `/hello-json`, welcher ein JSON-Objekt im Request-Body erwartet. Folgendes Beispiel-JSON soll möglich sein: + +```json +{ + "name": "Florian", + "age": 23 +} +``` diff --git a/web/05/labor/greeting.json b/web/05/labor/greeting.json new file mode 100644 index 0000000..4581354 --- /dev/null +++ b/web/05/labor/greeting.json @@ -0,0 +1,48 @@ +{ + "openapi": "3.0.0", + "info": { + "title": "Simple Greeting API", + "version": "1.0.0" + }, + "servers": [ + { + "url": "http://localhost:8080" + } + ], + "paths": { + "/hello": { + "get": { + "summary": "Returns a greeting", + "responses": { + "200": { + "description": "Greeting response in plain text.", + "content": { + "text/plain": { + "schema": { + "type": "string" + }, + "example": "Hello!" + } + } + } + } + }, + "post": { + "summary": "Returns a plain text greeting", + "responses": { + "200": { + "description": "Plain text greeting response", + "content": { + "text/plain": { + "schema": { + "type": "string" + }, + "example": "Hello!" + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/web/05/labor/hinweis_escaping.md b/web/05/labor/hinweis_escaping.md new file mode 100644 index 0000000..68a4696 --- /dev/null +++ b/web/05/labor/hinweis_escaping.md @@ -0,0 +1,35 @@ +## Escaping + +Unter **Windows**, insbesondere in **PowerShell** oder der **Eingabeaufforderung (cmd.exe)**, unterscheidet sich das Escaping von `curl`-Anfragen deutlich von Linux oder macOS. Hier sind die wichtigsten Hinweise: + +### Escaping in PowerShell + +1. Verwenden Sie **doppelte Anführungszeichen (`"`)** außen und **backticks (`\"`)** zum Escapen von inneren doppelten Anführungszeichen. + +#### Beispiel: +```powershell +curl -X POST "https://crudcrud.com/api/$API_ID/staudenpflanzen" ` + -H "Content-Type: application/json" ` + -d "{`"name`":`"Lavendel`",`"botanischer_name`":`"Lavandula angustifolia`",`"standort`":`"Sonnig`"}" +``` + +2. Alternativ können Sie einfach **doppelte doppelte Anführungszeichen (`""`)** innerhalb eines Strings verwenden. + +#### Beispiel: +```powershell +curl -X POST "https://crudcrud.com/api/$API_ID/staudenpflanzen" ` + -H "Content-Type: application/json" ` + -d "{""name"":""Lavendel"",""botanischer_name"":""Lavandula angustifolia"",""standort"":""Sonnig""}" +``` + +### Escaping in Eingabeaufforderung (cmd.exe) + +- Verwenden Sie **doppelte Anführungszeichen** außen, aber **kein Backtick**. +- JSON-Inhalt muss alle inneren Anführungszeichen mit einem Backslash escapen (`\"` statt `"`) + +#### Beispiel: +```cmd +curl -X POST "https://crudcrud.com/api/%API_ID%/staudenpflanzen" ^ + -H "Content-Type: application/json" ^ + -d "{\"name\":\"Lavendel\",\"botanischer_name\":\"Lavandula angustifolia\",\"standort\":\"Sonnig\"}" +``` \ No newline at end of file