Зарегистрируйте бизнес в Т-Банке и получите бонусы до 500 000 ₽

Зарегистрируйте бизнес в Т-Банке и получите бонусы до 500 000 ₽

Подробнее
РассылкиИдеи для бизнесаБизнес с нуляМаркетплейсыВопросы–ответыЖизнь вне работыСправочник
РассылкиИдеи для бизнесаБизнес с нуляМаркетплейсыВопросы–ответыЖизнь вне работыСправочник

Как мы разработали шаблон приложения, с которым любой может зарабатывать на туризме


Хотели бы вы иметь готовое приложение, которое можно адаптировать под свой бренд за пару кликов? Для туристической сферы мы его уже сделали!

Привет! Меня зовут Денис Германенко. Я — CEO студии мобильной разработки CleverPumpkin. С идеей создания такого продукта к нам пришла компания Travelpayouts, объединяющая инфлюенсеров и тревел-бренды в сфере туризма. Заказчик обратился к нам за реализацией приложения-шаблона, которое партнёры программы могут брать за основу и выпускать собственное приложение в магазин приложений самостоятельно.

Так появился White Label App — шаблон нативного приложения для поиска и бронирования авиабилетов и отелей по всему миру с обширными возможностями настройки интерфейса. Он исполнен в двух вариантах. White Label App — готовое приложение-шаблон. Для его выпуска партнёру не нужно будет привлекать разработчиков, так как он сможет собрать приложение по инструкции. И White Label SDK — набор функций приложения, любую из которых партнёр может перенести в собственное приложение по отдельности. Любой из форматов можно кастомизировать под разные стилистики брендов. А ещё это решение будет гораздо дешевле и быстрее разработки собственного приложения для тревел-бизнеса.

В статье делюсь подробностями производственного процесса и рассказываю в чём этот проект уникален.

С чем обратился заказчик

С Travelpayouts наша студия сотрудничает с 2021 года. Платформа Travelpayouts помогает партнёрам монетизировать свои туристические проекты с помощью партнёрских инструментов от 100+ тревел-брендов. Таким образом, участники программы могут подключить свои сайты, мобильные приложения и страницы в соцсетях к платформе и зарабатывать на партнёрской комиссии. С 2011 года компания Travelpayouts привлекла более 400 тысяч пользователей и выплатила более 3 миллиардов рублей вознаграждения.

Одним из таких инструментов Travelpayouts для монетизации трафика является приложение White Label App — шаблон для создания мобильного продукта с функциями поиска, покупки авиабилетов и бронирования отелей.

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

Наша задача состояла в том, чтобы разработать приложение с гибким и простым конструктором-конфигуратором, т.е. с широкими возможностями кастомизации под любой бренд, но чтобы для его настройки не требовалось знаний в разработке. Проще говоря, его должен суметь собрать любой человек по инструкции. Дополнительно требовалось предусмотреть возможность встраивать в существующие приложения партнёра отдельные функциональные модули — поиска авиабилетов или отелей через White Label SDK.

SDK — библиотека или набор инструментов для разработчиков, ориентированных на платформу. В нашем случае это работает так: эти инструменты дают встроить функциональность одного приложение в другое. Например, у вас есть приложение по прокату машин и вы хотите добавить экран с бронированием отелей. Для этого достаточно взять нужный модуль из библиотеки White Label SDK и подключить его в проект собственного приложения.

Команда CleverPumpkin
Команда CleverPumpkin

Команда за обсуждением проекта

Команда за обсуждением проекта

Начали с подготовки технического задания и изучения особенностей приложения

На этом моменте начинается этап проектирования, в котором нужно было предусмотреть:

  • новое приложение-шаблон;
  • конфигуратор для простой и гибкой настройки стилистики приложения;
  • функции поиска авиабилетов и бронирования отелей с удобной фильтрацией;
  • возможность использования отдельных функций через SDK.

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

Для такого большого проекта мы решили остановиться на формате нативного приложения, то есть писали каждую из его версий отдельно для платформ Android и iOS. Мы выбрали именно такой тип приложения потому, что он имеет бóльшую жизнеспособность в долгосрочной перспективе и обеспечивает лучший пользовательский опыт, а ещё у него выше производительность.

Кроме того, в нативных приложениях быстрее, стабильнее и надежнее работают разные типы конфигурации, передача кода и сборка приложений на стороне заказчика, а также формат RTL. UI в приложений White Label App соответствует гайдлайнам от Google и Apple, что помогает пользователю лучше взаимодействовать с приложением за счёт более привычного и удобного интерфейса.

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

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

Отдельно прописывали задачи конфигуратора: что конкретно и как может менять партнёр в своём приложении, чтобы полностью адаптировать его под себя.

Проанализировали и описали каждый сетевой запрос

Этап создания технического задания и в целом проектной документации стал одним из самых сложных и объёмных во всем цикле проекта. И вот почему.

