Андрей Смирнов
Время чтения: ~22 мин.
Просмотров: 21

Установка и настройка приложения онлайн-записи для Вконтакте

Kak-ustanovit-VKontakte-na-telefon-Android-iOS.png

Социальная сеть ВКонтакте (VK) пользуется огромной популярностью в отечественном сегменте интернета. Многие, особенно малоопытные пользователи, посещают ее сайт исключительно через браузер на ПК, не зная, что доступ ко всем ее возможностям и функциональности можно получить с мобильных устройств, работающих под управлением любой из лидирующих операционных систем. Непосредственно в этой статье мы расскажем о том, как скачать и установить соответствующее приложение-клиент.

Установка ВКонтакте на телефон

В настоящее время на рынке мобильных ОС доминируют Android и iOS. На смартфоны, работающие под их управлением, установить приложение ВКонтакте можно несколькими способами. Подробнее о каждом из них и пойдет речь далее.

Skachat-VKontakte-na-telefon-s-Android-i-iOS.png

Android

Андроид, будучи открытой операционной системой, не ставит перед своими пользователями практически никаких ограничений в методах установки ПО. Клиент социальной сети VK может быть установлен как из официального магазина Google Play, так и непосредственно из APK-файла, скачанного со сторонних источников.

Ustanovka-prilozheniya-Vkntakte-na-mobilnoe-ustroystvo-s-OS-Android.png

Способ 1: Play Маркет на смартфоне

Большинство Android-устройств оснащены встроенным магазином, именуемым Google Play Market. Именно через него осуществляется поиск, установка и обновление любых приложений, и ВКонтакте не является исключением. Однако исключением здесь выступает ряд смартфонов, изначально предназначенных для продажи на рынке Китая и те, на которых установлены кастомные прошивки (не все, но многие) – они попросту не содержат в своем составе Плей Маркета. Если ваш девайс из этой категории, переходите к третьему способу данного раздела статьи. Всем же остальным предлагаем ознакомиться с тем, как инсталлировать VK официальным способом.

Skachat-VKontakte-na-Android-iz-Google-Play-Marketa.png

  1. Запустите Play Маркет, тапнув по ярлыку приложения. Найти его можно на главном экране или в общем меню.

Zapusk-Google-Play-Market-dlya-ustanovki-prilozheniya-VKontakte-dlya-Android.png

Нажмите по строке поиска, расположенной в верхней области открытого Магазина, и начните вводить название искомого приложения – ВКонтакте. Тапните по первой из появившихся подсказок для перехода на страницу с описанием клиента социальной сети.</li>

Poisk-v-Google-Play-Markete-prilozheniya-VKontakte-dlya-Android.png

Нажмите по кнопке с надписью «Установить» и дождитесь завершения процесса.</li>

Ustanovka-v-Google-Play-Markete-prilozheniya-VKontakte-dlya-Android.png

После того как клиент социальной сети будет инсталлирован на ваш смартфон, его можно «Открыть», нажав по одноименной кнопке. Соответствующий ярлык появится в меню приложений и на главном экране.</li>

Otkryit-iz-Google-Play-Marketa-prilozheniya-VKontakte-dlya-Android.png

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

Voyti-i-nachat-ispolzovat-prilozhenie-VKontakte-dlya-Android.png

Читайте также: Как создать учетную запись VK</li>Как видите, нет ничего сложного в том, чтобы установить приложение ВКонтакте на мобильное устройство с Android, используя возможности интегрированного в систему Play Маркета. Далее расскажем о еще одном варианте, подразумевающим обращение к данному сервису Google.</ol>

Способ 2: Play Маркет на компьютере

Как и большинство сервисов «Корпорации Добра», Плей Маркет доступен не только в качестве мобильного приложения – есть у него и веб-версия. Так, обратившись на сайт Магазина через браузер для ПК, можно удаленно установить приложение на Андроид устройство. Кому-то такой вариант покажется даже более удобным, чем рассмотренный выше.

Skachat-VKontakte-na-Android-iz-Google-Play-Marketa-na-kompyutere.png

