Узнайте как изменить внешний вид и наполнение вашего приложения.
White Label App позволяет настроить внешний вид приложения так, чтобы оно выглядело уникально и привлекало пользователей. Это важно, потому что первое впечатление от дизайна влияет на интерес пользователей. Уникальный стиль подчеркивает особенности вашего бренда и способствует долгосрочным отношениям с аудиторией, а также повышает шансы на прохождение проверки App Store.
Перед настройкой приложения обязательно необходимо выполнить все шаги из статьи Подготовка к работе с файлом конфигурации и доступ к данным.
Обратите внимание! Большинство изменений осуществляются в файле сonfiguration.json. После внесения изменений обязательно сохраните изменения в файле, выполните в терминале команду fastlane setup и пересоберите и запустите сборку.
Название приложения
Вы можете задать название приложения, которое будет отображаться под его иконкой. Для этого:
1. Откройте файл configuration.json и найдите следующий код:
… |
2. В поле base укажите основной язык названия. Этот язык будет использоваться, если выбранного на девайсе пользователя языка не будет в вашем приложении. Например, у пользователя в настройках девайса выбран тайский язык, но отдельного названия на нём у вас нет, тогда для пользователя отобразится название на основном языке.
3. Вы можете указать название приложения на нескольких языках, для этого укажите код языка и название на указанном языке.
Например, в приложении нужны английский, испанский и французский язык, а в качестве основного выбран испанский. Тогда код будет выглядеть следующим образом:
… |
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Выбор и настройка разделов в таббаре
В приложении может быть от 2 до 5 разделов в таббаре (элемент интерфейса, который показывает какие разделы существуют в приложении, и в каком из них находится пользователь на данный момент). Например:
Изменение разделов Билеты/Отели
Разделы Билеты и Отели можно либо убрать, либо отобразить, для этого:
1. Откройте файл configuration.json.
2. Для того чтобы добавить или убрать разделы с поиском авиабилетов и отелей, найдите в файле следующий код:
… |
3. Чтобы вкладка не отображалась, достаточно удалить ненужную строку. Например, убираем авиабилеты:
… |
4. Останутся только разделы «Отели» и «Информация»:
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Настройка раздела Другое
Другое — раздел, при переходе в который будет открываться указанная для него ссылка в формате WebView (веб-страница в мобильном приложении). Например, в него можно добавить ссылку на поиск машин для аренды, на покупку страховок или на любой другой сайт.
Для разделов Другое вы можете использовать партнёрские ссылки из личного кабинета Travelpayouts. Тогда, вы будете получать вознаграждения за покупки, совершенные после перехода по этим ссылкам. Подробней об этом читайте в статье Как добавить партнёрские ссылки на другие бренды в White Label App.
В приложении можно добавить максимум два таких раздела. Для этого:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
… |
3. В параметре title укажите название раздела. Укажите название на нескольких языках, если это необходимо (см. локализация в файле конфигурации).
4. В параметре url укажите ссылку, которая будет открываться, когда пользователь будет переходить в этот раздел. Если в приложении необходимо поддерживать несколько разных языков, то нужно добавить ссылки для разных локализаций.
5. Сделайте аналогичные изменения для второго раздела «Другое». Если вы не планируете использовать этот раздел, просто удалите код из файла.
6. Для разделов «Другое» также можно добавить свои иконки. Для этого перейдите в папку white-label-app-ios-main/Resources/images и:
- Для первого раздела «Другое» – в папке ic_other_1.imageset замените дефолтную иконку ic_other_1.pdf
- Для второго раздела «Другое» – в папке ic_other_2.imageset замените дефолтную иконку ic_other_2.pdf
Формат иконок: pdf
Обратите внимание! Названия ic_other_1.pdf и ic_other_2.pdf нужно обязательно оставить, иначе приложение не сможет найти добавленные иконки.
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Настройка раздела Информация
Информация – в этом разделе находятся избранное, региональные настройки, настройка отображения цен, ссылка на пользовательское соглашение и т.п., при этом:
- Подразделы Избранное, О приложении, Оценить приложение и Поделиться приложением являются опциональными и их можно убирать/добавлять.
- Подразделы Региональные настройки, Отображение цен и Конфиденциальность убрать нельзя.
Раздел Информация нельзя удалить, но вы можете внести изменения в подразделы внутри, для этого:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
… |
3. Чтобы подраздел не отображался, достаточно удалить нужную строку. Например, убираем Избранное и Оценить приложение:
… |
4. Чтобы добавить описание приложения для подраздела О приложении, найдите следующий код
… |
5. В поле description укажите описание приложения (локализованное для всех языков в приложении (см. локализация в файле конфигурации);
6. В поле developer добавьте название вашей компании (локализованное, при необходимости);
7. В поле partner_url добавьте ссылку, по которой пользователь сможет перейти на ваш сайт, социальную сеть и т.п.
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Настройка цветов и палитры
Все цвета в палитре в приложения генерируются автоматически на основе одного базового primary цвета. Для того, чтобы изменить цвет:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
... |
3. В поле base_color укажите HEX код базового цвета для светлой темы (вся палитра, включая цвета для тёмной темы, сгенерируется автоматически в соответствии с заданным цветом).
4. В поле palette укажите один из предлагаемых способов генерации палитры: hsv, lab или null
- hsv — базовый цвет останется таким, который вы указали (рекомендуется для ярких цветов);
- lab или null — контрастность базового цвета будет модифицироваться (рекомендуется выбирать, если базовый цвет сам по себе неконтрастный).
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Рекомендуется собрать сборку с вашим базовым цветом и разными способами генерации палитры для светлой и тёмной тем, чтобы посмотреть, в каком варианте ваше приложение будет смотреться лучше. Примеры разных цветов:
Настройки скруглённости элементов
Скруглённость применяется ко всем элементам на экране, включая кнопки, поля ввода, иконки и иллюстрации для 0-дат.
Для того, чтобы изменить настройки скруглённости:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
… |
3. В поле corners_type укажите нужный стиль:
sharp | |
default | |
round |
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Стиль иконок
У иконок в приложении можно изменить не только скруглённость, но и стиль. Для этого:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
… |
3. В поле icons_type укажите один из стилей иконок: filled, tint или line.
filled | ||
tint | ||
line |
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Google Maps
Для работы с картами в iOS приложении не требуется интеграция с Google Maps, поэтому нужно убрать из файла конфигурации configuration.json строку "google_maps_api_key": "токен"
Обратная связь и оценка приложения
Для того, чтобы у пользователя была возможность взаимодействовать с разделами Связаться с нами и Оценить приложение:
1. Откройте файл configuration.json.
2. Найдите в файле следующий код:
… |
3. В поле feedback_email укажите адрес электронной почты, на который будет отправлено письмо после клика по кнопке Связаться с нами.
4. В поле appstore_id подставьте id приложения, который присваивается приложению, когда оно создается в App Store Connect. Если не добавить id приложения, то при нажатии Оценить приложение, пользователь не сможет попасть в App Store и, соответственно, оставить отзыв.
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Важно! Если вы убрали данные разделы из приложения, то строки feedback_email: и appstore_id: нужно удалить из файла конфигурации.
Firebase
В приложении можно использовать сервисы Firebase (напр., для мониторинга аналитики). Для этого:
- Зарегистрируйтесь в Firebase в консоли;
- Создайте там проект и добавьте в него свое новое приложение для iOS (Setting up a Firebase project and registering apps);
- После добавления приложения в проект, перейдите в Firebase в раздел Project settings – General, найдите там Apple apps и скачайте оттуда файл google-services.json (для debug и release проектов будет 2 разных файла);
- Скачанные файлы переименуйте в GoogleService-Info-Debug.plist и GoogleService-Info-Release.plist соответственно.
- Перейдите в white-label-app-ios-main/Supporting Files и замените там файлы GoogleService-Info-Debug.plist и GoogleService-Info-Release.plist на те, которые были скачаны из Firebase.
Таблица с событиями аналитики в отдельном файле – White Label App – Firebase [RU].
Реклама Appodeal
Если в приложении не нужна реклама, то нужно полностью удалить блок advertising{} из файла конфигурации, со всеми значениями внутри него.
Реклама может выглядеть следующим образом:
Чтобы добавить рекламу в приложение:
- Зарегистрируйтесь в Appodeal.
- Откройте файл configuration.json.
- Найдите в файле следующий код:
…
"advertising": {
"appodeal_api_key": "",
"google_admob_app_id": "",
"placements": {
"air_ticket_placement_interstitial": "",
"air_ticket_placement_banner": "",
"hotels_placement_interstitial": "",
"hotels_placement_banner": ""
}
},
… - В поле appodeal_api_key вставьте ваш API ключ из аккаунта в Appodeal.
- В поле google_admob_app_id вставьте ваш ID из аккаунта AdMob, если он есть (см. Find your app IDs & ad unit IDs).
Если AdMob не подключен, то нужно полностью убрать из файла строку "google_admob_app_id": "" - В поле placements укажите места, в которых будет отображаться реклама:
-
- placement_interstitial – реклама в виде полноэкранного баннера, который появляется при запуске поиска билетов и/или отелей
- placement_banner – показывать рекламу в виде небольшого баннера над карточками с результатами поиска
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Подробнее про Appodeal Placements.
AppsFlyer
С помощью AppsFlyer Onelink в White Label App реализована возможность поделиться ссылкой на приложение. Дополнительно для работы со ссылками интегрировать SDK AppsFlyer не нужно.
Если вы хотите отслеживать атрибуцию и аналитику переходов и открытий приложения по ссылкам, зарегистрируйтесь в AppsFlyer и добавьте в файл конфигурации configuration.json ключ appsflyer_dev_key (см. Как получить ключ).
Если вы не планируете отслеживать аналитику, удалите параметр appsflyer_dev_key из файла.
… |
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Поделиться билетом
С экрана конкретного билета в разделе Билеты можно поделиться картинкой-скриншотом данного билета, а также ссылкой.
Чтобы реализовать этот функционал:
1. Откройте файл configuration.json и найдите следующий код:
… |
2. Внесите изменения в следующие параметры:
- sharing_link — укажите ссылку, которая будет отправлена вместе со скриншотом. Она может, например, перенаправлять пользователя на ваш сайт.
- handling_link — укажите ссылку, по которой будет открываться ваше приложение, если оно установлено, или ваш сайт, если оно не установлено. Для этого также нужно на ваш сайт добавить возможность открывать приложение по ссылке на ваш сайт (см. инструкцию Add the associated domain file to your website).
Если в вашем приложении нет раздела Билеты или вам не нужна данная функциональность, то блок constants{} можно удалить.
Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.
Иконка приложения
Для изменения иконки приложения:
1. Перейдите в white-label-app-ios-main/Resources/images/ic_application.appiconset.
ic_application.appiconset – это иконка приложения (по умолчанию используется дефолтная иконка):
2. Чтобы добавить свою иконку нужно заменить дефолтную иконку своей, при этом ОБЯЗАТЕЛЬНО нужно оставить название “ic_application.appiconset”, поскольку иначе приложение не сможет ее найти.
Иконка приложения должна быть размера 1024х1024, в формате .png
Также иконку можно заменить через Xcode:
Рекомендации по внешнему виду иконки см. в Технические требования к иконкам для App Store
Заголовки экранов поиска
Вы можете изменить заголовки форм для разделов Авиабилеты и/или Отели:
Заголовки можно указать на нескольких языках, если это необходимо. Для этого достаточно выбрать файл из папки с кодом нужного языка (см. пункт 1 ниже).
Важно. Если заголовок не будет помещаться полностью в одну строку, то текст будет переноситься по словам.
Заголовок формы поиска авиабилетов
1. Откройте файл white-label-app-ios-main/Resources/Strings/SDK/[двухбуквенный код языка].lproj/FlightsSearch.strings (в нем хранятся строки для экрана поиска авиабилетов)
2. Найдите параметр "title" = "Поиск недорогих авиабилетов" – это текст заголовка, который отображается на экране поиска авиабилетов.
// MARK: - Titles |
3. Замените дефолтный текст «Поиск недорогих авиабилетов» на свой новый заголовок.
Заголовок формы поиска отелей
1. Откройте файл white-label-app-ios-main/Resources/Strings/SDK/[двухбуквенный код языка].lproj/HotelsSearch.strings (в нём хранятся строки для экрана поиска отелей).
// MARK: - Titles |
2. Найдите параметр "title" = "Поиск интересных отелей"; – это текст заголовка, который отображается на экране поиска отелей.
3. Замените дефолтный текст «Поиск интересных отелей» на свой новый заголовок.
Подписи к полям ввода
Подпись к полю ввода — это текст-подсказка, который отображается в полях формы до того, как пользователь введёт какие-то данные:
Для Авиабилетов тексты по умолчанию “Откуда”, “Куда”, “Когда” и “Пассажиры и класс”
Для Отелей тексты по умолчанию “Город или отель”
Вы можете указать подписи к полям на нескольких языках, если это необходимо. Для этого достаточно выбрать файл из папки с кодом нужного языка (см. пункт 1 ниже).
Подписи полей формы поиска авиабилетов
1. Откройте файл white-label-app-ios-main/Resources/Strings/SDK/[двухбуквенный код языка].lproj/FlightsSearch.strings (в нём хранятся строки для экрана поиска авиабилетов)
// MARK: - Titles |
2. Найдите параметры "departure_airport_placeholder", "arrival_airport_placeholder", "dates_placeholder" и "passengers_placeholder" = тексты “Откуда”, “Куда”, “Когда” и “Пассажиры и класс” соответственно.
3. Замените дефолтные тексты-подсказки на свои.
Важно: не меняйте названия параметров "departure_airport_placeholder", "arrival_airport_placeholder", "dates_placeholder" и "passengers_placeholder", а только текст, который в них хранится, поскольку иначе приложение не сможет их найти.
Подписи полей формы поиска отелей
1. Откройте файл white-label-app-ios-main/Resources/Strings/SDK/[двухбуквенный код языка].lproj/HotelsSearch.strings (в нём хранятся строки для экрана поиска отелей)
// MARK: - Titles |
2. Найдите параметр "location_placeholder" = текст-подсказка "Город или отель"
3. Замените дефолтный текст на свой.
Важно: не меняйте названия параметра "location_placeholder", а только текст, который в нем хранится, поскольку иначе приложение не сможет их найти
Фон-картинка
Для разделов Авиабилеты и Отели по умолчанию фоном будет использоваться однотонная заливка с векторным рисунком, на основе цветов из сгенерированной палитры (см. Настройка цветов).
Вместо однотонной заливки можно добавить фоновую картинку. Такая картинка будет одинаковой для разделов Авиабилеты и Отели, например:
Приложение рассчитано на вертикальную ориентацию, поэтому, если загрузить горизонтальную картинку, то она растянется по вертикали и сожмётся по горизонтали по размерам экрана.
Для добавления своей картинки нужно добавить ее в white-label-app-ios-main/Resources/images/img_search_background
Всего поддерживаются 2 разных типа картинок: векторные и растровые:
Как добавить картинку:
- Векторная
- Перейдите в white-label-app-ios-main/Resources/images/img_search_background
- Слева в панели выберите “Scale: Individual and Single Scales”
- В приложении по умолчанию фон в виде двух векторных картинок – по одной для тёмной (Dark) и светлой темы (Any Appearance).
Замените их своими двумя картинками – также для тёмной и светлой темы.
Разрешение векторных картинок по умолчанию 390х844 – именно оно рекомендуется также для новых добавленных картинок.
- Растровая (напр. фотография)
- Перейдите в white-label-app-ios-main/Resources/images/img_search_background
- Слева в панели выберите “Scale: Individual and Single Scales
- В приложении по умолчанию фон в виде двух векторных картинок – по одной для тёмной (Dark) и светлой темы (Any Appearance).
Их нужно ОБЯЗАТЕЛЬНО удалить: выбрать картинку и нажать “Backspace”
- Можно добавить две картинки вместо удалённых, но тогда эти картинки могут не подойти ко всем размерам экранов девайсов, на которые будет установлено приложение.
Поэтому рекомендуется добавить 6 картинок – по 3 для каждой темы (подробнее про форматы изображений в iOS можно посмотреть Human Interface Guidelines, про разрешения существующих девайсов The Ultimate Guide To iPhone Resolutions).
Язык приложения (Локализация)
По умолчанию приложение поддерживает 26 языков. Все тексты в приложении переведены на них, они же будут по умолчанию предлагаться в настройках приложения на устройстве.
В приложении все используемые в нём переводы хранятся в: white-label-app-ios-main/Resources/Strings
Папки с переводами разбиты по языкам, каждая из которых внутри содержит переводы по основным модулям: билеты, отели, информация, общее.
Важно. При любом изменении переводов, не меняйте ключи (названия) строк, поскольку иначе они не обработаются и не отобразятся приложением.
Изменение строк в уже существующих языках:
- Перейдите в white-label-app-ios-main/Resources/Strings/SDK;
- Найдите папку с нужным языком;
- Измените необходимые строки;
- Выполните в командной строке fastlane setup.
Добавление нового языка:
- Создайте копию одной из папок в white-label-app-ios-mainn/Resources/Strings/SDK, напр. “en.lproj”;
- Копию назовите в формате: “[двухбуквенный код языка, стандарт ISO 639-1].lproj”;
- Переведите все строки во всех файлах в папке на нужный язык;
- Поверьте, что папка с переводами находится в white-label-app-ios-main/Resources/Strings/SDK;
- После добавления нового языка не забудьте добавить его в переводы в configuration.json;
- Выполните в командной строке fastlane setup.
Обратите внимание. При использовании Right-to-Left (RTL) локализаций приложение будет автоматически адаптироваться под них, и интерфейс “перевернётся” зеркально, в отличии от LTR (изменится направление иконок, порядок разделов и т.п.).
Добавление новых языков в файл конфигурации
Через файл конфигурации можно добавить переводы на разные языки для следующих названий:
- Название приложения;
- Названия разделов Другое;
- Описание приложения в разделе О приложении;
Для этого в файле конфигурации укажите:
- base – язык (локализация), перевод строки на который будет использоваться, если выбранного на девайсе языка нет в приложении.
- localized – перевод строки для нескольких языков, если это необходимо.
Языки указываются в формате двухбуквенного кода (стандарт ISO 639-1).
Экран загрузки (Splash Screen)
- AppCoordinator – отвечает за роутинг приложения на старте. В нем можно реализовать дополнительную логику онбординга и/или кастомного сплеш скрина. Находится в Sources/Presentation Layer/App в папке проекта.
- TabsCoordinator – отвечает за роутинг между табами Билеты, Отели и т.д. В него можно добавить свои кастомные табы. Находится в Sources/Presentation Layer/Tabs в папке проекта.