база знаний VK Mini Apps / Хабр
Полезные материалы на каждый этап жизненного цикла
Мы много рассказываем о том, как создавать мини-приложения и запускать их на платформе VK Mini Apps. И видим, сколько классных идей у разработчиков — и опытных, и начинающих. Хочется, чтобы каждый мог воплотить свою задумку в компактном сервисе, который легко войдёт в жизнь пользователя.Так что в этой статье собираем все материалы, рекомендации и полезные ссылки. Сгруппируем их по этапам жизненного цикла мини-приложения: от идеи до релиза и монетизации.
Находим идею
Ищите идею удобного сервиса — в своём и чужом опыте, в проблемах людей, в любой сфере жизни. Устраивайте мозговые штурмы сами с собой, с родственниками или друзьями — и фиксируйте каждую мысль. Такие записи помогут спланировать разработку так, чтобы потом не пришлось откатываться к началу и добавлять упущенную функцию.→ Что почитать:
- Как
придуматьзаметить идею мини-приложения — статья от VK Mini Apps.
Проектируем и прототипируем
Когда идея полностью сформулирована, приступайте к проектированию. Здесь творчество сменяется рутинными, но очень важными процессами — именно они сберегут вам нервы и ресурсы на этапе реализации.Наглядный пример стоимости ошибки на разных этапах разработки:
Убедитесь, что идея жизнеспособна. Если планируете зарабатывать на своём мини-приложении и нужен будет трафик — проведите исследование потенциального рынка. Соберите данные, пообщайтесь с целевой аудиторией, изучите её потребности и боли. Составьте две-три пользовательские истории. Займитесь техническим проектированием: составьте список фич, которые хотите видеть в MVP и в финальной версии.
После этого можно переходить к созданию прототипа вашего будущего приложения.
→ Что посмотреть:
- Лекция менеджера платформы VK Mini Apps Андрея Ошанина — о проектировании, работе с аудиторией, анализе рынка и инструментах, которые помогут быстро набросать прототип.
- Проектирование и прототипирование — конспект лекции, чтобы закрепить опорные тезисы.
Кастомизируем UX/UI
На этом этапе предстоит балансировать между «Делаю, как мне нравится», «Делаю как умею» и «Делаю, как будет удобно пользователям».Найти и сохранить такое равновесие сложно даже опытным дизайнерам и разработчикам. Так что этап кастомизации — поле бесконечных экспериментов, А/B-тестов и проверок гипотез. У тех, кто создаёт мини-приложения, есть мощное подспорье — VKUI. Это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от приложения VK.
→ Что пригодится:
- VKUI styleguide — все доступные компоненты интерфейсов, чтобы ваше мини-приложение выглядело как нативный клиент. Бонус: ассеты VKUI для Figma — они бесплатны сами по себе, но доступны только в платной версии программы.
- Туториал по React — пригодится, если вы ещё не работали с этим фреймворком. Затем можно возвращаться к компонентам VKUI.
- VK Icons — набор SVG-иконок, представленный в виде React-компонентов.
- Happy Santa VK App UI Style Guide — полезный материал для десктопной реализации мини-приложений.
- Лекция дизайнера из Команды ВКонтакте Алексея Мазелюка — если хотите наглядности и примеров.
- Рекомендации по UX/UI от наших экспертов — раздел большой статьи о критериях модерации на платформе VK Mini Apps.
Разрабатываем
Наконец можно приступить к реализации. Делимся всеми ссылками, которые вам помогут. → Must read перед разработкой:- Правила размещения сервисов на платформе VK Mini Apps — документ № 1.
- Критерии модерации сервисов VK Mini Apps — большая статья о том, как попасть в каталог.
- Быстрый старт — подробный официальный материал о том, как запустить своё первое мини-приложение.
- Как создать первое приложение на VK Mini Apps — опыт стороннего разработчика.
- Знакомство с API ВКонтакте — статья с подробным описанием методов и объектов интерфейса, процесса регистрации приложения, авторизации пользователя, прав доступа.
- Обзор API ВКонтакте от менеджера проекта VK Mini Apps Ксюши Черотченко — принципы работы и методы API.
- Документация VK Mini Apps.
- Деплой сервиса в GitHub Pages — инструкция.
- CodeSandbox — полезный сервис: кнопка Add Dependency позволяет добавлять нужные библиотеки, а Save создаст уникальную ссылку на ваш проект.
- Web Skills — дорожная карта для начинающего веб-разработчика. Обзор областей знания и концепций со ссылками на учебные материалы (на английском).
- Воркшоп от разработчика мини-приложений из VK Team, часть 1 — Глеб Воронцов показывает техническую часть разработки: панель администрирования, инструменты и многое другое.
- Воркшоп по разработке мини-аппа, часть 2, — финишная прямая: VKUI, VK Bridge и наглядный кодинг.
- Навигация и цветовая схема — подробная статья о том, как сделать навигацию в мини-аппе для платформ iOS и Android, включая свайпы и аппаратные кнопки.
- Poo-Mini-App — github-репозиторий с примером реализации мини-аппа.
- VK Bridge Sandbox — песочница для тестирования VK Bridge.
Проходим модерацию и тестирование
Когда в прод уехало последнее обновление, вы более-менее уверены в качестве мини-приложения и готовы к тестированию — самое время отправить ваш проект на модерацию.Модераторы проверят, соответствует ли он правилам размещения сервисов на платформе VK Mini Apps и учтены ли критерии размещения. Ещё они могут отметить, где стоит доработать UX и UI. Замечания модераторов помогут улучшить приложение, а на финальной проверке — ещё и устранить уязвимости, угрожающие данным пользователей.
→ Что посмотреть:
- Лекция о том, как подготовиться к модерации и попасть в каталог — от менеджера проектов ВКонтакте Антон Нижегольцев.
Чтобы сервис попал к ним в ближайший четверг (актуально для каждой недели), нужно написать модератору, что вы готовы к тестированию, в понедельник до 18:00 по московскому времени.
В среднем бета-тестирование занимает около двух полных недель. Есть смысл постараться попасть в него как можно раньше — особенно если вы претендуете на грант от VK Fresh Code. Участники конкурса размещают готовое мини-приложение в каталоге до заявленной даты. Для нынешней, четвёртой волны программы — это 21 октября 2020 года.
Финальная модерация: выходим в каталог
Все репорты закрыты, и ваш мини-апп вышел из тестирования почти идеальным. Пора ещё раз напомнить о себе модератору — в том же тикете, где вы общались ранее.Останется сделать приятные мелочи: загрузить иконки и обложки для отображения в каталоге и на сниппетах. После этого ваш проект опубликуется в официальном каталоге платформы VK Mini Apps.
После релиза: продвигаем и монетизируем
Активная аудитория растёт, количество показов рекламы увеличивается, система монетизации работает. Что дальше?Главное — не останавливаться на достигнутом и продумать качественную рекламную кампанию для мини-приложения.
Продвижение
→ Что почитать:
- Гид по Академии ВКонтакте: как начать разбираться в продвижении — статья от команды ВКонтакте для бизнеса. Понятно о том, как создавать интересный контент и для чего нужна сегментация аудитории.
- Продвижение приложений на платформе VK Mini Apps. Быстро и эффективно — мастер-класс Эдуарда Мухина, сертифицированного специалиста по рекламе ВКонтакте.
- для рекламы мини-аппов существует отдельный аукцион — а значит, нет конкуренции с предложениями заработков и записью на ноготочки. Стоимость показов и переходов в 2–3 раза дешевле, чем у обычных объявлений;
- разработали много нативных способов продвижения и инструментов для тонкой настройки аудитории;
- регулярно проводим акции для разработчиков мини-приложений — иногда можно вообще не тратиться на рекламу самим.
Сейчас ВКонтакте есть две модели монетизации мини-приложений: это покупки внутри приложений и реклама. Их можно использовать отдельно или вместе.
→ Что почитать:
- Монетизация сервисов VK Mini Apps — подробно о том, как зарабатывать на мини-приложении.
- AppsCentrum. Интеграция рекламы — инструкции, как правильно добавить в своё мини-приложение баннеры и прероллы.
Мы будем дополнять эту статью материалами о новых методах и технологиях на платформе VK Mini Apps — так что возвращайтесь.
Разработка приложений VK Mini Apps
Хотите опередить конкурентов и сделать свои услуги самыми доступными? Запустите приложение для вашего бизнеса на платформе VK Mini Apps. Сервисы работают внутри официального клиента ВКонтакте, а значит, вашим пользователям не придется тратить время на установку и регистрацию.
Мы сертифицированные разработчики приложений Вконтакте и являемся официальными партнерами VK
Данные для связи
Проще связаться с нами чем читать это скучное описание 😉
Телеграм WhatsApp Почта ТелефонПримеры
Икигай — тест личности психология
Познайте себяОплата мобильной связи
Пополните баланс вашего мобильногоТренировки
Простой путь, чтобы начать тренироватьсяОплата ТВ
Оплата цифрового телевиденияVK Games store
Магазин игр с кэшбекомОракул
Узнай свое будущее!Заплати за интернет
Быстрая оплата домашнего интернетаКурсы валют
Актуальные курсы валютFitQuest — VK Mini Apps
Создание сервиса персональных тренировок на платформе VK Mini Apps.Кто звонит
Создание сервиса для проверки неизвестных номеров на платформе VK Mini Apps. Теперь «Кто звонит» работает на всех мобильных устройствах“Сервисы ВКонтакте глубоко интегрированы в привычные сценарии поведения пользователей, дают людям возможность решать задачи прямо здесь и прямо сейчас. Чтобы добиться максимальной отдачи для своего бизнеса, нужно разработать мобильное приложение, которое позволит клиенту получать все услуги без необходимости посещать отдельные ресурсы, будет содержать современные дизайнерские решения и соответствовать концепции UI/UX самой соцсети. Мы уже запустили на платформе VK Mini Apps несколько своих проектов и готовы помочь в этом другим компаниям”
Антон Соколов
Системный архитектор ДеасофтСоздание сервисов ВК решает два задачи.
Какая у вас?Чтобы сервис попал в каталог ВКонтакте, он должен быть понятен и интересен большинству пользователей. Мы разрабатываем сервисы, отвечающие этим задачам
1. Открыть новый канал продаж
Сервис ВКонтакте нужен как инструмент продаж для существующего бизнеса, чтобы привлекать новых клиентов и расширять сферы влияния. Возможности: вести запись клиентов, продавать свои товары и услуги, проводить акции, привлекать партнеров.
С чего начать разработку сервиса ВКонтакте
- Вы рассказываете о специфике деятельности и бизнес-процессах вашей компании
- Мы собираем требования, выявляем проблемы
- Определяем цели проекта
2. Создать бизнес
Платформу VK Mini Apps можно использовать для запуска нового проекта. Соцсеть не ограничивает в выборе способа монетизации. Главное условие – приложение должно быть интересно людям. Возможности: реализовать бизнес-идею, запустить стартап.
С чего начать разработку приложения ВКонтакте
- Вы рассказываете о концепции проекта
- Определяем задачи и аудиторию
- Предлагаем варианты монетизации проекта
- Решаем, как будут выстроены бизнес-процессы
Наши аналитики помогут сформулировать задачи проекта и описать требования. Оставьте заявку или позвоните по телефону и мы ответим на все вопросы
8 (812) 602-77-37
Этапы разработки сервисов ВКонтакте
Мы используем проверенную методологию ведения проекта, что позволяет соблюдать сроки, укладываться в бюджет и создавать на платформе VK Mini Apps качественные сервисы
-
1. Сбор требований
1.
Сбор требованийЗнакомство и интервью. Аналитики Деасофт задают вам вопросы и на основе полученных данных формируют основные сущности и элементы интерфейса сервиса.
Результат работы
- Сформулирована концепция приложения
- Проведен аудит бизнес-процессов
- Описаны функциональные требования
-
2. Разработка прототипов
2. Разработка прототипов
С учетом полученных данных создаем интерактивный прототип, благодаря которому видно, каким образом будет работать сервис и как пользователи ВКонтакте смогут взаимодействовать с его интерфейсами.
Результат работы
- Созданы интерактивные прототипы каждого интерфейса
- Разработана структура проекта
-
3. Разработка техзадания
3. Разработка техзадания
После согласования всех моментов приступаем к разработке технического задания. Наши специалисты умеют понятным языком описывать функциональные требования и элементы интерфейса. Затем согласовываем сроки и составляем смету.
Результат работы
- Разработано качественное и конкретное техзадание
- Описаны возможности и логика каждого интерфейса с прототипами
- Создан Backlog (смета) с описанием сроков и стоимости
-
4. Создание сервиса ВКонтакте
4. Создание сервиса ВКонтакте
При успешном согласовании техзадания переходим к разработке дизайна, программированию функциональности, верстке. Каждые две недели предоставляем заказчику работающий сервис с новыми возможностями.
Результат работы
- Разработано приложение ВКонтакте, соответствующее техзаданию и требованиям заказчика
-
5. Ввод в эксплуатацию
5. Ввод в эксплуатацию
Сдаем проект в срок и приступаем к тестированию. Если выявляем недочеты, тут же их исправляем.
Результат работы
- Качественный сервис на платформе VK Mini Apps
- Высокоустойчивая масштабируемая система
- Дизайн по всем современным канонам
-
6. Техподдержка
6. Техподдержка
Деасофт возьмет на себя всю ответственность по обслуживанию и поддержке разработанного сервиса ВКонтакте.
Результат работы
- Поддержка 24/7
- Функциональные расширения
- Эффективно работающий инструмент для бизнеса
Реализованные проекты
Последние проекты, которые мы реализовали в данном направлении
Кто звонит
Создание сервиса для проверки неизвестных номеров на платформе VK Mini Apps. Теперь «Кто звонит» работает на всех мобильных устройствах
Читать подробнее
FitQuest — VK Mini Apps
Создание сервиса персональных тренировок на платформе VK Mini Apps. FitQuest – это индивидуальные программы тренировок, контроль питания, мотивация и поддержка
Читать подробнее
Наши аналитики помогут сформулировать задачи проекта и описать требования. Оставьте заявку или позвоните по телефону и мы ответим на все вопросы
8 (812) 602-77-37
Создание приложения — Разработка метаприложений — Документация
Процесс создания приложения собирает минимальное количество информации, необходимой для создания уникального идентификатора для вашего приложения. Как только вы закончите процесс, вы окажетесь на панели приложений, где вы можете предоставить дополнительную информацию о своем приложении или сразу же приступить к созданию и тестированию.
Шаг 1. Запустите процесс создания приложения
Если вы только что прошли процедуру регистрации, нажмите кнопку Создать первое приложение .
В противном случае перейдите к Программы панель и нажмите Создать приложение .
Шаг 2. Выберите вариант использования
Ваш вариант использования определяет, какие разрешения, продукты и API доступны для вашего приложения.
Выберите Настройка входа через Facebook и нажмите Далее .
Если вы хотите добавить вход через Facebook для бизнеса или игр, а также создать приложения для отслеживания рекламы и управления своим бизнесом, выберите вариант «Другое» при создании приложения.
Если вы выберете Другое , что означает, что вы хотите внедрить рекламу, игры или обмен сообщениями, возможно, в дополнение к входу через Facebook, вы будете перенаправлены на наш процесс создания типов приложений (см. ниже).
Шаг 3: Выберите платформу
Выберите одну или несколько платформ, на которых будет доступно ваше приложение, Нет, я не создаю игру , затем нажмите Далее .
Вам будет предложено предоставить более подробную информацию о выбранных вами платформах. Вы сможете добавить больше платформ в любое время, используя панель инструментов приложения.
Если вы выберете Да, я создаю игру , вы будете перенаправлены на наш процесс создания типов приложений (см. ниже).
Шаг 4. Задайте имя приложения и адрес электронной почты
Введите имя своего приложения и адрес электронной почты, на который мы можем отправлять вам важные уведомления разработчиков. Адрес электронной почты может отличаться от адреса электронной почты, связанного с вашей учетной записью Facebook, просто убедитесь, что он действителен и следите за ним, так как все важные уведомления разработчиков будут отправляться на него. Вы также можете добавить учетную запись Facebook Business Manager, если она у вас есть, затем нажмите Создать приложение .
После завершения процесса создания приложения ваше приложение будет загружено на панель управления приложениями. Панель инструментов приложения позволяет просматривать, добавлять и обновлять сведения, такие как настройки приложения, роли и дополнительные варианты использования, связанные с входом через Facebook. Вы также можете запросить доступ к разрешениям, которые потребуются вашему приложению для выполнения успешных вызовов API к конечным точкам Graph API для ваших вариантов использования.
Процесс создания типа приложения
Если вам нужно внедрить больше продуктов, таких как реклама, игры или обмен сообщениями, в дополнение к входу в Facebook, или вам не нужен вход в Facebook, вы выберете тип приложения во время процесса создания приложения вместо варианта использования.
Шаг 1. Выберите тип приложения
Тип вашего приложения определяет, какие продукты и API доступны для вашего приложения. Если вы впервые создаете приложение и только изучаете процесс создания приложения, выберите вариант Нет . Позже, когда вы лучше познакомитесь с нашими продуктами и API, обратитесь к нашему документу по типам приложений, чтобы определить, какой тип приложения лучше всего подходит для вашего приложения, а затем создайте новое приложение и выберите подходящий тип.
Шаг 2. Задайте имя приложения и адрес электронной почты
Введите название вашего приложения и адрес электронной почты, на который мы можем отправлять вам любые важные уведомления разработчиков. Адрес электронной почты может отличаться от адреса электронной почты, связанного с вашей учетной записью Facebook, просто убедитесь, что он действителен и следите за ним, так как все важные уведомления разработчиков будут отправляться на него.
Вы также можете добавить учетную запись Facebook Business Manager, если она у вас есть, затем нажмите Создать приложение .
После завершения процесса создания приложения ваше приложение будет загружено на панель приложений.
Сборка и тестирование — Разработка метаприложений — Документация
В этом документе описывается базовый процесс разработки и тестирования вновь созданных приложений Facebook. В нем также описаны инструменты и настройки, доступные на панели приложений, которые могут помочь вам во время разработки.
Общий процесс
Процесс разработки зависит от потребностей вашего приложения, но основной поток начинается с чтения документации по каждому продукту, SDK и API, на которые будет опираться ваше приложение. Все наши продукты представлены на странице developer.facebook.com/products, а всю нашу документацию можно найти на странице developments.facebook.com/docs.
После того, как вы определили и прочитали все соответствующие наборы документов, следующим шагом будет внесение изменений в кодовую базу вашего приложения и настройка всех параметров панели приложений, которые могут потребоваться для продуктов, SDK и вызовов API, которые вы внедряете. Если другие люди будут помогать вам разрабатывать и тестировать ваше приложение, вы можете назначить им роли приложения, чтобы они могли настраивать параметры приложения и помогать тестировать разрешения и функции Graph API.
Наконец, чтобы убедиться, что вы все правильно реализовали, вы можете протестировать свое приложение, используя собственную учетную запись разработчика Facebook или с тестовыми пользователями, которые имитируют реальных пользователей Facebook.
Начнем с того, что большинство приложений Facebook используют Graph API для получения и получения данных из Facebook. Конечные точки Graph API требуют разрешений, которые приложения могут запрашивать у пользователей приложений путем реализации входа через Facebook. Поскольку получение данных в Graph API и из него является обычным действием, у нас есть набор SDK, упрощающий вызов конечных точек Graph API. Итак, многие разработчики начинают с этих четырех наборов документов.
Варианты использования приложения
При первом создании приложения необходимо выбрать вариант использования. Сценарии использования определяют продукты, которые вы сможете добавить в приложение, а также разрешения и функции, которые можно запросить для утверждения в процессе проверки приложения.
Например, если вы выберете «Вход через Facebook» в качестве основного варианта использования вашего приложения в процессе создания, вы сможете добавить дополнительные варианты использования и связанные с ними разрешения и функции. Каждый вариант использования имеет свой собственный набор разрешений и функций на выбор. Когда вы добавите дополнительный вариант использования, вы попадете на страницу разрешений на панели приложений, где вы сможете выбрать разрешения и функции, связанные с этим вариантом использования.
Типы приложений
Если вы создаете приложение, которое не использует вариант использования, указанный на панели управления приложения, вы выберете тип приложения.
Типы приложений определяют продукты, которые можно добавить в приложение на панели приложений, и какие разрешения и функции можно запросить для утверждения в процессе проверки приложения.
Узнайте больше о типах приложений.
Режимы приложений
Режимы приложений применяются к некоммерческим приложениям и определяют, какие разрешения и функции могут использовать ваше приложение, а также кто может использовать ваше приложение.
Приложениям в режиме разработки могут быть предоставлены любые разрешения, но только от пользователей приложения, которые имеют роль в самом приложении. Кроме того, все функции активны, но только для пользователей приложения, у которых есть роль в приложении.
Разрешения для приложений в интерактивном режиме могут быть предоставлены кем угодно, но только те разрешения, которые были одобрены в процессе проверки приложений. Точно так же функции активны для всех пользователей приложения, но только для функций, одобренных в ходе проверки приложений.
Все недавно созданные некоммерческие приложения запускаются в режиме разработки, и вам не следует изменять его, пока вы не завершите всю разработку и тестирование.
Обратите внимание, что:
- Типы приложений также влияют на то, какие разрешения доступны для приложения. Например, пользовательские разрешения недоступны для бизнес-приложений, а бизнес-разрешения недоступны для потребительских приложений. Приложения, выбравшие тип бизнес-приложения, вообще не имеют режимов приложения и вместо этого полагаются на уровни доступа, которые ведут себя аналогично.
- Приложения, запрашивающие расширенный доступ для разрешений, возможно, должны быть подключены к проверенной компании.
Узнайте больше о режимах приложения.
Роли приложений
Приложения в режиме разработки могут использовать только люди, которым была предоставлена определенная роль в самом приложении. Если вы работаете с командой разработчиков и тестировщиков, вы можете назначить роли каждому человеку, чтобы они могли помочь в процессе разработки и тестирования.
Узнайте больше о ролях приложений.
Testing
Страница Testing содержит все варианты использования вашего приложения и соответствующие разрешения, к которым вы запросили доступ. Там же можно найти требования к тестированию для App Review и запуска.
Вы должны использовать обозреватель API Graph или создать учетные записи тестовых пользователей, чтобы сделать необходимые тестовые вызовы API перед отправкой на проверку приложения. Некоторые разрешения не требуют тестирования перед проверкой приложения, но мы рекомендуем протестировать все разрешения, чтобы убедиться, что приложение работает должным образом.
После завершения всех необходимых тестовых вызовов API вы готовы к проверке приложения.
Имейте в виду, что:
- Тестовые вызовы API появляются на странице тестирования в течение 24 часов. Вызовы
- Test API действительны только в течение 30 дней и должны быть выполнены в течение 30 дней до отправки на проверку приложения.
Тестовые пользователи
Тестовые пользователи — это тестовые учетные записи, в которые вы можете войти, чтобы имитировать реальных пользователей Facebook при тестировании вашего приложения. Тестовые пользователи не могут взаимодействовать с реальными пользователями Facebook, и любой контент или взаимодействия, созданные тестовыми пользователями, видны только другим тестовым пользователям и всем, у кого есть роль в вашем приложении.
Узнайте больше о тестовых пользователях.
Тестовые страницы
Тестовые страницы — это страницы, созданные тестовыми пользователями, которые вы можете использовать для имитации реальных страниц Facebook при тестировании вашего приложения. Тестовые страницы не могут быть обнаружены реальными пользователями Facebook, и с ними могут взаимодействовать только другие тестовые пользователи или люди, которые играют определенную роль в вашем приложении.
Узнайте больше о тестовых страницах.
Обратный вызов для удаления данных
Если вы реализовали вход через Facebook или если ваше приложение относится к потребительским или мгновенным игровым приложениям, вы должны реализовать обратный вызов для удаления данных, прежде чем его можно будет переключить в режим реального времени. Мы будем вызывать URL-адрес обратного вызова для удаления данных вашего приложения каждый раз, когда один из пользователей вашего приложения запрашивает удаление его данных.