איך בונים פעולה אינטראקטיבית בלוח הציור ל-Google Assistant בעזרת Actions Builder

1. סקירה כללית

‫Actions on Google היא פלטפורמת פיתוח שמאפשרת ליצור תוכנה להרחבת הפונקציונליות של Google Assistant, העוזרת האישית הווירטואלית של Google, ביותר ממיליארד מכשירים, כולל רמקולים חכמים, טלפונים, מכוניות, טלוויזיות, אוזניות ועוד. משתמשים מנהלים שיחה עם Google Assistant כדי לבצע פעולות, כמו קניית מצרכים או הזמנת נסיעה. לרשימה מלאה של הפעולות שאפשר לבצע עכשיו, אפשר לעיין בספריית הפעולות. מפתחים יכולים להשתמש ב-Actions on Google כדי ליצור ולנהל בקלות חוויות שיחה נעימות ומועילות בין משתמשים לבין שירות צד שלישי משלהם.

ה-codelab הזה הוא מודול מתקדם שמיועד לקוראים שכבר יש להם ניסיון מסוים בפיתוח פעולות ל-Google Assistant. אם אין לכם ניסיון קודם בפיתוח פעולות ב-Actions on Google, מומלץ לעבור על שיעורי ה-Codelab המבואיים ( רמה 1 ורמה 2) כדי להכיר את הפלטפורמה. המודולים האלה יציגו לכם סדרה של תכונות שיכולות לעזור לכם להרחיב את הפונקציונליות של הפעולה ולהגדיל את קהל היעד.

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

במקום לבנות משחק שלם בעצמכם, תפרסו משחק שנבנה מראש באופן חלקי בשם Snow Pal ותוסיפו את הלוגיקה של המשחק תוך כדי התקדמות ב-Codelab. Snow Pal הוא וריאציה של המשחק המסורתי Hangman (תליין). במשחק מוצגים מספר רווחים שמייצגים מילה, ואתם מנחשים אותיות שלדעתכם מופיעות במילה. עם כל ניחוש שגוי, חבר השלג נמס קצת יותר. כדי לנצח במשחק, צריך לנחש את המילה לפני שחבר השלג נמס לגמרי.

איור 1. משחק Snow Pal שהושלם באופן חלקי

מה תפַתחו

ב-Codelab הזה תבנו פעולה שמשתמשת באזור עריכה אינטראקטיבי. הפעולה שלכם תכלול את התכונות הבאות:

משחק מילים במסך מלא שבו המשתמשים יכולים לשחק באמצעות קול
לחצן שהמשתמשים יכולים ללחוץ עליו כדי להתחיל את המשחק
כפתור שהמשתמשים יכולים ללחוץ עליו כדי לשחק שוב במשחק

בסיום ה-codelab הזה, הפעולה שהשלמתם תכלול את רצף השיחה הבא:

Assistant: Welcome to Snow Pal! Would you like to start playing the game?

משתמש: Yes.

Assistant: Try guessing a letter in the word or guessing the word.

משתמש: I guess the letter E.

Assistant: Let's see if your guess is there...E is right. Right on! Good guess.

המשתמש ממשיך לנחש אותיות או את המילה הלא ידועה עצמה, עד שהמשחק מסתיים.

מה תלמדו

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

הדרישות

הדרישות המוקדמות ל-codelab הזה כוללות את הדברים הבאים:

דפדפן אינטרנט, כמו Google Chrome
סביבת פיתוח משולבת (IDE) או עורך טקסט לפי בחירתכם
Node.js,‏ npm ו-git מותקנים במחשב

מומלץ מאוד להכיר את JavaScript‏ (ES6) כדי להבין את הקוד שמשמש ב-Codelab הזה.

אופציונלי: קבלת קוד לדוגמה מלא

ב-Codelab הזה תבנו את הדוגמה שלב אחר שלב מגרסה לא מלאה. אם אתם מעדיפים, אתם יכולים גם לקבל את הדוגמה המלאה ממאגר GitHub.

2. מבוא לאזור עריכה אינטראקטיבי

‫Interactive Canvas הוא מסגרת שנוצרה על בסיס Google Assistant, ומאפשרת להוסיף רכיבים חזותיים ואנימציות במסך מלא לפעולות שיחה.

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

המשתמש מספק קלט לאפליקציית האינטרנט באמצעות קול או מגע עד שהשיחה מסתיימת.

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

ב-codelab הזה, הפרויקט מחולק לשלושה חלקים עיקריים:

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

בכל חלק של ה-codelab הזה, משנים את אפליקציית האינטרנט, את הפעולה לניהול שיחה ואת ה-webhook כדי להוסיף פונקציונליות לפעולה האינטראקטיבית ב-Canvas.

באופן כללי, פעולת ההמרה, ה-webhook ואפליקציית האינטרנט בפעולת Snow Pal פועלות באופן הבא:

הפעולה לשיחה מציעה למשתמש לנחש אות במילה או לנחש את המילה כולה.
המשתמש אומר "I guess the letter i" לאפליקציית האינטרנט Snow Pal במסך חכם.
הקלט של המשתמש מנותב לפעולה השיחתית שלכם, שמוגדרת בפרויקט שלכם ב-Actions Builder או ב-Actions SDK.
הפעולה לשיחה מעבדת את הקלט של המשתמש, ובהתאם לקלט, מפעילה לוגיקה ב-webhook שמעדכנת את אפליקציית האינטרנט או שולחת מטא-נתונים כדי לעדכן את אפליקציית האינטרנט ישירות.
אפליקציית האינטרנט מתעדכנת ומראה איפה האות מופיעה במילה, והמשתמש מתבקש לנחש שוב.

