با استفاده از تجزیه و تحلیل تعبیه شده از آمازون QuickSight می تواند فرآیند تجهیز برنامه شما با تجسم های کاربردی را بدون هیچ گونه توسعه پیچیده ساده کند. راه های متعددی برای جاسازی داشبوردهای QuickSight در برنامه وجود دارد. در این پست به نحوه انجام آن با استفاده از React و the می پردازیم Amazon QuickSight Embedding SDK.
مصرف کنندگان داشبورد اغلب کاربری برای حساب AWS خود ندارند و بنابراین دسترسی به داشبورد ندارند. برای فعال کردن آنها برای مصرف داده ها، داشبورد باید برای کاربران ناشناس قابل دسترسی باشد. بیایید به مراحل مورد نیاز برای فعال کردن یک کاربر احراز هویت نشده برای مشاهده داشبورد QuickSight در برنامه React خود نگاه کنیم.
بررسی اجمالی راه حل
راه حل ما از خدمات کلیدی زیر استفاده می کند:
پس از بارگیری صفحه وب در مرورگر، مرورگر با API Gateway تماس می گیرد، که یک تابع Lambda را فراخوانی می کند که QuickSight API را فراخوانی می کند تا یک URL داشبورد برای یک کاربر ناشناس ایجاد کند. تابع Lambda باید نقش IAM را با مجوزهای مورد نیاز به عهده بگیرد. نمودار زیر نمای کلی از معماری را نشان می دهد.
پیش نیازها
شما باید پیش نیازهای زیر را داشته باشید:
برای بینندگان احراز هویت نشده مجوزها را تنظیم کنید
در حساب خود، یک خط مشی IAM ایجاد کنید که برنامه شما از طرف بیننده آن را در نظر بگیرد:
- در کنسول IAM، را انتخاب کنید سیاست در صفحه ناوبری
- را انتخاب کنید ایجاد خط مشی.
- بر JSON تب، کد خط مشی زیر را وارد کنید:
مطمئن شوید که مقدار آن را تغییر دهید به مقدار شناسه داشبورد. به این شناسه توجه کنید تا در مرحله بعد نیز از آن استفاده کنید.
برای شیء دستور دوم با گزارش ها، مجوزها هستند اختیاری. این به شما امکان می دهد یک گروه گزارش با نام مشخص شده ایجاد کنید، یک جریان گزارش برای گروه گزارش مشخص شده ایجاد کنید، و دسته ای از رویدادهای گزارش را در جریان گزارش مشخص شده آپلود کنید.
در این خط مشی، ما به کاربر اجازه انجام این را می دهیم GenerateEmbedUrlForAnonymousUser
اقدام بر روی شناسه داشبورد در لیست شناسههای داشبورد درج شده در محل مکان.
- یک نام برای خط مشی خود وارد کنید (به عنوان مثال،
AnonymousEmbedPolicy
) و انتخاب کنید ایجاد خط مشی.
بعد، یک نقش ایجاد می کنیم و این سیاست را به نقش متصل می کنیم.
- را انتخاب کنید نقش در صفحه پیمایش، سپس انتخاب کنید نقش ایجاد کنید.
- را انتخاب کنید یازدهمین حرف الفبای یونانی برای نهاد مورد اعتماد
- جستجو و انتخاب کنید
AnonymousEmbedPolicy
، پس از آن را انتخاب کنید بعدی. - یک نام برای نقش خود وارد کنید، مانند
AnonymousEmbedRole
. - مطمئن شوید که نام خط مشی در آن گنجانده شده است مجوزها را اضافه کنید بخش.
- ساختن نقش خود را به پایان برسانید.
شما به تازگی ایجاد کرده اید AnonymousEmbedRole
نقش اجرایی اکنون می توانید به مرحله بعدی بروید.
یک تابع لامبدا URL جاسازی ناشناس ایجاد کنید
در این مرحله، ما یک تابع Lambda ایجاد می کنیم که با QuickSight تعامل می کند تا یک URL جاسازی شده برای یک کاربر ناشناس ایجاد کند. دامنه ما باید مجاز باشد. دو راه برای دستیابی به یکپارچه سازی Amazon QuickSight وجود دارد:
- با افزودن URL به لیست دامنه های مجاز در کنسول مدیریت آمازون QuickSight (که بعداً توضیح داده شد [اختیاری] دامنه خود را در QuickSight اضافه کنید بخش).
- [توصیه شده] با افزودن درخواست جاسازی URL در طول زمان اجرا در تماس API. گزینه 1 زمانی توصیه می شود که باید دامنه های مجاز را حفظ کنید. در غیر این صورت پس از 30 دقیقه که معادل مدت جلسه است، دامنه ها حذف خواهند شد. برای سایر موارد استفاده، استفاده از گزینه دوم (که در زیر توضیح داده شده و اجرا شده است) توصیه می شود.
در کنسول Lambda، یک تابع جدید ایجاد کنید.
- انتخاب کنید نویسنده از ابتدا.
- برای نام عملکرد، یک نام وارد کنید، مانند
AnonymousEmbedFunction
. - برای زمان اجراانتخاب کنید پایتون 3.9.
- برای نقش اجراانتخاب کنید از نقش موجود استفاده کنید.
- نقش را انتخاب کنید
AnonymousEmbedRole
. - را انتخاب کنید ایجاد تابع.
- در صفحه جزئیات عملکرد، به مسیر بروید رمز را برگه و کد زیر را وارد کنید:
اگر از لوکال هاست استفاده نمی کنید، جایگزین کنید http://localhost:3000
در بازده با نام میزبان برنامه شما. برای حرکت به سمت تولید، تعویض را فراموش نکنید http://localhost:3000
با دامنه شما
- بر پیکر بندی برگه ، زیر پیکربندی عمومی، انتخاب کنید ویرایش.
- تایم اوت را از 3 ثانیه به 30 ثانیه افزایش دهید، سپس انتخاب کنید ذخیره.
- تحت متغیرهای محیطی، انتخاب کنید ویرایش.
- متغیرهای زیر را اضافه کنید:
- اضافه کردن
DashboardIdList
و شناسه داشبورد خود را فهرست کنید. - اضافه کردن
DashboardRegion
و منطقه داشبورد خود را وارد کنید.
- اضافه کردن
- را انتخاب کنید ذخیره.
پیکربندی شما باید شبیه تصویر زیر باشد.
- بر رمز برگه ، انتخاب کنید گسترش برای استقرار تابع
API Gateway را برای فراخوانی تابع Lambda تنظیم کنید
برای راه اندازی API Gateway برای فراخوانی تابعی که ایجاد کرده اید، مراحل زیر را انجام دهید:
- در کنسول API Gateway، به مسیر بروید REST API بخش و انتخاب کنید ساختن.
- تحت ایجاد API جدید، انتخاب کنید API جدید.
- برای نام API، یک نام وارد کنید (به عنوان مثال،
QuicksightAnonymousEmbed
). - را انتخاب کنید ایجاد API.
- بر اعمال منو ، انتخاب کنید منبع ایجاد کنید.
- برای نام منبع، یک نام وارد کنید (به عنوان مثال،
anonymous-embed
).
حالا بیایید یک روش ایجاد کنیم.
- انتخاب
anonymous-embed
منبع و بر روی اعمال منو ، انتخاب کنید روش ایجاد کنید. - را انتخاب کنید شو تحت نام منبع
- برای نوع ادغام، انتخاب کنید یازدهمین حرف الفبای یونانی.
- انتخاب کنید از ادغام پروکسی Lambda استفاده کنید.
- برای تابع لامبدا، نام تابعی را که ایجاد کرده اید وارد کنید.
- را انتخاب کنید ذخیره، پس از آن را انتخاب کنید OK.
اکنون ما آماده استقرار API هستیم.
- بر اعمال منو ، انتخاب کنید استقرار API.
- برای مرحله استقرار، انتخاب کنید مرحله جدید.
- یک نام برای مرحله خود وارد کنید، مانند
embed
. - را انتخاب کنید گسترش.
[اختیاری] دامنه خود را در QuickSight اضافه کنید
اگر دامنه های مجاز را به آن اضافه کرده اید یک تابع لامبدا URL جاسازی ناشناس ایجاد کنید بخش، در صورت تمایل به حرکت به قیمت گذاری ظرفیت را روشن کنید بخش.
برای افزودن دامنه خود به دامنه های مجاز در QuickSight، مراحل زیر را انجام دهید:
- در کنسول QuickSight، منوی کاربر را انتخاب کنید، سپس انتخاب کنید QuickSight را مدیریت کنید.
- را انتخاب کنید دامنه ها و جاسازی در صفحه ناوبری
- برای دامنهدامنه خود را وارد کنید (
http://localhost:
).
حتما جایگزین کنید برای مطابقت با تنظیمات محلی شما.
- را انتخاب کنید اضافه کردن.
مطمئن شوید که دامنه لوکال هاست را با دامنه ای که بعد از آزمایش استفاده می کنید جایگزین کنید.
قیمت گذاری ظرفیت را روشن کنید
اگر قیمت گذاری ظرفیت جلسه را فعال نکرده اید، مراحل این بخش را دنبال کنید. فعال کردن این عملکرد برای ادامه کار الزامی است.
قیمتگذاری ظرفیت به مشتریان QuickSight اجازه میدهد تا جلسات خواننده را به صورت انبوه خریداری کنند، بدون اینکه نیازی به تهیه خوانندههای جداگانه در QuickSight داشته باشند. قیمت گذاری ظرفیت برای برنامه های کاربردی تعبیه شده یا استقرار هوش تجاری در مقیاس بزرگ (BI) ایده آل است. برای اطلاعات بیشتر مراجعه کنید قیمت گذاری آمازون QuickSight.
برای روشن کردن قیمت ظرفیت، مراحل زیر را انجام دهید:
- بر QuickSight را مدیریت کنید صفحه ، انتخاب کنید اشتراک های شما در صفحه ناوبری
- در قیمت گذاری ظرفیت بخش، انتخاب کنید دریافت اشتراک ماهانه.
- را انتخاب کنید تایید اشتراک.
برای کسب اطلاعات بیشتر در مورد قیمت گذاری ظرفیت، نگاه کنید جدید در Amazon QuickSight – قیمت گذاری ظرفیت جلسه برای استقرار در مقیاس بزرگ، جاسازی در وب سایت های عمومی و پورتال توسعه دهنده برای تجزیه و تحلیل های جاسازی شده.
برنامه React خود را راه اندازی کنید
برای تنظیم برنامه React خود، مراحل زیر را انجام دهید:
- در پوشه پروژه React خود، به دایرکتوری ریشه خود بروید و اجرا کنید
npm i amazon-quicksight-embedding-sdk
برای نصب بسته amazon-quicksight-embedding-sdk. - در خود
App.js
فایل را جایگزین کنید:- جایگزین کردن
YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME
با استفاده از API Gateway URL و نام منبع خود را فراخوانی کنید (به عنوان مثال،https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - جایگزین کردن
YOUR_DASHBOARD1_ID
با اولین شناسه داشبورد از شماDashboardIdList
. این داشبوردی است که در رندر اولیه نشان داده خواهد شد. - جایگزین کردن
YOUR_DASHBOARD2_ID
با داشبورد دوم از شماDashboardIdList
.
- جایگزین کردن
قطعه کد زیر نمونه ای از کد را نشان می دهد App.js
در پروژه React خود فایل کنید. کد یک جزء React است که داشبورد QuickSight را بر اساس شناسه داشبورد انتخابی تعبیه می کند. کد شامل اجزای کلیدی زیر است:
- قلاب های حالت - دو قلاب حالت با استفاده از تعریف شده است
useState()
قلاب از React:- داشبورد – شناسه داشبورد انتخابی فعلی را نگه می دارد.
- QuickSightEmbedding – شی جاسازی QuickSight را که توسط
embedDashboard()
تابع.
- قلاب رف - یک قلاب رف با استفاده از
useRef()
قلاب از React. برای نگه داشتن ارجاع به عنصر DOM که داشبورد QuickSight در آن جاسازی میشود، استفاده میشود. - قلاب useEffect(). – از قلاب useEffect() برای راه اندازی جاسازی داشبورد QuickSight هر زمان که شناسه داشبورد انتخابی تغییر می کند استفاده می شود. ابتدا URL داشبورد را برای شناسه انتخابی از QuickSight API با استفاده از متد fetch() واکشی می کند. پس از بازیابی URL، تابع embed() را با URL به عنوان آرگومان فراخوانی می کند.
- کنترل کننده را تغییر دهید -
changeDashboard()
تابع یک کنترل کننده رویداد ساده است که هر زمان که کاربر داشبورد دیگری را از منوی کشویی انتخاب کند، وضعیت داشبورد را به روز می کند. به محض تنظیم شناسه داشبورد جدید، قلاب useEffect فعال می شود. - تایم اوت 10 میلی ثانیه ای – هدف از استفاده از تایم اوت این است که قبل از برقراری تماس API یک تاخیر کوچک 10 میلی ثانیه ای ایجاد کنید. این تأخیر میتواند در سناریوهایی مفید باشد که میخواهید از تماسهای فوری API اجتناب کنید یا از درخواستهای بیش از حد هنگامی که مؤلفه به طور مکرر رندر میشود، جلوگیری کنید. مهلت زمانی به مؤلفه زمان می دهد تا قبل از شروع درخواست API تسویه شود. از آنجایی که ما برنامه را در حالت توسعه میسازیم، مهلت زمانی به جلوگیری از خطاهای ناشی از اجرای مضاعف کمک میکند
useEffect
در داخلStrictMode
. برای اطلاعات بیشتر مراجعه کنید به روز رسانی به حالت سخت.
کد زیر را ببینید:
بعد، محتویات خود را جایگزین کنید App.css
فایلی که برای استایل و چیدمان صفحه وب شما با محتوای قطعه کد زیر استفاده می شود:
اکنون زمان آن است که برنامه خود را آزمایش کنید. برنامه خود را با اجرا شروع کنید npm start
در ترمینال شما اسکرین شات های زیر نمونه هایی از برنامه شما و همچنین داشبوردهایی را که می تواند نمایش دهد نشان می دهد.
نتیجه
در این پست، ما به شما نشان دادیم که چگونه یک داشبورد QuickSight را با استفاده از AWS SDK در یک برنامه React جاسازی کنید. اشتراک گذاری داشبورد خود با کاربران ناشناس به آنها امکان می دهد بدون اجازه دسترسی به حساب AWS شما به داشبورد شما دسترسی داشته باشند. همچنین راههای دیگری برای اشتراکگذاری داشبوردتان بهطور ناشناس وجود دارد، مانند استفاده 1-کلیک عمومی embedding.
عضویت انجمن Quicksight برای پرسیدن، پاسخ دادن و یادگیری با دیگران و کشف منابع اضافی.
درباره نویسنده
Adrianna یک معمار راه حل در AWS Global Financial Services است. او که از آگوست 2018 بخشی از آمازون بوده است، این شانس را داشته است که هم در عملیات و هم در تجارت ابری شرکت مشارکت داشته باشد. در حال حاضر، او داراییهای نرمافزاری میسازد که استفاده نوآورانه از خدمات AWS را نشان میدهد که برای موارد استفاده مشتری خاص طراحی شده است. او به طور روزانه به طور فعال با جنبه های مختلف فناوری درگیر است، اما اشتیاق واقعی او در ترکیب توسعه وب و تجزیه و تحلیل نهفته است.
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- PlatoData.Network Vertical Generative Ai. به خودت قدرت بده دسترسی به اینجا.
- PlatoAiStream. هوش وب 3 دانش تقویت شده دسترسی به اینجا.
- PlatoESG. خودرو / خودروهای الکتریکی، کربن ، CleanTech، انرژی، محیط، خورشیدی، مدیریت پسماند دسترسی به اینجا.
- BlockOffsets. نوسازی مالکیت افست زیست محیطی. دسترسی به اینجا.
- منبع: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- : دارد
- :است
- :جایی که
- ][پ
- $UP
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- درباره ما
- دسترسی
- در دسترس
- حساب
- رسیدن
- عمل
- فعالانه
- اضافه کردن
- اضافه
- اضافه کردن
- اضافی
- مدیر سایت
- پس از
- معرفی
- اجازه دادن
- مجاز
- اجازه می دهد تا
- همچنین
- آمازون
- آمازون QuickSight
- آمازون خدمات وب
- an
- علم تجزیه و تحلیل
- و
- ناشناس
- ناشناس
- پاسخ
- هر
- API
- نرم افزار
- کاربرد
- برنامه های کاربردی
- معماری
- هستند
- استدلال
- AS
- جنبه
- دارایی
- اختصاص داده
- فرض
- At
- ضمیمه کردن
- اوت
- نویسنده
- اجتناب از
- در انتظار
- AWS
- مستقر
- اساس
- BE
- زیرا
- بوده
- قبل از
- از طرف
- در زیر
- بدن
- هر دو
- مرورگر
- ساختن
- بنا
- می سازد
- کسب و کار
- هوش تجاری
- اما
- by
- صدا
- تماس ها
- CAN
- ظرفیت
- موارد
- ایجاد می شود
- مرکز
- شانس
- تغییر دادن
- تبادل
- را انتخاب کنید
- مشتری
- ابر
- رمز
- رنگ
- ترکیب
- شرکت
- کامل
- پیچیده
- جزء
- اجزاء
- پیکر بندی
- کنسول
- مصرف
- مصرف کنندگان
- ظرف
- شامل
- محتوا
- محتویات
- زمینه
- ایجاد
- ایجاد شده
- ایجاد
- CSS
- جاری
- در حال حاضر
- مشتری
- مشتریان
- روزانه
- داشبورد
- داشبورد
- داده ها
- به طور پیش فرض
- مشخص
- تاخیر
- نشان دادن
- گسترش
- اعزام ها
- شرح داده شده
- جزئیات
- توسعه دهنده
- پروژه
- مختلف
- نمایش دادن
- DOM
- دامنه
- حوزه
- انجام شده
- آیا
- دو برابر
- مدت
- در طی
- e
- اثر
- عنصر
- جاسازی کردن
- جاسازی شده
- تعبیه کردن
- قادر ساختن
- فعال
- درگیر می شود
- وارد
- موجودیت
- محیط
- معادل
- خطا
- خطاهای
- اتر (ETH)
- واقعه
- حوادث
- مثال
- مثال ها
- جز
- استثنا
- اعدام
- موجود
- توضیح داده شده
- اکتشاف
- صادرات
- احساس
- پرونده
- مالی
- خدمات مالی
- نام خانوادگی
- به دنبال
- پیروی
- برای
- رایگان
- غالبا
- از جانب
- تابع
- تابعی
- بیشتر
- دروازه
- تولید می کنند
- می دهد
- جهانی
- مالی جهانی
- Go
- اعطای
- گروه
- بود
- آیا
- داشتن
- هدر
- ارتفاع
- کمک می کند
- او
- نگه داشتن
- دارای
- قلاب
- در تردید بودن
- چگونه
- چگونه
- HTTP
- HTTPS
- i
- IAM
- ID
- دلخواه
- هویت
- شناسه
- if
- فوری
- اجرا
- واردات
- in
- مشمول
- فرد
- اطلاعات
- اول
- شروع
- ابتکاری
- نصب
- ادغام
- اطلاعات
- در ارتباط بودن
- به
- معرفی
- فراخوانی میکند
- گرفتار
- IT
- json
- تنها
- کلید
- عدم
- بزرگ
- در مقیاس بزرگ
- بعد
- طرح
- یاد گرفتن
- سطح
- نهفته است
- فهرست
- بارگیری
- محلی
- ورود به سیستم
- نگاه کنيد
- اصلی
- باعث می شود
- ساخت
- اجباری
- حاشیه
- مسابقه
- فهرست
- روش
- دقیقه
- حالت
- ماهیانه
- بیش
- حرکت
- چندگانه
- باید
- نام
- هدایت
- جهت یابی
- نیاز
- نیازهای
- جدید
- بعد
- طبیعی
- اکنون
- هدف
- of
- غالبا
- on
- ONE
- عملیات
- گزینه
- گزینه
- or
- نارنجی
- OS
- دیگر
- دیگران
- در غیر این صورت
- ما
- مروری
- بسته
- با ما
- قطعه
- بخش
- شور
- انجام دادن
- مجوز
- انتخاب کنید
- حفره یا سوراخ
- افلاطون
- هوش داده افلاطون
- PlatoData
- لطفا
- سیاست
- پورتال
- پست
- قوی
- پیش نیازها
- جلوگیری از
- قیمت گذاری
- روند
- تولید
- پروژه
- تدارک
- پروکسی
- عمومی
- خرید
- هدف
- RE
- واکنش نشان می دهند
- خواننده
- خوانندگان
- اماده
- توصیه می شود
- منطقه
- حذف شده
- ارائه
- جایگزین کردن
- درخواست
- درخواست
- ضروری
- منابع
- منابع
- پاسخ
- برگشت
- بازده
- نقش
- ریشه
- دویدن
- در حال اجرا
- مقیاس
- سناریوها
- تصاویر
- sdk
- دوم
- ثانیه
- بخش
- دیدن
- انتخاب شد
- خدمات
- جلسه
- جلسات
- تنظیم
- واریز
- برپایی
- اشتراک گذاری
- اشتراک
- او
- باید
- نشان
- نشان داد
- نشان داده شده
- نشان می دهد
- مشابه
- ساده
- ساده کردن
- پس از
- کوچک
- نرم افزار
- راه حل
- مزایا
- برخی از
- بزودی
- خاص
- مشخص شده
- صحنه
- شروع
- دولت
- بیانیه
- گام
- مراحل
- جریان
- سخت
- سبک
- چنین
- مطمئن
- طراحی شده
- هدف
- پیشرفته
- پایانه
- آزمون
- تست
- که
- La
- شان
- آنها
- سپس
- آنجا.
- از این رو
- این
- زمان
- به
- ماشه
- باعث شد
- درست
- مورد اعتماد
- امتحان
- دور زدن
- دو
- زیر
- زیر خط دار خط
- به روز رسانی
- URL
- استفاده کنید
- استفاده
- کاربر
- کاربران
- استفاده
- با استفاده از
- ارزش
- مختلف
- نسخه
- چشم انداز
- بازدید
- می خواهم
- راه
- we
- وب
- توسعه وب
- خدمات وب
- وب سایت
- خوش آمد
- خوب
- چه زمانی
- هر زمان که
- که
- اراده
- با
- در داخل
- بدون
- شما
- شما
- زفیرنت