Русский
Русский
English
Статистика
Реклама

Вконтакте api

Как реализовать свою идею и не сойти с ума на самоизоляции

03.07.2020 18:07:41 | Автор: admin
Во время тотальной самоизоляции разработчики стали ещё активнее интересоваться онлайн-ивентами, где можно поучиться и попробовать силы в конкурсах. На этой волне мы запустили грантово-образовательный проект для нашего комьюнити. Не мелочась, заложили призовой фонд в 15 миллионов рублей. В этой статье расскажем, почему конкурс не сбавляет оборотов даже сейчас, когда никто уже не сидит дома, что ждёт VK Fresh Code дальше и какие приложения победили в первом этапе.

image


Денис Марков, деврел VK Mini Apps:
Мини-приложения открывают большие возможности перед теми, кто интересуется веб-разработкой. Используя привычные веб-технологии и уникальные возможности ВКонтакте, вы можете быстро сделать продукт, который привлечёт внимание тысяч, а то и миллионов пользователей.



Привет от команды VK Mini Apps! Мы расскажем, как помогли независимым разработчикам с пользой скоротать время на самоизоляции и что из этого получилось.

Почему всем был нужен VK Fresh Code


От месяца к месяцу аудитория мини-приложений в VK росла ровно и стабильно. Но в марте по всей стране грянула самоизоляция, и на домашнем режиме люди стали больше времени проводить в онлайне. Пользователи хлынули в каталог мини-приложений, как цунами.

Сервисы известных брендов увеличили свою и без того обширную аудиторию. Ещё больше людей стали подбирать недвижимость в мини-аппе Этажей, покупать товары с AliExpress, читать свежие выпуски Cosmopolitan не выходя из привычной соцсети и ничего не скачивая. У крупных бизнесов достаточно ресурсов, чтобы привлечь пользователей и удержать их преимуществами своих сервисов.

Но мы точно знали: сейчас, когда аудитория платформы резко возросла, так же выстрелить могут и мини-приложения от небольших студий и независимых разработчиков. И придумали, как им помочь.

Что мы сделали


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

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

Ещё обсудили тонкости модерации: на платформе она довольно жёсткая и обязательная для всех сервисов. Чтобы попасть в каталог, мини-аппы проходят через дотошных модераторов, а потом попадают в систему Testpool, где тысячи тестировщиков создают уйму репортов в первый же день. Но это всё идёт сервисам на пользу: из модерации они выходят крепкими, без багов и артефактов. Разработчики получают бесплатно полное тестирование продукта и уверенность, что пользователи придут в чистое приложение.

За время первого этапа конкурса, с 28 апреля по 8 июня, через всё это прошли 62 полноценных мини-аппа. Но из них только 30 соответствовали заявленной тематике волны она была посвящена образованию.

Познакомим вас с десятью победителями разработчики этих сервисов поровну разделили 3 миллиона рублей.

Итог первого этапа VK Fresh Code | Тематика: образование



Решу ЕГЭ


Готовиться к ЕГЭ проще, если для этого уже подобраны материалы, есть где потренироваться и у кого спросить совета. Такой набор возможностей пригодится выпускникам в любой точке страны: 14 предметов, тестовые вопросы, режим экзамена и сохранение личных достижений. А благодаря мини-аппу теперь всё это умещается в смартфоне.

image

Вадим Трегубенко, full-stack developer и автор проекта:
В 11-м классе портал Решу ЕГЭ был моим лучшим другом вот я и предложил его руководству разработать для них мини-приложение. Мне кажется, что благодаря моему проекту подготовка к экзаменам может стать ещё более удобной и структурированной.


Brain Defense


Интеллектуальный тренажёр в жанре Tower Defense. Чтобы защищаться от монстров, нужно решать математические примеры, разбираться в правописании и быстро переводить слова с английского. Скоро добавятся ещё вопросы по географии и химии.

image

Денис Пешехонов, бэкенд-разработчик:
При реализации ставил задачу закончить проект, наработки по которому появились намного раньше. Конкурсы я уже выигрывал, а тут появилась мотивация хоть что-то довести до каталога и логического завершения. ВКонтакте самое популярное российское мобильное приложение. Если кому-то и проверять гипотезу супераппа, то именно им. Интересно заскочить в этот поезд как можно раньше. Вообще я заметил крутую тенденцию: на хакатонах для реализации проектов всё чаще используют именно VK Mini Apps, потому что так быстрее.


Мозгополия


Здесь пользователь становится Мозгополистом. Его задача набрать как можно больше баллов: они начисляются не только за правильные ответы в тестах от других участников, но и за ошибки соперников в викторинах, которые составит он сам.



Александр Белов, геймдизайнер:
Идея Мозгополии появилась спонтанно, когда мы с друзьями-программистами проводили вечер за настольной игрой. Мы увидели новость о начале первого этапа VK Fresh Code и подумали: А почему бы не перенести в онлайн то, во что мы играем здесь и сейчас, но сделать упор на образование?.


GeoPuzzle


Это игра на интерактивной карте Земли, помогает изучить политическую географию. Можно подтянуть знания о странах и регионах: вспомнить их расположение, флаги, столицы и многое другое.



Виктор Тыщенко, бэкенд-разработчик и автор проекта:
Наверное, из всех победивших разработчиков мне было проще всего. Я разрабатываю и улучшаю аналогичный сервис уже три года, но на другой площадке. Фактически мне потребовалось только понять, как перенести свои наработки на платформу VK Mini Apps. В итоге всё получилось. Этот опыт дал мне новую аудиторию, и прямо сейчас в моём приложении она влюбляется в географию
.

Эко Просто


Мини-приложение доступно рассказывает про раздельный сбор мусора и объясняет, как обращаться с разными группами бытовых и промышленных отходов. А ещё помогает оценить ваш личный вклад в сохранение окружающей среды.



Александр Алибутаев, фронтенд-разработчик и автор проекта:
Идея пришла почти случайно, хотя вся наша команда давно придерживается жизненных принципов, которые помогают сберечь природу. Мы решили попробовать затронуть чувства людей, а заодно придумали для себя непростую миссию объяснить пользователям, что планета у нас пока только одна. В итоге вышло очень даже неплохо: пришедшая аудитория оказалась действительно понимающей, и мы получили много сообщений с благодарностями. Приятные бонусы победа в конкурсе и поток желающих безвозмездно помочь проекту.


SMM Посты


Внутри этого сервиса много интересного для SMM-специалистов: генератор тем для контента, формулы продающих текстов, галерея баннеров, трекер постинга и даже целая академия с уроками копирайтинга.

image

