Utilizarea analizei încorporate de la Amazon QuickSight poate simplifica procesul de echipare a aplicației dvs. cu vizualizări funcționale fără nicio dezvoltare complexă. Există mai multe moduri de a încorpora tablourile de bord QuickSight în aplicație. În această postare, ne uităm la cum se poate face folosind React și Amazon QuickSight Embedding SDK.
Consumatorii tabloului de bord adesea nu au un utilizator alocat contului lor AWS și, prin urmare, nu au acces la tabloul de bord. Pentru a le permite să consume date, tabloul de bord trebuie să fie accesibil pentru utilizatorii anonimi. Să ne uităm la pașii necesari pentru a permite unui utilizator neautentificat să vadă tabloul de bord QuickSight în aplicația React.
Prezentare generală a soluțiilor
Soluția noastră folosește următoarele servicii cheie:
După încărcarea paginii web în browser, browserul efectuează un apel către API Gateway, care invocă o funcție Lambda care apelează API-ul QuickSight pentru a genera o adresă URL a tabloului de bord pentru un utilizator anonim. Funcția Lambda trebuie să își asume un rol IAM cu permisiunile necesare. Următoarea diagramă prezintă o privire de ansamblu asupra arhitecturii.
Cerințe preliminare
Trebuie să aveți următoarele condiții preliminare:
Configurați permisiuni pentru spectatorii neautentificați
În contul dvs., creați o politică IAM pe care aplicația dvs. o va prelua în numele utilizatorului:
- Pe consola IAM, alegeți Politicile în panoul de navigare.
- Alege Creare politică.
- Pe JSON fila, introduceți următorul cod de politică:
Asigurați-vă că modificați valoarea lui la valoarea ID-ului tabloului de bord. Rețineți acest ID pentru a fi folosit și într-un pas ulterior.
Pentru al doilea obiect de instrucțiune cu jurnalele, permisiunile sunt facultativ. Vă permite să creați un grup de jurnal cu numele specificat, să creați un flux de jurnal pentru grupul de jurnal specificat și să încărcați un lot de evenimente de jurnal în fluxul de jurnal specificat.
În această politică, permitem utilizatorului să efectueze GenerateEmbedUrlForAnonymousUser
acțiune asupra ID-ului tabloului de bord din lista ID-urilor tabloului de bord inserate în substituent.
- Introduceți un nume pentru politica dvs. (de exemplu,
AnonymousEmbedPolicy
) și alegeți Creare politică.
Apoi, creăm un rol și atașăm această politică rolului.
- Alege Roluri în panoul de navigare, apoi alegeți Creare rol.
- Alege Lambda pentru entitatea de încredere.
- Căutați și selectați
AnonymousEmbedPolicy
, Apoi alegeți Pagina Următoare →. - Introduceți un nume pentru rolul dvs., cum ar fi
AnonymousEmbedRole
. - Asigurați-vă că numele politicii este inclus în Adăugați permisiuni secţiune.
- Termină de creat rolul tău.
Tocmai ai creat AnonymousEmbedRole
rol de execuție. Acum puteți trece la pasul următor.
Generați o funcție Lambda de adresă URL încorporată anonimă
În acest pas, creăm o funcție Lambda care interacționează cu QuickSight pentru a genera o adresă URL încorporată pentru un utilizator anonim. Domeniul nostru trebuie permis. Există două moduri de a realiza integrarea Amazon QuickSight:
- Adăugând adresa URL la lista de domenii permise în consola de administrare Amazon QuickSight (explicată mai târziu în [Opțional] Adăugați domeniul dvs. în QuickSight secțiune).
- [Recomandat] Prin adăugarea solicitării URL de încorporare în timpul rulării în apelul API. Opțiunea 1 este recomandată atunci când trebuie să păstrați domeniile permise. În caz contrar, domeniile vor fi eliminate după 30 de minute, ceea ce este echivalent cu durata sesiunii. Pentru alte cazuri de utilizare, se recomandă utilizarea celei de-a doua opțiuni (descrisă și implementată mai jos).
Pe consola Lambda, creați o nouă funcție.
- Selectați Autor de la zero.
- Pentru Numele funcției, introduceți un nume, cum ar fi
AnonymousEmbedFunction
. - Pentru Runtime¸ alege Python 3.9.
- Pentru Rolul de execuție¸ alege Utilizați un rol existent.
- Alegeți rolul
AnonymousEmbedRole
. - Alege Funcție Creare.
- Pe pagina cu detaliile funcției, navigați la Cod fila și introduceți următorul cod:
Dacă nu utilizați localhost, înlocuiți http://localhost:3000
în returnările cu numele de gazdă al aplicației dvs. Pentru a trece la producție, nu uitați să înlocuiți http://localhost:3000
cu domeniul dvs.
- Pe Configuraţie filă, sub Configurație generală, alege Editati.
- Măriți timpul de expirare de la 3 secunde la 30 de secunde, apoi alegeți Economisiți.
- În Variabile de mediu, alege Editati.
- Adăugați următoarele variabile:
- Adăuga
DashboardIdList
și enumerați ID-urile tabloului de bord. - Adăuga
DashboardRegion
și introduceți Regiunea tabloului de bord.
- Adăuga
- Alege Economisiți.
Configurația dvs. ar trebui să arate similar cu următoarea captură de ecran.
- Pe Cod fila, alegeți Lansa pentru a implementa funcția.
Configurați API Gateway pentru a invoca funcția Lambda
Pentru a configura API Gateway pentru a invoca funcția pe care ați creat-o, parcurgeți următorii pași:
- Pe consola API Gateway, navigați la API-ul REST secțiune și alegeți Construi.
- În Creați un nou API, Selectați Noua API.
- Pentru Numele API, introduceți un nume (de exemplu,
QuicksightAnonymousEmbed
). - Alege Creați API.
- Pe Acţiuni meniu, alegeți Creați o resursă.
- Pentru Numele resursei, introduceți un nume (de exemplu,
anonymous-embed
).
Acum, să creăm o metodă.
- Alege
anonymous-embed
resursă și pe Acţiuni meniu, alegeți Creați o metodă. - Alege GET sub numele resursei.
- Pentru Tip de integrare, Selectați Lambda.
- Selectați Utilizați integrarea proxy Lambda.
- Pentru Funcția lambda, introduceți numele funcției pe care ați creat-o.
- Alege Economisiți, Apoi alegeți OK.
Acum suntem gata să implementăm API-ul.
- Pe Acţiuni meniu, alegeți Implementați API.
- Pentru Etapa de implementare, Selectați O nouă etapă.
- Introduceți un nume pentru etapa dvs., cum ar fi
embed
. - Alege Lansa.
[Opțional] Adăugați domeniul dvs. în QuickSight
Dacă ați adăugat domenii permise în Generați o funcție Lambda de adresă URL încorporată anonimă parte, nu ezitați să vă mutați Activați tarifarea capacității secţiune.
Pentru a adăuga domeniul dvs. la domeniile permise în QuickSight, parcurgeți următorii pași:
- Pe consola QuickSight, alegeți meniul utilizator, apoi alegeți Gestionați QuickSight.
- Alege Domenii și încorporare în panoul de navigare.
- Pentru domeniu, introduceți domeniul dvs. (
http://localhost:
).
Asigurați-vă că înlocuiți pentru a se potrivi configurației dvs. locale.
- Alege Adăuga.
Asigurați-vă că înlocuiți domeniul localhost cu cel pe care îl veți folosi după testare.
Activați tarifarea capacității
Dacă nu aveți activată prețul pentru capacitatea de sesiune, urmați pașii din această secțiune. Este obligatoriu să aveți această funcție activată pentru a continua.
Prețul de capacitate le permite clienților QuickSight să achiziționeze sesiuni de citire în vrac, fără a fi nevoiți să furnizeze cititoare individuale în QuickSight. Prețul de capacitate este ideal pentru aplicații încorporate sau implementări de business intelligence (BI) la scară largă. Pentru mai multe informații, vizitați Prețuri Amazon QuickSight.
Pentru a activa tarifarea capacității, parcurgeți următorii pași:
- Pe Gestionați QuickSight pagina, alege Abonamentele dvs. în panoul de navigare.
- În Prețul capacității secțiune, selectați Obțineți abonament lunar.
- Alege Confirmați abonamentul.
Pentru a afla mai multe despre tarifarea capacității, consultați Nou în Amazon QuickSight – prețuri pentru capacitatea de sesiune pentru implementări la scară largă, încorporare în site-uri web publice și portal pentru dezvoltatori pentru analiză încorporată.
Configurați aplicația React
Pentru a configura aplicația React, parcurgeți următorii pași:
- În folderul proiectului React, accesați directorul rădăcină și rulați
npm i amazon-quicksight-embedding-sdk
pentru a instala pachetul amazon-quicksight-embedding-sdk. - În tau
App.js
fișier, înlocuiți următoarele:- Înlocui
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
cu adresa URL de invocare a API Gateway și numele resursei (de exemplu,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Înlocui
YOUR_DASHBOARD1_ID
cu primul ID de bord de la dvsDashboardIdList
. Acesta este tabloul de bord care va fi afișat în randarea inițială. - Înlocui
YOUR_DASHBOARD2_ID
cu al doilea ID de bord de la dvsDashboardIdList
.
- Înlocui
Următorul fragment de cod arată un exemplu de App.js
fișier în proiectul dvs. React. Codul este o componentă React care încorporează un tablou de bord QuickSight pe baza ID-ului tabloului de bord selectat. Codul conține următoarele componente cheie:
- Cârlige de stat – Două cârlige de stare sunt definite folosind
useState()
cârlig de la React:- tablou de bord – Deține ID-ul tabloului de bord selectat în prezent.
- QuickSightEmbedding – Deține obiectul de încorporare QuickSight returnat de
embedDashboard()
Funcția.
- Cârlig de ref – Un cârlig de ref este definit utilizând
useRef()
cârlig de la React. Este folosit pentru a păstra o referință la elementul DOM în care va fi încorporat tabloul de bord QuickSight. - useEffect() cârlig – Cârligul useEffect() este folosit pentru a declanșa încorporarea tabloului de bord QuickSight ori de câte ori ID-ul tabloului de bord selectat se modifică. Mai întâi preia adresa URL a tabloului de bord pentru ID-ul selectat din API-ul QuickSight folosind metoda fetch(). După ce preia adresa URL, apelează funcția embed() cu URL-ul ca argument.
- Schimbați handler -
changeDashboard()
funcția este un simplu handler de evenimente care actualizează starea tabloului de bord ori de câte ori utilizatorul selectează un tablou de bord diferit din meniul derulant. De îndată ce este setat un nou ID de tablou de bord, se declanșează cârligul useEffect. - Timeout de 10 milisecunde – Scopul utilizării timeout-ului este de a introduce o mică întârziere de 10 milisecunde înainte de a efectua apelul API. Această întârziere poate fi utilă în scenariile în care doriți să evitați apelurile API imediate sau să preveniți solicitările excesive atunci când componenta este redată frecvent. Timeout-ul oferă componentei timp să se stabilească înainte de a iniția cererea API. Deoarece construim aplicația în modul de dezvoltare, timeout-ul ajută la evitarea erorilor cauzate de rularea dublă a
useEffect
înStrictMode
. Pentru mai multe informații, consultați Actualizări la modul strict.
Consultați următorul cod:
Apoi, înlocuiți conținutul dvs App.css
fișier, care este utilizat pentru stilarea și aspectul paginii dvs. web, cu conținutul din următorul fragment de cod:
Acum este timpul să vă testați aplicația. Porniți aplicația rulând npm start
în terminalul dvs. Următoarele capturi de ecran arată exemple ale aplicației dvs., precum și tablourile de bord pe care le poate afișa.
Concluzie
În această postare, v-am arătat cum să încorporați un tablou de bord QuickSight într-o aplicație React folosind AWS SDK. Partajarea tabloului de bord cu utilizatori anonimi le permite acestora să vă acceseze tabloul de bord fără a le acorda acces la contul dvs. AWS. Există, de asemenea, și alte modalități de a partaja tabloul de bord în mod anonim, cum ar fi utilizarea Încorporare publică cu 1 clic.
Alatura-te Comunitatea Quicksight să întrebe, să răspundă și să învețe împreună cu alții și să exploreze resurse suplimentare.
Despre autor
Adrianna este arhitect de soluții la AWS Global Financial Services. Făcând parte din Amazon din august 2018, ea a avut șansa de a fi implicată atât în operațiuni, cât și în business-ul cloud al companiei. În prezent, ea construiește active software care demonstrează utilizarea inovatoare a serviciilor AWS, adaptate pentru anumite cazuri de utilizare ale clienților. Zilnic, ea se implică activ cu diverse aspecte ale tehnologiei, dar adevărata ei pasiune constă în combinația dintre dezvoltarea web și analiza.
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
- PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
- PlatoESG. Automobile/VE-uri, carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
- BlockOffsets. Modernizarea proprietății de compensare a mediului. Accesați Aici.
- Sursa: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :are
- :este
- :Unde
- ][p
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Despre Noi
- acces
- accesibil
- Cont
- Obține
- Acțiune
- activ
- adăuga
- adăugat
- adăugare
- Suplimentar
- admin
- După
- TOATE
- permite
- permis
- permite
- de asemenea
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- Google Analytics
- și
- Anonim
- În mod anonim
- răspunde
- Orice
- api
- aplicaţia
- aplicație
- aplicatii
- arhitectură
- SUNT
- argument
- AS
- aspecte
- Bunuri
- alocate
- asuma
- At
- atașa
- August
- autor
- evita
- astept
- AWS
- bazat
- bază
- BE
- deoarece
- fost
- înainte
- folosul
- de mai jos
- corp
- atât
- browser-ul
- construi
- Clădire
- construiește
- afaceri
- business intelligence
- dar
- by
- apel
- apeluri
- CAN
- Capacitate
- cazuri
- cauzată
- Centru
- șansă
- Schimbare
- Modificări
- Alege
- client
- Cloud
- cod
- culoare
- combinaţie
- companie
- Completă
- complex
- component
- componente
- Configuraţie
- Consoleze
- consuma
- Consumatorii
- Recipient
- conține
- conţinut
- conținut
- context
- crea
- a creat
- Crearea
- CSS
- Curent
- În prezent
- client
- clienţii care
- zilnic
- tablou de bord
- tablouri de bord
- de date
- Mod implicit
- definit
- întârziere
- demonstra
- implementa
- implementări
- descris
- detalii
- Dezvoltator
- Dezvoltare
- diferit
- Afişa
- HOTĂRÂREA
- domeniu
- domenii
- făcut
- Dont
- dubla
- durată
- în timpul
- e
- efect
- element
- încastra
- încorporat
- Încorporarea
- permite
- activat
- se angajează
- Intrați
- entitate
- Mediu inconjurator
- Echivalent
- eroare
- Erori
- Eter (ETH)
- eveniment
- evenimente
- exemplu
- exemple
- Cu excepția
- excepție
- execuție
- existent
- a explicat
- explora
- exporturile
- simţi
- Fișier
- financiar
- Servicii financiare
- First
- urma
- următor
- Pentru
- Gratuit
- frecvent
- din
- funcţie
- funcțional
- mai mult
- poartă
- genera
- oferă
- Caritate
- financiar global
- Go
- acordarea
- grup
- HAD
- Avea
- având în
- anteturile
- înălțime
- ajută
- ei
- deţine
- deține
- cârlige
- planare
- Cum
- Cum Pentru a
- http
- HTTPS
- i
- IAM
- ID
- ideal
- Identitate
- ID-uri
- if
- imediat
- implementat
- import
- in
- inclus
- individ
- informații
- inițială
- inițierea
- inovatoare
- instala
- integrare
- Inteligență
- interactiv
- în
- introduce
- invocă
- implicat
- IT
- JSON
- doar
- Cheie
- lipsă
- mare
- pe scară largă
- mai tarziu
- Aspect
- AFLAȚI
- Nivel
- se află
- Listă
- încărcare
- local
- log
- Uite
- Principal
- FACE
- Efectuarea
- obligatoriu
- Margine
- Meci
- Meniu
- metodă
- minute
- mod
- lunar
- mai mult
- muta
- multiplu
- trebuie sa
- nume
- Navigaţi
- Navigare
- Nevoie
- nevoilor
- Nou
- următor
- normală.
- acum
- obiect
- of
- de multe ori
- on
- ONE
- Operațiuni
- Opțiune
- Opţiuni
- or
- Portocaliu
- OS
- Altele
- Altele
- in caz contrar
- al nostru
- Prezentare generală
- pachet
- pagină
- pâine
- parte
- pasiune
- efectua
- permisiuni
- alege
- înlocuitor
- Plato
- Informații despre date Platon
- PlatoData
- "vă rog"
- Politica
- Portal
- Post
- puternic
- premise
- împiedica
- de stabilire a prețurilor
- proces
- producere
- proiect
- dispoziţie
- împuternicit
- public
- cumpărare
- scop
- RE
- Reacţiona
- Cititor
- cititori
- gata
- recomandat
- regiune
- îndepărtat
- face
- înlocui
- solicita
- cereri de
- necesar
- resursă
- Resurse
- răspuns
- reveni
- Returnează
- Rol
- rădăcină
- Alerga
- funcţionare
- Scară
- scenarii
- capturi de ecran
- sdk
- Al doilea
- secunde
- Secțiune
- vedea
- selectate
- Servicii
- sesiune
- Sesiunile
- set
- rezolva
- configurarea
- Distribuie
- partajarea
- ea
- să
- Arăta
- a arătat
- indicat
- Emisiuni
- asemănător
- simplu
- simplifica
- întrucât
- mic
- Software
- soluţie
- soluţii
- unele
- Curând
- specific
- specificată
- Etapă
- Începe
- Stat
- Declarație
- Pas
- paşi
- curent
- strict
- stil
- astfel de
- sigur
- adaptate
- Ţintă
- Tehnologia
- Terminal
- test
- Testarea
- acea
- lor
- Lor
- apoi
- Acolo.
- prin urmare
- acest
- timp
- la
- declanşa
- a declanșat
- adevărat
- de încredere
- încerca
- ÎNTORCĂ
- Două
- în
- sublinia
- actualizări
- URL-ul
- utilizare
- utilizat
- Utilizator
- utilizatorii
- utilizări
- folosind
- valoare
- diverse
- versiune
- Vizualizare
- Vizita
- vrea
- modalități de
- we
- web
- dezvoltare web
- servicii web
- site-uri web
- bun venit
- BINE
- cand
- oricând
- care
- voi
- cu
- în
- fără
- tu
- Ta
- zephyrnet