DEV Community

Brooke Myers for Anvil

Posted on • Originally published at anvil.works

Building a quick and simple recipe finder app for Xmas

A Merry Little Recipe Finder App

This post is part of the Anvil Advent calendar. We're building one web app a day for 24 days, using nothing but Python!

For Day 16, I built a simple recipe searching app using Anvil. It's built on top of Spoonacular’s food API, and it was incredibly easy.

Alt Text

Using the API in Anvil

To build the app, you first need to sign up for a free API key. I stored my API key in an app secret in Anvil. This way, the key is encrypted and can't be seen by others in my source code.

Next, I added the following lines to the server code, which return a list of recipe names and IDs based on a search query:

@anvil.server.callable
def search(query):
    apikey = anvil.secrets.get_secret('api_key')
    query = anvil.http.url_encode(query)
    return anvil.http.request(f"https://api.spoonacular.com/recipes/complexSearch?apiKey={apikey}&query={query}", json=True)
Enter fullscreen mode Exit fullscreen mode

To get information about the recipe such as its source and how long it takes to cook, the recipe ID is passed to the following function:

@anvil.server.callable
def get_info(recipe_id):
    apikey = anvil.secrets.get_secret('api_key')
    return anvil.http.request(f"https://api.spoonacular.com/recipes/{recipe_id}/information?apiKey={apikey}", json=True)
Enter fullscreen mode Exit fullscreen mode

Building the UI

Now all that’s needed is a user interface to search for and display recipes. In an Anvil app, all you need is Python to build a front end for your apps.

I added a TextBox to my recipe finder app and an event handler that runs when the user presses Enter in the TextBox. The event handler calls the search server function and displays the recipe names and photos in a repeating panel:

def search_box_pressed_enter(self, **event_args):
"""This method is called when the user presses Enter in this text box"""
    results = anvil.server.call('search', self.text_box_1.text)
    self.repeating_panel_1.items = results['results']
Enter fullscreen mode Exit fullscreen mode

Each item in the repeating panel is a link. When clicked, it calls the get_info server function and triggers an alert with more information about the recipe:

def link_1_click(self, **event_args):
"""This method is called when the link is clicked"""
    info = anvil.server.call('get_info', self.item['id'])
    alert(content=Popup(info=info), large=True)
Enter fullscreen mode Exit fullscreen mode

Alt Text

You can use the app yourself to find the perfect recipe for your Christmas meal! (Or for any meal)

P.S. Check out the rest of our Advent calendar here and our Hanukkah calendar here

Top comments (0)