Анастасия Югова, дипломированный маркетолог, автор приложения и сообщества о SMM:
У меня есть экспертный опыт в продвижении сообществ ВКонтакте. Ещё полгода назад я задумала создать бесплатный сервис, который поможет админам вести коммерческие страницы. Провела анкетирование, в котором подробно опросила 566 респондентов о проблемах, с которыми они сталкиваются в этой работе. Все ответы структурировала и выявила главные боли.

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


QURAGA



Интеллектуальная игра с множеством вопросов на разные темы. Можно бросить вызов друзьям и посоревноваться за лучшую позицию в рейтинге.



Евгений Завалишин, бэкенд-разработчик проекта:
Фактически это упрощённая реинкарнация приложения Клевер, только без онлайн-ведущего и с более кулуарным режимом игры. Как мне кажется, наш сервис поможет людям в игровой форме узнать новые факты из разных областей: химии, физики, математики, географии, биологии. Пусть это не самые объёмные знания, но чем больше занимательных мелочей ты знаешь, тем интереснее ты сам.


Детский



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



Андрей Комаров, разработчик и автор проекта:
Я участвовал в обоих конкурсах мини-приложений от платформы VK Mini Apps. И в том и в другом занимал вторые места и брал награду за лучшее техническое решение. Потом случился Домашний разраб и очередное второе место по баллам в своей волне. Так что у меня уже четыре призовых места! Если бы у всех была такая же настойчивость и вера в себя, как у меня, думаю, мир был бы лучше.


Словоглот ридер



Приложение для чтения книг и текстов на иностранном языке. Сервис предлагает интерактивы, которые помогают запоминать новые фразы и пополнять словарный запас.



Константин Барышев, full-stack developer и автор проекта:
До сих пор скептически отношусь к монетизации на платформе, хоть в последнее время всё и становится намного лучше. Продолжаю совершенствовать своё приложение Полиглот оно давно в каталоге. Когда узнал про грант, решил создать сиквел, но с иностранными словами. Грела душу перспектива получить 300 тысяч рублей и всё получилось! Очень помогли ранние наработки и опыт, так что конкурс для меня прошёл чётко и выверено. Переживал только за то, чтобы попасть в тематику этапа. Спасибо за питчинг это мотивировало не забросить задуманное.


Грамотей



Бесконечная викторина по грамматике. Сервис помогает скоротать время, расширяя свой словарный запас, и радует приятным дизайном.



Александр Шарипов, full-stack developer и автор проекта:
У меня всё достаточно прозаично: идея в голове сидела давно, а делать её просто ради интереса было как-то неактуально. Можно сказать, что звёзды сошлись. Нас ограничили только общей тематикой в неё моя идея попадала идеально и пообещали приятный бонус за победу. Считаю, что не зря выжидал и вынашивал проект. Он дождался своего часа.



До конца года у нас состоятся ещё четыре этапа конкурса VK Fresh Code, включая вторую волну, которая уже идёт. В каждом из них авторы 10 лучших приложений получат грантовую поддержку 300 тысяч рублей. Половина суммы поступит на счёт в рекламном кабинете VK чтобы новый сервис получил мощное продвижение.

Участникам нужно пройти модерацию и бета-тестирование, чтобы попасть в каталог мини-приложений платформы VK Mini Apps. У каждого этапа свои сроки и тематика за ними можно следить в официальной группе платформы: vk.com/vkappsdev

Помните: не всегда побеждают большие и важные зачастую удача улыбается быстрым и дерзким. Ждём вас на VK Fresh Code поможем пройти путь от поиска идеи до релиза!
Подробнее..

VKWave фреймворк для разработки ботов ВКонтакте

16.08.2020 16:17:46 | Автор: admin


Привет, Хабр!


Сегодня я хочу рассказать о замечательной библиотеке для разработке ботов ВКонтакте с помощью языка программирования Python.


VKWave


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


Минимальная требуемая версия Python 3.7


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


Также у нас есть чат в Telegram


Установка


Установка очень проста и содержит в себе всего одну команду:


pip install vkwave

А теперь предлагаю перейти к примерам!


Echo-бот


Самая простая задача. Бот который отвечает нам тем же самым текстом, который мы ему написали.


# Импортируем нужные классы.# SimpleLongPollBot: обёртка для более удобной работы с фреймворком# SimpleBotEvent: тип события, который предоставляет SimpleLongPollBotfrom vkwave.bots import SimpleLongPollBot, SimpleBotEvent# инициализируем бота (можно ввести список токенов, тогда vkwave сможет обходить лимиты ВКонтакте)bot = SimpleLongPollBot(tokens=TOKEN, group_id=GROUP_ID)# декоратор для создания обработчиков.# можно передавать свои фильтры, но в данном случае мы хотим принимать все сообщения@bot.message_handler()def echo(event: SimpleBotEvent) -> str:    # мы можем сразу возвращать текст, т.к vkwave понимает, что если вы возвращаете строку, то вы хотите ответить на сообщение этим текстом. пользователь может задать свои типы данных, которые он сможет возвращать из хендлеров (а также написать нужную логику для их преобразования в нужные действия)    return event.object.object.message.text# запускаем бота с игнорированием ошибок (не останавливаться даже при них)bot.run_forever()

Код содержит буквально пару строк и выглядит очень легко.


Предлагаю написать что-нибудь поинтереснее. Давайте напишем такого же бота, но он будет печатать в ответ только тот текст, который идёт как аргументы команды /echo. Например /echo мой текст.


Вторая версия Echo-бота


# мы используем фильтр для команд. он фильтрует все сообщения которые не выглядит как `/<наша команда>`. можно задать свои префиксы, а также передать список команд@bot.message_handler(bot.command_filter("echo"))def echo(event: SimpleBotEvent) -> str:    # получаем все аргуметы команды    args = event.object.object.message.text.split()    # проверяем, что есть хотя бы один аргумент    # в противном случае - пишем, что пользователь должен ввести какой-нибудь текст    if len(args) < 2:        return "Напиши какой-нибудь текст!"    # возвращаем итоговый текст (соединяем все аргументы через пробел)    return " ".join(args[1:])

Уже интереснее. Как мы видим, VKWave предоставляет нам фильтр для команд. Скажу сразу: стандартных фильтров в VKWave много, а также вы можете написать свои.


Итоговая версия Echo-бота


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