Примечание: Для установки приложений с компьютера на смартфон в используемом для решения задачи браузере необходимо авторизоваться под той же учетной записью Google, что является основной на мобильном устройстве.

Читайте также: Как войти в Гугл-аккаунт

Перейти в Google Play Маркет

  1. Вышеуказанная ссылка приведет вас на сайт Магазина приложений Google. Введите в поисковую строку «ВКонтакте» и нажмите «Enter» на клавиатуре или кликните по иконке в виде лупы, отмеченной на изображении ниже.

Poisk-mobilnogo-prilozhenie-VKontakte-cherez-sayt-Google-Play-Market-na-kompyutere.png

В перечне результатов поиска, которые появятся перед вами, выберите первый вариант – «ВКонтакте – социальная сеть».</li>

Vyibor-prilozheniya-VKontakte-dlya-Android-v-rezultatah-poiska-po-Google-Play-Market-dlya-kompyutera.png

Оказавшись на странице с описанием приложения VK, подобной той, которую мы с вами могли видеть в мобильном Маркете, нажмите «Установить».

Ustanovit-prilozhenie-VKontakte-dlya-Android-cherez-Google-Play-Market-s-kompyutera.png

Примечание: Если ваша учетная запись Гугл используется сразу на нескольких Андроид-устройствах, нажмите по ссылке «Приложение совместимо с…» и выберите то, на которое требуется установить клиент соцсети.

</li>

Proverka-sovmestimosti-prilozheniya-VKontakte-dlya-Android-v-Google-Play-Markete-dlya-PK.png

Скорее всего, вам будет предложено подтвердить свой Google-аккаунт, то есть указать от него пароль и нажать кнопку «Далее».</li>

Podtverzhdenie-akkaunta-dlya-ustanovki-VKontakte-dlya-Android-cherez-Google-Play-Market-na-PK.png

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

Примечание: Смартфон, на который осуществляется удаленная установка, должен быть подключен к Wi-Fi или сотовой сети (если второй вариант активирован в настройках самого Маркета). В противном случае данный процесс будет отложен до появления доступа к интернету.

</li>Практически сразу после того как вы нажмете «ОК» во всплывающем окне с уведомление, начнется инсталляция клиента VK. По ее завершении кнопка на сайте сменится на «Установлено», в шторке на телефоне появится сообщение об успешно завершенной процедуре, а ярлык приложения появится на главном экране. Теперь вы можете запустить ВКонтакте и войти в свою учетную запись или создать новую.</li>Установка приложений на Android-устройство через веб-версию Google Play Маркета на ПК выполняется практически тем же образом, что и в среде мобильной ОС. Кому-то такой подход к решению поставленной задачи покажется более удобным, так как с его помощью можно инсталлировать клиент VK (как и любой другой софт) даже тогда, когда смартфона нет под рукой, или «запланировать» выполнение этой процедуры, когда он выключен или не подключен к интернету.</ol>

Способ 3: APK-файл (универсальный)

Как мы уже сказали во вступлении к этой части статьи, не все Андроид-смартфоны содержат в своем составе Гугл Плей Маркет. В таком случае пользователям остается либо принудительно интегрировать в систему пакет Google-сервисов (ссылка на подробное руководство представлена ниже), либо обратиться к более простым вариантам установки приложений – с помощью встроенного в оболочку магазина или напрямую из АПК-файла, который является аналогом исполняемых файлов в формате EXE в Windows.

Читайте также: Установка сервисов Google после прошивки смартфона

Вариант с использованием альтернативного Маркета мы рассматривать не будем, так как существует несколько аналогов Google Play, разработанных производителями смартфонов из Поднебесной, и потому предоставить общее решение в таком случае будет довольно сложно. А вот установка напрямую из APK – метод универсальный, доступный каждому пользователю, на любом Android-устройстве. Об этом и расскажем.

Примечание: АПК-файлы для установки приложений можно найти на просторах интернета, но действовать в этом случае следует весьма осторожно – всегда есть риск «подхватить» вирус, шпионский софт и прочее вредоносное ПО. Обращайтесь только к доверенным веб-ресурсам, имеющим положительную репутацию, например, к лидеру данного сегмента – APKMirror.

