День 4: Створення додатку для пошуку рецептів з Django та Spoonacular API - javascript.org.ua

Зображення згенеровано DALL.E

Чи часто ви замислювались, що можна приготувати з інгредієнтів, які є вдома? Або, можливо, ви шукали простий спосіб знайти рецепти за конкретною стравою чи ключовим словом? У цьому блозі ми створимо веб-додаток "Recipe Finder" за допомогою Django та Spoonacular API, щоб вирішити ці проблеми. Цей додаток дозволить користувачам швидко знаходити рецепти та переглядати детальні інструкції, допомагаючи втілити кулінарні ідеї у життя з легкістю.

Крок 1: Налаштування проекту Django

1.1 Встановлення необхідних пакетів

Встановіть Django та бібліотеку requests:

pip install django requests

1.2 Створення проекту та додатку

Виконайте наступні команди, щоб створити новий проект та додаток Django:

django-admin startproject recipe_finder  
cd recipe_finder  
python manage.py startapp finder

1.3 Налаштування `settings.py`

Додайте новий додаток (finder) до INSTALLED_APPS у файлі settings.py:

INSTALLED_APPS = [  
 ...  
 'finder',  
]

Також додайте плейсхолдер для ключа Spoonacular API у файлі settings.py:

SPOONACULAR_API_KEY = 'your_api_key_here'

Отримати ключ Spoonacular API можна на https://spoonacular.com/food-api/console#Dashboard

Отримання API ключа з консолі API

Крок 2: Створення Views (видів)

У файлі finder/views.py визначте два види: один для пошуку рецептів та інший для перегляду деталей рецепту.

import requests  
from django.shortcuts import render  
from django.conf import settings  

def search_recipes(request):  
 if request.method == 'POST':  
 query = request.POST.get('query')  
 url = "https://api.spoonacular.com/recipes/complexSearch"  
 params = {  
 'apiKey': settings.SPOONACULAR_API_KEY,  
 'query': query,  
 'number': 10  
 }  
 response = requests.get(url, params=params)  
 data = response.json()  
 recipes = data.get('results', [])  
 return render(request, 'finder/results.html', {'recipes': recipes})  
 return render(request, 'finder/search.html')  

def recipe_detail(request, recipe_id):  
 url = f"https://api.spoonacular.com/recipes/{recipe_id}/information"  
 params = {'apiKey': settings.SPOONACULAR_API_KEY}  
 response = requests.get(url, params=params)  
 recipe = response.json()  
 return render(request, 'finder/detail.html', {'recipe': recipe})

Крок 3: Налаштування URL-ів

3.1 URL-і на рівні додатку

У файлі finder/urls.py визначте шаблони URL-ів для додатку:

from django.urls import path  
from . import views  

urlpatterns = [  
 path('', views.search_recipes, name='search_recipes'),  
 path('recipe/<int:recipe_id>/', views.recipe_detail, name='recipe_detail'),  
]

3.2 URL-і на рівні проекту

У файлі recipe_finder/urls.py підключіть URL-і додатку:

from django.contrib import admin  
from django.urls import path, include  

urlpatterns = [  
 path('admin/', admin.site.urls),  
 path('', include('finder.urls')),  
]

Крок 4: Створення шаблонів

4.1 Базовий шаблон

Створіть шаблон base.html для забезпечення сталого вигляду сторінок по всьому сайту.
Розмістіть це в директорії templates/:











Recipe Finder
    {% block content %}    {% endblock %}        
© 2025 Recipe Finder

4.2 Шаблон пошуку

Створіть finder/templates/finder/search.html:

{% extends 'base.html' %}      
{% block content %}   
Пошук рецептів
       {% csrf_token %}        
Пошук      
{% endblock %}

4.3 Шаблон результатів

Створіть finder/templates/finder/results.html:

{% extends 'base.html' %}      
{% block content %}   
Результати пошуку
   {% for recipe in recipes %}    
{{ recipe.title }}
Переглянути рецепт    
   {% endfor %}   
{% endblock %}

4.4 Шаблон деталей рецепту

Створіть finder/templates/finder/detail.html:

{% extends 'base.html' %}      
{% block content %}   
{{ recipe.title }}
Інгредієнти:
   {% for ingredient in recipe.extendedIngredients %}    
{{ ingredient.original }}
   {% endfor %}   
Інструкції:
   {{ recipe.instructions|safe }}   
{% endblock %}

Крок 5: Запуск додатку

Застосуйте міграції та запустіть сервер:

python manage.py migrate   
python manage.py runserver

Відкрийте браузер та перейдіть за адресою http://127.0.0.1:8000/, щоб використовувати додаток Recipe Finder.

Вітаємо! Ви успішно створили додаток Recipe Finder, використовуючи Django та Spoonacular API. З цим проектом ви навчились інтегрувати зовнішні API, обробляти введення користувача та створювати динамічні веб-додатки.

Не соромтесь розвивати цей проект далі, додаючи нові функції, як-то автентифікація користувачів, улюблені рецепти або вдосконалене оброблення помилок. Поділитися вашим завершеним додатком або власними налаштуваннями онлайн — чудовий спосіб продемонструвати ваші навички!

Демонстрація Recipe Finder

Отримати повний код можна за посиланням https://github.com/Mathurdanduprolu/Day4RecipeMaker.git

Слідкуйте за мною на Medium для більше уроків по Django та веб-розробці.
Поділіться своїм досвідом та відгуками в коментарях — буду радий почути від вас!
Не забудьте поставити лайк та поділитися цим блогом зі своїми друзями.

Будьмо разом і далі створювати неймовірні додатки! 🚀

Перекладено з: Day 4: Building a Recipe Finder App with Django and Spoonacular API