# Импортируем нужные классы для разработки своих фильтровfrom vkwave.bots.core.dispatching.filters.base import BaseFilter, BaseEvent, FilterResult# объявляем свой фильтр, который наследуется от базовогоclass EchoFilter(BaseFilter):    # мы можем определить `__init__` для дополнительной настройки фильтра    # объявляем асинхронный метод `check`, который принимает событие и возвращает результат фильтра    async def check(self, event: BaseEvent) -> FilterResult:        # делаем алиас для текста сообщения        text = event.object.object.message.text        # разбиваем сообщение по пробелам        all_args = text.split()        # если частей меньше двух - фильтр не прошёл        if len(all_args) < 2:            # возвращаем False.            # так же можем, например, что-то написать пользователю            # у нас есть `event.api_ctx`, который предоставляет лёгкий доступ ко всем методам            return FilterResult(False)        # если нулевой аргумент (сама команда) не "/echo" возвращаем False        if all_args[0] != "/echo":            return FilterResult(False)        # передаём обработчику уже готовый ответ на сообщение        event["echo_answer"] = " ".join(all_args[1:])        return FilterResult(True)# используем фильтр@bot.message_handler(EchoFilter())def echo(event: SimpleBotEvent) -> str:    # возвращаем текст, который мы уже "собрали" в фильтре    return event["echo_answer"]

Заключение


Конечно, я показал вам не все, вообще не все, возможности VKWave. Они очень широки, начиная от возможности своих фильтров и middlewares, типов обработчиков, способов получения событий, заканчивая мультиботом, собственным HTTP клиентом и многое другое!


Этой статьёй я хочу мотивировать вас попробовать создать своего бота ВКонтакте, не используя не удобные vk_api и vk.


Репозиторий на GitHub
Наш чат в Telegram

Подробнее..

Из песочницы По мотивам youtube-dl C 9 и музыка ВК

28.10.2020 06:04:03 | Автор: admin
image
В 2020ом мы пользуемся разными музыкальными сервисами, но как реликт ушедшей эпохи, в забытом профиле ВК, у многих хранится музыка. Функции для загрузки нет, но что если позарез нужно спасти аудиозапись?
Под катом рассмотрен процесс создания self-hosted утилиты для загрузки своих аудио, не сливающей данные профиля сторонним сервисам и демонстрирующей мощь экосистемы современного и кроссплатформенного .NET.

Работать утилита будет так:
 dotnet vkm [login] [password] [audio-lemma]

Перво-наперво создадим репозиторий и опишем в одном файле csproj зависимости проекта
<Project Sdk="Microsoft.NET.Sdk">    <PropertyGroup>        <!--Утилита будет работать из консоли-->        <OutputType>Exe</OutputType>        <TargetFramework>netcoreapp3.1</TargetFramework>        <!--Строго запрещаем null -->        <Nullable>enable</Nullable>        <TreatWarningsAsErrors>true</TreatWarningsAsErrors>        <!--И включаем C# 9 -->        <LangVersion>9</LangVersion>    </PropertyGroup>    <ItemGroup>        <!--Зависимость от VK API без необходимости вручную получать токен-->        <PackageReference Include="VkNet" Version="1.56.0" />        <!--Доступ к своим сообщениям, комментариям и музыке-->        <PackageReference Include="VkNet.AudioBypassService" Version="1.7.0" />    </ItemGroup></Project>

После этого с чистой совестью можно приступать к написанию кода. Нам потребуется авторизация утилиты в ВК с полным доступом к своему профилю. И как мы видим, благодаря экосистеме .NET, сделать это невероятно просто:
static class Vk{    internal static VkApi LoginToVkApi(string login, string password)    {        // Включаем доступ к своим сообщениям, комментариям и аудиозаписям        var api = new VkApi(new ServiceCollection().AddAudioBypass());        api.Authorize(new ApiAuthParams        {             ApplicationId = 1980660,            Login = login,             Password = password,             Settings = All         });        $"Login as vk.com/id{api.UserId}".Println(DarkBlue);        return api;    }}

Опишем точку входа и фильтр загружаемых аудиозаписей. Используем для этого top-level programs и прямо в файле Application.cs валидируем аргументы, одновременно инициализируя api
var vk = args.Length switch{    3 => LoginToVkApi(args[0], args[1]),    _ => throw new ArgumentException("Invalid arguments. Usage:\n" +        "  dotnet vkm [login] [password] [audio]\n" +    )};

Приводим лемму для поиска аудиозаписи к upper-case
var lemma = args.Last().ToUpperInvariant();

И грепаем с помощью Linq все аудиозаписи с её вхождением. Отдельное спасибо хабраюзеру SuperHackerVk за способ получения mp3-ссылки регуляркой.
var audios = vk.Audio.Get(new AudioGetParams { Count = 6000 })    .Where(x => x.Title.ToUpperInvariant().Contains(lemma))    .Select(x => (x.Title, Url: Regex.Replace(        x.Url.ToString(),        @"/[a-zA-Z\d]{6,}(/.*?[a-zA-Z\d]+?)/index.m3u8()",        @"$1$2.mp3"    )));

Наконец остается только загрузить свои найденные аудио:
using var http = new HttpClient();foreach (var (title, url) in audios){    $"Downloading {title}...".Println(DarkBlue);    await WriteAllBytesAsync($"{title}.mp3", await http.GetByteArrayAsync(url));}

Вот и все! Утилита написана и готова к использованию в личных целях. Заметно как C# с каждым годом все больше превращается в хороший мультитул, позволяющий решать любой спектр задач. Расширения синтаксических возможностей которые при анонсах кажутся загромождающими язык, на практике напротив, позволяют сократить код и сделать его простым и понятным.

Репозиторий на GitHub c небольшими дополнениями и документацией по запуску.
Всем удачного дня!
Подробнее..

Из песочницы По мотивам youtube-dl музыка ВК

28.10.2020 10:05:26 | Автор: admin
image
В 2020ом мы пользуемся разными музыкальными сервисами, но как реликт ушедшей эпохи, в забытом профиле ВК, у многих хранится музыка. Функции для загрузки нет, но что если позарез нужно спасти аудиозапись?
Поскольку такого софта в открытом доступе не обнаружилось, кроме парочки веб-сервисов требующих авторизацию через ВК (что не очень то и безопасно), под катом мы рассмотрим процесс создания self-hosted утилиты на современном C# для загрузки своих аудио, не сливающей данные профиля сторонним сервисам.

Одной из ценностей работы программиста является простота и по возможности лаконичность кода. Поэтому мы склеим несколько уже существующих библиотек чтобы получить нужное решение.
Работать утилита будет так:
 dotnet vkm [login] [password] [audio-lemma]

Перво-наперво создадим репозиторий и опишем в одном файле csproj зависимости проекта
<Project Sdk="Microsoft.NET.Sdk">    <PropertyGroup>        <!--Утилита будет работать из консоли-->        <OutputType>Exe</OutputType>        <TargetFramework>netcoreapp3.1</TargetFramework>        <!--Строго запрещаем null на этапе компиляции, чтобы застраховаться от NRE -->        <Nullable>enable</Nullable>        <TreatWarningsAsErrors>true</TreatWarningsAsErrors>        <!--И включаем C# 9 который понадобится нам для top-level точки входа -->        <LangVersion>9</LangVersion>    </PropertyGroup>    <ItemGroup>        <!--Зависимость от VK API без необходимости вручную получать токен-->        <PackageReference Include="VkNet" Version="1.56.0" />        <!--Доступ к своим сообщениям, комментариям и музыке-->        <PackageReference Include="VkNet.AudioBypassService" Version="1.7.0" />    </ItemGroup></Project>

После этого с чистой совестью можно приступать к написанию кода. Нам потребуется авторизация утилиты в ВК с полным доступом к своему профилю. И как мы видим, благодаря экосистеме .NET, сделать это невероятно просто:
static class Vk{    internal static VkApi LoginToVkApi(string login, string password)    {        // Включаем доступ к своим сообщениям, комментариям и аудиозаписям        var api = new VkApi(new ServiceCollection().AddAudioBypass());        api.Authorize(new ApiAuthParams        {             ApplicationId = 1980660,            Login = login,             Password = password,             Settings = All         });        $"Login as vk.com/id{api.UserId}".Println(DarkBlue);        return api;    }}

Опишем точку входа и фильтр загружаемых аудиозаписей. Используем для этого top-level programs и прямо в файле Application.cs валидируем аргументы, одновременно инициализируя api
var vk = args.Length switch{    3 => LoginToVkApi(args[0], args[1]),    _ => throw new ArgumentException("Invalid arguments. Usage:\n" +        "  dotnet vkm [login] [password] [audio]\n" +    )};

Приводим лемму для поиска аудиозаписи к upper-case
var lemma = args.Last().ToUpperInvariant();

И грепаем с помощью Linq все аудиозаписи с её вхождением. Отдельное спасибо хабраюзеру SuperHackerVk за способ получения mp3-ссылки регуляркой.
var audios = vk.Audio.Get(new AudioGetParams { Count = 6000 })    .Where(x => x.Title.ToUpperInvariant().Contains(lemma))    .Select(x => (x.Title, Url: Regex.Replace(        x.Url.ToString(),        @"/[a-zA-Z\d]{6,}(/.*?[a-zA-Z\d]+?)/index.m3u8()",        @"$1$2.mp3"    )));

Наконец остается только загрузить свои найденные аудио:
using var http = new HttpClient();foreach (var (title, url) in audios){    $"Downloading {title}...".Println(DarkBlue);    await WriteAllBytesAsync($"{title}.mp3", await http.GetByteArrayAsync(url));}

Вот и все! Утилита написана и готова к использованию в личных целях. Заметно как C# с каждым годом все больше превращается в хороший мультитул, позволяющий решать любой спектр задач. Расширения синтаксических возможностей которые при анонсах кажутся загромождающими язык, на практике напротив, позволяют сократить код и сделать его простым и понятным.

Репозиторий на GitHub c небольшими дополнениями и документацией по запуску.
Всем удачного дня!
Подробнее..

В VK добавили Callback кнопки для ботов

25.07.2020 16:11:23 | Автор: admin

Использовать callback.


Доброго времени суток, уважаемые жителя Хабра)
Мой первый пост. Будет кратко, емко и надеюсь актуально.


9го июля ВК выкатил callback кнопки для чат-ботов. Телеграм напрягся сделал это в 199... давно. Самая популярная библиотека для разработки чат-ботов под ВК на Python vk_api (от разработчика python273). Ввиду того, что свежие правки в нее вносятся медленно, я взял на себя смелось сделать форк, дополнить его и описать небольшой пример использования.


Что сделано относительно исходной v11.80?


