Мобільний 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 отримала не тільки ще одне джерело доходу, але й максимально продуманий, зрозумілий і надійний інструмент для ефективної співпраці своїх клієнтів: блогерів і рекламодавців. Аналітика, рекламний кабінет, історія транзакцій і внутрішній чат — тепер все під рукою для комфортного та безпечного співробітництва. Більше задоволених клієнтів — це більше успішних угод, а отже, й зростання доходів компанії.
У ході цього непростого проєкту ми не лише успішно реалізували продукт, а й поповнили свій технологічний стек. Ми любимо складнощі, адже саме вони дозволяють нам розвиватися та робити по-справжньому круті речі.