בקטע הסבר על התשתית של Interactive Canvas מוסבר איך פועל Interactive Canvas. עכשיו, אחרי שלמדתם את עקרונות הבסיס, אתם יכולים להתחיל להגדיר את הסביבה שלכם ל-codelab הזה.

3. הגדרה

בדיקת הגדרות ההרשאות ב-Google

כדי לבדוק את הפעולה שאתם יוצרים ב-codelab הזה, אתם צריכים להפעיל את ההרשאות הנדרשות כדי שהסימולטור של Actions Console יוכל לגשת לפעולה. כדי להפעיל הרשאות:

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

פעילות באינטרנט ובאפליקציות
בקטע פעילות באינטרנט ובאפליקציות, מסמנים את התיבה שמירה של ההיסטוריה ב-Chrome והפעילות מאתרים, מאפליקציות וממכשירים המשתמשים בשירותי Google.

התקנה של ממשק שורת הפקודה gactions

ב-codelab הזה, משתמשים בכלי gactions של ממשק שורת הפקודה (CLI) כדי לסנכרן את פרויקט הפעולות בין Actions console לבין מערכת הקבצים המקומית.

כדי להתקין את gactions CLI, פועלים לפי ההוראות בקטע התקנה של כלי שורת הפקודה gactions.

התקנה של ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה (CLI) של Firebase מאפשר לכם לפרוס את פרויקט הפעולות שלכם ב-Cloud Functions ולארח את אפליקציית האינטרנט שלכם.

ב-Codelab הזה משתמשים ב-npm כדי להתקין את Firebase CLI. חשוב לוודא שהתקנתם את npm, שבדרך כלל מגיע עם Node.js.

כדי להתקין או לשדרג את ה-CLI, פותחים טרמינל ומריצים את הפקודה הבאה: npm

npm install -g firebase-tools

כדי לוודא שה-CLI הותקן בצורה תקינה, מריצים את הפקודה הבאה:

firebase --version

חשוב לוודא שגרסת Firebase CLI היא 8 ומעלה, כדי שיהיו בה כל התכונות העדכניות שנדרשות ל-Cloud Functions. אם לא, מריצים את הפקודה npm install -g firebase-tools כדי לשדרג.

כדי להיכנס ל-Firebase, מריצים את הפקודה הבאה:

firebase login

כשמתחברים ל-Firebase, צריך לוודא שמשתמשים באותו חשבון Google שבו השתמשתם כדי ליצור את פרויקט הפעולות.

שכפול המאגר

בקטע הזה, משכפלים את הקבצים שצריך בשביל ה-codelab הזה. כדי לקבל את הקבצים האלה, פועלים לפי השלבים הבאים:

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

git clone https://github.com/actions-on-google/actions-builder-canvas-codelab-nodejs

פותחים את הספרייה start/. המאגר הזה מכיל את הספריות החשובות הבאות שבהן תעבדו:

‫public/: בספרייה הזו נמצאים קוד ה-HTML, ה-CSS וה-JavaScript של אפליקציית האינטרנט.
‫sdk/custom/: הספרייה הזו מכילה את הלוגיקה של הפעולה לשיחה (סצנות, כוונות וסוגים).
‫sdk/webhooks/: הספרייה הזו היא ה-webhook שלכם ומכילה את הלוגיקה של המשחק.

איור 3. המבנה של קוד הספרייה start.

4. הגדרת פרויקט Actions

בקטע הזה, יוצרים ומגדירים את פרויקט הפעולות, מעבירים את הקוד מהמאגר המשוכפל אל מסוף הפעולות באמצעות gactions CLI, ופורסים את אפליקציית האינטרנט ואת ה-webhook.

יצירת פרויקט Actions

פרויקט הפעולות הוא מאגר לפעולה שלכם. כדי ליצור פרויקט Actions בשביל ה-codelab הזה, פועלים לפי השלבים הבאים:

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

לוחצים על יצירת פרויקט.
במסך What kind of Action do you want to build? (איזה סוג פעולה רוצה ליצור?), בוחרים בכרטיס Game (משחק).
לוחצים על הבא.
בוחרים בכרטיס Blank project (פרויקט ריק).
לוחצים על התחלת בנייה.

שמירת מזהה הפרויקט של הפעולה

מזהה הפרויקט הוא מזהה ייחודי של הפעולה. תצטרכו את מזהה הפרויקט לכמה שלבים ב-codelab הזה.

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

במסוף Actions, לוחצים על סמל האפשרויות הנוספות (3 נקודות אנכיות) > הגדרות הפרויקט.

מעתיקים את מזהה הפרויקט.

שיוך חשבון לחיוב

כדי לפרוס את מרכז הבקרה בהמשך ה-codelab באמצעות Cloud Functions, אתם צריכים לשייך חשבון לחיוב לפרויקט ב-Google Cloud. אם כבר יש לכם חשבון לחיוב, אתם יכולים להתעלם מהשלבים הבאים.

כדי לשייך חשבון לחיוב לפרויקט:

