Bruke innebygde analyser fra Amazon QuickSight kan forenkle prosessen med å utstyre applikasjonen din med funksjonelle visualiseringer uten noen kompleks utvikling. Det er flere måter å bygge inn QuickSight-dashboard i applikasjonen. I dette innlegget ser vi på hvordan det kan gjøres ved å bruke React og Amazon QuickSight Embedding SDK.
Dashboard-forbrukere har ofte ikke en bruker tilordnet AWS-kontoen sin og mangler derfor tilgang til dashbordet. For at de skal kunne konsumere data, må dashbordet være tilgjengelig for anonyme brukere. La oss se på trinnene som kreves for å gjøre det mulig for en uautentisert bruker å se QuickSight-dashbordet i React-applikasjonen.
Løsningsoversikt
Vår løsning bruker følgende nøkkeltjenester:
Etter å ha lastet nettsiden på nettleseren, ringer nettleseren API Gateway, som kaller opp en Lambda-funksjon som kaller QuickSight API for å generere en dashbord-URL for en anonym bruker. Lambda-funksjonen må påta seg en IAM-rolle med de nødvendige tillatelsene. Følgende diagram viser en oversikt over arkitekturen.
Forutsetninger
Du må ha følgende forutsetninger:
Konfigurer tillatelser for uautentiserte seere
På kontoen din oppretter du en IAM-policy som applikasjonen din vil anta på vegne av seeren:
- Velg på IAM-konsollen Policy i navigasjonsruten.
- Velg Opprett policy.
- På JSON skriv inn følgende policykode:
Sørg for å endre verdien på til verdien av dashbord-ID-en. Legg merke til denne ID-en for å bruke i et senere trinn også.
For det andre setningsobjektet med logger er tillatelser valgfritt. Den lar deg opprette en logggruppe med det angitte navnet, opprette en loggstrøm for den angitte logggruppen og laste opp en gruppe logghendelser til den angitte loggstrømmen.
I denne policyen tillater vi brukeren å utføre GenerateEmbedUrlForAnonymousUser
handling på dashbord-ID-en i listen over dashbord-ID-er satt inn i plassholderen.
- Skriv inn et navn for policyen din (f.eks.
AnonymousEmbedPolicy
) og velg Opprett policy.
Deretter oppretter vi en rolle og knytter denne policyen til rollen.
- Velg Roller i navigasjonsruten, og velg deretter Skape rolle.
- Velg Lambda for den pålitelige enheten.
- Søk etter og velg
AnonymousEmbedPolicy
, velg deretter neste. - Skriv inn et navn for rollen din, for eksempel
AnonymousEmbedRole
. - Sørg for at policynavnet er inkludert i Legg til tillatelser seksjon.
- Fullfør opprettelsen av rollen din.
Du har nettopp opprettet AnonymousEmbedRole
utførelsesrolle. Du kan nå gå til neste trinn.
Generer en anonym innebygd URL Lambda-funksjon
I dette trinnet lager vi en Lambda-funksjon som samhandler med QuickSight for å generere en innebygd URL for en anonym bruker. Vårt domene må tillates. Det er to måter å oppnå integrering av Amazon QuickSight på:
- Ved å legge til URL-en til listen over tillatte domener i Amazon QuickSight-administrasjonskonsollen (forklart senere i [Valgfritt] Legg til domenet ditt i QuickSight seksjon).
- [Anbefalt] Ved å legge til den innebygde URL-forespørselen under kjøretid i API-kallet. Alternativ 1 anbefales når du trenger å fortsette de tillatte domenene. Ellers vil domenene bli fjernet etter 30 minutter, noe som tilsvarer øktens varighet. For andre brukstilfeller anbefales det å bruke det andre alternativet (beskrevet og implementert nedenfor).
På Lambda-konsollen oppretter du en ny funksjon.
- Plukke ut Forfatter fra bunnen av.
- Til Funksjonsnavn, skriv inn et navn, for eksempel
AnonymousEmbedFunction
. - Til Runtime¸ velg Python 3.9.
- Til Utførelsesrolle¸ velg Bruk en eksisterende rolle.
- Velg rollen
AnonymousEmbedRole
. - Velg Opprett funksjon.
- På funksjonsdetaljsiden, naviger til Kode og skriv inn følgende kode:
Hvis du ikke bruker localhost, bytt ut http://localhost:3000
i returene med vertsnavnet til applikasjonen din. For å gå til produksjon, ikke glem å erstatte http://localhost:3000
med domenet ditt.
- På Konfigurasjon under fanen Generell konfigurasjon, velg Rediger.
- Øk tidsavbruddet fra 3 sekunder til 30 sekunder, og velg deretter Spar.
- Under Miljøvariabler, velg Rediger.
- Legg til følgende variabler:
- Legg til
DashboardIdList
og liste opp dashbord-ID-ene dine. - Legg til
DashboardRegion
og skriv inn regionen i dashbordet.
- Legg til
- Velg Spar.
Konfigurasjonen din skal ligne på følgende skjermbilde.
- På Kode kategorien, velg Distribuer å distribuere funksjonen.
Sett opp API Gateway for å starte Lambda-funksjonen
For å sette opp API Gateway for å starte funksjonen du opprettet, fullfør følgende trinn:
- På API Gateway-konsollen, naviger til REST API delen og velg Bygge.
- Under Opprett nytt API, plukke ut Ny API.
- Til API-navn, skriv inn et navn (for eksempel,
QuicksightAnonymousEmbed
). - Velg Opprett API.
- På handlinger meny, velg Opprett ressurs.
- Til Ressursnavn, skriv inn et navn (for eksempel,
anonymous-embed
).
La oss nå lage en metode.
- Velg
anonymous-embed
ressurs og på handlinger meny, velg Lag metode. - Velg GET under ressursnavnet.
- Til Integrasjonstype, plukke ut Lambda.
- Plukke ut Bruk Lambda Proxy-integrasjon.
- Til Lambda funksjon, skriv inn navnet på funksjonen du opprettet.
- Velg Spar, velg deretter OK.
Nå er vi klare til å distribuere API.
- På handlinger meny, velg Distribuere API.
- Til Utplasseringsstadiet, plukke ut Nytt stadium.
- Skriv inn et navn for scenen din, for eksempel
embed
. - Velg Distribuer.
[Valgfritt] Legg til domenet ditt i QuickSight
Hvis du la til tillatte domener i Generer en anonym innebygd URL Lambda-funksjon del, flytt gjerne til Slå på kapasitetspriser seksjon.
For å legge til domenet ditt til de tillatte domenene i QuickSight, fullfør følgende trinn:
- Velg brukermenyen på QuickSight-konsollen, og velg deretter Administrer QuickSight.
- Velg Domener og innebygging i navigasjonsruten.
- Til Domene, skriv inn domenet ditt (
http://localhost:
).
Sørg for å bytte ut for å matche ditt lokale oppsett.
- Velg Legg til.
Sørg for å erstatte localhost-domenet med det du vil bruke etter testing.
Slå på kapasitetspriser
Hvis du ikke har aktivert prissetting av øktkapasitet, følger du trinnene i denne delen. Det er obligatorisk å ha denne funksjonen aktivert for å fortsette videre.
Kapasitetsprising lar QuickSight-kunder kjøpe leserøkter i bulk uten å måtte levere individuelle lesere i QuickSight. Kapasitetspriser er ideell for innebygde applikasjoner eller storskala Business Intelligence (BI)-implementeringer. For mer informasjon, besøk Amazon QuickSight-priser.
For å slå på kapasitetspriser, fullfør følgende trinn:
- På Administrer QuickSight side, velg Abonnementene dine i navigasjonsruten.
- på Kapasitetsprising seksjon, velg Få månedlig abonnement.
- Velg Bekreft abonnement.
For å lære mer om kapasitetspriser, se Nytt i Amazon QuickSight – sesjonskapasitetspriser for storskala distribusjoner, innebygging i offentlige nettsteder og utviklerportal for innebygd analyse.
Sett opp React-applikasjonen din
For å sette opp React-applikasjonen din, fullfør følgende trinn:
- Gå til rotkatalogen din i React-prosjektmappen og kjør
npm i amazon-quicksight-embedding-sdk
for å installere amazon-quicksight-embedding-sdk-pakken. - I din
App.js
fil, erstatt følgende:- Erstatt
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
med API Gateway-anrops-URLen og ressursnavnet ditt (f.eks.https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Erstatt
YOUR_DASHBOARD1_ID
med den første dashboard-IDen fra dinDashboardIdList
. Dette er dashbordet som vises på den første gjengivelsen. - Erstatt
YOUR_DASHBOARD2_ID
med den andre dashboard-IDen fra dinDashboardIdList
.
- Erstatt
Følgende kodebit viser et eksempel på App.js
fil i ditt React-prosjekt. Koden er en React-komponent som bygger inn et QuickSight-dashbord basert på valgt dashbord-ID. Koden inneholder følgende nøkkelkomponenter:
- Statlige kroker – To tilstandskroker er definert ved hjelp av
useState()
krok fra React:- dashbord – Holder den valgte dashboard-ID-en.
- quickSightEmbedding – Holder QuickSight-innbyggingsobjektet som returneres av
embedDashboard()
funksjon.
- Ref krok – En ref-krok defineres ved å bruke
useRef()
krok fra React. Den brukes til å holde en referanse til DOM-elementet der QuickSight-dashbordet vil bli innebygd. - useEffect() krok – UseEffect()-kroken brukes til å utløse innebyggingen av QuickSight-dashbordet når den valgte dashboard-ID-en endres. Den henter først dashbord-URLen for den valgte IDen fra QuickSight API ved hjelp av fetch()-metoden. Etter at den har hentet URL-en, kaller den embed()-funksjonen med URL-en som argument.
- Bytt behandler - Det
changeDashboard()
funksjonen er en enkel hendelsesbehandler som oppdaterer dashbordstatusen hver gang brukeren velger et annet dashbord fra rullegardinmenyen. Så snart ny dashbord-ID er angitt, utløses useEffect-kroken. - 10 millisekunders timeout – Hensikten med å bruke tidsavbruddet er å innføre en liten forsinkelse på 10 millisekunder før du foretar API-kallet. Denne forsinkelsen kan være nyttig i scenarier der du ønsker å unngå umiddelbare API-kall eller forhindre overdrevne forespørsler når komponenten gjengir ofte. Tidsavbruddet gir komponenten litt tid til å løse seg før API-forespørselen startes. Fordi vi bygger applikasjonen i utviklingsmodus, hjelper tidsavbruddet å unngå feil forårsaket av dobbeltkjøring av
useEffect
innenforStrictMode
. For mer informasjon, se Oppdateringer til streng modus.
Se følgende kode:
Deretter erstatter du innholdet i din App.css
fil, som brukes til å style og layoute nettsiden din, med innholdet fra følgende kodebit:
Nå er det på tide å teste appen din. Start applikasjonen ved å kjøre npm start
i terminalen din. Følgende skjermbilder viser eksempler på appen din, samt dashbordene den kan vise.
konklusjonen
I dette innlegget viste vi deg hvordan du bygger inn et QuickSight-dashbord i en React-applikasjon ved å bruke AWS SDK. Ved å dele dashbordet med anonyme brukere får de tilgang til dashbordet uten å gi dem tilgang til AWS-kontoen din. Det finnes også andre måter å dele dashbordet anonymt på, for eksempel å bruke 1-klikk offentlig innebygging.
Bli med Quicksight-fellesskap å spørre, svare og lære sammen med andre og utforske ytterligere ressurser.
om forfatteren
Adrianna er løsningsarkitekt hos AWS Global Financial Services. Etter å ha vært en del av Amazon siden august 2018, har hun hatt sjansen til å være involvert både i driften og skyvirksomheten til selskapet. For tiden bygger hun programvareressurser som demonstrerer innovativ bruk av AWS-tjenester, skreddersydd for en spesifikk kundebrukssituasjon. Til daglig engasjerer hun seg aktivt i ulike aspekter av teknologi, men hennes sanne lidenskap ligger i kombinasjon av nettutvikling og analyse.
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
- PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
- PlatoESG. Bil / elbiler, Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
- BlockOffsets. Modernisering av eierskap for miljøkompensasjon. Tilgang 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
- $OPP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Om oss
- adgang
- tilgjengelig
- Logg inn
- Oppnå
- Handling
- aktivt
- legge til
- la til
- legge
- Ytterligere
- admin
- Etter
- Alle
- tillate
- tillatt
- tillater
- også
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- analytics
- og
- Anonym
- anonymt
- besvare
- noen
- api
- app
- Søknad
- søknader
- arkitektur
- ER
- argument
- AS
- aspekter
- Eiendeler
- tildelt
- anta
- At
- feste
- August
- forfatter
- unngå
- avvente
- AWS
- basert
- basis
- BE
- fordi
- vært
- før du
- vegne
- under
- kroppen
- både
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- bygge
- Bygning
- bygger
- virksomhet
- business intelligence
- men
- by
- ring
- Samtaler
- CAN
- Kapasitet
- saker
- forårsaket
- sentrum
- sjanse
- endring
- Endringer
- Velg
- kunde
- Cloud
- kode
- farge
- kombinasjon
- Selskapet
- fullføre
- komplekse
- komponent
- komponenter
- Konfigurasjon
- Konsoll
- forbruke
- Forbrukere
- Container
- inneholder
- innhold
- innhold
- kontekst
- skape
- opprettet
- Opprette
- CSS
- Gjeldende
- I dag
- kunde
- Kunder
- daglig
- dashbord
- oversikter
- dato
- Misligholde
- definert
- forsinkelse
- demonstrere
- utplassere
- distribusjoner
- beskrevet
- detaljer
- Utvikler
- Utvikling
- forskjellig
- Vise
- DOM
- domene
- domener
- gjort
- ikke
- dobbelt
- varighet
- under
- e
- effekt
- element
- embed
- innebygd
- embedding
- muliggjøre
- aktivert
- engasjerer
- Enter
- enhet
- Miljø
- Tilsvarende
- feil
- feil
- Eter (ETH)
- Event
- hendelser
- eksempel
- eksempler
- Unntatt
- unntak
- gjennomføring
- eksisterende
- forklarte
- utforske
- eksportere
- føler
- filet
- finansiell
- finansielle tjenester
- Først
- følge
- etter
- Til
- Gratis
- ofte
- fra
- funksjon
- funksjonelle
- videre
- gateway
- generere
- gir
- Global
- global finansiell
- Go
- innvilgelse
- Gruppe
- HAD
- Ha
- å ha
- overskrifter
- høyde
- hjelper
- her
- hold
- holder
- kroker
- hover
- Hvordan
- Hvordan
- http
- HTTPS
- i
- IAM
- ID
- ideell
- Identitet
- ids
- if
- umiddelbar
- implementert
- importere
- in
- inkludert
- individuelt
- informasjon
- innledende
- initiere
- innovative
- installere
- integrering
- Intelligens
- interaktiv
- inn
- introdusere
- påkaller
- involvert
- IT
- JSON
- bare
- nøkkel
- maling
- stor
- storskala
- seinere
- Layout
- LÆRE
- Nivå
- ligger
- Liste
- lasting
- lokal
- logg
- Se
- Hoved
- GJØR AT
- Making
- obligatorisk
- Margin
- Match
- Meny
- metode
- minutter
- Mote
- månedlig
- mer
- flytte
- flere
- må
- navn
- Naviger
- Navigasjon
- Trenger
- behov
- Ny
- neste
- normal
- nå
- objekt
- of
- ofte
- on
- ONE
- Drift
- Alternativ
- alternativer
- or
- oransje
- OS
- Annen
- andre
- ellers
- vår
- oversikt
- pakke
- side
- brød
- del
- lidenskap
- utføre
- tillatelser
- plukke
- placeholder
- plato
- Platon Data Intelligence
- PlatonData
- vær så snill
- politikk
- Portal
- Post
- kraftig
- forutsetninger
- forebygge
- prising
- prosess
- Produksjon
- prosjekt
- forsyning
- proxy
- offentlig
- Kjøp
- formål
- RE
- Reager
- Reader
- lesere
- klar
- anbefales
- region
- fjernet
- gjengir
- erstatte
- anmode
- forespørsler
- påkrevd
- ressurs
- Ressurser
- svar
- retur
- avkastning
- Rolle
- root
- Kjør
- rennende
- Skala
- scenarier
- skjermbilder
- SDK
- Sekund
- sekunder
- Seksjon
- se
- valgt
- Tjenester
- Session
- sesjoner
- sett
- bosette
- oppsett
- Del
- deling
- hun
- bør
- Vis
- viste
- vist
- Viser
- lignende
- Enkelt
- forenkle
- siden
- liten
- Software
- løsning
- Solutions
- noen
- Snart
- spesifikk
- spesifisert
- Scene
- Begynn
- Tilstand
- Uttalelse
- Trinn
- Steps
- stream
- streng
- stil
- slik
- sikker
- skreddersydd
- Target
- Teknologi
- terminal
- test
- Testing
- Det
- De
- deres
- Dem
- deretter
- Der.
- derfor
- denne
- tid
- til
- utløse
- utløst
- sant
- klarert
- prøve
- SVING
- to
- etter
- understreke
- oppdateringer
- URL
- bruke
- brukt
- Bruker
- Brukere
- bruker
- ved hjelp av
- verdi
- ulike
- versjon
- Se
- Besøk
- ønsker
- måter
- we
- web
- Webutvikling
- webtjenester
- nettsteder
- velkommen
- VI VIL
- når
- når som helst
- hvilken
- vil
- med
- innenfor
- uten
- du
- Din
- zephyrnet