#25: КлипТок и SWA — конкретный пример

Добро пожаловать на Неделю 4, день 4 из #30DaysOfSWA!!!

Неделя 4 посвящена лучшим практикам для Azure Static Web Apps. В последних двух постах мы рассмотрели интеграции служб Azure Services, которые улучшают и расширяют возможности развернутого статического веб-сайта. Сегодня мы перейдем в другое русло и рассмотрим наш первый пример — KlipTok, сервис поиска и индексирования клипов Twitch, созданный Джеффом Фрицем и размещенный на Azure Static Web Apps!

Что мы рассмотрим

  • Что такое KlipTok?
  • Почему KlipTok выбрал Azure Static Apps?
  • Как Azure Static Apps и Blazor работают вместе?
  • Упражнение: Посетите веб-сайт KlipTok и посмотрите его в действии.

Об авторе

Джефф Фриц — популярный участник Twitch @theLiveCoders, менеджер программ в Microsoft и создатель KlipTok, приложения Blazor, которое упрощает социальное обнаружение и обмен потоковыми клипами.

Джеффри Т. Фритц

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

KlipTok делает видео с Twitch доступными для поиска

KlipTok — это сайт, который я начал создавать во время прямого эфира на Twitch в ноябре 2019 года. В то время я хотел создать сайт, который позволил бы людям находить ролики в Twitch от своих любимых создателей так же, как они перемещаются и взаимодействуют с TikTok.

Twitch — это сервис прямых трансляций, который многие используют для просмотра видеоигр. Когда на Twitch происходит что-то интересное, зрители могут выделить из потока клип (длиной до 60 секунд) и поделиться им со своими друзьями. Эти ролики часто бывают забавными и интересными, но, как правило, их невозможно обнаружить. Цель KlipTok — проиндексировать эти ролики и сделать их более доступными для всех.


Как работает KlipTok?

За кулисами KlipTok следит за Twitch в поисках новых клипов стримеров, которые зарегистрированы на сайте, и индексирует их. Затем клипы транскрибируются и доступны для поиска на сайте. Посетители могут просматривать клипы, ставить лайки и комментировать их. Кроме того, каждый может создавать плейлисты клипов, чтобы поделиться ими со своими друзьями.

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

После первых 18 месяцев работы KlipTok, приложение в настоящее время управляет почти 12 миллионами клипов, в общей сложности почти 60 ГБ данных в индексе. Вы можете просмотреть живую приборную панель на сайте kliptok.com/status, чтобы узнать текущее состояние приложения.


KlipTok выбирает Azure Static Apps

Я выбрал Azure Static Apps для создания и развертывания приложения KlipTok, а также для демонстрации работы Blazor в масштабе большого приложения. Это позволяет приложению масштабировать HTTP-сервисы для доставки контента в браузер, обеспечивая при этом высокопроизводительную работу приложения Blazor, запущенного в браузере поверх WebAssembly.

KlipTok также управляет второй службой Azure Functions под названием «BackOffice», которая выполняет синхронизацию клипов Twitch и другие задачи по агрегации данных. Когда в KlipTok добавляются новые каналы для мониторинга, служба BackOffice запускается с помощью сообщения на Azure Service Bus, чтобы добавить канал и начать обработку его клипов для индекса.

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

Согласно условиям обслуживания Twitch, в течение первых 24 часов после записи видеороликов запрещено отправлять их с их платформы. Это означает, что клипы должны ссылаться и встраиваться из Twitch с помощью их собственного проигрывателя клипов, что избавляет KlipTok от необходимости загружать и хранить контент. Теперь KlipTok может предоставлять соответствующий SEO-оптимизированный контент, а также отображать открытые графические карты, подходящие для Twitter, Facebook, LinkedIn и других сайтов.


Архитектура KlipTok

У нас есть одна небольшая проблема при использовании Blazor Web Assembly и Azure Static Websites — поисковые системы и сайты социальных сетей не знают, как просматривать и представлять сгенерированный веб-сборкой контент.

Чтобы решить эту проблему, я добавил Azure Front Door на сайт с помощью службы приложений Azure, которую мы по иронии судьбы называем «статический сайт». Azure Front Door — это современная облачная сеть доставки контента (CDN) от Microsoft, позволяющая нам воспользоваться преимуществами глобально распределенной граничной сети, чтобы сделать доставку контента более быстрой и эффективной.

С помощью нескольких правил, добавленных в Azure Frontdoor (для обнаружения ботов), пользователи теперь могут быть перенаправлены на статический сайт, а KlipTok может предоставить соответствующий SEO-оптимизированный контент вместе с открытыми графическими картами для Twitter, Facebook, LinkedIn и других сайтов социального обмена.


Почему статические веб-приложения Azure?

Когда KlipTok был задуман, я хотел потратить совсем немного денег и позволить сайту легко масштабироваться с новым трафиком по мере его роста. Как разработчик C# и Blazor, это дало мне идеальное пересечение моих любимых технологий, сохранение низких затрат и начало разработки приложения, демонстрирующего возможности Blazor с ОЧЕНЬ большим набором данных.

Со временем системные компоненты KlipTok созрели и были заменены. Azure Table Storage уступил место MySQL, а затем был заменен на RavenDb. Функции Azure Functions первоначально взаимодействовали с Azure Queues, а многие из них теперь используют Azure Service Bus.

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

Использование Azure Static Web Apps облегчает разработчикам интеграцию других сервисов Azure — что позволяет мне быстро развивать архитектуру и возможности KlipTok в соответствии с меняющимися потребностями.


SWA & Blazor: Созданы друг для друга

Как разработчик, я был очень доволен сочетанием Blazor и Azure Static Web Apps. Возможность создать приложение Blazor и знать, что у меня всегда будут API, масштабируемые для удовлетворения потребностей моих клиентов, — это огромный плюс.

Blazor Web Assembly использует HttpClient для связи с веб-серверами; в случае Azure Static Web App он взаимодействует с HTTP-функцией. Это позволяет мне значительно упростить определение и взаимодействие front-end кода и back-end кода.

Например: когда пользователь нажимает кнопку Like на ролике, приложение Blazor может отправить сообщение в размещенную функцию, чтобы увеличить счетчик like. Эта функция затем обновляет счетчик «нравится» в RavenDb, а затем обновляет пользовательский интерфейс с новым количеством «нравится». Приложению Blazor не нужно ждать завершения работы функции перед обновлением пользовательского интерфейса — оно может просто добавить или вычесть единицу из числа понравившихся.


Резюме

Создание KlipTok было абсолютной радостью, и путешествие по его созданию было очень успешным. Я очень рад продолжить работу над KlipTok и продолжать развивать приложение, открывая и демонстрируя новые возможности Blazor и Azure. Есть вопросы или комментарии? Найдите меня на Twitch


Упражнение

  • Хотите увидеть это Azure Static Web App в действии? Перейдите на сайт KlipTok и войдите под своей учетной записью Twitch! Затем перейдите на сайт, чтобы KlipTok начал показывать вам клипы ваших любимых создателей.
  • Хотите изучить создание собственного статического веб-приложения Azure Static Web App с помощью Blazor? Ознакомьтесь с предыдущей записью в моем блоге, где вы найдете отличное упражнение, в котором вы начнете с моего проекта с открытым исходным кодом — Fritz’s Really Cool Hats — для настройки, создания и развертывания приложения на базе Blazor в Azure Static Web Apps.

Оцените статью
Procodings.ru
Добавить комментарий