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",
...
}
]
}
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
}
]
}
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" />
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" />
Es gibt sogar Bilder der Zutaten:
<img src="https://www.themealdb.com/images/ingredients/potatoes.png" alt="Herdäpfel" />
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" />
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…