استخدام التحليلات المضمنة من أمازون QuickSight يمكن أن يبسط عملية تجهيز التطبيق الخاص بك مع تصورات وظيفية دون أي تطوير معقد. هناك عدة طرق لتضمين لوحات معلومات QuickSight في التطبيق. في هذا المنشور ، ننظر في كيفية القيام بذلك باستخدام React و Amazon QuickSight تضمين SDK.

غالبًا ما لا يكون لدى مستهلكي لوحة المعلومات مستخدم معين لحساب AWS الخاص بهم وبالتالي يفتقرون إلى الوصول إلى لوحة المعلومات. لتمكينهم من استهلاك البيانات ، يجب أن تكون لوحة القيادة متاحة للمستخدمين المجهولين. لنلقِ نظرة على الخطوات المطلوبة لتمكين مستخدم غير مصادق من عرض لوحة معلومات QuickSight في تطبيق React الخاص بك.

حل نظرة عامة

يستخدم حلنا الخدمات الرئيسية التالية:

بعد تحميل صفحة الويب على المتصفح ، يقوم المتصفح بإجراء مكالمة إلى API Gateway ، والتي تستدعي وظيفة Lambda التي تستدعي واجهة برمجة تطبيقات QuickSight لإنشاء عنوان URL للوحة القيادة لمستخدم مجهول. تحتاج وظيفة Lambda إلى تولي دور IAM بالأذونات المطلوبة. يوضح الرسم البياني التالي نظرة عامة على الهندسة المعمارية.

المتطلبات الأساسية المسبقة

يجب أن تكون لديك المتطلبات الأساسية التالية:

قم بإعداد أذونات للمشاهدين غير المصادق عليهم

في حسابك ، أنشئ سياسة IAM التي سيتحملها تطبيقك نيابة عن العارض:

1. في وحدة تحكم IAM ، اختر السياسات في جزء التنقل.
2. اختار إنشاء سياسة.
3. على JSON علامة التبويب ، أدخل رمز السياسة التالي:

{ "Version": "2012-10-17", "Statement": [ { "Action": [ "quicksight:GenerateEmbedUrlForAnonymousUser" ], "Resource": [ "arn:aws:quicksight:*:*:namespace/default", "arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID1>", "arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID2>" ], "Effect": "Allow" }, { "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents" ], "Resource": "*", "Effect": "Allow" } ]
}

تأكد من تغيير قيمة لقيمة معرف لوحة القيادة. لاحظ هذا المعرف لاستخدامه في خطوة لاحقة أيضًا.

بالنسبة لكائن العبارة الثاني الذي يحتوي على سجلات ، تكون الأذونات اختياري. يسمح لك بإنشاء مجموعة سجل بالاسم المحدد ، وإنشاء تدفق سجل لمجموعة السجل المحددة ، وتحميل مجموعة من أحداث السجل إلى تدفق السجل المحدد.

في هذه السياسة ، نسمح للمستخدم بأداء GenerateEmbedUrlForAnonymousUser إجراء على معرف لوحة المعلومات ضمن قائمة معرفات لوحة المعلومات المدرجة في العنصر النائب.

4. أدخل اسمًا لسياستك (على سبيل المثال ، AnonymousEmbedPolicy) و اختار إنشاء سياسة.

بعد ذلك ، نقوم بإنشاء دور وإلحاق هذه السياسة بالدور.

5. اختار الأدوار في جزء التنقل ، ثم اختر خلق دور.

6. اختار لامدا للكيان الموثوق به.
7. ابحث عن واختر AnonymousEmbedPolicy، ثم اختر التالى.
8. أدخل اسمًا لدورك ، مثل AnonymousEmbedRole.
9. تأكد من تضمين اسم السياسة في ملف أضف أذونات والقسم الخاص به.
10. الانتهاء من إنشاء دورك.

لقد قمت للتو بإنشاء ملف AnonymousEmbedRole دور التنفيذ. يمكنك الآن الانتقال إلى الخطوة التالية.

قم بإنشاء وظيفة Lambda URL مضمنة مجهولة

في هذه الخطوة ، نقوم بإنشاء وظيفة Lambda التي تتفاعل مع QuickSight لإنشاء عنوان URL مضمن لمستخدم مجهول. يجب السماح بمجالنا. هناك طريقتان لتحقيق تكامل Amazon QuickSight:

