סקירה כללית (Dialogflow)

לוח הציור האינטראקטיבי הוא מסגרת שב-Google Assistant מאפשרת למפתחים להוסיף חוויות ויזואליות סוחפות ל'פעולות של שיחה'. החוויה החזותית הזו היא אפליקציית אינטרנט אינטראקטיבית ש-Assistant שולחת כתגובה למשתמש בשיחה. בניגוד לתגובות עשירות רגילות שמקודמות בשיחה ב-Assistant, אפליקציית האינטרנט של האינטראקטיבית לעיבוד עוברת כתצוגת אינטרנט במסך מלא.

כדאי להשתמש בלוח הציור האינטראקטיבי אם רוצים לבצע אחת מהפעולות הבאות:

  • יצירת רכיבים חזותיים במסך מלא
  • יצירת אנימציות ומעברים מותאמים אישית
  • הצגה חזותית של נתונים
  • יצירת פריסות בהתאמה אישית וGUI
איור 1. משחק אינטראקטיבי שנוצר באמצעות לוח הציור האינטראקטיבי.

מכשירים נתמכים

לוח שיתופי אינטראקטיבי זמין כרגע במכשירים הבאים:

  • תצוגות חכמות
  • Google Nest Hubs

  • ניידים של Android

איך זה עובד

פעולה שמשתמשת בלוח הציור האינטראקטיבי פועלת כמו פעולה רגילה בשיחה. למשתמש עדיין יש שיחה הלוך ושוב עם Assistant כדי להשלים את היעד. עם זאת, במקום להחזיר תשובות בתוך השיחה, פעולת לוח הציור האינטראקטיבי שולחת תגובה למשתמש שפותח אפליקציית אינטרנט במסך מלא. המשתמש ממשיך לקיים אינטראקציה עם אפליקציית האינטרנט באמצעות הקול או המגע עד לסיום השיחה.

לפעולה יש שימוש בבד אינטראקטיבי אינטראקטיבי, ויש כמה רכיבים:

  • פעולת שיחה: פעולה שמשתמשת בממשק שיחה כדי למלא בקשות של משתמשים. הפעולות האינטראקטיביות באזור העריכה עושות שימוש בצפיות באינטרנט כדי לעבד תגובות במקום כרטיסים עשירים, או תגובות פשוטות בטקסט ובקול. ב'פעולות שיחה' משתמשים ברכיבים הבאים:
    • סוכן של Dialogflow: פרויקט ב-Dialogflow שאתם יכולים להתאים אישית לשיחה עם משתמשי Action.
    • מילוי משימות: קוד שנפרס כ-webhook, שמטמיע את לוגיקת השיחה של סוכן Dialogflow ויוצר קשר עם אפליקציית האינטרנט.
  • אפליקציית אינטרנט: אפליקציית אינטרנט של ממשק קצה עם רכיבים חזותיים מותאמים אישית שהפעולה שלכם שולחת כתגובה למשתמשים במהלך שיחה. מפתחים את אפליקציית האינטרנט עם סטנדרטים של אינטרנט כמו HTML , JavaScript ו-CSS.

אפליקציות הפעולה והתקשורת ביניהם מתקשרות זו עם זו באמצעות:

  • Interactive Canvas API: ממשק API של JavaScript שכולל את אפליקציית האינטרנט כדי לאפשר תקשורת בין אפליקציית האינטרנט לבין פעולת השיחה שלכם.
  • HtmlResponse: תגובה שמכילה כתובת URL של אפליקציית האינטרנט ונתונים להעברה. אפשר להשתמש בספריות הלקוח Node.js או Java כדי להחזיר את הערך HtmlResponse.

כדי להמחיש את אופן הפעולה של לוח הציור האינטראקטיבי, דמיינו פעולה היפותטית שנקראת צבעים מגניבים שמשנה את צבע המסך של המכשיר לצבע שהמשתמש מציין. אחרי שהמשתמש מפעיל את הפעולה, התהליך נראה כך:

  1. המשתמש אומר Turn the screen blue למכשיר עם Assistant.
  2. הפלטפורמה של Actions on Google מנתבת את הבקשה של המשתמש ל-Dialogflow כדי להתאים את הכוונה.
  3. מילוי ההזמנות של המשתמש שתואם ל-Intent תואם ושולח למכשיר HtmlResponse. המכשיר משתמש בכתובת ה-URL כדי לטעון את אפליקציית האינטרנט אם היא עדיין לא נטענה.
  4. כשאפליקציית האינטרנט נטענת, מתועדות קריאות חוזרות (callback) עם ה-API של interactiveCanvas. הערך של האובייקט data מועבר לאחר מכן לקריאה חוזרת (callback) של אפליקציית האינטרנט onUpdate. בדוגמה שלנו, מילוי ההזמנה שולח HtmlResponse עם data שכולל משתנה עם הערך blue.
  5. הלוגיקה המותאמת אישית של אפליקציית האינטרנט קוראת את הערך של data של HtmlResponse ומבצעת את השינויים המוגדרים. בדוגמה הזו, המסך הופך לכחול.
  6. interactiveCanvas שולח את עדכון הקריאה החוזרת למכשיר.

השלבים הבאים

במאמר סקירה כללית על Build מוסבר איך ליצור פעולות אינטראקטיביות בבד ציור.

בדוגמה תוכלו לראות את הקוד של כל הפעולה האינטראקטיבית באזור העריכה.