Что такое mini apps vk
VK Mini Apps — это платформа встраиваемых кроссплатформенных приложений ВКонтакте. Они создаются на базе стандартных веб-технологий: HTML, JavaScript, CSS.
В этом разделе вы найдёте инструкции для разработчиков мини-приложений.
Как создать мини-приложение на платформе VK Mini Apps, в двух видеоуроках.
Важно! Библиотеку VK Bridge необходимо использовать при разработке любого приложения. Остальные библиотеки — не обязательно.
Создайте приложение на этой странице: https://vk.com/apps?act=manage.
Выберите «Встраиваемое приложение», тип: «VK Mini App», укажите название и подтвердите действие. Вы попадёте в интерфейс администрирования Вашего приложения.
Перейдите на вкладку «Настройки» и заполните поля «Мобильная версия»/«Полная версия», указав ссылку на адрес приложения — URL страницы на вашем сайте, которая будет отображаться в браузере в официальных мобильных клиентах и внутри фрейма в веб-версии ВКонтакте.
В конце URL укажите слэш, если ссылаетесь на папку, иначе мини-приложение может открыться в браузере вместо мобильного приложения.
Если какую-то из версий, полную или мобильную, вы не планируете реализовывать — оставьте соответствующее поле пустым.
Чтобы создать шаблон приложения, выполните команду:
С помощью VKUI вы можете создать привлекательный интерфейс мини-приложения для мобильных устройств.
Для использования в полной версии элементы пока не адаптированы.
Если вы используете библиотеку для создания шаблона, отдельно подключать VKUI не нужно.
npm install @vkontakte/vkui || yarn add @vkontakte/vkui
На устройствах с Android нажатие кнопки «Назад» вызывает в вебвью событие history.back (см. документацию). По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу вашего приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации необходимо обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг, например, при помощи библиотеки react-router.
Чтобы мини-приложение могло использовать API ВКонтакте и API устройства пользователя, необходимо подключить библиотеку VK Bridge, которая служит для отправки и получения событий.
В справочнике VK Bridge есть список всех событий, которые можно использовать. Обратите внимание на то, что в коде приложения обязательно нужно вызывать событие инициализации VKWebAppInit, иначе приложение не запустится.
Если ранее вы не работали с API ВКонтакте, рекомендуем прочитать это руководство.
Если ранее вы не работали с React, рекомендуем прочитать это руководство.
vk-bridge — это NPM-пакет для отправки и получения событий в вашем
приложении.
Если вы используете библиотеку для создания шаблона, отдельно подключать VK Bridge не нужно.
npm install @vkontakte/vk-bridge || yarn add @vkontakte/vk-bridge
Приложение в приложении: как устроена платформа сервисов VK Mini Apps
Привет, vc.ru! Меня зовут Антон Циварев. В Команде ВКонтакте я руковожу платформой для сторонних разработчиков. В августе 2018 мы запустили VK Mini Apps — платформу сервисов внутри мобильного приложения ВКонтакте. Сейчас там более 5 тысяч активных сервисов: абсурдные игры, акции больших брендов, интернет-магазины и даже альтернативная экономика — рассказываю о самых интересных решениях.
Сервисы VK Mini Apps — веб-приложения в нативном клиенте, позволяющие решать повседневные задачи или интересно проводить время, не выходя из ВКонтакте. Например, пополнять счёт транспортной карты, заказывать еду или такси, знакомиться с новыми людьми, искать работу или учить правила дорожного движения. Платформа открытая, так что сделать приложение может каждый. Большинство проектов придуманы независимыми разработчиками, но представлен и большой бизнес — «Макдоналдс», Dostaевский, ComicCon, «Ситимобил». А самым известным приложением на базе VK Mini Apps можно назвать, пожалуй, VK Coin — в начале апреля о нём говорили едва ли не все развлекательные паблики.
Изначально мы назвали платформу VK Apps, но недавно решили добавить в название приставку Mini. Кажется, так лучше передаётся суть проекта — лёгкие и быстрые сервисы в одном приложении VK прямо в телефоне. Этот формат уже успешен на китайском рынке: в мессенджере WeChat функционируют свыше миллиона «приложений в приложении».
Для пользователей преимущества сервисов, на мой взгляд, достаточно очевидны: знакомый интерфейс, не нужно устанавливать отдельные приложения и забивать память, не приходится искать программу среди десятков других иконок на телефоне.
Для бизнеса и разработчиков есть свои плюсы :
Во время работы над платформой мы поняли, что для пользователей сервисы VK Mini Apps должны восприниматься как что-то привычное, а для разработчиков — оставаться максимально простыми в создании. Поэтому мы остановились на веб-приложениях, которые будут открываться в WebView на полный экран. Все сервисы созданы с использованием открытой библиотеки для мобильного интерфейса, которой ежедневно пользуемся и мы сами. Это чистый веб, написанный на HTML, CSS и JavaScript без единой строчки нативного кода и мимикрирующий под приложение ВКонтакте.
VK Mini Apps стоит на трёх китах:
С помощью WebView и VK UI были созданы некоторые экраны приложения VK — это позволило нам ускорить его разработку в несколько раз. Именно так мы писали экраны для создания сообщества и управления им, запуска рекламных постов и жалоб на контент. Всю документацию, полезную информацию и примеры сервисов для разработчиков можно найти в сообществе VK Mini Apps: vk.com/vkappsdev
К марту мы планировали выйти на 2 миллиона уникальных пользователей в месяц, а вышли на 10 миллионов. Всего сейчас на платформе — более 5 тысяч активных сервисов, но далеко не каждому из них нужен выход на всю аудиторию ВКонтакте. Поэтому в каталоге, который доступен всем пользователям, размещены около 90 сервисов — самых качественных и массовых. Есть и другие точки входа: сервис можно разместить в меню сообщества, добавить в чат-бота, а если ссылку на приложение вставить в публикацию, то к ней прикрепится красивый заметный сниппет. Кроме того, пользователи могут найти нужный сервис в общем поиске по ВКонтакте.
У нас получилось создать комьюнити разработчиков VK Mini Apps — сообщество, митапы, чаты. Мы поддерживаем общение с авторами успешных проектов, предлагаем им давать нам фидбэк и делиться опытом с другими разработчиками. Дальше я как раз расскажу о нескольких сервисах, которые стали популярны на нашей платформе.
Чтобы опробовать VK Mini Apps и просто «запилить что-нибудь смешное», один из независимых разработчиков в декабре 2018 года запустил абсурдный сервис — пользователи платят деньги, чтобы попасть в топ внутри самого сервиса.
На создание «Сотена» у меня ушла одна неделя. За первый вечер создал дизайн, за следующие три написал прототип, ещё три дня тестировал приложение. Для сравнения — столько же времени, ровно неделю, я потратил, чтобы найти юридическое лицо и официально принимать платежи в приложении.
Всего за неделю в «Сотен» пришли 150 тысяч пользователей, из них 2151 человек отправил деньги. Суммарный оборот сервиса составил 480 000 рублей. «Сотен» стал первопроходцем в своей нише и заложил тренд на простые по механике и быстрые в разработке сервисы с большим виральным потенциалом. Подробнее о сервисе можно прочесть в этом материале на VC.
В новом году появился новый виральный сервис —Tool 42 (vk.com/tool42). С его помощью пользователь может узнать, как давно зарегистрирован ВКонтакте, кто из друзей или друзей друзей добавил его в чёрный список, а также какие записи на странице или в сообществе наиболее популярны по разным показателям: отметкам «Нравится», комментариям, просмотрам. Создал сервис за пару ночей, «когда было свободное время», программист Павел Громадчук. Он хотел получить опыт разработки на React и реализовать полезные функции, которых, на его взгляд, не хватало в VK.
В конце февраля приложение появилось в каталоге, но резко набрало популярность две недели спустя — когда разработчик добавил возможность опубликовать свою дату регистрации ВКонтакте в историях. Пользователи сравнивали свой результат с данными друзей, и это своеобразное соревнование стало невероятно виральным — за первые четыре дня сервисом воспользовались 2 миллиона человек, которые опубликовали больше 700 тысяч историй. 17 марта 21 % авторов всех историй ВКонтакте размещали их через Tool 42. Разработчик потратил всего один час на написание кода для публикации истории и тысячу рублей на создание картинки для шеринга у дизайнера.
Vsemayki.ru — это интернет-магазин по печати принтов на одежде и сувенирах с полумиллионом заказов в год. Свой сервис на VK Mini Apps Vsemayki.ru (vk.com/app6800340) запустили в конце января 2019. Это был эксперимент: создателям хотелось проверить перспективность новой платформы в плане продаж. В итоге они стали одним из первых интернет-магазинов, которые представлены в каталоге. В сервисе быстро оформляются заказы за счёт автозаполнения формы с разрешения пользователя.
Мы окупили то, что потратили на создание приложения, и уже вышли в плюс. При этом мы ничего не тратим на рекламу, все продажи — из органического трафика приложения. Приятно видеть, что трафик постоянно растет. И даже если не все пользователи делают заказы, о нас бесплатно ежемесячно узнают десятки тысяч пользователей. Хорошая брендовая инвестиция в будущее.
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.
Платформа VK mini apps
«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.
Инфраструктура приложения VK mini app
Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.
«ВКонтакте» позволяет разместить три версии приложения:
Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.
После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.
Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.
Разработка приложения VK mini app
Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.
Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:
Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.
Компоненты уже стилизованы согласно styleguide «ВКонтакте» — пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык, находясь внутри социальной сети.
«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:
Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
Далее нам нужно просто встроить React-приложение на страницу.
Параметры открытия приложения
«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, sign. То есть фрейм с вашим приложением откроется примерно с похожим адресом: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j
Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.
Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например: youvkapp.ru#custom_param
Роутинг
Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.
Каждый View отвечает за свой пользовательский сценарий: основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
Как видно, появился ещё один пакет vkontakte:
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.
Библиотека VK Connect
Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.
Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:
В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.
«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:
VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:
VK Pay
VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:
Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.
VK Mini Apps: критерии модерации сервиса
VK Mini Apps — платформа для приложений ВКонтакте. Наша цель — сделать так, чтобы все нужные сервисы были доступны пользователю здесь и сейчас, без томительного ожидания и дополнительных действий. Сервис на платформе VK Mini Apps — это веб-приложение, которое открывается внутри официального клиента ВКонтакте или во фрейме веб-версии, использует API социальной сети и мобильного устройства и глубоко интегрировано в привычные сценарии поведения наших пользователей.
Мы с вами заинтересованы в том, чтобы наполнить её классными и полезными для пользователя приложениями. Потому мы подготовили список критериев, которые помогут вам подготовить сервис к модерации и размещению в каталоге, а нам — начать его оценивать.
Обращаем ваше внимание, что полное соответствие указанным пунктам не гарантирует попадания в каталог сразу после подачи заявки без каких-либо правок. Это лишь необходимый минимум для начала рассмотрения претендента.
Оглавление
I. Общие критерии
1. Определитесь с целевой аудиторией
Можно разместить сервис в каталоге только для части аудитории ВКонтакте, например, ограничив его:
Очень желательно, чтобы сервисы, претендующие на место в каталоге, были интересны и понятны большинству нашей аудитории. Но если это не так, сразу определите, на какую аудиторию требуется ограничить показ сервиса.
2. Основная задача должна решаться внутри сервиса
Мы хотим, чтобы пользователям ВКонтакте было комфортно взаимодействовать с вашими сервисами, а вы — эффективно решали свои задачи.
А значит, главные функции сервисов должны быть доступны без перехода на сторонние ресурсы.
Например, сервис об автомобильной страховке, в котором есть полноценный расчет и показ стоимости — несет ценность для пользователя, даже если для оформления самой страховки предлагает перейти на сторонний сайт. А приложение, представляющее собой только лишь список названий книг и ссылки на сторонний интернет-магазин, не решает никаких пользовательских задач и в каталог допущено не будет.
3. Сервис должен стабильно работать
Ваш сервис должен быстро загружаться, не должен вылетать и содержать в себе очевидные ошибки.
4. Сервис должен хорошо выглядеть.
Мы рекомендуем использовать библиотеку компонентов VK UI для обеспечения комфортной и узнаваемой навигации внутри сервиса, схожей с нативным приложением. Если библиотека не используется в приложении — дизайн должен быть продуманным, понятным и удобным для пользователя.
Если вы сомневаетесь, как лучше оформить тот или иной элемент интерфейса, посмотрите, как он реализован в официальном клиенте ВКонтакте на iOS или Android.
5. Для взаимодействия с данными пользователя требуется использовать библиотеку VK Bridge
Используйте события библиотеки VK Bridge, если вам необходимо получать от пользователя какие-либо данные, к примеру: имя, почту, номер телефона или координаты в пространстве.
Обратите внимание: для VK Mini Apps, разработанных для использования на мобильных клиентах в любом случае требуется подключить и инициализировать VK Bridge для корректной работы сервиса.
6. Сервис должен подходить под правила размещения рекламных объявлений ВКонтакте и правила платформы
На нынешнем этапе размещение сервиса в каталоге равносильно знаку качества или огромному синему значку «ВКонтакте одобряет».
По тем или иным причинам не все тематики мы можем одобрить для размещения в каталоге. Можно ориентироваться на рекламные правила: если мы готовы сервис прорекламировать, то с большой вероятностью готовы разместить на нашей площадке.
II. UX/UI
Если вы хотите, чтобы сервис пользовался популярностью, он должен быть удобным и привлекательным для пользователя. Способов оформить приложение — великое множество и сказать заранее, как сделать хорошо именно ваш, невозможно, а уж где можно ошибиться — тем более (на самом деле всё просто: ошибиться можно везде). Но мы постарались собрать самые яркие и распространенные моменты, которые обращали на себя внимание при оценке.
1. Сервис должен одинаково хорошо работать на всех поддерживаемых платформах
Сейчас сервисы работают на мобильных клиентах iOS (v4.9), Android (5.18), а также в мобильном и десктопном вебе.
Также есть особенности старых операционных систем: для корректной работы на версиях Android ниже 5.1 необходимо подключать библиотеку core-js и импортировать компоненты Map и Set.
Вы можете в управлении приложением выбрать платформы, на которых будет показываться сервис: только на мобильных устройствах (браузеры и мобильные клиенты VK), только на десктопе или на каждой из платформ. Дополнительно мы можем ограничить видимость сервиса в каталоге в зависимости от платформы (iOS или Android).
Если функциональность сервиса ограничена по географии, версии или типу операционной системы, версии мобильного приложения и так далее — сделайте заглушку для неохваченных пользователей, чтобы они понимали, почему приложение не загружается/не пропускает их дальше. То же касается и устаревших версий ОС, в случае если вы не планируете поддерживать работу сервиса в них.
Если вы используете VKUI styleguide — обращайте внимание на поля компонентов. На Android и iOS они могут различаться.
При тестировании сервиса также не забудьте проверить функциональность на всех планируемых платформах.
2. Используйте атрибуты тега @viewport, указанные в документации
Иначе на некоторых устройствах ваш сервис может плохо выглядеть и плохо скроллиться.
3. Уделите внимание PanelHeader
4. Позаботьтесь о навигации
5. Продумайте удобные кнопки, читаемые шрифты
При разработке приложения важно помнить, что аудитория ВКонтакте — десятки миллионов пользователей с самыми разными устройствами: приложение должно быть одинаково удобным на экранах любого размера.
6. Поработайте над текстами
7. Поддержите работу с цветовыми схемами
Мобильные клиенты ВКонтакте могут иметь разные цветовые схемы. Подготовьте переход в тёмную тему для своих пользователей при помощи специального события. Их глаза будут вам благодарны.
III. Работа с разрешениями и данными пользователя
1. Если в сервисе используется персонализированная информация — защитите её
Если в вашем сервисе используются персонализированные данные, полученные через клиентские события — необходимо на сервере проверять подпись этих данных, чтобы защитить от подмены и не отдать сенситивные данные посторонним.
Теперь человеческим языком: если вы получаете идентификатор пользователя, номер телефона или почту событиями VK Bridge — хитрый пользователь может пробраться в код вашего приложения, подменить свой идентификатор на идентификатор Павла Дурова и смотреть на сервис его глазами. Чтобы этого не произошло — необходимо проверять идентификатор пользователя при помощи подписи параметров запуска, а номер и почту при помощи возвращающегося поля sign и не завязывать важную логику на непроверенные данные.
2. Сервису стоит использовать библиотеку VK Bridge для получения данных пользователя.
Использование сервиса должно быть максимально удобным и приятным для человека, так что если какие-то данные вы можете помочь ему ввести, стоит это сделать, использовав события нашей библиотеки.
Таким образом стоит обрабатывать:
Имя, пол, фото и некоторые другие данные можно сразу подставлять без отдельного запроса прав у пользователя.
Обратите внимание: если в вашем сервисе требуются и почта, и номер — предпочтительно использовать для их получения карточку контактов. То же верно для запроса домашнего адреса.
3. Запрашивать доступ к данным следует в тот момент, когда они нужны
Показывать тултипы с какими-либо запросами разрешений без контекста и объяснения — плохая практика, ведущая к снижению конверсии и показателей эффективности. Нельзя запрашивать всё заранее «на всякий случай».
Это касается любых запросов доступа, которые показываются как всплывающее окно. К примеру: почта, номер, геопозиция, доступ к работе с API (получение токена).
Хорошо: запросить доступ к почте или номеру при постановке курсора в соответствующее поле ввода.
Плохо: запросить доступ при заходе в приложение или при переходе к экрану, содержащему форму для ввода данных.
4. Объясняйте, для чего запрашиваете разрешения
Пользователь всегда должен знать, для чего выдаёт вам номер телефона или разрешает доступ к геопозиции.
Постарайтесь подготовить пользователя к появлению запроса, например, вызывайте его по нажатию на кнопку или на поле ввода информации.
Это касается любых запросов доступа, которые показываются в сервисе как всплывающее окно. К примеру: почта, номер, геопозиция, доступ к работе с API (получение токена).
IV. Функциональность сервиса
1. Подумайте о разграничении аудитории
Если функциональность сервиса ограничена по географии, версии или типу операционной системы, версии мобильного приложения или как-то ещё, сделайте заглушку для неохваченных пользователей, чтобы они понимали, почему приложение не загружается / не пропускает их дальше.
2. Будьте осторожны с UGC
UGC (User-generated content или пользовательский контент) — это оригинальный контент, который создается аудиторией сервиса.
Внедрение возможности оставлять пользовательские посты, изображения, видео и прочие виды контента несёт за собой дополнительные обязательства со стороны разработчика.
Сервисы, которые содержат создаваемый пользователями контент, должны соответствовать перечисленным ниже требованиям:
3. Связь с пользователем
Предпочтительно использовать внутренние каналы связи, чтобы пользователю по возможности не приходилось лишний раз переходить между окнами и покидать приложение.
В VK Mini Apps предусмотрены два основных канала связи:
В обоих случаях важно не переусердствовать с количеством поставляемой информации и не перегружать каналы. Если вы используете пуш для второстепенной информации — велика вероятность, что пользователь от уведомлений отпишется и вы не сможете более напомнить о себе в тот момент, когда это будет действительно нужно.
V. Безопасность в сервисе
Подробнее о безопасности сервисов вы можете прочитать в этой замечательной статье: https://vk.com/@vkappsdev-vk-mini-apps-security
Даже если ваш сервис — новостной агрегатор, не использующий знаний о конкретном пользователе и не имеющий личного кабинета — следует соблюдать достаточный уровень гигиены при разработке.
1. Проверяйте подпись полученных на клиенте данных
Если в вашем сервисе используются персонализированные данные, полученные через клиентские события — необходимо на сервере проверять подпись этих данных, чтобы защитить от подмены и не отдать сенситивные данные посторонним.
Теперь человеческим языком: если вы получаете идентификатор пользователя, номер телефона или почту событиями VK Bridge — хитрый пользователь может пробраться в код вашего приложения, подменить свой идентификатор на идентификатор Павла Дурова и смотреть на сервис его глазами. Чтобы этого не произошло — необходимо проверять идентификатор пользователя при помощи подписи параметров запуска, а номер и почту при помощи возвращающегося пол sign и не завязывать важную логику на непроверенные данные.
2. Не храните на клиенте посторонних важных данных
Таких, например, как сервисный ключ вашего приложения. Даже если очень хочется вызывать методы на клиенте с сервисным ключом — помните, что он может быть перехвачен со стороны пользователя, а аудитория, подписавшаяся на уведомления, к примеру, может получить незапланированные уведомления со смешным текстом.
3. Защитите свои базы данных от постороннего вмешательства
Если есть операции с записью в базу, убедитесь, что поддержаны лимиты, флуд-контроль.
VI. Я всё прочитал и сделал хорошее приложение
Зайдите в управление вашим приложением и перейдите во вкладку «Модерация» в левом меню. Там вы можете отправить заявку на размещение в каталоге. Во вкладке «Информация» проверьте, добавили ли вы описание, обложки и скриншоты сервиса.
Мы рассматриваем каждое приложение и, при необходимости, даем рекомендации по улучшению UX/UI или логики приложения. Вы вносите правки, мы снова рассматриваем ваш сервис, так до достижения качественных UX/UI в сервисе. Этот процесс может занимать в среднем около 14 дней, в зависимости от количества необходимых доработок вашего сервиса.
Это первый этап модерации.
Когда сервис уже выглядит, как готовый к публикации, мы отправляем его в программу бета-тестирования для более тщательного изучения функциональности приложения. Если доступа к трекеру у вас пока нет — ничего страшного.
Программа бета-тестирования для вашего сервиса VK Mini Apps работает следующим образом:
Подробнее о программе тестирования мы расскажем после первого этапа модерации приложения и внесения правок.
Минимальный срок нахождения в программе бета-тестирования до запуска в каталоге — 3 дня. Рекомендуемый — 7 дней.
Сервисы выпускаются в тестирование каждый четверг, в ваших интересах, чтобы сервис был готов к этому этапу до 18.00 среды.
Учитывайте это при планировании запуска.
В будущем рекомендации и система модерации будут дорабатываться и уточняться. Важно помнить, что соответствие всем пунктам не гарантирует молниеносного добавления в каталог, это лишь необходимый минимум для рассмотрения кандидата.
