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

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

Так появился 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 и подключить его в проект собственного приложения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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