  1. Обновлены ограничения по клавиатуре (в соответствии с изменениями в API):


    • не более 5 кнопок в строке (было 4);
    • не более 10 и 6 строк для стандартного и inline представления соответственно (было 10 и там, и там);
    • Default кнопка переименована в Secondary.

  2. Добавлены callback-кнопки:


    • новый тип события "message_event" (клик по кнопке);
    • новый метод "создать callback кнопку";
    • добавлен example (анимация работы и код будут приведены ниже).


Виды callback кнопок


У сallback кнопок 3 встроенных действия по клику (+ редактирование сообщения):


  1. show_snackbar показать всплывающее сообщение (исчезает через 10 сек);
  2. open_link открыть URL ссылку;
  3. open_app открыть ВК приложение;
  4. можно настроить редактирование текущего сообщения, дабы по клику можно было изменять клавиатуру + текст в текущем сообщении.

Как установить модифицированную библиотеку?


pip install git+https://github.com/chebotarevmichael/vk_api

Код примера по частям


Импорты. Думаю, с ними все понятно.


from vk_api import VkApifrom vk_api.utils import get_random_idfrom vk_api.bot_longpoll import VkBotLongPoll, VkBotEventTypefrom vk_api.keyboard import VkKeyboard, VkKeyboardColorimport json

Настройка и запуск бота. Указываем идентификатор и longpoll-токен группы.
Для использования кнопки "открыть ВК приложение" указываем идентификатор приложения и его владельца.


# ОбщиеGROUP_ID = '100...500'GROUP_TOKEN = 'df2148cc7c664...токен_группы....df2148cc7c6642242531fad399'API_VERSION = '5.120'# для callback-кнопки "открыть приложение"APP_ID = 100500         # id IFrame приложенияOWNER_ID = 123456      # id владельца приложения# виды callback-кнопокCALLBACK_TYPES = ('show_snackbar', 'open_link', 'open_app')# Запускаем ботvk_session = VkApi(token=GROUP_TOKEN, api_version=API_VERSION)vk = vk_session.get_api()longpoll = VkBotLongPoll(vk_session, group_id=GROUP_ID)

Создаем два меню.
В первом меню все 4 упомянутых выше действия кнопок.
Во втором только кнопка "назад", возвращающая предыдущее меню.


.


# Настройки для обоих клавиатурsettings = dict(one_time=False, inline=True)# 1. Клавиатура с 3 кнопками: "показать всплывающее сообщение", "открыть URL" и изменить меню (свой собственный тип)keyboard_1 = VkKeyboard(**settings)# pop-up кнопкаkeyboard_1.add_callback_button(label='Покажи pop-up сообщение', color=VkKeyboardColor.SECONDARY, payload={"type": "show_snackbar", "text": "Это исчезающее сообщение"})keyboard_1.add_line()# кнопка с URLkeyboard_1.add_callback_button(label='Откртыть Url', color=VkKeyboardColor.POSITIVE, payload={"type": "open_link", "link": "https://vk.com/dev/bots_docs_5"})keyboard_1.add_line()# кнопка по открытию ВК-приложенияkeyboard_1.add_callback_button(label='Открыть приложение', color=VkKeyboardColor.NEGATIVE, payload={"type": "open_app", "app_id": APP_ID, "owner_id": OWNER_ID, "hash": "anything_data_100500"})keyboard_1.add_line()# кнопка переключения на 2ое менюkeyboard_1.add_callback_button(label='Добавить красного ', color=VkKeyboardColor.PRIMARY, payload={"type": "my_own_100500_type_edit"})# 2. Клавиатура с одной красной callback-кнопкой. Нажатие изменяет меню на предыдущее.keyboard_2 = VkKeyboard(**settings)# кнопка переключения назад, на 1ое меню.keyboard_2.add_callback_button('Назад', color=VkKeyboardColor.NEGATIVE, payload={"type": "my_own_100500_type_edit"})

Запускаем long poll.


Запускаем действо. Если пользователь присылает текстовое сообщение выдаем первое меню. Если это событие "клик по callback кнопке" выполняем определенное действие (одно из 3+1 действий, упомянутых выше).


f_toggle: bool = Falsefor event in longpoll.listen():    # отправляем меню 1го вида на любое текстовое сообщение от пользователя    if event.type == VkBotEventType.MESSAGE_NEW:        if event.obj.message['text'] != '':            if event.from_user:                # Если клиент пользователя не поддерживает callback-кнопки,                # нажатие на них будет отправлять текстовые                # сообщения. Т.е. они будут работать как обычные inline кнопки.                if 'callback' not in event.obj.client_info['button_actions']:                    print(f'Клиент {event.obj.message["from_id"]} не поддерж. callback')                vk.messages.send(                        user_id=event.obj.message['from_id'],                        random_id=get_random_id(),                        peer_id=event.obj.message['from_id'],                        keyboard=keyboard_1.get_keyboard(),                        message=event.obj.message['text'])    # обрабатываем клики по callback кнопкам    elif event.type == VkBotEventType.MESSAGE_EVENT:        # если это одно из 3х встроенных действий:        if event.object.payload.get('type') in CALLBACK_TYPES:            # отправляем серверу указания как какую из кнопок обработать. Это заложено в             # payload каждой callback-кнопки при ее создании.            # Но можно сделать иначе: в payload положить свои собственные            # идентификаторы кнопок, а здесь по ним определить            # какой запрос надо послать. Реализован первый вариант.            r = vk.messages.sendMessageEventAnswer(                      event_id=event.object.event_id,                      user_id=event.object.user_id,                      peer_id=event.object.peer_id,                                                                         event_data=json.dumps(event.object.payload))        # если это наша "кастомная" (т.е. без встроенного действия) кнопка, то мы можем        # выполнить edit сообщения и изменить его меню. Но при желании мы могли бы        # на этот клик открыть ссылку/приложение или показать pop-up. (см.анимацию ниже)        elif event.object.payload.get('type') == 'my_own_100500_type_edit':            last_id = vk.messages.edit(                      peer_id=event.obj.peer_id,                      message='ola',                      conversation_message_id=event.obj.conversation_message_id,                      keyboard=(keyboard_1 if f_toggle else keyboard_2).get_keyboard())            f_toggle = not f_toggleif __name__ == '__main__':    print()

Как выглядит процесс


Использовать callback.


Заключение


Тот факт, что callback-кнопки наконец-то появились в ВК радует. И пусть пока они работают только под мобильными приложениями, а в браузере не поддерживают. Пусть в браузере inline-кнопки все еще не выравнивается по ширине. Все же их наличие хоть в каком-то виде искренне радует меня, как разработчика коммерческого телеграмм-бота.


Теперь появилась возможность реализовать ВК-интерфейс для своего телеграм-бота, где в разы больше жителей РФ, т.е целевой аудитории. Этот факт заставляет мириться со всеми перечисленными неудобствами и минусами, и идти к горе, раз она не хочет идти к Магомеду. На скриншоте ниже реализация одного и того же интерфейса через callback-кнопки: справа в Телеграм, и слева ВКонтакте.


.


Надеюсь, кому-то этот краткий обзор поможет начать использовать callback кнопки в своих ботах. Pull-request автору библиотеки отправлен.

Подробнее..

Из песочницы Бот-викторина для ВКонтакта

20.08.2020 00:09:36 | Автор: admin
Администраторам сообществ по "Смешарикам"
Пожалуйста, не используйте этого бота в своих пабликах пусть это будет нашей изюминкой.

Введение


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

Создание группы


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

image

Выбираем тип сообщества Группа по интересам.

image

Придумываем название, выбираем тематику, тип группы оставляем открытой.

image

Теперь нам потребуется узнать ID и создать токен группы.

Если же ID можно узнать в адресной строке после слова club, то с токеном нужно будет немного запариться.

image

Заходим в управление группой:

image

Выбираем раздел Работа с API и включаем там Long Poll API для работы бота.

image

Далее переходим в Ключи доступа, создаём ключ доступа с такими настройками:

image

Получившийся ключ доступа и есть наш токен:

image

Осталось разве что разрешить добавлять группу в беседы.

Заходим в раздел Сообщения -> Настройки для бота, включаем Возможности ботов и жмем на Разрешить добавлять сообщество в беседы. Сохраняем.

image

Установка модуля vk_api


Для того, чтобы установить модуль для работы с Вконтакте API нужно прописать в командную строку следующую команду:

pip3 install vk_api

Ещё нужно создать в директории бота файл points.pickle.

Базовые функции


Переходим к программной части:
Подключаем нужные плагины: pickle, random, requests и библиотеку vk_api, благодаря которой можно работать с ВКонтакте.

import randomimport pickleimport requestsfrom vk_api.bot_longpoll import VkBotLongPoll, VkBotEventType #подключаемся к BotLongpoll - он нам нужен для работы именно с беседами.

Создаем словарь с цитатами и словари для хранения информации:

series = {"серия":["цитата 1", "цитата 2"], "серия":["цитата 1", "цитата 2"]}series_in_chats = {} quotes_in_chats = {}points = {}

Сами цитаты заключены в списки в ключах словаря series для того, чтобы на одну серию приходилось много цитат.

Переменная series_in_chats нужна для хранения информации о серии в отдельной беседе, переменная quotes_in_chats аналогично, только для хранения информации о цитате.

Теперь подключаемся к группе:

vk_session = vk_api.VkApi(token="Ваш токен") #токен и ID группыlongpoll = VkBotLongPoll(vk_session, "ID Вашей группы") #мы нашли ранееvk = vk_session.get_api()

Можно создать функцию для более удобной отправки сообщений:

def send(ch_id, msg):    vk.messages.send(chat_id=ch_id, random_id=random.randint(1, 9999999), message=msg)

Аргументы:
ch_id #определяет ID чата, в который нужно отправить сообщениеmsg #определяет само сообщение


vk.messages.send(chat_id, random_id, message)

Метод для отправки сообщений.

Обязательные параметры:

chat_id - ID чата, из которого прилетело сообщение,random_id - случайный идентификатор сообщения, если честно сам не очень понимаю что это,message - текст сообщения.

Подробнее о методе тут.

Обработка сообщений


while True: #бесконечный цикл    try:         for event in longpoll.listen():    if event.type == VkBotEventType.MESSAGE_NEW and event.from_chat:chat_id = int(event.chat_id) #ID чата, из которого пришло сообщение                text = event.object.text.lower() #текст сообщения                man = event.obj.from_id #ID человека или группы, написавшего сообщение                if chat_id not in series_in_chats:                    episode = random.choice(series.keys()) #выбираем случайную серию                     #из ключей словаря                    quote = random.choice(series.get(episode)) #выбираем случайную цитату из                     #значения серии                    series_in_chats.update({chat_id:episode}) #обновляем словарь для хранения                    quotes_in_chats.update({chat_id:quote}) #обновляем словарь для хранения                    #мы написали этот раздел для того, чтобы в каждой беседе                      #была своя серия и цитата из неё.    except:        continue        #конструкция try except - если вдруг случится какая-нибудь ошибка        #бот не сломается, а продолжит работу

Теперь мы можем обрабатывать сообщения полученные группой, отправлять сообщения от имени группы и многое другое.

Внедряем очки


Этот код нужно вставить после проверки if chat_id not in series_in_chats:

