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

Этот гостевой пост был написан Николасом Бохоркесом.
Николас Бохоркес — архитектор данных в компании Merqueo, был членом команд разработчиков в нескольких стартапах и основал три компании в Америке. Он увлечен моделированием сложности и использованием науки о данных для улучшения мира. Вы можете связаться с ним через его Twitter!


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

В этом руководстве вы построите простую приборную панель для отображения данных, извлеченных из базы данных предприятия, используя Bubble, Cube и PostgreSQL в качестве базы данных. Вы также воспользуетесь функцией сегментов Cube для создания простого фильтра, который будет динамически перезагружать данные из REST API. На изображении ниже показан конечный результат. Вы также можете посмотреть живую демонстрацию или видеоролик о том, как это будет выглядеть в действии.

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

Что такое Bubble

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

У Bubble много сильных сторон: Это полностью управляемый SaaS-инструмент, освобождающий разработчиков от администрирования развертывания; он предлагает версионность приложения, позволяя вам постепенно обновлять его; создаваемые вами приложения будут отзывчивыми, хорошо выглядеть и корректно работать как на веб-страницах, так и на мобильных устройствах; имеется множество плагинов для расширения встроенных компонентов. Основной недостаток Bubble — невозможность самостоятельного хостинга, но это освобождает вас от необходимости беспокоиться о своем приложении, а не о его развертывании.

Еще одно достоинство Bubble — то, как хорошо он работает с Cube. API REST Cube легко интегрируется с приложениями Bubble и предоставляет аналитические возможности, недоступные в Bubble. REST API может быть подключен к любому приложению Bubble, а визуальные компоненты Bubble могут легко отображать данные, полученные из Cube, и манипулировать ими.

Что такое Cube

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

Реализация пузырьковой приборной панели с помощью Cube

Образец проекта состоит из трех основных компонентов: реляционной базы данных (в учебнике используется PostgreSQL, но вы можете использовать MySQL, MongoDB или любую другую базу данных, поддерживаемую Cube), схемы Cube и приложения Bubble. На следующей диаграмме показаны предполагаемые взаимодействия между компонентами.

Для этого руководства вы можете использовать бесплатный экземпляр ElephantSQL, бесплатный аккаунт Cube Cloud и бесплатное приложение Bubble. Приборная панель будет использовать данные из набора данных US Superstore, доступного на Kaggle, который содержит 9 994 строки подробной информации о заказах электронной коммерции.

Запуск локальной инфраструктуры

Хотя вы не можете самостоятельно размещать приложения Bubble, вы можете развернуть свою собственную среду Cube или PostgreSQL и предоставить ее для использования API-коннектором Bubble. Вам понадобятся базовые знания о Docker и контейнерах, чтобы правильно получить доступ и подключить каждый компонент.

Просто следуйте инструкциям по установке Cube Docker Compose или используйте файл docker-compose.yaml из репозитория этого проекта для запуска локальной среды разработки, содержащей Cube и PostgreSQL, а также исходные данные и два SQL-скрипта для создания и загрузки таблицы данных в PostgreSQL. Запустить локальную среду можно с помощью следующей команды:

docker-compose up
Войти в полноэкранный режим Выйти из полноэкранного режима

Загрузка данных в PostgreSQL

Если вы решили использовать бесплатный облачный экземпляр PostgreSQL, вам понадобится немного SQL для загрузки данных в экземпляр ElephantSQL после того, как ваша инфраструктура будет запущена. Начните с подключения к экземпляру с помощью SQL-клиента (DBeaver — отличный вариант с открытым исходным кодом), используя данные со страницы ElephantSQL, которые будут выглядеть следующим образом:

Затем создайте таблицу с той же структурой, что и исходный набор данных, используя следующий SQL-скрипт:

