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

Иконка приложения

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

Для iOS мы вписали иконку в стандартную форму. Android позволяет использовать произвольную форму, поэтому мы повторили плашку логотипа, сделав ее квадратной. Колпак шеф-повара уже давно стал символом Кукорамы, потому мы использовали его и на иконке.

Визуальный стиль

В дизайне используются шрифты из семейства Helvetica Neue, которые соответствуют общему стилю приложения.

За основу мы взяли особый оттенок красного цвета и подобрали к нему оттенки коричневого и бежевого. Такая цветовая гамма является достаточно яркой, теплой и пробуждает аппетит.

Описание рецепта

Этот экран решает основную проблему пользователя. Рецепт представляет собой детальное описание каждого шага по приготовлению блюда с подробными фотографиями процесса. Все нужные ингредиенты отображаются в виде списка с указанием количества каждого ингредиента.

А на случай, если нужных продуктов в холодильнике не оказалось, пользователь может добавить ингредиенты в список покупок.

Список покупок

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

Если в списке покупок есть несколько рецептов 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.