Скачать APK-файл для установки ВКонтакте

  1. Перейдя по вышеуказанной ссылке, пролистайте страницу вниз вплоть до блока «All Versions». Выберите подходящую версию приложения (лучше всего – самую «свежую», первую в списке) и тапните по ней для перехода к следующему этапу.
  2. Снова проскрольте страницу вниз. В этот раз нас интересует кнопка «SEE AVAILABLE APKS», которую и следует нажать.
  3. Обычно мобильные приложения представлены в нескольких дистрибутивах, разработанных и оптимизированных под разные версии Android, типы архитектуры, разрешения экрана и т.д. Однако интересующий нас клиент VK доступен лишь в одной версии, по ней и тапаем для перехода к скачиванию.
  4. Снова листаем страницу вниз, где нажимаем кнопку «DOWNLOAD APK».

    Если браузер запросит разрешение на загрузку файлов из интернета, предоставляем их, тапая во всплывающих окнах «Далее», «Разрешить».

    Соглашаемся с предупреждением системы безопасности о том, что файлы такого типа могут нанести вред мобильному устройству, нажимая «ОК» в появившемся окошке. Непосредственно скачивание установщика приложения не займет много времени.

  5. Сообщение об успешной загрузке файла появится в браузере, откуда его и можно будет «Открыть». Этот же APK можно увидеть в шторке и папке «Загрузки», доступной из любого файлового менеджера. Для начала установки ВКонтакте просто тапните по наименованию загруженного файла. Если потребуется, предоставьте разрешение на установку приложений из неизвестных источников, следуя всплывающим подсказкам на экране смартфона.
  6. После практически моментальной проверки системой запущенного АПК-файла его можно будет «Установить», нажав по соответствующей кнопке в правом нижнем углу.

    Процедура инсталляции займет считаные секунды, после чего вы сможете «Открыть» приложение VK.

    Все что вам остается, «Войти» в социальную сеть под своим логином и паролем или «Зарегистрироваться». Вот так просто можно установить приложение через APK-файл. В случае отсутствия на мобильном устройстве Google Play Маркета, как и при условии отсутствия клиента ВКонтакте в альтернативном Магазине (еще одна из причин, по которой мы данный вариант не рассматривали), такой подход является единственным возможным решением. Отметим, что аналогичным образом можно установить на Android-смартфон и любое другое приложение, даже если оно недоступно в конкретном регионе. Но, как мы и писали в начале этого способа, скачивая файлы со сторонних веб-сайтов, не стоит забывать об очевидных мерах безопасности.

iPhone

Пользователям смартфонов Apple установка клиента ВКонтакте для iPhone очень редко приносит какие-либо проблемы. Весь процесс инсталляции VK в iOS-девайс осуществляется за пару минут, если использовать задокументированный производителем способ получения приложения и немного дольше в случае невозможности или нежелания применения такового.

Способ 1: App Store

Простейший метод инсталляции ВКонтакте на айФон заключается в получении приложения из АппСтор – Магазина программных инструментов для айОС, предустановленного в каждом современном смартфоне Эппл. Данный способ является единственным решением рассматриваемого вопроса, предлагаемым Apple официально. Все что требуется от пользователя – это сам iPhone, на котором предварительно выполнен вход в учетную запись AppleID.

  1. Находим в перечне установленных в iPhone приложений «App Store» и касаемся значка средства для его запуска. Далее переходим в раздел «Поиск» Магазина, вводим «ВКонтакте» в качестве запроса в соответствующее поле, нажимаем «Найти».
  2. Тапаем по иконке соцсети, сопровождающей первый по списку результат поиска – «VK Официальное приложение». На открывшейся странице клиента ВКонтакте в App Store можно ознакомиться с историей версий, посмотреть скриншоты и получить другую информацию.
  3. Для начала процесса скачивания клиента соцсети VK, а затем его инсталляции в iPhone нажимаем на изображение облака. Далее осталось дождаться завершения процесса получения приложения – на месте значка-ссылки на скачивание появится кнопка «ОТКРЫТЬ».
  4. Процесс установки ВКонтакте в iPhone завершен. Запустить приложение можно, коснувшись вышеуказанной кнопки на странице средства в App Store либо тапнув по значку «VK», появившемуся среди других программ на рабочем столе смартфона. После авторизации становятся доступными все возможности, предоставляемые сервисом.

