3009298
/
lab-development-imb
forked from WEB-IMB-WS2526/lab-development-imb
1
0
Fork 0
Code Pull Requests Activity

05: Labor und Demos

main
Teena Steger 2025-10-29 09:55:55 +01:00
parent 6296c89ba8
commit 081c3b3fad
8 changed files with 481 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/05/demos/flowers.json 100644
View File

@ -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"
}
}
}
}
}
}
}
}
}
}
}
}

71
web/05/demos/flowers_components.json 100644
View File

@ -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"
}
}
}
}
}
}

36
web/05/demos/hello_get.json 100644
View File

@ -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"
}
}
}
}
}
}

43
web/05/demos/hello_post_json.json 100644
View File

@ -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"
}
}
}
}
}
}

35
web/05/demos/hello_post_string.json 100644
View File

@ -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"
}
}
}
}
}
}

169
web/05/labor/05_aufgaben.md 100644
View File

@ -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:<br>
_Name: Sonnenhut<br>
Botanischer Name: Echinacea purpurea<br>
Standort: Sonnig<br>
Besonderheiten: Heilpflanze, zieht Schmetterlinge an, robust<br>_
5. Formulieren Sie einen eigenen POST-Request für:<br>
_Name: Tränendes Herz<br>
Botanischer Name: Lamprocapnos spectabilis<br>
Standort: Halbschatten<br>
Besonderheiten: Herzförmige Blüten, romantisch, giftig<br>_
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 `<id>`:
1. Sonnenhut
```bash
curl -X PUT https://crudcrud.com/api/${API_ID}/staudenpflanzen/<id> \
--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/<id>
```
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
}
```

48
web/05/labor/greeting.json 100644
View File

@ -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!"
}
}
}
}
}
}
}
}

35
web/05/labor/hinweis_escaping.md 100644
View File

@ -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\"}"
```