Hector: Приложение для iOS и Android со сборкой iOS в облаке

Hector — сервис личной охраны и машин с водителем в Европе и ОАЭ. Клиент заказывает охрану или машину, оплачивает заказ, следит за командой на карте, а в опасной ситуации нажимает SOS.

У агентов охраны свой кабинет: дежурство, назначенные заказы и маршрут, отметка о прибытии, SOS-тревоги клиентов.

Приложения не было: это новый продукт по ТЗ заказчика, разработка с нуля с июня 2026.

Заказчику нужно, чтобы всё работало на iOS и Android. Команда работает удалённо из разных городов, каждый на своём рабочем компьютере, а iPhone и Mac не входят в основной набор устройств разработчика. Поэтому сборку и проверку iOS нужно было организовать так, чтобы они не зависели от устройств на руках. Вдобавок приложение работает с API устройства, например реагирует на двойной стук по задней крышке iPhone.

Стек выбирали по сильным сторонам команды. Фронтенд-разработчики уверенно работают с Vue, и я сам хорошо знаю его экосистему. Поэтому команда с первого дня писала продукт, а не осваивала новый инструмент: это сократило путь до демо и снизило риск ошибок. У связки Vue и Capacitor есть и другие преимущества: один код для iOS и Android, интерфейс на обычном CSS, на котором сложный дизайн Hector с градиентами, стеклом и прозрачностями делается точно по макету, и доступ к возможностям телефона через плагины: биометрии, защищённому хранилищу, системным кнопкам. React Native и Flutter тоже рассматривали, но они дали бы меньше свободы в вёрстке и потребовали бы времени на освоение.

• APPVue 3 SPA

  В оболочке Capacitor на Android и iOS. Pinia хранит заказ, конфигуратор, назначенные заказы и сигналы.

• NATIVEНативные плагины

  Биометрия, secure storage для PIN, клавиатура, системная кнопка «Назад», safe area под вырезы iPhone.

• APIREST бэкенда

  Свой HTTP-клиент с интерцепторами. В демо API подменяет мок-сервер на miragejs, который повторяет контракт.

  • auth
  • configurator
  • orders
• MAPSКарты

  OpenStreetMap: Leaflet для карты и live-трекинга, Photon и Nominatim для поиска адресов, OSRM для маршрута.

Весь текст идёт через vue-i18n, локаль берётся с устройства, поэтому новый язык добавляется файлом. Мок-сервер повторяет контракт API, и фронтенд с демо не ждут бэкенд.

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

Приложение ловит сигнал через URL-схему, в том числе при холодном старте. Пока это прототип, в демо-сборке он скрыт.

Вход в приложение защищён как в банковских приложениях: PIN-кодом, Face ID или отпечатком пальца. PIN хранится в защищённой части телефона, куда нет доступа другим приложениям. Если сессия истекла, приложение само возвращает на экран входа, и посторонний не сможет продолжить работу в чужом аккаунте. Клиенты и агенты охраны видят только свои разделы.

Vitest и Vue Test Utils: 177 файлов, около 1700 тест-кейсов рядом с кодом, включая сервисы сессии, PIN, safe area и клавиатуры. Storybook с проверкой доступности. E2E на Playwright пишет другой разработчик по сценариям демо: вход, заказ от конфигуратора до завершения, SOS, профиль, кабинет агента.

1. pre-push тесты и линт изменённых файлов
2. Codemagic сборка iOS в облаке
3. TestFlight приложение на iPhone

Pre-push с тестами и линтом и сборку iOS в Codemagic настроил я. Android собирается подписанным bundle из Android Studio.

Работаем недельными спринтами с демо в конце каждого. Задачи в Jira, ветка на задачу, PR с ревью.

Для заказчика такой процесс означает предсказуемость. Каждую неделю он видит рабочую версию на демо и может поправить курс раньше, чем ошибка станет дорогой. Облачная сборка iOS и TestFlight позволяют в любой момент показать приложение на настоящем iPhone. Для разработки тесты рядом с кодом и проверка перед пушем ловят ошибки ещё до ревью, а пять разработчиков меняют общий код параллельно и не ломают работу друг друга.