Як створити веб-сайт про їжу (за допомогою Spoonacular API) [Python & Flask]

Останнє оновлення 14 вересня 2020 р. Персоналом RapidAPI 1 коментар

Зміст

Харчування є важливим аспектом людського життя, але багато людей мають з цим проблеми.

Деяким не вистачає часу та пристрасті їсти здорову їжу, а іншим подобається готувати ті самі старі страви.

Сьогодні ми вирішимо це питання, покращимо дієту та навчимося створювати красивий веб-додаток для пошуку рецептів за допомогою API.

Як створити веб-сайт про їжу за допомогою API

Виберіть правильний API рецептів
Додайте функціональність пошуку за допомогою API рецептів
Створіть сторінку результатів пошуку
Створіть детальну сторінку рецепта

Якщо ви хочете створити продовольчий блог, це посилання може бути корисним. (Не забудьте здійснити SEO-продовольчий блог, як-от створення зворотних посилань та просування).

Spoonacular’s Recipe, Food, & Nutrition API

Для наших цілей ми використовуватимемо Spoonacular API як цільове джерело даних.

Це комплексна база даних про харчову інформацію та дані.

Ви можете знайти і поділитися величезною кількістю рецептів у реальному житті.

Цей API включає понад 365 000 рецептів, що включає понад 80 000 інгредієнтів, що робить його одним з найкращих API-рецептів, що включає повний доступ до рецептів та інструкцій з приготування.

Крім того, API дозволяє шукати рецепти та процедури приготування природними мовами. Наприклад, ви можете шукати щось на зразок “веганських десертів”, і ви повинні отримати деякі вичерпні результати пошуку.

Spoonacular має потужні функції обчислення калорій, цін та багатьох інших аспектів. Потенційний користувач може навіть побачити візуалізацію різних страв різних кухонь.

Нарешті, є місце для нестандартних дієт.

Ви можете подати свою дієту або дотримуватися правил певного шаблону дієти.

Це лише верхівка айсберга - є навіть пов'язані чат-боти та система автозаповнення інгредієнтів!

Як використовувати та отримати ключ API до Spoonacular API

Для того, щоб використовувати Spoonacular API, ми будемо використовувати платформу RapidAPI.

Просто підпишіться на безкоштовний обліковий запис користувача RapidAPI і підпишіться на API. (підказка: існує Базовий план, який дозволяє зробити 500 безкоштовні запити/день).

Ми будемо кодувати на Python для цього проекту, і ми створимо додаток Flask з яскравою демонстрацією потужності API харчування. Тож обов’язково встановіть на своїй машині Python 3.7.

Огляд API рецептів

Ось деякі найпопулярніші кінцеві точки API:

обчислювальні запити - обчислення. Ці кінцеві точки можуть візуалізувати віджети обладнання та підрахувати всі продукти харчування. Потужні інструменти для вдосконаленого використання рецептів. Приклади: класифікувати продуктовий продукт, вгадати харчування за назвою страви, узагальнення рецептів;
виписка запитів - розбір та аналіз. Тут користувач може спробувати обробити необроблені дані та отримати нагрівальні елементи. Приклади: розбір інгредієнтів, виявлення їжі в тексті, аналіз рецептів з веб-сайту;
пошукові запити - Підтримує багато різних способів пошуку рецептів. Приклади: отримати пару для вина, автозавершити пошук товару, отримати подібні рецепти;
запити даних - Приклади: отримати основну інформацію про рецепти, отримати інформацію про продукт, отримати харчування за рецептами;
запити в чаті - взаємодія. Це має вирішальне значення при створенні ботів. Тут ви можете перевірити сили штучного інтелекту та підказки щодо розмов. Приклади: поговорити з чат-ботом, отримати пропозиції щодо розмов .

Медіальна сторона реагує на заголовки та параметри в межах вибраної кінцевої точки.

Тут ви можете перевірити свій унікальний ідентифікатор RapidAPI та хост тестованого продукту.

Це дуже інформативний спосіб зустріти користувача з функціоналом запиту.

Кожне поле введення має опис; Ви можете змінити та протестувати різні їх комбінації.

Якщо ви хочете побачити результати раніше згаданих тестів, подивіться праворуч, ви можете знайти фрагменти коду для всіх підтримуваних мов програмування.

Тепер давайте розглянемо практичний приклад.

Як створити харчовий додаток або веб-сайт за допомогою Spoonacular API

Веб-сайт "Що у вас у холодильнику"

Через деякий час ми заглянемо до нашого холодильника і складемо якісь дивні поєднання їжі.

Давайте створимо додаток, який допоможе нам знаходити рецепти з урахуванням наявних у нас інгредієнтів.

1. Створіть сторінку пошуку

По-перше, давайте створимо вихідну точку для наших користувачів за допомогою сторінки пошуку. Якщо користувач вирішить нічого не вводити, система все одно підтримає кілька випадкових пропозицій.

