Uporaba vdelane analitike iz Amazon QuickSight lahko poenostavi postopek opremljanja vaše aplikacije s funkcionalnimi vizualizacijami brez zapletenega razvoja. Obstaja več načinov za vdelavo nadzornih plošč QuickSight v aplikacijo. V tej objavi si ogledamo, kako je to mogoče storiti z uporabo React in Amazon QuickSight Embedding SDK.
Uporabniki nadzorne plošče pogosto nimajo dodeljenega uporabnika svojemu računu AWS in zato nimajo dostopa do nadzorne plošče. Da bi jim omogočili porabo podatkov, mora biti nadzorna plošča dostopna anonimnim uporabnikom. Oglejmo si korake, potrebne za omogočanje nepreverjenemu uporabniku ogleda vaše nadzorne plošče QuickSight v vaši aplikaciji React.
Pregled rešitev
Naša rešitev uporablja naslednje ključne storitve:
Ko naloži spletno stran v brskalnik, brskalnik pokliče API Gateway, ki prikliče funkcijo Lambda, ki pokliče QuickSight API, da ustvari URL nadzorne plošče za anonimnega uporabnika. Funkcija Lambda mora prevzeti vlogo IAM z zahtevanimi dovoljenji. Naslednji diagram prikazuje pregled arhitekture.
Predpogoji
Imeti morate naslednje predpogoje:
Nastavite dovoljenja za nepreverjene gledalce
V svojem računu ustvarite pravilnik IAM, ki ga bo vaša aplikacija prevzela v imenu gledalca:
- Na konzoli IAM izberite Pravilniki v podoknu za krmarjenje.
- Izberite Ustvari pravilnik.
- o JSON vnesite to kodo pravilnika:
Ne pozabite spremeniti vrednosti na vrednost ID-ja nadzorne plošče. Zabeležite si ta ID, da ga uporabite tudi v kasnejšem koraku.
Za drugi predmet stavka z dnevniki so dovoljenja opcijsko. Omogoča vam, da ustvarite skupino dnevnikov s podanim imenom, ustvarite tok dnevnikov za podano skupino dnevnikov in naložite paket dogodkov dnevnikov v navedeni tok dnevnikov.
V tem pravilniku uporabniku dovolimo izvajanje GenerateEmbedUrlForAnonymousUser
dejanje na ID-ju nadzorne plošče znotraj seznama ID-jev nadzorne plošče, vstavljenih v ogrado.
- Vnesite ime za svoj pravilnik (npr.
AnonymousEmbedPolicy
) in izberite Ustvari pravilnik.
Nato ustvarimo vlogo in ji pripnemo ta pravilnik.
- Izberite vloge v podoknu za krmarjenje in nato izberite Ustvari vlogo.
- Izberite Lambda za zaupanja vreden subjekt.
- Poiščite in izberite
AnonymousEmbedPolicy
, nato izberite Naslednji. - Vnesite ime za svojo vlogo, npr
AnonymousEmbedRole
. - Prepričajte se, da je ime pravilnika vključeno v Dodajte dovoljenja oddelek.
- Dokončajte ustvarjanje svoje vloge.
Pravkar ste ustvarili AnonymousEmbedRole
izvršitvena vloga. Zdaj se lahko premaknete na naslednji korak.
Ustvarite anonimno funkcijo Lambda za vdelani URL
V tem koraku ustvarimo funkcijo Lambda, ki v interakciji s QuickSightom ustvari URL za vdelavo za anonimnega uporabnika. Našo domeno je treba dovoliti. Integracijo Amazon QuickSight lahko dosežete na dva načina:
- Z dodajanjem URL-ja na seznam dovoljenih domen v skrbniški konzoli Amazon QuickSight (razloženo kasneje v [Izbirno] Dodajte svojo domeno v QuickSight odsek).
- [Priporočeno] Z dodajanjem zahteve URL za vdelavo med izvajanjem v klic API-ja. Možnost 1 je priporočljiva, ko morate ohraniti dovoljene domene. V nasprotnem primeru bodo domene odstranjene po 30 minutah, kar je enako trajanju seje. Za druge primere uporabe je priporočljiva uporaba druge možnosti (opisana in implementirana spodaj).
Na konzoli Lambda ustvarite novo funkcijo.
- Izberite Avtor iz nič.
- za Ime funkcije, vnesite ime, na primer
AnonymousEmbedFunction
. - za Čas izvajanja¸ izberite Python 3.9.
- za Izvršilna vloga¸ izberite Uporabite obstoječo vlogo.
- Izberite vlogo
AnonymousEmbedRole
. - Izberite Ustvari funkcijo.
- Na strani s podrobnostmi o funkciji se pomaknite do Koda in vnesite to kodo:
Če ne uporabljate localhost, zamenjajte http://localhost:3000
v vrnitvah z imenom gostitelja vaše aplikacije. Če želite preiti na proizvodnjo, ne pozabite zamenjati http://localhost:3000
z vašo domeno.
- o konfiguracija zavihek, pod Splošna konfiguracija, izberite Uredi.
- Podaljšajte časovno omejitev s 3 sekund na 30 sekund in nato izberite Shrani.
- Pod Spremenljivke okolja, izberite Uredi.
- Dodajte naslednje spremenljivke:
- Dodaj
DashboardIdList
in navedite svoje ID-je nadzorne plošče. - Dodaj
DashboardRegion
in vnesite regijo na nadzorni plošči.
- Dodaj
- Izberite Shrani.
Vaša konfiguracija bi morala biti podobna naslednjemu posnetku zaslona.
- o Koda izberite jeziček uvajanje za uvedbo funkcije.
Nastavite prehod API za priklic funkcije Lambda
Če želite nastaviti API Gateway za priklic funkcije, ki ste jo ustvarili, dokončajte naslednje korake:
- Na konzoli API Gateway se pomaknite do REST API razdelek in izberite Zgradite.
- Pod Ustvari nov APItako, da izberete Nov API.
- za API ime, vnesite ime (npr.
QuicksightAnonymousEmbed
). - Izberite Ustvari API.
- o Proces izberite meni Ustvari vir.
- za Ime virov, vnesite ime (npr.
anonymous-embed
).
Sedaj pa ustvarimo metodo.
- Izberite
anonymous-embed
vir in na Proces izberite meni Ustvari metodo. - Izberite GET pod imenom vira.
- za Vrsta integracijetako, da izberete Lambda.
- Izberite Uporabite integracijo proxyja Lambda.
- za Lambda funkcija, vnesite ime funkcije, ki ste jo ustvarili.
- Izberite Shrani, nato izberite OK.
Zdaj smo pripravljeni na uvedbo API-ja.
- o Proces izberite meni Razmesti API.
- za Stopnja uvajanjatako, da izberete Nova etapa.
- Vnesite ime za vaš oder, npr
embed
. - Izberite uvajanje.
[Izbirno] Dodajte svojo domeno v QuickSight
Če ste dodali Dovoljene domene v Ustvarite anonimno funkcijo Lambda za vdelani URL del, se lahko premaknete Vklopite določanje cen zmogljivosti oddelek.
Če želite dodati svojo domeno med dovoljene domene v QuickSightu, izvedite naslednje korake:
- Na konzoli QuickSight izberite uporabniški meni in nato izberite Upravljajte QuickSight.
- Izberite Domene in vdelava v podoknu za krmarjenje.
- za Domena, vnesite svojo domeno (
http://localhost:
).
Poskrbite, da zamenjate da ustreza vaši lokalni nastavitvi.
- Izberite Dodaj.
Prepričajte se, da zamenjate domeno lokalnega gostitelja s tisto, ki jo boste uporabili po testiranju.
Vklopite določanje cen zmogljivosti
Če nimate omogočenega določanja cen zmogljivosti seje, sledite korakom v tem razdelku. Za nadaljnje nadaljevanje morate imeti to funkcijo omogočeno.
Določanje cen zmogljivosti strankam QuickSighta omogoča nakup sej bralnikov v velikem obsegu, ne da bi morali zagotoviti posamezne bralnike v QuickSightu. Cene zmogljivosti so idealne za vgrajene aplikacije ali obsežne uvedbe poslovne inteligence (BI). Za več informacij obiščite Cene Amazon QuickSight.
Če želite vklopiti določanje cen zmogljivosti, izvedite naslednje korake:
- o Upravljajte QuickSight stran, izberite Vaše naročnine v podoknu za krmarjenje.
- v Cene zmogljivosti izberite, izberite Pridobite mesečno naročnino.
- Izberite Potrdite naročnino.
Če želite izvedeti več o cenah zmogljivosti, glejte Novo v Amazon QuickSight – cene zmogljivosti seje za obsežne uvedbe, vdelavo v javna spletna mesta in portal za razvijalce za vdelano analitiko.
Nastavite svojo aplikacijo React
Za nastavitev aplikacije React izvedite naslednje korake:
- V mapi projekta React pojdite v korenski imenik in zaženite
npm i amazon-quicksight-embedding-sdk
za namestitev paketa amazon-quicksight-embedding-sdk. - V vašem
App.js
datoteko, zamenjajte naslednje:- Zamenjaj
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
s priklicnim URL-jem prehoda API in imenom vašega vira (na primerhttps://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Zamenjaj
YOUR_DASHBOARD1_ID
s prvim ID-jem nadzorne plošče iz vašegaDashboardIdList
. To je nadzorna plošča, ki bo prikazana na začetnem upodabljanju. - Zamenjaj
YOUR_DASHBOARD2_ID
z drugim ID-jem nadzorne plošče od vašegaDashboardIdList
.
- Zamenjaj
Naslednji delček kode prikazuje primer App.js
datoteko v vašem projektu React. Koda je komponenta React, ki vdela nadzorno ploščo QuickSight na podlagi ID-ja izbrane nadzorne plošče. Koda vsebuje naslednje ključne komponente:
- Državne kljuke – Dva kljuka stanja sta definirana z uporabo
useState()
kavelj iz React:- Armaturna plošča – Vsebuje trenutno izbran ID nadzorne plošče.
- quickSightEmbedding – Vsebuje vdelani predmet QuickSight, ki ga vrne
embedDashboard()
Funkcija.
- Ref kavelj – Referenčni kavelj je definiran z uporabo
useRef()
kavelj iz React. Uporablja se za shranjevanje sklica na element DOM, kamor bo vdelana nadzorna plošča QuickSight. - kavelj useEffect(). – Kavelj useEffect() se uporablja za sprožitev vdelave nadzorne plošče QuickSight vsakič, ko se spremeni ID izbrane nadzorne plošče. Najprej pridobi URL nadzorne plošče za izbrani ID iz QuickSight API z uporabo metode fetch(). Ko pridobi URL, pokliče funkcijo embed() z URL-jem kot argumentom.
- Spremeni obdelovalca -
changeDashboard()
Funkcija je preprost program za obravnavo dogodkov, ki posodobi stanje nadzorne plošče vsakič, ko uporabnik iz spustnega menija izbere drugo nadzorno ploščo. Takoj ko je nastavljen nov ID nadzorne plošče, se sproži kljuka useEffect. - 10-milisekundna časovna omejitev – Namen uporabe časovne omejitve je uvesti majhno zakasnitev 10 milisekund pred izvedbo klica API. Ta zakasnitev je lahko uporabna v scenarijih, kjer se želite izogniti takojšnjim klicem API-ja ali preprečiti pretirane zahteve, ko se komponenta pogosto upodablja. Časovna omejitev daje komponenti nekaj časa, da se umiri, preden sproži zahtevo API. Ker gradimo aplikacijo v razvojnem načinu, se s časovno omejitvijo izognemo napakam, ki jih povzroči dvojno izvajanje
useEffect
vStrictMode
. Za več informacij glejte Posodobitve strogega načina.
Glej naslednjo kodo:
Nato zamenjajte vsebino svojega App.css
datoteko, ki se uporablja za oblikovanje in postavitev vaše spletne strani z vsebino iz naslednjega delčka kode:
Zdaj je čas, da preizkusite svojo aplikacijo. Zaženite aplikacijo z zagonom npm start
v vašem terminalu. Naslednji posnetki zaslona prikazujejo primere vaše aplikacije in nadzorne plošče, ki jih lahko prikaže.
zaključek
V tej objavi smo vam pokazali, kako vdelati nadzorno ploščo QuickSight v aplikacijo React z uporabo AWS SDK. Skupna raba vaše nadzorne plošče z anonimnimi uporabniki jim omogoča dostop do vaše nadzorne plošče, ne da bi jim omogočili dostop do vašega računa AWS. Obstajajo tudi drugi načini za anonimno skupno rabo nadzorne plošče, na primer z uporabo Javna vdelava z enim klikom.
Pridružite se nam Skupnost Quicksight spraševati, odgovarjati in se učiti z drugimi ter raziskovati dodatne vire.
O Author
Adrianna je arhitekt rešitev pri AWS Global Financial Services. Ker je del Amazona od avgusta 2018, je imela priložnost sodelovati tako pri operacijah kot tudi pri poslovanju v oblaku podjetja. Trenutno gradi programska sredstva, ki prikazujejo inovativno uporabo storitev AWS, prilagojeno specifičnim primerom uporabe strank. Vsakodnevno se aktivno ukvarja z različnimi vidiki tehnologije, a njena prava strast je kombinacija spletnega razvoja in analitike.
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
- PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
- PlatoESG. Avtomobili/EV, Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
- BlockOffsets. Posodobitev okoljskega offset lastništva. Dostopite tukaj.
- vir: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :ima
- : je
- :kje
- ][str
- $GOR
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- O meni
- dostop
- dostopen
- Račun
- Doseči
- Ukrep
- aktivno
- dodajte
- dodano
- dodajanje
- Dodatne
- admin
- po
- vsi
- omogočajo
- dovoljene
- omogoča
- Prav tako
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- analitika
- in
- anonimni
- Anonimno
- odgovor
- kaj
- API
- aplikacija
- uporaba
- aplikacije
- Arhitektura
- SE
- Argument
- AS
- vidiki
- Sredstva
- dodeljena
- domnevati
- At
- pripisujejo
- Avgust
- Avtor
- izogniti
- čakati
- AWS
- temeljijo
- Osnova
- BE
- ker
- bilo
- pred
- ime
- spodaj
- telo
- tako
- brskalnik
- izgradnjo
- Building
- Gradi
- poslovni
- Poslovna inteligenca
- vendar
- by
- klic
- poziva
- CAN
- kapaciteta
- primeri
- povzročilo
- center
- priložnost
- spremenite
- Spremembe
- Izberite
- stranke
- Cloud
- Koda
- barva
- kombinacija
- podjetje
- dokončanje
- kompleksna
- komponenta
- deli
- konfiguracija
- Konzole
- porabijo
- Potrošniki
- Posoda
- Vsebuje
- vsebina
- Vsebina
- ozadje
- ustvarjajo
- ustvaril
- Ustvarjanje
- CSS
- Trenutna
- Trenutno
- stranka
- Stranke, ki so
- vsak dan
- Armaturna plošča
- nadzorne plošče
- datum
- privzeto
- opredeljen
- zamuda
- izkazati
- razporedi
- razmestitve
- opisano
- Podrobnosti
- Razvojni
- Razvoj
- drugačen
- zaslon
- DOM
- domena
- domen
- opravljeno
- dont
- podvojila
- trajanje
- med
- e
- učinek
- element
- Embed
- vgrajeni
- vdelava
- omogočajo
- omogočena
- se ukvarja
- Vnesite
- entiteta
- okolje
- Enakovredna
- Napaka
- napake
- Eter (ETH)
- Event
- dogodki
- Primer
- Primeri
- Razen
- izjema
- izvedba
- obstoječih
- razložiti
- raziskuje
- izvoz
- občutek
- file
- finančna
- finančne storitve
- prva
- sledi
- po
- za
- brezplačno
- pogosto
- iz
- funkcija
- funkcionalno
- nadalje
- Prehod
- ustvarjajo
- daje
- Globalno
- svetovni finančni
- Go
- Odobritev
- skupina
- imel
- Imajo
- ob
- Glave
- višina
- Pomaga
- jo
- držite
- drži
- kljuke
- hover
- Kako
- Kako
- http
- HTTPS
- i
- IAM
- ID
- idealen
- identiteta
- ID-ji
- if
- Takojšen
- izvajali
- uvoz
- in
- vključeno
- individualna
- Podatki
- začetna
- začetku
- inovativne
- namestitev
- integracija
- Intelligence
- interaktivni
- v
- uvesti
- prikliče
- vključeni
- IT
- json
- samo
- Ključne
- Pomanjkanje
- velika
- obsežne
- pozneje
- postavitev
- UČITE
- Stopnja
- Leži
- Seznam
- nalaganje
- lokalna
- prijavi
- Poglej
- Glavne
- IZDELA
- Izdelava
- obvezna
- Marža
- Stave
- Meni
- Metoda
- min
- način
- mesečno
- več
- premikanje
- več
- morajo
- Ime
- Krmarjenje
- ostalo
- Nimate
- potrebe
- Novo
- Naslednja
- normalno
- zdaj
- predmet
- of
- pogosto
- on
- ONE
- operacije
- Možnost
- možnosti
- or
- Oranžna
- OS
- Ostalo
- drugi
- drugače
- naši
- pregled
- paket
- Stran
- podokno
- del
- strast
- opravlja
- Dovoljenja
- kramp
- placeholder
- platon
- Platonova podatkovna inteligenca
- PlatoData
- prosim
- politika
- Portal
- Prispevek
- močan
- predpogoji
- preprečiti
- cenitev
- Postopek
- proizvodnja
- Projekt
- zagotavljanje
- proxy
- javnega
- nakup
- Namen
- RE
- Reagirajo
- Bralec
- bralci
- pripravljen
- priporočeno
- okolica
- Odstranjeno
- ometi
- zamenjajte
- zahteva
- zahteva
- obvezna
- vir
- viri
- Odgovor
- vrnitev
- vrne
- vloga
- koren
- Run
- tek
- Lestvica
- scenariji
- galerija
- SDK
- drugi
- sekund
- Oddelek
- glej
- izbran
- Storitve
- Zasedanje
- sej
- nastavite
- poravnavo
- nastavitev
- Delite s prijatelji, znanci, družino in partnerji :-)
- delitev
- je
- shouldnt
- Prikaži
- je pokazala,
- pokazale
- Razstave
- Podoben
- Enostavno
- poenostavitev
- saj
- majhna
- Software
- Rešitev
- rešitve
- nekaj
- Kmalu
- specifična
- določeno
- Stage
- Začetek
- Država
- Izjava
- Korak
- Koraki
- tok
- strogo
- slog
- taka
- Preverite
- prilagojene
- ciljna
- Tehnologija
- terminal
- Test
- Testiranje
- da
- O
- njihove
- Njih
- POTEM
- Tukaj.
- zato
- ta
- čas
- do
- sprožijo
- sprožilo
- Res
- zaupa
- poskusite
- OBRAT
- dva
- pod
- Podčrtajte
- posodobitve
- URL
- uporaba
- Rabljeni
- uporabnik
- Uporabniki
- uporablja
- uporabo
- vrednost
- različnih
- različica
- Poglej
- obisk
- želeli
- načini
- we
- web
- Izdelava spletnih strani
- spletne storitve
- spletne strani
- dobrodošli
- Dobro
- kdaj
- kadar koli
- ki
- bo
- z
- v
- brez
- jo
- Vaša rutina za
- zefirnet