עוברים אל דף החיוב ב-Google Cloud Platform.
לוחצים על הוספת חשבון לחיוב או על יצירת חשבון.
ממלאים את פרטי התשלום.
לוחצים על התחלת תקופת הניסיון בחינם או על שליחה והפעלת חיוב.
עוברים אל דף החיוב ב-Google Cloud.
לוחצים על הכרטיסייה הפרויקטים שלי.
לוחצים על סמל שלוש הנקודות > שינוי החיוב.
בתפריט הנפתח, בוחרים את החשבון לחיוב שהגדרתם.
לוחצים על Set account.

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

פריסת אפליקציית אינטרנט

בקטע הזה נסביר איך פורסים את אפליקציית האינטרנט (המשחק Snow Pal) באמצעות Firebase CLI. אחרי הפריסה, אפשר לאחזר את כתובת ה-URL של אפליקציית האינטרנט ולראות איך המשחק נראה בדפדפן.

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

בטרמינל, עוברים לספרייה start/.
מריצים את הפקודה הבאה ומחליפים את {PROJECT_ID} במזהה הפרויקט:

firebase deploy --project {PROJECT_ID} --only hosting

אחרי כמה דקות, אמור להופיע "Deploy complete!", שמעיד על כך שפרסתם בהצלחה את אפליקציית האינטרנט Snow Pal ב-Firebase.

כדי להציג את המשחק Snow Pal בדפדפן, פועלים לפי השלבים הבאים:

מאחזרים את כתובת ה-URL של האירוח שמופיעה בפלט של הטרמינל. כתובת ה-URL צריכה להיות בפורמט הבא: https://<PROJECT_ID>.web.app

מדביקים את כתובת ה-URL בדפדפן. אמור להופיע מסך הפתיחה של המשחק Snow Pal עם הלחצן Start Game (התחלת המשחק):

הוספת כתובת URL של אפליקציית אינטרנט ומזהה פרויקט לפרויקט Actions

לאחר מכן, מוסיפים את כתובת ה-URL של אפליקציית האינטרנט ואת מזהה הפרויקט לקובץ actions.intent.MAIN.yaml. הוספת כתובת ה-URL של אפליקציית האינטרנט מאפשרת לפעולה לשיחה לדעת לאיזו כתובת URL לשלוח נתונים, והוספת מזהה הפרויקט ב-settings.yaml מאפשרת להעביר את הקבצים שהורדו לפרויקט הנכון במסוף הפעולות.

כדי להוסיף את כתובת ה-URL של אפליקציית האינטרנט ואת מזהה הפרויקט, פועלים לפי השלבים הבאים:

פותחים את הקובץ start/sdk/custom/global/actions.intent.MAIN.yaml בכלי לעריכת טקסט.
בשדה כתובת URL, מחליפים את מחזיק המקום בכתובת ה-URL של אפליקציית האינטרנט.
פותחים את הקובץ start/sdk/settings/settings.yaml בכלי לעריכת טקסט.
בשדה projectId, מחליפים את מחרוזת ה-placeholder במזהה הפרויקט.

העברת פרויקט לקונסולה ל-Actions

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

עוברים לספרייה sdk:

cd sdk/

כדי להעתיק את התצורה של מערכת הקבצים המקומית למסוף Actions, מריצים את הפקודה הבאה:

gactions push

פריסת webhook

כשמריצים את הפקודה gactions push, מייבאים את קוד ה-webhook ההתחלתי למסוף Actions. בשאר שלבי ה-codelab הזה, תוכלו לערוך את קוד ה-webhook במסוף Actions. בשלב הזה, אפשר לפרוס את ה-webhook ממסוף הפעולות.

כדי לפרוס את ה-webhook, פועלים לפי השלבים הבאים:

במסוף Actions, לוחצים על Develop (פיתוח) בסרגל הניווט.
בסרגל הניווט, לוחצים על הכרטיסייה Webhook.
לוחצים על Deploy Fulfillment (פריסת מילוי בקשות).

יכול להיות שיחלפו כמה דקות עד שהמערכת של Cloud Functions תספק את המידע ותפרוס את ההשלמה. אמורה להופיע ההודעה Cloud Function deployment in progress...‎ (פריסת Cloud Function נמצאת בתהליך). אם הפריסה של הקוד מצליחה, ההודעה מתעדכנת לYour Cloud Function deployment is up to date (הפריסה של הפונקציה ב-Cloud Functions עדכנית).

בדיקה בסימולטור

בשלב הזה, הפעולה שלכם מקושרת לאפליקציית האינטרנט. אתם יכולים להשתמש בסימולטור של מסוף הפעולות כדי לוודא שאפליקציית האינטרנט מופיעה כשמפעילים את הפעולה.

כדי לבדוק את הפעולה, מבצעים את השלבים הבאים:

בסרגל הניווט של מסוף הפעולות, לוחצים על בדיקה.
מקלידים Talk to Snow Pal sample בשדה קלט ומקישים על Enter.
מקלידים Yes בשדה קלט ומקישים על Enter. אפשר גם ללחוץ על התחלת המשחק.

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

5. הסבר על התשתית של אזור העריכה האינטראקטיבי

בפרויקט הזה, הפונקציונליות מאורגנת בשלושה רכיבים עיקריים: פעולה שיש לה ממשק שיחה, אפליקציית האינטרנט ו-webhook. שימו לב שזהו מודל אחד להגדרת הפעולה, והוא מאורגן בצורה הזו כדי להדגיש את הפונקציונליות העיקרית של Interactive Canvas.

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