create table orders (
    row_num      int    primary key
    , order_id       text
    , order_date    timestamp without time zone
    , ship_date      timestamp without time zone
    , ship_mode      text
    , customer_id    text
    , customer_name    text
    , segment        text
    , country        text
    , city           text
    , state          text
    , postal_code    text
    , region     text
    , product_id    text
    , category       text
    , sub_category    text
    , product_name    text
    , sales          numeric
    , quantity       numeric
    , discount       numeric
    , profit     numeric
);
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Создание развертывания куба

После загрузки данных создайте новое развертывание в Cube Cloud, нажав кнопку Create Deployment в правом верхнем углу, выбрав предпочитаемого облачного провайдера и дав проекту имя.

Теперь вы можете импортировать репозиторий GitHub или создать новый для хранения схем Cube. В данном руководстве нажмите кнопку Создать. После этого выберите тип источника данных; в данном случае это PostgreSQL.

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

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

Определение схемы куба

Созданная вами модель включает три основных раздела. Первый раздел определяет исходные данные, которые будут использоваться в качестве источника при SQL-запросе (все строки из таблицы orders). Второй определяет набор мер, которые являются количественными оценками данных, например, подсчет количества строк или сумма общего количества проданных единиц товара. В третьем разделе задаются измерения, которые являются атрибутами, например, категория товара, местоположение клиента или способ доставки заказа. Вы можете зайти в Cube Developer Playground, чтобы создать несколько исследовательских запросов, например, количество строк в каждом измерении штата.

Для того чтобы рассмотреть показатели, которые шире, чем один заказ, нажмите на Enter Development Mode и отредактируйте схему Orders, чтобы включить следующие показатели:

    uniqueOrders: {
    sql: `order_id`,
    type: 'countDistinct',
    },

    customers: {
    sql: 'customer_id',
    type: `countDistinct`
    },

    items: {
    sql: `quantity`,
    type: `sum`
    }, 
Войти в полноэкранный режим Выход из полноэкранного режима

Кроме того, набор данных уже сегментирован по классификации каждого клиента; атрибут segment можно использовать для фильтрации возможных значений, добавив в схему раздел segments.

