Как создать приложение для рецептов: рецепты, пересчёт порций, списки покупок и поиск

Приложение для рецептов — это коллекция рецептов с удобным поиском, понятными страницами для готовки и несколькими помощниками на кухне: пересчёт порций, перевод единиц и превращение рецептов в список покупок. Будь то семейная книга рецептов, кулинарный блог с карточками рецептов или продукт для других людей — решение, которое делает всё остальное работающим, одно: хранить ингредиенты как структурированные данные, а не как абзац текста. Если сделать это правильно, полезные функции становятся простыми.

Определите, какое это приложение для рецептов

Модель данных одинакова во всех четырёх случаях. Меняется то, кто может писать, и нужно ли, чтобы страницы находили поисковики.

Что нужно приложению для рецептов

Страницы

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

Данные

• Рецепты — название, 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 для рецептов и ингредиентов и файловое хранилище для фото, когда приложению это нужно. Вход организуется по вашей собственной схеме: вы выбираете подход, а агент его подключает. На тарифе Pro Mythex также может обернуть приложение в версии для Android и iPhone, которые отправляются во внутреннее тестирование Google Play и в TestFlight. Для публичного сайта с рецептами см. шаблон кулинарного блога и наше руководство как создать мобильное веб-приложение.

Вопросы