White Label App — шаблон мобильного приложения для туристической сферы

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

Дополнительно требовалось предусмотреть возможность встраивать в существующие приложения партнёра отдельные модули поиска авиабилетов или отелей через White Label SDK.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

Мы реализовали приложение в двух вариантах.

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

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

Рассказываем как шла работа над проектом.

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

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

— приложение, которое будет использовано, как шаблон;

— конфигуратор для простой и гибкой настройки стилистики приложения;

— функции поиска авиабилетов и бронирования отелей с удобной фильтрацией;

— возможность использования отдельных функций через SDK.

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

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

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

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

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

2. Проектирование API

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

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

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

3. Дизайн интерфейса, подходящий любому тревел-приложению

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

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

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

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

4. Спроектировали конфигуратор

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

Так что сам конфигуратор стал ещё одним уникальным решением в разработке.

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

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

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

3. Результаты сотрудничества

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

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

Для партнёров White Label App — это возможность создать собственное мобильное приложение, даже без навыков разработки, которое можно настроить под любой стиль и опубликовать в Google Play или App Store с полной адаптацией под бренд. И начать зарабатывать на агентской комиссии.

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

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

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

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

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

— Подробный план того, как собрать и кастомизировать приложение без знаний в разработке и опубликовать его в Google Play или App Store. Мы написали детальную инструкцию как собрать приложение буквально по шагам: от скачивания архива с проектом приложения, настройки рабочей среды, изменения стилистики и дизайна до финальной сборки, загрузки в магазин приложений и создания корректного описания на странице магазина приложений.

4. Заключение

Уникальность проекта заключается в создании гибкой платформы для партнёров Travelpayouts, которая позволяет легко настроить мобильное приложение под свой бренд без знаний программирования. С помощью конфигуратора партнёры могут адаптировать приложение под стиль компании и публиковать его в Google Play и App Store. Также предусмотрена возможность интеграции отдельных функций (поиск авиабилетов, бронирование отелей) в существующие приложения через White Label SDK. Решение поддерживает адаптацию под разные языки и форматы, включая RTL, что расширяет международную аудиторию.

Игорь

разработчик и партнер, Travelpayouts

Во время учёбы и поиска идей я решил реализовать проект дневника путешествий — приложения для хранения впечатлений от поездок. На этапе разработки я случайно открыл для себя шаблоны White Label App от Travelpayouts. Они оказались идеальным решением, учитывая мои ограниченные навыки программирования на тот момент. Основной плюс White Label App — это доступность. Не требуется глубокая подготовка, достаточно компьютера и желания разбираться. Мне понравились возможности кастомизации: смена цветовой палитры, добавление веб-страниц, замена иконок. Эти опции позволили сделать приложение не похожим на другие. Например, я добавил экран «Другое» на основе специальной страницы на своем сайте с промокодами и дополнительными кнопками для самостоятельного планирования путешествий. Для новичков это отличный способ быстро собрать свое первое приложение и начать зарабатывать на туризме.