Способ 2: iTunes

Большинству владельцев iPhone знаком медиакомбайн iTunes – официальное программное средство для ПК, предлагаемое Apple для проведения ряда манипуляций с девайсами производителя. Многие привыкли использовать айТюнс в том числе для установки iOS-приложений в свои устройства, но следует отметить, что эта функция была упразднена создателями программы с выходом версии 12.7 и не вернулась во всех последующих сборках.

Несмотря на вышеописанный подход разработчиков, установить VK в iPhone через iTunes на момент написания данной статьи все же возможно, нужно лишь использовать «старую» сборку софта – 12.6.3. Рассмотрим процедуру подробно, предполагая, что на компьютере пользователя изначально инсталлирована «свежая» версия айТюнс.

  1. Полностью деинсталлируем наличествующий в ПК iTunes. Подробнее:Полная деинсталляция iTunes с компьютера
  2. Загружаем дистрибутив медиакомбайна версии 12.6.3 по следующей ссылке: Скачать iTunes 12.6.3 для Windows с доступом в Apple App Store
  3. Инсталлируем айТюнс с возможностью доступа в Апп Стор.

    Подробнее:Как установить iTunes на компьютер

  4. Запускаем приложение и делаем видимым в нем раздел «Программы». Для этого:
    • Кликаем по раскрывающемуся списку в левом верхнем углу iTunes;
    • Выбираем пункт «Править меню»;
    • Оснащаем отметкой чекбокс возле пункта «Программы» в открывшемся меню и кликаем «Готово».
  5. Чтобы избежать в дальнейшем появления довольно надоедливых запросов от iTunes:
    • Авторизуемся в программе с помощью AppleID, выбрав пункт «Войти…» меню «Учетная запись».
    • Далее вводим свои логин и пароль в поля окна «Зарегистрироваться в iTunes Store» и кликаем «Войти».
    • Авторизуем компьютер – идем по пунктам меню «Учетная запись»: «Авторизация»«Авторизовать этот компьютер…».
    • Затем вводим пароль от своего ЭпплАйДи в окне «Введите Apple ID и пароль» и нажимаем «Авторизовать».
  6. Переходим в раздел «Программы» из меню вверху окна iTunes.
  7. Открываем «App Store», кликнув по одноименной вкладке.
  8. Устанавливаем курсор в поле поиска и вводим запрос «VK». В появившемся списке «Предложения» кликаем по первому результату.
  9. Нажимаем «Загрузить» под наименованием приложения «VK Социальные сети» и иконкой соцсети.
  10. Ожидаем пока кнопка, нажатая в шаге выше, изменит свое название на «Загружено».
  11. Выполнив вышеперечисленные пункты, мы получили копию пакета с компонентами приложения ВКонтакте для айФона на диске своего ПК, осталось перенести их в память смартфона. Подключаем iPhone к компьютеру и подтверждаем доступ к возможности синхронизации в окне-запросе, выданном айТюнс, а также на экране мобильного девайса.
  12. Если аппарат подключается к iTunes впервые, одно за одним появятся два окна, в которых нужно нажать «Продолжить»

    и «Начать работу» соответственно.

  13. Кликаем маленькое изображение смартфона, отобразившееся под пунктами меню айТюнс.
  14. В открывшемся окне управления девайсом переходим в «Программы», выбрав соответствующий пункт в меню слева.
  15. Обнаружив «VK» в перечне доступных к инсталляции айОС-приложений, кликаем наличествующую возле наименования соцсети кнопку «Установить».
  16. После того как кнопка, описанная в предыдущем пункте, сменит свое название на «Будет установлено», нажимаем «Готово» внизу окна iTunes справа.
  17. Нажимаем «Применить» в окошке-запросе о привнесении изменений в настройки iPhone.
  18. Дожидаемся завершения переноса приложения VK в память iOS-аппарата. К слову, если в процессе работы айТюнс по копированию информации посмотреть на экран айФона, можно с помощью анимированной иконки увидеть, как происходит развертывание нового программного средства.
  19. Инсталляция ВКонтакте для iPhone завершена. Можно отключать девайс от компьютера и запускать клиент социальной сети тапом по значку, появившемуся среди других iOS-приложений, а затем переходить к авторизации в сервисе и его использованию.

