Как создать программу как ВК

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags

Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Как создать и настроить приложение в Вконтакте

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time

README.md

Что это за репозиторий?

Этот репозиторий является примером приложения VK Mini App с оптимизацией под разные платформы и сменой темы, а также поддержкой системной кнопки «Назад» на Android и свайпов на iOS. Также в src/panels/features/Popouts.js есть пример реализации модальных окон, карточек, алертов и т.п.

Что такое VK Mini Apps?

VK Mini Apps — это открытая платформа для разработки встраиваемых кросс-платформенных мини-приложений, которые можно запустить внутри ВКонтакте — в Android, iOS, версии для компьютера и мобильной версии vk.com.

Как запустить приложение?

Откройте терминал (консоль) в папке, в которую Вы скопировали репозиторий. Затем введите команду npm install и нажмите Enter. Когда все зависимости будут установлены (выполнение команды завершится), введите команду npm start, подтвердив запуск приложения нажатием Enter.

Можно ли использовать этот репозиторий для создания моего собственного мини-приложения?

Почему в App.js импортирована только одна панель?

В файле App.js только определяются платформа и тема. Всё остальное происходит в файле src/panels/Home.js (далее — Home.js)

Куда добавлять и как импортировать панели?

Вы можете создавать панели в уже созданной папке src/panels/features. Там уже есть несколько панелей для примера. Импортируйте созданные панели в Home.js и найдите в нём массив объектов panels. Следуя комментариям к коду и уже существующим там панелям, допишите свои. Дальше приложение всё сделает само, Вам не нужно больше ничего редактировать.

Что за объект bannerInfo?

Эта фича позволяет вывести баннер под меню в десктопной версии. Всё описано в комментариях к коду. Вот пример такого баннера:

Документация и другие материалы

Здесь Вы можете найти полезные сведения, которые Вы можете использовать при разработке сервиса:

• Документация React JS
• Документация от VK для разработчиков
• Официальное сообщество VK Mini Apps
• Документация VKUI
• Иконки VK Icons

About

Пример приложения VK Mini App с оптимизацией под разные платформы и сменой темы

Источник: github.com

Как сделать приложение в ВКонтакте

Данная статья поможет вам самостоятельно попытаться создать приложение или игру в ВКонтакте, расскажет о типах приложений, об их исходниках и о многом другом.

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

Самостоятельное создание приложения

Создание приложения ВКонтакте — дело нелегкое. Для этого нужны определенные знания и умения. Также совершенно необходимо желание учиться и стремление к самосовершенствованию. Если вас интересует создание приложений в ВК, вы должны быть готовы к тому, что столкнетесь с определенными трудностями на этом пути.

Поговорим о том, как создать приложение ВКонтакте самому. На первом этапе вам необходимо будет прочитать документы, которые администрация ВКонтакте составила для разработчиков.

Если вы интересуетесь, как создать приложение ВКонтакте бесплатно, вам нужно будет перейти по следующей ссылке: http://vk.com/developers.php. В документах написано, что все разрабатываемые приложения будут использовать API. Эта аббревиатура переводится с английского как интерфейс прикладного программирования. Иными словами, это перечень команд, которые могут использовать различные программы ВКонтакте.

Типы приложений

Прежде чем начинать раздумывать о том, как создать приложение в ВК, необходимо знать, что на этом ресурсе есть два их типа. Это, кстати, отражено в документации.

• Flash-приложения. Они представляют собой файлы, для которых предусмотрено расширение .swf. Они делаются в среде Adobe Flash, затем производится компиляция в файл, после чего осуществляется из загрузка на сервера данного ресурса либо на свой сервер.
• Iframe (ифрейм) приложения. Они могут делаться с применением различных технологий, предоставляемых браузерами, имеющимися на сегодняшний день. Потом на странице ВКонтакте будет возникать определенное окно, в котором люди смогут пользоваться этим приложением. Передавать и принимать данные программа будет посредством JavaScript.

Обучающее видео

