Brug af indlejrede analyser fra Amazon QuickSight kan forenkle processen med at udstyre din applikation med funktionelle visualiseringer uden nogen kompleks udvikling. Der er flere måder at integrere QuickSight-dashboards på i applikationen. I dette indlæg ser vi på, hvordan det kan gøres ved hjælp af React og Amazon QuickSight Embedding SDK.
Dashboard-forbrugere har ofte ikke en bruger tilknyttet deres AWS-konto og mangler derfor adgang til dashboardet. For at sætte dem i stand til at forbruge data, skal dashboardet være tilgængeligt for anonyme brugere. Lad os se på de nødvendige trin for at gøre det muligt for en uautoriseret bruger at se dit QuickSight-dashboard i din React-applikation.
Løsningsoversigt
Vores løsning bruger følgende nøgletjenester:
Efter at have indlæst websiden på browseren, foretager browseren et opkald til API Gateway, som kalder en Lambda-funktion, der kalder QuickSight API'et for at generere en dashboard-URL for en anonym bruger. Lambda-funktionen skal påtage sig en IAM-rolle med de nødvendige tilladelser. Følgende diagram viser en oversigt over arkitekturen.
Forudsætninger
Du skal have følgende forudsætninger:
Konfigurer tilladelser for ikke-godkendte seere
På din konto skal du oprette en IAM-politik, som din ansøgning vil påtage sig på vegne af seeren:
- På IAM-konsollen skal du vælge Betingelser i navigationsruden.
- Vælg Lav politik.
- På JSON fanen, skal du indtaste følgende politikkode:
Sørg for at ændre værdien af til værdien af dashboard-id'et. Bemærk dette ID til brug i et senere trin.
For det andet sætningsobjekt med logfiler er tilladelser valgfri. Det giver dig mulighed for at oprette en loggruppe med det angivne navn, oprette en logstrøm for den angivne loggruppe og uploade en batch af loghændelser til den angivne logstrøm.
I denne politik tillader vi brugeren at udføre GenerateEmbedUrlForAnonymousUser
handling på dashboard-id'et på listen over dashboard-id'er, der er indsat i pladsholderen.
- Indtast et navn til din politik (f.eks.
AnonymousEmbedPolicy
) og vælg Lav politik.
Dernæst opretter vi en rolle og knytter denne politik til rollen.
- Vælg roller i navigationsruden, og vælg derefter Opret rolle.
- Vælg Lambda for den betroede enhed.
- Søg efter og vælg
AnonymousEmbedPolicy
, Og vælg derefter Næste. - Indtast et navn til din rolle, som f.eks
AnonymousEmbedRole
. - Sørg for, at politiknavnet er inkluderet i Tilføj tilladelser sektion.
- Afslut oprettelsen af din rolle.
Du har lige oprettet AnonymousEmbedRole
udfører rolle. Du kan nu gå videre til næste trin.
Generer en anonym integreret URL Lambda-funktion
I dette trin opretter vi en Lambda-funktion, der interagerer med QuickSight for at generere en indlejret URL til en anonym bruger. Vores domæne skal have lov. Der er to måder at opnå integration af Amazon QuickSight på:
- Ved at tilføje URL'en til listen over tilladte domæner i Amazon QuickSight-administrationskonsollen (forklaret senere i [Valgfrit] Tilføj dit domæne i QuickSight afsnit).
- [Anbefales] Ved at tilføje den indlejrede URL-anmodning under kørsel i API-kaldet. Mulighed 1 anbefales, når du skal bevare de tilladte domæner. Ellers vil domænerne blive fjernet efter 30 minutter, hvilket svarer til sessionsvarigheden. Til andre brugssager anbefales det at bruge den anden mulighed (beskrevet og implementeret nedenfor).
Opret en ny funktion på Lambda-konsollen.
- Type Forfatter fra bunden.
- Til Funktionsnavn, indtast et navn, som f.eks
AnonymousEmbedFunction
. - Til Runtime¸ vælg Python 3.9.
- Til Udførelsesrolle¸ vælg Brug en eksisterende rolle.
- Vælg rollen
AnonymousEmbedRole
. - Vælg Opret funktion.
- På siden med funktionsdetaljer skal du navigere til Kode fanen og indtast følgende kode:
Hvis du ikke bruger localhost, udskift http://localhost:3000
i returneringerne med værtsnavnet på din applikation. For at flytte til produktion, glem ikke at erstatte http://localhost:3000
med dit domæne.
- På Konfiguration fane, under Generel konfiguration, vælg Redigere.
- Forøg timeoutet fra 3 sekunder til 30 sekunder, og vælg derefter Gem.
- Under Miljøvariabler, vælg Redigere.
- Tilføj følgende variable:
- Tilføj
DashboardIdList
og angiv dine dashboard-id'er. - Tilføj
DashboardRegion
og indtast regionen på dit dashboard.
- Tilføj
- Vælg Gem.
Din konfiguration skal ligne følgende skærmbillede.
- På Kode fanebladet, vælg Implementer at implementere funktionen.
Konfigurer API Gateway for at aktivere Lambda-funktionen
For at konfigurere API Gateway til at starte den funktion, du har oprettet, skal du udføre følgende trin:
- På API Gateway-konsollen skal du navigere til REST-API sektion og vælg Byg.
- Under Opret ny API, Vælg Ny API.
- Til API-navn, indtast et navn (f.eks.
QuicksightAnonymousEmbed
). - Vælg Opret API.
- På handlinger menu, vælg Opret ressource.
- Til Ressource navn, indtast et navn (f.eks.
anonymous-embed
).
Lad os nu skabe en metode.
- Vælg den
anonymous-embed
ressource og på handlinger menu, vælg Opret metode. - Vælg GET under ressourcenavnet.
- Til Integrationstype, Vælg Lambda.
- Type Brug Lambda Proxy Integration.
- Til Lambda funktion, indtast navnet på den funktion, du har oprettet.
- Vælg Gem, Og vælg derefter OK.
Nu er vi klar til at implementere API'en.
- På handlinger menu, vælg Implementer API.
- Til Implementeringsstadiet, Vælg Ny scene.
- Indtast et navn til din scene, som f.eks
embed
. - Vælg Implementer.
[Valgfrit] Tilføj dit domæne i QuickSight
Hvis du tilføjede Tilladte domæner i Generer en anonym integreret URL Lambda-funktion del, flyt gerne til Slå kapacitetspriser til sektion.
For at tilføje dit domæne til de tilladte domæner i QuickSight skal du udføre følgende trin:
- På QuickSight-konsollen skal du vælge brugermenuen og derefter vælge Administrer QuickSight.
- Vælg Domæner og indlejring i navigationsruden.
- Til Domæne, indtast dit domæne (
http://localhost:
).
Sørg for at udskifte for at matche din lokale opsætning.
- Vælg Tilføj.
Sørg for at erstatte localhost-domænet med det, du vil bruge efter test.
Slå kapacitetspriser til
Hvis du ikke har aktiveret prissætning for sessionskapacitet, skal du følge trinene i dette afsnit. Det er obligatorisk at have denne funktion aktiveret for at komme videre.
Kapacitetspriser giver QuickSight-kunder mulighed for at købe læsersessioner i bulk uden at skulle levere individuelle læsere i QuickSight. Kapacitetsprissætning er ideel til indlejrede applikationer eller storstilede Business Intelligence (BI)-implementeringer. For mere information, besøg Amazon QuickSight-priser.
For at aktivere kapacitetspriser skal du udføre følgende trin:
- På Administrer QuickSight side, vælg Dine abonnementer i navigationsruden.
- I Kapacitetspriser sektion, vælg Få månedligt abonnement.
- Vælg Bekræft abonnement.
For at lære mere om kapacitetspriser, se Nyt i Amazon QuickSight – prissætning af sessionskapacitet for storskala-implementeringer, indlejring på offentlige websteder og udviklerportal til indlejret analyse.
Konfigurer din React-applikation
For at konfigurere din React-applikation skal du udføre følgende trin:
- Gå til din rodmappe i din React-projektmappe og kør
npm i amazon-quicksight-embedding-sdk
for at installere pakken amazon-quicksight-embedding-sdk. - I din
App.js
fil, skal du erstatte følgende:- udskifte
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
med din API Gateway kalder URL og dit ressourcenavn (f.eks.https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - udskifte
YOUR_DASHBOARD1_ID
med det første dashboardId fra dinDashboardIdList
. Dette er dashboardet, der vises på den første gengivelse. - udskifte
YOUR_DASHBOARD2_ID
med det andet dashboardId fra dinDashboardIdList
.
- udskifte
Følgende kodestykke viser et eksempel på App.js
fil i dit React-projekt. Koden er en React-komponent, der integrerer et QuickSight-dashboard baseret på det valgte dashboard-id. Koden indeholder følgende nøglekomponenter:
- Statskroge – To tilstandskroge defineres ved hjælp af
useState()
krog fra React:- instrumentbræt – Indeholder det aktuelt valgte dashboard-id.
- quickSightEmbedding – Indeholder QuickSight-indlejringsobjektet, der returneres af
embedDashboard()
funktion.
- Ref krog – En ref hook defineres ved hjælp af
useRef()
krog fra React. Det bruges til at holde en reference til DOM-elementet, hvor QuickSight-dashboardet vil blive indlejret. - useEffect() hook – UseEffect()-krogen bruges til at udløse indlejring af QuickSight-dashboardet, når det valgte dashboard-id ændres. Den henter først dashboard-URL'en for det valgte ID fra QuickSight API'et ved hjælp af fetch()-metoden. Når den har hentet URL'en, kalder den funktionen embed() med URL'en som argument.
- Skift handler - Den
changeDashboard()
funktion er en simpel hændelseshandler, der opdaterer dashboard-tilstanden, hver gang brugeren vælger et andet dashboard fra rullemenuen. Så snart et nyt dashboard-id er indstillet, udløses useEffect-hook. - 10 millisekunders timeout – Formålet med at bruge timeout er at indføre en lille forsinkelse på 10 millisekunder, før API-kaldet foretages. Denne forsinkelse kan være nyttig i scenarier, hvor du vil undgå øjeblikkelige API-kald eller forhindre overdrevne anmodninger, når komponenten gengiver ofte. Timeoutet giver komponenten lidt tid til at afvikle, før API-anmodningen startes. Fordi vi bygger applikationen i udviklingstilstand, hjælper timeout med at undgå fejl forårsaget af dobbeltkørsel af
useEffect
inden forStrictMode
. For mere information, se Opdateringer til streng tilstand.
Se følgende kode:
Udskift derefter indholdet af din App.css
fil, som bruges til at style og layoute din webside med indholdet fra følgende kodestykke:
Nu er det tid til at teste din app. Start din applikation ved at køre npm start
i din terminal. Følgende skærmbilleder viser eksempler på din app samt de dashboards, den kan vise.
Konklusion
I dette indlæg viste vi dig, hvordan du indlejrer et QuickSight-dashboard i en React-applikation ved hjælp af AWS SDK. Deling af dit dashboard med anonyme brugere giver dem adgang til dit dashboard uden at give dem adgang til din AWS-konto. Der er også andre måder at dele dit dashboard anonymt på, såsom at bruge 1-klik offentlig indlejring.
Deltag i Quicksight-fællesskab at spørge, svare og lære sammen med andre og udforske yderligere ressourcer.
Om forfatteren
Adrianna er Solutions Architect hos AWS Global Financial Services. Efter at have været en del af Amazon siden august 2018, har hun haft chancen for at være involveret i både driften og cloud-virksomheden i virksomheden. I øjeblikket bygger hun softwareaktiver, som demonstrerer innovativ brug af AWS-tjenester, skræddersyet til en specifik kundebrugssituation. Til daglig beskæftiger hun sig aktivt med forskellige aspekter af teknologi, men hendes sande passion ligger i kombination af webudvikling og analyse.
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
- PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
- PlatoESG. Automotive/elbiler, Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
- BlockOffsets. Modernisering af miljømæssig offset-ejerskab. Adgang her.
- Kilde: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :har
- :er
- :hvor
- ][s
- $OP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Om
- adgang
- tilgængelig
- Konto
- opnå
- Handling
- aktivt
- tilføje
- tilføjet
- tilføje
- Yderligere
- admin
- Efter
- Alle
- tillade
- tilladt
- tillader
- også
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- analytics
- ,
- anonym
- anonymt
- besvare
- enhver
- api
- app
- Anvendelse
- applikationer
- arkitektur
- ER
- argument
- AS
- aspekter
- Aktiver
- tildelt
- antage
- At
- vedhæfte
- AUGUST
- forfatter
- undgå
- vente
- AWS
- baseret
- grundlag
- BE
- fordi
- været
- før
- vegne
- jf. nedenstående
- krop
- både
- browser
- bygge
- Bygning
- bygger
- virksomhed
- business intelligence
- men
- by
- ringe
- Opkald
- CAN
- Kapacitet
- tilfælde
- forårsagede
- center
- chance
- lave om
- Ændringer
- Vælg
- kunde
- Cloud
- kode
- farve
- kombination
- selskab
- fuldføre
- komplekse
- komponent
- komponenter
- Konfiguration
- Konsol
- forbruge
- Forbrugere
- Container
- indeholder
- indhold
- indhold
- sammenhæng
- skabe
- oprettet
- Oprettelse af
- CSS
- Nuværende
- For øjeblikket
- kunde
- Kunder
- dagligt
- instrumentbræt
- dashboards
- data
- Standard
- definerede
- forsinkelse
- demonstrere
- indsætte
- implementeringer
- beskrevet
- detaljer
- Udvikler
- Udvikling
- forskellige
- Skærm
- DOM
- domæne
- Domæner
- færdig
- Dont
- fordoble
- varighed
- i løbet af
- e
- effekt
- element
- Integrer
- indlejret
- indlejring
- muliggøre
- aktiveret
- indgreb
- Indtast
- enhed
- Miljø
- Ækvivalent
- fejl
- fejl
- Ether (ETH)
- begivenhed
- begivenheder
- eksempel
- eksempler
- Undtagen
- undtagelse
- udførelse
- eksisterende
- forklarede
- udforske
- eksport
- føler sig
- File (Felt)
- finansielle
- finansielle tjenesteydelser
- Fornavn
- følger
- efter
- Til
- Gratis
- hyppigt
- fra
- funktion
- funktionel
- yderligere
- gateway
- generere
- giver
- Global
- globale finansielle
- Go
- tildeling
- gruppe
- havde
- Have
- have
- headers
- højde
- hjælper
- hende
- hold
- besidder
- Kroge
- hover
- Hvordan
- How To
- http
- HTTPS
- i
- IAM
- ID
- ideal
- Identity
- id'er
- if
- umiddelbar
- implementeret
- importere
- in
- medtaget
- individuel
- oplysninger
- initial
- initiere
- innovativ
- installere
- integration
- Intelligens
- interagerer
- ind
- indføre
- påberåber sig
- involverede
- IT
- json
- lige
- Nøgle
- Mangel
- stor
- storstilet
- senere
- Layout
- LÆR
- Niveau
- ligger
- Liste
- lastning
- lokale
- log
- Se
- Main
- maerker
- Making
- obligatorisk
- Margin
- Match
- Menu
- metode
- minutter
- tilstand
- månedligt
- mere
- bevæge sig
- flere
- skal
- navn
- Naviger
- Navigation
- Behov
- behov
- Ny
- næste
- normal
- nu
- objekt
- of
- tit
- on
- ONE
- Produktion
- Option
- Indstillinger
- or
- Orange
- OS
- Andet
- Andre
- Ellers
- vores
- oversigt
- pakke
- side
- brød
- del
- lidenskab
- udføre
- Tilladelser
- pick
- pladsholder
- plato
- Platon Data Intelligence
- PlatoData
- Vær venlig
- politik
- Portal
- Indlæg
- vigtigste
- forudsætninger
- forhindre
- prissætning
- behandle
- produktion
- projekt
- bestemmelse
- proxy
- offentlige
- køb
- formål
- RE
- Reagerer
- Læser
- læsere
- klar
- anbefales
- region
- fjernet
- gør
- erstatte
- anmode
- anmodninger
- påkrævet
- ressource
- Ressourcer
- svar
- afkast
- afkast
- roller
- rod
- Kør
- kører
- Scale
- scenarier
- screenshots
- SDK
- Anden
- sekunder
- Sektion
- se
- valgt
- Tjenester
- Session
- sessioner
- sæt
- bilægge
- setup
- Del
- deling
- hun
- bør
- Vis
- viste
- vist
- Shows
- lignende
- Simpelt
- forenkle
- siden
- lille
- Software
- løsninger
- Løsninger
- nogle
- Snart
- specifikke
- specificeret
- Stage
- starte
- Tilstand
- Statement
- Trin
- Steps
- strøm
- streng
- stil
- sådan
- sikker
- skræddersyet
- mål
- Teknologier
- terminal
- prøve
- Test
- at
- deres
- Them
- derefter
- Der.
- derfor
- denne
- tid
- til
- udløse
- udløst
- sand
- betroet
- prøv
- TUR
- to
- under
- understrege
- opdateringer
- URL
- brug
- anvendte
- Bruger
- brugere
- bruger
- ved brug af
- værdi
- forskellige
- udgave
- Specifikation
- Besøg
- ønsker
- måder
- we
- web
- Web udvikling
- webservices
- websites
- velkommen
- GODT
- hvornår
- når
- som
- vilje
- med
- inden for
- uden
- dig
- Din
- zephyrnet