פעולת שיחה

רכיב הפעולה לניהול שיחות של הפעולה מטפל בזיהוי הקלט של המשתמש, בעיבוד שלו ובשליחה שלו לסצנה המתאימה, שבה נוצרת תגובה למשתמש. לדוגמה, אם משתמש אומר "אני מנחש שהאות ה'" במשחק Snow Pal, הפעולה לשיחה מחלצת את האות כפרמטר של כוונת המשתמש ומעבירה אותה ללוגיקה המתאימה של המשחק, שקובעת אם הניחוש נכון ומעדכנת את אפליקציית האינטרנט בהתאם. אפשר לראות ולשנות את הלוגיקה של השיחה הזו ב-Actions Builder, סביבת פיתוח משולבת (IDE) מבוססת-אינטרנט במסוף Actions. בצילום המסך הבא מוצג חלק מפעולת השיחה שלכם ב-Actions Builder:

איור 4. הדמיה של Main invocation בכלי Actions Builder.

בצילום המסך הזה מוצג Main invocation הפעולה, שאותו המשתמשים צריכים להגיד כדי להפעיל את הפעולה. למשל, "Ok Google, talk to Snow Pal sample". כשהמשתמש מפעיל את הפעולה שלכם, Main invocation שולח הנחיה עם תגובה של canvas, שמכילה את כתובת ה-URL של אפליקציית האינטרנט שלכם.

התגובה הראשונה canvas בפעולה חייבת לכלול את כתובת ה-URL של אפליקציית האינטרנט. בתגובה הזו, Assistant מורה להציג את אפליקציית האינטרנט בכתובת הזו במכשיר של המשתמש. תשובות נוספות של canvas ב-Actions Builder יכולות לכלול שדה, send_state_data_to_canvas_app, שמוגדר לערך true. השדה הזה שולח את שם הכוונה ואת כל ערכי הפרמטרים לאפליקציית האינטרנט כשהכוונה מזוהה, ואפליקציית האינטרנט מתעדכנת על סמך הנתונים האלה מהקלט של המשתמש.

Webhook

ב-Codelab הזה, ה-webhook מכיל את לוגיקת המשחק (אפשר לחשוב על ה-webhook כעל שרת גיימינג). הלוגיקה של המשחק כוללת רכיבים כמו קביעה אם הניחוש של המשתמש נכון או לא, או אם המשתמש ניצח או הפסיד, ויצירת תגובה על סמך התוצאה. אפשר לשנות את ה-webhook ב-Actions Builder.

כשפעולה צריכה להפעיל לוגיקה של משחק, כלי הפיתוח של Actions Builder מבצע קריאה ל-webhook. לדוגמה, כוונת guess בסצנה Game מבצעת קריאה ל-webhook ל-handler‏ guess, שבהמשך מפעיל לוגיקה כדי לקבוע אם הניחוש של המשתמש נכון או לא. ה-webhook יכול לכלול Canvas תגובות בתוך ה-handlers שממופים לקבצים של אפליקציית האינטרנט, ולעדכן את האינטרנט בהתאם.

אפליקציית אינטרנט

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

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

תקשורת בין פעולת שיחה לבין אפליקציית אינטרנט

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

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

הסקריפט של ה-API הזה כלול בקובץ /public/index.html, שהוא קובץ ה-HTML הראשי של המשחק Snow Pal. בקובץ הזה מוגדר איך ממשק המשתמש נראה ונטען בכמה סקריפטים:

index.html

<!-- Load Assistant Interactive Canvas API -->
 <script type="text/javascript" src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

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

ב-/public/js/action.js, יש מחלקה מוגדרת מראש בשם Action להצהרה ולרישום של קריאות חוזרות (callback). המחלקות Action הן wrappers של Interactive Canvas API. כשיוצרים את אפליקציית האינטרנט באמצעות הפונקציה create() ב-scene.js, נוצר מופע חדש של Action והפונקציה setCallbacks() מופעלת, כמו שמוצג בקטע הקוד הבא:

scene.js

// Set Assistant at game level.
this.assistant = new Action(this);
// Call setCallbacks to register Assistant Action callbacks.
this.assistant.setCallbacks();

