Есть задача?
Oops! Something went wrong while submitting the form.
Breathmethod — это приложение, которое обучаетпользователей правильно дышать. То, как мы дышим, влияет на весь организм, поэтому порой мы можем чувствовать себя уставшими, подавленными или раздраженными.
Каролина и Доминик — пара из Сингапура. Она занимается йогой и преподает дыхательные практики в онлайн и офлайн-режимах. Он топ-менеджер крупной компании, которого также интересуют воздействие дыхания на человека.
Изначально клиент пришел к нам за UI/UX дизайномприложения, но уже на старте мы поняли, что разработкутоже будем делать вместе. Договорились о создании MVP.У ребят не было ни гайдлайнов, ни четких рекомендацийпо цветовой палитре. Однако, нам удалось узнать, что имочень нравится сочетание сочной зелени, серого бетонаи светлого дерево — эдакий европейский конструктивизм.
Девиз Breathmethod — “Дыши правильно, живи легко”. Правильное дыхание помогает пользователям улучшить качество жизни
В приложении собрана большаяколлекция статей по теме дыханияи его воздействия на нашу жизнь
Каролина записывает авторскиеаудио-уроки по всевозможным техникам дыхания — их легко слушать на ходу
Приложение содержит огромноеколичество дыхательных практик,которые нацелены на улучшениекачества жизни пользователей
Целевая аудитория — серьезные, деловые люди,живущие в каменных джунглях, которые желаютвоссоединения с природой.
Одним из первых шагов стало изучениеконкурентов. Составили список крупных игроков,изучили их преимущества и недостатки. Сталопонятно, что не все приложения включают дыхательные упражнения, поэтому решилисфокусироваться на них.
Было решено, что центральной частью дизайнаинтерфейса станут фотографии. В самом начале заказчиком было строго определено: иллюстрации — это не для их аудитории. Чтобы уйти от серости, для оформления решили использовать фотографиис природным мотивом: вода, камни, растения.
Перед сном, чтобы настроиться на здоровый сон: помогает избавиться от ненужных мыслей и погрузиться в комфорт
В ситуациях, требующих решительных действий на трезвую голову: помогает сконцентрироваться на одной задаче
В моменты упадка сил, чтобы получить заряд сил и бодрости:помогает поднять боевой духи зарядиться энергией
Когда кажется, что всталне с той ноги, и всё валится из рук:помогает успокоить нервную системуи прийти к внутреннему спокойствию
Когда “накипело”, чтобы выпустить пар: помогает остудить пыли вернуть себе контроль над происходящим
В любое время, чтобы датьотдохнуть не только телу,но и сознанию: помогаетрасслабиться всего за пару минут
Также создаются ежедневные подборки — Daily. Кроме универсальных подборок приложение генерирует Daily плейлисты. Администратор заранее планирует определенные техники дыхания, которые будут появляться у пользователей в начале каждого дня.Все подборки нацелены на устранение тревожности, восстановление мышцы формирование настроя на день.
Режим Pendulum — практики дыхания, которые пользователь настраивает сам под себя.Во-первых, в приложении уже есть готовые сеттинги дыхания, которые дают пользователям возможность найти именно, что им нужно.Во-вторых, приложение позволяет настроить практику под себя: после завершения кастомизации можно сразу же приступить к практике.
У клиента уже была идея логотипа: нашей задачей стало доведение её до ума. Идея “пришла” к нам на словах – мы её осмыслили, переосмыслили и доработали. Учли тенденцию на упрощение и минимализм с применением базовых цветов и простых форм; и создали такой вот минималистичный логотип
Заказчик попросил передать дизайнеру вот такое сообщение: “Пожалуйста, скажите команде, что они отлично справляются. Мы уже близки к завершению дизайна”.
Breath method стал первым приложением, в которое мы добавили интеграцию с Apple ID.Дело в том, что рекомендации на добавление входа в систему через Apple ID компания выдвинула еще в октябре 2019-го года, но обязательным требованием они стали только в апреле 2020-го. Говоря проще,у создателей приложений было еще полгода на внедрение. Разработка Breath method пришлась на май 2020-го — выбора у нас не было, пришлось сходу реализовывать.
Для внедрения touch ID и face ID использовали простую в реализации библиотеку для ReactNative. Благодаря ей приложение самоопределяет, есть ли на смартфоне Face IDили Touch ID. В зависимости от результата, приложение действует по разным сценариям:если есть Face ID — предлагает включить вход через Face ID; если есть Touch ID — предлагает использовать его; а если нет ничего— предлагает использовать только код.
Для написания панели администрированияу React существует библиотека, которая таки называется — “React Admin”. Ее-то мыи использовали. С ней, правда, не все такоднозначно и просто. У “React Admin” оченьвысокий порог вхождения, а документацияне закрывает все узкие вопросы.
Что мы сделали: взяли лучшие частибиблиотеки, своими руками написали часть кодаи все это совместили. Все работает как часы. :)
т.е. дает возможность использовать
префетчинг и загружать страницу в кэш
т.е. позволяет индексировать страницу, что особенно важно для лендингов
т.е. ее можно соединить практически с любой CMS, благодаря чему контент можно редактировать в любом привычном редакторе — как, например, Gutenberg или WordPress.
Всем, кому нужен современный сайт с мгновенной загрузкой, поддержкой технологии PWA и офлайн-доступности, рекомендуем Gatsby!
Для интеграции постов надеялись использовать плагин Gatsby, который называется ‘gatsy-source-instagram’.Но когда сели за задачу, обнаружили, что он позволяет только получать посты.Получать — это мало, это не то.Нам была нужна именно интеграция:
чтобы отображались полные посты(с фотокарточкой и текстом), а лента всегда была актуальной. Достали посты, сделали таймлайн, реализовали слайдер. Полезли искать решение проблемы и… быстро нашли.
Лендинг из Github мы добавили в Netlify. Подключили его к Gatsby.js, а Gatsby.js ко всем платформам с контентом — включая, например, Contentful и инстаграм. Соль была в том, что у инстаграма нет веб хуков.
Мы решили пойти в обход и прикрутили к Netlify сервис Zapier, который позволяет автоматизировать буквально все. Теперь билды формируются “вручную” – самим Netlify каждый день в определенное время создается новый билд. Таким образом, мы решили проблему с обновлением ленты инстаграма.
In order to integrate posts from Instagram we hoped to use one of the Gatsby’s plugin— ‘gatsby-source-instagram’. But once we tried using it, we realized it can only help to get posts. Getting posts was not enough.We wanted to integrate them: so the feed was always up-to-date, and users could see not only pictures but also texts.
Thus, keep abreast of events. Having managed to get the posts, all we had to handle was the timeline development ,the slide implementation, and the problem solution... It all turned out to be an easy task for us.
We linked the landing page deployed on Githubto Netlify. Then connected it to Gatsby.jsand Gatsby.js to all content managing platforms— from Contentful to Instagram. The problemis that Instagram doesn’t have wehbooks.
We decided to automate the build configurationprocess: used Zapier, an automation service thatlets you create automated actions for literallyeverything, so that Netlify generates a new buildat the scheduled time. This was how we resolvedthe problem.
