Привет! Меня зовут Олег Чикелёв, я разработчик сервисов на VK Mini Apps. Эта история началась буднично, как и многие другие: однажды я пришёл к другу с идеей приложения, и мы загорелись быстро сделать его на этой платформе. Расскажу вам о своём опыте разработки и о том, как выглядит жизненный цикл продукта с точки зрения разработчика. Вы узнаете, как мини-приложения тестируются в баг-трекере и как они появляются в каталоге. А в качестве примера буду использовать нашу разработку — VK API/VK Bridge Sandbox.

Этап 1. Создание мини-приложения

Итак, у вас появилась идея для сервиса — мини-приложения. Для начала зайдите на страницу «Мои приложения» ВКонтакте и нажмите на кнопку «Создать». Введите имя, описание и тип приложения (в нашем случае — VK Mini Apps, это один из стандартных шаблонов). Затем выберите категорию и перейдите к настройке.

Этап 2. Разработка

Обычно приложения на платформе пишут на JavaScript с помощью React, как это сделали и мы. Также нам пригодилась библиотека компонентов VKUI, с её помощью мы привели дизайн сервиса в соответствие с оформлением ВКонтакте. Для использования в приложении API ВК и операционной системы пользователя мы применили VK Bridge. А поскольку API ВК и VK Bridge возвращают ответы в формате JSON, мы подключили стороннюю библиотеку RenderJSON. Хотя я и начинающий разработчик, но разобраться со всеми этими подключениями было довольно легко, помогла понятная документация.

Приложение не сможет работать без всех методов VK API и VK Bridge в быстром доступе, поэтому давайте их удобно упакуем. Для этого в папке с проектом создадим файл InfoMethodBridge.js и с помощью простого скрипта-парсера добавим туда с официальной страницы все методы, а затем и параметры к ним. Результат выглядит так:

Далее в панели с VK Bridge с помощью компонента Select покажем пользователю события на выбор:

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

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

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

Были ли у нас трудности? Да. Например, у нас есть ряд вводимых пользователем параметров. Задавать каждому из них отдельную переменную со значением было бы слишком громоздко. Мы никак не могли придумать, как же аккуратно и корректно собрать в одном месте все эти параметры. В результате создали массив из девяти пустых элементов (максимальное количество параметров в методе API, которое мы нашли) и применили функцию, которая в зависимости от порядкового номера поля в приложении заносит в массив вводимые значения. 

Тот самый пустой массив:

Функция для внесения значений в массив:

Ещё интересный случай: нужно было придумать, как соблюсти все требования безопасности при получении ключа доступа для пользователя. Изначально мы сделали получение токена сразу со всеми правами, но служба поддержки отказалась принять такой вариант. Остановились на компоненте из VKUI, ChipSelect: пользователь сам выбирает нужные ему права доступа. При этом мы в зависимости от метода выводим сообщение, какие права нужны приложению. Попутно пришлось решать ещё одну задачу: когда пользователь выбирал сразу несколько прав, ChipSelect возвращал массив с ними, однако вызывать метод получения ключа доступа нужно было со строковым значением. Пришлось придумать, как переделать массив в строку.

Возвращение ChipSelect:

Сначала преобразовали начальный массив: прогнали его через map() и брали из каждого элемента label. Получился простой массив с именами параметров. Затем с помощью функции join() превратили его в строку:

Третья примечательная задача заключалась вот в чём: нам требовалось внести в файл больше 100 методов и каждому из них указать по несколько параметров. Делать это вручную очень не хотелось. К счастью, в API ВК удалось найти метод, позволяющий автоматически получить всю эту информацию со страницы. После этого мой друг написал скрипт, упаковывающий эти параметры, и у нас получился JSON-файл на 10 тыс. строк. Фрагмент:

Если вам интересно взглянуть на код приложения, то он есть в открытом доступе на GitHub.

Этап 3. Отправка приложения на модерацию

Когда приложение готово к отправке на тестирование, переключитесь в управление приложением и перейдите на страницу «Модерация».

Нажмите на кнопку «Отправить заявку» —вы увидите сообщение:

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

Заполните все поля и отправьте приложение на модерацию. Теперь ждите ответ службы поддержки.

