{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":443,"offset":0,"style":"ITALIC"}],"text":"Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.","type":"unstyled","key":"ar2pf"},{"data":{"image":{"id":"5e0308b74e057700b19e0ef7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"820au"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Платформа VK mini apps","type":"header-two","key":"742jf"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":469}],"inlineStyleRanges":[],"text":"«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.","type":"unstyled","key":"1n12h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инфраструктура приложения VK mini app","type":"header-two","key":"ckc4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.","type":"unstyled","key":"1akef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«ВКонтакте» позволяет разместить три версии приложения:","type":"unstyled","key":"daav0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"для мобильных клиентов — то есть для открытия в нативном приложении «ВКонтакте»;","type":"unordered-list-item","key":"afcv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"десктопный вариант — https://vk.com в браузере;","type":"unordered-list-item","key":"6apmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"вариант для браузеров в мобильных телефонах (https://m.vk.com).","type":"unordered-list-item","key":"4nd0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При размещении вы также можете включить «Режим разработки». Он позволяет пользователям «ВКонтакте», назначенным в качестве администраторов приложения, использовать для тестирования каждой из трех витрин отдельный адрес. То есть открывая приложение, обычный пользователь увидит то, что расположено по условном адресу yourapp.com, а администратор — test.yourapp.com.","type":"unstyled","key":"2nk37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.","type":"unstyled","key":"3bnbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.","type":"unstyled","key":"9v10f"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":17,"offset":5}],"inlineStyleRanges":[],"text":"Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.","type":"blockquote","key":"83vjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработка приложения VK mini app","type":"header-two","key":"6hnt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.","type":"unstyled","key":"ekv6e"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":36,"offset":68}],"inlineStyleRanges":[],"text":"Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:","type":"unstyled","key":"f98fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.","type":"ordered-list-item","key":"a3k0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты уже стилизованы согласно styleguide «ВКонтакте» — пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык, находясь внутри социальной сети.","type":"ordered-list-item","key":"efb19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.","type":"ordered-list-item","key":"8el01"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":20,"offset":59},{"key":4,"length":29,"offset":105}],"inlineStyleRanges":[],"text":"Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:","type":"unstyled","key":"1u04g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i —save-dev @vkontakte/vkui","type":"blockquote","key":"57cqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nОбязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:","type":"unstyled","key":"4lu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"484m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nДалее нам нужно просто встроить React-приложение на страницу.","type":"unstyled","key":"3a3qc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры открытия приложения","type":"header-three","key":"3mpca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий:","type":"unstyled","key":"a5jvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"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","type":"blockquote","key":"564ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nТо есть фрейм с вашим приложением откроется примерно с похожим адресом:","type":"unstyled","key":"fjp12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"https://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","type":"blockquote","key":"fb722"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nЭто позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.","type":"unstyled","key":"a4r4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например:","type":"unstyled","key":"5sjvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"https://youvkapp.ru#custom_param","type":"blockquote","key":"1j6s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Роутинг","type":"header-three","key":"dgdvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.","type":"unstyled","key":"8lpkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый View отвечает за свой пользовательский сценарий:основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:","type":"unstyled","key":"2f7a8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {Root, View, Panel} from ‘@vkontakte/vkui’;","type":"blockquote","key":"eemr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n \n …\n \n \n …\n \n \n \n \n …\n \n \n \n \n …\n \n \n …\n \n \n …\n \n \n","type":"blockquote","key":"2np1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nВ state в activePanel мы прописываем id того элемента, который нужно показать.","type":"unstyled","key":"1qgqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верстка и компоненты","type":"header-three","key":"3b1m0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.","type":"unstyled","key":"4f2m6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.","type":"unstyled","key":"ebilb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {\nButton,\nDiv,\nFormLayout,\nInput,\nPanel,\nPanelHeader,\nPanelHeaderBack,\nSearch,\nView\n} from «@vkontakte/vkui»;\nimport Icon36Done from ‘@vkontakte/icons/dist/36/done’;\nimport CustomTextarea from «./YourComponents/CustomTextarea»;","type":"blockquote","key":"727ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"render() {\nreturn (\n

\n {this.Actions.historyBack()}} />}\n>App Title\n\n

This is the first page

You can do some interaction here

\n\n\n\nSubmit\n\n\n