В приложении есть функции для заказа авиабилетов и для бронирования отелей. Они разные по своей специфике, соответственно, и API для них разные.

Вместе с командой заказчика мы написали масштабную документацию к API обеих функций практически с нуля. Плотно общались с командой Travelpayouts и «на ходу» описывали некоторые способы взаимодействия между приложением и серверами с базами данных. Приходилось импровизировать — иногда сами придумывали и проектировали запросы пользователей. Также мы полностью воссоздали и описали всю бизнес-логику продукта.

41 страница технического задания и еще 120 страниц документации одного только API — таким был результат этапа проектирования.

Как мы создавали дизайн интерфейса, подходящий любому приложению

После того как определились с внутренней частью приложения мы приступили к проектированию интерфейса и продумыванию дизайна.

Чтобы партнёрам Travelpayouts было удобнее адаптировать приложение под себя, мы заложили в него три основных стиля UI-элементов интерфейса и несколько стилей иконок.

Для исключения ошибок в назначении цветов мы определили несколько постоянных оттенков для темной и светлой тем приложения. Партнер определяет основной оттенок приложения, а дополнительные цвета подбираются автоматически, исходя из гармоничности созданной палитры.

Мы также предусмотрели локализацию интерфейса под формат RTL для жителей стран Ближнего Востока, где пишут и читают справа налево — поэтому тексты, инпуты, сервисные подсказки, слайдеры, иконки, имеющие направление движения, адаптированы под этот формат.

Мы предусмотрели всю конфигурацию так, чтобы партнеры смогли самостоятельно разработать уникальный дизайн интерфейса, сделать его современным и стильным, при этом сохранив UI и гармоничность.

После того как мы завершили все основные работы, нужно было создать конфигуратор, который позволит партнеру быстро настроить приложение под себя и собрать сборку для публикации в магазине приложений.

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

Такой подход сильно сокращает время на адаптацию приложений под разные платформы, экономит ресурсы компаний-партнёров, а также при публикации их в магазин приложений позволяет охватить аудиторию потенциальных пользователей с обеих платформ. То есть, когда партнер вносит изменения в один документ, то настройки изменятся и на Android, и на iOS.

В White Label App добавили возможность вести подробную аналитику взаимодействия пользователя с приложением при подключении его к Firebase. Такая функция предоставляет возможность отслеживать насколько часто в приложении используется тот или иной блок, фильтр и какие разделы не используются совсем. И на основе собранной статистики трансформировать функции и настройки: убрать лишние фильтры, кнопки или же добавить те, что сконвертируют запрос клиента в покупку.

Предустановленные стили в шаблоне мобильного приложения
Предустановленные стили в шаблоне мобильного приложения

Разные стили интерфейса White Label App

Разные стили интерфейса White Label App
Подбор палитры интерфейса приложения
Подбор палитры интерфейса приложения

Как подбирается палитра элементов интерфейса на основе одного цвета

Как подбирается палитра элементов интерфейса на основе одного цвета
Экран приложения с RTL и LTR
Экран приложения с RTL и LTR

Различие интерфейсов для стран с направлением письма слева направо и справа налево

Различие интерфейсов для стран с направлением письма слева направо и справа налево

Что получилось в результате

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

Благодаря удобной системе адаптации и локализации интерфейса, в том числе под формат RTL, продукт дает возможность сотрудничать с партнерами из любых стран и расширить партнёрскую географию Travelpayouts.

Приложения White Label включают:

  • Шаблонный проект с интерфейсом основных экранов, функциями и фильтрами для поиска и покупки авиабилетов и бронирования отелей.
  • Встроенный конфигуратор с большим спектром возможностей адаптации дизайна.
  • Библиотеку SDK c аналогичными модулями, что у приложения. Любую из функций партнер может отдельно добавить в свое приложение, настроить стилистику. По итогу в его приложении появляются новые функции и ещё один способ монетизации.
  • Пошаговый план-инструкцию о том, как собрать и кастомизировать приложение без знаний в разработке и опубликовать его в Google Play или App Store.

На скрине показали, как выглядит приложение.

Пример туристического приложения на основе SDK
Пример туристического приложения на основе SDK

Пример партнёрского приложения на основе White Label SDK

Пример партнёрского приложения на основе White Label SDK
Бесплатный конструктор сайтов

Предложение от Т-Банка

Бесплатный конструктор сайтов

  • Создавайте сайты и интернет-магазины без разработчиков
  • Принимайте оплату от клиентов
  • Собирайте информацию о заказах в личном кабинете конструктора
Узнать больше

АО «ТБанк», лицензия №2673

Денис Германенко
Денис Германенко

Что выберете для своего бизнеса: разработку приложения с нуля или сделаете на базе шаблона?


Больше по теме

Новости

Добавьте почту

Мы отправим вам приглашение на мероприятие

Продолжая, вы принимаете политику конфиденциальности и условия передачи информации