                if points == {}:                    with open('points.pickle', 'wb') as f:                        pickle.dump(points, f)                    with open('points.pickle', 'rb') as f:                                                points = pickle.load(f)                 if isinstance(points.get(man), int) == False:                    points.update({man:0})                    with open('data.pickle', 'wb') as f:                        pickle.dump(points, f)                        #если человека нет в словаре points                        #мы его туда добавляем                       

Угадайка


Делаем проверку: если полученное в беседе сообщение будет равняться слову угадайка, бот будет отвечать цитатой, которую нужно угадать (все это после проверки if isinstance):

if text == "угадайка":    send(chat_id, "Отгадайте, из какой серии эта цитата: "+ quotes_in_chats.get(chat_id))

Осталось только сделать проверку на правильность серии если в сообщении будет присутствовать название серии, бот ответит, что серия была угадана:

if series_in_chats.get(chat_id) in text:        send(chat_id, "Вы ответили верно!")    points.update({man:points.get(man)+1}) #прибавляем 1 балл        with open('points.pickle', 'wb') as f:        pickle.dump(points, f) #сохраняем информацию об очках в файл    send(chat_id, "Вы ответили верно!\nУ вас столько очков: "+str(points.get(man)))    #меняем цитату и серию:    episode = random.choice(series.keys()) #выбираем случайную серию     #из ключей словаря    quote = random.choice(series.get(episode)) #выбираем случайную цитату из     #значения серии    series_in_chats.update({chat_id:episode}) #обновляем словарь для хранения    quotes_in_chats.update({chat_id:quote}) #обновляем словарь для хранения    

Заключение


По итогу, бот будет работать как-то так:



Разумеется, на этой основе можно создать практически любого бота не только угадайку.

Созданный бот можно увидеть в сообществе ВКонтакте "Обитель Квестов | Смешарики".

Он, кстати, работает не только в чатах, но и в личных сообщениях.

А ещё в нем есть несколько штучек, о которых я здесь не рассказал.
Подробнее..

Бот для автопостинга VK

27.09.2020 20:23:04 | Автор: admin
ВНИМАНИЕ: статья создана только в обучающих целях, я не призываю Вас использовать продукт полученный в конце урока для принесения неудобств или собственной выгоды


Что будем делать


Бота для автопостинга записей на стене сообщества или страницы Vk

Зачем


Для ознакомительных целей

Что нам понадобится




Начнем


Для работы нам понадобится токен с разрешениями wall и offline. Для получения токена создайте свое Standalone-приложение Vk. И сохраните его ID.

Далее перейдите по ссылке:
oauth.vk.com/authorize?client_id=IDAPP&scope=wall,offline&redirect_uri=http://api.vk.com/blank.html&response_type=token
И вместо IDAPP подставьте ID своего приложения. Или воспользуйтесь ссылкой, которую я подготовил специально для Вас.

Если все сделано правильно Вас перекинет на другой сайт, а в URL странице в GET параметре access_token будет токен, который нам и нужен, сохраняем его.

Работа XML


Для хранения настроек созданим файл формата .xml со следующем контентом:
<settings>  <token>token</token>  <textPost>Text post</textPost>  <interval>120</interval>    <post>    <attachments>      <attachment>attachment</attachment>    </attachments>    <copyright>copyright</copyright>    <v>5.122</v>  </post>    <groups>    <group>short name group</group>  </groups></settings>


Замените:
  • token на токен, который мы получили выше
  • Text post на сообщение, которое должно быть в записи
  • attachment на объект, который будет прикреплен к записи
  • copyright на ссылку источника
  • short name group на короткое имя(без vk.com) страницу сообщества/ пользователя, где будет проходить публикация(стена должна быть открытой для публикации)


Начнем писать код


Импортируем все нужные библиотеки, создадим экземпляр нашего модуля и авторизуемся во вконтакте от лица пользователя через токен.
import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))


Далее получим все короткие адреса, где будут публиковаться записи.
import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))groupsId = []groupsShortName = ""for child in XML.parsingFile("groups", False):    groupsShortName += child.text + ","for group in VK.method("groups.getById", {"group_ids": groupsShortName}):    groupsId.append(group["id"] * -1)del groupsShortName