Способ 3: Файл IPA

Приложения для iPhone и других девайсов Apple, функционирующих под управлением iOS, прежде чем быть загруженными и инсталлированными пользователями в свои девайсы упаковываются в своеобразные архивы – файлы с расширением *.IPA. Такие пакеты хранятся в App Store, а их скачивание и развертывание на устройствах, как видно из описания предыдущих способов установки ВКонтакте, происходит практически в автоматическом режиме.

Между тем пользователь, скачавший IPA-файл любого айОС-приложения, включая ВК, на просторах интернета либо обнаруживший его в специальном каталоге iTunes, может инсталлировать этот «дистрибутив» в устройство с помощью различных программных инструментов, созданных сторонними разработчиками.

Одним из самых популярных приложений, применяемых владельцами Apple-устройств с различными целями, в том числе для установки IPA-файлов, считается iTools.

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

Подробнее: Как установить на iPhone c помощью iTools приложения WhatsApp / Viber / Instagram

В рамках настоящего материала рассмотрим метод установки ВК в Айфон, применяя одну из функций не такого распространенного, как айТулс, но не менее эффективного средства — EaseUS MobiMover Free.

  1. Загружаем дистрибутив EaseUS MobiMover Free с веб-ресурса разработчика программы.

    Скачать программу EaseUS MobiMover Free с официального сайта

  2. Устанавливаем МобиМувер на компьютер:
    • Открываем полученный в шаге выше файл-дистрибутив «mobimover_free.exe»;
    • Следуем инструкциям запустившегося инсталлятора. Фактически нужно нажать «Next»

      в трех появляющихся окнах

      Мастера установки;

    • Дожидаемся завершения копирования файлов приложения на диск компьютера;
    • Кликаем «Finish» в последнем окне инсталлятора.
  3. В результате работы программы-установщика EaseUS MobiMover Free запустится автоматически, в дальнейшем открывать программу можно щелчком по ее ярлыку на Рабочем столе Виндовс.
  4. В ответ на приглашение запущенного МобиМувера подключаем iPhone к ЮСБ-порту компьютера.
  5. По умолчанию в MobiMover после подключения девайса предлагается сделать резервную копию его содержимого на диск ПК. Так как у нас другая цель, переходим на вкладку «iPhone Имя_пользователя».
  6. Среди отображаемых в следующем окне разделов наличествует иконка «App», напоминающая своим внешним видом значок Apple App Store, кликаем по ней.
  7. Над перечнем инсталлированных в подключенном к МобиМуверу айФоне приложений присутствуют кнопки для выполнения различных действий. Нажимаем на изображение смартфона с направленной вниз стрелкой.
  8. В открывшемся окне Проводника указываем путь к ipa-файлу ВКонтакте, выделяем его и нажимаем «Открыть».
  9. Процесс переноса приложения в iPhone стартует автоматически и сопровождается отображением индикатора выполнения в окне EaseUS MobiMover Free.
  10. По завершении процедуры инсталляции вверху окна МобиМувера появляется уведомление «Transfer Completed!», а значок клиента социальной сети отображается теперь в перечне установленных в смартфоне программ.

На этом установка ВК посредством развертывания IPA-файла завершена. Можно отключить аппарат от компьютера и убедиться в наличии иконки клиента на экране iPhone среди других iOS-приложений.

</ol>

Заключение

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

Помогла ли вам эта статья?

Мобильное приложение Вконтакте для телефонов на Android.

Для телефонов на Android — найдите у себя иконку Google Play

Далее достаточно, найти в поиске (обозначается значком ) , прописать «ВК», на первом месте будет официальное приложение которое и нужно установить.

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

