Картографический сервис

март 2022 → фев 2024 (NDA)

Картографическое приложение: офлайн-карты, навигация, поиск, закладки, шеринг геопозиции, бронирование отелей и отдельная версия для Android Auto. В Google Play его скачали больше 50 млн раз.

Я разрабатывал Android-версию: фичи на Compose, UI Kit, интерфейс для Android Auto и мост к нативному ядру карты через JNI.

50 млн+ скачиваний в Google Play

↱

12:30

↓

12:30

Роль: Android-разработчик
Период: март 2022 → фев 2024 (NDA)
Компания: KODE
Платформы: Android, Android Auto

Что я делал

UI Kit
Дизайн-система приложения
- Кнопки (квадратные, круглые, тулбарные в вариантах Primary и Default), Chip, Switch и RadioButton в стиле приложения, BackButton, QuantitySelector.
- Списки с перетаскиванием на Compose: свои Reorderable-компоненты с жестами и анимацией отмены. Ими пользуются категории закладок и закреплённые категории поиска.
- Ещё скроллбар для LazyColumn, анимированный индикатор прогресса, слайдер оценки, маркер места на карте и аватар.
- Расширил цветовую палитру, перенёс экраны на компоненты UI Kit и убрал устаревшие кнопки.
- В компоненты сразу добавил testTag, чтобы их можно было проверять в UI-тестах.
−23+
Picture-in-Picture
Реализовал режим «картинка в картинке» в навигации
- Реализовал режим «картинка в картинке» в навигации: вынес его из фиче-тогглов в раздел настроек и добавил вариант «Всегда включён» рядом с режимом во время навигации.
- Собрал оверлей: под знаком манёвра показывается оставшееся расстояние, сам знак стоит в правом нижнем углу окна.
- Предусмотрел особенности режима: автоматический вход по кнопкам Home и Back, фиксированное соотношение сторон окна, защита от устройств, где PiP не поддерживается.
↱
↱300 м4,2 км
Home
12:30
Карточка отеля
Карточка отеля с бронированием
- Сделал модуль booking: в карточке места-отеля появилась кнопка бронирования. Она открывает bottom sheet и вводный экран, о брони приходит уведомление.
- Вокруг брони несколько баннеров: cashback, вход для неавторизованных и paywall, который ведёт к платёжным картам.
- Бронь оформляется в WebView. В ссылку подставляются id пользователя и актуальные даты. Если на телефоне есть приложение Booking, ядро присылает deeplink и открывается оно, иначе сайт. Без интернета карточка тоже показывается нормально.
- Попутно убрал устаревшие Sponsored и HotelInfo, переделал нижнюю панель экрана места и поставил кнопку брони на первое место.
- Отдельно делал фильтры поиска отелей: цена, звёзды, гости, рейтинг, тип места и даты.
★★★★★
cashback
12:30
Android Auto
Интерфейс для экрана в машине из готовых шаблонов
- Реализовал Android Auto, начиная с базового модуля: карта, поиск, маршруты, избранное, настройки, загрузка карт.
- Рисовать там можно только на шаблонах Car App Library (NavigationTemplate, ListTemplate, SearchTemplate, MessageTemplate), поэтому весь интерфейс собирается из готовых блоков.
- Для переходов между экранами написал свой CarNavController, у каждого экрана свой ViewModel. Модули разложены так же, как в мобильном приложении.
- Карты скачиваются прямо в Android Auto, а когда загрузка закончится, маршрут строится сам.
- Тема карты следует за темой машины.
- Готовил релиз в Google Play и обновлял версию библиотеки.
↱
12:48
›
›
›
NavigationTemplateListTemplateSearchTemplate
Шеринг геопозиции
Трансляция позиции по ссылке
- Сделал модуль location-sharing: пользователь выбирает, на сколько включить трансляцию, получает ссылку, видит таймер и может остановить.
- У того, кто делится позицией, есть dynamic link от Firebase. Получатель открывает её, и приложение показывает карточку этого человека: где он на карте и маршрут до него.
- Данные о человеке берутся из ядра карты через JNI: он появляется на карте и в данных карточки места.
- API-клиент сгенерирован из OpenAPI-спецификации sharing-location-service. Трансляции удаляются при выходе из аккаунта и при отписке.
- В разделе «Ещё» есть бейдж активной трансляции, в шапке аватар. Всё за фиче-тогглом и с аналитикой.
LIVE
12:30
↗
↗
12:30
Профиль и аватар
Аватар: галерея, камера, соцсети, PNG и GIF
- Фото можно взять с устройства (галерея или камера, через Activity Result API) или подтянуть из Google, Facebook и Discord.
- На сервер уходят бинарные данные через клиент из OpenAPI, а перед отправкой изображение ужимается под лимит размера.
- PNG и GIF показываются в Compose через Coil с GIF-декодером. Есть плейсхолдер, после загрузки аватар обновляется, об итоге сообщает snackbar.
- Аватар используется в «Ещё», «Профиле», «Друзьях» и в шаринге геопозиции.
- Кроме аватара делал остальной профиль: редактирование, центр уведомлений, Stories и «О приложении».
PNGGIF
✓
12:30
Оценка приложения
Через Google Play In-App Review
- Модуль app-rating: экран с анимированным слайдером, персонаж на нём меняется вместе с оценкой.
- Высокая оценка отправляет в Google Play In-App Review SDK, низкая открывает почту для обратной связи.
- Показать экран могут 16 разных событий: платёж в кошельке, скачивание карт, конец маршрута, действия с закладками, выбор места в поиске, загрузка трека и другие.
- Метки времени лежат в SQLDelight, по ним считаются правила повторного показа. Если метка некорректна, открывается страница приложения в Google Play.
- Всё за фиче-тогглом, каждый шаг пишется в аналитику.
★★★★★
12:30
Тесты
UI-тесты на Kaspresso и единая система test tag
- Проставил testTag во всех flow: кошелёк, логин, разрешения, место, добавление места, избранное, каталог, карта, нижняя панель, оверлеи, OSM, «Ещё».
- Чтобы теги не расползались, ввёл модификатор testTagPrefix, объект TestTags в UI Kit и общий withPrefix в core.ui.
- Сами тесты на Kaspresso с Compose-поддержкой: экраны в стиле page object (карта, место, поиск, избранное, слои), отдельные DI-компоненты для тестового окружения и фейки для локали, геолокации и выбора места.
- Покрыл добавление и удаление закладки, редактирование категории, поиск, слои, смену стиля карты (день, ночь, авто) и открытие карточки места.
- Отдельно возился с окружением: разрешение на уведомления, устройства с SDK выше 33, фиксированный номер для обхода captcha, обновление Kaspresso.
Kaspresso
✓open_place_details_screenmap.surface
✓add_and_delete_bookmark_in_selected_placeplaceDetails.bookmarkButton
✓edit_favorites_categoryfavorites.editCategory
✓select_map_style_modeslayers.mapStyle
✓search_placessearch.input
Нативное ядро
JNI-мост к C++ ядру карты
- Писал JNI-обёртки на C++ и Kotlin-интерфейсы к ним для слоёв карты (изолинии, метро, трафик, высота рельефа) и поиска отелей.
- Из ядра берутся расстояние и азимут, чтобы иконка точки маршрута поворачивалась в сторону объекта.
- Тем же путём приходят данные пользователя трансляции и данные карточки места: так человек появляется на карте, и до него можно построить маршрут.
- Добавил высоту над уровнем моря для обычных объектов и починил фильтр «тип места» для отелей.
- Чинил JNI-краш при подсветке полос движения и заменил jni::TScopedLocalRef на std::shared_ptr.
Kotlinexternal fun
JNI
C++map core
nativeGetDistanceAndAzimuthFromLatLon(…)
→ 312 m · 47°
↑
waypoint

