Upotetun analytiikan käyttäminen kohteesta Amazon QuickSight voi yksinkertaistaa prosessia sovelluksesi varustamiseksi toiminnallisilla visualisoinneilla ilman monimutkaista kehitystä. On olemassa useita tapoja upottaa QuickSight-koontinäyttöjä sovellukseen. Tässä viestissä tarkastelemme, kuinka se voidaan tehdä käyttämällä Reactia ja Amazon QuickSight Embedding SDK.
Dashboard-kuluttajilla ei usein ole AWS-tililleen määritettyä käyttäjää, joten heillä ei ole pääsyä kojelautaan. Jotta he voivat kuluttaa tietoja, kojelaudan on oltava anonyymien käyttäjien käytettävissä. Katsotaanpa vaiheita, joita tarvitaan, jotta todentamaton käyttäjä voi tarkastella QuickSight-hallintapaneelia React-sovelluksessasi.
Ratkaisun yleiskatsaus
Ratkaisumme käyttää seuraavia avainpalveluita:
Kun verkkosivu on ladattu selaimeen, selain soittaa API Gatewaylle, joka kutsuu Lambda-funktion, joka kutsuu QuickSight API:n luomaan kojelaudan URL-osoitteen nimettömälle käyttäjälle. Lambda-funktion on otettava IAM-rooli vaadituilla käyttöoikeuksilla. Seuraava kaavio näyttää yleiskatsauksen arkkitehtuurista.
Edellytykset
Sinulla tulee olla seuraavat edellytykset:
Määritä käyttöoikeudet todentamattomille katsojille
Luo tilillesi IAM-käytäntö, jonka sovelluksesi olettaa katsojan puolesta:
- Valitse IAM-konsolista säännöt navigointipaneelissa.
- Valita Luo käytäntö.
- On JSON -välilehti, anna seuraava käytäntökoodi:
Muista muuttaa arvoa kojelaudan tunnuksen arvoon. Huomaa tämä tunnus käytettäväksi myös myöhemmässä vaiheessa.
Toisen lokeja sisältävän lausekkeen käyttöoikeudet ovat valinnainen. Sen avulla voit luoda lokiryhmän määritetyllä nimellä, luoda lokivirran määritetylle lokiryhmälle ja ladata lokitapahtumien erän määritettyyn lokivirtaan.
Tässä käytännössä sallimme käyttäjän suorittaa GenerateEmbedUrlForAnonymousUser
toiminto kojelaudan tunnuksella paikkamerkkiin lisätyn kojelautatunnusten luettelon sisällä.
- Anna käytännöllesi nimi (esim.
AnonymousEmbedPolicy
) ja valitse Luo käytäntö.
Seuraavaksi luomme roolin ja liitämme tämän käytännön rooliin.
- Valita Roolit navigointiruudussa ja valitse sitten Luo rooli.
- Valita Lambda luotettavalle taholle.
- Etsi ja valitse
AnonymousEmbedPolicy
, valitse sitten seuraava. - Anna roolillesi nimi, esim
AnonymousEmbedRole
. - Varmista, että käytännön nimi on sisällytetty Lisää käyttöoikeudet osiossa.
- Viimeistele roolisi luominen.
Olet juuri luonut AnonymousEmbedRole
suoritusrooli. Nyt voit siirtyä seuraavaan vaiheeseen.
Luo anonyymi upotus-URL-osoite Lambda-funktio
Tässä vaiheessa luomme Lambda-funktion, joka on vuorovaikutuksessa QuickSightin kanssa ja luo upotus-URL-osoitteen anonyymille käyttäjälle. Verkkotunnuksemme on sallittava. Amazon QuickSightin integroimiseen on kaksi tapaa:
- Lisäämällä URL-osoitteen sallittujen verkkotunnusten luetteloon Amazon QuickSight -hallintakonsolissa (selvitetty myöhemmin [Valinnainen] Lisää verkkotunnuksesi QuickSightiin kohta).
- [Suositus] Lisäämällä upotus-URL-pyynnön ajon aikana API-kutsussa. Vaihtoehtoa 1 suositellaan, kun haluat säilyttää sallitut verkkotunnukset. Muussa tapauksessa verkkotunnukset poistetaan 30 minuutin kuluttua, mikä vastaa istunnon kestoa. Muissa käyttötapauksissa on suositeltavaa käyttää toista vaihtoehtoa (kuvattu ja toteutettu alla).
Luo uusi toiminto Lambda-konsolissa.
- valita Kirjailija tyhjästä.
- varten Toiminnon nimi, kirjoita nimi, kuten
AnonymousEmbedFunction
. - varten Runtime¸ valitse Python 3.9.
- varten Suoritusrooli¸ valitse Käytä olemassa olevaa roolia.
- Valitse rooli
AnonymousEmbedRole
. - Valita Luo toiminto.
- Siirry toiminnon tietosivulla kohtaan Koodi -välilehti ja anna seuraava koodi:
Jos et käytä localhostia, vaihda http://localhost:3000
palautuksissa sovelluksesi isäntänimellä. Siirtyäksesi tuotantoon, älä unohda vaihtaa http://localhost:3000
verkkotunnuksesi kanssa.
- On Konfigurointi välilehti Yleinen kokoonpano, valitse muokata.
- Lisää aikakatkaisua 3 sekunnista 30 sekuntiin ja valitse sitten Säästä.
- Alle Ympäristömuuttujat, valitse muokata.
- Lisää seuraavat muuttujat:
- Lisää
DashboardIdList
ja luettele kojelaudan tunnukset. - Lisää
DashboardRegion
ja kirjoita kojelaudan alue.
- Lisää
- Valita Säästä.
Kokoonpanosi pitäisi näyttää samanlaiselta kuin seuraava kuvakaappaus.
- On Koodi välilehti, valitse Sijoittaa ottaaksesi toiminnon käyttöön.
Määritä API Gateway kutsumaan Lambda-toiminto
Voit määrittää API-yhdyskäytävän kutsumaan luomaasi funktiota suorittamalla seuraavat vaiheet:
- Siirry API Gateway -konsolissa kohtaan REST API ja valitse Rakentaa.
- Alle Luo uusi APIvalitse Uusi sovellusliittymä.
- varten API-nimi, kirjoita nimi (esimerkiksi
QuicksightAnonymousEmbed
). - Valita Luo sovellusliittymä.
- On Toiminnot valikosta, valitse Luo resurssi.
- varten Resurssin nimi, kirjoita nimi (esimerkiksi
anonymous-embed
).
Luodaan nyt menetelmä.
- Valitse
anonymous-embed
resurssi ja Toiminnot valikosta, valitse Luo menetelmä. - Valita SAA resurssin nimen alla.
- varten Integrointityyppivalitse Lambda.
- valita Käytä Lambda-välityspalvelinintegraatiota.
- varten Lambda toiminto, kirjoita luomasi funktion nimi.
- Valita Säästä, valitse sitten OK.
Nyt olemme valmiita ottamaan API:n käyttöön.
- On Toiminnot valikosta, valitse Ota sovellusliittymä käyttöön.
- varten Käyttöönottovaihevalitse Uusi vaihe.
- Anna lavallesi nimi, esim
embed
. - Valita Sijoittaa.
[Valinnainen] Lisää verkkotunnuksesi QuickSightiin
Jos lisäsit Sallitut verkkotunnukset Luo anonyymi upotus-URL-osoite Lambda-funktio osa, siirry vapaasti Ota kapasiteetin hinnoittelu käyttöön osiossa.
Voit lisätä verkkotunnuksesi QuickSightin sallittuihin verkkotunnuksiin seuraavasti:
- Valitse QuickSight-konsolissa käyttäjävalikko ja valitse sitten Hallitse QuickSightia.
- Valita Verkkotunnukset ja upottaminen navigointipaneelissa.
- varten Domain, anna verkkotunnuksesi (
http://localhost:
).
Varmista, että vaihdat vastaamaan paikallisia asetuksiasi.
- Valita Lisää.
Muista korvata localhost-verkkotunnus sillä, jota käytät testauksen jälkeen.
Ota kapasiteetin hinnoittelu käyttöön
Jos istunnon kapasiteetin hinnoittelua ei ole otettu käyttöön, noudata tämän osion ohjeita. Tämän toiminnon käyttöönotto on pakollista jatkaaksesi eteenpäin.
Kapasiteetin hinnoittelun ansiosta QuickSight-asiakkaat voivat ostaa lukuistuntoja kerralla ilman, että heidän tarvitsee tarjota yksittäisiä lukijoita QuickSightissa. Kapasiteetin hinnoittelu on ihanteellinen sulautetuille sovelluksille tai suuren mittakaavan liiketoimintatiedon (BI) käyttöönotolle. Lisätietoja on osoitteessa Amazon QuickSight -hinnoittelu.
Ota kapasiteetin hinnoittelu käyttöön suorittamalla seuraavat vaiheet:
- On Hallitse QuickSightia sivu, valitse Tilauksesi navigointipaneelissa.
- In Kapasiteetin hinnoittelu , valitse Hanki kuukausitilaus.
- Valita Vahvista tilaus.
Lisätietoja kapasiteetin hinnoittelusta on kohdassa Uutta Amazon QuickSightissa – istuntokapasiteetin hinnoittelu laajamittaisille käyttöönottoille, upottaminen julkisille verkkosivustoille ja kehittäjäportaali sulautettua analytiikkaa varten.
Määritä React-sovellus
Voit määrittää React-sovelluksesi suorittamalla seuraavat vaiheet:
- Siirry React-projektikansiossasi juurihakemistoosi ja suorita
npm i amazon-quicksight-embedding-sdk
asentaaksesi paketin amazon-quicksight-embedding-sdk. - Teidän
App.js
tiedosto, korvaa seuraavat:- korvata
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
API-yhdyskäytävän kutsu-URL-osoitteesi ja resurssinimesi kanssa (esim.https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - korvata
YOUR_DASHBOARD1_ID
ensimmäisellä dashboardID-tunnuksellasiDashboardIdList
. Tämä on kojelauta, joka näytetään alkuperäisessä renderöinnissa. - korvata
YOUR_DASHBOARD2_ID
toisella dashboardId-tunnuksellasiDashboardIdList
.
- korvata
Seuraava koodinpätkä näyttää esimerkin App.js
tiedosto React-projektissasi. Koodi on React-komponentti, joka upottaa QuickSight-hallintapaneelin valitun kojelautatunnuksen perusteella. Koodi sisältää seuraavat avainkomponentit:
- Valtion koukut – Kaksi tilakoukkua määritetään käyttämällä
useState()
koukku Reactista:- kojelauta – Sisältää valitun kojelaudan tunnuksen.
- quickSightEmbedding – Säilyttää QuickSight-upotusobjektin, jonka palauttaa
embedDashboard()
toiminto.
- Viitekoukku – Ref-hook määritellään käyttämällä
useRef()
koukku Reactilta. Sitä käytetään pitämään viittaus DOM-elementtiin, johon QuickSight-hallintapaneeli upotetaan. - useEffect()-koukku – UseEffect()-koukkua käytetään QuickSight-kojelaudan upotuksen käynnistämiseen aina, kun valittu kojelaudan tunnus muuttuu. Se hakee ensin valitun tunnuksen kojelaudan URL-osoitteen QuickSight API:sta fetch()-menetelmällä. Kun se on noutanut URL-osoitteen, se kutsuu embed()-funktiota URL-osoitteen argumenttina.
- Vaihda käsittelijää -
changeDashboard()
-toiminto on yksinkertainen tapahtumakäsittelijä, joka päivittää kojelaudan tilan aina, kun käyttäjä valitsee toisen kojelaudan avattavasta valikosta. Heti kun uusi kojelaudan tunnus on asetettu, useEffect-koukku laukeaa. - 10 millisekunnin aikakatkaisu – Aikakatkaisun käytön tarkoituksena on ottaa käyttöön pieni 10 millisekunnin viive ennen API-kutsua. Tämä viive voi olla hyödyllinen tilanteissa, joissa haluat välttää välittömiä API-kutsuja tai estää liialliset pyynnöt, kun komponentti renderöityy usein. Aikakatkaisu antaa komponentille jonkin aikaa asettua ennen API-pyynnön aloittamista. Koska rakennamme sovellusta kehitystilassa, aikakatkaisu auttaa välttämään kaksoisajon aiheuttamia virheitä
useEffect
sisälläStrictMode
. Lisätietoja on kohdassa Päivitykset tiukkaan tilaan.
Katso seuraava koodi:
Vaihda seuraavaksi laitteesi sisältö App.css
-tiedosto, jota käytetään verkkosivusi tyyliin ja asetteluun, ja joka sisältää seuraavan koodinpätkän sisällön:
Nyt on aika testata sovellustasi. Käynnistä sovellus suorittamalla npm start
terminaalissasi. Seuraavissa kuvakaappauksissa on esimerkkejä sovelluksestasi sekä hallintapaneeleista, joita se voi näyttää.
Yhteenveto
Tässä viestissä näytimme sinulle, kuinka QuickSight-hallintapaneeli upotetaan React-sovellukseen AWS SDK:n avulla. Kun jaat hallintapaneelisi nimettömien käyttäjien kanssa, he voivat käyttää hallintapaneeliasi myöntämättä heille pääsyä AWS-tiliisi. On myös muita tapoja jakaa kojelautasi nimettömästi, kuten käyttämällä Julkinen upotus yhdellä napsautuksella.
Liity Quicksight-yhteisö kysyä, vastata ja oppia muiden kanssa ja tutkia lisäresursseja.
kirjailijasta
Adrianna on ratkaisuarkkitehti AWS Global Financial Servicesissä. Elokuusta 2018 lähtien osana Amazonia hänellä on ollut mahdollisuus olla mukana sekä yrityksen toiminnassa että pilviliiketoiminnassa. Tällä hetkellä hän rakentaa ohjelmistoresursseja, jotka osoittavat AWS-palveluiden innovatiivisen käytön, räätälöitynä tiettyihin asiakaskäyttötapauksiin. Hän on päivittäin aktiivisesti tekemisissä teknologian eri puolilla, mutta hänen todellinen intohimonsa piilee verkkokehityksen ja analytiikan yhdistämisessä.
- SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
- PlatoData.Network Vertical Generatiivinen Ai. Vahvista itseäsi. Pääsy tästä.
- PlatoAiStream. Web3 Intelligence. Tietoa laajennettu. Pääsy tästä.
- PlatoESG. Autot / sähköautot, hiili, CleanTech, energia, ympäristö, Aurinko, Jätehuolto. Pääsy tästä.
- BlockOffsets. Ympäristövastuun omistuksen nykyaikaistaminen. Pääsy tästä.
- Lähde: 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
- :missä
- ][s
- $ YLÖS
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Meistä
- pääsy
- saatavilla
- Tili
- Saavuttaa
- Toiminta
- aktiivisesti
- lisätä
- lisä-
- lisää
- lisä-
- admin
- Jälkeen
- Kaikki
- sallia
- sallittu
- mahdollistaa
- Myös
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- Analytics
- ja
- anonyymi
- nimettömänä
- vastaus
- Kaikki
- api
- sovelluksen
- Hakemus
- sovellukset
- arkkitehtuuri
- OVAT
- perustelu
- AS
- näkökohdat
- Varat
- osoitettu
- olettaa
- At
- liittää
- Elokuu
- kirjoittaja
- välttää
- odottaa
- AWS
- perustua
- perusta
- BE
- koska
- ollut
- ennen
- puolesta
- alle
- elin
- sekä
- selain
- rakentaa
- Rakentaminen
- rakentaa
- liiketoiminta
- bisnesvaisto
- mutta
- by
- soittaa
- Puhelut
- CAN
- Koko
- tapauksissa
- aiheutti
- keskus
- mahdollisuus
- muuttaa
- Muutokset
- Valita
- asiakas
- pilvi
- koodi
- väri
- yhdistelmä
- yritys
- täydellinen
- monimutkainen
- komponentti
- osat
- Konfigurointi
- Console
- kuluttaa
- Kuluttajat
- Kontti
- sisältää
- pitoisuus
- sisältö
- tausta
- luoda
- luotu
- Luominen
- CSS
- Nykyinen
- Tällä hetkellä
- asiakas
- Asiakkaat
- päivittäin
- kojelauta
- mittaristot
- tiedot
- oletusarvo
- määritelty
- viivyttää
- osoittaa
- sijoittaa
- käyttöönotot
- on kuvattu
- yksityiskohdat
- Kehittäjä
- Kehitys
- eri
- näyttö
- DOM
- verkkotunnuksen
- verkkotunnuksia
- tehty
- Dont
- kaksinkertainen
- kesto
- aikana
- e
- vaikutus
- elementti
- Upottaa
- upotettu
- upottamisen
- mahdollistaa
- käytössä
- tarttuu
- enter
- kokonaisuus
- ympäristö
- Vastaava
- virhe
- virheet
- Eetteri (ETH)
- tapahtuma
- Tapahtumat
- esimerkki
- Esimerkit
- Paitsi
- poikkeus
- teloitus
- olemassa
- selitti
- tutkia
- vienti
- tuntea
- filee
- taloudellinen
- rahoituspalvelut
- Etunimi
- seurata
- jälkeen
- varten
- Ilmainen
- usein
- alkaen
- toiminto
- toiminnallinen
- edelleen
- portti
- tuottaa
- antaa
- Global
- globaali rahoitus
- Go
- myöntäminen
- Ryhmä
- HAD
- Olla
- ottaa
- otsikot
- korkeus
- auttaa
- hänen
- pitää
- pitää
- Koukut
- liihottaa
- Miten
- Miten
- http
- HTTPS
- i
- IAM
- ID
- ihanteellinen
- Identiteetti
- ids
- if
- Välitön
- täytäntöön
- tuoda
- in
- mukana
- henkilökohtainen
- tiedot
- ensimmäinen
- aloittamista
- innovatiivinen
- asentaa
- integraatio
- Älykkyys
- vuorovaikutuksessa
- tulee
- esitellä
- vedotaan
- osallistuva
- IT
- json
- vain
- avain
- Lack
- suuri
- laaja
- myöhemmin
- Layout
- OPPIA
- Taso
- piilee
- Lista
- lastaus
- paikallinen
- log
- katso
- tärkein
- TEE
- Tekeminen
- pakollinen
- Marginaali
- ottelu
- valikko
- menetelmä
- pöytäkirja
- tila
- kuukausittain
- lisää
- liikkua
- moninkertainen
- täytyy
- nimi
- Navigoida
- suunnistus
- Tarve
- tarpeet
- Uusi
- seuraava
- normaali
- nyt
- objekti
- of
- usein
- on
- ONE
- Operations
- Vaihtoehto
- Vaihtoehdot
- or
- Oranssi
- OS
- Muut
- Muuta
- muuten
- meidän
- yleiskatsaus
- paketti
- sivulla
- lasi
- osa
- intohimo
- suorittaa
- Oikeudet
- poimia
- placeholder
- Platon
- Platonin tietotieto
- PlatonData
- Ole hyvä
- politiikka
- Portal
- Kirje
- voimakas
- edellytyksiä
- estää
- hinnoittelu
- prosessi
- tuotanto
- projekti
- säännös
- valtuutettu
- julkinen
- osto
- tarkoitus
- RE
- suhtautua
- lukija
- lukijoita
- valmis
- suositeltu
- alue
- poistettu
- tekee
- korvata
- pyyntö
- pyynnöt
- tarvitaan
- resurssi
- Esittelymateriaalit
- vastaus
- palata
- Tuotto
- Rooli
- juuri
- ajaa
- juoksu
- Asteikko
- skenaariot
- kuvakaappauksia
- sdk
- Toinen
- sekuntia
- Osa
- nähdä
- valittu
- Palvelut
- Istunto
- istuntoja
- setti
- laskeutua
- setup
- Jaa:
- jakaminen
- hän
- shouldnt
- näyttää
- osoittivat
- esitetty
- Näytä
- samankaltainen
- Yksinkertainen
- yksinkertaistaa
- koska
- pieni
- Tuotteemme
- ratkaisu
- Ratkaisumme
- jonkin verran
- Pian
- erityinen
- määritelty
- Vaihe
- Alkaa
- Osavaltio
- Lausunto
- Vaihe
- Askeleet
- virta
- tiukka
- tyyli
- niin
- varma
- Räätälöity
- Kohde
- Elektroniikka
- terminaali
- testi
- Testaus
- että
- -
- heidän
- Niitä
- sitten
- Siellä.
- siksi
- tätä
- aika
- että
- laukaista
- laukeaa
- totta
- luotettu
- yrittää
- VUORO
- kaksi
- varten
- korostaa
- Päivitykset
- URL
- käyttää
- käytetty
- käyttäjä
- Käyttäjät
- käyttötarkoituksiin
- käyttämällä
- arvo
- eri
- versio
- Näytä
- Vierailla
- haluta
- tavalla
- we
- verkko
- Web-kehitys
- verkkopalvelut
- sivustot
- tervetuloa
- HYVIN
- kun
- aina kun
- joka
- tulee
- with
- sisällä
- ilman
- te
- Sinun
- zephyrnet