Мобильное приложение VK для iPhone.

Для телефонов на iOS (айфоны) — найдите значок App Store. 

Аналогично способу для Андроид, вводим в поиске App Store — «ВК» и скачиваем нужное нам приложение.

Запускаем, входим или регистрируемся.

Мобильное приложение VK для телефонов на Windows.

Для телефонов на Windows — найдите и откройте иконку с сумочкой. 

Аналогично двум способам выше, воспользуйтесь поиском, по слову «вконтакте», скачайте и установите приложение.

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

Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.au2v2d1ko6i5ifqn2lnydurcczg.jpegПервоначальная публикация статьи в блоге Mail.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

Платформа VK mini apps

«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.

Инфраструктура приложения VK mini app

Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети. «ВКонтакте» позволяет разместить три версии приложения:

  • для мобильных клиентов — то есть для открытия в нативном приложении «ВКонтакте»;
  • десктопный вариант — vk.com в браузере;
  • вариант для браузеров в мобильных телефонах (https://m.vk.com).

При размещении вы также можете включить «Режим разработки». Он позволяет пользователям «ВКонтакте», назначенным в качестве администраторов приложения, использовать для тестирования каждой из трех витрин отдельный адрес. То есть открывая приложение, обычный пользователь увидит то, что расположено по условном адресу yourapp.com, а администратор — test.yourapp.com. Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное 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. Соответственно, максимально простая установка:

npm i —save-dev @vkontakte/vkui

Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:

<meta>

Далее нам нужно просто встроить 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 — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:

import {Root, View, Panel} from ‘@vkontakte/vkui’; <root><view><panel>          …       </panel><panel>          …       </panel></view><view><panel>          …       </panel></view><view><panel>          …       </panel><panel>          …       </panel><panel>          …       </panel></view></root>

В state в activePanel мы прописываем id того элемента, который нужно показать.

Верстка и компоненты

Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI. Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.

import {    Button,    Div,    FormLayout,    Input,    Panel,    PanelHeader,    PanelHeaderBack,    Search,    View } from "@vkontakte/vkui"; import Icon36Done from "@vkontakte/icons/dist/36/done"; import CustomTextarea from "./YourComponents/CustomTextarea";  render() {    return (       

<panelheader> {this.Actions.historyBack()}} />} >App Title</panelheader>

This is the first page

You can do some interaction here

<formlayout><input><button>Submit</button> </formlayout><search> ) } </pre> Как видно, появился ещё один пакет vkontakte:

npm i —save-dev @vkontakte/icons

Можно воспользоваться удобным менеджером по подбору нужной иконки.Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.gecc_oj3rinrnjov7k-ddrsm3h0.jpeg Кастомный блок:

import {    Textarea } from «@vkontakte/vkui»;  export default class CustomTextarea extends React.Component {    render() {       return (          

Custom textarea is here <textarea> this.bindData(e, this.props.name)} value={this.props.value} className={this.props.className} /> </textarea> </pre> ); } } Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:

.desktop_web {    .View__panel—prev {       max-width: 458px !important;       margin: 0 auto;       left: calc(50% — 230px) !important;       -webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1);       animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1);    }    .View__panel—next {       max-width: 460px !important;       left: calc(50% — 230px) !important;    } } 

Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.

Библиотека VK Connect

Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет /vk-connect: npm i —save-dev /vk-connect. Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации. Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:

import connect from ‘@vkontakte/vk-connect’; connect.send(«VKWebAppInit», {}); 

Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:

connect.subscribe((e) => {    switch (e.detail.type) {       case «VKWebAppGetUserInfoResult» :          this.bindConnectUserData(e.detail.data);          break;    } }); 

В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», {}), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети. «ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:

if (connect.supports(«VKWebAppGetUserInfo»)) …

VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:

connect.send(«VKWebAppCallAPIMethod», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}});

VK Pay

VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:

connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}});

Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.Используемые источники:

  • https://lumpics.ru/how-to-install-vk-on-phone/
  • http://kak-vk.ru/kak-ustanovit-vkontakte-na-telefon/
  • https://habr.com/post/480974/

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации