Как сделать приложение с рецептами
Приложение “Рецепты здоровых смузи” с веб-кабинетом для администрирования. Проект разработан совместно с Krucream Communications Agency, Латвия.
Сделано в 2016
Разработать мобильное приложение на Android, которое упростит поиск рецептов смузи. Рецепты будет добавлять Администратор: загружать фото, заполнять описание и категорию, указывать необходимые ингредиенты.
Проблема
Приложение рассчитано на 2 типа пользователей:
- те, кто употребляет смузи, чтобы достичь определенной цели (похудеть, очистить организм);
- те, кто хочет приготовить смузи из имеющихся под рукой ингредиентов.
При разработке нужно учесть потребности и тех, и других.
Еще одна особенность — приложение с рецептами должно быть мультиязычным. То есть пользователь выбирает, на каком языке он хочет читать контент. Для начала реализовать русский и английский языки, позже будут добавлены другие.
Выбрали сочно-зеленый цвет, который ассоциируется со здоровьем, свежестью и отлично передает посыл приложения. В рамках работ сделали две версии логотипа: на русском и на английском языках. Дизайн приложения был принят с первого раза, без каких-либо правок.
Решение
Для тех, кто пришел в приложение чтобы похудеть или улучшить состояние здоровья, разделили рецепты по категориям для удобной навигации. Дополнительно в меню есть «Специальные программы» — инструкции для достижения цели.
Для рецепта в списке, кроме категории, сразу отображается калорийность и время приготовления — это очень удобно!
Чтобы сделать смузи из того, что есть в холодильнике, воспользуйтесь поиском по ингредиентам.
Пользователь начинает вводить наименование — всплывает подсказка с возможными вариантами. В результате приложение отображает рецепты, которые содержат введенные ингредиенты.
А так выглядит сам рецепт. Сразу видно, какие продукты будут нужны. Благодаря пошаговой инструкции, приготовить смузи очень просто.
Если рецепт понравился — добавляй в Избранное.
Так выглядят страницы авторизации, регистрации и настройки.
Страница с текстовой информацией и внешний вид уведомления. Создание и рассылка уведомлений происходит через Кабинет администратора.
Кабинет администратора
В веб-части приложения администратор создает категории, добавляет ингредиенты и заполняет информацию о специальных программах.
Обратите внимание, что все данные заполняются на русском и на английском языке. Добавить язык в дальнейшем будет просто: появится новая вкладка для заполнения.
Страница создания нового рецепта простая и интуитивно понятная. В фотогалерее добавляются изображения для слайдера. Далее заполняется наименование, категория и описание, данные о времени, количестве порций и калорийности. Добавляются ингредиенты и пошаговое описание.
Администратор создает новые уведомления и выбирает список пользователей для рассылки. Можно разослать всем зарегистрированным или определенным пользователям, разделять тех, кто пользуется русской или английской версией. История рассылки сохраняется.
Кукорама для Android и iOS
Кукорама — кулинарное сообщество для тех, кто любит готовить и кушать вкуснятину. На сайте пользователи делятся рецептами, оценивают и обсуждают их, добавляют друг друга в друзья и общаются на кулинарные темы. Отличительная черта сообщества — пошаговые описания рецептов с фотографиями или видео каждого из этапов приготовления блюда.
Для Кукорамы мы сделали приложения под платформы Android и iOS. Они не дублируют сайт, а предоставляют выборку самых качественных, вкусных и интересных рецептов, тщательно отобранных администраторами. База рецептов постоянно пополняется.
Иконка приложения
Знакомство пользователя с приложением начинается с иконки, которую он видит еще в магазине приложений. Поэтому она должна выделяться на фоне других. Использование простых форм и ярких цветов поможет пользователю легко отыскать приложение в магазине и позднее на домашнем экране смартфона. Если сделать иконку недостаточно заметной, приложение потеряется среди других и пользователь забудет о нем.
Для iOS мы вписали иконку в стандартную форму. Android позволяет использовать произвольную форму, поэтому мы повторили плашку логотипа, сделав ее квадратной. Колпак шеф-повара уже давно стал символом Кукорамы, потому мы использовали его и на иконке.
Визуальный стиль
В дизайне используются шрифты из семейства Helvetica Neue, которые соответствуют общему стилю приложения.
За основу мы взяли особый оттенок красного цвета и подобрали к нему оттенки коричневого и бежевого. Такая цветовая гамма является достаточно яркой, теплой и пробуждает аппетит.
Главный экран
После запуска приложения пользователя встречает главный экран. На нем разместились элементы навигации, а основное пространство заняли категории рецептов. Отдельным блоком идут новые рецепты со всех категорий для тех, кто регулярно заглядывает в приложение в поиске вкусностей.
Основная навигация
Структура мобильного приложения продумана таким образом, чтобы путь к рецепту был максимально коротким. Ведь удобство интерфейса играет важную роль в удержании пользователей. Приложение учитывает преимущества мобильных устройств перед ПК и предлагает создать список покупок с продуктами, нужными для приготовления одного или нескольких блюд, в одно нажатие.
В iOS принято использовать навигацию с помощью табов, а в Android популярно боковое меню. Придерживаясь официальных руководств производителей каждой из ОС и учитывая пользовательские паттерны, мы сделали меню, которые соответствуют требованиям каждой из платформ.
Навигация по рецептам осуществляется через категории, отображаемые сеткой. Кроме того, к рецепту можно перейти через поиск или избранное, если пользователь добавил его туда ранее. Искать можно с главного экрана или перейдя в категорию, рецепт из которой требуется найти.
Описание рецепта
Этот экран решает основную проблему пользователя. Рецепт представляет собой детальное описание каждого шага по приготовлению блюда с подробными фотографиями процесса. Все нужные ингредиенты отображаются в виде списка с указанием количества каждого ингредиента.
А на случай, если нужных продуктов в холодильнике не оказалось, пользователь может добавить ингредиенты в список покупок.
Список покупок
Этот экран призван облегчить процесс покупки продуктов, нужных для приготовления блюд. Когда ингредиенты добавляются в список покупок, приложение предусмотрительно добавляет рецепт в избранное, чтоб пользователю потом было проще найти его. Список покупок группируется по рецептам и товарам. Количество товаров автоматически определяется по количеству порций.
Если в списке покупок есть несколько рецептов c одинаковыми ингредиентами, он группируется по товарам и пользователь видит, сколько товара ему понадобится. Купленные продукты отмечаются галочкой. Список можно отправить по SMS или почте.
Больше экран — больше возможностей
Вскоре после запуска мобильного приложения мы решили адаптировать дизайн под планшеты. Изменения коснулись списка категорий и рецептов, но больше всего изменился экран отдельного рецепта. Новые рецепты появляются во всплывающем блоке прямо на главном экране. Благодаря большей диагонали устройств описание и список ингредиентов, которые ранее находились в разных табах, теперь представлены на одном экране. Пользователь может читать описание рецепта и одновременно просматривать список ингредиентов.
Для планшетов на базе Android диагональю от 7 до 12 дюймов мы реализовали несколько вариантов расположения элементов в зависимости от размера экрана.
Особенности программирования приложений
Приложение под iOS носит универсальный характер благодаря использованию двух UIStoryboards для iPhone и iPad соответственно. Во время разработки Android-приложения применялась концепция его разбития на фрагменты, поэтому мы смогли без особого труда реализовать несколько вариантов расположения элементов в зависимости от размера экрана. А благодаря библиотекам AppCompat и Support Design эти элементы выглядят одинаково на разных версиях ОС Android. Использование механизма кэширования графики позволило добиться плавности прокрутки галерей для iOS-устройств.
Вначале для связи с RestFull API сервера мы использовали библиотеку Robospice, но со временем благодаря гибкой архитектуре приложения перешли на более современную библиотеку Retrofit. Чтобы реализовать API для взаимодействия с сервером мы использовали популярный среди iOS-разработчиков фреймворк AFNetworking.
В приложении есть возможность загрузить рецепты на устройство, что позволяет использовать его без подключения к Интернету. Данные мы сохраняем с помощью базы данных SQLite. Локальная Core Data решает аналогичные задачи для iOS-девайсов, не забывая при этом и про списки покупок, которые могут группироваться как по рецептам, так и по видам товаров.
Приложение каждый день получает уведомления о появлении новых рецептов при помощи технологии Google Cloud Messaging. В отличие от Android, в устройствах от компании Apple используется нативная технология APNS для организации получения Remote Push Notifications.
Конструктор приложений для рецептов
Как создать приложение для рецептов за 3 простых шага?
Введите название приложения для кулинарных рецептов
Выберите функции, которые вы хотите увидеть
Запустите свое приложение в соответствующих магазинах приложений
Почему стоит выбрать приложение Appy Pie для создания рецептов?
Конструктор приложений для рецептов Appy Pie предлагает платформу без кода для создания приложений для рецептов за считанные минуты. Независимо от ваших знаний в области кодирования, вы можете создать приложение для рецептов, чтобы ваши рецепты стали вирусными.
Хотите ли вы создать простое приложение для рецептов и делиться своими рецептами с другими или создать сложное приложение для рецептов, чтобы люди могли делать закладки, просматривать или взаимодействовать с вами через приложение – Appy Pie’s recipe app maker поможет вам!
Вы должны выбрать конструктор приложений для создания рецептов Appy Pie, поскольку он позволяет:
- Настройте свое приложение для рецептов: От дизайна приложения до навигационной схемы – вы можете настроить все в своем приложении для рецептов и сделать его таким интерактивным, как вам хочется. Вы можете легко изменить тему фона, изменить цветовую палитру и сделать многое другое с помощью создателя приложений для рецептов Appy Pie.
- Добавляйте столько рецептов, сколько хотите: Appy Pie’s recipe app builder предлагает вам функцию рецептов, чтобы вы могли добавить пошаговые инструкции, изображения соблазнительных блюд и даже видеоролики с неограниченным количеством блюд в ваше приложение рецептов.
- Сделайте приложение для рецептов с мультимедийными возможностями: Вы можете сделать свое приложение с рецептами эксклюзивным, добавив различные мультимедийные функции, такие как флэш-карты для изучения кулинарных терминов, цитаты о еде, чтобы побудить пользователей приложения больше готовить, аудио для создания серии подкастов и многое другое с помощью конструктора приложений с рецептами Appy Pie.
- Никогда не упускайте ни одного пользователя приложения: Конструктор рецептов Appy Pie позволяет добавлять регистрационные формы для сбора данных о пользователях, страницу отзывов для повышения доверия, а также контактную информацию, чтобы пользователи не упустили шанс взаимодействовать с вами. С их помощью вы наверняка сможете увеличить число пользователей вашего приложения до миллиона и более.
- Возможность создания сообщества: С помощью конструктора рецептов Appy Pie вы можете добавить различные функции, такие как форумы для обсуждений, новости для информирования людей о последних тенденциях в области кулинарии, блог для предложения удивительных и вкусных советов и т.д., чтобы привлечь и создать сообщество людей, которые хоть немного интересуются кулинарией.
Создайте приложение для рецептов с помощью программы Appy Pie’s Recipe App Maker
Теперь создайте свое собственное приложение для рецептов без кодирования с помощью конструктора приложений Appy Pie. Это идеальная платформа для начинающих кулинарных гениев, которая демонстрирует ваши рецепты всему миру.
Поделитесь новыми рецептами со своими друзьями, семьей и коллегами, интегрировав функции социальных сетей в приложение для рецептов, и порадуйте их вкусовые рецепторы, где бы они ни находились. При желании вы можете загрузить видео с вашими рецептами или творчески объяснить рецепты с помощью текста и изображений.
Поэтому не позволяйте своим кулинарным инстинктам зачерстветь в вашем сознании и начните создавать приложение для кулинарных рецептов за считанные минуты с помощью конструктора приложений Appy Pie.
Какие функции выделяют ваше приложение для рецептов?
Конструктор приложений Appy Pie – это облачная платформа для разработки приложений “сделай сам”. Вы можете создать приложение для рецептов всего за несколько шагов и использовать функции drag-and-drop:
- Добавьте подробные пошаговые инструкции к рецептам
- Делитесь рецептами публично или приватно
- Общайтесь с пользователями вашего приложения о вашем последнем рецепте
- Делитесь сезонными рецептами на Хэллоуин, День благодарения и Рождество
- Отправка Push-уведомлений, текстовых сообщений и электронных писем
- Будет доступно для
iOS
и
Android
пользователей
Создайте приложение для рецептов самостоятельно и поделитесь своими аппетитными рецептами со всем миром.
Войдите в программу Appy Pie’s Recipe App Maker прямо сейчас!
Апп-линч Рецепты Bon Appétit
Bon Appétit — книга рецептов для смартфона (App Store, Google Play). Помимо приложения, у компании есть популярная группа ВКонтакте и канал на YouTube. Фото-рецепты выкуплены редакцией у блогеров, видео-рецепты — редакционные. Приложение занимает второе место в бесплатной категории App Store «Еда и напитки», монетизируется через встроенные покупки наборов рецептов и спец. проекты с брендами.
Исследование рынка
Проведем мини-исследование рынка приложений с рецептами.
Процесс приготовления может быть описан как видео (CookBook), текст (Афиша.Еда, Jamie Oliver) или фото каждого шага с пояснениями (7 шагов, Bon Appétit).
Мини-опрос в Фейсбуке и тестирование на кухне показало, что видео-рецепты неудобны. В Bon Appétit есть и видео рецепты, и фото-каждого-шага рецепты. Первое улучшение приложения — убираем видео рецепты.
Рецепты в приложении составляют шеф повар (Jamie Oliver, 7 шагов), редакция (Bon Appétit) или пользователи (Афиша-еда). В случае с редакцией, мы получаем немного рецептов, но они проверены, и по качеству находятся на одном уровне. При добавлении пользователями — много разных рецептов, иногда противоречащих друг другу и не факт, что удачных.
Соревноваться с божественной Едой от Афиши бесполезно, поэтому направление Bon Appétit, редакционная подборка рецептов — верное.
Дизайн и лишние функции
С переделыванием дизайна я был бы осторожен, возможно, то, что есть сейчас и привлекает целевую аудиторию. Тестируйте и смотрите отзывы.
Приложение нарисовано в духе реализма, выбранные метафоры неудачны. Категории висят как фотографии на сушке, карточка с шагом вяглядит как чек, скатерть на заднем фоне затрудняет чтение названия рецепта. Рекомендую убрать все эти украшения и отдать контенту первостепенное место. Увеличьте фотографии, сделайте списки более информативными. Посмотрите, как Apple создавала Почту для iOS7 (c 12 минуты, требуется аккаунт iOS-разработчика).
И переименуйте in-app в названиях наборов рецептов.
Не уверен, нужен ли таймер в приложении. Несколькими таймерами и простой установкой он удобнее системного, но его сигнал проще пропустить. Посмотрите статистику и уберите, если никто не пользуется.
Уберите отдельный таб заметок и общие заметки. Кнопку заметок на экране рецепта стоит сделать меньше. Вместо таба заметок добавьте избранное.
Поиск по времени и ингредиента это хорошо, но сделан слишком сложно. Упростите. Например, замените ползунок на кнопки 30 минут, час, полтора, два, указав количество рецептов на каждой кнопке. Бесполезные подсказки ко времени и ингредиентам — убрать.
Собираем лучшее
AppTweak выдает двести приложений с рецептами. Приложений настолько много, что все хорошее уже изобретено, достаточно выбрать удачные моменты и применить к Bon Appétit.
1. Пересчет порций из Афиши-еды. Выбираем от 2 до 12 порций и ингредиенты автоматически пересчитываются.
2. Количество ингредиентов под каждым шагом как у Jamie Oliver. Почему-то во всех рецептах пишут «Смешайте муку с яйцами», Jamie Oliver под описанием шага напоминает, что муки надо стакан, а яйца— три. Я бы пошел еще дальше и писал «Смешайте стакан муки и три яйца».
3. Скачивание всех рецептов в память, как у 7 шагов. Несколько пользователей просили об этом в отзывах.
4. В портретной ориентации смартфона показывать все шаги без разбиения на карточки. В альбомной разбивать. Так сделано у Jamie Oliver и 7 шагов. Удобно и тем, кому нужны шаги для пошаговой готовки, и тем, кто хочет прочитать все целиком.
5. Разделение списка продуктов по отделам, как у Афиши.Еды. Я попробовал в супермаркете — удобно.
6. Энергетическая ценность, как у 7 шагов. Люди помешаны на диетах и здоровом питании.
7. Список необходимого оборудования, как у Jamie Oliver.
Монетизация
По ходу изучения приложений с рецептами придумал две удобных функции и заодно монетизации.
Кнопка в списке покупок «Заказать с доставкой за 1 300 руб.», которая направляет список, например, в Delivery Club. Непонятно, как решить вопрос с предпрочтениями пользователей по маркам продуктов, но, думаю, можно что-нибудь придумать.
Кнопка «Купить за 2 600 руб», если рецепт требует нестандартного прибора: вафельницу, йогуртницу или мультиварку. Заказ отправлять, например, в Юлмарт.
Удачные моменты
Bon Appétit позволяет бесплатно скачать платную книгу рецептов, если рассказать о приложении в соц. сети. Идея, на мой взгляд, превосходная. Реализацию стоит улучшить.
За каждую книгу можно рассказывать о приложении в одной и той же сети. Получаем ленту одинаковых публикаций. Я бы запретил использовать соц. сеть больше одного раза.
Сам пост странный. Предложение «рассказать друзьям» совершенно не корректно, пользователь должен не делиться постом, а скачать приложение. Я рекомендую сделать аппетитную фотографию одного из рецептов, первые пару шагов готовки и подпись «Скачай приложение Bon Appétit в App Store или Google Play и узнай, как приготовить этот вкуснейший круассан с шоколадом».
Пришлите свое приложение на applynch@touchin.ru