Как начать разрабатывать VK Mini App
Чтобы начать разрабатывать VK Mini App и запустить его для разработки в интерфейсе VK:
2. Нажмите кнопку Создать приложение на главном экране.
3. В форме введите название будущего приложения, заполните описание, выберите категорию и нажмите кнопку Перейти к настройке приложения.
Откроется страница с информацией о приложении.
4. Для создания приложения с использованием библиотеки create-vk-mini-app перейдите в терминал и запустите команду:
npx @vkontakte/create-vk-mini-app
где — это название проекта.
5. После скачивания шаблона и установки всех зависимостей, запустите проект.
6. Скопируйте из терминала адрес в вашей локальной сети в адресную строку браузера. Разрешите браузеру открывать страницу с неподписанным сертификатом для этого адреса, нажав кнопку Дополнительные и далее ссылку Перейти на сайт.
7. Вернитесь в настройки приложения, включите режим разработки, в поле URL для разработки введите адрес приложения в локальной сети. Сохраните изменения.
8. Перейдите по адресу https://vk.com/app
где app — это идентификатор приложения, указанный в настройках. Готово! Ваше приложение запустится в интерфейсе VK.
От кнопки «Создать приложение» до публикации в каталоге — глазами разработчика
Привет! Меня зовут Олег Чикелёв, я разработчик сервисов на 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 возвращал массив с ними, однако вызывать метод получения ключа доступа нужно было со строковым значением. Пришлось придумать, как переделать массив в строку.
Сначала преобразовали начальный массив: прогнали его через map() и брали из каждого элемента label. Получился простой массив с именами параметров. Затем с помощью функции join() превратили его в строку:
Третья примечательная задача заключалась вот в чём: нам требовалось внести в файл больше 100 методов и каждому из них указать по несколько параметров. Делать это вручную очень не хотелось. К счастью, в API ВК удалось найти метод, позволяющий автоматически получить всю эту информацию со страницы. После этого мой друг написал скрипт, упаковывающий эти параметры, и у нас получился JSON-файл на 10 тыс. строк. Фрагмент:
Если вам интересно взглянуть на код приложения, то он есть в открытом доступе на GitHub.
Этап 3. Отправка приложения на модерацию
Когда приложение готово к отправке на тестирование, переключитесь в управление приложением и перейдите на страницу «Модерация».
Нажмите на кнопку «Отправить заявку» —вы увидите сообщение:
Прочитайте рекомендации, поставьте галочку и снова нажмите на кнопку. Откроется следующее окно, в котором нужно указать информацию о приложении: для какой аудитории оно предназначено, какие задачи решает, где будет доступно и так далее.
Заполните все поля и отправьте приложение на модерацию. Теперь ждите ответ службы поддержки.
Через некоторое время вам ответит агент. Он может спросить про реализованные в приложении функции или уточнить любую другую информацию. Например, так выглядело первое сообщение в нашей заявке на модерацию сервиса VK API/VK Bridge Sandbox:
Вам могут задать и другие вопросы, а также прислать список багов, которые нужно исправить.
Если визуальных проблем больше нет, то придёт сообщение об отправке приложения на проверку на уязвимости.
Томительное ожидание — и вот снова уведомление от ВКонтакте:
Ура, уязвимостей не обнаружили! Когда начнётся тестирование, придёт уведомление. Ждём.
Вечером следующего дня появилось уведомление о новой записи в /testpool. Там есть наше приложение, отлично!
Также пришло сообщение от поддержки:
Наше приложение прошло модерацию почти через месяц после подачи заявки. Приложение можно было в любой момент сделать доступным для всех, чтобы его можно было запустить по прямой ссылке. Но чтобы расширить потенциальную аудиторию, нужно добавить приложение в каталог на платформе, а для этого придётся исправить баги. Переходим к следующему этапу.
Этап 4. Баг-трекер
По-моему, самый интересный этап. В первый день после выхода сервиса разработчику поступает множество отчётов, которые нужно разбирать и проставлять в них статусы.
За месяц тестирования нам пришёл 61 отчёт, каждый из которых мы проверили. Часть проблем исправили сразу, некоторые исправим в ближайшем будущем. Были и отчёты, которые мы отклонили: попадались дубликаты, не баги или наше любимое — by design.
Предлагаю посмотреть на несколько небольших исправлений, которые мы сделали на этом этапе:
- Отсутствуют параметры для метода VK Bridge VKWebAppClose.
Ого, как так? Неужели мы забыли про параметры? Но ведь без них метод не работает. Перешли на страницу документации к этому событию — и действительно, есть параметры, которые мы забыли указать.
Перешли в файл со всеми методами, их описаниями и параметрами, нашли нужное событие:
Ой, параметров и правда нет. Исправили.
Добавили параметры, зашли в приложение и проверили событие.
Увидели потерянные параметры, вернулись к отчёту и присвоили статус «Исправлен».
- Неверно формируется 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. Делитесь своим опытом!
- приложения
- разработка приложений
- Блог компании VK
- JavaScript
Создание приложения VK Mini App: взгляд изнутри
Всем привет! Хочу рассказать про разработку приложения для ВКонтакте под названием VK Mini App: что это, для чего это и как вообще устроено.
Пару лет назад я написал на vc.ru статью о своем проекте Фотопланета, которая попала в подборку за месяц, что и сподвигло меня разработать приложение VK Mini App Фотопланета, опубликовать его в каталоге и поделиться полной информацией о процессе, которой мне ой как не хватало на старте.
Что такое VK Mini App?
По сути — это веб-приложение, написанное HTML+CSS+JS и запускаемое внутри ВКонтакте: на vk.com / m.vk.com и в мобильных приложениях.
Отмечу, то необязательно делать поддержку сразу 3-х платформ, а также уточню, что в мобильных приложениях для iOS есть режим ODR, с которым не все так просто и об этом будет сказано ниже.
Взаимодействие между вашим кодом в приложении и ВКонтакте осуществляется с помощью библиотеки VK Bridge. Документация по ней хорошая, а само использование не вызывает сложностей.
Зачем это и что это дает?
Во-первых, вы сразу получаете доступ к информации о пользователе, который в приложении уже является как бы “зарегистрированным” — это удобно и для него и для вас.
Во-вторых, вы можете более глубоко интегрироваться с ВКонтакте, например, получить список фотографий пользователя. Но для этого, как вы уже догадались, нужно запросить необходимое разрешение.
И в-третьих, вы имеете возможность получить доступ к таким штукам, которые или недоступны или ограниченно доступны на JS. Пример: информация о фонарике.
Как это выглядит?
Приложение получает уникальную ссылку (спойлер: вы можете ее менять, если попадете в каталог), по которой оно и будет открываться. Вы можете не только публиковать ее, например, в посте, но также и встроить приложение в группу ВК (только одну). К сожалению, это доступно только в десктопной версии сайта, но надеюсь, что это исправят, уж слишком это классно выглядит.
Между vk.com и m.vk.com есть разница: например, открыть нативный просмотрщик и показать в нем фото можно в m.vk.com и нельзя в vk.com
Как это устроено технически?
Для сайтов vk.com и m.vk.com приложение запускается в , в мобильных приложениях — в WebView. И если с Андроидом все однозначно, то на iOS возможны два пути:
- ODR — режим: тут все отлично выглядит и принцип работы аналогичен принципу для Android.
- и не ODR — режим: приложение будет открываться в m.vk.com, который будет открываться в WebView (как будто вы открыли ссылку в любимом мессенджере). Минус тут не только в таком отображении, но и в том, что аутентификация иногда слетает и вам придется вводить логин и пароль заново (это просто не юзер-френдли).
Код вашего приложения размещается или на вашем сайте или на поддерживаемом из коробки хостинге статики ВК. Но ODR же устроен по-другому.
ODR (только для iOS)
Чтобы ваше приложение работало в ODR (простыми словами — работало “нормально”) нужно иметь аккаунт разработчика Apple (стоит от 99$ в год) и указать необходимые сведения в настройках приложения.
Далее, вы создаете ZIP-архив файлов. Не забываем про корректную работу с CORS и про то, что приложение должно запускаться просто открыв index.html
Осталось лишь понять, доступен ли ODR-режим? Если да, то у вас на айфоне приложение будет запущено именно в нем:
- ODR доступен администрации приложения (это настраивается и можно добавлять туда просто “тестеров”) сразу после его загрузки в кабинете разработчика. Класс!
- Для всех остальных (хотя.. не всех?): вы отправляете архив на проверку модератором (он просто смотрит факт работы, не вдаваясь в детали), получаете апрув и со следующим обновлением приложения ВКонтакте (еще и Apple должна дать “добро”) ODR становится доступен всем. Как вы понимаете, это не так быстро.
Да, ODR обязателен для каталога, если вы собираетесь поддерживать iOS.
Итак, вы разработали приложение и можете давать пользователям им наслаждаться. А если вам не нужен ODR или вы вообще iOS не планируете поддерживать, то модерации, получается, вообще нет.
Размещение приложения в каталоге дает пользователей. Как? Да вот так:
- “Новые”. Выходит не так много много новых приложений и ваше точно будет не обделено вниманием.
- Фичеринг: по какой-то причине ваше приложение понравится ВК и вам дадут еще трафика.
- Размещение в категориях: да, в категориях каталога мало приложений и ваше приложение не останется незамеченным.
- Уже открывали приложение? ВК об этом пользователю напомнит: прекрасная возможность для повышения retention.
Но как попасть в каталог? Скажу так: модерация в App Store и Google Play (да, тут она тоже есть) покажется цветочками, но с другой стороны — это и плюс, ведь чем сложнее, тем интереснее:)
Определяемся с тем, для кого приложение
Выбираем географию и платформы. Это важно, поскольку чем больше людей вы охватываете, тем больше получите трафика с каталога.
Отправка приложения
Вы уже разработали приложение, проверили его и считаете, что уже пора? Отлично, самое время отправить заявку, это делается в настройках приложения.
Сначала ваше приложение смотрит кто-то из модераторов и если все ок, то выдает список того, что нужно исправить, вы исправляете, затем снова список (уже другой), вы исправляете и так может быть сколько угодно раз.
- Все по делу, а модератор всегда адекватный — это означает, что вы можете высказать свое мнение и его аргументировать, таким образом сделать по-своему.
- Кажется, что модератор не читает свои же сообщения: у меня было А, сказали — Б, сделал, потом сказали А, потом опять Б.
- То, что все требования не публикуются изначально — это не удобно. Думаешь, что уже все сделано и тут бах — новый список.
Но вот прошло время, вы пофиксили или уже отстояли свою позицию. Теперь в каталог? Неет, теперь в Testpool: иными словами, вам создают продукт и вы попадаете в Баг-трекер.
В Баг-трекере сотни тестировщиков будут создавать задачи (мне создали более 100), а потом еще и проверять их выполнение.
- Абсолютно все задачи составлены грамотно: коротко и ясно.
- Все тестировщики адекватные люди, с которыми комфортно общаться и опять же, отстаивать свою позицию.
- Приложение “вылизывают”, даже помогают в орфографии.
- Присутствуют мелкие замечания, которые не являются ошибками, а скорее просто пожеланиями. Почему это в “минусах”? Потому, что это отнимает время, а пользы не приносит, ну и задерживает публикацию в каталоге.
Сделали все? Супер, самое время обновить приложение, а тестировщикам дать возможность проверить все исправления.
И вот тут теперь наступает важный момент: ODR вы обновили, но стал ли он доступен тем, кто помогает вам сделать приложение лучше?
В официальном чате мне сказали — нет, только после проверки модератором и после обновления приложения ВК. Но как показала практика, все же это не так: ODR сразу становится доступен тем, кто участвует в тестировании продукта. Это здорово!
Чтобы двинуться дальше, вам нужно закрыть все тикеты с пометкой “высокий”, “критический” и “уязвимость”.
Далее вы снова пишите в поддержку, ваше приложение опять смотрят и уже потом дают “добро” на размещение в каталоге.
Что доступно после того, как вас одобрят:
- Самое главное — это красивый адрес приложения.
- Оценка приложения: Performance, Best Practices и Progressive Web App, выраженные в процентах.
- Ну и настройка баннера для каталога.
Теперь ваш продукт в Testpool становится закрытым, а при каждом обновлении вам нужно снова писать в поддержку.
Про дизайн
Чтобы разработать приложение полностью в стиле ВК, вы можете использовать официальную библиотеку VKUI, которая представляет собой набор React-компонентов.
- ВК-стайл обеспечивает комфорт для пользователей, ведь они не чувствуют, что вышли из ВК при открытии приложения.
- Удобно и просто использовать.
- Нет встроенного роутера, я писал свой, хотя есть сторонние решения.
- Сложность разработки возрастает сильно, если ваше приложение не “пара экранов с простой логикой”, основная проблема — навигация.
Если вы разрабатываете приложение без каталога, то можно использовать любой дизайн. Если вы отважитесь на каталог, то тут действует правило “да, но нет” касательно выбора дизайна: VKUI приветствуется и обязательно в плане соблюдения (если будете делать на нем), но можно делать и на другом дизайне.
На что обратить внимание?
- Swipe Back на iOS и кнопка Назад на Андроиде: обязательно сделайте, без этого приложением пользоваться неудобно.
- Светлая и темная тема: также реализуйте, без этого приложение будет смотреться странно.
- Также обратите внимание на то, как правильно указывать платформу в коде.
- Используете localStorage? Учтите, что он не доступен в в режиме “инкогнито”.
Монетизация
Внимание! Перед использованием проконсультируйтесь со специалистами (поддержка ВК).
Сам я монетизацию не делал, но основное, что хочется сказать про это:
- Цифровые товары запрещено продавать на iOS, а для других платформ нужно принимать оплату голосами. Кто-то делает через VK Donut, но тут лучше смотреть первый абзац в этом разделе.
- Возможна установка рекламы — это, можно сказать, доступно из коробки. Не забывайте, что миллионы вы не заработаете на 10 посетителях в день: тут нужен хороший трафик и качественное приложение.
Что дальше?
- Установка в сообщество — классная идея, которая позволит кому угодно ставить ваше приложение в свое сообщество, а вам — адаптировать его содержимое под определенный запрос. Это в моих планах.
- Размещение в Одноклассниках — я пока не пробовал, но обязательно попробую, судя по документации, там не должно возникнуть сложностей.
Спасибо, что дочитали до конца, надеюсь статья вам будет полезна, если планируете работать с VK Mini App. И если вы решили сделать приложение и разместить его в каталоге, то желаю ему не только туда попасть, но и развиваться! Почему? К сожалению, есть несколько примеров классных приложений (да еще пропиаренных самим ВК), которые после релиза не обновляются ни технически, ни в плане контента, видимо, стали неинтересны авторам:(
28 показов
7.4K открытий
11 комментариев
Написать комментарий.
А есть ли смысл вкладываться в такие приложения? Мб лучше сфокусироваться на гугл плей и эппл маркете, нежели чем еще в такие ниши заходить?
Развернуть ветку
Развернуть ветку
Я вот ни одного приложения из вк не юзал, и как бе нет нужды.. я поэтому и спросил, т.к.даже кейса себе не могу представить зачем они нужны..
Развернуть ветку
Предположу, что вы все же использовали какое-нибудь VK Mini App, но не обращали внимание: например, «Такси».
Развернуть ветку
Для гугла и эппла у меня уже сделано. Для ВК это и спортивный интерес и бесплатный трафик: проект, что указан в статье, уже пополнился десятками авторов, которые поделились своими фотографиями.
Развернуть ветку
Смотря какие цели вы преследуете. Если у вас уже есть приложение в гугл плей и эпл стор, то это отличный вариант получить трафик и в дальнейшем перенести его уже на другие площадки.
Если вы делаете бизнес ВКонтакте, то мини-приложения это отличное дополнение и расширение функционала социальной сети.
Проблемы будут если вы хотите сделать только мини-приложение и монетизировать его встроенной рекламой. К сожалению, платформа VK Mini App за всё своё существование не может похвастаться удачными кейсами в этом направлении. Ну а вишенкой на торте будет, не закрытая уязвимость позволяющая любому школьнику, отключить вас от монетизации в любой момент.
По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps
VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.
Всем хабропривет. Я Леонид Шевчук, старший разработчик. Четыре года создаю мини-приложения. Руковожу командой фронтенд-разработки VK Знакомств. Наш сервис разработан как мини-приложение ВКонтакте. Это яркий пример того, что на платформе VK Mini Apps можно делать продукты с очень развитой функциональностью.
Эта статья пригодится тем, кто ещё не работал с нашей платформой, поэтому я буду рассказывать очевидные для опытных разработчиков вещи. Сначала мы освежим в памяти, на каких технологиях делаются современные веб-приложения. Затем научимся портировать в VK Mini Apps — на примере приложения для планирования дел, написанного на React. И сделаем это так, чтобы оно выглядело органично для платформы. А для чего это всё нужно? Сейчас объясню.
У VK Mini Apps огромная аудитория, унаследованная от ВКонтакте. И вы можете бесплатно (или дёшево) получать трафик для своих приложений, когда пройдёте модерацию и попадёте в каталог платформы. Более того, если ваше мини-приложение будет достаточно крутым, оно может получить бесплатный фичеринг — попадёт в тематическую подборку на платформе. Это настоящий буст трафика. Например, «Печенька с предсказаниями» — мини-апп с DAU 350 000, а его сделали три джуна и один мидл.
Перед тем как начать
Мини-приложения представляют собой одностраничные веб-приложения, которые встраиваются в платформу с помощью iFrame или WebView. Здесь нет конструктора наподобие Tilda, никакого zerocode — вам нужно владеть привычными для любого веб-разработчика технологиями: JavaScript, HTML и CSS. Однако порог вхождения гораздо ниже, чем в нативной разработке под Android или iOS.
Ещё нужно владеть каким-нибудь UI-фреймворком. Рекомендую React JS (документация, руководство для новичков): он значительно упрощает разработку веб-приложения. На нём написана и наша библиотека с готовыми компонентами VKUI, в других фреймворках этими компонентами пользоваться не получится. Но при этом React JS — не обязательная технология для мини-приложений. Просто с другими фреймворками придётся самостоятельно решать, какие библиотеки компонентов использовать или изобретать собственные компоненты. И, скорее всего, они будут несовместимы с ВКонтакте.
Начало
Я не буду рассказывать, как писать приложения на React, статья несколько о другом. Поэтому сразу перескочим на шаг вперёд: мы приготовили для вас приложение-планировщик (TODO List), можете ознакомиться с его репозиторием. Он умеет:
- добавлять и удалять задачи;
- помечать задачи выполненными;
- подсчитывать количество выполненных задач.
Теперь оформим его как мини-приложение в VK Mini Apps.
�� Если вам будет сложно выполнить какой-то шаг, можете ввести команду, которая приведена в конце соответствующей главы, и посмотреть результат этого шага.
Сначала клонируйте репозиторий с готовым планировщиком и установите зависимости:
git clone git@github.com:shevchux/vkma-todo-list.git cd vkma-todo-list git checkout tags/step-1 npm installСтруктура демонстрационного приложения простая:
├── App │ ├── App.jsx │ ├── defaultData.json │ ├── index.js │ └── styles.css ├── TodoForm │ ├── TodoForm.jsx │ ├── index.js │ └── styles.css ├── TodoItem │ ├── TodoItem.jsx │ ├── index.js │ └── styles.css └── index.jsxГлавный компонент страницы (App.jsx):
- хранит состояние (todos) списка задач;
- описывает экшены по работе со списком задач:
- addTask и removeTask для добавления и удаления задач;
- handleToggle для переключения статуса задачи между отмеченной и неотмеченной;
- рендерит основное содержимое страницы и дочерние компоненты.
Компонент TodoForm содержит форму создания новой задачи. Через обратный вызов сообщает о намерении добавить её в список.
Компонент TodoItem содержит отрисовку сущности одного элемента списка. Каждый такой элемент умеет через обратный вызов сообщать о намерениях:
- поменять статус выполненности на противоположный;
- удалить элемент из списка.
Интерфейс приложения выглядит так:
На этом скриншоте — ваш план действий. После их выполнения вы получите полноценное мини-приложение на платформе VK Mini Apps.
А теперь можно начинать.
1. VK Bridge
�� VK Bridge — библиотека для взаимодействия со средой ВКонтакте. Она позволяет выполнять запросы к API ВКонтакте, получать информацию о пользователе, устройстве и многом другом.
Библиотека служит для отправки и получения событий. VK Bridge — это буквально мост между приложениями, работающими на стороне пользователя, и клиентской частью ВКонтакте (мобильным приложением, мобильной и десктопной версией сайта). Именно они обмениваются данными с серверами соцсети, а библиотека работает как посредник на стороне пользователя.
Для использования этой библиотеки необходимо установить npm-пакет:
npm install /vk-bridge
2. VKWebAppInit и инициализация
В начале кода необходимо вызвать событие инициализации (VKWebAppInit). Если вы этого не сделаете, мини-приложение работать не будет.
Теперь импортируйте модуль VK Bridge и инициализируйте мини-приложение:
Подробнее о начале работы с VK Bridge можете почитать в документации.
�� Введите команду, чтобы посмотреть результат этого шага:
git checkout tags/step-2
3. Проверка запуска мини-приложения
Чтобы запустить мини-приложение, выполните команду npm run start . Оно будет доступно по адресу https://localhost:3000 . Укажите этот адрес для iFrame мини-приложения и проверьте, что оно работает.
В портале для разработчиков зайдите в настройки созданного приложения. Там укажите https://localhost:3000 в качестве адреса для всех трёх версий:
�� Важно: наше локальное приложение запускается по протоколу HTTPS. Его использует сайт ВКонтакте, поэтому браузерные политики требуют HTTPS и для домена iFrame-приложения.
Теперь можете открыть мини-приложение в десктопной и мобильной версии: vk.com/appXXX и m.vk.com/appXXX , где XXX — ID вашего мини-приложения. Он указан в настройках:
Обязательно проверяйте мобильную версию, потому что основная доля аудитории мини-приложений открывает их со смартфонов.
Пока не пробуйте открыть мини-приложение именно с мобильного устройства (ни в клиенте, ни по адресу m.vk.com/appXXX ), наверняка оно находится в другой сети. Но даже если в той же самой, могут возникнуть проблемы из-за брандмауэра. Ниже я покажу, как настроить просмотр локального мини-приложения с удалённого устройства с помощью туннелирования.
4. Методы VK Bridge и запоминание состояния приложения
Вернёмся к разработке проекта.
Заметим, что любые изменения, внесённые в мини-приложение, теряются при повторном заходе в него. Решить эту проблему можно по-разному. Например, поднять свой бэкенд и подготовить методы для CRUD-операций с TODO-списком. Но в случае с мини-приложениями ВКонтакте можно обойтись клиентской разработкой. Для этого рассмотрим несколько методов VK Bridge из секции Storage.
�� Вы можете экспериментировать с любыми методами VK Bridge в песочнице.
Метод VKWebAppStorageSet позволяет закрепить за пользователем некую информацию в рамках конкретного мини-приложения, а метод VKWebAppStorageGet — получить её. У других пользователей не будет к ней доступа. Этого вполне достаточно, чтобы сделать механизм сохранения состояния списка задач.
Определите ключ STORAGE_KEY , по которому в VK Storage будет храниться JSON с актуальным состоянием. При монтировании корневого компонента запросите данные по этому ключу и актуализируйте состояние todos . Обратите внимание, что VK Storage умеет хранить только строковые данные, поэтому при записи состояние нужно сериализовать ( JSON.stringify ), а при чтении — десериализовать ( JSON.parse ).
У новых пользователей может выскочить ошибка парсинга, потому что значение в VK Storage — по умолчанию пустая строка. Чтобы этого не происходило, отлавливайте ошибку с помощью try-catch и показывайте пользователю приложение по умолчанию.
В качестве самостоятельного задания с помощью флага loaded отрисуйте особое состояние при загрузке списка задач.
Теперь разберёмся, как записывать данные в VK Storage. Для примера, не углубляясь в безопасную архитектуру, воспользуемся useEffect из React для изменения состояния todos . Только будьте осторожнее с генерацией сетевых запросов в useEffect в рабочих проектах: можно сгенерировать много избыточных параллельных запросов, наткнуться на flood control или поймать баги из-за гонки асинхронных операций. Предлагаю вам самостоятельно придумать более безопасный механизм отправки запросов. Например, воспользоваться троттлингом.
Сейчас у вас есть приложение, которое сохраняет список задач и их состояние между сессиями. Вы можете что-нибудь делать со списком, и после перезагрузки страницы изменения не потеряются.
�� Введите команду, чтобы посмотреть финальный результат этого шага:
git checkout tags/step-3
�� Обратите внимание, что теперь веб-приложение не будет корректно работать в отдельной вкладке по адресу localhost:3000 . Дело в том, что VK Bridge работает только внутри iFrame или WebView.
5. VKUI
Наше приложение-планировщик пока что не может похвастаться качественным дизайном и отличается по стилю от экосистемы ВКонтакте.
Кому-то это может показаться не таким уж и важным, но однородность вашего мини-приложения с экосистемой ВКонтакте — это не только очень важно, но и просто. Даже если вы намерены использовать необычный или уникальный дизайн, помните: пользователь будет интуитивно искать нужные ему кнопки именно там, где они расположены ВКонтакте — это дело привычки. А аудиторию лучше не путать, она любит, когда всё просто и понятно.
Чтобы поддерживать однородность стиля интерфейсов, ВКонтакте предлагает открытую библиотеку компонентов (VKUI) и иконок (VK Icons). С ними быстрее разрабатывать, нужно меньше кода.
�� VKUI — это набор React-компонентов, которые адаптированы под мобильную (Android и iOS) и десктопную среду. Библиотека основана на дизайн-системе ВКонтакте и содержит готовые компоненты, которые будут нативно выглядеть на любом устройстве.
Чем полезна VKUI:
- Удобно: многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы.
- Компоненты соответствуют стилю ВКонтакте: пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык в социальной сети.
- Не нужно следовать жёсткой архитектуре построения фронтенда: берите только то, что нужно, и можете модифицировать компоненты. Например, добавьте во view-компонент свой класс или обработчик событий, сделайте вложенные компоненты любой глубины и так далее.
- Адаптивность: библиотека подстраивается под экраны разного размера, делая интерфейс доступным на смартфонах, планшетах и компьютерах.
- Мультиплатформенность: интерфейсы на VKUI практически неотличимы от дизайна платформ. Библиотека умеет мимикрировать под iOS- и Android-клиенты ВКонтакте, под дизайн vk.com и m.vk.com.
- Разные цветовые схемы: тёмная тема — один из самых важных факторов доступности.
6. Подключение
Ознакомьтесь с разделом «Быстрый старт» из документации VKUI и выполните описанные шаги.
Сначала установите зависимости:
npm install @vkontakte/vkui @vkontakte/icons
Добавьте тег viewport для корректного отображения интерфейса на безрамочных смартфонах:
Соберите базовый app shell для VKUI:
Отдельно расскажу про компоненты View и Panel. View должен содержать в себе набор всех Panel. У каждой Panel должен быть уникальный id. Параметр activePanel у View регулирует отрисовку нужной панели в конкретный момент времени.
Наше тренировочное мини-приложение содержит всего один экран, но обычно их несколько — компоненты View и Panel помогут разобраться с навигацией между разными экранами.
7. Переход на VKUI
Теперь заменим старые компоненты нашего приложения на компоненты VKUI. Для этого в файле App.tsx:
- шапку «Список задач» оформите с помощью PanelHeader по примеру из документации;
- индикатор загрузки замените на PanelSpinner (пример);
- сноску о количестве задач замените на Footer;
- удалите файл стилей styles.css.
В результате получится очень семантичный код, не нагруженный особенностями реализации вёрстки:
Продолжим рефакторинг в файлах TodoForm и TodoItem. Удалите из них прошлые стили и перейдите на компоненты VKUI. Предлагаю использовать Input, Button и Cell. У вас получится код, похожий на этот:
Теперь у приложения есть современный интерфейс, который использует ВКонтакте. И для этого вам не пришлось написать ни строки на CSS. Более того, новые компоненты умеют адаптироваться под тёмную тему и слегка изменять внешний вид под особенности iOS и Android.
�� Введите команду, чтобы посмотреть финальный результат этого шага:
git checkout tags/step-4
8. VK Tunnel
Мобильные ОС могут диктовать условия, которые не всегда заметны при разработке на компьютере. Например, VKUI отрисовывает некоторые компоненты на разных ОС по-разному. Поэтому рекомендую проверить работу своего приложения на мобильном устройстве на этапе локальной разработки, до сборки и публикации проекта. Сделать это можно с помощью VK Tunnel. Это утилита для VK Mini Apps, которая позволяет сделать сервер на вашем локальном компьютере публичным. Вы сможете отладить своё локальное мини-приложение на мобильном устройстве в любой сети и показать коллегам и друзьям промежуточные результаты.
Сначала установите пакет VK Tunnel:
npm install @vkontakte/vk-tunnel -g
Затем в файл package.json добавьте такой скрипт:
«tunnel»: «vk-tunnel —insecure=1 —http-protocol=https —ws-protocol=wss —host=0.0.0.0 —port=3000»
Создайте файл vk-tunnel-config.json, он будет отвечать за автоматическую подстановку туннель-адреса в URL для разработчика в настройках мини-приложения (вместо 123456 нужно поставить ID вашего мини-приложения):
Более подробная инструкция есть в документации.
Теперь убедитесь, что у вас запущен локальный сервер: npm run start . И после этого проверьте работу туннеля: npm run tunnel . В первый раз потребуется авторизоваться — следуйте инструкциям, которые появятся в консоли. После этого можно убедиться, что локальная версия мини-приложения запускается в официальном клиенте ВКонтакте на мобильном устройстве.
�� Введите команду, чтобы посмотреть финальный результат этого шага:
git checkout tags/step-5
9. Eruda
Обратите внимание, что в настройках мини-приложения есть возможность включить консоль Eruda. Это может быть полезно для отладки кода, например когда вы проверяете работу вашего мини-приложения не с компьютера, где есть доступ к инструментам разработчика, а с мобильного устройства.
Подробнее об инструментах отладки читайте на портале для разработчиков.
10. VK Mini Apps Deploy
К этому моменту вы уже отладили своё мини-приложение. Пора опубликовать его. Вы можете выбрать для этого любой хостинг и любой домен, как и для обычного веб-приложения. Главное, укажите правильный URL в настройках мини-приложения. Отметим, что не все начинающие разработчики умеют настраивать хостинг для статики. К тому же не всегда это можно сделать бесплатно, получив при этом высокую скорость доставки файлов. Поэтому ВКонтакте предоставляет инструмент, который берёт решение этих вопросов на себя — VK Mini Apps Deploy. Он позволяет опубликовать статику вашего фронтенд-приложения буквально одной командой. Это легко, бесплатно и быстро. ВКонтакте использует кеширование, сжатие и технологию CDN, чтобы доставлять статику до пользователей за максимально короткое время.
Установите пакет VK Mini Apps Deploy:
npm install @vkontakte/vk-miniapps-deploy —include=dev
В файл package.json добавьте скрипты:
"predeploy": "npm run build", "deploy": "vk-miniapps-deploy"Создайте файл vk-hosting-config.json, он будет отвечать за автоматическую подстановку адреса вашей статики в URL для пользователей в настройках мини-приложения (вместо 123456 нужно поставить ID вашего мини-приложения):
Документация и инструкции по использованию VK Mini Apps Deploy лежат здесь.
Теперь можно развернуть ваше мини-приложение: npm run deploy . Система попросит подтвердить публикацию собранной статики для пользователей мини-приложения. Также в первый раз может потребоваться авторизация. Следуйте инструкциям, которые появляются в консоли.
После этого проверьте в настройках мини-приложения, что оно всем доступно для просмотра. И убедитесь, что TODO List запускается на всех платформах не только у разработчиков, но и у внешних пользователей.
�� Введите команду, чтобы посмотреть финальный результат этого шага:
git checkout tags/step-6
Заключение
Поздравляю, вы портировали своё стороннее веб-приложение на платформу VK Mini Apps!
Кроме описанных в начале статьи преимуществ у VK Mini Apps есть и другие, часто неочевидные.
- Монетизация проекта. Например, игра «Ёлочка» приносит авторам выручку более 7 млн рублей в месяц.
- Вы можете прокачиваться в коммерческой разработке, повышая свою ценность на рынке. Компаниям нужны сервисы, и они всё чаще заказывают разработку спецам и командам, которые умеют работать на VK Mini Apps.
- Сразу создавая мини-приложения на платформе, вы можете быстро прототипировать разные идеи, экспериментировать и оттачивать владение технологиями.
- Вы можете делать классные пет-проекты для портфолио. Как говорится, не GitHub’ом единым.
И напомню ещё раз про каталог — эта фича платформы способна кратно повысить доходность мини-приложений. Как в него попасть, мы расскажем в одной из новых статей.
Полезные материалы
- Портал для разработчиков — основной источник документации, инструкций, официальной информации.
- Видео «Первые шаги».
- Статья о бизнес-применении, идеях, нишах и монетизации сервисов.
- Пошаговое руководство «От кнопки „Создать приложение“ до публикации в каталоге — глазами разработчика».
- «Как создать мини-приложение: база знаний VK Mini Apps» — полезные материалы на каждый этап жизненного цикла.
- Сообщество разработчиков для VK Mini Apps.
P.S. Опытные разработчики, уже создававшие мини-приложения для VK Mini Apps, расскажите, что вам больше всего помогало на первых порах?