Кукорама - кулінарна спільнота для тих, хто любить готувати і їсти смакоту. На сайті користувачі діляться рецептами, оцінюють і обговорюють їх, додають один одного в друзі та спілкуються на кулінарні теми. Відмінна риса спільноти - покрокові описи рецептів з фотографіями або відео кожного з етапів приготування страви.
Для Кукорами ми зробили додатки під платформи Android та iOS. Вони не дублюють сайт, а надають вибірку найякісніших, найсмачніших і найцікавіших рецептів, ретельно відібраних адміністраторами. База рецептів постійно поповнюється.
![Кулінарний додаток для смартфонів на базі Android та iOS і планшетів](https://storage.stfalcon.com/uploads/images/570de731b242d.webp)
Іконка додатка
Знайомство користувача з додатком починається з іконки, яку він бачить ще в магазині додатків. Тому вона має виділятися на тлі інших. Використання простих форм і яскравих кольорів допоможе користувачеві легко відшукати застосунок у магазині та пізніше на домашньому екрані смартфона. Якщо зробити іконку недостатньо помітною, застосунок загубиться серед інших і користувач забуде про нього.
Для iOS ми вписали іконку в стандартну форму. Android дозволяє використовувати довільну форму, тому ми повторили плашку логотипу, зробивши її квадратною. Ковпак шеф-кухаря вже давно став символом Кукорами, тому ми використали його і на іконці.
![Іконка мобільного застосунку Кукорама](https://storage.stfalcon.com/uploads/images/570de99076eb5.webp)
Візуальний стиль
![Шрифти в додатку Кукорама](https://storage.stfalcon.com/uploads/images/570de9accd97f.webp)
У дизайні використовуються шрифти з сімейства Helvetica Neue, які відповідають загальному стилю застосунку.
![Палітра кольорів у Кукорамі](https://storage.stfalcon.com/uploads/images/570de9f7ce881.webp)
За основу ми взяли особливий відтінок червоного кольору і підібрали до нього відтінки коричневого та бежевого. Така колірна гама є досить яскравою, теплою та пробуджує апетит.
Головний екран
Після запуску програми користувача зустрічає головний екран. На ньому розмістилися елементи навігації, а основний простір зайняли категорії рецептів. Окремим блоком ідуть нові рецепти з усіх категорій для тих, хто регулярно зазирає в застосунок у пошуку смаколиків.
![Головне вікно програми Кукорама](https://storage.stfalcon.com/uploads/images/570dea520710c.webp)
Основна навігація
Структуру мобільного застосунку продумано таким чином, щоб шлях до рецепта був максимально коротким. Адже зручність інтерфейсу відіграє важливу роль в утриманні користувачів. Додаток враховує переваги мобільних пристроїв перед ПК і пропонує створити список покупок з продуктами, потрібними для приготування однієї або декількох страв, в одне натискання.
![Структура кулінарного додатка Кукорама](https://storage.stfalcon.com/uploads/images/570dea8024a16.webp)
В iOS заведено використовувати навігацію за допомогою табів, а в Android популярне бічне меню. Дотримуючись офіційних керівництв виробників кожної з ОС і враховуючи призначені для користувача патерни, ми зробили меню, які відповідають вимогам кожної з платформ.
Навігація за рецептами здійснюється через категорії, що відображаються сіткою. Крім того, до рецепта можна перейти через пошук або обране, якщо користувач додав його туди раніше. Шукати можна з головного екрана або перейшовши в категорію, рецепт з якої потрібно знайти.
![Навігація в додатку Кукорама](https://storage.stfalcon.com/uploads/images/570deab1837f9.webp)
Опис рецепта
Цей екран вирішує основну проблему користувача. Рецепт являє собою детальний опис кожного кроку з приготування страви з докладними фотографіями процесу. Всі потрібні інгредієнти відображаються у вигляді списку із зазначенням кількості кожного інгредієнта.
А на випадок, якщо потрібних продуктів у холодильнику не виявилося, користувач може додати інгредієнти до списку покупок.
![Екрани в кулінарному додатку Кукорама](https://storage.stfalcon.com/uploads/images/570deae5f00aa.webp)
Список покупок
Цей екран покликаний полегшити процес купівлі продуктів, потрібних для приготування страв. Коли інгредієнти додаються до списку покупок, застосунок завбачливо додає рецепт у вибране, щоб користувачеві потім було простіше знайти його. Список покупок групується за рецептами і товарами. Кількість товарів автоматично визначається за кількістю порцій.
Якщо в списку покупок є кілька рецептів з однаковими інгредієнтами, він групується за товарами і користувач бачить, скільки товару йому знадобиться. Куплені продукти відзначаються галочкою. Список можна надіслати SMS або поштою.
![Список покупок в додатку Кукорама](https://storage.stfalcon.com/uploads/images/570deb1df08fc.webp)
Більший екран - більше можливостей
Незабаром після запуску мобільного застосунку ми вирішили адаптувати дизайн під планшети. Зміни торкнулися списку категорій і рецептів, але найбільше змінився екран окремого рецепта. Нові рецепти з'являються у спливаючому блоці прямо на головному екрані. Завдяки більшій діагоналі пристроїв опис і список інгредієнтів, які раніше перебували в різних табах, тепер представлені на одному екрані. Користувач може читати опис рецепта і одночасно переглядати список інгредієнтів.
Для планшетів на базі Android діагоналлю від 7 до 12 дюймів ми реалізували кілька варіантів розташування елементів залежно від розміру екрана.
![Додаток Кукорама для планшетів](https://storage.stfalcon.com/uploads/images/570deb575364d.webp)
Особливості програмування додатків
Додаток під 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 і засновник
- Oleg
Дизайнер
- Maksym
Дизайнер
- Олександр
Android розробник
- Антон
Android розробник
- Konstantin Kolesnik
iOS розробник
- Сергій
iOS розробник