Создание приложения 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.com/developers. Затем перейдите в раздел «Документация» и внимательно его изучите полностью.
Как создать приложение ВК
Перед тем, как сделать приложение для ВК самому, определитесь с его типом. На ресурсе их всего два:
- Iframe проекты создаются с помощью специальных инструментов браузера. Данные принимаются и передаются посредством JavaScript. Люди, запустившие ваш проект, попадут в отдельное окно в браузере, затем смогут им воспользоваться.
- Flash-приложения – файлы с расширением .swf. Они создаются через Adobe Flash, после чего сжимаются в файл и выгружаются на сервер.
Разработка приложений ВК требует определенных навыков, но специальные инструменты социальной сети могут помочь в создании.
Через ВК
Как создать приложение для VK Apps? Для этого следует воспользоваться сервисом от социальной сети. С помощью него разработчики могут создавать свои сервисы для использования внутри мобильного приложения Vk. Следуйте пошаговой инструкции:
- Зайдите на главную страницу сайта Vk Developres (https://vk.com/dev) . Вы должны быть авторизованы в социальной сети.
- Перейдите во вкладку «Мои приложения».
- В открывшемся окне нажмите на кнопку создания проекта.
- Откроется форма с строками для заполнения. Введите название своего проект, выберите платформу, тип и категорию. Также вы можете добавить описание, которое расскажет о всех достоинствах вашего приложения.
- Нажмите на кнопку «Перейти к загрузке» и залейте файл. После чего будет необходимо подтвердить действие, используя мобильный телефон.
Чтобы создать приложения ВК нужна API интеграция. Она позволяет открывать окна установки и настройки проекта, а также приглашение друзей и ввода голосов. Внутри есть возможность получить баланс пользователя и события в случае, если установка или изменение настроек произошло успешно.
Как создать приложение в ВК для группы? Для этого выберите в конструкторе параметр «Встраиваемое приложение», затем поставьте галочку напротив пункта «Приложение сообщества».
После отправки должностные лица социальной сети Вконтакте проверят ваш готовый проект и решат, занесется ли он в специальный каталог.
Программы для разработки
Создание iFrame приложения в ВК возможно посредством специальных программ и сервисов. Это поможет, если вы не хотите тратить время на изучение языков программирования и других тонкостей.
Для создания flash-проектов потребуется научиться работать с программой Adobe Flash. Новичку разобраться с ней сначала непросто, но она позволит создать полноценный и качественный проект любому пользователю ПК.
Если времени нет на изучение основ программирования, то вы можете воспользоваться сервисами и софтом для разработки приложений ВК. Но, как правило, бесплатные версии обладают ограниченным функционалом. Поэтому для получения полноценного готового проекта, придется заплатить иногда немалые деньги. Наиболее популярными программами для мобильных устройств являются:
- конструктор 3apps.ru;
- Appmarkt;
- iBuildApp;
- AppGeyser.
Сервис BeApp позволяет сделать приложение в группе ВК, в которой вы являетесь администратором. Конструктор встраивается в сообщество в несколько кликов. Базовые функции доступны бесплатно. С помощью встроенного редактора вы можете тонко настроить каждый элемент.
Приложение iFrame или Flash Вконтакте можно создать бесплатно, изучив особенности программирования и применив их на практике. При использовании стороннего софта будьте внимательны, потому как утилиты и программы требуют разрешение к доступу вашего аккаунта.
Работа профессионала
Самый простой способ создания – заказать разработку у команды профессионалов. Такой метод может дорого обойтись в финансовом плане, но обладает рядом преимуществ:
- Экономит время, так как не придется изучать основы программирования и работать над проектом самостоятельно.
- Вам удастся избежать ошибок, которые часто открываются после тестирования проекта.
- Специалисты выполнят проект не только на высоком уровне, но и достаточно быстро.
- Есть возможность сделать приложение ВК не только на русском, но и на английском языке.
Вам останется получить готовый проект, который может обрести большую популярность у пользователей. Если ваша программа или ига нужна вам для заработка, то она сможет окупить все затраты на профессионалов в будущем.
Исходники приложений
Создание проекта не обязательно начинать с нуля. Можно с помощью исходников, которые некоторые разработчики распространяют бесплатно в сети. Часто их можно встретить на форумах или файлообменниках.
Если же вам необходим исходник, данные которого не найти, можете сделать следующее:
- Установите приложение к себе и запустите его.
- В открывшемся окне щелкните правой кнопкой мыши, чтобы открылось контекстное меню. Здесь выберите пункт «Исходный код» страницы.
- Появится строка поиска, где нужно написать http:\/\/. Откроется список ссылок.
- Найдите в перечне файл с расширением .zip и скопируйте его в буфер обмена.
- Вставьте ссылку в адресную строку браузера, убрав все слеши, и нажмите клавишу Enter.
После проделанной процедуры, архив скачается на ваш жесткий диск. Замените расширение архива на .swf, после чего можете открыть в Adobe Flash или любой удобной программе. Чтобы начать работать с исходником, нужно получить его код. Делается это путем декомпиляции – сложным процессом, который воссоздает исходник из машинного кода.
Разработка приложений в ВК доступна для любого пользователя при условии, что он знаком с основами программирования и собирается улучшать свои навыки. Создание проекта может занять много времени, поэтому альтернативой является использование специальных конструкторов. Кроме того, для получения более эффективного результата всегда можно воспользоваться услугами профессиональных разработчиков.
Создание приложения ВКонтакте с типом «Standalone-приложение». Пошаговая инструкция
Для создания приложения ВКонтакте с типом Standalone-приложение перейдите по ссылке http://vk.com/editapp?act=create.
В открывшемся окне необходимо выбрать тип приложения Standalone-приложение и указать произвольное название вашего приложения.
После заполнения всех полей нажмите кнопку Подключить приложение. ВКонтакте попросит вас подтвердить действие отправив вам код доступа в СМС. Получив этот код введите его в соответствующее поле и нажмите «Отправить код». Если все сделано верно, то перед вами откроется окно с настройками созданного приложения. Вам необходимо перейти на вкладку Настройки и выставить в поле Open API значение Включен. На странице появится дополнительный блок настроек Open API. В этом блоке вам необходимо заполнить поля Адрес сайта и Базовый домен. В поле Адрес сайта укажите адрес вашего сайта (магазина). Например, mysite.ru или shop.mysite.ru или mysite.ru/shop/vk. В поле Базовый домен укажите основной домен вашего сайта. Для всех вышеприведенных примеров базовым доменом будет являться mysite.ru. В поле Состояние выберите Приложение включено и видно всем.
Остальные поля можно ставить незаполненными.
Поздравляем, ваше приложение ВКонтакте с типом Standalone-приложение создано! Вам останется лишь скопировать значение полей ID приложения и Защищенный ключ приложения в соответствующие поля окна настроек плагина.
Как создать приложение вконтакте
Фриланс маркетплейс
Пользователей онлайн: 2175
Последний заказ: 14 сек. назад
Логотип и брендинг
Презентации и инфографика
Арт и иллюстрации
Веб и мобильный дизайн
Маркетплейсы и соцсети
Интерьер и экстерьер
Обработка и редактирование
Полиграфия
Промышленный дизайн
Наружная реклама
Доработка и настройка сайта
Создание сайтов
Десктоп программирование
Скрипты и боты
Мобильные приложения
Сервера и хостинг
Юзабилити, тесты и помощь
Тексты и наполнение сайта
Набор текста
Продающие и бизнес тексты
Резюме и вакансии
Статистика и аналитика
Соцсети и SMM
Контекстная реклама
Базы данных и клиентов
E-mail рассылки
Маркетплейсы и доски объявлений
Реклама и PR
Аудиозапись и озвучка
Музыка и песни
Редактирование аудио
Интро и анимация логотипа
Видеоролики
Персональный помощник
Бухгалтерия и налоги
Обзвоны и продажи
Юридическая помощь
Продажа сайтов
Подбор персонала
Презентация
Обучение и консалтинг
Стройка и ремонт
Логотип и брендинг
Презентации и инфографика
Арт и иллюстрации
Веб и мобильный дизайн
Маркетплейсы и соцсети
Интерьер и экстерьер
Обработка и редактирование
Полиграфия
Промышленный дизайн
Наружная реклама
Доработка и настройка сайта
Создание сайтов
Десктоп программирование
Скрипты и боты
Мобильные приложения
Сервера и хостинг
Юзабилити, тесты и помощь
Тексты и наполнение сайта
Набор текста
Продающие и бизнес тексты
Резюме и вакансии
Статистика и аналитика
Соцсети и SMM
Контекстная реклама
Базы данных и клиентов
E-mail рассылки
Маркетплейсы и доски объявлений
Реклама и PR
Аудиозапись и озвучка
Музыка и песни
Редактирование аудио
Интро и анимация логотипа