Создание приборной панели для анализа данных на GCP - часть I

RedDeveloper
17.03.2022 22:01
Создание приборной панели для анализа данных на GCP - часть I

Создание аналитической панели данных на GCP - часть I

Недавно я столкнулся с интересной бизнес-задачей - визуализацией сбоев в цепочке поставок лекарств, которую могут просматривать врачи и фармацевтические компании для принятия решений и поиска заменителей. Как раз в это время я обновлял свои знания о Google Cloud Platform (GCP), и мне показалось, что Вселенная хочет, чтобы я создал этот инструмент с помощью сервисов GCP!

Эта приборная панель уже работает, и вы можете посмотреть ее по адресу: www.medalarm.info.

Как и к другим проектам в моем стартапе, к этому я подошел с точки зрения итерационного подхода к управлению продуктом и подумал о различных версиях, которые могут достичь минимальных требований проекта, и постепенно наращивал их. Я документировал весь этот процесс с точки зрения управления продуктом и технической сборки, что и стало этой серией практических уроков по GCP. Эта серия не предполагает каких-либо предварительных знаний об облаке или GCP и ориентирована на конкретную цель, то есть если что-то не имеет отношения к цели проекта, то это, как правило, только вскользь или вообще не упоминается.

В первой части я расскажу о бизнес-проблеме, которую мы решаем, и о том, как выглядит первая версия. С точки зрения сборки, я представляю учебник по: Google Cloud Storage, Big Query и Data Studio, как я создаю статическую версию решения.

Во второй части я автоматизирую все шаги в решении версии 1 и сделаю так, чтобы приборная панель обновлялась автоматически. Для этого я подробнее расскажу о Google Cloud Functions, Big Query Python APIs и Cloud Scheduler.

В части 3 я улучшу архитектуру, добавив DataFlow и Cloud Composer, и переделаю панель визуализации на Python.

Проблема бизнеса

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

Австралийская администрация терапевтических товаров (TGA) публикует список дефицита лекарств в Австралии на своем сайте, но информация представлена в виде длинной таблицы без визуализации. Мы хотим создать интерактивную приборную панель BI, которая будет получать данные TGA, но позволит пользователям увидеть проблемы цепочки поставок в более красивой графике.

Снимок веб-сайта TGA- https://apps.tga.gov.au/prod/MSI/search.
Снимок веб-сайта TGA- https://apps.tga.gov.au/prod/MSI/search.

Решения

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

MVP Версия 1 - автономная приборная панель

V1.0: Одноразовая статическая версия приборной панели, которая получает данные из TGA один раз и представляет их в виде приборной панели.

Компоненты:

  1. Код на python, который читает RSS-ленту, анализирует веб-сайт и выводит данные в формате CSV.
  2. Ручная загрузка CSV в Google Big Query
  3. Запуск аналитических запросов в Big Query
  4. Построение приборной панели в Google Data Studio, подключенной к Big Query
  5. Публикация приборной панели на статическом веб-сайте.

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

Шаг 1 - Создание RSS-фидера с помощью Python

Приведенный ниже код Python извлекает необходимую нам информацию с сайта TGA. Сначала мы обратимся к RSS-каналу, который возвращает XML-файл. XML включает название лекарства, причину нарушения цепи поставок и ссылку на то, где мы можем найти даты нарушения. Нам нужно найти даты в коде, лежащем в основе ссылки на лекарство. Код на языке Python использует эти библиотеки:

  • Requests обрабатывает чтение http-запросов
  • BeautifulSoup обрабатывает извлечение и парсинг RSS-ленты (XML-файл)
  • CSV для сохранения списка в формате csv
  • Re (regex) преобразует формат даты
  • Datetime преобразует строку даты в объект datetime
  • Pandas создает фрейм данных из dict и сохраняет в файл csv.
Открыть Github Gist

Шаг 2 - Введите большой запрос!

Big Query - это жемчужина GCP. Это решение для корпоративного хранилища данных, позволяющее анализировать петабайты данных. Однако мы используем его для очень маленького набора данных, который мы создали на предыдущем шаге.