segments: {
    Consumer: {
    sql: `${CUBE}.segment = 'Consumer'`
    },
    Corporate: {
    sql: `${CUBE}.segment = 'Corporate'`
    },
    HomeOffice: {
    sql: `${CUBE}.segment = 'Home Office'`
    },
    All:{
    sql: ``
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что был включен дополнительный сегмент All, не содержащий никакого SQL-определения. Он будет полезен в приложении Bubble для установки значения по умолчанию для фильтра.

Нажмите кнопку Commit & Push, чтобы применить изменения к проекту Cube и сделать его доступным через REST API.

Использование коннектора API Bubble

После обновления схемы данных создайте новое приложение в Bubble с помощью кнопки New app на главной странице вашей учетной записи. Назовите приложение, выберите тип dashboard, заполните остальные данные и нажмите кнопку Create a new app.

Чтобы подключиться к внешнему REST API в Bubble, вам необходимо установить плагин API Connector. Перейдите на панель плагинов в левой части проекта и выберите Добавить плагины.

Во всплывающем окне найдите «API» и выберите бесплатный плагин Bubble API Connector. Чтобы установить его, просто нажмите Install; после этого вы можете покинуть страницу установки плагинов, нажав Done.

Теперь подключим Cube API. Перейдите к кнопке Добавить другой API, где вы установите значения. Для имени API введите «Cubedev» и выберите в качестве метода аутентификации закрытый ключ в заголовке. Задайте имя ключа как «Авторизация» и выберите Действие в раскрывающемся списке Использовать как. Это важно, поскольку именно это позволит вам вызывать запрос из рабочих процессов приложения Bubble.

Значение ключа можно скопировать из сведений о подключении Cube. Чтобы найти его, перейдите на страницу Overview (Обзор) развертывания и скопируйте URL конечной точки. Чтобы получить токен авторизации по умолчанию, нажмите на ссылку How to connect и скопируйте длинную строку после заголовка «Authorization»:

Обратите внимание, что заголовок по умолчанию включает «Authorization». Здесь содержится значение JSON веб-маркера, скопированного из Cube. Вы можете защитить доступ к API, сгенерировав специальные токены для каждого приложения с помощью клиентского инструмента CLI Cube. Не забудьте добавить общий заголовок, установив Content-Type как application/json.

После создания источника данных вы можете запустить запрос на проверку REST API. Нажмите кнопку Добавить другой вызов и заполните данные для вызова конечной точки загрузки Cube REST API.

Дайте запросу имя, укажите, что он должен использовать метод POST, и задайте путь к URL API Cube с суффиксом /load. URL API можно получить с помощью кнопки Copy API URL в Cube. Выберите Действие в раскрывающемся списке Использовать как.

В справочнике API Cube этот метод описывается как способ получения данных для запроса — вы должны передать запрос в качестве параметра, чтобы сгенерировать правильно оформленный запрос. Используйте Cube Developer Playground для графической генерации нужного запроса с помощью Orders.count и нажмите на кнопку JSON Query, чтобы показать синтаксис.

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

{"query":{"measures":["Orders.count"]}}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Ответ представляет собой объект JSON, который содержит не только данные, но и достаточно много деталей. Наиболее важной из них является тело, которое содержит значение меры. Измените тип с «текст» на «число» и нажмите кнопку SAVE.

Теперь, чтобы ответить на вопросы, связанные с бизнесом, вернитесь в Cube Developer Playground и создайте запрос, включающий следующие показатели:

  • Orders.count
  • Orders.uniqueOrders
  • Orders.customers
  • Orders.items

Также выберите измерение Orders.orderDate с ежемесячной детализацией; обратите внимание, что сегмент не выбран:

Это более длинный запрос, включающий несколько разделов. Чтобы сопоставить этот запрос с вызовом API в Bubble, вернитесь в API Connector и нажмите кнопку Add another call:

Конечная точка такая же, как и в ранее настроенном вызове API, но в этом случае снимите флажок Private, чтобы передать динамический параметр в тело полезной нагрузки JSON. Установка сегмента запроса в качестве фильтра в пользовательском интерфейсе приложения будет полезной. Это делает полезную нагрузку немного сложнее, а значение segments использует специальные маркеры < и > для введения параметра Segment.

{ "query" : {
     "measures": [
         "Orders.count",
         "Orders.uniqueOrders",
         "Orders.customers",
         "Orders.items"
     ],
     "timeDimensions": [
         {
             "dimension": "Orders.orderDate",
             "granularity": "month"
         }
     ],
     "order": {
         "Orders.orderDate": "asc"
     },
     "segments": ["<Segment>"]
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

После инициализации запроса не забудьте обновить отображение типов данных, возвращаемых запросом.

Проектирование приложения

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

Чтобы заполнить опции выпадающего списка кортежами (key,value), необходимо создать набор опций. Перейдите в Data в вашем приложении, а затем на вкладку Option sets, где вы создадите новый набор опций под названием segments, который будет иметь четыре возможных варианта: Все, Клиент, Корпоративный и Домашний офис.

По умолчанию он имеет только атрибут display типа text. Добавьте новый атрибут «Значение» типа текст, нажав кнопку Создать новый атрибут.

Затем добавьте четыре опции с соответствующими значениями:

  • All -> Orders.All
  • Клиент -> Orders.Customer
  • Корпоративный -> Orders.Corporate
  • Домашний офис -> Orders.HomeOffice

Вернитесь к выпадающим свойствам на вкладке Design, чтобы установить стиль Choices на «Dynamic choices» и Type of choices на «Segments».

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

Для завершения пользовательского интерфейса установите новый плагин под названием Simple LineChart от ApexCharts. Он будет использоваться для отображения нескольких рядов данных (заказы, клиенты и товары) в виде одной линейной диаграммы.

После установки плагина добавьте линейную диаграмму для завершения пользовательского интерфейса приборной панели.

Добавление рабочих процессов для загрузки данных

Пришло время создать рабочие процессы, которые будут получать данные из REST API Cube через вызовы API, настроенные ранее. Рабочий процесс — это последовательность автоматизированных действий, которые выполняются при активации триггера. В данном случае в качестве триггеров будут использоваться два типа событий: во-первых, при загрузке страницы, а во-вторых, при изменении значения выпадающего списка. Перейдите на панель Workflow и нажмите там, где написано Click here to add an event. Во всплывающем окне выберите Общие и Страница загружена в качестве первого триггера события:

Используйте кнопку Нажмите здесь, чтобы добавить действие, и всплывающий фильтр для поиска действия Cubedev — FullMeasures. Если оно не появляется, возможно, вы не установили свойство Use as в вызове API для действия — вернитесь и исправьте это, а затем попробуйте снова.

Теперь при каждой загрузке страницы первым действием будет вызов API Cube, который возвращает несколько частей данных. Если вы помните, этот вызов API требует динамического параметра segment, чтобы задать его статически. В поле свойств шага действия запишите значение по умолчанию для нужного сегмента, Orders.All. Это приведет к тому, что запрос Cube вернет данные для всех сегментов.

Затем, чтобы сохранить локальную копию результатов, возвращенных запросом, добавьте новое действие (фильтр по «Set state of an element») и выберите страницу Index в качестве держателя нового состояния.

Свойство пользовательского состояния диалога позволяет создать новое состояние.

Это состояние будет содержать список данных FullMeasures, правильно отображенных для предыдущего вызова API, в операции бэкенда, которая позволит Bubble заполнить этот список значениями, возвращаемыми для каждого вызова API. Для этого заполните свойство value действия set state значением «Результат данных шага 1»:

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

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

Когда все рабочие процессы определены, необходимо связать данные. Вам нужно установить динамический текст для каждой метки в пользовательском интерфейсе, а затем для каждой серии графика. Начиная с метки для общего количества заказов, выберите Текст на вкладке Дизайн и удалите значение «…edit me…»; затем нажмите на синюю всплывающую кнопку Вставить динамические данные справа от всплывающего окна свойств.

Перейдите через Index, Fullresults, затем Orders.count каждого элемента, чтобы выбрать sum. Вероятно, вы уже догадались, что при этом будет считываться пользовательское состояние Fullresults со страницы index, а затем суммироваться все значения атрибута Orders.count списка.

Вы можете выбрать значения Orders.uniqueOrders, Orders.customers, и Orders.items для других текстовых полей в пользовательском интерфейсе. И последнее, но не менее важное: необходимо связать данные из пользовательского состояния Fullresults индекса с диаграммой. В данном случае вы создадите три серии — Заказы, Клиенты и Предметы — и установите категории серий (ось X) из индекса, Fullresults, Orders.orderDate.month каждого элемента, отформатированный как 1/21/22, и соответствующие данные серии.

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

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

И все готово! Вы можете ознакомиться с внутренним устройством приложения на Bubble, а весь код — в репозитории GitHub для этого проекта.

Заключение

В этом руководстве вы узнали, как использовать возможности Cube для создания аналитической панели, которая объединяет данные из реляционной базы данных и отображает их с помощью Bubble. В процессе вы узнали, как легко создавать меры, измерения и сегменты из необработанных данных, а также запрашивать данные с помощью Cube Developer Playground.

Чтобы узнать больше, посетите сайт Cube и зарегистрируйте бесплатную учетную запись.

Я буду рад услышать ваши отзывы о создании информационных панелей с помощью Cube Cloud в Slack-сообществе Cube. Нажмите здесь, чтобы присоединиться!

До следующего раза, оставайтесь любопытными и получайте удовольствие от кодинга. Также не стесняйтесь оставить Cube отзыв ⭐ на GitHub, если вам понравилась эта статья. ✌️

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *