Spectra
Нативные мобильные клиенты для панели хостинга Spectra - отдельные приложения для Android (Kotlin) и iOS (Swift). Полное управление серверами с телефона: статусы, консоль, расчеты и уведомления. Не обернутый сайт, а по-настоящему нативный интерфейс на каждой платформе.
Spectra - это хостинг-панель для игровых серверов. Мобильная версия - не сайт, запертый в WebView, а два отдельных нативных приложения: Android на Kotlin и iOS на Swift. С телефона вы делаете то же, что и в панели в браузере - проверяете статус, открываете консоль, оплачиваете счет. Push-уведомления сообщают, что сервер упал, раньше, чем это сделает игрок.
Введение
В вебе Spectra - это полный командный центр клиента: заказ серверов, консоль, файлы, статистика, расчеты. Все, что нужно администратору, чтобы его сервер Minecraft или другой игры стоял и работал. Загвоздка в том, что этот командный центр прикован к столу.
Администратор не работает с девяти до пяти перед монитором. Сбой не сверяется с календарем - он приходит в автобусе, за обедом, посреди ночи, когда на сервере как раз полно игроков. Тогда важно одно: как быстро телефон в кармане доведет вас до перезапуска и консоли, прежде чем игроки начнут уходить.
Поэтому мобильную версию Spectra мы построили как полноценный способ управлять платформой, а не как довесок к веб-панели. На практике это два отдельных приложения, написанных на родном языке каждой платформы - Android на Kotlin, iOS на Swift, - обращающихся ровно к тому же API, что и панель в браузере.
Сбой не спрашивает, где вы сейчас
Когда сервер падает в разгар прайм-тайма, каждая минута - это игроки, которые не вернутся. В такой момент вы не запускаете ноутбук, не входите в веб-панель, не ищете вкладку. Вы достаете телефон, который и так держите в руке, и хотите быть в консоли в два касания.
Это меняет то, каким должно быть приложение. Инструмент, за который вы хватаетесь в стрессе сбоя, должен запускаться мгновенно, реагировать без рывков и вести к цели без блужданий по меню. Каждая секунда задержки между касанием иконки и видом консоли - это секунда, в которую сервер по-прежнему лежит.
WebView не плох по принципу - для экрана, на который вы смотрите раз в квартал, он может быть разумным выбором. Правило, которого мы держимся в Spectra: чем чаще и чем сильнее под давлением вы используете экран, тем сильнее довод в пользу нативного. Консоль и перезапуск сервера - ровно по эту сторону.
Почему не страница в рамке
Самый простой и дешевый путь к мобильному - обернуть существующую веб-панель в WebView и отправить в магазин как "приложение". Код уже есть, надо лишь окружить его окном. Но срез выдает себя на каждом шагу: приложение запускается медленно, потому что сначала должен проснуться движок браузера, теряет нативные жесты, уведомляет плохо или вовсе не уведомляет и выглядит как страница в тонкой рамке.
Для панели, которую вы трогаете время от времени, это был бы приемлемый компромисс. Для спасательного инструмента - нет. Поэтому мы пошли по более трудному пути: отдельный, нативный интерфейс на каждой платформе, который выглядит и ведет себя как приложение своей системы, а не тот же макет, втиснутый в Android и iOS сразу.
Страница в рамке против нативного
| Черта | WebView | Нативно (Spectra) |
|---|---|---|
| Запуск приложения | ждет движок браузера | мгновенный |
| Жесты и прокрутка | часто дергаются | плавные, на уровне системы |
| Push-уведомления | ограниченные | полные, с deep link |
| Доступ к системе | за стеной песочницы | нативный |
| Вид | страница в рамке | приложение своей платформы |
Время до первого полезного экрана (ориентировочно, мс)
Два языка, один API
Общее у обоих приложений - то, что лежит под низом: API и модель данных. Различается интерфейс, потому что у Android и iOS свои паттерны навигации, свой язык жестов и свои ожидания от того, как приложение должно себя вести. Попытка навязать обоим один общий UI кончается тем, что на обоих он выглядит чужим.
Ключевое - что мобильный клиент говорит ровно с тем же API, что и веб-панель. Нет "мобильной версии по-быстрому" с урезанными возможностями - перезапуск сервера с телефона идет по тому же контракту, что и перезапуск из браузера. Благодаря этому на телефоне вы реально делаете то, что за столом, а не выбранное подмножество.
Android на Kotlin, iOS на Swift; общие API и модель данных, отдельный интерфейс под паттерны каждой платформы.
поток логов сервера и ввод команд с телефона, с клавиатурой, которая не закрывает половину того, что вы пишете.
старт, стоп, перезапуск и обзор использования ресурсов без обращения к десктопу.
просмотр счетов и оплата, чтобы сервер не истек только потому, что вас не было дома.
сервер упал, заканчивается расчетный период, бэкап не удался; вы нажимаете и попадаете на нужный экран.
Push, который ведет прямо в консоль
Уведомления - не украшение, а стержень всей идеи мобильного. Именно они дают узнать о сбое раньше, чем это сделает первый игрок. Без них приложение было бы пассивным окном, которое надо самому открыть в нужный момент - а нужный момент обычно тот, в который вы ни о чем не знаете.
Событие из бэкенда имеет простую, однозначную форму, и именно эта форма решает, куда забросит вас нажатие на уведомление. Deep link ведет не на главный экран, а прямо в консоль того конкретного сервера, у которого проблема. Никакого поиска, никакой навигации - от звука телефона до места, где можно действовать, одно касание.
Сервер, спасенный с автобусной остановки
Результат - инструмент, который реально спасает сервер с телефона, а не аварийный путь, которым вы пользуетесь раз и возвращаетесь к ноутбуку. Администратор получает на телефоне полноту панели: статус, консоль, действия питания, расчеты - и узнает о проблеме в тот миг, когда она возникает, а не когда случайно заглянет.
Со стороны Spectra выгода столь же конкретна: мобильное - не отдельный продукт, живущий своей жизнью, а еще один клиент того же API. Новая возможность в бэкенде досягаема с телефона так же, как из браузера, без переписывания логики второй и третий раз. Цифры выше иллюстративны, но направление - нет.
Сбой все равно придет в худший момент. Смысл был в том, чтобы худший момент больше не означал беспомощность - только вынутый из кармана телефон.
Больше проектов
Другие работы из той же категории - посмотрите, как мы решаем похожие задачи.
Есть похожий проект?
Напишите нам - смета бесплатна и приходит в течение часа.