Теперь получим сообщение, которое будет в записи, интервал, с которым будут публиковаться записи и источник записи.
import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))groupsId = []groupsShortName = ""for child in XML.parsingFile("groups", False):    groupsShortName += child.text + ","for group in VK.method("groups.getById", {"group_ids": groupsShortName}):    groupsId.append(group["id"] * -1)del groupsShortNametextPost = XML.parsingFile("textPost")intervalPost = int(XML.parsingFile("interval"))


Теперь получим все объекты, которые будут прикреплены к записи.
import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))groupsId = []groupsShortName = ""for child in XML.parsingFile("groups", False):    groupsShortName += child.text + ","for group in VK.method("groups.getById", {"group_ids": groupsShortName}):    groupsId.append(group["id"] * -1)del groupsShortNametextPost = XML.parsingFile("textPost")intervalPost = int(XML.parsingFile("interval"))attachments = [attachment.text for attachment in XML.parsingFile("attachments", False)]copyright = XML.parsingFile("copyright")v = XML.parsingFile("v")


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

Сначала сделаем цикл, а функцию оставим пустой. Так же код будет работать, только если будет запущен из консоли.

import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))groupsId = []groupsShortName = ""for child in XML.parsingFile("groups", False):    groupsShortName += child.text + ","for group in VK.method("groups.getById", {"group_ids": groupsShortName}):    groupsId.append(group["id"] * -1)del groupsShortNametextPost = XML.parsingFile("textPost")intervalPost = int(XML.parsingFile("interval"))attachments = [attachment.text for attachment in XML.parsingFile("attachments", False)]copyright = XML.parsingFile("copyright")v = XML.parsingFile("v")done = Falsedef publicPosts():    passif __name__ == "__main__":    done = Truewhile done:    publicPosts()    time.sleep(intervalPost)


