Как сделать vk mini app

Library for quick and efficient development of VK Mini Apps based on VK Bridge methods.

Unlike VK Bridge, VK Mini Apps API already contains all the ready-made Javascript-functionality for interacting with the official clients.

Install the library via yarn

Use in your code in the following way

For use in a browser, include the file dist/index.umd.js and use as follows

script src pl-s»>index.umd.js»>script> script> const VKMiniAppAPI > = window.vkMiniAppsAPI; // Creating API instance const api = new VKMiniAppAPI(); // Initializing app api.initApp(); // Using methods api.getUserInfo().then(userInfo => console.log(userInfo.id); >); script>

At the link above you can find a full API Reference of the library. The API reference was generated by TypeDoc.

vk-mini-apps-api’s People

Contributors

Stargazers

Watchers

Forkers

vk-mini-apps-api’s Issues

Проблема с openCodeReader

Проблема с кодировкой при использовании функции storageSet в мобильных браузерах

При использовании функции Storage set в мобильном браузере в хранилище сохраняются знаки вопросов вместо кириллических символов.

VK Mini Apps или как мы расширяем функционал ВКонтакте / Сергей Густун

const api = new VKMiniAppAPI(); api.initApp(); let test = «Тестовая строка на кириллице»; api.storageSet(‘test’, test).then(keyValue => < console.log(«сохранили переменную test в хранилище»); let TestKeys = []; TestKeys.push(«test»); api.storageGetMultiple(TestKeys).then(StorageData =>< Object.keys(StorageData).map(function(key, index) < let resultString = StorageData[key]; console.log(resultString); // в версии m.vk.com выведет знаки вопроса // в приложениях и десктопе отработает корректно >); >);

Как получить массив друзей?

Метод getFriends вызывает интерактивный список.

JavaScript SDK имеет friends.get, но вроде как JavaScript SDK поддерживается только до 1 мая 2020.

Как актуально получить список друзей (не интерактивный) для последующего анализа?

VKConnectProvider

Неудобно, что connect: VKConnect имеет модификатор доступа protected . Хотелось бы public ; приходится писать ещё один импорт, чтобы, например, вызвать isWebView()

How to use when running outside of VK platform?

I’ve faced an issue. I’m currently using the api to get user info. When I’m trying to run the same code outside of VK (just from my browser), it neither fails nor succeeds. It seems it is stuck in some constant loop because await is never finished and it doesn’t throw anything either.
What should I do in that case?

Через getEmail нельзя получить подпись

Аналогично с getPhoneNumber — там можно получить номер телефона и подпись

return this . connect . sendPromise ( ‘VKWebAppGetEmail’ ) . then ( data => data . email ) ;

Не работает код из примера api.getUserInfo() (в iFrame)

В файл main.ts (Vue js) поместил код из примера:

Мини-приложения ВКонтакте — VK Mini Apps. Преимущества и примеры использования

Выложил на Github Pages.
В настройках приложения в поле Адрес IFrame прописал «https://ww33.github.io/vue-chat/»

Приложение открывается, но в консоль ничего не выводится — ни then, ни catch.

Новый параметр setViewSettings

Появилась стилизация navigation bar на Android:
VKCOM/vk-bridge#24 (comment)

Как получить auth_key с сервера ВКонтакте?

Из документации:
auth_key вычисляется на сервере ВКонтакте следующим образом:
auth_key = md5(api_id + » + viewer_id + » + api_secret)

Как получить auth_key с сервера VK в приложении? В параметрах url его нет, методов для его получения не видно.

Не работает в браузерах после обновления vk connect на vk bridge

Обновил пакет vk connect на vk bridge.

После этого библиотека vk-mini-apps-api перестала работать в браузерах, как в десктопных, так и на мобильных. В нативных клиентах работает корректно. Пример кода ( в самом приложении используется чуть другой, но этот тоже не работает)

Куда смотреть, куда копать чтобы заработало? Как понять в чем ошибка? смотрел запросы в серверу через инструменты разработчика в хром , запросы к серверу вк не идут, в общем списке не показываются.

Источник: giter.club

VK Mini App Boilerplate

Чтобы понимать, что здесь происходит вы должны знать что такое VK Mini Apps, ReactJS и React Redux.

Установка:

git clone git://github.com/iSa1vatore/vk-mini-app-boilerplate.git

Перейдите в созданную папку и выполните команды: npm install и npm start , последняя запустит сервер для разработки на localhost:10888

Отлично, теперь перед нами демонстративное приложение, можно править код и все изменения сразу будут видны на нашем сервере при помощи «Hot Reloading».

KIT:

Что реализовано:

• Поддержка темы нативного клиента
• Поддержка iOS swipe back для панелей
• Обработка хардверной кнопки «назад» для Android
• Сохранение позиции скролла для панелей и элементов
• Scroll To Top при нажатии на иконку в Epic`e
• Получение токена пользователя
• Запросы к API ВКонтакте
• Сохранение данных в форме при смене панели
• Роутер

Роутер:

Действия которые роутер может выполнить:

• setStory(story, initial_panel) — Устанавливает активную Story у Epic’a, View и активную панель.
• setPage(view, panel) — Устанавливает активный View и Panel
• goBack(from) — Совершает действие назад, будь то закрытие модального окна, переход на прошлую панель, закрытие попапа и т.п;
• openPopout(popout) — Открывает поппап.
• closePopout() — Закрывает поппап.
• openModal(id) — Открывает модальную страницу по её ID.
• closeModal() — Закрывает модальную страницу или открывает прошлую страницу.

Примеры того как это все работает смотрите в исходниках ¯_(ツ)_/¯, там все просто.

Сохранение позиции скролла:

Для сохранения позиции горизонтального скоролла нужно:

• Указать ID для элемента HorizontalScroll

• Сохранить позицию при демонтировании

componentWillUnmount() < const = this.props; setScrollPositionByID(«EXAMPLE_TABS_LIST»); >

• Восстановить позицию при монтировании

componentDidMount()

Важно:

В файле index.js на 24 стороке указывается стартовая панель приложения:

store.dispatch(setStory(‘home’, ‘base’));

В данном случае это значит, что приложение запустится с:

Как вы поняли значение ID у Root и стартового View должны совпадать.

В проекте есть 2 файла: «App» и «AppWithoutEpic», первый идет с навигационной панелью Epic, второй без, он подойдет для простых приложений.

import App from ‘./App’;

По умолчанию для примера выбран вариант с Epic навигацией.

В файле по пути /src/js/services/VK.js нужно заменить значение константы APP_ID на ID вашего приложения

Мой VK (вопросы, предложения): Ivan Salvatore

Open Source Agenda is not affiliated with «Vk Mini App Boilerplate» Project. README Source: iSa1vatore/vk-mini-app-boilerplate

Источник: www.opensourceagenda.com

Как создать мини-приложение: база знаний VK Mini Apps

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

Так что в этой статье собираем все материалы, рекомендации и полезные ссылки. Сгруппируем их по этапам жизненного цикла мини-приложения: от идеи до релиза и монетизации.

Ещё больше поддержки для разработчиков — в нашей программе VK Fresh Code: это образовательные курсы и конкурс с общим призовым фондом 15 миллионов рублей. Присоединяйтесь!

Находим идею

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

• Какпридуматьзаметить идею мини-приложения — статья от 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 — опыт стороннего разработчика.

→ VK API и документация:

• Знакомство с 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. Замечания модераторов помогут улучшить приложение, а на финальной проверке — ещё и устранить уязвимости, угрожающие данным пользователей.

→ Что посмотреть:

• Лекция о том, как подготовиться к модерации и попасть в каталог — от менеджера проектов ВКонтакте Антон Нижегольцев.

Следующий шаг — бета-тестирование в системе Testpool. Здесь приложение проверяют ребята из VK Testers.

Чтобы сервис попал к ним в ближайший четверг (актуально для каждой недели), нужно написать модератору, что вы готовы к тестированию, в понедельник до 18:00 по московскому времени.

В среднем бета-тестирование занимает около двух полных недель. Есть смысл постараться попасть в него как можно раньше — особенно если вы претендуете на грант от VK Fresh Code. Участники конкурса размещают готовое мини-приложение в каталоге до заявленной даты. Для нынешней, четвёртой волны программы — это 21 октября 2020 года.

Финальная модерация: выходим в каталог

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

Останется сделать приятные мелочи: загрузить иконки и обложки для отображения в каталоге и на сниппетах. После этого ваш проект опубликуется в официальном каталоге платформы VK Mini Apps.

После релиза: продвигаем и монетизируем

Активная аудитория растёт, количество показов рекламы увеличивается, система монетизации работает. Что дальше?

Главное — не останавливаться на достигнутом и продумать качественную рекламную кампанию для мини-приложения.

Продвижение

→ Что почитать:

• Гид по Академии ВКонтакте: как начать разбираться в продвижении — статья от команды ВКонтакте для бизнеса. Понятно о том, как создавать интересный контент и для чего нужна сегментация аудитории.

→ Что посмотреть:

• Продвижение приложений на платформе VK Mini Apps. Быстро и эффективно — мастер-класс Эдуарда Мухина, сертифицированного специалиста по рекламе ВКонтакте.

Что мы сделали для выгодного продвижения мини-приложений:

• для рекламы мини-аппов существует отдельный аукцион — а значит, нет конкуренции с предложениями заработков и записью на ноготочки. Стоимость показов и переходов в 2–3 раза дешевле, чем у обычных объявлений;
• разработали много нативных способов продвижения и инструментов для тонкой настройки аудитории;
• регулярно проводим акции для разработчиков мини-приложений — иногда можно вообще не тратиться на рекламу самим.

Монетизация

Сейчас ВКонтакте есть две модели монетизации мини-приложений: это покупки внутри приложений и реклама. Их можно использовать отдельно или вместе.

→ Что почитать:

• Монетизация сервисов VK Mini Apps — подробно о том, как зарабатывать на мини-приложении.
• AppsCentrum. Интеграция рекламы — инструкции, как правильно добавить в своё мини-приложение баннеры и прероллы.

Мы будем дополнять эту статью материалами о новых методах и технологиях на платформе VK Mini Apps — так что возвращайтесь. И приглашаем в программу VK Fresh Code: продолжается образовательный блок, а ещё недавно стартовала четвёртая конкурсная волна. Авторы лучших мини-приложений получают по 300 тысяч рублей, половину суммы — в виде сертификата на продвижение ВКонтакте.

Источник: mailsgun.ru