Разбираем приложение Vkontakte под Android. Часть 1, вводная
Видишь суслика? А он уже в облаке
Знакомый сказал, что Фейсбук выкачивает все фотографии из телефона без спроса, даже те, что в соцсеть никто не выкладывает. Мне стало интересно, что же делают соцсети. Начал с Вконтакте.
Итак, получаем apk из маркета: apps.evozi.com/apk-downloader
Dex2jar — получаем из apk нормальный jar файлик. Да, все xml нам не доступны, но логика-то написана на джаве. Кстати, манифест можно посмотреть из готового APK, до преобразования в jar.
Декомпилятор, например: jd.benow.ca
Первое, что бросается в глаза – папка Facebook:
Второе – это названия переменных. Авторы приложения не используют минификацию (см developer.android.com/tools/help/proguard.html), которая идет по умолчанию в Android Studio. За что им большое спасибо, потрошить такое приложение гораздо проще.
Для сравнения, минифицированный код:
Говорящие названия классов и переменных, правда? В исходном коде все нормально: github.com/KrenVpravo/CheckReaction
Вернемся к фейсбуку Вконтакте. За пределами папки Facebook это слово встречается только в классе SuggestionsImportedFragment. Будем надеяться, что авторы не путали классы специально, чтобы замести следы, и Вконтакте действительно ломится в Фейсбук только для того, чтобы предложить нам фейсбучные результаты поиска. Узнать правду не получится, единственный класс, который вызывается из Вконтакте – FacebookDialog. Он не декомпилируется.
Далее интерес вызвал трекер от Mail.Ru. В открытом доступе такого не нашел.
Похоже, трекер выполняет чисто отладочные функции.
Скачиванием картинок в приложении занимается около полсотни классов. Честно говоря, если держать эту заметку до того, как будет время разобраться к них – получится очередной долгострой долгопис.
На этом пока и остановимся. Позже, подумаю, как надо было реализовать отображение чата, чтобы в отсутствие интернета там показывался закешированный кусок, а не пустое окно с загрузкой.
Главные выводы
– приложение стоит поизучать. Тем более, что vk объявил награды за найденные уязвимости. Их мне искать лень, но возможно для этого код и оставили читабельным.
– соцсети обмениваются информацией, большой дядя все же за нами следит, чтобы советовать знакомых. Еще один повод не ставить все соцсети на телефон.
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.
Платформа VK mini apps
«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.
Инфраструктура приложения VK mini app
Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.
«ВКонтакте» позволяет разместить три версии приложения:
Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное 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. Соответственно, максимально простая установка:
Обязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
Далее нам нужно просто встроить 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 — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
Как видно, появился ещё один пакет vkontakte:
Можно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.
Стоит обратить внимание: «ВКонтакте» заявляет, что компоненты могут отображаться на десктопах не совсем адекватно. Однако их можно стилизовать, добавляя свои css-правила. Например, так была стилизована анимация переходов между панелями в одном приложении:
Эти стили подключаются в общем потоке стилей, подключаемых к вашему приложению.
Библиотека VK Connect
Библиотека VK Connect предоставляет доступ к широким возможностям как самой сети «ВКонтакте», так и к возможностям устройства, если мы работаем из-под мобильного приложения. Для ее подключения нужно установить пакет vkontakte/vk-connect: npm i —save-dev vkontakte/vk-connect.
Среди многочисленных возможностей VK Connect — сканирование QR-кода, получение геопозиции, вызов карточки контактов. Также есть широкие возможности по использованию возможностей соцсети: включение-выключение уведомлений, публикация записей на стене, авторизация сообщества, подписка на сообщения. Их нужно использовать с умом: например, существует ограничение на количество уведомлений — не более одного в сутки. Есть отдельные рекомендации по уведомлениям. Полный список возможностей представлен в документации.
Чтобы наше приложение вообще начало работу, нужно сначала выполнить инициализацию:
Все дальнейшее взаимодействие с библиотекой происходит похожим образом. Методом connect.send вызываем нужное действие и слушаем ответы. Для этого мы должны подписаться на события:
В объекте detail возвращается type — название типа события, ответ на которое мы ждем, и data — набор данных. В примере выше мы слушаем ответ на запрос connect.send(«VKWebAppGetUserInfo», <>), который должен вернуть данные о пользователе приложения: имя, пол, дату рождения, место проживания, ссылку на картинку аватара в соцсети.
«ВКонтакте» не гарантирует поддержку всех событий на всех устройствах (iOS, Android, Web), поэтому лучше делать проверку такой поддержки перед исполнением кода:
VK Connect также обеспечивает поддержку запросов к API VK, если нужно что-то большее, чем может предоставить сама библиотека VK Connect:
VK Pay
VK Pay — это, по сути, удобный фронтенд для использования онлайн-сервиса оплаты с помощью Деньги Mail.Ru. Для вызова платежной формы достаточно открыть платежное окно с помощью вызова в библиотеке VK Connect:
Таким образом, можно продавать ваши услуги и товары, используя внутреннее платежное средство в сети «ВКонтакте». Подробнее в официальной документации.
ВКонтакте: как устроена социальная сеть
Содержание статьи
Без малого 100 миллионов пользователей — такова аудитория ВКонтакте, которую
надо обслуживать. Быстро и без перебоев. Долгое время подробности технической
реализации ВКонтакте оставались секретом. Но недавно самая популярная в России
социальная сеть пролила немного света на то, как она все-таки устроена. В конце
октября в Москве состоялась конференция HighLoad++, на которой представители
ВКонтакте в лице Павла Дурова и Олега Илларионова, наконец, рассказали кое-что
об архитектуре социальной сети.
Парней буквально завалили вопросами по совершенно различным аспектам работы
ВКонтакте, в том числе и техническим. Еще бы. Легко представить нагрузку на
серверную часть сервиса: как много людей ты знаешь, которые не пользуются этой
социальной сетью? А сколько времени ты там проводишь, тратя бесценные часы своей
жизни на общение с друзьями, просмотр видео, игры, музыку? Математика довольно
проста: баснословное количество пользователей * масса проведенного времени на
ресурсе = запредельное количество запросов к веб-серверам и базе данных +
терабайты постоянно загружаемых и просматриваемых фотографий, видео и аудио.
Взаимодействие участников социальной сети происходит практически в режиме
реального времени: все друзья должны немедленно узнавать о том, что произошло с
каждым из участников. Сайт должен быть доступен 100% времени. Как это удается?
Статистика ВКонтакте
Платформа
Для нас, конечно, особый интерес представляет именно архитектура проекта: как
взаимодействуют основные компоненты системы, какие собственные разработки
потребовались, какими трюками пришлось воспользоваться. Но прежде, чем перейти к
ней, необходимо ознакомиться с базовыми вещами — используемыми технологиями и
продуктами.
В качестве основной операционной системы используется Debian Linux — решение,
проверенное временем, один из самых старых и стабильных современных
дистрибутивов. Для балансировки нагрузки между серверами приложений используется
HTTP-сервер nginx, работающий в режиме reverse proxy. В его обязанности входит
держать соединение с браузером пользователя и передавать запросы серверам,
ответственным за исполнение PHP-кода, а также контролировать попадание
результата обратно в браузер. PHP-код исполняется посредством модуля mod_php для
Apache — альтернативных вариантов довольно много, особенно на основе протокола
FastCGI, но руководство ВКонтакте пошло по более консервативному пути в этом
вопросе, воспользовавшись самым проверенным временем решением. Никаких особых
систем оптимизации производительности PHP-кода не используется (например, в
Facebook написали свой компилятор из PHP в C под названием HipHop), единственной
внешней оптимизацией является кэширование оп-кода посредством всем доступного
решения XCache.
Ситуация с хранением данных выглядит достаточно размыто: с одной стороны,
активно используется собственная система управления базами данных, написанная на
C и созданная «лучшими умами» России, с другой — часто упоминалась MySQL в роли
основного хранилища. Подробнее про собственную базу данных ВКонтакте я расскажу
ниже. Говоря о хранении данных, нельзя не упомянуть о таком важном аспекте, как
кэширование часто используемой информации (расположение её в оперативной памяти
для быстрого доступа). Для этого используется очень популярный продукт в этой
области — memcached. Если ты не слышал: эта система позволяет осуществлять очень
простые атомарные операции, такие как расположение и получение произвольных
данных по ключу. Основной фишкой является молниеносно быстрый доступ и
возможность легкого объединения оперативной памяти большого количества серверов
в общий массив для временного хранения «горячих» данных.
Сторонние проекты, не являющиеся ключевыми для ВКонтакте, часто реализуются
либо с использованием довольно экзотических решений, либо, наоборот, на самых
простых технологиях. Например, сервис мгновенного обмена сообщениями реализован
на node.js (подробнее об этой разработке ты можешь прочитать в статье «Серверный
JavaScript» в ][
08/2010) с использованием протокола XMPP aka Jabber (мы еще к нему
вернемся). Конвертирование видео реализовано на самой простой и эффективной
библиотеке — ffmpeg, на ней же работает очень популярный видео-плеер VLC.
Основные используемые технологии
Архитектура
Самым заметным отличием от архитектуры многих других крупных
интернет-проектов является тот факт, что сервера ВКонтакте многофункциональны.
Т.е. нет четкого разделения на серверы баз данных, файловые серверы и т.д. — они
одновременно используются в нескольких ролях. При этом перераспределение
ролей происходит в полуавтоматическом режиме с участием системных
администраторов. С одной стороны, это оптимизирует эффективность использования
системных ресурсов, что хорошо, но с другой — повышает вероятность конфликтов на
уровне операционной системы в рамках одного сервера, что влечет за собой
проблемы стабильности. Впрочем, несмотря на использование серверов в разных
ролях, вычислительные мощности проекта обычно используются менее чем на 20%.
Балансировка нагрузки между серверами происходит по многоуровневой схеме,
которая включает в себя балансировку на уровне DNS (домен обслуживается с
помощью 32 IP-адресов), а также маршрутизацию запросов внутри системы, причем
разные сервера используются для разных типов запросов. Например, генерация
страниц с новостями (теперь это принято называть микроблогом) работает по хитрой
схеме, использующей возможности протокола memcached по параллельной отправке
запросов на получение данных по большому количеству ключей. В случае отсутствия
данных в кэше, аналогичный запрос отправляется системе хранения данных, а
полученные результаты подвергаются сортировке, фильтрации и отбрасыванию лишнего
уже на уровне PHP-кода. Похожим образом этот функционал работает и в Facebook
(они недавно обменивались опытом), только вместо собственной СУБД в Facebook
используют MySQL.
В стенах ВКонтакте было разработано большое количество софта, который более
точно удовлетворяет потребностям проекта, чем доступные opensource и
коммерческие решения. Помимо упоминавшейся собственной СУБД у них есть система
мониторинга с уведомлением по СМС (Павел сам помогал верстать интерфейс),
автоматическая система тестирования кода и анализаторы статистики и логов.
В проекте используется достаточно мощное оборудование, ориентировочно были
названы следующие характеристики серверов:
Примечательно, что сервера не брендированные, а собираются специализированной
российской компанией. Сейчас оборудование проекта расположено в 4 датацентрах в
Санкт-Петербурге и Москве, причем вся основная база данных располагается в
питерском датацентре, а в Москове хостится только аудио и видео. В планах
сделать репликацию базы данных с другим датацентром в Ленинградской области, а
также использовать Content Delivery Network для повышения скорости скачивания
медийного контента в регионах.
Многие проекты, сталкивающиеся с большим количеством фотографий, часто
изобретают собственные решения по их хранению и отдаче пользователям. Об этом
был первый вопрос, заданный Павлу из зала: «Как вы храните изображения?» — «На
дисках!». Так или иначе, представители ВКонтакте заявили, что вся эта куча
фотографий всех цветов и размеров просто хранится и отдается с файловой системы
(используют xfs) большого количества серверов, без дополнительных изысков.
Смущает разве что тот факт, что у других крупных проектов такой подход не
сработал — наверное, они не знали волшебного слова :).
Не менее волшебной представляется та самая собственная база данных на C.
Этому продукту, пожалуй, было уделено основное внимание аудитории, но при этом
почти никаких подробностей о том, что он, собственно говоря, собой представляет,
так и не было обнародовано. Известно, что СУБД разработана «лучшими умами»
России, победителями олимпиад и конкурсов TopCoder, а также что она используется
в самых высоконагруженных сервисах ВКонтакте:
В отличие от MySQL используется нереляционная модель данных, а большинство
операций осуществляется в оперативной памяти. Интерфейс доступа представляет
собой расширенный протокол memcached. Специальным образом составленные ключи
возвращают результаты сложных запросов (чаще всего специфичных для конкретного
сервиса).
Система проектировалась с учетом возможности кластеризации и автоматической
репликации данных. Разработчики хотели бы сделать из данной системы
универсальную СУБД и опубликовать под GPL, но пока не получается из-за высокой
степени интеграции с остальными сервисами.
Интересные факты о ВКонтакте
Подпроекты
Сервисы аудио и видео являются побочными для социальной сети, на них
создатели проекта особо не фокусируются. В основном это связано с тем, что они
редко коррелируют с основной целью использования социальной сети — общением, а
также создают большое количество проблем. Видеотрафик — основная статья расходов
проекта, плюс всем известные проблемы с нелегальным контентом и претензиями
правообладателей. 1000—1500 серверов используются для перекодирования видео, на
них же оно и хранится. Медиа-файлы банятся по хэшу при удалении по просьбе
правообладателей, но это неэффективно и планируется усовершенствовать этот
механизм. Очевидно, речь идет о разработке более интеллектуального алгоритма
распознавания аудио- и видео-контента по тегам, как это, к примеру, реализовано
в YouTube, где загруженный видеоролик, нарушающий лицензию, может быть
автоматически удален уже через несколько минут после загрузки.
Как известно, некоторое время назад появилась возможность общаться на
ВКонтакте через протокол Jabber (он же XMPP). Протокол совершенно открытый и
существует масса opensource реализаций. По ряду причин (среди которых проблемы
интеграции с остальными сервисами ВКонтакте) было решено за месяц создать
собственный сервер, представляющий собой прослойку между внутренними сервисами
ВКонтакте и реализацией XMPP протокола. Реализован он на node.js — выбор
обусловлен тем, что JavaScript знают практически все разработчики проекта, к
тому же это хороший набор инструментов для реализации задачи. Сложным моментом
стала работа с большими контакт-листами. У многих пользователей количество
друзей ВКонтакте измеряется сотнями и тысячами, высока активность смены
статусов: люди появляются и исчезают из онлайна чаще, чем в других аналогичных
ситуациях. К тому же необходимо было реализовать тесную интеграцию с внутренней
системой обмена личными сообщениями ВКонтакте. В результате на сервисе 60-80
тысяч человек онлайн, в пике — 150 тысяч. TCP/HTTP-балансировщик нагрузки
HAProxy обрабатывает входящие соединения и используется для распределения
запросов по серверам, а также развертывания новых версий.
При выборе системы хранения данных думали о нереляционных системах хранения
данных (в частности, о MongoDB), но в итоге решили воспользоваться привычной
MySQL. Сервис функционирует на 5-ти серверах разной конфигурации, на каждом из
которых работает код на node.js (по 4 процесса на сервер), а на трех самых
мощных — еще и MySQL. Интересной особенностью является отсутствие связи между
группами друзей в XMPP с группами друзей на сайте — сделано по просьбе
пользователей, которые не хотели, чтобы их друзья из-за плеча видели, в какой
группе они находятся.
Важным подпроектом является также интеграция с внешними ресурсами, которую в
условиях высоконагруженного сервиса реализовать далеко не так просто. Все чаще
на страницах сторонних проектов можно увидеть виджеты «Мне нравится»,
позволяющими быстро поделиться интересным постом со своими друзьями, а также
небольшие блоки «Мы ВКонтакте» с данными о пользователях внутри привязанной
группы. Основные шаги, предпринятые в этом направлении, с небольшими
комментариями:
Не секрет
Завеса тайны насчет технической реализации ВКонтакте была немного развеяна,
опубликовано куча интересных аспектов, но все же многие моменты по-прежнему
остаются секретом. Возможно, в будущем появится более детальная информация о
собственной СУБД ВКонтакте, которая, как оказалось, является ключом к решению
всех самых сложных моментов в масштабируемости системы. Сейчас, как бы кто ни
относился к ВКонтакте, сервис является очень интересным с точки зрения
построения высоконагруженных систем. Все-таки 11 миллиардов запросов в день,
высочайший аптайм и почти 100 миллионов пользователей — дорогого стоят.
Warning
Далеко не все крупные проекты публично раскрывают аспекты построения
архитектуры. Даже примерная информация о том, что у них происходит и как они
работают, часто держится в секрете. Источником информации чаще всего
оказываются либо выступления представителей проектов на конференциях, либо
различные интервью/публикации сотрудников. Информация для этого материала
была собрана автором из этих же источников и не является официально
подтвержденной со стороны ВКонтакте.
