Learn how to search food items and cocktail recipes using TheMealDB and TheCocktailDB APIs.

Become a Python-based API Integrator

TheMealDB and TheCocktailDB APIs are REST APIs used to search food item recipes. This module is a hands-on guide for using these APIs. The module begins with an introduction to TheMealDB and TheCocktailDB APIs. We'll learn about the request and response structures of these APIs. Furthermore, we'll also learn about the different endpoints and how to use them. Then, we'll look at a demo application that will use these APIs to search for recipes. Lastly, we'll look at some recommendations and resources that will allow us to explore these APIs further.

Fetching Recipes with TheMealDB and TheCocktailDB APIs

Let us now look at a Django app that uses TheMealDB API and TheCocktailDB API to provide the user with some delicious recipes.
## Live demo
The widget below contains the code for our application. Click the "Run" button to run the app.

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys


def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'foodapp_demo.settings')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)


if __name__ == '__main__':
    main()


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


demo-app

React

Dart

GoJS React

Typescript React

Vue.js

- The `get_cocktails_list()` function, defined in **lines 8—17**, is used to get the list of the cocktails available in the category selected by the user.
  - We retrieve the selected category in **line 9** and save it in the variable `category`.
  - We call the API using the `category` variable as the value of the query parameter `c` and save the response in the `response` variable in **line 11**.
  - We convert the `response` variable to JSON and send it to be used at the frontend in **lines 12—17**.

- We use the `get_meals_list()` function, defined in **lines 20—29**, to get the list of the meals available in the category selected by the user.
  - We retrieve the selected category in **line 21** and save it in the variable `category`.
  - We use the `category` variable as the value of the query parameter `c`. We call the API and save the response in the `response` variable in **line 23**.
  - Then, we convert the `response` variable to JSON and send it to be used at the frontend in **lines 24—29**.

- We use the `index()` function, defined in **lines 32—54**, to render the page. It is also used to retrieve the information of the selected meal and the selected cocktail.
  - The code in **line 33** checks if the `POST` request has been generated by the user or not. 
  - In case the `POST` request has not been generated:
    - We declare an empty variable `context` in **line 53**.
  - In case a `POST` request has been generated:
    - We retrieve the selected meal and selected cocktail in **line 35** and **line 36** respectively.
    - We finalize the URLs in **lines 39—40**.
    - We call the APIs using these URLs, in **lines 42—43**.
    - We save the response of TheMealDB API in `response1` in **line 42** and the response of TheCocktailDB API is saved in `response2` in **line 43**.
    - We convert the retrieved information to JSON and save it to the `context` variable in **lines 44—51**.
  - The `context` variable is then sent as a response to `templates/foodapp/index.html` in **line 54**.



Let us now look at a Django app that uses TheMealDB API and TheCocktailDB API to provide the user with some delicious recipes.
# Live demo
The widget below contains the code for our application. Click the "Run" button to run the app.

Look at how TheMealDB and TheCocktailDB APIs can be used in an actual application.

Module Overview

TheCocktailDB API

TheMealDB API

APIs Integration in Django

Conclusion

Demo Application

Live demo