הפונקציה setCallbacks() מוגדרת במחלקה Action של /public/js/action.js. הפונקציה הזו מכריזה על קריאות חוזרות ורושמת אותן ב-Interactive Canvas API כשיוצרים את המשחק:

  setCallbacks() {
    // Declare the Interactive Canvas Action callbacks.
    const callbacks = {
      onUpdate: (data) => {
     ...
    // Called by the Interactive Canvas web app once web app has loaded to
    // register callbacks.
    this.canvas.ready(callbacks);
  }

הפונקציה setCallbacks() מכריזה על הקריאה החוזרת onUpdate(), שהמערכת קוראת לה בכל פעם ששולחים תגובה Canvas.

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

עדכון אפליקציית האינטרנט על סמך הקלט של המשתמש

ב-codelab הזה, משתמשים במפת פקודות כדי לעדכן את אפליקציית האינטרנט על סמך הקלט של המשתמש. לדוגמה, כשמתבצעת התאמה של כוונת start_game בסצנה Welcome, התגובה canvas שנכללת בהנחיה נשלחת לאפליקציית האינטרנט. onUpdate() מנתח את המטא-נתונים מהתגובה canvas ומפעיל את הפקודה START_GAME, שבתורה מפעילה את הפונקציה start() ב-scene.js ומעדכנת את אפליקציית האינטרנט כדי להתחיל סשן משחק חדש.

הפונקציה start() ב-scene.js קוראת גם לפונקציה updateCanvasState(), שמשתמשת בשיטה שנקראת setCanvasState() כדי להוסיף נתוני מצב שאפשר לגשת אליהם באמצעות ה-webhook.

השיטה updateCanvasState() נקראת בסוף כל פקודה (תוסיפו את הפקודות האלה במהלך ה-codelab) ומעדכנת את המצב של אפליקציית האינטרנט. בכל פעם שמתבצעת קריאה ל-updateCanvasState(), הערכים של displayedWord ו-incorrectGuesses מתעדכנים בהתאם למצב הנוכחי:

scene.js

...
  updateCanvasState() {
    window.interactiveCanvas.setCanvasState({
      correctWord: this.word.text,
      displayedWord: this.word.displayText.text,
      incorrectGuesses: this.incorrectGuesses,
    });

הסטטוס המעודכן יהיה זמין בפנייה הבאה בשיחה. אפשר לגשת למצב הזה ב-webhook דרך conv.context.canvas.state, כמו בקטע הקוד הבא:

index.js

...
  let displayedWord = conv.context.canvas.state.displayedWord;
...

6. הוספת פונקציונליות של ניחוש

בקטע הזה מוסיפים את הפונקציונליות של guess לפעולה, כדי שהמשתמש יוכל לנחש אותיות במילה או את המילה עצמה.

פעולת שיחה

בקטע בדיקה בסימולטור קיבלת תגובה שכללה את הטקסט "נראה שצריך להוסיף עוד פונקציונליות כדי שהפעולה הזו תתבצע כמו שצריך". עכשיו אפשר למחוק את ההנחיה הזו במסוף Actions, כדי שהמערכת תפעיל רק את ה-webhook (בסצנה Game, הכוונה guess כבר מוגדרת להפעלת webhook כשהיא מזוהה).

כדי להסיר את ההנחיה הסטטית כשהכוונה guess מזוהה, פועלים לפי השלבים הבאים:

במסוף Actions, לוחצים על Scenes (סצנות) בסרגל הניווט.
לוחצים על משחק כדי לעבור לסצנה Game.
לוחצים על When guess is matched (כשהניחוש תואם) בקטע User intent handling (טיפול בכוונה של המשתמש). מבטלים את הסימון של שליחת הנחיות כדי להסיר את ההנחיה.
לוחצים על שמירה.

Webhook

בקטע הזה, מעדכנים את ה-webhook עם לוגיקה שממפה את הניחוש הנכון או הלא נכון של המשתמש ללוגיקה בקובץ של אפליקציית אינטרנט, ואז מעדכנת את אפליקציית האינטרנט בהתאם. ה-intent handler‏ guess כבר מוגדר בשבילכם ב-webhook, כך שאתם צריכים רק להוסיף תגובות Canvas ל-intent הזה כדי להפעיל לוגיקה שמעדכנת את אפליקציית האינטרנט.

כדי לעדכן את ה-webhook, פועלים לפי השלבים הבאים:

במסוף Actions, לוחצים על Webhook בסרגל הניווט.
מוסיפים את הקוד הבא אל index.js מתחת ל-handler‏ guess:

‫index.js (קטע א'):

// Add Section A `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'CORRECT_ANSWER',
    displayedWord: displayedWord
  },
}));

‫index.js (מקטע ב'):

// Add Section B `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'INCORRECT_ANSWER',
  },
}));

לוחצים על שמירת ההזמנה.
לוחצים על Deploy Fulfillment (פריסת מילוי בקשות). בסיום הפריסה, תוצג ההודעה Your Cloud Function deployment is up to date (הפריסה של Cloud Function עדכנית).

אפליקציית אינטרנט

עכשיו אפשר להגדיר את אפליקציית האינטרנט כך שתטפל בפקודות CORRECT_ANSWER ו-INCORRECT_ANSWER.

פותחים את public/js/action.js בכלי לעריכת טקסט.
מעדכנים את אפליקציית האינטרנט כדי לטפל בפקודות CORRECT_ANSWER ו-INCORRECT_ANSWER:

‫action.js (Section C):

// Add Section C `CORRECT_ANSWER: (params) => {` content here.
      CORRECT_ANSWER: (params) => {
        this.gameScene.correctAnswer(params);
      },
      INCORRECT_ANSWER: (params) => {
        this.gameScene.incorrectAnswer();
      },

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

firebase deploy --project {PROJECT_ID} --only hosting

בדיקת הפעולה באמולטור

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

כדי לבדוק את הפעולה, מבצעים את השלבים הבאים:

בסרגל הניווט, לוחצים על בדיקה.
מקלידים Talk to Snow Pal sample בשדה קלט ומקישים על Enter.
מקלידים Yes בשדה קלט ומקישים על Enter. אפשר גם ללחוץ על הלחצן כן.
מקלידים את האות שרוצים לנחש בשדה קלט ולוחצים על Enter.

הסבר על הקוד

