Menggunakan analitik tersemat dari Amazon QuickSight dapat menyederhanakan proses melengkapi aplikasi Anda dengan visualisasi fungsional tanpa pengembangan yang rumit. Ada beberapa cara untuk menyematkan dasbor QuickSight ke dalam aplikasi. Dalam posting ini, kita melihat bagaimana hal itu dapat dilakukan dengan menggunakan React dan SDK Penyematan Amazon QuickSight.
Konsumen dasbor sering tidak memiliki pengguna yang ditetapkan ke akun AWS mereka dan oleh karena itu tidak memiliki akses ke dasbor. Agar mereka dapat menggunakan data, dasbor harus dapat diakses oleh pengguna anonim. Mari kita lihat langkah-langkah yang diperlukan untuk mengaktifkan pengguna yang tidak diautentikasi untuk melihat dasbor QuickSight Anda di aplikasi React Anda.
Ikhtisar solusi
Solusi kami menggunakan layanan utama berikut:
Setelah memuat halaman web di browser, browser melakukan panggilan ke API Gateway, yang memanggil fungsi Lambda yang memanggil QuickSight API untuk menghasilkan URL dasbor untuk pengguna anonim. Fungsi Lambda harus menjalankan peran IAM dengan izin yang diperlukan. Diagram berikut menunjukkan ikhtisar arsitektur.
Prasyarat
Anda harus memiliki prasyarat berikut:
Siapkan izin untuk pemirsa yang tidak diautentikasi
Di akun Anda, buat kebijakan IAM yang akan diterapkan oleh aplikasi Anda atas nama pemirsa:
- Di konsol IAM, pilih Kebijakan di panel navigasi.
- Pilih Buat kebijakan.
- pada JSON tab, masukkan kode kebijakan berikut:
Pastikan untuk mengubah nilai dari ke nilai ID dasbor. Catat juga ID ini untuk digunakan di langkah selanjutnya.
Untuk objek pernyataan kedua dengan log, izinnya adalah opsional. Ini memungkinkan Anda untuk membuat grup log dengan nama yang ditentukan, membuat aliran log untuk grup log yang ditentukan, dan mengunggah kumpulan peristiwa log ke aliran log yang ditentukan.
Dalam kebijakan ini, kami mengizinkan pengguna untuk melakukan GenerateEmbedUrlForAnonymousUser
tindakan pada ID dasbor dalam daftar ID dasbor yang disisipkan di placeholder.
- Masukkan nama untuk kebijakan Anda (misalnya,
AnonymousEmbedPolicy
) dan pilih Buat kebijakan.
Selanjutnya, kami membuat peran dan melampirkan kebijakan ini ke peran tersebut.
- Pilih Peran di panel navigasi, lalu pilih Buat peran.
- Pilih Lambda untuk entitas tepercaya.
- Cari dan pilih
AnonymousEmbedPolicy
, Lalu pilih Selanjutnya. - Masukkan nama untuk peran Anda, seperti
AnonymousEmbedRole
. - Pastikan nama kebijakan disertakan dalam Tambahkan izin bagian.
- Selesaikan pembuatan peran Anda.
Anda baru saja membuat AnonymousEmbedRole
peran eksekusi. Anda sekarang dapat pindah ke langkah berikutnya.
Hasilkan fungsi Lambda URL sematan anonim
Pada langkah ini, kami membuat fungsi Lambda yang berinteraksi dengan QuickSight untuk membuat URL semat untuk pengguna anonim. Domain kami harus diizinkan. Ada dua cara untuk mencapai integrasi Amazon QuickSight:
- Dengan menambahkan URL ke daftar domain yang diizinkan di konsol admin Amazon QuickSight (dijelaskan nanti di [Opsional] Tambahkan domain Anda di QuickSight bagian).
- [Direkomendasikan] Dengan menambahkan permintaan embed URL selama runtime di panggilan API. Opsi 1 disarankan saat Anda perlu mempertahankan domain yang diizinkan. Jika tidak, domain akan dihapus setelah 30 menit, yang setara dengan durasi sesi. Untuk kasus penggunaan lainnya, disarankan untuk menggunakan opsi kedua (dijelaskan dan diimplementasikan di bawah).
Di konsol Lambda, buat fungsi baru.
- Pilih Penulis dari awal.
- Untuk Nama fungsi, masukkan nama, seperti
AnonymousEmbedFunction
. - Untuk Runtime¸ pilih Python 3.9.
- Untuk Peran eksekusi¸ pilih Gunakan peran yang ada.
- Pilih perannya
AnonymousEmbedRole
. - Pilih Buat fungsi.
- Pada halaman detail fungsi, navigasikan ke Kode tab dan masukkan kode berikut:
Jika Anda tidak menggunakan localhost, ganti http://localhost:3000
di bagian pengembalian dengan nama host aplikasi Anda. Untuk pindah ke produksi, jangan lupa ganti http://localhost:3000
dengan domain Anda.
- pada konfigurasi tab, di bawah Konfigurasi umum, pilih Edit.
- Tingkatkan batas waktu dari 3 detik menjadi 30 detik, lalu pilih Save.
- Bawah Variabel lingkungan, pilih Edit.
- Tambahkan variabel berikut:
- Add
DashboardIdList
dan daftarkan ID dasbor Anda. - Add
DashboardRegion
dan masukkan Wilayah dasbor Anda.
- Add
- Pilih Save.
Konfigurasi Anda akan terlihat mirip dengan tangkapan layar berikut.
- pada Kode tab, pilih Menyebarkan untuk menyebarkan fungsi.
Siapkan API Gateway untuk menjalankan fungsi Lambda
Untuk menyiapkan API Gateway untuk menjalankan fungsi yang Anda buat, selesaikan langkah-langkah berikut:
- Di konsol API Gateway, navigasikan ke SISA API bagian dan pilih Membangun.
- Bawah Buat API baru, pilih API baru.
- Untuk Nama API, masukkan nama (misalnya,
QuicksightAnonymousEmbed
). - Pilih Buat API.
- pada tindakan menu, pilih Buat sumber daya.
- Untuk Nama Sumberdaya, masukkan nama (misalnya,
anonymous-embed
).
Sekarang, mari kita buat sebuah metode.
- Pilih
anonymous-embed
sumber daya dan di tindakan menu, pilih Buat metode. - Pilih DAPATKAN di bawah nama sumber daya.
- Untuk Jenis integrasi, pilih Lambda.
- Pilih Gunakan Integrasi Proxy Lambda.
- Untuk Fungsi Lambda, masukkan nama fungsi yang Anda buat.
- Pilih Save, Lalu pilih OK.
Sekarang kami siap menerapkan API.
- pada tindakan menu, pilih Terapkan API.
- Untuk Tahap penerapan, pilih Panggung baru.
- Masukkan nama untuk panggung Anda, seperti
embed
. - Pilih Menyebarkan.
[Opsional] Tambahkan domain Anda di QuickSight
Jika Anda menambahkan domain yang diizinkan di Hasilkan fungsi Lambda URL sematan anonim bagian, jangan ragu untuk pindah ke Aktifkan penetapan harga kapasitas bagian.
Untuk menambahkan domain Anda ke domain yang diizinkan di QuickSight, selesaikan langkah-langkah berikut:
- Di konsol QuickSight, pilih menu pengguna, lalu pilih Kelola QuickSight.
- Pilih Domain dan Penyematan di panel navigasi.
- Untuk Domain, masukkan domain Anda (
http://localhost:
).
Pastikan untuk mengganti untuk mencocokkan pengaturan lokal Anda.
- Pilih Add.
Pastikan untuk mengganti domain localhost dengan domain yang akan Anda gunakan setelah pengujian.
Aktifkan penetapan harga kapasitas
Jika Anda tidak mengaktifkan harga kapasitas sesi, ikuti langkah-langkah di bagian ini. Ini wajib untuk mengaktifkan fungsi ini untuk melanjutkan lebih jauh.
Harga kapasitas memungkinkan pelanggan QuickSight untuk membeli sesi pembaca dalam jumlah besar tanpa harus menyediakan pembaca individual di QuickSight. Penetapan harga kapasitas sangat ideal untuk aplikasi yang disematkan atau penyebaran kecerdasan bisnis (BI) skala besar. Untuk informasi lebih lanjut, kunjungi Harga Amazon QuickSight.
Untuk mengaktifkan harga kapasitas, selesaikan langkah-langkah berikut:
- pada Kelola QuickSight halaman, pilih Langganan Anda di panel navigasi.
- Dalam majalah Harga kapasitas bagian, pilih Dapatkan langganan bulanan.
- Pilih Konfirmasi langganan.
Untuk mempelajari lebih lanjut tentang harga kapasitas, lihat Baru di Amazon QuickSight – harga kapasitas sesi untuk penerapan skala besar, penyematan di situs web publik, dan portal pengembang untuk analitik tersemat.
Siapkan aplikasi React Anda
Untuk menyiapkan aplikasi React Anda, selesaikan langkah-langkah berikut:
- Di folder proyek React Anda, buka direktori root Anda dan jalankan
npm i amazon-quicksight-embedding-sdk
untuk menginstal paket amazon-quicksight-embedding-sdk. - Dalam Anda
App.js
file, ganti yang berikut ini:- menggantikan
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
dengan URL pemanggilan API Gateway dan nama sumber daya Anda (misalnya,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - menggantikan
YOUR_DASHBOARD1_ID
dengan dashboardId pertama dari AndaDashboardIdList
. Ini adalah dashboard yang akan ditampilkan pada render awal. - menggantikan
YOUR_DASHBOARD2_ID
dengan dashboardId kedua dari AndaDashboardIdList
.
- menggantikan
Cuplikan kode berikut menunjukkan contoh dari App.js
file dalam proyek Bereaksi Anda. Kode tersebut adalah komponen React yang menyematkan dasbor QuickSight berdasarkan ID dasbor yang dipilih. Kode berisi komponen kunci berikut:
- Kait negara – Dua kait negara didefinisikan menggunakan
useState()
kait dari Bereaksi:- dasbor – Menyimpan ID dasbor yang saat ini dipilih.
- quickSightEmbedding – Memegang objek penyematan QuickSight yang dikembalikan oleh
embedDashboard()
fungsi.
- Kait referensi – Kait referensi ditentukan menggunakan the
useRef()
kait dari Bereaksi. Ini digunakan untuk menyimpan referensi ke elemen DOM tempat dasbor QuickSight akan disematkan. - useEffect() pengait – Kait useEffect() digunakan untuk memicu penyematan dasbor QuickSight setiap kali ID dasbor yang dipilih berubah. Ini pertama-tama mengambil URL dasbor untuk ID yang dipilih dari QuickSight API menggunakan metode fetch(). Setelah mengambil URL, ia memanggil fungsi embed() dengan URL sebagai argumennya.
- Ubah penangan - The
changeDashboard()
function adalah pengendali kejadian sederhana yang memperbarui status dasbor setiap kali pengguna memilih dasbor yang berbeda dari menu drop-down. Segera setelah ID dasbor baru disetel, kait useEffect dipicu. - Batas waktu 10 milidetik – Tujuan penggunaan batas waktu adalah untuk memperkenalkan penundaan kecil 10 milidetik sebelum melakukan panggilan API. Penundaan ini dapat berguna dalam skenario di mana Anda ingin menghindari panggilan API langsung atau mencegah permintaan berlebihan saat komponen sering dirender. Batas waktu memberi komponen waktu untuk menyelesaikan sebelum memulai permintaan API. Karena kami sedang membangun aplikasi dalam mode pengembangan, batas waktu membantu menghindari kesalahan yang disebabkan oleh proses ganda
useEffect
dalamStrictMode
. Untuk informasi lebih lanjut, lihat Pembaruan ke Mode Ketat.
Lihat kode berikut:
Selanjutnya, ganti konten Anda App.css
file, yang digunakan untuk mengatur gaya dan tata letak halaman web Anda, dengan konten dari cuplikan kode berikut:
Sekarang saatnya menguji aplikasi Anda. Mulai aplikasi Anda dengan menjalankan npm start
di terminal Anda. Tangkapan layar berikut menampilkan contoh aplikasi Anda serta dasbor yang dapat ditampilkannya.
Kesimpulan
Dalam postingan ini, kami menunjukkan cara menyematkan dasbor QuickSight ke dalam aplikasi React menggunakan AWS SDK. Berbagi dasbor Anda dengan pengguna anonim memungkinkan mereka mengakses dasbor Anda tanpa memberi mereka akses ke akun AWS Anda. Ada juga cara lain untuk membagikan dasbor Anda secara anonim, seperti menggunakan Penyematan publik 1-klik.
bergabung dengan Komunitas Quicksight untuk bertanya, menjawab dan belajar dengan orang lain dan mengeksplorasi sumber daya tambahan.
tentang Penulis
Adrianna adalah Arsitek Solusi di AWS Global Financial Services. Telah menjadi bagian dari Amazon sejak Agustus 2018, dia memiliki kesempatan untuk terlibat baik dalam operasi maupun bisnis cloud perusahaan. Saat ini, dia membangun aset perangkat lunak yang mendemonstrasikan penggunaan layanan AWS yang inovatif, disesuaikan dengan kasus penggunaan pelanggan tertentu. Setiap hari, dia secara aktif terlibat dengan berbagai aspek teknologi, tetapi hasrat sejatinya terletak pada kombinasi antara pengembangan web dan analitik.
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- PlatoData.Jaringan Vertikal Generatif Ai. Berdayakan Diri Anda. Akses Di Sini.
- PlatoAiStream. Intelijen Web3. Pengetahuan Diperkuat. Akses Di Sini.
- PlatoESG. Otomotif / EV, Karbon, teknologi bersih, energi, Lingkungan Hidup, Tenaga surya, Penanganan limbah. Akses Di Sini.
- BlockOffset. Modernisasi Kepemilikan Offset Lingkungan. Akses Di Sini.
- Sumber: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :memiliki
- :adalah
- :Di mana
- ][P
- $NAIK
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Tentang Kami
- mengakses
- dapat diakses
- Akun
- Mencapai
- Tindakan
- aktif
- menambahkan
- menambahkan
- menambahkan
- Tambahan
- admin
- Setelah
- Semua
- mengizinkan
- diizinkan
- memungkinkan
- juga
- Amazon
- Amazon QuickSight
- Amazon Web Services
- an
- analisis
- dan
- Anonim
- Tanpa nama
- menjawab
- Apa pun
- api
- aplikasi
- Aplikasi
- aplikasi
- arsitektur
- ADALAH
- argumen
- AS
- aspek
- Aktiva
- ditugaskan
- menganggap
- At
- melampirkan
- Agustus
- penulis
- menghindari
- menunggu
- AWS
- berdasarkan
- dasar
- BE
- karena
- menjadi
- sebelum
- nama
- di bawah
- tubuh
- kedua
- Browser
- membangun
- Bangunan
- membangun
- bisnis
- intelijen bisnis
- tapi
- by
- panggilan
- Panggilan
- CAN
- Kapasitas
- kasus
- disebabkan
- pusat
- kesempatan
- perubahan
- Perubahan
- Pilih
- klien
- awan
- kode
- warna
- kombinasi
- perusahaan
- lengkap
- kompleks
- komponen
- komponen
- konfigurasi
- konsul
- memakan
- Konsumen
- Wadah
- mengandung
- Konten
- isi
- konteks
- membuat
- dibuat
- membuat
- CSS
- terbaru
- Sekarang
- pelanggan
- pelanggan
- harian
- dasbor
- dasbor
- data
- Default
- didefinisikan
- menunda
- mendemonstrasikan
- menyebarkan
- penyebaran
- dijelaskan
- rincian
- Pengembang
- Pengembangan
- berbeda
- Display
- PENGHAKIMAN
- domain
- domain
- dilakukan
- Dont
- dua kali lipat
- lamanya
- selama
- e
- efek
- elemen
- menanamkan
- tertanam
- embedding
- aktif
- diaktifkan
- terlibat
- Enter
- entitas
- Lingkungan Hidup
- Setara
- kesalahan
- kesalahan
- Eter (ETH)
- Acara
- peristiwa
- contoh
- contoh
- Kecuali
- pengecualian
- eksekusi
- ada
- menjelaskan
- menyelidiki
- ekspor
- merasa
- File
- keuangan
- jasa keuangan
- Pertama
- mengikuti
- berikut
- Untuk
- Gratis
- sering
- dari
- fungsi
- fungsionil
- lebih lanjut
- pintu gerbang
- menghasilkan
- memberikan
- Aksi
- keuangan global
- Go
- pemberian
- Kelompok
- memiliki
- Memiliki
- memiliki
- header
- tinggi
- membantu
- dia
- memegang
- memegang
- kait
- melayang-layang
- Seterpercayaapakah Olymp Trade? Kesimpulan
- How To
- http
- HTTPS
- i
- IAM
- ID
- ideal
- identitas
- id
- if
- Segera
- diimplementasikan
- mengimpor
- in
- termasuk
- sendiri-sendiri
- informasi
- mulanya
- memulai
- inovatif
- install
- integrasi
- Intelijen
- interaktif
- ke
- memperkenalkan
- memanggil
- terlibat
- IT
- json
- hanya
- kunci
- Kekurangan
- besar
- besar-besaran
- kemudian
- tata ruang
- BELAJAR
- Tingkat
- terletak
- Daftar
- pemuatan
- lokal
- mencatat
- melihat
- Utama
- MEMBUAT
- Membuat
- wajib
- Margin
- Cocok
- menu
- metode
- menit
- mode
- bulanan
- lebih
- pindah
- beberapa
- harus
- nama
- Arahkan
- Navigasi
- Perlu
- kebutuhan
- New
- berikutnya
- normal
- sekarang
- obyek
- of
- sering
- on
- ONE
- Operasi
- pilihan
- Opsi
- or
- Jeruk
- OS
- Lainnya
- Lainnya
- jika tidak
- kami
- ikhtisar
- paket
- halaman
- pane
- bagian
- gairah
- melakukan
- Izin
- memilih
- placeholder
- plato
- Kecerdasan Data Plato
- Data Plato
- silahkan
- kebijaksanaan
- Portal
- Pos
- kuat
- prasyarat
- mencegah
- di harga
- proses
- Produksi
- proyek
- ketentuan
- wakil
- publik
- membeli
- tujuan
- RE
- Bereaksi
- Pembaca
- pembaca
- siap
- direkomendasikan
- wilayah
- Dihapus
- merender
- menggantikan
- permintaan
- permintaan
- wajib
- sumber
- Sumber
- tanggapan
- kembali
- Pengembalian
- Peran
- akar
- Run
- berjalan
- Skala
- skenario
- screenshot
- SDK
- Kedua
- detik
- Bagian
- melihat
- terpilih
- Layanan
- Sidang
- sesi
- set
- menyelesaikan
- penyiapan
- Share
- berbagi
- dia
- harus
- Menunjukkan
- menunjukkan
- ditunjukkan
- Pertunjukkan
- mirip
- Sederhana
- menyederhanakan
- sejak
- kecil
- Perangkat lunak
- larutan
- Solusi
- beberapa
- Segera
- tertentu
- ditentukan
- Tahap
- awal
- Negara
- Pernyataan
- Langkah
- Tangga
- aliran
- ketat
- gaya
- seperti itu
- yakin
- disesuaikan
- target
- Teknologi
- terminal
- uji
- pengujian
- bahwa
- Grafik
- mereka
- Mereka
- kemudian
- Sana.
- karena itu
- ini
- waktu
- untuk
- memicu
- dipicu
- benar
- Terpercaya
- mencoba
- MENGHIDUPKAN
- dua
- bawah
- menggarisbawahi
- Pembaruan
- URL
- menggunakan
- bekas
- Pengguna
- Pengguna
- kegunaan
- menggunakan
- nilai
- berbagai
- versi
- View
- Mengunjungi
- ingin
- cara
- we
- jaringan
- pengembangan web
- layanan web
- situs web
- selamat datang
- BAIK
- ketika
- kapan saja
- yang
- akan
- dengan
- dalam
- tanpa
- kamu
- Anda
- zephyrnet.dll