Чтобы публиковать запись будем вызвать метод API wall.post и передавать параметры получение раньше. Если все сработает правильно будет выводится соответствующее сообщение в консоль.

import vk_apiimport timefrom modules import XML as moduleXmlXML = moduleXml.XML("settings")VK = vk_api.VkApi(token=XML.parsingFile("token"))groupsId = []groupsShortName = ""for child in XML.parsingFile("groups", False):    groupsShortName += child.text + ","for group in VK.method("groups.getById", {"group_ids": groupsShortName}):    groupsId.append(group["id"] * -1)del groupsShortNametextPost = XML.parsingFile("textPost")intervalPost = int(XML.parsingFile("interval"))attachments = [attachment.text for attachment in XML.parsingFile("attachments", False)]copyright = XML.parsingFile("copyright")v = XML.parsingFile("v")done = Falsedef publicPosts():    for groupId in groupsId:        for i in range(1, 5):            result = VK.method("wall.post", {                "owner_id": groupId,                "message": textPost,                "attachments": attachments,                "copyright": copyright,                "v": v            })            if result["post_id"]:                print("Good post, id post - " + str(result["post_id"]))            else:                print("Error posting")if __name__ == "__main__":    done = Truewhile done:    publicPosts()    time.sleep(intervalPost)


Заключение


Вот и все, весь код готов. Скажу Вам сразу же мне 13 лет. И я хочу рассказать и поделиться тем, что я умею и считаю интересным для других. Так мою прошлую публикацию прочитали 2к+ человек, а 40 человек сохранили в закладки, хотя там и есть, что доработать. Это меня замотивировала, спасибо Вам большое.

Проект на gitHub.

ВНИМАНИЕ: статья создана только в обучающих целях, я не призываю Вас использовать продукт полученный в конце урока для принесения неудобств или собственной выгоды
Подробнее..

Бенчмарки VKUI и других ребят из UI-библиотек

26.05.2021 12:10:08 | Автор: admin

Меня зовут Григорий Горбовской, я работаю в Web-команде департамента по экосистемным продуктам ВКонтакте, занимаюсь разработкой VKUI.

Хочу вкратце рассказать, как мы написали 8 тестовых веб-приложений, подключили их к моно-репозиторию, автоматизировали аудит через Google Lighthouse с помощью GitHub Actions и как решали проблемы, с которыми столкнулись.

VKUI это полноценный UI-фреймворк, с помощью которого можно создавать интерфейсы, внешне неотличимые от тех, которые пользователь видит ВКонтакте. Он адаптивный, а это значит, что приложение на нём будет выглядеть хорошо как на смартфонах с iOS или Android, так и на больших экранах планшетах и даже десктопе. Сегодня VKUI используется практически во всех сервисах платформы VK Mini Apps и важных разделах приложения ВКонтакте, которые надо быстро обновлять независимо от магазинов.

VKUI также активно применяется для экранов универсального приложения VK для iPhone и iPad. Это крупное обновление с поддержкой планшетов на iPadOS мы представили 1 апреля.

Адаптивный экран на VKUIАдаптивный экран на VKUI

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

Какие задачи поставили

  1. Выявить главные проблемы производительности VKUI.

  2. Подготовить почву, чтобы развернуть автоматизированные бенчмарки библиотеки и наших веб-приложений на основеVKUI.

  3. Сравнить производительность VKUI и конкурирующих UI-фреймворков.

Технологический стек

Инструменты для организации процессов:

Чтобы проще взаимодействовать с несколькими веб-приложениями, в которых применяются разные UI-библиотеки, здесь используем lerna. Это удобный инструмент, с помощью которого мы объединили в большой проект ряд приложений с отличающимися зависимостями.

Бенчмарки мы проводим через Google Lighthouse официальный инструмент для измерения Web Vitals. Де-факто это стандарт индустрии для оценки производительности в вебе.

Самое важное делает GitHub Actions: связывает воедино сборку и аудит наших приложений.

Библиотеки, взятые для сравнения:

Название

Сайт или репозиторий

VKUI

github.com/VKCOM/VKUI

Material-UI

material-ui.com

Yandex UI

github.com/bem/yandex-ui

Fluent UI

github.com/microsoft/fluentui

Lightning

react.lightningdesignsystem.com

Adobe Spectrum

react-spectrum.adobe.com

Ant Design

ant.design

Framework7

framework7.io


Мы решили сравнить популярные UI-фреймворки, часть из которых основана на собственных дизайн-системах. В качестве базового шаблона на React использовали create-react-app, и на момент написания приложений брали самые актуальные версии библиотек.

Тестируемые приложения

Первым делом мы набросали 8 приложений. В каждом были такие страницы:

  1. Default страница с адаптивной вёрсткой, содержит по 23 подстраницы.

    • На главной находится лента с однотипным контентом и предложением ввести код подтверждения (абстрактный). При его вводе на несколько секунд отображается полноэкранный спиннер загрузки.

    • Страница настроек, в которую входит модальное окно с примитивным редактированием профиля и очередным предложением ввести код.

    • Страница с простым диалогом условно, с техподдержкой.

  2. List (Burn) страница со списком из 500 элементов. Главный аспект, который нам хотелось проверить: как вложенность кликабельных элементов влияет на показатель Performance.

  3. Modals страница с несколькими модальными окнами.

Не у всех UI-фреймворков есть аналогичные компоненты недостающие мы заменяли на равнозначные им по функциональности. Ближе всего к VKUI по компонентам и видам их отображения оказались Material-UI и Framework7.

