Мобильное iOS-приложение для биржи блогеров
Задача
ВloggerMall — это первая украинская платформа, нацеленная на то, чтобы рекламодатели и Instagram-блогеры легко находили друг друга, налаживали эффективные и безопасные коллаборации.
После удачного опыта сотрудничества по разработке сайта компания BloggerMall снова обратилась к нам, только на этот раз за суперсилой iOS-разработчика, готового создать удобное современное приложение для пользователей яблочных гаджетов.
Читайте также:
Биржа рекламы у Instagram-блогеров
Желание нашего клиента — сделать сервис для постоянных клиентов ещё удобней и приятней — превратилось в задачу: разработать стильное и понятное приложение, которое дублирует возможности сайта и ничуть не уступает ему по своим функциям:
- регистрация и авторизация пользователей;
- профиль блогера с описанием и детальной аналитикой целевой аудитории;
- рекламный кабинет блогера;
- платёжная система через сервис UAPAY;
- мессенджер.
Этим мы, собственно, и занялись. На дизайнерский отдел упала задача спроектировать макеты для мобильного приложения. А для нашего iOS-разработчика, умудренного 5-летним опытом, одна масштабная задача «Разработать приложение» тут же распалась на несколько конкретных шагов:
- Создать pixel perfect на основе дизайнерских макетов;
- Разработать экраны приложения, навигацию между ними, переходы и анимации;
- Построить функциональную часть на основе обращений API к серверной части;
- Создать компоненты приложения и настроить библиотеку, которая будет соответствовать функциональности и дизайну макетов.
Подробнее о том, как мы реализовали проект, читайте дальше в нашем кейсе.
Технологические решения
При разработке сложных приложений для iPhone и iPad наши специалисты используют Swift — родной язык мобильной платформы iOS: надёжный, интуитивно понятный и быстрый не только в разработке, но и в работе на устройствах Apple.
Воплощение дизайна и анимаций
На момент, когда BloggerMall зашли к нам с новым проектом, компания уже имела успешный сайт производства Webnauts с готовым логотипом, яркими фирменными цветами и готовым UI kit. Ранее наши дизайнеры брали участие в разработке дизайна сайта. Теперь же встала задача спроектировать дизайн мобильного приложения под устройства iOS.
Несмотря на то, что наш первый проект предполагал адаптивный дизайн платформы для любых типов устройств, дизайн мобильного приложения имеет свои особенности. Если мобильная версия сайта выглядит практически так же, как и сайт в обычном браузере, то дизайн приложения должен отвечать требованиям производителя ОС к интерфейсу пользователя (в нашем случае — требованиям iOS). Так мобильное приложение для яблочных устройств будет выглядеть «родным», а благодаря интеграции с платформой — работать быстрее.
На основе макетов, разработанных в графической программе Figma, наш разработчик реализовал и «оживил» пиксельный дизайн приложения при помощи таких технологий:
- Modal ViewController — контроллер модального представления нижнего листа. Это полезная функция с отличным дизайном UI/UX, которая помогает представить быстрый предварительный просмотр с минимальным содержанием. Контроллер модального представления позволяет пользователю легко расширить содержимое, перетащив представление вверх или вниз, или же закрыть контроллер, коснувшись затемненного фона. Эта функция реализована во многих известных приложениях, таких как Facebook, Instagram. А теперь и в приложении BloggerMall.
- UINavigationController — специализированный контроллер представлений, который управляет навигацией по иерархическому контенту. Представляет собой навигационный интерфейс, позволяющий эффективно визуализировать данные и облегчать пользователю навигацию по данному контенту. Проще говоря, UINavigationController помогает пользователю приложения запомнить, где он в данный момент (название панели навигации) и как он может вернуться на предыдущий экран (встроенная кнопка Назад).
Анимация
В дизайне мобильных приложений анимация играет важную роль. Она призвана не только выделить IT-продукт среди конкурентов, но и повысить удобство использования приложения среди пользователей. Анимация «реагирует» на действия юзера и помогает ему быстро освоиться, делая процесс динамичным и интересным.
В приложении BloggerMall мы анимировали такие элементы интерфейса, как гамбургер-меню, кнопки, поля регистрации, radio buttons и нижнюю навигацию (таб-бар) с 3-мя основными разделами приложения (Моя реклама, Сообщения, Профиль).
Анимация визуальных элементов реализована при помощи следующих технологий:
- Core Animation — программа, разработанная компанией Apple для рендеринга, компоновки и анимации изображений. Она позволила нам обеспечить высокую частоту кадров и плавную анимацию, не нагружая ЦП и не замедляя работу приложения.
- Lottie — это библиотека iOS, Android и React Native, которая визуализирует анимацию After Effects в реальном времени. Использовать анимацию с ней так же легко, как и статические изображения.
Функциональная часть iOS-приложения
Регистрация и авторизация пользователей
Регистрация и вход в приложение возможны как при помощи ввода электронной почты и пароля, так и авторизации через Facebook и Google.
Процесс регистрации блогера включает в себя 6 шагов, в ходе которых необходимо указать личные данные и пароль, информацию и тематику блога, цены и способ оплаты рекламных услуг.
При введении неверного пароля система предлагает привычный способ его восстановления через электронную почту:
Регистрация рекламодателя проще и происходит всего в 2 шага. Для этого необходимо заполнить анкету и принять пользовательское соглашение.
Профиль блогера
Содержит в себе несколько разделов: Личные данные, Мой аккаунт инстаграма, Цены на мои услуги, Моя карта для выплат.
Рекламный кабинет блогера
Содержит всю информацию о рекламном сотрудничестве и включает в себя 3 основных раздела: Вся реклама, В работе и Ожидает. Позволяет контролировать не только статус, сроки и оплату рекламных заявок, но и быстро перейти в чат с рекламодателем для согласования условий и деталей сделки.
Платёжная система
Принцип оплаты рекламных услуг на бирже таков: после обоюдного подтверждения заказа рекламодатель оплачивает услугу с ранее привязанной банковской карты, и средства «замораживаются» на платформе (90% — оплата блогеру и 10% — комиссия биржи). После того, как рекламодатель подтвердил успешное выполнение заказа, блогер получает свои деньги на свою банковскую карту. В случае невыполнения заказа деньги возвращаются на счёт рекламодателя в полном объёме. Подобно сайту, все мобильные платежи осуществляются при помощи Национального платежного сервиса UAPAY.
Весь вышеперечисленный функционал приложения BloggerMall реализован на основе обращений API к серверной части при помощи технологий:
- UI Kit — структурированная библиотека нативных (родных) компонентов с учетом гайдлайнов Apple. Благодаря элементам интерфейса, объединённым в категории (кнопки, попапы, бары навигации, иконки) и реализованным в соответствии со спецификацией яблочного дизайна (типографика, стиль, цвета), UI Kit позволяет значительно ускорить создание приложения под iPhone и iPad.
- Alamofire — это сетевая HTTP-библиотека на основе языка Swift для iOS и Mac OS Х. Представляет собой элегантный интерфейс поверх сетевого стека Apple Foundation, упрощающий общие сетевые задачи. Её функции включают цепные методы запроса и ответа, кодирования и декодирования ответов, а также аутентификацию данных.
Для получения и отправки данных между пользователями приложения BloggerMall использовалась технология Socket.IO. Это JavaScript-библиотека для обмена данными в реальном времени. Она обеспечивает двунаправленную связь между клиентом и сервером на основе событий с минимальной задержкой передачи данных.
Разработка мессенджера для iOS-приложения
Чат между пользователями приложения BloggerMall был реализован с помощью технологии MessageKit — это Swift-библиотека с открытым исходным кодом для отправки и рендеринга сообщений между пользователями iOS-устройств.
Пожалуй, реализация чата стала самой хитрой задачей проекта. Серверная часть мессенджера ранее уже была написана для сайта BloggerMall, и её следовало «перенести» на платформу iOS, чтобы принцип работы чата был одинаков и на сайта, и в приложении.
Но, как известно, легче (пусть и дольше) писать программы с чистого листа, чем распутывать чужой код. А использование сторонних библиотек не всегда можно чётко настроить под запрос клиента.
Здесь и помогла технология MessageKit, хоть и не сразу, так как наш разработчик столкнулся с ней впервые. Сначала было не совсем понятно, как отправлять, получать и сравнивать данные: не только текст, но также фото- и видеофайлы больших размеров. Некоторые трудности были и с дизайном, а именно с настройкой библиотеки и отображением такого интерфейса, который запрашивал клиент. Однако, постепенно освоив технологию и разобравшись, как работает бекенд с фронтендом на сайте, наш iOS-девелопер приступил к реализации мессенджера. В результате мы получили и удобный чат, и ещё более прокачанного специалиста.
Итоги
На создание iOS-приложения ушло 2 месяца, в результате чего BloggerMall получила не только ещё один источник дохода, но и максимально продуманный, понятный и надёжный инструмент для эффективного сотрудничества своих клиентов: блогеров и рекламодателей. Аналитика, рекламный кабинет, история транзакций и внутренний чат — теперь всё под рукой для комфортного и безопасного сотрудничества. Больше довольных клиентов — это больше успешных сделок, а значит и рост доходов компании.
В ходе этого непростого проекта мы не только успешно реализовали продукт, но и пополнили свой технологический стек. Мы любим сложности, ведь именно они позволяют нам развиваться и делать по-настоящему крутые вещи.
Comments are closed.
Комментарии