1. من خلال إضافة عنوان URL إلى قائمة المجالات المسموح بها في وحدة تحكم مشرف Amazon QuickSight (موضحة لاحقًا في [اختياري] أضف مجالك في QuickSight الجزء).
2. [موصى به] من خلال إضافة طلب عنوان URL المضمن أثناء وقت التشغيل في استدعاء API. يوصى بالخيار 1 عندما تحتاج إلى الاستمرار في المجالات المسموح بها. خلاف ذلك ، ستتم إزالة المجالات بعد 30 دقيقة ، وهو ما يعادل مدة الجلسة. بالنسبة لحالات الاستخدام الأخرى ، يوصى باستخدام الخيار الثاني (الموصوف والمنفذ أدناه).

على وحدة تحكم Lambda ، قم بإنشاء وظيفة جديدة.

1. أختار مؤلف من الصفر.
2. في حالة اسم وظيفة، أدخل اسمًا ، مثل AnonymousEmbedFunction.
3. في حالة وقت التشغيلأختر بيثون 3.9.
4. في حالة دور التنفيذأختر استخدم دورًا موجودًا.
5. اختر الدور AnonymousEmbedRole.
6. اختار خلق وظيفة.
7. في صفحة تفاصيل الوظيفة ، انتقل إلى ملف رمز علامة التبويب وأدخل الرمز التالي:

import json, boto3, os, re, base64 def lambda_handler(event, context):
print(event)
try:
def getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion, event):
#Create QuickSight client
quickSight = boto3.client('quicksight', region_name=dashboardRegion); #Construct dashboardArnList from dashboardIdList
dashboardArnList=[ 'arn:aws:quicksight:'+dashboardRegion+':'+awsAccountId+':dashboard/'+dashboardId for dashboardId in dashboardIdList]
#Generate Anonymous Embed url
response = quickSight.generate_embed_url_for_anonymous_user(
AwsAccountId = awsAccountId,
Namespace = 'default',
ExperienceConfiguration = {'Dashboard':{'InitialDashboardId': dashboardIdList[0]}},
AuthorizedResourceArns = dashboardArnList,
SessionLifetimeInMinutes = 60,
AllowedDomains = ['http://localhost:3000']
)
return response #Get AWS Account Id
awsAccountId = context.invoked_function_arn.split(':')[4] #Read in the environment variables
dashboardIdList = re.sub(' ','',os.environ['DashboardIdList']).split(',')
dashboardNameList = os.environ['DashboardNameList'].split(',')
dashboardRegion = os.environ['DashboardRegion'] response={} response = getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion, event) return {'statusCode':200, 'headers': {"Access-Control-Allow-Origin": "http://localhost:3000", "Content-Type":"text/plain"}, 'body':json.dumps(response)
} except Exception as e: #catch all
return {'statusCode':400, 'headers': {"Access-Control-Allow-Origin": "http://localhost:3000", "Content-Type":"text/plain"}, 'body':json.dumps('Error: ' + str(e))
}

إذا كنت لا تستخدم localhost ، فاستبدل http://localhost:3000 في العوائد مع اسم مضيف التطبيق الخاص بك. للانتقال إلى الإنتاج ، لا تنسى استبداله http://localhost:3000 مع المجال الخاص بك.

9. على الاعداد علامة التبويب ، تحت التكوين العام، اختر تعديل.
10. قم بزيادة المهلة من 3 ثوانٍ إلى 30 ثانية ، ثم اختر حفظ.
11. تحت متغيرات البيئة، اختر تعديل.
12. أضف المتغيرات التالية:
    1. أضف DashboardIdList وسرد معرفات لوحة القيادة الخاصة بك.
    2. أضف DashboardRegion وادخل المنطقة من لوحة القيادة الخاصة بك.
13. اختار حفظ.

يجب أن يبدو التكوين الخاص بك مشابهًا للقطة الشاشة التالية.

14. على رمز علامة التبويب، اختر نشر لنشر الوظيفة.

قم بإعداد بوابة API لاستدعاء وظيفة Lambda

لإعداد API Gateway لاستدعاء الوظيفة التي أنشأتها ، أكمل الخطوات التالية:

1. في وحدة تحكم بوابة API ، انتقل إلى ملف REST API قسم واختيار البناء.
2. تحت إنشاء API جديدة، حدد واجهة برمجة التطبيقات الجديدة.
3. في حالة اسم API، أدخل اسمًا (على سبيل المثال ، QuicksightAnonymousEmbed).
4. اختار إنشاء API.

5. على الإجراءات القائمة، اختر خلق الموارد.
6. في حالة اسم المورد، أدخل اسمًا (على سبيل المثال ، anonymous-embed).

