Hier wird die öffentliche REST-Schnittstelle dokumentiert.

Wir werden für unsere WebApp auf die öffentliche API der Rezepte-Sammlung von TheMealDB zugreifen:

Schnittstelle

Die API von TheMealDB ist hier dokumenteriert:
👉 https://www.themealdb.com/api.php

Hier einige für uns interessante Endpoints:

Suche

Die Rezepte können nach Namen durchsucht werden. Dabei wird der Suchbegriff als Query-Parameter s an die URL angehängt.

So z.B. die Suche nach «Curry»
👉 https://www.themealdb.com/api/json/v1/1/search.php?s=Curry

Zurück kommt eine Liste von Treffern:
(verkürzt und vereinfacht)

{
  "meals": [
    {
      "idMeal": "52814",
      "strMeal": "Thai Green Curry",
      "strMealThumb": "https://www.themealdb.com/images/media/meals/sstssx1487349585.jpg",
      ...
    },
    {
      "idMeal": "52868",
      "strMeal": "Kidney Bean Curry",
      "strMealThumb": "https://www.themealdb.com/images/media/meals/sywrsu1511463066.jpg",
      ...
    },
    {
      "idMeal": "52820",
      "strMeal": "Katsu Chicken curry",      
      "strMealThumb": "https://www.themealdb.com/images/media/meals/vwrpps1503068729.jpg",
     ...
    },
    {
      "idMeal": "52827",
      "strMeal": "Massaman Beef curry",      
      "strMealThumb": "https://www.themealdb.com/images/media/meals/tvttqv1504640475.jpg",
      ...
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Wir erkennen auch schon die Datenstruktur der Rezepte. Mit idMeal können wir ein Rezept eindeutig identifizieren und so z.B. Details dazu herauslesen:

Details

Die id des Rezeptes wird wiederum hinten an den Endpoint gehängt.

Also für das «Thai Green Curry» aus der oberen Suche mit id 52814:
👉 https://www.themealdb.com/api/json/v1/1/lookup.php?i=52814

Dies ergibt folgende Details zum Rezept:

{
  "meals": [
    {
      "idMeal": "52814",
      "strMeal": "Thai Green Curry",
      "strDrinkAlternate": null,
      "strCategory": "Chicken",
      "strArea": "Thai",
      "strInstructions": "Put the potatoes in a pan of boiling water and cook for 5 minutes. Throw in the beans and cook for a further 3 minutes, by which time both should be just tender but not too soft. Drain and put to one side.\r\nIn a wok or large frying pan, heat the oil until very hot, then drop in the garlic and cook until golden, this should take only a few seconds. Don\u2019t let it go very dark or it will spoil the taste. Spoon in the curry paste and stir it around for a few seconds to begin to cook the spices and release all the flavours. Next, pour in the coconut milk and let it come to a bubble.\r\nStir in the fish sauce and sugar, then the pieces of chicken. Turn the heat down to a simmer and cook, covered, for about 8 minutes until the chicken is cooked.\r\nTip in the potatoes and beans and let them warm through in the hot coconut milk, then add a lovely citrussy flavour by stirring in the shredded lime leaves (or lime zest). The basil leaves go in next, but only leave them briefly on the heat or they will quickly lose their brightness. Scatter with the lime garnish and serve immediately with boiled rice.",
      "strMealThumb": "https://www.themealdb.com/images/media/meals/sstssx1487349585.jpg",
      "strTags": "Curry,Mild",
      "strYoutube": "https://www.youtube.com/watch?v=LIbKVpBQKJI",
      "strIngredient1": "potatoes",
      "strIngredient2": "green beans",
      "strIngredient3": "sunflower oil",
      "strIngredient4": "garlic",
      "strIngredient5": "Thai green curry paste",
      "strIngredient6": "coconut milk",
      "strIngredient7": "Thai fish sauce",
      "strIngredient8": "Sugar",
      "strIngredient9": "Chicken",
      "strIngredient10": "lime",
      "strIngredient11": "basil",
      "strIngredient12": "Rice",
      "strMeasure1": "225g new",
      "strMeasure2": "100g ",
      "strMeasure3": "1 tbsp",
      "strMeasure4": "1 clove",
      "strMeasure5": "4 tsp ",
      "strMeasure6": "400ml",
      "strMeasure7": "2 tsp",
      "strMeasure8": "1 tsp",
      "strMeasure9": "450g boneless",
      "strMeasure10": "2 fresh kaffir leaves",
      "strMeasure11": "handfull",
      "strMeasure12": "Boiled",
      "strSource": "http://www.bbcgoodfood.com/recipes/3235/thai-green-chicken-curry",
      "strImageSource": null,
      "strCreativeCommonsConfirmed": null,
      "dateModified": null
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

(wiederum eine Liste, mit nur einem Eintrag)

Zufall

MIt dem folgenden Endpoint (ohne Optionen) kann ein zufälliges Rezept angezeigt werden:

👉 https://www.themealdb.com/api/json/v1/1/random.php

Kategorien

Die Rezepte sind zum Durchstöbern in Kategorien unterteilt. Diese lassen sich wie folgt anzeigen:
👉 https://www.themealdb.com/api/json/v1/1/categories.php

Wenn man dann eine Kategorie hat, kann man also Rezepte darin auflisten:
👉 https://www.themealdb.com/api/json/v1/1/filter.php?c=Vegetarian

In der offiziellen Dokumentation findet man auch noch Kategorien welche die Rezepte nach ihren Herkunftsländer unterteilen und nach ihrer Haupt-Zutat.

Bilder

Nicht nur auf Instagram ist Food-Photography ein Thema – auch wir wollen Bilder der Rezepte anzeigen. Zum Glück liefert TheMealDB diese:

Wenn wir uns das «Thai Green Curry» anschauen, so haben wir dort einen Wert für strMealThumb. Diesen können wir als src-Attribut für ein img-Element auf unserer Seite verwenden:

<img src="https://www.themealdb.com/images/media/meals/sstssx1487349585.jpg" alt="Thai Green Curry" />
1

Ein kleineres Bild erhalten wir wenn wir /preview hinten an die URL hängen:

<img src="https://www.themealdb.com/images/media/meals/sstssx1487349585.jpg/preview" alt="Thai Green Curry" />
1
Thai Green Curry

Es gibt sogar Bilder der Zutaten:

<img src="https://www.themealdb.com/images/ingredients/potatoes.png" alt="Herdäpfel" />
1

Hier erhalten wir das kleine Bild indem wir -small an den Bilddateinamen hängen:

<img src="https://www.themealdb.com/images/ingredients/potatoes-small.png" alt="Herdäpfel" />
1
Herdäpfel

API-Key

Einige Funktionen sind nur mit einer Spende zugänglich. Dafür erhält man einen sogenannten API-Key. Wir können den Test-Key 1 verwenden. Das ist für schulische Zwecke erlaubt.

Der Key wird im Endpoint eingefügt, zwischen der Version und der aufgerufenen Seite: in den obigen Beispielen die 1 nach dem v1.

Kritik

Aufgabe

Die TheMealDB ist nicht perfekt! Welche Punkte würdest du kritisieren?


Hinweis: die Theorie findest du im…

👉 Skript Datenbanken/REST