Sử dụng phân tích nhúng từ Amazon QuickSight có thể đơn giản hóa quá trình trang bị cho ứng dụng của bạn các hình ảnh chức năng mà không cần bất kỳ sự phát triển phức tạp nào. Có nhiều cách để nhúng bảng điều khiển QuickSight vào ứng dụng. Trong bài đăng này, chúng tôi xem xét cách nó có thể được thực hiện bằng React và SDK nhúng QuickSight của Amazon.
Người tiêu dùng bảng điều khiển thường không có người dùng được chỉ định cho tài khoản AWS của họ và do đó thiếu quyền truy cập vào bảng điều khiển. Để cho phép họ sử dụng dữ liệu, trang tổng quan cần có thể truy cập được đối với người dùng ẩn danh. Hãy xem xét các bước cần thiết để cho phép người dùng chưa được xác thực xem bảng điều khiển QuickSight trong ứng dụng React của bạn.
Tổng quan về giải pháp
Giải pháp của chúng tôi sử dụng các dịch vụ chính sau:
Sau khi tải trang web trên trình duyệt, trình duyệt sẽ thực hiện lệnh gọi API Gateway, gọi hàm Lambda để gọi API QuickSight để tạo URL trang tổng quan cho người dùng ẩn danh. Hàm Lambda cần đảm nhận vai trò IAM với các quyền cần thiết. Sơ đồ sau đây cho thấy tổng quan về kiến trúc.
Điều kiện tiên quyết
Bạn phải có các điều kiện tiên quyết sau:
Thiết lập quyền cho người xem chưa được xác thực
Trong tài khoản của bạn, hãy tạo một chính sách IAM mà ứng dụng của bạn sẽ đảm nhận thay cho người xem:
- Trên bảng điều khiển IAM, chọn Điều Luật trong khung điều hướng.
- Chọn Tạo chính sách.
- trên JSON tab, hãy nhập mã chính sách sau:
Đảm bảo thay đổi giá trị của với giá trị của ID bảng điều khiển. Lưu ý ID này để sử dụng trong bước sau.
Đối với đối tượng câu lệnh thứ hai có nhật ký, quyền là không bắt buộc. Nó cho phép bạn tạo một nhóm nhật ký với tên đã chỉ định, tạo luồng nhật ký cho nhóm nhật ký đã chỉ định và tải một loạt sự kiện nhật ký lên luồng nhật ký đã chỉ định.
Trong chính sách này, chúng tôi cho phép người dùng thực hiện GenerateEmbedUrlForAnonymousUser
hành động trên ID bảng điều khiển trong danh sách ID bảng điều khiển được chèn vào trình giữ chỗ.
- Nhập tên cho chính sách của bạn (ví dụ:
AnonymousEmbedPolicy
) và lựa chọn Tạo chính sách.
Tiếp theo, chúng tôi tạo một vai trò và đính kèm chính sách này với vai trò.
- Chọn Vai trò trong ngăn điều hướng, sau đó chọn Tạo vai trò.
- Chọn Lambda cho thực thể đáng tin cậy.
- Tìm kiếm và chọn
AnonymousEmbedPolicy
, sau đó chọn Sau. - Nhập tên cho vai trò của bạn, chẳng hạn như
AnonymousEmbedRole
. - Đảm bảo rằng tên chính sách được bao gồm trong Thêm quyền phần.
- Hoàn tất việc tạo vai trò của bạn.
Bạn vừa tạo AnonymousEmbedRole
vai trò thực thi. Bây giờ bạn có thể chuyển sang bước tiếp theo.
Tạo URL nhúng ẩn danh Hàm Lambda
Trong bước này, chúng ta tạo một hàm Lambda tương tác với QuickSight để tạo URL nhúng cho người dùng ẩn danh. Tên miền của chúng tôi cần được cho phép. Có hai cách để tích hợp Amazon QuickSight:
- Bằng cách thêm URL vào danh sách miền được phép trong bảng điều khiển dành cho quản trị viên Amazon QuickSight (được giải thích sau trong [Tùy chọn] Thêm miền của bạn trong QuickSight phần).
- [Khuyến nghị] Bằng cách thêm yêu cầu URL nhúng trong thời gian chạy trong lệnh gọi API. Tùy chọn 1 được khuyến nghị khi bạn cần duy trì các miền được phép. Nếu không, các miền sẽ bị xóa sau 30 phút, tương đương với thời lượng phiên. Đối với các trường hợp sử dụng khác, bạn nên sử dụng tùy chọn thứ hai (được mô tả và triển khai bên dưới).
Trên bảng điều khiển Lambda, hãy tạo một hàm mới.
- Chọn Tác giả từ đầu.
- Trong Tên chức năng, nhập tên, chẳng hạn như
AnonymousEmbedFunction
. - Trong Runtimechọn Python 3.9.
- Trong Vai trò thực thichọn Sử dụng vai trò hiện có.
- Chọn vai trò
AnonymousEmbedRole
. - Chọn Tạo chức năng.
- Trên trang chi tiết chức năng, điều hướng đến Mã tab và nhập mã sau đây:
Nếu bạn không sử dụng localhost, hãy thay thế http://localhost:3000
trong phần trả về với tên máy chủ của ứng dụng của bạn. Để chuyển sang sản xuất, đừng quên thay thế http://localhost:3000
với miền của bạn.
- trên Cấu hình tab, dưới Cấu hình chung, chọn Chỉnh sửa.
- Tăng thời gian chờ từ 3 giây lên 30 giây, sau đó chọn Lưu.
- Theo Biến môi trường, chọn Chỉnh sửa.
- Thêm các biến sau:
- Thêm
DashboardIdList
và liệt kê ID bảng điều khiển của bạn. - Thêm
DashboardRegion
và nhập Khu vực của trang tổng quan của bạn.
- Thêm
- Chọn Lưu.
Cấu hình của bạn sẽ trông giống như ảnh chụp màn hình sau.
- trên Mã tab, chọn Triển khai để triển khai chức năng.
Thiết lập API Gateway để gọi hàm Lambda
Để thiết lập Cổng API để gọi chức năng bạn đã tạo, hãy hoàn thành các bước sau:
- Trên bảng điều khiển Cổng API, điều hướng đến REST API phần và chọn Xây dựng.
- Theo Tạo API mới, lựa chọn API mới.
- Trong tên API, hãy nhập tên (ví dụ:
QuicksightAnonymousEmbed
). - Chọn Tạo API.
- trên Hoạt động menu, chọn Tạo tài nguyên.
- Trong Tên tài nguyên, hãy nhập tên (ví dụ:
anonymous-embed
).
Bây giờ, hãy tạo một phương thức.
- Chọn
anonymous-embed
tài nguyên và trên Hoạt động menu, chọn Tạo phương pháp. - Chọn GET dưới tên tài nguyên.
- Trong Loại tích hợp, lựa chọn Lambda.
- Chọn Sử dụng tích hợp proxy Lambda.
- Trong Hàm Lambda, nhập tên hàm bạn đã tạo.
- Chọn Lưu, sau đó chọn OK.
Bây giờ chúng tôi đã sẵn sàng để triển khai API.
- trên Hoạt động menu, chọn Triển khai API.
- Trong Giai đoạn triển khai, lựa chọn Giai đoạn mới.
- Nhập tên cho giai đoạn của bạn, chẳng hạn như
embed
. - Chọn Triển khai.
[Tùy chọn] Thêm miền của bạn trong QuickSight
Nếu bạn đã thêm Tên miền được phép trong Tạo URL nhúng ẩn danh Hàm Lambda một phần, cảm thấy tự do để di chuyển đến Bật định giá dung lượng phần.
Để thêm miền của bạn vào các miền được phép trong QuickSight, hãy hoàn tất các bước sau:
- Trên bảng điều khiển QuickSight, chọn menu người dùng, sau đó chọn Quản lý QuickSight.
- Chọn Tên miền và nhúng trong khung điều hướng.
- Trong miền, hãy nhập tên miền của bạn (
http://localhost:
).
Đảm bảo thay thế để phù hợp với thiết lập cục bộ của bạn.
- Chọn Thêm.
Đảm bảo thay thế miền localhost bằng miền bạn sẽ sử dụng sau khi thử nghiệm.
Bật định giá dung lượng
Nếu bạn không bật định giá dung lượng phiên, hãy làm theo các bước trong phần này. Bắt buộc phải bật chức năng này để tiếp tục.
Định giá theo dung lượng cho phép khách hàng của QuickSight mua số lượng lớn phiên trình đọc mà không phải cung cấp từng trình đọc riêng lẻ trong QuickSight. Định giá theo dung lượng là lý tưởng cho các ứng dụng nhúng hoặc triển khai nghiệp vụ thông minh (BI) quy mô lớn. Để biết thêm thông tin, hãy truy cập Định giá Amazon QuickSight.
Để bật định giá dung lượng, hãy hoàn thành các bước sau:
- trên Quản lý QuickSight trang, chọn Đăng ký của bạn trong khung điều hướng.
- Trong tạp chí giá công suất phần, chọn Nhận đăng ký hàng tháng.
- Chọn Xác nhận đăng ký.
Để tìm hiểu thêm về định giá dung lượng, hãy xem Điểm mới trong Amazon QuickSight – định giá dung lượng phiên cho triển khai quy mô lớn, nhúng vào các trang web công cộng và cổng thông tin dành cho nhà phát triển để phân tích nhúng.
Thiết lập ứng dụng React của bạn
Để thiết lập ứng dụng React của bạn, hãy hoàn thành các bước sau:
- Trong thư mục dự án React của bạn, hãy chuyển đến thư mục gốc của bạn và chạy
npm i amazon-quicksight-embedding-sdk
để cài đặt gói amazon-quicksight-embedding-sdk. - Trong của bạn
App.js
tập tin, thay thế như sau:- Thay thế
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
với API Gateway gọi URL và tên tài nguyên của bạn (ví dụ:https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - Thay thế
YOUR_DASHBOARD1_ID
với dashboardId đầu tiên từ bạnDashboardIdList
. Đây là bảng điều khiển sẽ được hiển thị trên kết xuất ban đầu. - Thay thế
YOUR_DASHBOARD2_ID
với dashboardId thứ hai từ bạnDashboardIdList
.
- Thay thế
Đoạn mã sau đây cho thấy một ví dụ về App.js
tệp trong dự án React của bạn. Mã này là một thành phần React nhúng bảng điều khiển QuickSight dựa trên ID bảng điều khiển đã chọn. Mã chứa các thành phần chính sau:
- móc nhà nước – Hai móc trạng thái được xác định bằng cách sử dụng
useState()
hook từ React:- bảng điều khiển – Giữ ID bảng điều khiển hiện được chọn.
- quickSightNhúng – Giữ đối tượng nhúng QuickSight được trả về bởi
embedDashboard()
chức năng.
- móc tham chiếu – Một hook ref được xác định bằng cách sử dụng
useRef()
hook từ React. Nó được sử dụng để giữ tham chiếu đến phần tử DOM nơi bảng điều khiển QuickSight sẽ được nhúng. - móc useEffect() – Móc useEffect() được sử dụng để kích hoạt nhúng bảng điều khiển QuickSight bất cứ khi nào ID bảng điều khiển đã chọn thay đổi. Trước tiên, nó tìm nạp URL trang tổng quan cho ID đã chọn từ API QuickSight bằng phương thức tìm nạp(). Sau khi truy xuất URL, nó gọi hàm embed() với URL làm đối số.
- Thay đổi trình xử lý -
changeDashboard()
là một trình xử lý sự kiện đơn giản cập nhật trạng thái bảng điều khiển bất cứ khi nào người dùng chọn một bảng điều khiển khác từ trình đơn thả xuống. Ngay khi ID bảng điều khiển mới được đặt, hook useEffect sẽ được kích hoạt. - thời gian chờ 10 mili giây – Mục đích của việc sử dụng thời gian chờ là để giới thiệu độ trễ nhỏ 10 mili giây trước khi thực hiện lệnh gọi API. Độ trễ này có thể hữu ích trong các tình huống mà bạn muốn tránh các cuộc gọi API ngay lập tức hoặc ngăn các yêu cầu quá mức khi thành phần hiển thị thường xuyên. Thời gian chờ giúp thành phần có thời gian ổn định trước khi bắt đầu yêu cầu API. Bởi vì chúng tôi đang xây dựng ứng dụng ở chế độ phát triển, thời gian chờ giúp tránh các lỗi do chạy hai lần
useEffect
ở trongStrictMode
. Để biết thêm thông tin, hãy tham khảo Cập nhật cho Chế độ nghiêm ngặt.
Xem mã sau đây:
Tiếp theo, thay thế nội dung của bạn App.css
tệp, được sử dụng để định kiểu và bố cục trang web của bạn, với nội dung từ đoạn mã sau:
Bây giờ là lúc để kiểm tra ứng dụng của bạn. Bắt đầu ứng dụng của bạn bằng cách chạy npm start
trong thiết bị đầu cuối của bạn. Các ảnh chụp màn hình sau đây hiển thị các ví dụ về ứng dụng của bạn cũng như bảng thông tin mà ứng dụng có thể hiển thị.
Kết luận
Trong bài đăng này, chúng tôi đã chỉ cho bạn cách nhúng bảng điều khiển QuickSight vào ứng dụng React bằng AWS SDK. Chia sẻ trang tổng quan của bạn với người dùng ẩn danh cho phép họ truy cập trang tổng quan của bạn mà không cần cấp cho họ quyền truy cập vào tài khoản AWS của bạn. Ngoài ra còn có các cách khác để chia sẻ trang tổng quan của bạn một cách ẩn danh, chẳng hạn như sử dụng Nhúng công khai chỉ với 1 cú nhấp chuột.
Tham gia cộng đồng thị giác nhanh để hỏi, trả lời và học hỏi với những người khác và khám phá các tài nguyên bổ sung.
Lưu ý
Adrianna là Kiến trúc sư giải pháp tại AWS Global Financial Services. Trở thành một phần của Amazon từ tháng 2018 năm XNUMX, cô đã có cơ hội tham gia vào cả hoạt động điều hành cũng như hoạt động kinh doanh trên nền tảng đám mây của công ty. Hiện tại, cô xây dựng các tài sản phần mềm thể hiện cách sử dụng sáng tạo các dịch vụ AWS, phù hợp với các trường hợp sử dụng cụ thể của khách hàng. Hàng ngày, cô ấy tích cực tham gia vào các khía cạnh khác nhau của công nghệ, nhưng niềm đam mê thực sự của cô ấy nằm ở sự kết hợp giữa phát triển web và phân tích.
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
- PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
- Trung tâmESG. Ô tô / Xe điện, Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
- BlockOffsets. Hiện đại hóa quyền sở hữu bù đắp môi trường. Truy cập Tại đây.
- nguồn: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- : có
- :là
- :Ở đâu
- ][P
- $ LÊN
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- Giới thiệu
- truy cập
- có thể truy cập
- Tài khoản
- Đạt được
- Hoạt động
- tích cực
- thêm vào
- thêm
- thêm
- thêm vào
- quản trị viên
- Sau
- Tất cả
- cho phép
- cho phép
- cho phép
- Ngoài ra
- đàn bà gan dạ
- Amazon QuickSight
- Amazon Web Services
- an
- phân tích
- và
- Nặc Danh
- Ẩn danh
- trả lời
- bất kì
- api
- ứng dụng
- Các Ứng Dụng
- các ứng dụng
- kiến trúc
- LÀ
- đối số
- AS
- các khía cạnh
- Tài sản
- giao
- đảm đương
- At
- đính kèm
- Tháng Tám
- tác giả
- tránh
- chờ đợi
- AWS
- dựa
- cơ sở
- BE
- bởi vì
- được
- trước
- thay mặt
- phía dưới
- thân hình
- cả hai
- trình duyệt
- xây dựng
- Xây dựng
- xây dựng
- kinh doanh
- kinh doanh thông minh
- nhưng
- by
- cuộc gọi
- Cuộc gọi
- CAN
- Sức chứa
- trường hợp
- gây ra
- Trung tâm
- cơ hội
- thay đổi
- Những thay đổi
- Chọn
- khách hàng
- đám mây
- mã
- màu sắc
- kết hợp
- công ty
- hoàn thành
- phức tạp
- thành phần
- các thành phần
- Cấu hình
- An ủi
- ăn
- Người tiêu dùng
- Container
- chứa
- nội dung
- nội dung
- bối cảnh
- tạo
- tạo ra
- Tạo
- CSS
- Current
- Hiện nay
- khách hàng
- khách hàng
- tiền thưởng
- bảng điều khiển
- trang tổng quan
- dữ liệu
- Mặc định
- xác định
- chậm trễ
- chứng minh
- triển khai
- triển khai
- mô tả
- chi tiết
- Nhà phát triển
- Phát triển
- khác nhau
- Giao diện
- DOM
- miền
- lĩnh vực
- thực hiện
- dont
- tăng gấp đôi
- thời gian
- suốt trong
- e
- hiệu lực
- thành phần
- nhúng
- nhúng
- nhúng
- cho phép
- kích hoạt
- cam kết
- đăng ký hạng mục thi
- thực thể
- Môi trường
- Tương đương
- lôi
- lỗi
- Ether (ETH)
- Sự kiện
- sự kiện
- ví dụ
- ví dụ
- Trừ
- ngoại lệ
- thực hiện
- hiện tại
- Giải thích
- khám phá
- xuất khẩu
- cảm thấy
- Tập tin
- tài chính
- dịch vụ tài chính
- Tên
- theo
- tiếp theo
- Trong
- Miễn phí
- thường xuyên
- từ
- chức năng
- chức năng
- xa hơn
- cửa ngõ
- tạo ra
- cho
- Toàn cầu
- tài chính toàn cầu
- Go
- cấp
- Nhóm
- có
- Có
- có
- tiêu đề
- cao
- giúp
- cô
- tổ chức
- giữ
- Hooks
- di chuột
- Độ đáng tin của
- Hướng dẫn
- http
- HTTPS
- i
- IAM
- ID
- lý tưởng
- Bản sắc
- id
- if
- lập tức
- thực hiện
- nhập khẩu
- in
- bao gồm
- hệ thống riêng biệt,
- thông tin
- ban đầu
- bắt đầu
- sáng tạo
- cài đặt, dựng lên
- hội nhập
- Sự thông minh
- tương tác
- trong
- giới thiệu
- viện dẫn
- tham gia
- IT
- json
- chỉ
- Key
- Thiếu sót
- lớn
- quy mô lớn
- một lát sau
- Bố trí
- LEARN
- Cấp
- nằm
- Danh sách
- tải
- địa phương
- đăng nhập
- Xem
- Chủ yếu
- LÀM CHO
- Làm
- bắt buộc
- Lợi nhuận
- Trận đấu
- Menu
- phương pháp
- phút
- Chế độ
- hàng tháng
- chi tiết
- di chuyển
- nhiều
- phải
- tên
- Điều hướng
- THÔNG TIN
- Cần
- nhu cầu
- Mới
- tiếp theo
- bình thường
- tại
- vật
- of
- thường
- on
- ONE
- Hoạt động
- Tùy chọn
- Các lựa chọn
- or
- trái cam
- OS
- Nền tảng khác
- Khác
- nếu không thì
- vfoXNUMXfipXNUMXhfpiXNUMXufhpiXNUMXuf
- tổng quan
- gói
- trang
- cửa sổ
- một phần
- niềm đam mê
- thực hiện
- quyền
- chọn
- giữ chỗ
- plato
- Thông tin dữ liệu Plato
- PlatoDữ liệu
- xin vui lòng
- điều luật
- Portal
- Bài đăng
- mạnh mẽ
- điều kiện tiên quyết
- ngăn chặn
- giá
- quá trình
- Sản lượng
- dự án
- cung cấp
- Proxy
- công khai
- mua
- mục đích
- RE
- Phản ứng
- Người đọc
- độc giả
- sẵn sàng
- đề nghị
- khu
- Đã loại bỏ
- Trình bày
- thay thế
- yêu cầu
- yêu cầu
- cần phải
- tài nguyên
- Thông tin
- phản ứng
- trở lại
- Trả về
- Vai trò
- nguồn gốc
- chạy
- chạy
- Quy mô
- kịch bản
- ảnh chụp màn hình
- sdk
- Thứ hai
- giây
- Phần
- xem
- chọn
- DỊCH VỤ
- Phiên
- phiên
- định
- giải quyết
- thiết lập
- Chia sẻ
- chia sẻ
- chị ấy
- nên
- hiển thị
- cho thấy
- thể hiện
- Chương trình
- tương tự
- Đơn giản
- đơn giản hóa
- kể từ khi
- nhỏ
- Phần mềm
- giải pháp
- Giải pháp
- một số
- Chẳng bao lâu
- riêng
- quy định
- Traineeship
- Bắt đầu
- Tiểu bang
- Tuyên bố
- Bước
- Các bước
- dòng
- khắt khe
- phong cách
- như vậy
- chắc chắn
- phù hợp
- Mục tiêu
- Công nghệ
- Thiết bị đầu cuối
- thử nghiệm
- Kiểm tra
- việc này
- Sản phẩm
- cung cấp their dịch
- Them
- sau đó
- Đó
- vì thế
- điều này
- thời gian
- đến
- kích hoạt
- được kích hoạt
- đúng
- đáng tin cậy
- thử
- XOAY
- hai
- Dưới
- nhấn mạnh
- Cập nhật
- URL
- sử dụng
- đã sử dụng
- người sử dang
- Người sử dụng
- sử dụng
- sử dụng
- giá trị
- khác nhau
- phiên bản
- Xem
- Truy cập
- muốn
- cách
- we
- web
- phát triển web
- các dịch vụ web
- trang web
- chào mừng
- TỐT
- khi nào
- bất cứ khi nào
- cái nào
- sẽ
- với
- ở trong
- không có
- bạn
- trên màn hình
- zephyrnet