Использование встроенной аналитики от Amazon QuickSight может упростить процесс оснащения вашего приложения функциональными визуализациями без какой-либо сложной разработки. Существует несколько способов встроить панели мониторинга QuickSight в приложение. В этом посте мы рассмотрим, как это можно сделать с помощью React и SDK для встраивания Amazon QuickSight.
Пользователи информационных панелей часто не имеют пользователя, назначенного их учетной записи AWS, и поэтому не имеют доступа к информационной панели. Чтобы они могли использовать данные, панель мониторинга должна быть доступна для анонимных пользователей. Давайте рассмотрим шаги, необходимые для того, чтобы пользователь, не прошедший проверку подлинности, мог просматривать панель инструментов QuickSight в вашем приложении React.
Обзор решения
В нашем решении используются следующие ключевые сервисы:
После загрузки веб-страницы в браузер браузер выполняет вызов шлюза API, который вызывает функцию Lambda, которая вызывает API QuickSight для создания URL-адреса панели мониторинга для анонимного пользователя. Функция Lambda должна принять на себя роль IAM с необходимыми разрешениями. На следующей диаграмме показан обзор архитектуры.
Предпосылки
У вас должны быть следующие предпосылки:
Настройка разрешений для неаутентифицированных зрителей
В своем аккаунте создайте IAM-политику, которую ваше приложение будет принимать от имени зрителя:
- На консоли IAM выберите Налоги и сборы в навигационной панели.
- Выберите Создать политику.
- На JSON введите следующий код политики:
Обязательно измените значение к значению идентификатора панели мониторинга. Запишите этот идентификатор, чтобы использовать его на более позднем этапе.
Для второго объекта оператора с журналами разрешения необязательный. Он позволяет создать группу журналов с указанным именем, создать поток журналов для указанной группы журналов и загрузить пакет событий журнала в указанный поток журналов.
В этой политике мы разрешаем пользователю выполнять GenerateEmbedUrlForAnonymousUser
действие с идентификатором информационной панели в списке идентификаторов информационной панели, вставленном в заполнитель.
- Введите имя для вашей политики (например,
AnonymousEmbedPolicy
) и выберите Создать политику.
Далее мы создаем роль и прикрепляем эту политику к роли.
- Выберите роли в области навигации, затем выберите Создать роль.
- Выберите Лямбда для доверенного лица.
- Найдите и выберите
AnonymousEmbedPolicy
, а затем выберите Следующая. - Введите имя для своей роли, например
AnonymousEmbedRole
. - Убедитесь, что имя политики включено в Добавить разрешения .
- Завершите создание роли.
Вы только что создали AnonymousEmbedRole
исполнительская роль. Теперь вы можете перейти к следующему шагу.
Создание анонимного URL-адреса для встраивания Лямбда-функция
На этом этапе мы создаем функцию Lambda, которая взаимодействует с QuickSight для создания URL-адреса для встраивания для анонимного пользователя. Наш домен должен быть разрешен. Существует два способа интеграции Amazon QuickSight:
- Добавив URL-адрес в список разрешенных доменов в административной консоли Amazon QuickSight (см. [Необязательно] Добавьте свой домен в QuickSight раздел).
- [Рекомендуемые] Добавляя запрос URL-адреса внедрения во время выполнения в вызове API. Вариант 1 рекомендуется, когда вам нужно сохранить разрешенные домены. В противном случае домены будут удалены через 30 минут, что эквивалентно продолжительности сеанса. Для других вариантов использования рекомендуется использовать второй вариант (описанный и реализованный ниже).
На консоли Lambda создайте новую функцию.
- Выберите Автор с нуля.
- Что касается Имя функциивведите имя, например
AnonymousEmbedFunction
. - Что касается Время выполнениявыберите Python 3.9.
- Что касается Роль исполнениявыберите Использовать существующую роль.
- Выберите роль
AnonymousEmbedRole
. - Выберите Создать функцию.
- На странице сведений о функции перейдите к Code вкладку и введите следующий код:
Если вы не используете localhost, замените http://localhost:3000
в результатах с именем хоста вашего приложения. Чтобы перейти к производству, не забудьте заменить http://localhost:3000
с вашим доменом.
- На Конфигурация вкладка под Общая конфигурация, выберите Редактировать.
- Увеличьте время ожидания с 3 до 30 секунд, затем выберите Сохранить.
- Под Переменные среды, выберите Редактировать.
- Добавьте следующие переменные:
- Добавить
DashboardIdList
и перечислите идентификаторы панели инструментов. - Добавить
DashboardRegion
и введите регион вашей панели инструментов.
- Добавить
- Выберите Сохранить.
Ваша конфигурация должна выглядеть примерно так, как показано на следующем снимке экрана.
- На Code , выберите Развертывание для развертывания функции.
Настройте шлюз API для вызова функции Lambda.
Чтобы настроить шлюз API для вызова созданной вами функции, выполните следующие действия:
- В консоли шлюза API перейдите к REST API раздел и выберите строить.
- Под Создать новый API, наведите на Новый API.
- Что касается Имя APIвведите имя (например,
QuicksightAnonymousEmbed
). - Выберите Создать API.
- На Действия Меню, выберите Создать ресурс.
- Что касается Название ресурсавведите имя (например,
anonymous-embed
).
Теперь давайте создадим метод.
- Выберите
anonymous-embed
ресурс и на Действия Меню, выберите Создать метод. - Выберите ПОЛУЧИТЬ под названием ресурса.
- Что касается Тип интеграции, наведите на Лямбда.
- Выберите Используйте интеграцию лямбда-прокси.
- Что касается Лямбда-функция, введите имя созданной функции.
- Выберите Сохранить, а затем выберите OK.
Теперь мы готовы развернуть API.
- На Действия Меню, выберите Развертывание API.
- Что касается Стадия развертывания, наведите на Новый этап.
- Введите имя для вашей сцены, например
embed
. - Выберите Развертывание.
[Необязательно] Добавьте свой домен в QuickSight
Если вы добавили разрешенные домены в Создание анонимного URL-адреса для встраивания Лямбда-функция часть, смело переходите к Включить ценообразование емкости .
Чтобы добавить свой домен в список разрешенных доменов в QuickSight, выполните следующие действия:
- На консоли QuickSight выберите меню пользователя, затем выберите Управление QuickSight.
- Выберите Домены и встраивание в навигационной панели.
- Что касается Домен, введите свой домен (
http://localhost:
).
Не забудьте заменить в соответствии с вашими локальными настройками.
- Выберите Добавить.
Обязательно замените домен localhost на тот, который вы будете использовать после тестирования.
Включить ценообразование емкости
Если у вас не включено ценообразование емкости сеанса, выполните действия, описанные в этом разделе. Обязательно, чтобы эта функция была включена, чтобы продолжить.
Ценообразование на емкость позволяет клиентам QuickSight приобретать сеансы чтения оптом без необходимости предоставления отдельных устройств чтения в QuickSight. Цены на емкость идеально подходят для встроенных приложений или крупномасштабных развертываний бизнес-аналитики (BI). Для получения дополнительной информации посетите Amazon QuickSight Цены.
Чтобы включить ценообразование емкости, выполните следующие действия:
- На Управление QuickSight выберите страницу Ваши подписки в навигационной панели.
- В Цены на мощность раздел, выберите Получить ежемесячную подписку.
- Выберите Подтвердить подписку.
Чтобы узнать больше о ценах на емкость, см. Новое в Amazon QuickSight — ценообразование на емкость сеанса для крупномасштабных развертываний, встраивание в общедоступные веб-сайты и портал для разработчиков для встроенной аналитики..
Настройте свое приложение React
Чтобы настроить приложение React, выполните следующие шаги:
- В папке проекта React перейдите в корневой каталог и запустите
npm i amazon-quicksight-embedding-sdk
для установки пакета amazon-quicksight-embedding-sdk. - В вашей
App.js
файл, замените следующее:- Замените
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
с URL-адресом вызова шлюза API и именем вашего ресурса (например,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Замените
YOUR_DASHBOARD1_ID
с первым идентификатором панели управления из вашегоDashboardIdList
. Это приборная панель, которая будет отображаться на начальном рендере. - Замените
YOUR_DASHBOARD2_ID
со вторым идентификатором панели управления из вашегоDashboardIdList
.
- Замените
В следующем фрагменте кода показан пример App.js
файл в вашем проекте React. Код представляет собой компонент React, который встраивает панель мониторинга QuickSight на основе выбранного идентификатора панели мониторинга. Код содержит следующие ключевые компоненты:
- Государственные крючки – Два хука состояния определяются с помощью
useState()
хук из React:- приборная панель – Содержит текущий выбранный ID приборной панели.
- QuickSightEmbedding – Содержит объект внедрения QuickSight, возвращенный
embedDashboard()
функции.
- Реф крючок – Хук ref определяется с помощью
useRef()
хук из React. Он используется для хранения ссылки на элемент DOM, в который будет встроена панель инструментов QuickSight. - хук useEffect() – Хук useEffect() используется для запуска внедрения панели мониторинга QuickSight всякий раз, когда изменяется идентификатор выбранной панели мониторинга. Сначала он получает URL-адрес информационной панели для выбранного идентификатора из API QuickSight с помощью метода fetch(). После получения URL-адреса он вызывает функцию embed() с URL-адресом в качестве аргумента.
- Обработчик изменений -
changeDashboard()
Функция представляет собой простой обработчик событий, который обновляет состояние информационной панели каждый раз, когда пользователь выбирает другую информационную панель в раскрывающемся меню. Как только новый идентификатор панели управления установлен, срабатывает хук useEffect. - 10-миллисекундный тайм-аут – Цель использования тайм-аута – ввести небольшую задержку в 10 миллисекунд перед выполнением вызова API. Эта задержка может быть полезна в сценариях, где вы хотите избежать немедленных вызовов API или предотвратить чрезмерные запросы при частом отображении компонента. Тайм-аут дает компоненту некоторое время для согласования, прежде чем инициировать запрос API. Поскольку мы создаем приложение в режиме разработки, тайм-аут помогает избежать ошибок, вызванных двойным запуском
useEffect
вStrictMode
. Для получения дополнительной информации см. Обновления строгого режима.
Смотрите следующий код:
Затем замените содержимое вашего App.css
файл, который используется для оформления и макета вашей веб-страницы, с содержимым из следующего фрагмента кода:
Теперь пришло время протестировать ваше приложение. Запустите приложение, запустив npm start
в вашем терминале. На следующих снимках экрана показаны примеры вашего приложения, а также панели мониторинга, которые оно может отображать.
Заключение
В этом посте мы показали вам, как встроить панель инструментов QuickSight в приложение React с помощью AWS SDK. Предоставление общего доступа к вашей информационной панели анонимным пользователям позволяет им получать доступ к вашей информационной панели, не предоставляя им доступ к вашей учетной записи AWS. Существуют и другие способы анонимного предоставления доступа к панели инструментов, например использование Публичное встраивание в 1 клик.
Присоединяйтесь к команде Сообщество Quicksight спрашивать, отвечать и учиться вместе с другими, а также изучать дополнительные ресурсы.
Об авторе
Адрианна работает архитектором решений в AWS Global Financial Services. Будучи частью Amazon с августа 2018 года, она имела возможность участвовать как в операционной деятельности, так и в облачном бизнесе компании. В настоящее время она создает программные активы, демонстрирующие инновационное использование сервисов AWS с учетом конкретных сценариев использования клиентов. Ежедневно она активно занимается различными аспектами технологий, но ее настоящая страсть заключается в сочетании веб-разработки и аналитики.
- SEO-контент и PR-распределение. Получите усиление сегодня.
- PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
- ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
- ПлатонЭСГ. Автомобили / электромобили, Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
- Смещения блоков. Модернизация права собственности на экологические компенсации. Доступ здесь.
- Источник: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :имеет
- :является
- :куда
- ][п
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- О нас
- доступ
- доступной
- Учетная запись
- Достигать
- Действие
- активно
- Добавить
- добавленный
- добавить
- дополнительный
- Администратор
- После
- Все
- позволять
- разрешено
- позволяет
- причислены
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- аналитика
- и
- Anonymous
- Анонимно
- ответ
- любой
- API
- приложение
- Применение
- Приложения
- архитектура
- МЫ
- аргумент
- AS
- аспекты
- Активы
- назначенный
- предполагать
- At
- прикреплять
- Август
- автор
- избежать
- Ждите
- AWS
- основанный
- основа
- BE
- , так как:
- было
- до
- от имени
- ниже
- тело
- изоферменты печени
- браузер
- строить
- Строительство
- строит
- бизнес
- бизнес-аналитика
- но
- by
- призывают
- Объявления
- CAN
- Пропускная способность
- случаев
- вызванный
- Центр
- шанс
- изменение
- изменения
- Выберите
- клиент
- облако
- код
- цвет
- сочетание
- Компания
- полный
- комплекс
- компонент
- компоненты
- Конфигурация
- Консоли
- потреблять
- Потребители
- Container
- содержит
- содержание
- содержание
- контекст
- Создайте
- создали
- Создающий
- CSS
- Текущий
- В настоящее время
- клиент
- Клиенты
- ежедневно
- приборная панель
- щитки
- данным
- По умолчанию
- определенный
- задерживать
- демонстрировать
- развертывание
- развертывания
- описано
- подробнее
- Застройщик
- Развитие
- различный
- Дисплей
- DOM
- домен
- доменов
- сделанный
- Dont
- двойной
- продолжительность
- в течение
- e
- эффект
- элемент
- вставлять
- встроенный
- вложения
- включить
- включен
- зацепляет
- Enter
- организация
- Окружающая среда
- Эквивалент
- ошибка
- ошибки
- Эфир (ETH)
- События
- События
- пример
- Примеры
- Кроме
- исключение
- выполнение
- существующий
- объяснены
- Больше
- экспорт
- чувствовать
- Файл
- финансовый
- финансовые услуги
- Во-первых,
- следовать
- после
- Что касается
- Бесплатно
- часто
- от
- функция
- функциональная
- далее
- шлюз
- порождать
- дает
- Глобальный
- глобальный финансовый
- Go
- предоставление
- группы
- было
- Есть
- имеющий
- Заголовки
- высота
- помогает
- ее
- держать
- имеет
- Крючки
- зависать
- Как
- How To
- HTTP
- HTTPS
- i
- IAM
- ID
- идеальный
- Личность
- идентификаторы
- if
- немедленная
- в XNUMX году
- Импортировать
- in
- включены
- individual
- информация
- начальный
- инициирование
- инновационный
- устанавливать
- интеграции.
- Интеллекта
- взаимодействует
- в
- вводить
- Запускает
- вовлеченный
- IT
- JSON
- всего
- Основные
- Отсутствие
- большой
- крупномасштабный
- новее
- Планировка
- УЧИТЬСЯ
- уровень
- лежит
- Список
- погрузка
- локальным
- журнал
- посмотреть
- Главная
- ДЕЛАЕТ
- Создание
- обязательный
- Маржа
- Совпадение
- Меню
- метод
- минут
- режим
- ежемесячно
- БОЛЕЕ
- двигаться
- с разными
- должен
- имя
- Откройте
- Навигация
- Необходимость
- потребности
- Новые
- следующий
- "обычные"
- сейчас
- объект
- of
- .
- on
- ONE
- Операционный отдел
- Опция
- Опции
- or
- Апельсин
- OS
- Другое
- Другое
- в противном случае
- наши
- обзор
- пакет
- страница
- хлеб
- часть
- страсть
- выполнять
- Разрешения
- выбирать
- заполнитель
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- пожалуйста
- политика
- Портал
- После
- мощный
- предпосылки
- предотвращать
- цены
- процесс
- Производство
- Проект
- обеспечение
- полномочие
- что такое варган?
- покупки
- цель
- RE
- реагировать
- читатель
- читатели
- готовый
- Управление по борьбе с наркотиками (DEA)
- область
- удален
- оказывает
- замещать
- запросить
- Запросы
- обязательный
- ресурс
- Полезные ресурсы
- ответ
- возвращают
- Возвращает
- Роли
- корень
- Run
- Бег
- Шкала
- Сценарии
- скриншоты
- SDK
- Во-вторых
- секунды
- Раздел
- посмотреть
- выбранный
- Услуги
- Сессия
- сессиях
- набор
- урегулировать
- установка
- Поделиться
- разделение
- она
- должен
- показывать
- показал
- показанный
- Шоу
- аналогичный
- просто
- упростить
- с
- небольшой
- Software
- Решение
- Решения
- некоторые
- Скоро
- конкретный
- указанный
- Этап
- Начало
- Область
- заявление
- Шаг
- Шаги
- поток
- строгий
- стиль
- такие
- Убедитесь
- с учетом
- цель
- Технологии
- Терминал
- тестXNUMX
- Тестирование
- который
- Ассоциация
- их
- Их
- тогда
- Там.
- следовательно
- этой
- время
- в
- вызвать
- срабатывает
- правда
- надежных
- стараться
- ОЧЕРЕДЬ
- два
- под
- подчеркивание
- Updates
- URL
- использование
- используемый
- Информация о пользователе
- пользователей
- использования
- через
- ценностное
- различный
- версия
- Вид
- Войти
- хотеть
- способы
- we
- Web
- Веб-разработка
- веб-сервисы
- веб-сайты
- добро пожаловать
- ЧТО Ж
- когда
- когда бы ни
- , которые
- будете
- в
- без
- являетесь
- ВАШЕ
- зефирнет