\n)\n}","type":"blockquote","key":"54psv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nКак видно, появился ещё один пакет vkontakte:","type":"unstyled","key":"4022k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i —save-dev @vkontakte/icons","type":"blockquote","key":"fuvrn"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":18,"offset":23}],"inlineStyleRanges":[],"text":"\nМожно воспользоваться удобным менеджером по подбору нужной иконки.","type":"unstyled","key":"e6vag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.","type":"unstyled","key":"tngc"},{"data":{"image":{"id":"5e0308599ca51200b117f338"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопки управления находятся справа","type":"atomic:image","key":"5d4lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Кастомный блок:","type":"blockquote","key":"dk251"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {\nTextarea\n} from «@vkontakte/vkui»;","type":"blockquote","key":"1t5fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default class CustomTextarea extends React.Component {\nrender() {\nreturn (\n

Custom textarea is here

\n this.bindData(e, this.props.name)}\nvalue={this.props.value}\nclassName={this.props.className}\n/>\n

\n\n);\n}\n}","type":"blockquote","key":"d4d22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nСтоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:","type":"unstyled","key":"4hkkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".desktop_web {\n.View__panel—prev {\nmax-width: 458px !important;\nmargin: 0 auto;\nleft: calc(50% — 230px) !important;\n-webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1);\nanimation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1);\n}\n.View__panel—next {\nmax-width: 460px !important;\nleft: calc(50% — 230px) !important;\n}\n}","type":"blockquote","key":"81i5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nЭти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.","type":"unstyled","key":"doqvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотека VK Connect","type":"header-two","key":"69lue"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":21,"offset":0}],"inlineStyleRanges":[],"text":"Библиотека VK Connect (npm i —save-dev @vkontakte/vk-connect) предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет @vkontakte/vk-connect, используя npm.","type":"unstyled","key":"2hlgt"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":38,"offset":418},{"key":8,"length":26,"offset":485}],"inlineStyleRanges":[],"text":"Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.","type":"unstyled","key":"ffdt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:","type":"unstyled","key":"bn8bk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import connect from ‘@vkontakte/vk-connect’;","type":"blockquote","key":"3rbsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"connect.send(«VKWebAppInit», {});","type":"blockquote","key":"b8umq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nВсе дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:","type":"unstyled","key":"12ee3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"connect.subscribe((e) => {\nswitch (e.detail.type) {\ncase «VKWebAppGetUserInfoResult» :\nthis.bindConnectUserData(e.detail.data);\nbreak;\n}\n});","type":"blockquote","key":"6t4hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nВ объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», {}), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.","type":"unstyled","key":"bslnr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:","type":"unstyled","key":"322f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (connect.supports(«VKWebAppGetUserInfo»)) …","type":"blockquote","key":"2mjhd"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":6,"offset":52}],"inlineStyleRanges":[],"text":"\nVK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:","type":"unstyled","key":"ddcup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"connect.send(«VKWebAppCallAPIMethod», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}});","type":"blockquote","key":"7ac8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"VK Pay","type":"header-two","key":"eskh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:","type":"unstyled","key":"b4n6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}});","type":"blockquote","key":"e4abd"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":24,"offset":126}],"inlineStyleRanges":[],"text":"\nТаким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.","type":"unstyled","key":"7jl96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Что еще почитать:","type":"blockquote","key":"dncl"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":80,"offset":3}],"inlineStyleRanges":[],"text":"1. Облачные приложения: быстро загружаются, снижают риски, стимулируют рост бизнеса.","type":"blockquote","key":"5o8l8"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":71,"offset":3}],"inlineStyleRanges":[],"text":"2. Скоростное недопрограммирование: вредные советы для программистов.","type":"blockquote","key":"9auaq"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":59,"offset":3}],"inlineStyleRanges":[],"text":"3. Как перестать работать прокладкой: разработка API с GraphQL.","type":"blockquote","key":"705gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cq10t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"},{"length":13,"offset":7,"style":"ITALIC"}],"text":"Автор: Максим Слепов ","type":"unstyled","key":"2masd"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":62,"offset":11}],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":"Источник: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps ","type":"unstyled","key":"begov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"PTsKvm7yzBRCsf3KR2hO"}],"entityMap":{"11":{"data":{"href":"https://mcs.mail.ru/blog/cloud-native-prilozheniya-bystro-zagruzhayutsya-snizhayut-riski-stimuliruyut-rost-biznesa","url":"https://mcs.mail.ru/blog/cloud-native-prilozheniya-bystro-zagruzhayutsya-snizhayut-riski-stimuliruyut-rost-biznesa"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://mcs.mail.ru/blog/skorostnoe-nedoprogrammirovanie","url":"https://mcs.mail.ru/blog/skorostnoe-nedoprogrammirovanie"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://mcs.mail.ru/blog/kak-perestat-rabotat-prokladkoy-razrabotka-api-s-graphql","url":"https://mcs.mail.ru/blog/kak-perestat-rabotat-prokladkoy-razrabotka-api-s-graphql"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps","url":"https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"href":"https://vk.com/dev/vk_apps_docs","url":"https://vk.com/dev/vk_apps_docs"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://vk.com/@vkappsdev-vk-apps-kak-popast-v-katalog","url":"https://vk.com/@vkappsdev-vk-apps-kak-popast-v-katalog"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://vkcom.github.io/vkui-styleguide","url":"https://vkcom.github.io/vkui-styleguide"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://vkcom.github.io/vkui-styleguide","url":"https://vkcom.github.io/vkui-styleguide"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://github.com/VKCOM/VKUI","url":"https://github.com/VKCOM/VKUI"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vkcom.github.io/icons","url":"https://vkcom.github.io/icons"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/dev/vk_apps_docs?f=4.%20VK%20Connect","url":"https://vk.com/dev/vk_apps_docs?f=4.%20VK%20Connect"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://vk.com/@vkappsdev-uvedomleniya-za-kotorye-polzovateli-skazhut-spasibo","url":"https://vk.com/@vkappsdev-uvedomleniya-za-kotorye-polzovateli-skazhut-spasibo"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://vk.com/dev/vk_connect_events","url":"https://vk.com/dev/vk_connect_events"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://vk.com/dev/first_guide","url":"https://vk.com/dev/first_guide"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://vk.com/dev/vkpay","url":"https://vk.com/dev/vkpay"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}