Стек проекта

Языки

Kotlin
Java
C++ (JNI)

UI

Jetpack Compose
Compose Animation
UI Kit
Coil (GIF)
Lottie
Accompanist

Архитектура

MVI: ViewState · ViewIntents · ViewEvents
Clean Architecture: data · domain · ui · routing
Многомодульный Gradle
Coroutines / Flow
Remo
Way

DI

Dagger 2
Anvil

Данные и сеть

Ktor
kotlinx.serialization
OpenAPI Generator
SQLDelight
DataStore
Protobuf
Okio
Arrow Optics

Платформа и сервисы

Android Auto (Car App Library)
Picture-in-Picture
Google Play In-App Review
Google Play Billing
Firebase: Analytics, Messaging, Remote Config, Dynamic Links, Crashlytics
WorkManager

Тесты

Kaspresso
Compose UI Test
Espresso
Kotest
Mockito
Turbine

Инструменты

Detekt
LeakCanary
Timber

Что я делал

UI Kit

Picture-in-Picture

Карточка отеля

Android Auto

Шеринг геопозиции

Профиль и аватар

Оценка приложения

Тесты

Нативное ядро

Стек проекта

Языки

UI

Архитектура

DI

Данные и сеть

Платформа и сервисы

Тесты

Инструменты

Что я делал

UI Kit

Picture-in-Picture

Карточка отеля

Android Auto

Шеринг геопозиции

Профиль и аватар

Оценка приложения

Тесты

Нативное ядро

Стек проекта

Языки

UI

Архитектура

DI

Данные и сеть

Платформа и сервисы

Тесты

Инструменты