Korzystanie z osadzonych analiz z Amazon QuickSight może uprościć proces wyposażania Twojej aplikacji w funkcjonalne wizualizacje bez skomplikowanego programowania. Istnieje wiele sposobów osadzania dashboardów QuickSight w aplikacji. W tym poście przyjrzymy się, jak można to zrobić za pomocą React i Zestaw SDK do osadzania Amazon QuickSight.
Konsumenci pulpitu nawigacyjnego często nie mają przypisanego użytkownika do swojego konta AWS i dlatego nie mają dostępu do pulpitu nawigacyjnego. Aby umożliwić im korzystanie z danych, pulpit nawigacyjny musi być dostępny dla anonimowych użytkowników. Przyjrzyjmy się krokom wymaganym do umożliwienia nieuwierzytelnionemu użytkownikowi przeglądania pulpitu nawigacyjnego QuickSight w aplikacji React.
Omówienie rozwiązania
Nasze rozwiązanie wykorzystuje następujące kluczowe usługi:
Po załadowaniu strony internetowej do przeglądarki, przeglądarka wykonuje wywołanie API Gateway, które wywołuje funkcję Lambda, która wywołuje API QuickSight w celu wygenerowania adresu URL pulpitu nawigacyjnego dla anonimowego użytkownika. Funkcja Lambda musi przyjąć rolę IAM z wymaganymi uprawnieniami. Poniższy diagram przedstawia przegląd architektury.
Wymagania wstępne
Musisz mieć następujące wymagania wstępne:
Skonfiguruj uprawnienia dla nieuwierzytelnionych przeglądających
Na swoim koncie utwórz politykę IAM, którą Twoja aplikacja przyjmie w imieniu przeglądającego:
- W konsoli IAM wybierz Polityka w okienku nawigacji.
- Dodaj Utwórz politykę.
- Na JSON wprowadź następujący kod polisy:
Pamiętaj, aby zmienić wartość do wartości identyfikatora pulpitu nawigacyjnego. Zanotuj ten identyfikator, aby użyć go również w późniejszym kroku.
Dla drugiego obiektu instrukcji z dziennikami uprawnienia są fakultatywny. Umożliwia utworzenie grupy dzienników o określonej nazwie, utworzenie strumienia dziennika dla określonej grupy dzienników i przesłanie partii zdarzeń dziennika do określonego strumienia dziennika.
W tej polityce zezwalamy użytkownikowi na wykonanie GenerateEmbedUrlForAnonymousUser
działanie na identyfikatorze pulpitu nawigacyjnego na liście identyfikatorów pulpitu nawigacyjnego wstawionej w symbolu zastępczym.
- Wprowadź nazwę swojej polityki (np.
AnonymousEmbedPolicy
) i wybierz Utwórz politykę.
Następnie tworzymy rolę i dołączamy tę politykę do roli.
- Dodaj role w okienku nawigacji, a następnie wybierz Utwórz rolę.
- Dodaj Lambda dla zaufanego podmiotu.
- Wyszukaj i wybierz
AnonymousEmbedPolicy
, A następnie wybierz Następna. - Wprowadź nazwę swojej roli, np
AnonymousEmbedRole
. - Upewnij się, że nazwa zasad jest zawarta w pliku Dodaj uprawnienia
- Zakończ tworzenie swojej roli.
Właśnie utworzyłeś AnonymousEmbedRole
rola egzekucyjna. Możesz teraz przejść do następnego kroku.
Wygeneruj anonimową funkcję lambda do osadzenia adresu URL
W tym kroku tworzymy funkcję Lambda, która współdziała z QuickSight w celu wygenerowania adresu URL do osadzenia dla anonimowego użytkownika. Nasza domena musi być dozwolona. Istnieją dwa sposoby osiągnięcia integracji Amazon QuickSight:
- Dodając adres URL do listy dozwolonych domen w konsoli administracyjnej Amazon QuickSight (wyjaśnione w dalszej części [Opcjonalnie] Dodaj swoją domenę w QuickSight Sekcja).
- [Zalecana] Dodając żądanie osadzenia adresu URL w czasie wykonywania w wywołaniu interfejsu API. Opcja 1 jest zalecana, gdy konieczne jest zachowanie dozwolonych domen. W przeciwnym razie domeny zostaną usunięte po 30 minutach, co odpowiada czasowi trwania sesji. W przypadku innych przypadków użycia zaleca się skorzystanie z drugiej opcji (opisanej i zaimplementowanej poniżej).
Na konsoli Lambda utwórz nową funkcję.
- Wybierz Autor od zera.
- W razie zamówieenia projektu Nazwa funkcji, wprowadź nazwę, na przykład
AnonymousEmbedFunction
. - W razie zamówieenia projektu Czas pracy¸ wybierz Python 3.9.
- W razie zamówieenia projektu Rola wykonawcza¸ wybierz Użyj istniejącej roli.
- Wybierz rolę
AnonymousEmbedRole
. - Dodaj Utwórz funkcję.
- Na stronie szczegółów funkcji przejdź do Code zakładkę i wprowadź następujący kod:
Jeśli nie używasz localhost, wymień http://localhost:3000
w zwrotach z nazwą hosta Twojej aplikacji. Aby przejść do produkcji, nie zapomnij wymienić http://localhost:3000
z Twoją domeną.
- Na systemu karta, pod Ogólna konfiguracjawybierz Edytuj.
- Zwiększ limit czasu z 3 sekund do 30 sekund, a następnie wybierz Zapisz.
- Pod Zmienne środowiskowewybierz Edytuj.
- Dodaj następujące zmienne:
- Dodaj
DashboardIdList
i wyświetl swoje identyfikatory na pulpicie nawigacyjnym. - Dodaj
DashboardRegion
i wprowadź region swojego pulpitu nawigacyjnego.
- Dodaj
- Dodaj Zapisz.
Twoja konfiguracja powinna wyglądać podobnie do poniższego zrzutu ekranu.
- Na Code kartę, wybierz Rozmieścić wdrożyć funkcję.
Skonfiguruj API Gateway, aby wywołać funkcję Lambda
Aby skonfigurować API Gateway do wywoływania utworzonej funkcji, wykonaj następujące kroki:
- W konsoli API Gateway przejdź do pliku REST API sekcja i wybierz Budować.
- Pod Utwórz nowy interfejs API, Wybierz Nowe API.
- W razie zamówieenia projektu Nazwa interfejsu APIwprowadź nazwę (na przykład
QuicksightAnonymousEmbed
). - Dodaj Utwórz interfejs API.
- Na Akcje menu, wybierz Utwórz zasób.
- W razie zamówieenia projektu Nazwa zasobuwprowadź nazwę (na przykład
anonymous-embed
).
Teraz utwórzmy metodę.
- Wybierz
anonymous-embed
zasobu i na Akcje menu, wybierz Utwórz metodę. - Dodaj GET pod nazwą zasobu.
- W razie zamówieenia projektu Typ integracji, Wybierz Lambda.
- Wybierz Użyj integracji Lambda Proxy.
- W razie zamówieenia projektu Funkcja Lambdy, wprowadź nazwę utworzonej funkcji.
- Dodaj Zapisz, A następnie wybierz OK.
Teraz jesteśmy gotowi do wdrożenia interfejsu API.
- Na Akcje menu, wybierz Wdróż API.
- W razie zamówieenia projektu Etap wdrożenia, Wybierz Nowa scena.
- Wpisz nazwę swojej sceny, np
embed
. - Dodaj Rozmieścić.
[Opcjonalnie] Dodaj swoją domenę w QuickSight
Jeśli dodałeś dozwolone domeny w Wygeneruj anonimową funkcję lambda do osadzenia adresu URL część, nie krępuj się przejść do Włącz ceny pojemności
Aby dodać swoją domenę do domen dozwolonych w QuickSight, wykonaj następujące kroki:
- W konsoli QuickSight wybierz menu użytkownika, a następnie wybierz Zarządzaj QuickSight.
- Dodaj Domeny i osadzanie w okienku nawigacji.
- W razie zamówieenia projektu Domena, wprowadź swoją domenę (
http://localhost:
).
Pamiętaj o wymianie dopasować do lokalnej konfiguracji.
- Dodaj Dodaj.
Pamiętaj, aby zastąpić domenę localhost tą, której będziesz używać po testowaniu.
Włącz ceny pojemności
Jeśli nie masz włączonej wyceny pojemności sesji, wykonaj czynności opisane w tej sekcji. Włączenie tej funkcji jest obowiązkowe, aby przejść dalej.
Wycena pojemności umożliwia klientom QuickSight kupowanie sesji czytnika zbiorczo bez konieczności udostępniania poszczególnych czytników w QuickSight. Wycena pojemności jest idealna dla aplikacji wbudowanych lub wdrożeń Business Intelligence (BI) na dużą skalę. Po więcej informacji odwiedź Ceny Amazon QuickSight.
Aby włączyć wycenę pojemności, wykonaj następujące czynności:
- Na Zarządzaj QuickSight wybierz stronę Twoje subskrypcje w okienku nawigacji.
- W Ceny pojemności sekcja, wybierz Uzyskaj miesięczną subskrypcję.
- Dodaj Potwierdź subskrybcję.
Aby dowiedzieć się więcej o cenach pojemności, zobacz Nowość w Amazon QuickSight – wycena pojemności sesji dla wdrożeń na dużą skalę, osadzanie w publicznych witrynach internetowych i portal dla deweloperów do wbudowanych analiz.
Skonfiguruj swoją aplikację React
Aby skonfigurować aplikację React, wykonaj następujące kroki:
- W folderze projektu React przejdź do katalogu głównego i uruchom
npm i amazon-quicksight-embedding-sdk
aby zainstalować pakiet amazon-quicksight-embedding-sdk. - W twoim
App.js
plik, zastąp następujące:- zastąpić
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
z adresem URL wywołania API Gateway i nazwą zasobu (np.https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - zastąpić
YOUR_DASHBOARD1_ID
z pierwszym dashboardId z twojegoDashboardIdList
. To jest pulpit nawigacyjny, który zostanie wyświetlony na początkowym renderowaniu. - zastąpić
YOUR_DASHBOARD2_ID
z drugim dashboardId z twojegoDashboardIdList
.
- zastąpić
Poniższy fragment kodu przedstawia przykład pliku App.js
plik w swoim projekcie React. Kod jest komponentem React, który osadza pulpit nawigacyjny QuickSight na podstawie wybranego identyfikatora pulpitu nawigacyjnego. Kod zawiera następujące kluczowe komponenty:
- Haki państwowe – Dwa zaczepy stanu są definiowane przy użyciu metody
useState()
hak z Reacta:- tablica rozdzielcza – Przechowuje aktualnie wybrany identyfikator deski rozdzielczej.
- quickSightOsadzanie – Przechowuje osadzony obiekt QuickSight zwrócony przez
embedDashboard()
funkcja.
- Hak ref – Ref hook jest definiowany za pomocą
useRef()
hak z Reacta. Służy do przechowywania odniesienia do elementu DOM, w którym zostanie osadzony pulpit nawigacyjny QuickSight. - useEffect() hak – Haczyk useEffect() jest używany do wyzwalania osadzania pulpitu nawigacyjnego QuickSight za każdym razem, gdy zmienia się wybrany identyfikator pulpitu nawigacyjnego. Najpierw pobiera adres URL pulpitu nawigacyjnego dla wybranego identyfikatora z interfejsu API QuickSight przy użyciu metody fetch(). Po pobraniu adresu URL wywołuje funkcję embed() z adresem URL jako argumentem.
- Zmień obsługę -
changeDashboard()
to prosta procedura obsługi zdarzeń, która aktualizuje stan pulpitu nawigacyjnego za każdym razem, gdy użytkownik wybierze inny pulpit nawigacyjny z menu rozwijanego. Gdy tylko zostanie ustawiony nowy identyfikator pulpitu nawigacyjnego, uruchamiany jest hak useEffect. - 10-milisekundowy limit czasu – Celem zastosowania timeoutu jest wprowadzenie niewielkiego opóźnienia 10 milisekund przed wykonaniem wywołania API. To opóźnienie może być przydatne w scenariuszach, w których chcesz uniknąć natychmiastowych wywołań interfejsu API lub zapobiec nadmiernej liczbie żądań, gdy składnik często się renderuje. Limit czasu daje komponentowi trochę czasu na rozstrzygnięcie przed zainicjowaniem żądania API. Ponieważ budujemy aplikację w trybie programistycznym, limit czasu pomaga uniknąć błędów spowodowanych podwójnym uruchomieniem
useEffect
w ciąguStrictMode
. Aby uzyskać więcej informacji, zobacz Aktualizacje trybu ścisłego.
Zobacz następujący kod:
Następnie zastąp zawartość swojego App.css
plik, który jest używany do stylizacji i układu strony internetowej, z treścią z następującego fragmentu kodu:
Teraz nadszedł czas, aby przetestować Twoją aplikację. Uruchom aplikację, uruchamiając npm start
w twoim terminalu. Poniższe zrzuty ekranu przedstawiają przykłady Twojej aplikacji oraz pulpity nawigacyjne, które może wyświetlać.
Wnioski
W tym poście pokazaliśmy, jak osadzić dashboard QuickSight w aplikacji React przy użyciu AWS SDK. Udostępnienie pulpitu nawigacyjnego anonimowym użytkownikom umożliwia im dostęp do pulpitu nawigacyjnego bez przyznawania im dostępu do konta AWS. Istnieją również inne sposoby anonimowego udostępniania pulpitu nawigacyjnego, na przykład za pomocą Osadzanie publiczne jednym kliknięciem.
Dołącz Społeczność Quicksight zadawać pytania, odpowiadać i uczyć się z innymi oraz odkrywać dodatkowe zasoby.
O autorze
Adrianna jest architektem rozwiązań w AWS Global Financial Services. Będąc częścią Amazona od sierpnia 2018 roku, miała okazję być zaangażowana zarówno w działalność operacyjną, jak i chmurową firmy. Obecnie buduje aktywa oprogramowania, które demonstrują innowacyjne wykorzystanie usług AWS, dopasowane do konkretnych przypadków użycia klienta. Na co dzień aktywnie zajmuje się różnymi aspektami technologii, ale jej prawdziwą pasją jest łączenie tworzenia stron internetowych i analityki.
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- PlatoData.Network Pionowe generatywne AI. Wzmocnij się. Dostęp tutaj.
- PlatoAiStream. Inteligencja Web3. Wiedza wzmocniona. Dostęp tutaj.
- PlatonESG. Motoryzacja / pojazdy elektryczne, Węgiel Czysta technologia, Energia, Środowisko, Słoneczny, Gospodarowanie odpadami. Dostęp tutaj.
- Przesunięcia bloków. Modernizacja własności offsetu środowiskowego. Dostęp tutaj.
- Źródło: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :ma
- :Jest
- :Gdzie
- ][P
- $W GÓRĘ
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- O nas
- dostęp
- dostępny
- Konto
- Osiągać
- Działania
- aktywnie
- Dodaj
- w dodatku
- dodanie
- Dodatkowy
- Admin
- Po
- Wszystkie kategorie
- dopuszczać
- dozwolony
- pozwala
- również
- Amazonka
- Amazon QuickSight
- Amazon Web Services
- an
- analityka
- i
- Anonimowy
- Anonimowo
- odpowiedź
- każdy
- api
- Aplikacja
- Zastosowanie
- aplikacje
- architektura
- SĄ
- argument
- AS
- aspekty
- Aktywa
- przydzielony
- założyć
- At
- dołączać
- Sierpnia
- autor
- uniknąć
- oczekiwać
- AWS
- na podstawie
- podstawa
- BE
- bo
- być
- zanim
- w imieniu
- poniżej
- ciało
- obie
- przeglądarka
- budować
- Budowanie
- Buduje
- biznes
- business intelligence
- ale
- by
- wezwanie
- Połączenia
- CAN
- Pojemność
- Etui
- powodowany
- Centrum
- szansa
- zmiana
- Zmiany
- Dodaj
- klient
- Chmura
- kod
- kolor
- połączenie
- sukcesy firma
- kompletny
- kompleks
- składnik
- składniki
- systemu
- Konsola
- konsumować
- Konsumenci
- Pojemnik
- zawiera
- zawartość
- treść
- kontekst
- Stwórz
- stworzony
- Tworzenie
- CSS
- Aktualny
- Obecnie
- klient
- Klientów
- codziennie
- tablica rozdzielcza
- Deski rozdzielcze
- dane
- Domyślnie
- zdefiniowane
- opóźnienie
- wykazać
- rozwijać
- wdrożenia
- opisane
- detale
- Deweloper
- oprogramowania
- różne
- Wyświetlacz
- DOM
- domena
- domeny
- zrobić
- nie
- Podwójna
- czas trwania
- podczas
- e
- efekt
- element
- osadzać
- osadzone
- osadzanie
- umożliwiać
- włączony
- zaangażowany
- Wchodzę
- jednostka
- Środowisko
- Równoważny
- błąd
- Błędy
- Eter (ETH)
- wydarzenie
- wydarzenia
- przykład
- przykłady
- Z wyjątkiem
- wyjątek
- egzekucja
- Przede wszystkim system został opracowany
- wyjaśnione
- odkryj
- eksport
- czuć
- filet
- budżetowy
- usługi finansowe
- i terminów, a
- obserwuj
- następujący
- W razie zamówieenia projektu
- Darmowy
- często
- od
- funkcjonować
- funkcjonalny
- dalej
- Bramka
- Generować
- daje
- Globalne
- globalne finanse
- Go
- przyznanie
- Zarządzanie
- miał
- Have
- mający
- headers
- wysokość
- pomaga
- jej
- przytrzymaj
- posiada
- Haczyki
- unosić
- W jaki sposób
- How To
- http
- HTTPS
- i
- IAM
- ID
- idealny
- tożsamość
- ids
- if
- Natychmiastowy
- realizowane
- importować
- in
- włączony
- indywidualny
- Informacja
- początkowy
- inicjowanie
- Innowacyjny
- zainstalować
- integracja
- Inteligencja
- współdziała
- najnowszych
- przedstawiać
- inwokuje
- zaangażowany
- IT
- json
- właśnie
- Klawisz
- Brak
- duży
- na dużą skalę
- później
- układ
- UCZYĆ SIĘ
- poziom
- leży
- Lista
- załadunek
- miejscowy
- log
- Popatrz
- Główny
- WYKONUJE
- Dokonywanie
- obowiązkowe
- Margines
- Mecz
- Menu
- metoda
- minuty
- Moda
- miesięcznie
- jeszcze
- ruch
- wielokrotność
- musi
- Nazwa
- Nawigacja
- Nawigacja
- Potrzebować
- wymagania
- Nowości
- Następny
- normalna
- już dziś
- przedmiot
- of
- często
- on
- ONE
- operacje
- Option
- Opcje
- or
- Orange
- OS
- Inne
- Pozostałe
- Inaczej
- ludzkiej,
- przegląd
- pakiet
- strona
- chleb
- część
- pasja
- wykonać
- uprawnienia
- wybierać
- zastępczy
- plato
- Analiza danych Platona
- PlatoDane
- Proszę
- polityka
- Portal
- Post
- mocny
- warunki wstępne
- zapobiec
- wycena
- wygląda tak
- Produkcja
- projekt
- zaopatrzenie
- pełnomocnik
- publiczny
- zakup
- cel
- RE
- React
- Czytelnik
- czytelnicy
- gotowy
- Zalecana
- region
- Usunięto
- renderuje
- obsługi produkcji rolnej, która zastąpiła
- zażądać
- wywołań
- wymagany
- Zasób
- Zasoby
- odpowiedź
- powrót
- powraca
- Rola
- korzeń
- run
- bieganie
- Skala
- scenariusze
- screeny
- Sdk
- druga
- sekund
- Sekcja
- widzieć
- wybrany
- Usługi
- Sesja
- Sesje
- zestaw
- rozstrzygać
- ustawienie
- Share
- dzielenie
- ona
- powinien
- pokazać
- pokazał
- pokazane
- Targi
- podobny
- Prosty
- upraszczać
- ponieważ
- mały
- Tworzenie
- rozwiązanie
- Rozwiązania
- kilka
- Wkrótce
- specyficzny
- określony
- STAGE
- początek
- Stan
- Zestawienie sprzedaży
- Ewolucja krok po kroku
- Cel
- strumień
- rygorystyczny
- styl
- taki
- pewnie
- dostosowane
- cel
- Technologia
- terminal
- test
- Testowanie
- że
- Połączenia
- ich
- Im
- następnie
- Tam.
- w związku z tym
- to
- czas
- do
- wyzwalać
- rozsierdzony
- prawdziwy
- zaufany
- próbować
- SKRĘCAĆ
- drugiej
- dla
- podkreślać
- Nowości
- URL
- posługiwać się
- używany
- Użytkownik
- Użytkownicy
- zastosowania
- za pomocą
- wartość
- różnorodny
- wersja
- Zobacz i wysłuchaj
- Odwiedzić
- chcieć
- sposoby
- we
- sieć
- Tworzenie stron internetowych
- usługi internetowe
- strony internetowe
- powitanie
- DOBRZE
- jeśli chodzi o komunikację i motywację
- ilekroć
- który
- będzie
- w
- w ciągu
- bez
- ty
- Twój
- zefirnet