בקטע הקודם הוספתם קוד שמאפשר למשתמשים לנחש אותיות במשחק ולראות את הניחושים האלה משתקפים במילה או בחבר שלג. באופן כללי, אתם מבצעים קריאה ל-webhook ב-Actions Builder כשהכוונה guess מתאימה, והקריאה מעבירה נתונים לאפליקציית האינטרנט כדי לעדכן אותה בהתאם. לדוגמה, אם המשתמש מנחש אות במשחק Snow Pal שקיימת במילה, אפליקציית האינטרנט מתעדכנת ומציגה את האות במיקום הנכון במילה.

בפעולות שמשתמשות ב-Interactive Canvas, התהליך הכללי של העברת נתונים מ-webhook לאפליקציית אינטרנט הוא כזה:

הקלט של המשתמש תואם לכוונת משתמש שכוללת תגובה של Canvas.
האינטראקציה או ה-webhook שולחים את התגובה Canvas, שמופעלת על ידי הקריאה החוזרת onUpdate().
הקריאה החוזרת onUpdate() ממופה ללוגיקה מותאמת אישית שמעדכנת את אפליקציית האינטרנט בהתאם.

בפרויקט הזה, הקוד פועל באופן הבא:

כשהמשתמש מביע כוונת guess, Actions Builder מחלץ את האות מקלט המשתמש כפרמטר.
‫Actions Builder קורא ל-handler‏ guess ב-webhook, שמכיל לוגיקה לקביעה אם האות שהמשתמש ניחש מופיעה במילה.
ה-handler של guess מכיל שתי תשובות Canvas – אחת שמופעלת כשהאות נכונה, ואחת שמופעלת כשהאות שגויה. כל תגובה של Canvas מעבירה את הנתונים המתאימים (הפקודה CORRECT_ANSWER או INCORRECT_ANSWER) לאפליקציית האינטרנט.
הנתונים שמופיעים בשדה data בתגובה Canvas מועברים אל method‏ onUpdate() ב-action.js. ‫onUpdate() קוראת לפקודה המתאימה במפת הפקודות ב-scene.js.
הפקודה map ממופה לפונקציות correctAnswer() ו-incorrectAnswer() ב-scene.js. הפונקציות האלה מעדכנות את אפליקציית האינטרנט בהתאם לניחוש של המשתמש, וקוראות ל-setCanvasState() כדי לשלוח נתוני מצב מאפליקציית האינטרנט אל ה-webhook.

7. הוספת פונקציונליות של ניצחון או הפסד

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

פעולת שיחה

הפונקציונליות שמטפלת בניצחון או בהפסד של המשתמש במשחק תוגדר ב-guess Intent, כך שלא תצטרכו לבצע הגדרה נוספת ב-Actions Builder.

Webhook

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

כדי לעדכן את ה-webhook, פועלים לפי השלבים הבאים:

במסוף Actions, לוחצים על Webhook בסרגל הניווט.
מוסיפים את הקוד הבא אל index.js מתחת ל-handler‏ guess:

‫index.js (קטע D):

// Add Section D `if (userHasWon)` content here.
    if (userHasWon) {
      conv.add(`<speak>Let's see if your guess is there...<break
        time='2500ms'/> ${guess} is right. That spells ${correctWord}!  
        ${randomArrayItem(WIN_RESPONSES)}</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'WIN_GAME',
          displayedWord: displayedWord
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

‫index.js (קטע ה'):

// Add Section E `}` here.
}

‫index.js (מקטע ו'):

// Add Section F `Check if the user has exceeded the maximum` content here.
// Check if the user has exceeded the maximum amount of max guesses allowed.
    const userHasLost = conv.context.canvas.state.incorrectGuesses + 1 >= MAX_INCORRECT_GUESSES;
    if (userHasLost) {
      conv.add(`<speak>Let's see if your guess is there...<break
      time='2500ms'/> ${guess} is wrong. Sorry you lost. The word is ${correctWord}!</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'LOSE_GAME',
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

‫index.js (קטע G):

// Add Section G `}` here.
}

לוחצים על שמירת ההזמנה.
לוחצים על Deploy Fulfillment (פריסת מילוי בקשות). בסיום הפריסה, תוצג ההודעה Your Cloud Function deployment is up to date (הפריסה של Cloud Function עדכנית).

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

אפליקציית אינטרנט

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

פותחים את public/js/action.js בכלי לעריכת טקסט.
מעדכנים את אפליקציית האינטרנט כדי לטפל בפקודות WIN_GAME ו-LOSE_GAME:

‫action.js (מקטע H):

// Add Section H `WIN_GAME: (params) => {` content here.
      WIN_GAME: (params) => {
        this.gameScene.winGame(params);
      },
      LOSE_GAME: (params) => {
        this.gameScene.loseGame();
      },

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

firebase deploy --project {PROJECT_ID} --only hosting

בדיקת הפעולה באמולטור

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

כדי לבדוק את הפעולה, מבצעים את השלבים הבאים:

בסרגל הניווט של מסוף הפעולות, לוחצים על בדיקה.
מקלידים Talk to Snow Pal sample בשדה קלט ומקישים על Enter.
מקלידים Yes בשדה קלט ומקישים על Enter. אפשר גם ללחוץ על הלחצן התחלת המשחק.
מנחשים אותיות ומילים עד שמנצחים או מפסידים.

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

הסבר על הקוד