الآن ، لنقم بإنشاء طريقة.

7. اختيار anonymous-embed الموارد وعلى الإجراءات القائمة، اختر طريقة الإنشاء.
8. اختار للحصول على تحت اسم المورد.
9. في حالة نوع التكامل، حدد لامدا.
10. أختار استخدم تكامل وكيل Lambda.
11. في حالة وظيفة لامدا، أدخل اسم الوظيفة التي قمت بإنشائها.
12. اختار حفظ، ثم اختر OK.

نحن الآن جاهزون لنشر API.

13. على الإجراءات القائمة، اختر نشر API.
14. في حالة مرحلة النشر، حدد عصر جديد.
15. أدخل اسمًا للمرحلة ، مثل embed.
16. اختار نشر.

[اختياري] أضف مجالك في QuickSight

إذا قمت بإضافة المجالات المسموح بها في قم بإنشاء وظيفة Lambda URL مضمنة مجهولة جزء ، لا تتردد في الانتقال إلى قم بتشغيل تسعير السعة والقسم الخاص به.

لإضافة مجالك إلى المجالات المسموح بها في QuickSight ، أكمل الخطوات التالية:

1. في وحدة تحكم QuickSight ، اختر قائمة المستخدم ، ثم اختر إدارة QuickSight.

2. اختار المجالات والتضمين في جزء التنقل.
3. في حالة نطاق، أدخل المجال الخاص بك (http://localhost:).

تأكد من استبدال لتتناسب مع الإعداد المحلي الخاص بك.

4. اختار أضف.

تأكد من استبدال نطاق المضيف المحلي بالمجال الذي ستستخدمه بعد الاختبار.

قم بتشغيل تسعير السعة

إذا لم يكن لديك تسعير سعة الجلسة ممكّنًا ، فاتبع الخطوات الواردة في هذا القسم. من الضروري تمكين هذه الوظيفة للمضي قدمًا.

يسمح تسعير السعة لعملاء QuickSight بشراء جلسات قراءة مجمعة دون الحاجة إلى توفير أجهزة قراءة فردية في QuickSight. يعد تسعير السعة مثاليًا للتطبيقات المضمنة أو عمليات نشر ذكاء الأعمال على نطاق واسع (BI). للمزيد من المعلومات قم بزيارة تسعير Amazon QuickSight.

لتشغيل تسعير السعة ، أكمل الخطوات التالية:

1. على إدارة QuickSight الصفحة ، اختر اشتراكاتك في جزء التنقل.
2. في مجلة تسعير السعة القسم، حدد احصل على اشتراك شهري.
3. اختار تأكيد الاشتراك.

لمعرفة المزيد حول تسعير السعة ، راجع الجديد في Amazon QuickSight - تسعير سعة الجلسة لعمليات النشر واسعة النطاق ، والتضمين في مواقع الويب العامة ، وبوابة المطورين للتحليلات المضمنة.

قم بإعداد تطبيق React الخاص بك

لإعداد تطبيق React الخاص بك ، أكمل الخطوات التالية:

1. في مجلد مشروع React الخاص بك ، انتقل إلى الدليل الجذر الخاص بك وقم بتشغيل npm i amazon-quicksight-embedding-sdk لتثبيت حزمة amazon-quicksight-embedding-sdk.
2. في الخاص App.js ملف ، استبدل ما يلي:
   1. استبدل YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME باستخدام بوابة API الخاصة بك ، قم باستدعاء عنوان URL واسم المورد الخاص بك (على سبيل المثال ، https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed).
   2. استبدل YOUR_DASHBOARD1_ID مع أول لوحة تحكم معرف من الخاص بك DashboardIdList. هذه هي لوحة المعلومات التي ستظهر في العرض الأولي.
   3. استبدل 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 مللي ثانية - الغرض من استخدام المهلة هو تقديم تأخير بسيط قدره 10 مللي ثانية قبل إجراء استدعاء API. يمكن أن يكون هذا التأخير مفيدًا في السيناريوهات التي تريد فيها تجنب استدعاءات واجهة برمجة التطبيقات الفورية أو منع الطلبات الزائدة عند عرض المكون بشكل متكرر. المهلة تعطي المكون بعض الوقت لتسوية قبل بدء طلب واجهة برمجة التطبيقات. نظرًا لأننا نبني التطبيق في وضع التطوير ، فإن المهلة تساعد في تجنب الأخطاء الناتجة عن التشغيل المزدوج لـ useEffect في غضون StrictMode. لمزيد من المعلومات ، يرجى الرجوع إلى تحديثات الوضع الصارم.

انظر الكود التالي:

import './App.css';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; function App() { const dashboardRef = useRef([]); const [dashboardId, setDashboardId] = useState('YOUR_DASHBOARD1_ID'); const [embeddedDashboard, setEmbeddedDashboard] = useState(null); const [dashboardUrl, setDashboardUrl] = useState(null); const [embeddingContext, setEmbeddingContext] = useState(null); useEffect(() => { const timeout = setTimeout(() => { fetch("YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME" ).then((response) => response.json() ).then((response) => { setDashboardUrl(response.EmbedUrl) }) }, 10); return () => clearTimeout(timeout); }, []); const createContext = async () => { const context = await createEmbeddingContext(); setEmbeddingContext(context); } useEffect(() => { if (dashboardUrl) { createContext() } }, [dashboardUrl]) useEffect(() => { if (embeddingContext) { embed(); } }, [embeddingContext]) const embed = async () => { const options = { url: dashboardUrl, container: dashboardRef.current, height: "500px", width: "600px", }; const newEmbeddedDashboard = await embeddingContext.embedDashboard(options); setEmbeddedDashboard(newEmbeddedDashboard); }; useEffect(() => { if (embeddedDashboard) { embeddedDashboard.navigateToDashboard(dashboardId, {}) } }, [dashboardId]) const changeDashboard = async (e) => { const dashboardId = e.target.value setDashboardId(dashboardId) } return ( <> <header> <h1>Embedded <i>QuickSight</i>: Build Powerful Dashboards in React</h1> </header> <main> <p>Welcome to the QuickSight dashboard embedding sample page</p> <p>Please pick a dashboard you want to render</p> <select id='dashboard' value={dashboardId} onChange={changeDashboard}> <option value="YOUR_DASHBOARD1_ID">YOUR_DASHBOARD1_NAME</option> <option value="YOUR_DASHBOARD2_ID">YOUR_DASHBOARD2_NAME</option> </select> <div ref={dashboardRef} /> </main> </> );
}; export default App

بعد ذلك ، استبدل محتويات ملف App.css ملف ، والذي يتم استخدامه لتصميم وتخطيط صفحة الويب الخاصة بك ، مع المحتوى من مقتطف الشفرة التالي:

body { background-color: #ffffff; font-family: Arial, sans-serif; margin: 0; padding: 0;
} header { background-color: #f1f1f1; padding: 20px; text-align: center;
} h1 { margin: 0;
} main { margin: 20px; text-align: center;
} p { margin-bottom: 20px;
} a { color: #000000; text-decoration: none;
} a:hover { text-decoration: underline;
} i { color: orange; font-style: normal;
}

حان الوقت الآن لاختبار تطبيقك. ابدأ التطبيق الخاص بك عن طريق التشغيل npm start في محطتك. تعرض لقطات الشاشة التالية أمثلة لتطبيقك بالإضافة إلى لوحات المعلومات التي يمكن عرضها.

وفي الختام

في هذا المنشور ، أوضحنا لك كيفية تضمين لوحة معلومات QuickSight في تطبيق React باستخدام AWS SDK. تتيح مشاركة لوحة المعلومات الخاصة بك مع مستخدمين مجهولين الوصول إلى لوحة المعلومات الخاصة بك دون منحهم حق الوصول إلى حساب AWS الخاص بك. هناك أيضًا طرق أخرى لمشاركة لوحة المعلومات الخاصة بك بشكل مجهول ، مثل استخدام نقرة واحدة على التضمين العام.

الانضمام الى مجتمع Quicksight للسؤال والإجابة والتعلم مع الآخرين واستكشاف موارد إضافية.

عن المؤلف

أدريانا مهندس حلول في AWS Global Financial Services. بعد أن كانت جزءًا من Amazon منذ أغسطس 2018 ، أتيحت لها الفرصة للمشاركة في كل من العمليات وكذلك الأعمال السحابية للشركة. تقوم حاليًا ببناء أصول البرامج التي تُظهر الاستخدام المبتكر لخدمات AWS ، المصممة لحالات استخدام عميل محددة. على أساس يومي ، تشارك بنشاط في جوانب مختلفة من التكنولوجيا ، لكن شغفها الحقيقي يكمن في الجمع بين تطوير الويب والتحليلات.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
• أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
• أفلاطون السيارات / المركبات الكهربائية ، كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
• BlockOffsets. تحديث ملكية الأوفست البيئية. الوصول هنا.
• المصدر https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/