BigQ - это типичное OLAP-хранилище данных, предназначенное для быстрой аналитики огромных объемов данных. Оно может получать данные из различных источников, хранить их в колоночной и распределенной системе хранения и выполнять SQL-запросы. Все это управляется GCP, то есть нет необходимости предоставлять хранилище или вычисления.

В этой версии продукта мы будем вручную загружать CSV-файл. В следующей версии мы автоматизируем этот шаг с помощью API Big Query Python. Также в этой версии мы не будем следовать лучшей практике хранения копии необработанных данных в хранилище и загрузки оттуда. Мы отправляемся прямо в BigQ. Мы будем совершенствовать эту архитектуру по мере создания решения в следующей части.

Чтобы загрузить файл, сначала создайте новый набор данных, затем добавьте таблицу. Это можно сделать в графическом интерфейсе или с помощью Cloud Shell. Cloud Shell - это удивительный инструмент, который дает вам очень быстрый доступ к виртуальной машине для быстрого запуска интерфейса командной строки. Это эквивалентно запуску виртуальной машины (Compute Engine) и последующему выводу ее из эксплуатации после завершения работы.

Как получить доступ и активировать облачную оболочку
Как получить доступ и активировать облачную оболочку
bq mk TGA_medalert_dataset

Вы также можете сделать это с помощью графического интерфейса пользователя:

Создание набора данных с помощью GUI
Создание набора данных с помощью GUI

Затем создайте таблицу в наборе данных.

Используя графический интерфейс пользователя: щелкните на меню опций набора данных и выберите создать таблицу.

Выберите опцию выгрузки и задайте имя таблицы
Выберите опцию выгрузки и задайте имя таблицы
Установка схемы таблицы
Установка схемы таблицы

Схема указывает нашей реляционной базе данных (BigQuery), какие колонки данных являются ее столбцами. Задать схему вручную часто лучше, чем позволить BigQuery автоматически определить ее, но это тоже вариант. Кроме того, формат даты должен быть YYYY-MM-DD, чтобы BigQuery разобрал вводимые данные как DATE.

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

Создание таблицы с помощью графического интерфейса пользователя
Создание таблицы с помощью графического интерфейса пользователя

Вы можете просматривать таблицу и выполнять запросы после ее создания

Предварительный просмотр таблицы
Предварительный просмотр таблицы

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

Предварительный просмотр запроса
Предварительный просмотр запроса

Теперь давайте выделим все данные и перейдем в Data Studio для визуализации.

Запустите запрос, затем перейдите в Data Studio
Запустите запрос, затем перейдите в Data Studio

Шаг 3 - Приборная панель с помощью Data Studio

Итак, мы собрали данные с сайта TGA, поместили их в структурированный формат CSV и загрузили в таблицу Big Query SQL. Теперь мы хотим визуализировать эти данные. Для этой версии продукта я сделаю очень простую визуализацию, а не окончательный отполированный продукт. Но помните, что каждая версия должна быть пригодна для отправки, поэтому нам нужно построить временную шкалу, пусть и не очень красивую.

На рынке существует множество хороших информационных панелей для бизнес-аналитики (BI). Возможно, вы работали с Tableau, который является наиболее развитым по функциональности (и самым дорогим). Data Studio от GCP бесплатна, и ее очень легко освоить. В опциях легко разобраться, а также имеется растущий каталог визуализаций, созданных сообществом, из которого можно выбирать. Однако она не предлагает такого уровня сложности, как Tableau. Поэтому мое эмпирическое правило - начать с бесплатного инструмента Data Studio, а если вы столкнетесь с препятствиями при визуализации, тогда ищите альтернативы. В последующих частях этого руководства мы рассмотрим визуализацию с помощью Dash, чтобы получить очень индивидуальный вид.

Построение грубой временной шкалы с помощью линейной диаграммы
Построение грубой временной шкалы с помощью линейной диаграммы

