О нас RU

Кукорама для Android и iOS

http://cookorama.net/

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

Для Кукорамы мы сделали приложения под платформы 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.

Наша миссия — упрощать жизнь людей, создавая полезное и удобное программное обеспечение
Свяжитесь с нами, и мы поможем решить ваши задачи.

Над проектом работали:

  • Степан Танасийчук Степан Танасийчук

    CEO и основатель

  • Олег Уласюк Олег Уласюк

    Дизайнер

  • Макс Нестерук Макс Нестерук

    Дизайнер

  • Александр Зозуля Александр Зозуля

    Android-разработчик

  • Антон Бевза Антон Бевза

    Android-разработчик

  • Костя Колесник Костя Колесник

    iOS-разработчик

  • Сергей Монастырский Сергей Монастырский

    iOS-разработчик