Використання вбудованої аналітики від Amazon QuickSight може спростити процес оснащення вашої програми функціональними візуалізаціями без будь-якої складної розробки. Існує кілька способів вбудувати інформаційні панелі QuickSight у програму. У цій публікації ми розглянемо, як це можна зробити за допомогою React і Amazon QuickSight Embedding SDK.
Користувачі інформаційної панелі часто не мають користувача, призначеного для свого облікового запису AWS, і тому не мають доступу до інформаційної панелі. Щоб вони могли використовувати дані, інформаційна панель має бути доступною для анонімних користувачів. Давайте розглянемо кроки, необхідні для того, щоб неавтентифікований користувач міг переглядати вашу інформаційну панель QuickSight у вашій програмі React.
Огляд рішення
Наше рішення використовує такі ключові служби:
Після завантаження веб-сторінки в браузері веб-переглядач звертається до API Gateway, який викликає функцію Lambda, яка викликає QuickSight API для створення 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 створіть нову функцію.
- Select Автор з нуля.
- для Назва функції, введіть назву, наприклад
AnonymousEmbedFunction
. - для Час виконання¸ вибрати Python 3.9.
- для Виконавча роль¸ вибрати Використовуйте наявну роль.
- Виберіть роль
AnonymousEmbedRole
. - Вибирати Створити функцію.
- На сторінці інформації про функцію перейдіть до код і введіть наступний код:
Якщо ви не використовуєте localhost, замініть http://localhost:3000
у результатах з іменем хоста вашої програми. Щоб перейти до виробництва, не забудьте замінити http://localhost:3000
з вашим доменом.
- на конфігурація вкладка, під Загальна конфігураціявиберіть Редагувати.
- Збільште час очікування з 3 секунд до 30 секунд, а потім виберіть зберегти.
- під Змінні середовищавиберіть Редагувати.
- Додайте такі змінні:
- додавати
DashboardIdList
і перелічіть ідентифікатори панелі керування. - додавати
DashboardRegion
і введіть регіон вашої інформаційної панелі.
- додавати
- Вибирати зберегти.
Ваша конфігурація має виглядати так, як на знімку екрана нижче.
- на код вкладку, виберіть Розгортання щоб розгорнути функцію.
Налаштуйте шлюз API для виклику функції Lambda
Щоб налаштувати шлюз API для виклику створеної вами функції, виконайте такі дії:
- На консолі API Gateway перейдіть до REST API розділ і виберіть Будувати.
- під Створіть новий APIвиберіть Новий API.
- для Назва API, введіть назву (наприклад,
QuicksightAnonymousEmbed
). - Вибирати Створити API.
- на Дії меню, виберіть Створити ресурс.
- для Назва ресурсу, введіть назву (наприклад,
anonymous-embed
).
Тепер давайте створимо метод.
- Виберіть
anonymous-embed
ресурс і на Дії меню, виберіть Створити метод. - Вибирати GET під назвою ресурсу.
- для Тип інтеграціївиберіть Лямбда.
- Select Використовуйте інтеграцію лямбда-проксі.
- для Лямбда-функція, введіть назву створеної вами функції.
- Вибирати зберегти, Потім виберіть OK.
Тепер ми готові до розгортання API.
- на Дії меню, виберіть Розгорнути API.
- для Етап розгортаннявиберіть Новий етап.
- Введіть назву для вашої сцени, наприклад
embed
. - Вибирати Розгортання.
[Необов’язково] Додайте свій домен у QuickSight
Якщо ви додали дозволені домени в Створіть анонімну лямбда-функцію вбудованої URL-адреси частина, не соромтеся переходити до Увімкніть тарифікацію потужності .
Щоб додати свій домен до дозволених доменів у QuickSight, виконайте такі дії:
- На консолі QuickSight виберіть меню користувача, а потім виберіть Керуйте QuickSight.
- Вибирати Домени та вбудовування у навігаційній панелі.
- для Область, введіть свій домен (
http://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:- приладова панель – Зберігає поточний вибраний ідентифікатор інформаційної панелі.
- quickSightEmbedding – Зберігає об’єкт вбудованого QuickSight, який повертає
embedDashboard()
функції.
- Реферальний гачок – Хук посилання визначається за допомогою
useRef()
хук від React. Він використовується для зберігання посилання на елемент DOM, куди буде вбудовано інформаційну панель QuickSight. - хук useEffect(). – Хук useEffect() використовується для запуску вбудовування інформаційної панелі QuickSight щоразу, коли змінюється ідентифікатор вибраної інформаційної панелі. Спочатку він отримує URL-адресу інформаційної панелі для вибраного ідентифікатора з QuickSight API за допомогою методу fetch(). Отримавши URL-адресу, вона викликає функцію embed() із URL-адресою як аргументом.
- Змінити обробник - The
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, адаптоване до конкретних випадків використання клієнта. Щодня вона активно займається різними аспектами технологій, але її справжня пристрасть полягає в поєднанні веб-розробки та аналітики.
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- PlatoData.Network Vertical Generative Ai. Додайте собі сили. Доступ тут.
- PlatoAiStream. Web3 Intelligence. Розширення знань. Доступ тут.
- ПлатонЕСГ. Автомобільні / електромобілі, вуглець, CleanTech, Енергія, Навколишнє середовище, Сонячна, Поводження з відходами. Доступ тут.
- BlockOffsets. Модернізація екологічної компенсаційної власності. Доступ тут.
- джерело: 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
- МЕНЮ
- доступ
- доступною
- рахунки
- Achieve
- дію
- активно
- додавати
- доданий
- додати
- Додатковий
- адмін
- після
- ВСІ
- дозволяти
- дозволено
- дозволяє
- Також
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- аналітика
- та
- анонімний
- Анонімно
- відповідь
- будь-який
- API
- додаток
- додаток
- застосування
- архітектура
- ЕСТЬ
- аргумент
- AS
- аспекти
- Активи
- призначений
- припустити
- At
- приєднувати
- Серпня
- автор
- уникнути
- чекати
- AWS
- заснований
- основа
- BE
- оскільки
- було
- перед тим
- імені
- нижче
- тіло
- обидва
- браузер
- будувати
- Створюємо
- Будує
- бізнес
- бізнес-аналітика
- але
- by
- call
- Виклики
- CAN
- потужність
- випадків
- викликаний
- Центр
- шанс
- зміна
- Зміни
- Вибирати
- клієнт
- хмара
- код
- color
- поєднання
- компанія
- повний
- комплекс
- компонент
- Компоненти
- конфігурація
- Консоль
- споживати
- Споживачі
- Контейнер
- містить
- зміст
- зміст
- контекст
- створювати
- створений
- створення
- CSS
- Поточний
- В даний час
- клієнт
- Клієнти
- щодня
- приладова панель
- інформаційні панелі
- дані
- дефолт
- певний
- затримка
- демонструвати
- розгортання
- розгортання
- описаний
- деталі
- Розробник
- розробка
- різний
- дисплей
- DOM
- домен
- домени
- зроблений
- Не знаю
- подвійний
- тривалість
- під час
- e
- ефект
- елемент
- Вставляти
- вбудований
- вбудовування
- включіть
- включений
- займається
- Що натомість? Створіть віртуальну версію себе у
- суб'єкта
- Навколишнє середовище
- Еквівалент
- помилка
- помилки
- Ефір (ETH)
- Event
- Події
- приклад
- Приклади
- Крім
- виняток
- виконання
- існуючий
- пояснені
- дослідити
- експорт
- почувати
- філе
- фінансовий
- фінансові послуги
- Перший
- стежити
- після
- для
- Безкоштовна
- часто
- від
- функція
- функціональний
- далі
- шлюз
- породжувати
- дає
- Глобальний
- глобальні фінансові
- Go
- Надання
- Group
- було
- Мати
- має
- Заголовки
- висота
- допомагає
- її
- тримати
- тримає
- гачки
- hover
- Як
- How To
- HTTP
- HTTPS
- i
- IAM
- ID
- ідеальний
- Особистість
- ідентифікатори
- if
- Негайний
- реалізовані
- імпорт
- in
- включені
- індивідуальний
- інформація
- початковий
- ініціювання
- інноваційний
- встановлювати
- інтеграція
- Інтелект
- взаємодіє
- в
- вводити
- викликає
- залучений
- IT
- json
- просто
- ключ
- відсутність
- великий
- масштабний
- пізніше
- макет
- УЧИТЬСЯ
- рівень
- лежить
- список
- погрузка
- місцевий
- журнал
- подивитися
- головний
- РОБОТИ
- Робить
- обов'язковий
- Маржа
- матч
- Меню
- метод
- протокол
- режим
- щомісячно
- більше
- рухатися
- множинний
- повинен
- ім'я
- Переміщення
- навігація
- Необхідність
- потреби
- Нові
- наступний
- нормальний
- зараз
- об'єкт
- of
- часто
- on
- ONE
- операції
- варіант
- Опції
- or
- помаранчевий
- OS
- Інше
- інші
- інакше
- наші
- огляд
- пакет
- сторінка
- pane
- частина
- пристрасть
- виконувати
- Дозволи
- вибирати
- заповнювач
- plato
- Інформація про дані Платона
- PlatoData
- будь ласка
- політика
- Портал
- пошта
- потужний
- передумови
- запобігати
- ціни без прихованих комісій
- процес
- Production
- проект
- забезпечення
- повноваження
- громадськість
- покупка
- мета
- RE
- Реагувати
- читач
- читачі
- готовий
- рекомендований
- регіон
- Вилучено
- надає
- замінювати
- запросити
- запитів
- вимагається
- ресурс
- ресурси
- відповідь
- повертати
- Умови повернення
- Роль
- корінь
- прогін
- біг
- шкала
- сценарії
- скріншоти
- Sdk
- другий
- seconds
- розділ
- побачити
- обраний
- Послуги
- Сесія
- сесіях
- комплект
- оселитися
- установка
- Поділитись
- поділ
- вона
- Повинен
- Показувати
- показав
- показаний
- Шоу
- аналогічний
- простий
- спростити
- з
- невеликий
- Софтвер
- рішення
- Рішення
- деякі
- Скоро
- конкретний
- зазначений
- Стажування
- старт
- стан
- Заява
- Крок
- заходи
- потік
- строгий
- стиль
- такі
- Переконайтеся
- з урахуванням
- Мета
- Технологія
- термінал
- тест
- Тестування
- Що
- Команда
- їх
- Їх
- потім
- Там.
- отже
- це
- час
- до
- викликати
- спрацьовує
- правда
- Довірений
- намагатися
- ПЕРЕГЛЯД
- два
- при
- підкреслення
- Updates
- URL
- використання
- використовуваний
- користувач
- користувачі
- використовує
- використання
- значення
- різний
- версія
- вид
- візит
- хотіти
- способи
- we
- Web
- Веб-розробка
- веб-сервіси
- веб-сайти
- ласкаво просимо
- ДОБРЕ
- коли
- коли б ні
- який
- волі
- з
- в
- без
- ви
- вашу
- зефірнет