Beágyazott elemzések használata innen Amazon QuickSight bonyolult fejlesztés nélkül leegyszerűsítheti az alkalmazás funkcionális vizualizációkkal való felszerelésének folyamatát. A QuickSight irányítópultjait többféleképpen is beágyazhatja az alkalmazásba. Ebben a bejegyzésben megvizsgáljuk, hogyan lehet ezt megtenni a React és a Amazon QuickSight Embedding SDK.
Az irányítópult-felhasználók gyakran nem rendelkeznek felhasználóval az AWS-fiókjukhoz, ezért nem férnek hozzá az irányítópulthoz. Ahhoz, hogy lehetővé tegyék számukra az adatok felhasználását, az irányítópultnak elérhetőnek kell lennie a névtelen felhasználók számára. Nézzük meg azokat a lépéseket, amelyek szükségesek ahhoz, hogy egy nem hitelesített felhasználó megtekinthesse a QuickSight irányítópultját a React alkalmazásban.
Megoldás áttekintése
Megoldásunk a következő kulcsszolgáltatásokat használja:
A weboldal böngészőbe való betöltése után a böngésző meghívja az API Gateway-t, amely meghív egy Lambda függvényt, amely meghívja a QuickSight API-t, és létrehoz egy irányítópult URL-t egy névtelen felhasználó számára. A Lambda függvénynek IAM-szerepet kell felvállalnia a szükséges engedélyekkel. A következő ábra az architektúra áttekintését mutatja be.
Előfeltételek
A következő előfeltételekkel kell rendelkeznie:
Engedélyek beállítása a nem hitelesített nézők számára
Fiókjában hozzon létre egy IAM-szabályzatot, amelyet az alkalmazás a megtekintő nevében vállal:
- Az IAM konzolon válassza a lehetőséget házirendje a navigációs ablaktáblában.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Házirend létrehozása.
- A JSON lapon írja be a következő szabályzatkódot:
Ügyeljen arra, hogy módosítsa az értékét az irányítópult azonosítójának értékére. Jegyezze fel ezt az azonosítót egy későbbi lépésben is.
A naplókat tartalmazó második utasításobjektumhoz az engedélyek a következők választható. Lehetővé teszi egy naplócsoport létrehozását a megadott névvel, naplófolyam létrehozását a megadott naplócsoporthoz, és naplóesemények kötegének feltöltését a megadott naplófolyamba.
Ebben a szabályzatban lehetővé tesszük a felhasználó számára, hogy a GenerateEmbedUrlForAnonymousUser
műveletet az irányítópult-azonosítóval a helyőrzőbe beillesztett irányítópult-azonosítók listáján belül.
- Adja meg a szabályzat nevét (például
AnonymousEmbedPolicy
) és válassza Házirend létrehozása.
Ezután létrehozunk egy szerepet, és a szerephez csatoljuk ezt a szabályzatot.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a szerepek a navigációs ablakban, majd válassza a lehetőséget Szerep létrehozása.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Lambda a megbízható entitás számára.
- Keressen és válasszon
AnonymousEmbedPolicy
, majd válassza ki Következő. - Adjon meg egy nevet a szerepének, például
AnonymousEmbedRole
. - Győződjön meg arról, hogy a házirend neve szerepel a Engedélyek hozzáadása szakasz.
- Fejezze be a szerep létrehozását.
Ön most hozta létre a AnonymousEmbedRole
végrehajtási szerep. Most léphet a következő lépésre.
Hozzon létre egy névtelen beágyazási URL Lambda függvényt
Ebben a lépésben létrehozunk egy Lambda-függvényt, amely együttműködik a QuickSight-tal, és létrehoz egy beágyazási URL-t egy névtelen felhasználó számára. Engedélyezni kell a domainünket. Az Amazon QuickSight integrálásának két módja van:
- Az URL hozzáadásával az engedélyezett domainek listájához az Amazon QuickSight felügyeleti konzolban (lásd később [Opcionális] Adja hozzá domainjét a QuickSightban szakasz).
- [Ajánlott] A beágyazási URL-kérés hozzáadásával futás közben az API-hívásban. Az 1. lehetőség akkor javasolt, ha meg kell őriznie az engedélyezett tartományokat. Ellenkező esetben a domainek 30 perc elteltével eltávolításra kerülnek, ami megegyezik a munkamenet időtartamával. Egyéb felhasználási esetekben javasolt a második opció használata (leírva és megvalósítva).
A Lambda konzolon hozzon létre egy új funkciót.
- választ Szerző a semmiből.
- A Funkció neve, írjon be egy nevet, például
AnonymousEmbedFunction
. - A Runtimeválaszt Python 3.9.
- A Végrehajtási szerepválaszt Használjon meglévő szerepet.
- Válassza ki a szerepet
AnonymousEmbedRole
. - A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Funkció létrehozása.
- A funkció részleteinek oldalán navigáljon a Kód fület, és írja be a következő kódot:
Ha nem localhost-ot használ, cserélje ki http://localhost:3000
a válaszokban az alkalmazás gazdagépnevével. A gyártáshoz való átálláshoz ne felejtse el kicserélni http://localhost:3000
a domainjével.
- A Configuration fül alatt Általános konfiguráció, választ szerkesztése.
- Növelje az időtúllépést 3 másodpercről 30 másodpercre, majd válassza a lehetőséget Megtakarítás.
- Alatt Környezeti változók, választ szerkesztése.
- Adja hozzá a következő változókat:
- hozzáad
DashboardIdList
és sorolja fel az irányítópult azonosítóit. - hozzáad
DashboardRegion
és adja meg az irányítópult régióját.
- hozzáad
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Megtakarítás.
A konfigurációnak az alábbi képernyőképhez hasonlóan kell kinéznie.
- A Kód lapot választani Telepítése a funkció üzembe helyezéséhez.
Állítsa be az API-átjárót a Lambda függvény meghívásához
Az API Gateway beállításához a létrehozott függvény meghívására, hajtsa végre a következő lépéseket:
- Az API Gateway konzolon navigáljon a REST API és válasszon Épít.
- Alatt Új API létrehozásaválassza Új API.
- A API neve, írjon be egy nevet (például
QuicksightAnonymousEmbed
). - A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a API létrehozása.
- A Hozzászólások menüben válasszon Erőforrás létrehozása.
- A Forrás neve, írjon be egy nevet (például
anonymous-embed
).
Most hozzunk létre egy módszert.
- Válassza a
anonymous-embed
erőforrás és a Hozzászólások menüben válasszon Módszer létrehozása. - A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a GET az erőforrás neve alatt.
- A Integráció típusaválassza Lambda.
- választ Használja a Lambda proxy integrációt.
- A Lambda funkció, írja be a létrehozott függvény nevét.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Megtakarítás, majd válassza ki OK.
Most készen állunk az API üzembe helyezésére.
- A Hozzászólások menüben válasszon API telepítése.
- A Telepítési szakaszválassza Új színpad.
- Adja meg a színpad nevét, például
embed
. - A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Telepítése.
[Opcionális] Adja hozzá domainjét a QuickSightban
Ha engedélyezett domaineket adott hozzá Hozzon létre egy névtelen beágyazási URL Lambda függvényt részhez, nyugodtan költözzön Kapcsolja be a kapacitásárazást szakasz.
Ha hozzá szeretné adni a domaint a QuickSight engedélyezett tartományaihoz, hajtsa végre a következő lépéseket:
- A QuickSight konzolon válassza ki a felhasználói menüt, majd válassza a lehetőséget A QuickSight kezelése.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Domainek és beágyazás a navigációs ablaktáblában.
- A Domén, adja meg a domainjét (
http://localhost:
).
Ügyeljen arra, hogy cserélje ki hogy megfeleljen a helyi beállításnak.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a hozzáad.
Ügyeljen arra, hogy a tesztelés után cserélje ki a localhost tartományt arra, amelyet használni fog.
Kapcsolja be a kapacitásárazást
Ha nincs engedélyezve a munkamenet-kapacitás árazása, kövesse az ebben a szakaszban található lépéseket. A továbblépéshez ezt a funkciót kötelező engedélyezni.
A kapacitásárazás lehetővé teszi a QuickSight-ügyfelek számára, hogy tömegesen vásároljanak olvasói munkameneteket anélkül, hogy egyedi olvasókat kellene biztosítaniuk a QuickSightban. A kapacitásárazás ideális a beágyazott alkalmazásokhoz vagy a nagyszabású üzleti intelligencia (BI) telepítéséhez. További információért látogasson el Amazon QuickSight árazás.
A kapacitásárazás bekapcsolásához hajtsa végre a következő lépéseket:
- A A QuickSight kezelése oldalon válassza a lehetőséget Az Ön előfizetései a navigációs ablaktáblában.
- A Kapacitás árazás válasszon Szerezzen havi előfizetést.
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a Erősítse meg az előfizetést.
Ha többet szeretne megtudni a kapacitás árazásáról, lásd: Újdonság az Amazon QuickSightban – munkamenet-kapacitás árazás nagy léptékű telepítésekhez, nyilvános webhelyekbe való beágyazás és fejlesztői portál a beágyazott elemzésekhez.
Állítsa be a React alkalmazást
A React alkalmazás beállításához hajtsa végre a következő lépéseket:
- A React projekt mappájában lépjen a gyökérkönyvtárba, és futtassa
npm i amazon-quicksight-embedding-sdk
az amazon-quicksight-embedding-sdk csomag telepítéséhez. - A
App.js
fájlt, cserélje ki a következőket:- Cserélje
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
az API Gateway meghívó URL-jével és az erőforrás nevével (példáulhttps://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Cserélje
YOUR_DASHBOARD1_ID
az első irányítópultazonosítóvalDashboardIdList
. Ez az irányítópult, amely megjelenik a kezdeti megjelenítésen. - Cserélje
YOUR_DASHBOARD2_ID
a második irányítópultazonosítóvalDashboardIdList
.
- Cserélje
A következő kódrészlet példát mutat be a App.js
fájlt a React projektben. A kód egy React komponens, amely a kiválasztott irányítópult-azonosító alapján egy QuickSight irányítópultot ágyaz be. A kód a következő kulcselemeket tartalmazza:
- Állami horgok – Két állapothorog van megadva a segítségével
useState()
horog a Reacttól:- műszerfal – Az aktuálisan kiválasztott irányítópult-azonosítót tartalmazza.
- quickSightEmbedding – A QuickSight beágyazási objektumot tartja vissza
embedDashboard()
funkciót.
- Ref horog – A ref hook meghatározása a
useRef()
horog a Reacttól. Arra a DOM-elemre való hivatkozás tartására szolgál, amelybe a QuickSight irányítópult be lesz ágyazva. - useEffect() hook – A useEffect() hook a QuickSight irányítópult beágyazásának aktiválására szolgál, amikor a kiválasztott irányítópult-azonosító megváltozik. Először lekéri a kiválasztott azonosító irányítópult URL-jét a QuickSight API-ból a fetch() metódus használatával. Miután lekérte az URL-t, meghívja az embed() függvényt az URL-lel argumentumként.
- Változtasd meg a kezelőt - A
changeDashboard()
A funkció egy egyszerű eseménykezelő, amely frissíti az irányítópult állapotát, amikor a felhasználó másik irányítópultot választ a legördülő menüből. Amint beállítja az új irányítópult-azonosítót, a useEffect hook aktiválódik. - 10 ezredmásodperces időtúllépés – Az időkorlát használatának célja egy kis, 10 ezredmásodperces késleltetés bevezetése az API-hívás megkezdése előtt. Ez a késleltetés hasznos lehet olyan helyzetekben, amikor el szeretné kerülni az azonnali API-hívásokat, vagy meg akarja akadályozni a túlzott kéréseket, amikor az összetevő gyakran renderelődik. Az időtúllépés bizonyos időt ad az összetevőnek, hogy rendeződjön az API-kérés indítása előtt. Mivel az alkalmazást fejlesztői módban építjük, az időtúllépés segít elkerülni a dupla futtatás által okozott hibákat
useEffect
belülStrictMode
. További információkért lásd: Frissítések a szigorú módra.
Lásd a következő kódot:
Ezután cserélje ki a tartalmát App.css
fájl, amely a weboldal stílusának és elrendezésének meghatározására szolgál, a következő kódrészlet tartalmával:
Itt az ideje, hogy tesztelje alkalmazását. Indítsa el az alkalmazást futtatással npm start
a termináljában. A következő képernyőképek példákat mutatnak be az alkalmazásodra, valamint az általa megjeleníthető irányítópultokra.
Következtetés
Ebben a bejegyzésben megmutattuk, hogyan ágyazhat be QuickSight irányítópultot egy React alkalmazásba az AWS SDK használatával. Ha megosztja irányítópultját névtelen felhasználókkal, akkor anélkül is hozzáférhetnek az irányítópulthoz, hogy hozzáférést biztosítanának az AWS-fiókjához. Vannak más módok is az irányítópult névtelen megosztására, például a használatával Nyilvános beágyazás 1 kattintással.
Csatlakozz a Quicksight közösség kérdezni, válaszolni és másokkal együtt tanulni, valamint további forrásokat fedezni fel.
A szerzőről
Adrianna az AWS Global Financial Services megoldástervezője. Mivel 2018 augusztusa óta az Amazon tagja, lehetősége nyílt arra, hogy részt vegyen mind a vállalat működésében, mind a felhő üzletágban. Jelenleg olyan szoftvereszközöket épít, amelyek bemutatják az AWS-szolgáltatások innovatív használatát, egyedi ügyfélhasználati esetekre szabva. Napi szinten aktívan foglalkozik a technológia különböző területeivel, de igazi szenvedélye a webfejlesztés és az elemzés kombinációjában rejlik.
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- PlatoData.Network Vertical Generative Ai. Erősítse meg magát. Hozzáférés itt.
- PlatoAiStream. Web3 Intelligence. Felerősített tudás. Hozzáférés itt.
- PlatoESG. Autóipar / elektromos járművek, Carbon, CleanTech, Energia, Környezet, Nap, Hulladékgazdálkodás. Hozzáférés itt.
- BlockOffsets. A környezetvédelmi ellentételezési tulajdon korszerűsítése. Hozzáférés itt.
- Forrás: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :van
- :is
- :ahol
- ][p
- $ UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Rólunk
- hozzáférés
- hozzáférhető
- Fiók
- Elérése
- Akció
- aktívan
- hozzá
- hozzáadott
- hozzáadásával
- További
- admin
- Után
- Minden termék
- lehetővé
- megengedett
- lehetővé teszi, hogy
- Is
- amazon
- Amazon QuickSight
- Az Amazon Web Services
- an
- analitika
- és a
- Névtelenül
- névtelenül
- válasz
- bármilyen
- api
- app
- Alkalmazás
- alkalmazások
- építészet
- VANNAK
- érv
- AS
- szempontok
- Eszközök
- kijelölt
- feltételezni
- At
- csatolja
- Augusztus
- szerző
- elkerülése érdekében
- várják
- AWS
- alapján
- alap
- BE
- mert
- óta
- előtt
- nevében
- lent
- test
- mindkét
- böngésző
- épít
- Épület
- épít
- üzleti
- üzleti intelligencia
- de
- by
- hívás
- kéri
- TUD
- Kapacitás
- esetek
- okozott
- Központ
- esély
- változik
- Változások
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a
- vásárló
- felhő
- kód
- szín
- kombináció
- vállalat
- teljes
- bonyolult
- összetevő
- alkatrészek
- Configuration
- Konzol
- fogyaszt
- Fogyasztók
- Konténer
- tartalmaz
- tartalom
- tartalom
- kontextus
- teremt
- készítette
- létrehozása
- CSS
- Jelenlegi
- Jelenleg
- vevő
- Ügyfelek
- napi
- műszerfal
- műszerfalak
- dátum
- alapértelmezett
- meghatározott
- késleltetés
- bizonyítani
- telepíteni
- bevetések
- leírt
- részletek
- Fejlesztő
- Fejlesztés
- különböző
- kijelző
- DOM
- domain
- domainek
- csinált
- ne
- kétszeresére
- időtartama
- alatt
- e
- hatás
- elem
- Beágyaz
- beágyazott
- beágyazás
- lehetővé
- engedélyezve
- elkötelezett
- belép
- egység
- Környezet
- Egyenértékű
- hiba
- hibák
- Eter (ETH)
- esemény
- események
- példa
- példák
- Kivéve
- kivétel
- végrehajtás
- létező
- magyarázható
- feltárása
- export
- érez
- filé
- pénzügyi
- pénzügyi szolgáltatások
- vezetéknév
- következik
- következő
- A
- Ingyenes
- gyakran
- ból ből
- funkció
- funkcionális
- további
- gateway
- generál
- ad
- Globális
- globális pénzügyi
- Go
- nyújtó
- Csoport
- kellett
- Legyen
- tekintettel
- fejlécek
- magasság
- segít
- neki
- tart
- tart
- horgok
- lebeg
- Hogyan
- How To
- http
- HTTPS
- i
- IAM
- ID
- ideális
- Identitás
- ids
- if
- azonnali
- végre
- importál
- in
- beleértve
- egyéni
- információ
- kezdetben
- kezdeményező
- újító
- telepíteni
- integráció
- Intelligencia
- kölcsönhatásba lép
- bele
- bevezet
- behívja
- részt
- IT
- json
- éppen
- Kulcs
- hiány
- nagy
- nagyarányú
- a későbbiekben
- elrendezés
- TANUL
- szint
- fekszik
- Lista
- betöltés
- helyi
- log
- néz
- Fő
- KÉSZÍT
- Gyártás
- kötelező
- Margó
- Mérkőzés
- Menü
- módszer
- jegyzőkönyv
- Mód
- havi
- több
- mozog
- többszörös
- kell
- név
- Keresse
- Navigáció
- Szükség
- igények
- Új
- következő
- normális
- Most
- tárgy
- of
- gyakran
- on
- ONE
- Művelet
- opció
- Opciók
- or
- narancs
- OS
- Más
- Egyéb
- másképp
- mi
- áttekintés
- csomag
- oldal
- üvegtábla
- rész
- szenvedély
- teljesít
- engedélyek
- vedd
- placeholder
- Plató
- Platón adatintelligencia
- PlatoData
- kérem
- politika
- Portál
- állás
- erős
- előfeltételek
- megakadályozása
- árazás
- folyamat
- Termelés
- program
- ellátás
- meghatalmazott
- nyilvános
- Vásárlás
- cél
- RE
- Reagál
- Olvasó
- olvasók
- kész
- ajánlott
- vidék
- eltávolított
- vakolatok
- cserélni
- kérni
- kéri
- kötelező
- forrás
- Tudástár
- válasz
- visszatérés
- Visszatér
- Szerep
- gyökér
- futás
- futás
- Skála
- forgatókönyvek
- screenshotok
- sdk
- Második
- másodperc
- Rész
- lát
- kiválasztott
- Szolgáltatások
- ülés
- ülések
- készlet
- rendezni
- felépítés
- Megosztás
- megosztás
- ő
- kellene
- előadás
- kimutatta,
- mutatott
- Műsorok
- hasonló
- Egyszerű
- egyszerűsítése
- óta
- kicsi
- szoftver
- megoldások
- Megoldások
- néhány
- Nemsokára
- különleges
- meghatározott
- Színpad
- kezdet
- Állami
- nyilatkozat
- Lépés
- Lépései
- folyam
- szigorú
- stílus
- ilyen
- biztos
- szabott
- cél
- Technológia
- terminál
- teszt
- Tesztelés
- hogy
- A
- azok
- Őket
- akkor
- Ott.
- ebből adódóan
- ezt
- idő
- nak nek
- kiváltó
- váltott
- igaz
- Megbízható
- megpróbál
- FORDULAT
- kettő
- alatt
- aláhúzás
- Frissítés
- URL
- használ
- használt
- használó
- Felhasználók
- használ
- segítségével
- érték
- különféle
- változat
- Megnézem
- Látogat
- akar
- módon
- we
- háló
- webfejlesztés
- webes szolgáltatások
- honlapok
- fogadtatás
- JÓL
- amikor
- bármikor
- ami
- lesz
- val vel
- belül
- nélkül
- te
- A te
- zephyrnet