Каждый, кто хочет понять, как создать приложение В Контакте, должен увидеть этот процесс собственными глазами. Ведь так информация воспринимается намного лучше. Видео сможет открыть глаза на многие вопросы.

Надеемся что теперь вам стало более понятно, как сделать приложение В Контакте.

Что необходимо знать

Отдельно хочется сказать о некоторых языках программирования и технологиях, которые вам нужно будет знать. Как делать приложения в ВК, не зная их? Это нереально. Вот этот перечень:

• Adobe Flash
• Action Script
• 3D движки
• PHP
• HTML
• JavaScript

Изучение всего этого займет определенное время. Ваши успехи будут зависеть исключительно от того, сколько часов в сутки вы готовы посвятить изучению. Человек, день и ночь думающий о том, как сделать приложение В Контакте, конечно, разберется в этом в кратчайшие сроки.

Исходники приложений

На сегодняшний день в сети можно отыскать исходники приложений ВКонтакте. Многие можно бесплатно скачать на файлообменниках.

Однако если вы желаете получить исходник какого-то определенного приложения, следуйте этой инструкции:

• Устанавливаем его себе на страницу и запускаем.
• Кликаем правой кнопкой по странице и в меню нажимаем на «Исходный код». Видим код страницы (но не самой программы).
• В поиске пишем «http://», в результатах поиска ищем ссылку, заканчивающуюся на «.zip». Копируем ее и вставляем в адресную строку, удаляем косые линии. Нажимаем на Enter. Архив скачивается.
• Сохраняем архив. Заменяем расширение на .swf. Открываем в каком-либо флеш-плеере.

Таким образом, мы получили оффлайн-версию исходника. Для того, чтобы получить сами коды на приложения, потребуются декомпиляторы. Нужно будет поработать с их помощью над этим файлом.

Если вам все это кажется сложным, легче будет скачать исходник приложения. Однако, следует учитывать, что исходники не всех программ можно легко скачать в Интернете.

Платная разработка приложений

Отдельно следует отметить, что разработка приложений ВКонтакте в некоторых случаях осуществляется за деньги опытными людьми. Этот вариант подходит тем, у кого нет времени или сил на получение всех необходимых знаний для самостоятельного создания. Разработка приложений — это основной вид деятельности для некоторых людей. Стоимость работы не слишком велика, и если вы можете позволить себе заплатить за это, то обратившись к хорошему специалисту, можно получить действительно неплохой результат.

Но если вы желаете узнать, как разработать приложение самостоятельно, то следующая инструкция для вас.

Последовательность создания приложения

• Краткое изложение. Вам необходимо написать на листе все пожелания относительно будущей программы.
• Работа над дизайном. Нужно нарисовать кнопки, фоны, а также надписи.
• Программирование. Следует написать функции и классы, благодаря которым будут реализовываться действия.
• Работа над ошибками. Рекомендуется поискать ошибки и устранить их.
• Размещение кода ВКонтакте.

Бесплатные программы

Программы для приложений ВКонтакте можно скачать в Интернете бесплатно. В первую очередь, конечно, потребуется скачать Adobe Flash. Это главная и основная программа, которая позволит вам начать работу над своим проектом. Данная программа для создания приложения очень удобна. Однако работать с ней новичку нелегко.

Но со временем появляются навыки и пользоваться ею становится проще. Остальные проги для приложений тоже отличаются удобством в использовании. 3D движки, например, значительно ускоряют и упрощают процесс создания приложений.

Самый легкий способ

Если хотите создать свою программу в максимально короткие сроки, используйте конструктор приложений ВКонтакте. Free Apps, к примеру, позволяет создать приложение за 5 минут.

Теперь вы знаете, в общих словах, как написать приложение для ВКонтакте.

Источник: netsmate.com

Создание приложения VK Mini App: взгляд изнутри

Всем привет! Хочу рассказать про разработку приложения для ВКонтакте под названием VK Mini App: что это, для чего это и как вообще устроено.

6085 просмотров

Пару лет назад я написал на 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? Учтите, что он не доступен в в режиме “инкогнито”.

Монетизация