Manustatud analüütika kasutamine alates Amazon QuickSight võib lihtsustada teie rakenduse funktsionaalsete visualisatsioonidega varustamist ilma keeruka arenduseta. QuickSighti armatuurlaudade manustamiseks rakendusse on mitu võimalust. Selles postituses vaatleme, kuidas seda saab teha kasutades React ja Amazon QuickSight Embedding SDK.
Armatuurlaua tarbijatel pole sageli AWS-i kontole määratud kasutajat ja seetõttu puudub neil juurdepääs armatuurlauale. Andmete tarbimise võimaldamiseks peab armatuurlaud olema anonüümsetele kasutajatele juurdepääsetav. Vaatame samme, mis on vajalikud selleks, et võimaldada autentimata kasutajal teie Reacti rakenduses teie QuickSighti armatuurlauda vaadata.
Lahenduse ülevaade
Meie lahendus kasutab järgmisi võtmeteenuseid:
Pärast veebilehe laadimist brauserisse helistab brauser API Gatewayle, mis kutsub esile Lambda funktsiooni, mis kutsub QuickSight API-d, et luua anonüümsele kasutajale armatuurlaua URL. Lambda funktsioon peab võtma IAM-i rolli koos nõutavate õigustega. Järgmine diagramm annab ülevaate arhitektuurist.
Eeldused
Teil peavad olema järgmised eeltingimused:
Seadistage load autentimata vaatajatele
Looge oma kontol IAM-poliitika, mida teie rakendus vaataja nimel võtab:
- Valige IAM-konsoolil Poliitika navigeerimispaanil.
- Vali Loo poliitika.
- Kohta JSON vahekaardile sisestage järgmine poliitikakood:
Muutke kindlasti väärtus armatuurlaua ID väärtuseks. Märkige see ID, et kasutada seda ka hilisemas etapis.
Teise logidega avalduseobjekti jaoks on õigused Valikuline. See võimaldab teil luua määratud nimega logirühma, luua määratud logirühma jaoks logivoo ja laadida üles logisündmuste partii määratud logivoogu.
Selles poliitikas lubame kasutajal teostada GenerateEmbedUrlForAnonymousUser
toiming armatuurlaua ID-ga kohahoidjasse sisestatud armatuurlaua ID-de loendis.
- Sisestage oma poliitikale nimi (näiteks
AnonymousEmbedPolicy
) ja valige Loo poliitika.
Järgmisena loome rolli ja lisame selle poliitika rollile.
- Vali rollid navigeerimispaanil, seejärel valige Loo roll.
- Vali Lambda usaldusväärse üksuse jaoks.
- Otsige ja valige
AnonymousEmbedPolicy
, siis vali järgmine. - Sisestage oma rolli nimi, näiteks
AnonymousEmbedRole
. - Veenduge, et poliitika nimi oleks lisatud Lisa õigused sektsiooni.
- Lõpetage oma rolli loomine.
Olete just loonud AnonymousEmbedRole
täideviimise roll. Nüüd saate liikuda järgmise sammu juurde.
Looge anonüümne manustatud URL-i Lambda funktsioon
Selles etapis loome Lambda funktsiooni, mis suhtleb QuickSightiga, et luua anonüümsele kasutajale manustatud URL. Meie domeen tuleb lubada. Amazon QuickSighti integreerimiseks on kaks võimalust:
- Lisades URL-i lubatud domeenide loendisse Amazon QuickSighti administraatorikonsoolis (selgitatud hiljem [Valikuline] Lisage oma domeen QuickSighti jaotis).
- [Soovitatav] Lisades manustatud URL-i taotluse API-kutses käitamise ajal. Valik 1 on soovitatav, kui peate säilitama lubatud domeenid. Vastasel juhul eemaldatakse domeenid 30 minuti pärast, mis võrdub seansi kestusega. Muudel kasutusjuhtudel on soovitatav kasutada teist võimalust (kirjeldatud ja rakendatud allpool).
Looge Lambda konsoolil uus funktsioon.
- valima Autor nullist.
- eest Funktsiooni nimi, sisestage nimi, näiteks
AnonymousEmbedFunction
. - eest Runtime¸ vali Python 3.9.
- eest Täitmise roll¸ vali Kasutage olemasolevat rolli.
- Valige roll
AnonymousEmbedRole
. - Vali Loo funktsioon.
- Funktsiooni üksikasjade lehel navigeerige jaotiseni kood vahekaarti ja sisestage järgmine kood:
Kui te kohalikku hosti ei kasuta, asendage see http://localhost:3000
teie rakenduse hostinimega. Tootmisse üleminekuks ärge unustage välja vahetada http://localhost:3000
teie domeeniga.
- Kohta konfiguratsioon sakk, all Üldine konfiguratsioon, vali Edit.
- Suurendage ajalõpu 3 sekundilt 30 sekundini ja seejärel valige Säästa.
- alla Keskkonnamuutujad, vali Edit.
- Lisage järgmised muutujad:
- lisama
DashboardIdList
ja loetlege oma armatuurlaua ID-d. - lisama
DashboardRegion
ja sisestage oma armatuurlaua piirkond.
- lisama
- Vali Säästa.
Teie konfiguratsioon peaks välja nägema sarnane järgmisele ekraanipildile.
- Kohta kood valige vahekaart juurutada funktsiooni juurutamiseks.
Seadistage API Gateway, et käivitada Lambda funktsioon
API lüüsi seadistamiseks loodud funktsiooni käivitamiseks toimige järgmiselt.
- Navigeerige API Gateway konsoolis jaotisesse REST API jaotis ja valige Ehitama.
- alla Loo uus APIvalige Uus API.
- eest API nimi, sisestage nimi (näiteks
QuicksightAnonymousEmbed
). - Vali Loo API.
- Kohta Meetmete menüüst valige Loo ressurss.
- eest Allika nimi, sisestage nimi (näiteks
anonymous-embed
).
Nüüd loome meetodi.
- Vali
anonymous-embed
ressurss ja Meetmete menüüst valige Loo meetod. - Vali GET ressursi nime all.
- eest Integratsiooni tüüpvalige Lambda.
- valima Kasutage Lambda puhverserveri integratsiooni.
- eest Lambda funktsioon, sisestage loodud funktsiooni nimi.
- Vali Säästa, siis vali OK.
Nüüd oleme API juurutamiseks valmis.
- Kohta Meetmete menüüst valige Rakenda API.
- eest Kasutuselevõtu etappvalige Uus etapp.
- Sisestage oma etapi nimi, näiteks
embed
. - Vali juurutada.
[Valikuline] Lisage oma domeen QuickSighti
Kui lisasite sisse lubatud domeenid Looge anonüümne manustatud URL-i Lambda funktsioon osa, võite vabalt liikuda Lülitage sisse võimsuse hinnakujundus sektsiooni.
Oma domeeni lisamiseks QuickSighti lubatud domeenide hulka toimige järgmiselt.
- Valige QuickSighti konsoolil kasutajamenüü ja seejärel valige QuickSighti haldamine.
- Vali Domeenid ja manustamine navigeerimispaanil.
- eest Domeen, sisestage oma domeen (
http://localhost:
).
Asendage kindlasti et see sobiks teie kohaliku seadistusega.
- Vali lisama.
Asendage localhost domeen kindlasti domeeniga, mida pärast testimist kasutate.
Lülitage sisse võimsuse hinnakujundus
Kui teil pole seansi mahu hinnakujundust lubatud, järgige selles jaotises toodud juhiseid. Edasiseks jätkamiseks on selle funktsiooni lubamine kohustuslik.
Võimsuse hinnakujundus võimaldab QuickSighti klientidel osta lugejaseansse hulgi, ilma et peaksid QuickSightis eraldi lugejaid pakkuma. Võimsuse hinnakujundus sobib ideaalselt manustatud rakenduste või suuremahuliste äriteabe (BI) juurutamiseks. Lisateabe saamiseks külastage Amazon QuickSighti hinnakujundus.
Võimsuse hinnastamise sisselülitamiseks toimige järgmiselt.
- Kohta QuickSighti haldamine lehel, valige Teie tellimused navigeerimispaanil.
- aasta Võimsuse hinnakujundus jaotises valige Hankige igakuine tellimus.
- Vali Kinnitage tellimus.
Võimsuse hinnakujunduse kohta lisateabe saamiseks vt Uus Amazon QuickSightis – seansi mahu hinnakujundus suuremahuliste juurutuste jaoks, avalikele veebisaitidele manustamine ja arendajaportaal manustatud analüüsi jaoks.
Seadistage oma Reacti rakendus
Rakenduse React seadistamiseks toimige järgmiselt.
- Minge oma Reacti projekti kaustas juurkataloogi ja käivitage
npm i amazon-quicksight-embedding-sdk
paketi amazon-quicksight-embedding-sdk installimiseks. - Oma
App.js
faili, asenda järgmine:- asendama
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
teie API lüüsi kutsumis-URL-i ja ressursi nimega (näitekshttps://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - asendama
YOUR_DASHBOARD1_ID
teie esimese armatuurlaua ID-gaDashboardIdList
. See on armatuurlaud, mida kuvatakse esialgsel renderdamisel. - asendama
YOUR_DASHBOARD2_ID
teie teise armatuurlaua ID-gaDashboardIdList
.
- asendama
Järgmine koodilõik näitab näidet App.js
faili oma Reacti projektis. Kood on Reacti komponent, mis manustab valitud armatuurlaua ID-l põhineva QuickSighti armatuurlaua. Kood sisaldab järgmisi põhikomponente:
- Riigi konksud – Kasutades defineeritakse kaks olekukonksu
useState()
konks Reactilt:- armatuurlaud – Hoiab praegu valitud armatuurlaua ID-d.
- quickSightEmbedding – Hoiab QuickSighti manustamisobjekti, mille tagastas
embedDashboard()
funktsiooni.
- Ref konks – Ref hook määratletakse kasutades
useRef()
konks Reactilt. Seda kasutatakse viite hoidmiseks DOM-elemendile, kuhu QuickSighti armatuurlaud manustatakse. - useEffect() konks – Konksu useEffect() kasutatakse QuickSighti armatuurlaua manustamise käivitamiseks alati, kui valitud armatuurlaua ID muutub. Esmalt hangib see QuickSight API-st valitud ID armatuurlaua URL-i, kasutades meetodit fetch(). Pärast URL-i toomist kutsub see välja funktsiooni embed(), mille argumendiks on URL.
- Vahetage käitlejat -
changeDashboard()
funktsioon on lihtne sündmuste käitleja, mis värskendab armatuurlaua olekut alati, kui kasutaja valib rippmenüüst mõne muu armatuurlaua. Niipea kui uus armatuurlaua ID on määratud, käivitub konks useEffect. - 10-millisekundiline ajalõpp – Ajalõpu kasutamise eesmärk on lisada enne API-kõne tegemist väike 10-millisekundiline viivitus. See viivitus võib olla kasulik stsenaariumide korral, kus soovite vältida vahetuid API-kutseid või vältida liigseid päringuid, kui komponent renderdub sageli. Aegumine annab komponendile enne API päringu algatamist veidi aega settida. Kuna me ehitame rakendust arendusrežiimis, aitab ajalõpp vältida topeltkäivitamisest põhjustatud vigu
useEffect
jooksulStrictMode
. Lisateabe saamiseks vaadake Värskendused rangele režiimile.
Vaadake järgmist koodi:
Järgmisena asendage oma sisu App.css
faili, mida kasutatakse teie veebilehe stiiliks ja paigutuseks, koos järgmise koodilõigu sisuga:
Nüüd on aeg oma rakendust testida. Käivitage rakendus käivitades npm start
oma terminalis. Järgmistel ekraanipiltidel on näited teie rakendusest ja armatuurlaudadest, mida see kuvada saab.
Järeldus
Selles postituses näitasime teile, kuidas manustada QuickSighti armatuurlaud Reacti rakendusse, kasutades AWS SDK-d. Armatuurlaua jagamine anonüümsete kasutajatega võimaldab neil pääseda teie armatuurlauale juurde ilma juurdepääsu teie AWS-i kontole. Armatuurlaua anonüümseks jagamiseks on ka teisi viise, näiteks kasutades 1 klõpsuga avalik manustamine.
Liitu Quicksighti kogukond küsida, vastata ja õppida koos teistega ning uurida lisaressursse.
Teave Autor
Adrianna on AWS Global Financial Services lahenduste arhitekt. Olles olnud osa Amazonist alates 2018. aasta augustist, on tal olnud võimalus osaleda nii ettevõtte tegevuses kui ka pilveäris. Praegu loob ta tarkvaravarasid, mis demonstreerivad AWS-i teenuste uuenduslikku kasutamist, mis on kohandatud konkreetsele kliendi kasutusjuhtumile. Igapäevaselt tegeleb ta aktiivselt erinevate tehnoloogiaaspektidega, kuid tema tõeline kirg peitub veebiarenduse ja analüütika kombinatsioonis.
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- PlatoData.Network Vertikaalne generatiivne Ai. Jõustage ennast. Juurdepääs siia.
- PlatoAiStream. Web3 luure. Täiustatud teadmised. Juurdepääs siia.
- PlatoESG. Autod/elektrisõidukid, Süsinik, CleanTech, Energia, Keskkond päikeseenergia, Jäätmekäitluse. Juurdepääs siia.
- BlockOffsets. Keskkonnakompensatsiooni omandi ajakohastamine. Juurdepääs siia.
- Allikas: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :on
- :on
- : kus
- ][lk
- $ UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- MEIST
- juurdepääs
- juurdepääsetav
- konto
- Saavutada
- tegevus
- aktiivselt
- lisama
- lisatud
- lisades
- Täiendavad lisad
- admin
- pärast
- Materjal: BPA ja flataatide vaba plastik
- võimaldama
- lubatud
- võimaldab
- Ka
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- analytics
- ja
- anonüümne
- Anonüümselt
- vastus
- mistahes
- API
- app
- taotlus
- rakendused
- arhitektuur
- OLEME
- argument
- AS
- aspektid
- vara
- määratud
- eeldab
- At
- kinnitage
- AUGUST
- autor
- vältima
- ootama
- AWS
- põhineb
- alus
- BE
- sest
- olnud
- enne
- nimel
- alla
- keha
- mõlemad
- brauseri
- ehitama
- Ehitus
- Ehitab
- äri
- ärianalüüsi
- kuid
- by
- helistama
- Kutsub
- CAN
- Võimsus
- juhtudel
- põhjustatud
- keskus
- võimalus
- muutma
- Vaidluste lahendamine
- Vali
- klient
- Cloud
- kood
- värv
- kombinatsioon
- ettevõte
- täitma
- keeruline
- komponent
- komponendid
- konfiguratsioon
- konsool
- tarbima
- Tarbijad
- Konteiner
- sisaldab
- sisu
- sisu
- kontekst
- looma
- loodud
- loomine
- CSS
- Praegune
- Praegu
- klient
- Kliendid
- iga päev
- armatuurlaud
- armatuurlauad
- andmed
- vaikimisi
- määratletud
- viivitus
- näitama
- juurutada
- kasutuselevõtt
- kirjeldatud
- detailid
- arendaja
- & Tarkvaraarendus
- erinev
- Ekraan
- DOM
- domeen
- Domeenid
- tehtud
- Ära
- kahekordistada
- kestus
- ajal
- e
- mõju
- element
- Embed
- varjatud
- kinnistamine
- võimaldama
- lubatud
- haarab
- sisene
- üksus
- keskkond
- Samaväärne
- viga
- vead
- Eeter (ETH)
- sündmus
- sündmused
- näide
- näited
- Välja arvatud
- erand
- täitmine
- olemasolevate
- selgitas
- uurima
- eksport
- tundma
- fail
- finants-
- finantsteenused
- esimene
- järgima
- Järel
- eest
- tasuta
- sageli
- Alates
- funktsioon
- funktsionaalne
- edasi
- värav
- tekitama
- annab
- Globaalne
- globaalne finants
- Go
- andmine
- Grupp
- olnud
- Olema
- võttes
- päised
- kõrgus
- aitab
- siin
- hoidma
- omab
- Konksud
- hõljuma
- Kuidas
- Kuidas
- http
- HTTPS
- i
- IAM
- ID
- ideaalne
- Identity
- IDd
- if
- Vahetu
- rakendatud
- import
- in
- lisatud
- eraldi
- info
- esialgne
- algatades
- uuenduslik
- paigaldama
- integratsioon
- Intelligentsus
- interaktiivne
- sisse
- kehtestama
- kutsub
- seotud
- IT
- Json
- lihtsalt
- Võti
- puudus
- suur
- suuremahuline
- pärast
- Layout
- Õppida
- Tase
- peitub
- nimekiri
- laadimine
- kohalik
- logi
- Vaata
- põhiline
- TEEB
- Tegemine
- kohustuslik
- Varu
- Vastama
- menüü
- meetod
- protokoll
- viis
- igakuine
- rohkem
- liikuma
- mitmekordne
- peab
- nimi
- Navigate
- NAVIGATSIOON
- Vajadus
- vajadustele
- Uus
- järgmine
- normaalne
- nüüd
- objekt
- of
- sageli
- on
- ONE
- Operations
- valik
- Valikud
- or
- oranž
- OS
- Muu
- teised
- muidu
- meie
- ülevaade
- pakend
- lehekülg
- pane
- osa
- kirg
- täitma
- Õigused
- valima
- kohatäide
- Platon
- Platoni andmete intelligentsus
- PlatoData
- palun
- poliitika
- Portal
- post
- võimas
- eeldused
- vältida
- hinnapoliitika
- protsess
- Produktsioon
- projekt
- säte
- volikiri
- avalik
- ostma
- eesmärk
- RE
- Reageerima
- lugeja
- lugejad
- valmis
- soovitatav
- piirkond
- Eemaldatud
- muudab
- asendama
- taotleda
- Taotlusi
- nõutav
- ressurss
- Vahendid
- vastus
- tagasipöördumine
- Tulu
- Roll
- juur
- jooks
- jooksmine
- Skaala
- stsenaariumid
- ekraanipilte
- SDK
- Teine
- sekundit
- Osa
- vaata
- väljavalitud
- Teenused
- istung
- istungid
- komplekt
- lahendama
- seade
- Jaga
- jagamine
- ta
- peaks
- näitama
- näitas
- näidatud
- Näitused
- sarnane
- lihtne
- lihtsustama
- alates
- väike
- tarkvara
- lahendus
- Lahendused
- mõned
- Varsti
- konkreetse
- määratletud
- Stage
- algus
- riik
- väljavõte
- Samm
- Sammud
- oja
- range
- stiil
- selline
- kindel
- kohandatud
- sihtmärk
- Tehnoloogia
- terminal
- test
- Testimine
- et
- .
- oma
- Neile
- SIIS
- Seal.
- seetõttu
- see
- aeg
- et
- vallandada
- vallandas
- tõsi
- Usaldatud
- püüdma
- Pöörake
- kaks
- all
- rõhutama
- Uudised
- URL
- kasutama
- Kasutatud
- Kasutaja
- Kasutajad
- kasutusalad
- kasutamine
- väärtus
- eri
- versioon
- vaade
- visiit
- tahan
- kuidas
- we
- web
- Veebidisain
- veebiteenused
- veebilehed
- teretulnud
- Hästi
- millal
- millal iganes
- mis
- will
- koos
- jooksul
- ilma
- sa
- Sinu
- sephyrnet