הפונקציונליות של ניצחון והפסד פועלת באותו אופן כמו הפונקציונליות של הניחוש – המשתמש מתאים את הכוונה שלו, וה-webhook מעריך את הניחוש של המשתמש.guess אם הניחוש נכון, הקוד בודק אם המשתמש ניצח. אם כן, הפקודה WIN_GAME נשלחת לאפליקציית האינטרנט. אם הניחוש שגוי, הקוד בודק אם המשתמש הפסיד. אם כן, הפקודה LOSE_GAME נשלחת לאפליקציית האינטרנט. הפקודות האלה מפעילות את הפונקציות winGame() ו-loseGame() ב-scene.js, שמעדכנות את אפליקציית האינטרנט כדי להציג את מסך הניצחון או ההפסד, ומעדכנות את מצב המשחק.

8. הוספת אפשרות לשחק שוב

בקטע הזה מוסיפים פונקציונליות שמאפשרת למשתמש להגיד "Play again" או ללחוץ על הלחצן Play Again באפליקציית האינטרנט כדי להתחיל משחק חדש. משנים את כוונת play_again ב-Actions Builder כדי לשלוח תגובת canvas שמעדכנת את אפליקציית האינטרנט בהתאם, ומוסיפים לוגיקה שמפעילה את כוונת play_again כשהמשתמש לוחץ על הלחצן Play Again.

פעולת שיחה

כשבדקתם את הפעולה בקטע הקודם, אם ניסיתם לשחק שוב במשחק, קיבלתם את ההנחיה הבאה: "זה יהיה נהדר, אבל אנחנו נבנה את הפונקציונליות הזו בקטע מאוחר יותר. לעת עתה, פשוט תאפס את הפעולה". עכשיו אפשר למחוק את ההנחיה הזו ולהחליף אותה בהנחיה שמשיבה למשתמש כשהוא מבקש משחק אחר ("בסדר, הנה משחק אחר!") וכוללת תגובת canvas להפעלת אפליקציית האינטרנט כדי להתחיל משחק חדש.

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

במסוף Actions, לוחצים על התפריט הנפתח Scene (סצנה).
לוחצים על סצנת המשחק.
בקטע User intent handling (טיפול בכוונה של המשתמש), לוחצים על When play_again is matched (כשהכוונה play_again מזוהה).
מחליפים את ההנחיה בהנחיה הבאה:

candidates:
  - first_simple:
      variants:
        - speech: 'Okay, here''s another game!' 
    canvas:
      sendStateDataToCanvasApp: true

לוחצים על שמירה.

Webhook

ב-Codelab הזה, ה-webhook מנהל את לוגיקת המשחק. מכיוון שהפונקציונליות של הפעלה חוזרת לא דורשת אימות לוגי, לא צריך להפעיל את ה-webhook. במקום זאת, אפשר לשלוח תגובה canvas ישירות מ-Actions Builder כדי להעביר את הנתונים הנדרשים לאפליקציית האינטרנט (הגדרתם את זה בקטע הקודם).

אפליקציית אינטרנט

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

פותחים את public/js/action.js בכלי לעריכת טקסט.
מעדכנים את אפליקציית האינטרנט כדי לטפל בפקודה PLAY_AGAIN:

‫action.js (קטע 1):

// Add Section I `PLAY_AGAIN: (params) => {` content here.
      PLAY_AGAIN: (params) => {
        this.gameScene.start();
      },

פותחים את public/js/scene.js בכלי לעריכת טקסט.
מעדכנים את אפליקציית האינטרנט כדי להתחיל סשן משחק חדש כשהמשתמש לוחץ על הלחצן Play Again (משחק חוזר):

‫scene.js (קטע J):

// Add Section J `sendTextQuery` content here.
     window.interactiveCanvas.sendTextQuery('Play again');

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

firebase deploy --project {PROJECT_ID} --only hosting

בדיקת הפעולה באמולטור

הפעולה שלכם יכולה עכשיו להתחיל סשן משחק חדש כשהמשתמש אומר "Play again" או לוחץ על הלחצן Play Again.

כדי לבדוק את הפעולה, מבצעים את השלבים הבאים:

בסרגל הניווט, לוחצים על בדיקה.
מקלידים Talk to Snow Pal sample בשדה קלט ומקישים על Enter.
מקלידים Yes בשדה קלט ומקישים על Enter. אפשר גם ללחוץ על הלחצן התחלת המשחק.
מנחשים אותיות ומילים עד שמנצחים או מפסידים.
מקלידים Play again בשדה קלט ומקישים על Enter. אפשר גם ללחוץ על הלחצן הפעלה חוזרת.

הסבר על הקוד

במהלך הבדיקה של הפעולה, יכולתם להתחיל משחק חדש באמצעות קלט קולי ("Play again") או קלט מגע (לחיצה על הלחצן Play again).

באפשרות של קלט קולי, כשהמשתמש אומר "Play again" או וריאציה אחרת של זה, מתבצעת התאמה לכוונת play_again ומוסיפים תגובה ("Okay, here's another game!") לתור התגובות. התגובה canvas שכלולה בהנחיה שולחת את שם הכוונה ומטא-נתונים אחרים לאפליקציית האינטרנט. שם הכוונה מועבר לקריאה החוזרת onUpdate(), שממפה את הפקודה המתאימה, PLAY_AGAIN, למיפוי הפקודות ב-action.js. הפקודה PLAY_AGAIN מפעילה את הפונקציה start() ב-scene.js ומעדכנת את אפליקציית האינטרנט בסשן משחק חדש.

