Använda inbäddad analys från Amazon QuickSight kan förenkla processen att utrusta din applikation med funktionella visualiseringar utan någon komplex utveckling. Det finns flera sätt att bädda in QuickSight-instrumentpaneler i applikationen. I det här inlägget tittar vi på hur det kan göras med hjälp av React och Amazon QuickSight Embedding SDK.
Dashboard-konsumenter har ofta inte en användare tilldelad sitt AWS-konto och saknar därför åtkomst till instrumentpanelen. För att de ska kunna konsumera data måste instrumentpanelen vara tillgänglig för anonyma användare. Låt oss titta på stegen som krävs för att en oautentiserad användare ska kunna se din QuickSight-instrumentpanel i din React-applikation.
Lösningsöversikt
Vår lösning använder följande nyckeltjänster:
Efter att ha laddat webbsidan i webbläsaren gör webbläsaren ett anrop till API Gateway, som anropar en Lambda-funktion som anropar QuickSight API för att generera en instrumentpanels-URL för en anonym användare. Lambdafunktionen måste anta en IAM-roll med nödvändiga behörigheter. Följande diagram visar en översikt över arkitekturen.
Förutsättningar
Du måste ha följande förutsättningar:
Ställ in behörigheter för oautentiserade tittare
Skapa en IAM-policy i ditt konto som din applikation kommer att anta på uppdrag av tittaren:
- Välj på IAM-konsolen policies i navigeringsfönstret.
- Välja Skapa policy.
- På JSON fliken anger du följande policykod:
Se till att ändra värdet på till värdet av instrumentbrädans ID. Notera detta ID för att använda i ett senare steg också.
För det andra satsobjektet med loggar är behörigheter valfritt. Det låter dig skapa en logggrupp med det angivna namnet, skapa en loggström för den angivna logggruppen och ladda upp en grupp logghändelser till den angivna loggströmmen.
I denna policy tillåter vi användaren att utföra GenerateEmbedUrlForAnonymousUser
åtgärd på instrumentbrädans ID i listan över instrumentpanels-ID:n som infogats i platshållaren.
- Ange ett namn för din policy (t.ex.
AnonymousEmbedPolicy
) och välj Skapa policy.
Därefter skapar vi en roll och kopplar denna policy till rollen.
- Välja roller i navigeringsfönstret och välj sedan Skapa roll.
- Välja Lambda för den betrodda enheten.
- Sök efter och välj
AnonymousEmbedPolicy
Och välj sedan Nästa. - Ange ett namn för din roll, t.ex
AnonymousEmbedRole
. - Se till att policynamnet ingår i Lägg till behörigheter sektion.
- Avsluta skapa din roll.
Du har precis skapat AnonymousEmbedRole
utförande roll. Du kan nu gå vidare till nästa steg.
Generera en anonym inbäddad URL Lambda-funktion
I det här steget skapar vi en Lambda-funktion som interagerar med QuickSight för att generera en inbäddad URL för en anonym användare. Vår domän måste tillåtas. Det finns två sätt att uppnå integrationen av Amazon QuickSight:
- Genom att lägga till URL:en till listan över tillåtna domäner i Amazon QuickSights administratörskonsol (förklaras senare i [Valfritt] Lägg till din domän i QuickSight sektion).
- [Rekommenderad] Genom att lägga till en inbäddad URL-begäran under körning i API-anropet. Alternativ 1 rekommenderas när du behöver bevara de tillåtna domänerna. Annars kommer domänerna att tas bort efter 30 minuter, vilket motsvarar sessionens längd. För andra användningsfall rekommenderas det att använda det andra alternativet (beskrivs och implementeras nedan).
Skapa en ny funktion på Lambda-konsolen.
- Välja Författare från början.
- För Funktionsnamn, ange ett namn, t.ex.
AnonymousEmbedFunction
. - För Runtime¸ välja python 3.9.
- För Utförande roll¸ välja Använd en befintlig roll.
- Välj rollen
AnonymousEmbedRole
. - Välja Skapa funktion.
- På sidan med funktionsdetaljer, navigera till Koda fliken och ange följande kod:
Om du inte använder localhost, byt ut http://localhost:3000
i returerna med värdnamnet för din applikation. För att gå över till produktion, glöm inte att byta ut http://localhost:3000
med din domän.
- På konfiguration flik, under Allmän konfigurationväljer Redigera.
- Öka timeouten från 3 sekunder till 30 sekunder och välj sedan Save.
- Enligt Miljövariablerväljer Redigera.
- Lägg till följande variabler:
- Lägg till
DashboardIdList
och lista dina instrumentpanels-ID:n. - Lägg till
DashboardRegion
och ange regionen för din instrumentpanel.
- Lägg till
- Välja Save.
Din konfiguration bör se ut som på följande skärmdump.
- På Koda fliken, välj Distribuera för att distribuera funktionen.
Ställ in API Gateway för att anropa Lambda-funktionen
För att ställa in API Gateway för att anropa funktionen du skapade, utför följande steg:
- På API Gateway-konsolen, navigera till REST API avsnitt och välj Bygga.
- Enligt Skapa nytt API, Välj Nytt API.
- För API-namn, ange ett namn (t.ex.
QuicksightAnonymousEmbed
). - Välja Skapa API.
- På Handlingar meny, välj Skapa resurs.
- För Resursnamn, ange ett namn (t.ex.
anonymous-embed
).
Låt oss nu skapa en metod.
- Välj
anonymous-embed
resurs och på Handlingar meny, välj Skapa metod. - Välja FÅ under resursnamnet.
- För Integrationstyp, Välj Lambda.
- Välja Använd Lambda Proxy Integration.
- För Lambdafunktion, ange namnet på funktionen du skapade.
- Välja SaveOch välj sedan OK.
Nu är vi redo att distribuera API:t.
- På Handlingar meny, välj Distribuera API.
- För Distributionsstadiet, Välj Ny etapp.
- Ange ett namn för din scen, t.ex
embed
. - Välja Distribuera.
[Valfritt] Lägg till din domän i QuickSight
Om du har lagt till tillåtna domäner i Generera en anonym inbäddad URL Lambda-funktion del, flytta gärna till Slå på kapacitetsprissättning sektion.
För att lägga till din domän till de tillåtna domänerna i QuickSight, utför följande steg:
- Välj användarmenyn på QuickSight-konsolen och välj sedan Hantera QuickSight.
- Välja Domäner och inbäddning i navigeringsfönstret.
- För Domän, ange din domän (
http://localhost:
).
Se till att byta ut för att matcha din lokala inställning.
- Välja Lägg till.
Se till att ersätta localhost-domänen med den du kommer att använda efter testning.
Slå på kapacitetsprissättning
Om du inte har aktiverat prissättning för sessionskapacitet följer du stegen i det här avsnittet. Det är obligatoriskt att ha denna funktion aktiverad för att gå vidare.
Kapacitetsprissättning gör att QuickSight-kunder kan köpa läsarsessioner i bulk utan att behöva tillhandahålla individuella läsare i QuickSight. Kapacitetsprissättning är idealisk för inbäddade applikationer eller storskaliga implementeringar av business intelligence (BI). För mer information besök Amazon QuickSight-prissättning.
För att aktivera kapacitetsprissättning, slutför följande steg:
- På Hantera QuickSight sida, välj Dina prenumerationer i navigeringsfönstret.
- I Kapacitetsprissättning avsnitt, välj Få månadsabonnemang.
- Välja Bekräfta prenumerationen.
För att lära dig mer om kapacitetsprissättning, se Nytt i Amazon QuickSight – prissättning av sessionskapacitet för storskaliga implementeringar, inbäddning på offentliga webbplatser och utvecklarportal för inbäddad analys.
Konfigurera din React-applikation
För att konfigurera din React-applikation, utför följande steg:
- I din React-projektmapp, gå till din rotkatalog och kör
npm i amazon-quicksight-embedding-sdk
för att installera paketet amazon-quicksight-embedding-sdk. - I din
App.js
fil, ersätt följande:- ersätta
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
med din API Gateway anropa URL och ditt resursnamn (till exempel,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - ersätta
YOUR_DASHBOARD1_ID
med det första instrumentpanel-ID:t från dinDashboardIdList
. Detta är instrumentpanelen som kommer att visas vid den första renderingen. - ersätta
YOUR_DASHBOARD2_ID
med det andra instrumentbrädans ID från dinDashboardIdList
.
- ersätta
Följande kodavsnitt visar ett exempel på App.js
fil i ditt React-projekt. Koden är en React-komponent som bäddar in en QuickSight-instrumentbräda baserat på det valda instrumentbrädans ID. Koden innehåller följande nyckelkomponenter:
- Statliga krokar – Två tillståndskrokar definieras med hjälp av
useState()
krok från React:- instrumentbräda – Innehåller det för närvarande valda instrumentbrädans ID.
- quickSightEmbedding – Håller QuickSight-inbäddningsobjektet som returneras av
embedDashboard()
funktion.
- Ref krok – En ref-krok definieras med hjälp av
useRef()
krok från React. Den används för att hålla en referens till DOM-elementet där QuickSight-instrumentpanelen kommer att bäddas in. - useEffect() krok – Haken useEffect() används för att utlösa inbäddningen av QuickSight-instrumentbrädan närhelst det valda instrumentbrädans ID ändras. Den hämtar först instrumentpanelens URL för det valda ID:t från QuickSight API med metoden fetch(). När den har hämtat URL:en anropar den funktionen embed() med URL:en som argument.
- Byt hanterare - Den
changeDashboard()
funktion är en enkel händelsehanterare som uppdaterar instrumentpanelens tillstånd närhelst användaren väljer en annan instrumentpanel från rullgardinsmenyn. Så snart ett nytt instrumentbräde-ID har ställts in, utlöses useEffect-haken. - 10 millisekunders timeout – Syftet med att använda timeout är att införa en liten fördröjning på 10 millisekunder innan API-anropet görs. Denna fördröjning kan vara användbar i scenarier där du vill undvika omedelbara API-anrop eller förhindra överdrivna förfrågningar när komponenten renderas ofta. Timeouten ger komponenten lite tid att lösa innan API-begäran initieras. Eftersom vi bygger applikationen i utvecklingsläge hjälper timeouten till att undvika fel orsakade av dubbelkörning av
useEffect
inomStrictMode
. För mer information, se Uppdateringar till strikt läge.
Se följande kod:
Byt sedan ut innehållet i din App.css
fil, som används för att utforma och layouta din webbsida, med innehållet från följande kodavsnitt:
Nu är det dags att testa din app. Starta din applikation genom att köra npm start
i din terminal. Följande skärmdumpar visar exempel på din app samt instrumentpanelerna den kan visa.
Slutsats
I det här inlägget visade vi dig hur du bäddar in en QuickSight-instrumentpanel i en React-applikation med AWS SDK. Genom att dela din instrumentpanel med anonyma användare kan de komma åt din instrumentpanel utan att ge dem åtkomst till ditt AWS-konto. Det finns också andra sätt att dela din instrumentpanel anonymt, som att använda 1-klicks offentlig inbäddning.
Gå med i Quicksight Community att fråga, svara och lära sig tillsammans med andra och utforska ytterligare resurser.
Om författaren
Adrianna är en lösningsarkitekt på AWS Global Financial Services. Efter att ha varit en del av Amazon sedan augusti 2018, har hon haft chansen att vara involverad både i företagets verksamhet och molnverksamhet. För närvarande bygger hon mjukvarutillgångar som visar innovativ användning av AWS-tjänster, skräddarsydda för specifika kundanvändningsfall. På daglig basis engagerar hon sig aktivt i olika aspekter av teknik, men hennes sanna passion ligger i kombination av webbutveckling och analys.
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
- PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
- Platoesg. Fordon / elbilar, Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
- BlockOffsets. Modernisera miljökompensation ägande. Tillgång här.
- Källa: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- : har
- :är
- :var
- ][s
- $UPP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Om oss
- tillgång
- tillgänglig
- Konto
- Uppnå
- Handling
- aktivt
- lägga till
- lagt till
- tillsats
- Annat
- administration
- Efter
- Alla
- tillåter
- tillåts
- tillåter
- också
- amason
- Amazon QuickSight
- Amazon Web Services
- an
- analytics
- och
- Anonym
- anonymt
- svara
- vilken som helst
- api
- app
- Ansökan
- tillämpningar
- arkitektur
- ÄR
- Argumentet
- AS
- aspekter
- Tillgångar
- delad
- utgå ifrån
- At
- bifoga
- AUGUSTI
- Författaren
- undvika
- vänta
- AWS
- baserat
- grund
- BE
- därför att
- varit
- innan
- vägnar
- nedan
- kropp
- båda
- webbläsare
- SLUTRESULTAT
- Byggnad
- bygger
- företag
- business intelligence
- men
- by
- Ring
- Samtal
- KAN
- Kapacitet
- fall
- orsakas
- Centrum
- chans
- byta
- Förändringar
- Välja
- klient
- cloud
- koda
- färg
- kombination
- företag
- fullborda
- komplex
- komponent
- komponenter
- konfiguration
- Konsol
- konsumera
- konsumenter
- Behållare
- innehåller
- innehåll
- innehåll
- sammanhang
- skapa
- skapas
- Skapa
- CSS
- Aktuella
- För närvarande
- kund
- Kunder
- dagligen
- instrumentbräda
- instrumentpaneler
- datum
- Standard
- definierade
- fördröja
- demonstrera
- distribuera
- distributioner
- beskriven
- detaljer
- Utvecklare
- Utveckling
- olika
- Visa
- DOM
- domän
- domäner
- gjort
- inte
- dubbla
- varaktighet
- under
- e
- effekt
- elementet
- embed
- inbäddade
- inbäddning
- möjliggöra
- aktiverad
- ingriper
- ange
- enhet
- Miljö
- Motsvarande
- fel
- fel
- Eter (ETH)
- händelse
- händelser
- exempel
- exempel
- Utom
- undantag
- utförande
- befintliga
- förklarade
- utforska
- export
- känna
- Fil
- finansiella
- finansiella tjänster
- Förnamn
- följer
- efter
- För
- Fri
- ofta
- från
- fungera
- funktionella
- ytterligare
- nätbryggan
- generera
- ger
- Välgörenhet
- globala finansiella
- Go
- beviljande
- Grupp
- hade
- Har
- har
- headers
- höjd
- hjälper
- här
- hålla
- innehar
- krokar
- hovring
- Hur ser din drömresa ut
- How To
- http
- HTTPS
- i
- IAM
- ID
- idealisk
- Identitet
- ids
- if
- omedelbar
- genomföras
- importera
- in
- ingår
- individuellt
- informationen
- inledande
- initiering
- innovativa
- installera
- integrering
- Intelligens
- interagerar
- in
- införa
- anropar
- involverade
- IT
- json
- bara
- Nyckel
- Brist
- Large
- storskalig
- senare
- Layout
- LÄRA SIG
- Nivå
- ligger
- Lista
- läser in
- lokal
- log
- se
- Huvudsida
- GÖR
- Framställning
- obligatoriskt
- Marginal
- Match
- Meny
- metod
- minuter
- Mode
- månad
- mer
- flytta
- multipel
- måste
- namn
- Navigera
- Navigering
- Behöver
- behov
- Nya
- Nästa
- normala
- nu
- objektet
- of
- Ofta
- on
- ONE
- Verksamhet
- Alternativet
- Tillbehör
- or
- Orange
- OS
- Övriga
- Övrigt
- annat
- vår
- Översikt
- paket
- sida
- panelen
- del
- brinner
- utföra
- behörigheter
- plocka
- platshållare
- plato
- Platon Data Intelligence
- PlatonData
- snälla du
- policy
- Portal
- Inlägg
- den mäktigaste
- förutsättningar
- förhindra
- prissättning
- process
- Produktion
- projektet
- tillhandahållande
- ombud
- allmän
- inköp
- Syftet
- RE
- Reagera
- Läsare
- läsare
- redo
- rekommenderas
- region
- avlägsnas
- renderar
- ersätta
- begära
- förfrågningar
- Obligatorisk
- resurs
- Resurser
- respons
- avkastning
- återgår
- Roll
- rot
- Körning
- rinnande
- Skala
- scenarier
- skärmdumpar
- sDK
- Andra
- sekunder
- §
- se
- vald
- Tjänster
- session
- sessioner
- in
- bosätta sig
- inställning
- Dela
- delning
- hon
- skall
- show
- visade
- visas
- Visar
- liknande
- Enkelt
- förenkla
- eftersom
- Small
- Mjukvara
- lösning
- Lösningar
- några
- Alldeles strax
- specifik
- specificerade
- Etapp
- starta
- Ange
- .
- Steg
- Steg
- ström
- sträng
- stil
- sådana
- säker
- skräddarsydd
- Målet
- Teknologi
- terminal
- testa
- Testning
- den där
- Smakämnen
- deras
- Dem
- sedan
- Där.
- därför
- detta
- tid
- till
- utlösa
- triggas
- sann
- betrodd
- prova
- SVÄNG
- två
- under
- Understrykning
- Uppdateringar
- URL
- användning
- Begagnade
- Användare
- användare
- användningar
- med hjälp av
- värde
- olika
- version
- utsikt
- Besök
- vill
- sätt
- we
- webb
- Webbutveckling
- webbservice
- webbsidor
- välkommen
- VÄL
- när
- närhelst
- som
- kommer
- med
- inom
- utan
- dig
- Din
- zephyrnet