Сделать 8 таких приложений поначалу кажется простой задачей, но спустя неделю просто упарываешься писать одно и то же, но с разными библиотеками. У каждого UI-фреймворка своя документация, API и особенности. С некоторыми я сталкивался впервые. Особенно запомнился Yandex UI кажется, совсем не предназначенный для использования сторонними разработчиками. Какие-то компоненты и описания параметров к ним удавалось найти, только копаясь в исходном коде. Ещё умилительно было обнаружить в компоненте хедера логотип Яндекса <3

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

Автоматизация

Краткая блок-схема, описывающая процессы в автоматизацииКраткая блок-схема, описывающая процессы в автоматизации

Подготовили два воркфлоу:

  • Build and Deploy здесь в первую очередь автоматизировали процессы сборки и разворачивания. Используем surge, чтобы быстро публиковать статичные приложения. Но постепенно перейдём к их запуску и аудиту внутри GitHub Actions воркеров.

  • Run Benchmarks а здесь создаётся issue-тикет в репозитории со ссылкой на активный воркфлоу, затем запускается Lighthouse CI Action по подготовленным ссылкам.

UI-фреймворк

URL на тестовое приложение

VKUI

vkui-benchmark.surge.sh

Ant Design

ant-benchmark.surge.sh

Material UI

mui-benchmark.surge.sh

Framework7

f7-benchmark.surge.sh

Fluent UI

fluent-benchmark.surge.sh

Lightning

lightning-benchmark.surge.sh

Yandex UI

yandex-benchmark.surge.sh

Adobe Spectrum

spectrum-benchmark.surge.sh


Конфигурация сейчас выглядит так:

{  "ci": {    "collect": {      "settings": {        "preset": "desktop", // Desktop-пресет        "maxWaitForFcp": 60000 // Время ожидания ответа от сервера      }    }  }}

После аудита всех приложений запускается задача finalize-report. Она форматирует полученные данные в удобную сравнительную таблицу (с помощью магии Markdown) и отправляет её комментарием к тикету. Удобненько, да?

Пример подобного репорта от 30 марта 2021 г.Пример подобного репорта от 30 марта 2021 г.

Нестабильность результатов

На начальных стадиях мы столкнулись с нестабильностью результатов: в разных отчётах наблюдали сильную просадку баллов, причём всегда у разных приложений.

Из отчётов Lighthouse выяснили следующее: по неведомым причинам сервер долго отвечал, и это привело к общему замедлению и снижению баллов. Изначально грешили на воркеры и хостинг в целом, и я решился задеплоить и провести бенчмарки на одном сервере. Результаты стали лучше, но такое странное поведение оставалось нелогичным.

Предупреждения из отчётов Google LighthouseПредупреждения из отчётов Google Lighthouse

GitHub Actions по умолчанию выполняет задачи параллельно, как и в нашем воркфлоу с бенчмарками. Решение ограничить максимальное количество выполняющихся одновременно задач:

jobs.<job_id>.strategy.max-parallel: 1

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

Результаты от 30 марта 2021 г.

VKUI (4.3.0) vs ant:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

ant

default

report

0.99

vkui (4.3.0)

modals

report

1

ant

modals

report

0.99

vkui (4.3.0)

list

report

0.94

ant

list

report

0.89

list - У ant нет схожего по сложности компонента для отрисовки сложных списков, но на 0,05 балла отстали.

VKUI (4.3.0) vs Framework7:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

f7

default

report

0.98

vkui (4.3.0)

modals

report

1

f7

modals

report

0.99

vkui (4.3.0)

list

report

0.94

f7

list

report

0.92

list - Framework7 не позволяет вложить одновременно checkbox и radio в компонент списка (List).

VKUI (4.3.0) vs Fluent:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

fluent

default

report

0.94

vkui (4.3.0)

modals

report

1

fluent

modals

report

0.99

vkui (4.3.0)

list

report

0.94

fluent

list

report

0.97

modals - Разница на уровне погрешности.

list - Fluent не имеет схожего по сложности компонента для отрисовки сложных списков.

VKUI (4.3.0) vs Lightning:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

lightning

default

report

0.95

vkui (4.3.0)

modals

report

1

lightning

modals

report

1

vkui (4.3.0)

list

report

0.94

lightning

list

report

0.99

list - Lightning не имеет схожего по сложности компонента для отрисовки сложных списков.

VKUI (4.3.0) vs mui:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

mui

default

report

0.93

vkui (4.3.0)

modals

report

1

mui

modals

report

0.96

vkui (4.3.0)

list

report

0.94

mui

list

report

0.77

default и modals - Расхождение незначительное, у Material-UI проседает First Contentful Paint.

list - При примерно одинаковой загруженности списков в Material-UI и VKUI выигрываем по Average Render Time почти в три раза (~1328,6 мс в Material-UI vs ~476,4 мс в VKUI).

VKUI (4.3.0) vs spectrum:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

spectrum

default

report

0.99

vkui (4.3.0)

modals

report

1

spectrum

modals

report

1

vkui (4.3.0)

list

report

0.94

spectrum

list

report

1

list - Spectrum не имеет схожего по сложности компонента для отрисовки сложных списков.

VKUI (4.3.0) vs yandex:

app

type (app link)

report

performance

vkui (4.3.0)

default

report

0.99

yandex

default

report

1

vkui (4.3.0)

modals

report

1

yandex

modals

report

1

vkui (4.3.0)

list

report

0.94

yandex

list

report

1

default - Разница на уровне погрешности.

list - Yandex-UI не имеет схожего по сложности компонента для отрисовки сложных списков.

modals - Модальные страницы в Yandex UI объективно легче.

Выводы из отчёта Lighthouse о VKUI

  • VKUI по показателям на одном уровне с другими библиотеками. Сильных просадок, как и значительного превосходства, нет.

  • Одно из явных проблемных мест вложенные Tappable протестированы на большом списке. Единственная библиотека, в которой полноценно реализован этот кейс, Material-UI. И VKUI уверенно обходит её по производительности.

  • Lighthouse ругается на стили после сборки много неиспользуемых. Они же замедляют First Contentful Paint. Над этим уже работают.

Два CSS-чанка, один из которых весит 27,6 кибибайт без сжатия в gzДва CSS-чанка, один из которых весит 27,6 кибибайт без сжатия в gz

Планы на будущее vkui-benchmarks

Переход с хостинга статики на локальное тестирование должен сократить погрешность: уменьшится вероятность того, что из-за внешнего фактора станет ниже балл у того или иного веб-приложения. Ещё у нас в репортах есть показатель CPU/Memory Power и он немного отличается в зависимости от воркеров, которые может дать GitHub. Из-за этого результаты в репортах могут разниться в пределах 0,010,03. Это можно решить введением перцентилей.

Также планируем сделать Lighthouse Server для сохранения статистики по бенчмаркам на каждый релиз.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru