שימוש באנליטיקס משובץ מ אמזון קוויקסייט יכול לפשט את תהליך הציוד של האפליקציה שלך בהדמיות פונקציונליות ללא כל פיתוח מורכב. ישנן מספר דרכים להטמיע לוחות מחוונים של QuickSight באפליקציה. בפוסט זה, אנו בוחנים כיצד ניתן לעשות זאת באמצעות React וה- Amazon QuickSight Embedding SDK.
לרוב, לצרכני לוח המחוונים אין משתמש שהוקצה לחשבון ה-AWS שלהם ולכן אין להם גישה ללוח המחוונים. כדי לאפשר להם לצרוך נתונים, לוח המחוונים צריך להיות נגיש למשתמשים אנונימיים. בואו נסתכל על השלבים הנדרשים כדי לאפשר למשתמש לא מאומת להציג את לוח המחוונים של QuickSight באפליקציית React.
סקירת פתרונות
הפתרון שלנו משתמש בשירותי המפתח הבאים:
לאחר טעינת דף האינטרנט בדפדפן, הדפדפן מבצע קריאה ל-API Gateway, אשר מפעילה פונקציית Lambda הקוראת ל-QuickSight API כדי ליצור כתובת אתר של לוח מחוונים עבור משתמש אנונימי. פונקציית Lambda צריכה לקבל תפקיד IAM עם ההרשאות הנדרשות. התרשים הבא מציג סקירה כללית של הארכיטקטורה.
תנאים מוקדמים
עליך לעמוד בדרישות הקדם הבאות:
הגדר הרשאות עבור צופים לא מאומתים
בחשבונך, צור מדיניות IAM שהיישום שלך יניח בשם הצופה:
- במסוף IAM בחר מדיניות בחלונית הניווט.
- בחרו צור מדיניות.
- על JSON הכרטיסייה, הזן את קוד המדיניות הבא:
הקפד לשנות את הערך של לערך מזהה לוח המחוונים. שים לב לזהות זה לשימוש גם בשלב מאוחר יותר.
עבור אובייקט ההצהרה השני עם יומנים, ההרשאות הן אופציונלי. זה מאפשר לך ליצור קבוצת יומן עם השם שצוין, ליצור זרם יומן עבור קבוצת היומן שצוינה, ולהעלות אצווה של אירועי יומן לזרם היומן שצוין.
במדיניות זו, אנו מאפשרים למשתמש לבצע את GenerateEmbedUrlForAnonymousUser
פעולה על מזהה לוח המחוונים ברשימת מזהי לוח המחוונים שהוכנסו למציין המיקום.
- הזן שם לפוליסה שלך (לדוגמה,
AnonymousEmbedPolicy
) ובחר צור מדיניות.
לאחר מכן, אנו יוצרים תפקיד ומצרפים מדיניות זו לתפקיד.
- בחרו תפקידים בחלונית הניווט, ולאחר מכן בחר צור תפקיד.
- בחרו למבדה עבור הישות האמינה.
- חפש ובחר
AnonymousEmbedPolicy
, ואז לבחור הַבָּא. - הזן שם לתפקיד שלך, כגון
AnonymousEmbedRole
. - ודא ששם המדיניות כלול ב- הוסף הרשאות סָעִיף.
- סיים ליצור את התפקיד שלך.
זה עתה יצרת את AnonymousEmbedRole
תפקיד ביצוע. כעת תוכל לעבור לשלב הבא.
צור פונקציית Lambda של כתובת URL להטמעה אנונימית
בשלב זה, אנו יוצרים פונקציית Lambda המקיימת אינטראקציה עם QuickSight כדי ליצור כתובת URL להטמעה עבור משתמש אנונימי. צריך לאפשר את הדומיין שלנו. ישנן שתי דרכים להשיג את האינטגרציה של Amazon QuickSight:
- על ידי הוספת כתובת האתר לרשימת הדומיינים המותרים במסוף הניהול של Amazon QuickSight (הסבר בהמשך ב [אופציונלי] הוסף את הדומיין שלך ב-QuickSight סָעִיף).
- [מומלץ] על ידי הוספת בקשת כתובת האתר להטמעה במהלך זמן הריצה בקריאה ל-API. אפשרות 1 מומלצת כאשר אתה צריך להתמיד בדומיינים המותרים. אחרת, הדומיינים יוסרו לאחר 30 דקות, וזה שווה ערך למשך ההפעלה. למקרי שימוש אחרים, מומלץ להשתמש באפשרות השנייה (מתוארת ומיושמת להלן).
במסוף למבה, צור פונקציה חדשה.
- בחר מחבר מאפס.
- בעד שם פונקציה, הזן שם, כגון
AnonymousEmbedFunction
. - בעד זמן ריצהבחר פייתון 3.9.
- בעד תפקיד ביצועבחר השתמש בתפקיד קיים.
- בחר את התפקיד
AnonymousEmbedRole
. - בחרו צור פונקציה.
- בדף פרטי הפונקציה, נווט אל קופונים לשונית והזן את הקוד הבא:
אם אינך משתמש ב-localhost, החלף 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 Proxy.
- בעד פונקציית למדה, הזן את שם הפונקציה שיצרת.
- בחרו שמור, ואז לבחור OK.
עכשיו אנחנו מוכנים לפרוס את ה-API.
- על פעולות בתפריט, בחר פרוס ממשק API.
- בעד שלב הפריסה, בחר שלב חדש.
- הזן שם לבמה שלך, כגון
embed
. - בחרו לפרוס.
[אופציונלי] הוסף את הדומיין שלך ב-QuickSight
אם הוספתם דומיינים מותרים ב צור פונקציית Lambda של כתובת URL להטמעה אנונימית חלק, אל תהסס לעבור הפעל את תמחור הקיבולת סָעִיף.
כדי להוסיף את הדומיין שלך לדומיינים המותרים ב-QuickSight, בצע את השלבים הבאים:
- במסוף QuickSight, בחר בתפריט המשתמש ולאחר מכן בחר נהל את QuickSight.
- בחרו תחומים והטמעה בחלונית הניווט.
- בעד תְחוּם, הזן את הדומיין שלך (
http://localhost:
).
דאג להחליף כדי להתאים את ההגדרה המקומית שלך.
- בחרו להוסיף.
הקפד להחליף את דומיין localhost בדומיין שבו תשתמש לאחר הבדיקה.
הפעל את תמחור הקיבולת
אם לא הפעלת את תמחור קיבולת ההפעלה, בצע את השלבים בסעיף זה. חובה לאפשר פונקציה זו כדי להמשיך הלאה.
תמחור הקיבולת מאפשר ללקוחות QuickSight לרכוש הפעלות קורא בכמויות גדולות מבלי להקצות קוראים בודדים ב-QuickSight. תמחור קיבולת אידיאלי עבור יישומים משובצים או פריסות בינה עסקית (BI) בקנה מידה גדול. למידע נוסף, בקר תמחור מהיר של אמזון.
כדי להפעיל את תמחור הקיבולת, בצע את השלבים הבאים:
- על נהל את QuickSight עמוד, בחר המנויים שלך בחלונית הניווט.
- ב תמחור קיבולת בחר, בחר קבל מנוי חודשי.
- בחרו אשר מנוי.
למידע נוסף על תמחור קיבולת, ראה חדש באמזון 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 להפעיל את כתובת האתר ושם המשאב שלך (לדוגמה,https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed
). - חלף
YOUR_DASHBOARD1_ID
עם ה-DashboardId הראשון שלךDashboardIdList
. זהו לוח המחוונים שיוצג בעיבוד הראשוני. - חלף
YOUR_DASHBOARD2_ID
עם ה-DashboardId השני שלךDashboardIdList
.
- חלף
קטע הקוד הבא מציג דוגמה של App.js
קובץ בפרויקט React שלך. הקוד הוא רכיב React שמטמיע לוח מחוונים של QuickSight על סמך מזהה לוח המחוונים שנבחר. הקוד מכיל את מרכיבי המפתח הבאים:
- ווים מדינה - שני ווים מדינה מוגדרים באמצעות
useState()
הוק מ-React:- לוח מחוונים – מחזיק את מזהה לוח המחוונים שנבחר כעת.
- quickSightEmbedding – מחזיק את אובייקט הטמעת QuickSight המוחזר על ידי
embedDashboard()
פונקציה.
- וו Ref – וו ref מוגדר באמצעות ה-
useRef()
הוק מ-React. הוא משמש כדי להחזיק הפניה לרכיב ה-DOM שבו יוטמע לוח המחוונים של QuickSight. - הוק של useEffect(). – הווק useEffect() משמש להפעלת הטבעה של לוח המחוונים של QuickSight בכל פעם שמזהה לוח המחוונים שנבחר משתנה. תחילה הוא מאחזר את כתובת ה-URL של לוח המחוונים עבור המזהה הנבחר מ-QuickSight API באמצעות שיטת fetch() . לאחר שהוא מאחזר את כתובת האתר, הוא קורא לפונקציה embed() עם כתובת ה-URL כארגומנט.
- שנה מטפל -
changeDashboard()
function הוא מטפל פשוט באירועים שמעדכן את מצב לוח המחוונים בכל פעם שהמשתמש בוחר לוח מחוונים אחר מהתפריט הנפתח. ברגע שמזהה לוח מחוונים חדש מוגדר, ה-useEffect הופעל. - פסק זמן של 10 אלפיות השנייה - מטרת השימוש בפסק זמן היא להציג עיכוב קטן של 10 אלפיות שניות לפני ביצוע קריאת ה-API. עיכוב זה יכול להיות שימושי בתרחישים שבהם ברצונך להימנע מקריאות API מיידיות או למנוע בקשות מוגזמות כאשר הרכיב מעבד לעתים קרובות. הזמן הקצוב נותן לרכיב קצת זמן להתיישב לפני תחילת בקשת ה-API. מכיוון שאנו בונים את האפליקציה במצב פיתוח, הזמן הקצוב מסייע למנוע שגיאות הנגרמות כתוצאה מההפעלה הכפולה של
useEffect
בתוךStrictMode
. למידע נוסף, עיין ב עדכונים למצב קפדני.
ראה את הקוד הבא:
לאחר מכן, החלף את התוכן שלך App.css
קובץ, המשמש לסגנון ופריסה של דף האינטרנט שלך, עם התוכן מקטע הקוד הבא:
עכשיו הגיע הזמן לבדוק את האפליקציה שלך. הפעל את היישום שלך על ידי הפעלה npm start
בטרמינל שלך. צילומי המסך הבאים מציגים דוגמאות של האפליקציה שלך כמו גם לוחות המחוונים שהיא יכולה להציג.
סיכום
בפוסט זה, הראינו לך כיצד להטמיע לוח מחוונים של QuickSight ביישום React באמצעות AWS SDK. שיתוף לוח המחוונים שלך עם משתמשים אנונימיים מאפשר להם לגשת ללוח המחוונים שלך מבלי להעניק להם גישה לחשבון AWS שלך. ישנן גם דרכים אחרות לשתף את לוח המחוונים שלך באופן אנונימי, כגון שימוש הטמעה ציבורית בלחיצה אחת.
הצטרף ל קהילת קוויקסייט לשאול, לענות וללמוד עם אחרים ולחקור משאבים נוספים.
על המחבר
אדריאנה הוא אדריכל פתרונות ב-AWS Global Services Financial Services. לאחר שהייתה חלק מאמזון מאז אוגוסט 2018, הייתה לה הזדמנות להיות מעורבת הן בתפעול והן בעסקי הענן של החברה. נכון לעכשיו, היא בונה נכסי תוכנה המדגימים שימוש חדשני בשירותי AWS, המותאמים למקרי שימוש ספציפיים של לקוח. על בסיס יומי, היא עוסקת באופן פעיל בהיבטים שונים של טכנולוגיה, אבל התשוקה האמיתית שלה טמונה בשילוב של פיתוח אתרים ואנליטיקה.
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
- PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
- PlatoESG. רכב / רכבים חשמליים, פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
- BlockOffsets. מודרניזציה של בעלות על קיזוז סביבתי. גישה כאן.
- מקור: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/
- :יש ל
- :הוא
- :איפה
- ][עמ'
- $ למעלה
- 1
- 10
- 100
- 11
- 12
- 13
- 14
- 20
- 200
- 2018
- 26
- 30
- 3000
- 60
- 7
- 9
- a
- אודות
- גישה
- נגיש
- חֶשְׁבּוֹן
- להשיג
- פעולה
- באופן פעיל
- להוסיף
- הוסיף
- מוסיף
- נוסף
- מנהל
- לאחר
- תעשיות
- להתיר
- מותר
- מאפשר
- גם
- אמזון בעברית
- אמזון קוויקסייט
- אמזון שירותי אינטרנט
- an
- ניתוח
- ו
- אנונימי
- בעילום שם
- לענות
- כל
- API
- האפליקציה
- בקשה
- יישומים
- ארכיטקטורה
- ARE
- טענה
- AS
- היבטים
- נכסים
- שהוקצה
- לְהַנִיחַ
- At
- לצרף
- אוגוסט
- מחבר
- לְהִמָנַע
- לחכות
- AWS
- מבוסס
- בסיס
- BE
- כי
- היה
- לפני
- בשם
- להלן
- גוּף
- שניהם
- דפדפן
- לִבנוֹת
- בִּניָן
- בונה
- עסקים
- מודיעין עסקי
- אבל
- by
- שיחה
- שיחות
- CAN
- קיבולת
- מקרים
- גרם
- מרכז
- סיכוי
- שינוי
- שינויים
- בחרו
- לקוחות
- ענן
- קוד
- צֶבַע
- שילוב
- חברה
- להשלים
- מורכב
- רְכִיב
- רכיבים
- תְצוּרָה
- קונסול
- לצרוך
- צרכנים
- מכולה
- מכיל
- תוכן
- תוכן
- הקשר
- לִיצוֹר
- נוצר
- יוצרים
- CSS
- נוֹכְחִי
- כיום
- לקוח
- לקוחות
- יומי
- לוח מחוונים
- לוחות מחוונים
- נתונים
- בְּרִירַת מֶחדָל
- מוגדר
- עיכוב
- להפגין
- לפרוס
- פריסות
- מְתוּאָר
- פרטים
- מפתח
- צעצועי התפתחות
- אחר
- לְהַצִיג
- DOM
- תחום
- תחומים
- עשה
- לא
- לְהַכפִּיל
- משך
- בְּמַהֲלָך
- e
- השפעה
- אלמנט
- שבץ
- מוטבע
- הטבעה
- לאפשר
- מופעל
- עוסק
- זן
- ישות
- סביבה
- שווה
- שגיאה
- שגיאות
- Ether (ETH)
- אירוע
- אירועים
- דוגמה
- דוגמאות
- אלא
- יוצא מן הכלל
- הוצאת להורג
- קיימים
- מוסבר
- לחקור
- יצוא
- להרגיש
- שלח
- כספי
- שירותים פיננסיים
- ראשון
- לעקוב
- הבא
- בעד
- חופשי
- בתדירות גבוהה
- החל מ-
- פונקציה
- פונקציונלי
- נוסף
- שער כניסה
- ליצור
- נותן
- גלוֹבָּלִי
- פיננסי גלובלי
- Go
- הענקת
- קְבוּצָה
- היה
- יש
- יש
- כותרות
- גובה
- עוזר
- לה
- להחזיק
- מחזיק
- הוקס
- לרחף
- איך
- איך
- http
- HTTPS
- i
- IAM
- ID
- אידאל
- זהות
- מזהה
- if
- מיידי
- יושם
- לייבא
- in
- כלול
- בנפרד
- מידע
- בתחילה
- ייזום
- חדשני
- להתקין
- השתלבות
- מוֹדִיעִין
- אינטראקטיבי
- אל תוך
- מבוא
- מעורר
- מעורב
- IT
- ג'סון
- רק
- מפתח
- חוסר
- גָדוֹל
- בקנה מידה גדול
- מאוחר יותר
- מערך
- לִלמוֹד
- רמה
- שקרים
- רשימה
- טוען
- מקומי
- היכנס
- נראה
- ראשי
- עושה
- עשייה
- מנדטורי
- שולים
- להתאים
- תפריט
- שיטה
- דקות
- מצב
- אחת לחודש
- יותר
- המהלך
- מספר
- צריך
- שם
- נווט
- ניווט
- צורך
- צרכי
- חדש
- הבא
- נוֹרמָלִי
- עַכשָׁיו
- אובייקט
- of
- לעתים קרובות
- on
- ONE
- תפעול
- אפשרות
- אפשרויות
- or
- כָּתוֹם
- OS
- אחר
- אחרים
- אַחֶרֶת
- שלנו
- סקירה
- חבילה
- עמוד
- זגוגית
- חלק
- תשוקה
- לבצע
- הרשאות
- לבחור
- מציין מיקום
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- אנא
- מדיניות
- כניסה
- הודעה
- חזק
- תנאים מוקדמים
- למנוע
- תמחור
- תהליך
- הפקה
- פּרוֹיֶקט
- אַספָּקָה
- פרוקסי
- ציבורי
- לִרְכּוֹשׁ
- מטרה
- RE
- להגיב
- קורא
- הקוראים
- מוכן
- מוּמלָץ
- באזור
- הוסר
- מעבד
- להחליף
- לבקש
- בקשות
- נדרש
- משאב
- משאבים
- תגובה
- לַחֲזוֹר
- החזרות
- תפקיד
- שורש
- הפעלה
- ריצה
- סולם
- תרחישים
- צילומי מסך
- Sdk
- שְׁנִיָה
- שניות
- סעיף
- לִרְאוֹת
- נבחר
- שירותים
- מושב
- הפעלות
- סט
- ליישב
- התקנה
- שיתוף
- שיתוף
- היא
- צריך
- לְהַצִיג
- הראה
- הראה
- הופעות
- דומה
- פָּשׁוּט
- לפשט
- since
- קטן
- תוכנה
- פִּתָרוֹן
- פתרונות
- כמה
- בקרוב
- ספציפי
- מפורט
- התמחות
- התחלה
- מדינה
- הצהרה
- שלב
- צעדים
- זרם
- קַפְּדָנִי
- סגנון
- כזה
- בטוח
- מותאם
- יעד
- טכנולוגיה
- מסוף
- מבחן
- בדיקות
- זֶה
- השמיים
- שֶׁלָהֶם
- אותם
- אז
- שם.
- לכן
- זֶה
- זמן
- ל
- להפעיל
- מופעל
- נָכוֹן
- מהימן
- לנסות
- תור
- שתיים
- תחת
- לָשִׂים דָגֵשׁ
- עדכונים
- כתובת האתר
- להשתמש
- מְשׁוּמָשׁ
- משתמש
- משתמשים
- שימושים
- באמצעות
- ערך
- שונים
- גרסה
- לצפיה
- לְבַקֵר
- רוצה
- דרכים
- we
- אינטרנט
- בניית אתרים
- שירותי אינטרנט
- אתרים
- ברוך הבא
- טוֹב
- מתי
- בכל פעם
- אשר
- יצטרך
- עם
- בתוך
- לְלֹא
- אתה
- זפירנט