Через некоторое время вам ответит агент. Он может спросить про реализованные в приложении функции или уточнить любую другую информацию. Например, так выглядело первое сообщение в нашей заявке на модерацию сервиса VK API/VK Bridge Sandbox:

Вам могут задать и другие вопросы, а также прислать список багов, которые нужно исправить.

Если визуальных проблем больше нет, то придёт сообщение об отправке приложения на проверку на уязвимости.

Томительное ожидание — и вот снова уведомление от ВКонтакте:

Ура, уязвимостей не обнаружили! Когда начнётся тестирование, придёт уведомление. Ждём.

Вечером следующего дня появилось уведомление о новой записи в /testpool. Там есть наше приложение, отлично! 

Также пришло сообщение от поддержки:

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

Этап 4. Баг-трекер

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

За месяц тестирования нам пришёл 61 отчёт, каждый из которых мы проверили. Часть проблем исправили сразу, некоторые исправим в ближайшем будущем. Были и отчёты, которые мы отклонили: попадались дубликаты, не баги или наше любимое — by design.

Предлагаю посмотреть на несколько небольших исправлений, которые мы сделали на этом этапе:

1. Отсутствуют параметры для метода VK Bridge VKWebAppClose.

   

   Ого, как так? Неужели мы забыли про параметры? Но ведь без них метод не работает. Перешли на страницу документации к этому событию — и действительно, есть параметры, которые мы забыли указать.

Перешли в файл со всеми методами, их описаниями и параметрами, нашли нужное событие:

Ой, параметров и правда нет. Исправили.

Добавили параметры, зашли в приложение и проверили событие.

Увидели потерянные параметры, вернулись к отчёту и присвоили статус «Исправлен».

2. Неверно формируется JSON-массив правил в примере метода.

Как некрасиво. Чтобы исправить эту проблему, пришлось немного погуглить. Прошерстив интернет, нашли ответ: нам поможет свойство CSS white-space. Погрузились в проблемный код:

Сейчас никаких стилей нет. Исправляем:

Добавили свойство style, в котором указан стиль white-space: pre-line. Вернулись в приложение:

Теперь выглядит получше. Считаем, что баг исправлен. Пришли в отчёт и присвоили статус «Исправлен».

3. Бесконечная загрузка при вызове некоторых методов. Мой друг поставил в приложение индикатор загрузки (screen spinner), «чтобы было красивее». В итоге, если Bridge или API возвращали ошибку, этот индикатор не исчезал, а зависал. Пришлось его просто убрать.

4. Ошибочно передавался параметр VK Bridge. Есть вводимый параметр целочисленного типа, а в метод он передавался как строковое значение. Из-за этого возникала ошибка, причину которой я так и не обнаружил, пришлось накостылить.

Код для записи в вызов метода значения параметра, в котором появлялась ошибка:

А вот код с костылём: если у параметра тип integer (целочисленное значение), то он будет записываться как число, то есть без кавычек, а в остальных случаях — как строка, с кавычками:

Этап 5. Каталог

Напишите в диалог с поддержкой:

И дождитесь такого сообщения:

Теперь сделайте красивую обложку, загрузите её и сообщите об этом в диалог. Получите уведомление:

Ура, сервис попал в каталог! Теперь нужно создать баннеры для продвижения приложения в каталоге. Загрузите их на платформу и сообщите в диалог. Вскоре поддержка ответит, что приложение размещено в разделе «Новые».

Если после выхода в каталог внести изменения в приложение, его могут снова отправить на тестирование.

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

Жизненный цикл мини-приложения для платформы VK Mini Apps:

Немного нашей статистики. Мы вышли в каталог 19 марта 2022 года, на следующий день было 79 просмотров. 3 апреля достигли пиковой на текущий момент посещаемости — 15 тыс. просмотров в сутки. С тех пор посещаемость сервиса падает: 17 июня — около 1 000 просмотров. Всё это исключительно органика, мы пока что не рекламировали свой сервис.  

А теперь главный вопрос: что с деньгами? Разработка — штука увлекательная, но на хлеб его не намажешь. VK Mini Apps предлагает разные способы монетизации мини-приложений. Мы отказались от размещения рекламы у себя, вместо этого подключили платформенный сервис VK Donut.

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

Надеюсь, моя статья помогла вам понять, как можно создавать сервисы для каталога приложений на платформе VK Mini Apps. Делитесь своим опытом!