Building a Simple Recipe App with Flask and the Spoonacular API

 Building a Simple Recipe App with Flask and the Spoonacular API



Creating a recipe app that allows users to search for recipes by ingredient, browse recipe collections, and view detailed instructions for preparing a recipe is a great way to help users discover new and delicious meals to cook at home. In this blog post, we will go over the process of building a simple recipe app using the Flask web framework and the Spoonacular Recipe-Food-Nutrition API.


The first step in building our recipe app is to set up our project directory and install the necessary dependencies. We'll be using Flask to handle routing and rendering templates, and the requests library to make calls to the Spoonacular API. To start, create a new directory for your project and run the following commands to create a virtual environment and install Flask and requests.


$ python3 -m venv venv

$ source venv/bin/activate

(venv) $ pip install flask requests

Next, we'll create a new file called app.py in our project directory. This will be the main file for our Flask app. We'll start by importing the necessary libraries and creating a new Flask app.



from flask import Flask, render_template, request

import requests


app = Flask(__name__)

Now that we have our Flask app set up, we can add routes to handle the different pages of our recipe app. For example, we can create a route that displays the search page when the user navigates to the homepage. We'll also create a route to handle search requests and display the results.



@app.route('/')

def search():

    return render_template('search.html')


@app.route('/results', methods=['POST'])

def results():

    ingredient = request.form['ingredient']

    # Make a request to the Spoonacular API to search for recipes with the given ingredient

    # and render the results template with the search results

    return render_template('results.html', recipes=recipes)

To connect to Spoonacular Recipe-Food-Nutrition API, you will need an API key which you can get by signing up to Spoonacular. The base URL for the API is 'https://api.spoonacular.com/recipes/complexSearch'. Once you got your API key you can use the request library to make a GET request to the Spoonacular API and search for recipes by ingredient.



    api_key = "Your_API_Key"

    url = f'https://api.spoonacular.com/recipes/complexSearch?query={ingredient}&apiKey={api_key}'

    response = requests.get(url)

    data = response.json()

    recipes = data['results']

The returned json object will contain a list of recipe objects containing information like title, image, instructions etc.

You can extract the necessary fields like title, image and instructions and pass them to the template.


Finally, we'll need to create template files for each of the routes we've defined above. We'll create search.html to display the search page and results.html to display the search results. We can use the Jinja template language to display the search results in the template.


<!-- search.html -->

<form action="{{ url_for('results') }}" method="post">

    <label for="ingredient">Ingredient:</label>

    <input type="text" name="ingredient" id="ingredient">

<input type="submit" value="Search">


</form>

<!-- results.html -->

{% for recipe in recipes %}

<h2>{{ recipe.title }}</h2>

<img src="{{ recipe.image }}" alt="{{ recipe.title }}">

<p>{{ recipe.instructions }}</p>

{% endfor %}



Once you have all the above code in place, you can run the app using the following command:

(venv) $ FLASK_APP=app.py FLASK_ENV=development flask run



And navigate to `http://localhost:5000` to see the search page of your recipe app. You can then search for recipes by ingredient and see the results in a list. You can further customize and expand the app by adding more features such as collections, pagination, detailed recipe view, etc.


I hope this gives you a good starting point for building your own recipe app. Don't hesitate to reach out if you have any questions about the code or the process.

No comments:

Post a Comment

The Importance of Cybersecurity in the Digital Age

 The Importance of Cybersecurity in the Digital Age Introduction: In today's digital age, where technology is deeply intertwined with ev...