כדי להפעיל את הלחצן באפשרות של קלט מגע, משתמשים ב-sendTextQuery(), שהוא API של Interactive Canvas שמאפשר להפעיל כוונה באמצעות קלט מגע.

ב-codelab הזה, משתמשים ב-sendTextQuery() כדי להפעיל את intent‏ play_again כשמשתמש לוחץ על הלחצן Play again (הפעלה חוזרת). הארגומנט Play again תואם לביטוי אימון בכוונת play_again ומפעיל את הכוונה הזו באותו אופן שבו משתמש שאומר "Play again" מפעיל אותה. play_againהכוונה הזו מפעילה לוגיקה שמעדכנת את אפליקציית האינטרנט ומתחילה סשן משחק חדש.

9. עדכון הכוונה המובנית PLAY_GAME

בקטע הזה מעדכנים את PLAY_GAME הכוונה המובנית.

הכוונה המובנית PLAY_GAME מאפשרת למשתמשים להפעיל את הפעולה שלכם כשהם שולחים בקשה כללית, כמו "אני רוצה לשחק במשחק".

קוד המקור מכיל את הכוונה המובנית PLAY_GAME, שנמצאת במיקום /sdk/custom/global/actions.intent.PLAY_GAME.yaml. הדבר משתקף במסוף בקטע Invocation כ-PLAY_GAME, כפי שמוצג בצילום המסך הבא:

כדי לאפשר למשתמשים להפעיל את הפעולה באמצעות הכוונה המובנית הזו, צריך להוסיף תגובה canvas עם כתובת ה-URL של אפליקציית האינטרנט לכוונה המובנית PLAY_GAME. לשם כך, בצע את הצעדים הבאים:

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

candidates:
  - canvas:
      url: 'https://<PROJECT_ID>.web.app'

לוחצים על שמירה.

בדיקת הפעולה באמולטור

הפעולה שלכם תומכת עכשיו ב-PLAY_GAME כוונה מובנית.

כדי לבדוק את הפעולה, מבצעים את השלבים הבאים:

בסרגל הניווט, לוחצים על בדיקה.
לוחצים על בדיקת טיפול בכוונה מובנית.
לוחצים על Invoke Action (הפעלת פעולה).

הפעולה שלכם אמורה להיות מופעלת בסימולטור.

10. נספח: פתרון בעיות בפעולת אזור העריכה האינטראקטיבי

בקטע הזה מוסבר איך לנפות באגים בפעולת Interactive Canvas אם היא לא פועלת כמו שצריך. פרויקט Snow Pal מגיע עם שכבת-על לניפוי באגים שאפשר להפעיל. שכבת העל מציגה את כל הפלט של console.log() ושל console.error() בפינה השמאלית התחתונה של המסך, כמו שרואים בצילום המסך הבא:

כדי להפעיל את שכבת העל הזו, פותחים את הקובץ /public/css/main.css ומוסיפים הערה לשורה display: none !important;, כמו שמוצג בקטע הקוד הבא:

main.css

.debug {
 display: flex;
 flex-direction: column;

/* Comment below to view debug overlay */
/* display: none !important; */

 width: 500px;
 height: 150px;
 right: 0;
 bottom: 0;
 position: absolute;
}

פינוי מקום בפרויקט [מומלץ]

כדי להימנע מחיובים אפשריים, מומלץ להסיר פרויקטים שלא מתכוונים להשתמש בהם. כדי למחוק את הפרויקטים שיצרתם ב-codelab הזה, פועלים לפי השלבים הבאים:

כדי למחוק את הפרויקט ב-Google Cloud ואת המשאבים, מבצעים את השלבים שמפורטים בקטע סגירה (מחיקה) של פרויקטים.

אופציונלי: כדי להסיר את הפרויקט מיד מ-Actions Console, מבצעים את השלבים שמפורטים בקטע מחיקת פרויקט. אם לא תבצעו את השלב הזה, הפרויקט יוסר אוטומטית אחרי כ-30 יום.

‫11. מעולה!

סיימתם את ה-codelab המבואי בנושא Interactive Canvas ועכשיו יש לכם את הכישורים הדרושים ליצירת פעולת Interactive Canvas משלכם.

מה למדתם

איך יוצרים, פורסים ובודקים פעולה של אזור עריכה אינטראקטיבי
איך משתמשים בתשובות של Canvas כדי לעדכן את אפליקציית האינטרנט
איך משתמשים בשיטות שונות כדי לשפר את הפעולה, כמו sendTextQuery() ו-setCanvasState()
איך מנפים באגים בפעולה

מידע נוסף

כדי לקבל מידע נוסף על Interactive Canvas, אפשר לעיין במקורות המידע הבאים:

מסמכי Interactive Canvas: המסמכים הרשמיים של Actions on Google בנושא Interactive Canvas.
דוגמה ל-Interactive Canvas: הקוד של משחק פשוט ב-Interactive Canvas שמאפשר לסובב משולש ולשנות את הצבעים שלו.
פורטל המשחקים: ההנחיות ליצירת משחקים ב-Google Assistant.

סקר משוב

לפני שנסיים, נשמח אם תמלא/י את הסקר הקצר הזה לגבי חוויית התמיכה.