Після цього користувач може вибрати та відкрити детальний огляд одного рецепту. Кожна сторінка повинна містити динамічну інформацію та використовувати кілька кінцевих точок API. Повний їх перелік такий:

ОТРИМАЙТЕ випадковий жарт - просто кумедний спосіб привітатися;
ОТРИМАЙТЕ рецепти за переліком інгредієнтів - основний тип пошуку рецептів. Інгредієнти набираються за допомогою розділювача комами;
ОТРИМАТИ випадкові рецепти - у разі зацікавленості користувача в чомусь новому;
ОТРИМАТИ інформацію про рецепт за ідентифікатором - детальна текстова інформація із зображенням рецепта;
VISUALIZE рецептурні інгредієнти за ідентифікатором - за замовчуванням HTML-віджет від Spoonacular для демонстрації інгредієнтів;
ВІЗУАЛІЗУЙТЕ рецептурне обладнання за ідентифікатором - ще один віджет, але для обладнання.

Як уже згадувалося раніше, ми створимо веб-додаток за допомогою Python, тому нам знадобиться фреймворк. На щастя, Python має швидке і дуже полегшене рішення під назвою Flask - мікрофреймворк, який також є досить активним інструментом програмування. Не забудьте встановити його у своєму середовищі Python.

Наступна необхідна бібліотека - запити. Це одне з можливих рішень для обробки запитів HTTP.

Тепер ви можете створити папку для веб-програми та файлу .py. Давайте використаємо Bootstrap для довершеного HTML-макета - бібліотеки з відкритим кодом для багатьох шаблонів CSS.

Далі ми створимо підпапку шаблонів з усіма фрагментами макета. Кожен з них буде виконаний після обробки даних із зворотного боку. Вам потрібно мати обробник методів для кожної унікальної дії даних. Цей метод повинен відображати шаблон із динамічним створенням відповіді.

Далі скористаємося Jinja2 - методом підключення коду Python до шаблонів HTML. Це мова синтаксису для команд Python із використанням розмітки. Добре, давайте зараз щось кодуємо!

Спочатку створимо файл base.html, який буде базовим шаблоном для всіх наступних кроків.

Тут ми включаємо всі необхідні файли стилів і створюємо блоки для динамічних даних.

Тепер ми можемо спробувати працювати з файлом .py.

Вставте в нього такі рядки:

Тепер ми створимо деякі глобальні змінні для кінцевих точок.

Давайте також скеруємо домашню сторінку з пошуком.

Отримавши жарт, ми передаємо його шаблону.

Тепер створіть і змініть search.html наступним чином:

Досить просте створення макета. Але спробуємо виконати наш проект, запустивши .py файл.

2. Створіть сторінку результатів пошуку рецептів

Тепер покажемо результати пошуку.

Давайте відобразимо їх у списку, тому нам знадобиться ще один обробник методів + шаблон.

Ми можемо почати з першого.

Вставте наступний код під метод search_page у файлі .py.

Тут ми будемо запитувати дві різні кінцеві точки залежно від результатів пошуку.

Але не забувайте про шаблони.

Створіть файл recipes.html і вставте такі рядки:

Знову ж таки, існує чітке розділення двох різних способів формування рецептів.

Тепер давайте перевіримо. Спробуємо щось шукати:

Ось результати для “свинини, лимона, меду”.

Користувач може порівняти оригінальний рецепт та загострені продукти.

Але як буде працювати наш додаток без будь-якого пошуку?

Коли пошук не виконується, відображається п’ять випадкових страв, включаючи кількість часу, необхідного для приготування та приготування страв.

3. Створіть докладні сторінки рецептів

Тепер давайте детально покажемо рецепти. Почнемо із звичайного методу у файлі .py.

Тут ви побачите кілька цікавих нових рядків коду.

По-перше, давайте виконаємо три замість одного запиту.

По-друге, ми створимо підзаголовки, щоб задовольнити прийняті вимоги щодо заголовків для типу вмісту.

Нарешті, ми включимо CSS за замовчуванням для інтеграції віджетів.

Створіть шаблон recipe.html і вставте такий фрагмент:

Вуаля! Додаток заповнений.

Звичайно, це ще не ідеально, але навіть зараз у нього є багато цікавих аспектів для серфінгу.

Найголовніше: «| безпечне ”ключове слово.

Цей код вказує розмітку HTML, тому всі теги та сценарії будуть виконані. Повторіть свій проект і відвідайте кілька сторінок рецептів.

Висновок

Сьогодні ми представили Spoonacular API.

Це потужне та багатофункціональне рішення для харчового харчування.

Ми створили видимий та надійний веб-додаток.

Основу цього додатка склали кінцеві точки RapidAPI.

Наш проект може запропонувати свіжі рецепти залежно від вмісту вашого холодильника.