Хотя это очень базовая визуализация, для первой версии она подойдет. Нажмите "сохранить", а затем "поделиться".

Поделиться проводником
Поделиться проводником

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

Вид отчета
Вид отчета

Нажмите на выпадающее меню "поделиться" и выберите "Вставить отчет", поскольку мы хотим вставить его в веб-страницу HTML. В качестве альтернативы мы можем просто поделиться ссылкой на отчет, но это будет выглядеть не так красиво (особенно в будущих версиях).

Получение ссылки для встраивания
Получение ссылки для встраивания

Вы получите iframe для встраивания в ваш веб-сайт

Получение ссылки для встраивания
Получение ссылки для встраивания

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

Делаем отчет общедоступным
Делаем отчет общедоступным

Шаг 4- Статическая веб-страница с облачным хранилищем Google

В завершение давайте создадим HTML-страницу и разместим ее на GCP. Поскольку эта версия продукта представляет собой только статический веб-сайт, мы можем использовать ведра Google Cloud Storage для быстрого развертывания. Для этого шага мы в основном следуем приведенному здесь руководству.

Наш файл "index.html" будет содержать только ссылку на отчет (здесь я изменил размеры:

<!DOCTYPE html>
<html>
<body>
<iframe width="1200" height="900" src="https://datastudio.google.com/embed/reporting/cbd5b1ef-c0e5-4786-aa6b-2c26dd6b4853/page/XRHoC" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</html>

Давайте разместим это на GCS. Сначала выберите домен, на котором вы будете размещать это. Для нас это www.medalarm.info. Я использовал Google Domains, чтобы купить его, но любой менеджер доменов будет работать так же.

Создайте ведро GCS с именем вашего домена верхнего уровня, поэтому для нас это должно быть "medalarm.info" (не "www.medalarm.info"). Перейдите в Cloud Storage и создайте ведро. Вы также можете использовать CLI. Что касается опций:

  • Multi-region: лучший по производительности, но и самый дорогой вариант. Ведро размещается в нескольких регионах. Здесь я использую один регион в Мельбурне, который находится ближе ко мне.
  • Выбираем "стандартное" хранилище, поскольку нам нужно часто обращаться к этому ведру. Другие варианты будут снижены, если к ведру будут обращаться нечасто.
Создание ведра
Создание ведра

Загрузите файл index.html в ведро

Загрузка файла index.html
Загрузка файла index.html

Поскольку нам нужен интернет для доступа к этому ведру, нам нужно добавить для него новое разрешение. Добавьте для "allUsers" новое разрешение "Storage Object Viewer". Это сделает ведро общедоступным для всего интернета.

Делаем ведро хранилища общедоступным
Делаем ведро хранилища общедоступным

Теперь давайте направим сюда трафик для нашего домена. Для этого нам нужно добавить DNS-запись CNAME в нашем доменном менеджере. Я добавил ее в Google Domains. Используйте приведенные ниже параметры для добавления записи. Как и при любом изменении DNS-записи, дайте час или около того, чтобы запись распространилась по интернету. Вы всегда можете проверить свои маршруты здесь

Последний шаг - добавить указатели главной страницы и страницы 404 в ведро, чтобы при обращении пользователя к этим адресам GCS знал, куда направить трафик. Мы не разрабатывали 404 для нашего сайта, но мы можем указать главную страницу на index.html.

Редактирование конфигурации сайта
Редактирование конфигурации сайта
Редактирование конфигурации сайта
Редактирование конфигурации сайта

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

Первая версия готова!

Наш хостинговый отчет - V1
Наш хостинговый отчет - V1

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

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

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML

15.07.2022 14:37

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно является внешний метод. Это помогает сохранить код незагроможденным и организованным. Однако ситуация может диктовать использование двух других методов....

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly

16.05.2022 21:25

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

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

18.04.2022 13:17

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

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

В чем разница между Promise и Observable?
В чем разница между Promise и Observable?

11.04.2022 20:00

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса

08.04.2022 19:39

Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.