Як створити застосунок для рецептів: рецепти, масштабування, списки покупок і пошук

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

Визначте, який це тип застосунку для рецептів

Структура даних однакова для всіх чотирьох. Змінюється те, хто може писати, і чи мають сторінки знаходитися пошуковими системами.

Чого потребує застосунок для рецептів

Сторінки

• Список або головна рецептів — картки з фото, назвою, загальним часом і тегами.
• Сторінка рецепта — вигляд для готування: фото, керування порціями, список інгредієнтів, пронумеровані кроки, примітки.
• Пошук і фільтри — за назвою, за інгредієнтом, за тегом (вегетаріанське, швидке, десерт), за часом.
• Додавання та редагування рецепта — форма, яка обробляє інгредієнти рядок за рядком.
• Колекції — «Будні», «Різдво», «Рецепти мами».
• Список покупок — зібраний з одного або кількох рецептів.

Дані

• Рецепти — назва, slug, опис, порції, час підготовки, час приготування, фото, теги, джерело, автор, видимість.
• Інгредієнти — рецепт, позиція, кількість, одиниця, назва, примітка («дрібно нарізати»), необов’язкова група («Для соусу»).
• Кроки — рецепт, позиція, текст, необов’язковий таймер.
• Колекції та елементи колекцій.
• Пункти списку покупок — користувач, назва інгредієнта, кількість, одиниця, відмічено чи ні.

Кількості мають бути числами. «1 ½ склянки» стає кількістю 1.5, одиницею склянка. Тримайте короткий список одиниць, які розуміє застосунок, і дозволяйте вільний текст («щіпка», «за смаком») без кількості.

Права доступу

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

Функції, які роблять застосунок вартим використання

Масштабування порцій. Помножте кожну кількість на нові порції ÷ початкові порції. Показуйте зрозумілі дроби (¾ склянки, а не 0,75 склянки) і округлюйте незручні значення. Деякі речі не масштабуються лінійно — приправи, час випікання, розміри форм, — тому коротка примітка до рецепта допоможе.

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

Режим готування. Великий текст, один крок за раз або прокрутка списку з чекбоксами, і екран не гаснає під час готування (браузери підтримують блокування екрана на багатьох пристроях). Це та функція, за яку вам подякують.

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

Пошук за інгредієнтом. «Що можна приготувати з куркою і порами?» працює лише тому, що інгредієнти є окремими записами. Див. як додати пошук до застосунку.

SEO для публічних сторінок рецептів

Якщо люди мають знаходити ваші рецепти через пошук, кожен рецепт потребує власної URL-адреси, унікальної назви й опису та вмісту рецепта, який є в HTML під час завантаження сторінки, а не намальований пізніше JavaScript. Додайте структуровані дані schema.org Recipe — інгредієнти, кроки, час, порції, зображення — згенеровані з вашої бази, щоб вони завжди відповідали сторінці. Додавайте рейтинги лише тоді, коли їх справді залишили люди на сторінці. Наш гайд про те, що таке структуровані дані, пояснює розмітку, а документація Google перелічує поля, які вона використовує.

Приклад першого промпту

Створи застосунок сімейних рецептів, спершу для телефонів. Кожен рецепт має назву, фото, порції, час підготовки й приготування, теги, інгредієнти та пронумеровані кроки. Зберігай кожен інгредієнт як окремий запис з кількістю, одиницею, назвою та приміткою, згрупованими в необов’язкові розділи на кшталт «Для соусу». На сторінці рецепта є керування порціями, яке масштабує кожну кількість і показує зручні дроби, перемикач метричних/американських одиниць і режим готування з великим текстом, чекбоксами кроків і екраном, що не гасне. Шукай за назвою рецепта або інгредієнтом, фільтруй за тегом і загальним часом. Користувачі зберігають рецепти в колекції та додають один або кілька рецептів до списку покупок, який об’єднує однакові інгредієнти і дозволяє мені відмічати пункти. Члени родини входять за email і паролем і мають одну спільну книгу, яку всі можуть редагувати. Зберігай усе в базі даних, фото — у сховищі файлів. Додай шість зразкових рецептів.

Кроки побудови

1. Сторінка рецепта зі зразковими даними. Зробіть вигляд для готування чудовим на телефоні раніше за все інше.
2. Структурований ввід інгредієнтів. Форма, де кожен рядок — це кількість, одиниця, інгредієнт і примітка. Також запропонуйте поле «вставити список», яке розбиває текст на рядки, а потім дозволяє кухареві виправити те, що розбилося неправильно.
3. Масштабування й одиниці. Тестуйте незручні випадки: ⅓ склянки подвоєно, 1 яйце розділено навпіл, «сіль за смаком».
4. Пошук і фільтри.
5. Список покупок. Зливайте «2 цибулини» та «1 цибулина» у «3 цибулини»; різні одиниці тримайте окремо, а не вгадуйте.
6. Вхід і спільний доступ. Див. як додати вхід до застосунку.
7. Фото. Змінюйте розмір під час завантаження, щоб сторінки були швидкими.
8. Публічні сторінки й розмітка (якщо публічно). Потім опублікуйте й перевірте код сторінки рецепта.

Типові помилки

• Інгредієнти в одному текстовому полі. Ви втрачаєте масштабування, списки покупок і пошук за інгредієнтом.
• Десяткові дроби на екрані. «0,333 склянки» незручно читати. Показуйте дроби.
• Історія життя перед рецептом. У вашому власному застосунку розмістіть інгредієнти ближче до верху, з посиланням «перейти до рецепта», якщо є історія.
• Повнорозмірні фото. Фото з телефона великі; зменшуйте й стискайте їх.
• Публічне копіювання чужих рецептів з інших сайтів. Імпорт для особистого використання — одне, а повторна публікація чужого тексту і фото — інше.
• Фальшиві рейтинги в структурованих даних. Пошукові системи можуть покарати оманливу розмітку.
• Харчова цінність, подана як точна. Якщо ви розраховуєте харчову цінність, позначте її як оцінку і вкажіть джерело даних.

Коли краще готовий застосунок для рецептів

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

Будуйте власний, коли хочете того, чого ці інструменти не роблять: систему рецептів для бізнесу з калькуляцією або контролем алергенів, спільну книгу для великої родини з вашою структурою, рецепти, пов’язані з планом харчування чи магазином, або дизайн, що повністю ваш. Якщо головна мета — планувати тижневе меню, далі читайте як створити застосунок для планування харчування.

Побудова з Mythex

У Mythex ви описуєте застосунок для рецептів у чаті, перевіряєте вигляд для готування у рамці телефонного розміру живого прев’ю і публікуєте за публічною адресою, яку родина або читачі можуть відкрити на телефоні та додати на головний екран. Mythex додає окрему базу даних Postgres database для рецептів та інгредієнтів і сховище файлів для фото, коли застосунку це потрібно. Вхід — це ваш власний підхід: ви обираєте його, а агент його підключає. На Pro Mythex також може обгорнути застосунок як застосунки для Android та iPhone, які відправляються в внутрішнє тестування Google Play і TestFlight. Для публічного сайту рецептів див. шаблон блогу про їжу і наш гайд як створити мобільний веб-застосунок.

Запитання