با Actions Builder یک اکشن Canvas Interactive برای Google Assistant بسازید

۱. مرور کلی

«اقدامات در گوگل» یک پلتفرم توسعه‌دهندگان است که به شما امکان می‌دهد نرم‌افزاری برای گسترش عملکرد دستیار گوگل ، دستیار شخصی مجازی گوگل، در بیش از ۱ میلیارد دستگاه، از جمله بلندگوهای هوشمند، تلفن‌ها، اتومبیل‌ها، تلویزیون‌ها، هدفون‌ها و موارد دیگر ایجاد کنید. کاربران برای انجام کارهایی مانند خرید مواد غذایی یا رزرو تاکسی، از دستیار گوگل در مکالمه استفاده می‌کنند. برای مشاهده لیست کاملی از امکانات فعلی، به فهرست «اقدامات» مراجعه کنید. به عنوان یک توسعه‌دهنده، می‌توانید از «اقدامات در گوگل» برای ایجاد و مدیریت آسان تجربیات مکالمه‌ای لذت‌بخش و مفید بین کاربران و سرویس شخص ثالث خود استفاده کنید.

این آزمایشگاه کد، یک ماژول پیشرفته است که برای خوانندگانی در نظر گرفته شده است که از قبل تجربه ساخت اکشن‌ها برای دستیار گوگل را دارند. اگر هیچ تجربه توسعه قبلی با اکشن‌ها در گوگل ندارید، با دنبال کردن آزمایشگاه‌های کد مقدماتی ( سطح ۱ و سطح ۲ ) با این پلتفرم آشنا شوید. این ماژول‌ها شما را در مجموعه‌ای از ویژگی‌ها راهنمایی می‌کنند که می‌تواند به شما در گسترش عملکرد اکشن و افزایش مخاطبانتان کمک کند.

در این آزمایشگاه کد، شما از Interactive Canvas ، چارچوبی که بر اساس دستیار گوگل ساخته شده است، برای اضافه کردن یک بازی تمام صفحه به یک اقدام مکالمه‌ای استفاده می‌کنید. این بازی یک برنامه وب تعاملی است که دستیار گوگل به عنوان پاسخی برای کاربر در مکالمه ارسال می‌کند. سپس کاربر می‌تواند بازی را از طریق ورودی صوتی یا متنی در نمایشگرهای هوشمند و دستگاه‌های تلفن همراه اندروید انجام دهد.

به جای اینکه خودتان کل بازی را بسازید، یک بازی نیمه‌ساخته به نام Snow Pal را پیاده‌سازی می‌کنید و منطق بازی را با پیشرفت در آزمایشگاه کد اضافه می‌کنید. Snow Pal نوعی بازی سنتی Hangman است؛ این بازی تعدادی فضای خالی را به شما نشان می‌دهد که نشان‌دهنده یک کلمه هستند و شما حروفی را که فکر می‌کنید ممکن است در کلمه باشند حدس می‌زنید. با هر حدس نادرست، Snow Pal شما کمی بیشتر ذوب می‌شود. اگر بتوانید قبل از اینکه Snow Pal شما کاملاً ذوب شود، کلمه را پیدا کنید، بازی را می‌برید.

af9931bb4d507e39.png

شکل ۱. یک بازی نیمه تمام Snow Pal

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک اکشن می‌سازید که از Interactive Canvas استفاده می‌کند. اکشن شما ویژگی‌های زیر را خواهد داشت:

  • یک بازی کلمات تمام صفحه که کاربران می‌توانند از طریق صدا آن را انجام دهند
  • دکمه‌ای که کاربران می‌توانند برای شروع بازی فشار دهند
  • دکمه‌ای که کاربران می‌توانند برای انجام دوباره بازی فشار دهند

وقتی این آزمایشگاه کد را تمام کردید، اکشن تکمیل‌شده‌ی شما جریان مکالمه‌ی زیر را خواهد داشت:

دستیار: Welcome to Snow Pal! Would you like to start playing the game?

کاربر: Yes.

دستیار: Try guessing a letter in the word or guessing the word.

کاربر: I guess the letter E باشد .

دستیار: Let's see if your guess is there...E is right. Right on! Good guess.

کاربر به حدس زدن حروف یا حدس زدن خود کلمه ناشناخته ادامه می‌دهد تا بازی تمام شود.

آنچه یاد خواهید گرفت

  • نحوه ساخت و استقرار یک اکشن بوم تعاملی
  • نحوه به‌روزرسانی بازی کلمات بر اساس ورودی صوتی و لمسی کاربر
  • نحوه ارسال داده‌ها به برنامه وب با استفاده از روش‌های مختلف
  • چگونه اکشن Interactive Canvas خود را اشکال‌زدایی کنیم؟

آنچه نیاز دارید

پیش‌نیازهای این codelab شامل موارد زیر است:

  • یک مرورگر وب، مانند گوگل کروم
  • یک IDE یا ویرایشگر متن دلخواه شما
  • Node.js ، npm و git روی دستگاه شما نصب شده باشند

آشنایی با جاوا اسکریپت (ES6) برای کمک به درک کد استفاده شده در این آزمایشگاه کد، اکیداً توصیه می‌شود.

اختیاری: دریافت کد نمونه کامل

در این آزمایشگاه کد، شما نمونه را گام به گام از یک نسخه ناقص می‌سازید. در صورت تمایل، می‌توانید نمونه تکمیل‌شده را از مخزن گیت‌هاب نیز دریافت کنید.

۲. معرفی بوم تعاملی

بوم تعاملی (Interactive Canvas) چارچوبی است که بر اساس دستیار گوگل ساخته شده و به شما امکان می‌دهد جلوه‌های بصری و انیمیشن‌های تمام‌صفحه را به کنش‌های مکالمه‌ای خود اضافه کنید.

یک اکشن که از Interactive Canvas استفاده می‌کند، مشابه یک Conversational Action معمولی کار می‌کند. با این حال، یک Interactive Canvas Action قابلیت اضافی ارسال پاسخ به دستگاهی که یک برنامه وب تمام صفحه را باز می‌کند، دارد.

کاربر تا پایان مکالمه، ورودی را از طریق صدا یا لمس به برنامه وب ارائه می‌دهد.

fa63a599f215aa81.gif

شکل ۲. یک اکشن ساخته شده با Interactive Canvas.

در این آزمایشگاه کد، پروژه شما به سه بخش اصلی زیر سازماندهی شده است:

  • برنامه وب: فایل‌های برنامه وب شامل کد مربوط به جلوه‌های بصری و انیمیشن‌های برنامه وب شما و همچنین منطق به‌روزرسانی برنامه وب بر اساس ورودی کاربر هستند.
  • اقدام مکالمه‌ای: اقدام مکالمه‌ای شامل منطق مکالمه شماست که ورودی کاربر را تشخیص، پردازش و به آن پاسخ می‌دهد.
  • وب‌هوک: وب‌هوک منطق بازی را مدیریت می‌کند. برای این آزمایشگاه کد، می‌توانید وب‌هوک را به عنوان سرور بازی خود در نظر بگیرید.

برای هر بخش از این آزمایشگاه کد، شما برنامه وب، اقدام محاوره‌ای و وب‌هوک را تغییر می‌دهید تا به اقدام بوم تعاملی خود قابلیت اضافه کنید.

در سطح بالا، Conversational Action، webhook و برنامه وب در Snow Pal Action به روش زیر عمل می‌کنند:

  1. اقدام مکالمه‌ای از کاربر می‌خواهد که یک حرف یا کل کلمه را حدس بزند.
  2. کاربر به برنامه وب Snow Pal روی یک نمایشگر هوشمند می‌گوید : «فکر کنم حرف i باشه» .
  3. ورودی کاربر به اقدام محاوره‌ای شما هدایت می‌شود که در Actions Builder و/یا پروژه Actions SDK شما تعریف شده است.
  4. اقدام محاوره‌ای، ورودی کاربر را پردازش می‌کند و بسته به نوع ورودی، یا منطقی را در وب‌هوک فعال می‌کند که برنامه وب را به‌روزرسانی می‌کند یا فراداده‌ای را برای به‌روزرسانی مستقیم برنامه وب ارسال می‌کند.
  5. برنامه وب به‌روزرسانی می‌شود تا نشان دهد که حرف در کجای کلمه ظاهر می‌شود و از کاربر خواسته می‌شود دوباره حدس بزند.

در بخش «درک زیرساخت Interactive Canvas» درباره نحوه کار آن بیشتر خواهید آموخت. اکنون که اصول اولیه را می‌دانید، می‌توانید محیط خود را برای این آزمایشگاه کد راه‌اندازی کنید.

۳. راه‌اندازی

تنظیمات مجوز گوگل خود را بررسی کنید

برای آزمایش اکشنی که برای این آزمایشگاه کد می‌سازید، باید مجوزهای لازم را فعال کنید تا شبیه‌ساز کنسول اکشن‌ها بتواند به اکشن شما دسترسی داشته باشد. برای فعال کردن مجوزها، این مراحل را دنبال کنید:

  1. به کنترل‌های فعالیت بروید.
  2. در صورت لزوم، با حساب Google خود وارد شوید.
  3. مجوزهای زیر را فعال کنید:
  • فعالیت وب و اپلیکیشن
  • در بخش فعالیت وب و برنامه ، کادر انتخاب « افزودن سابقه و فعالیت Chrome از سایت‌ها، برنامه‌ها و دستگاه‌هایی که از سرویس‌های Google استفاده می‌کنند» را علامت بزنید.

رابط خط فرمان gactions را نصب کنید

در این آزمایشگاه کد، شما از ابزار رابط خط فرمان (CLI) gactions برای همگام‌سازی پروژه Actions خود بین کنسول Actions و سیستم فایل محلی خود استفاده می‌کنید.

برای نصب رابط خط فرمان gactions، دستورالعمل‌های موجود در بخش ابزار خط فرمان نصب gactions را دنبال کنید.

رابط خط فرمان Firebase را نصب کنید

رابط خط فرمان (CLI) فایربیس به شما امکان می‌دهد پروژه Actions خود را در Cloud Functions مستقر کرده و برنامه وب خود را میزبانی کنید.

این آزمایشگاه کد از npm برای نصب Firebase CLI استفاده می‌کند. حتماً npm را که معمولاً با Node.js همراه است، نصب کنید.

  1. برای نصب یا ارتقاء CLI، یک ترمینال باز کنید و دستور npm زیر را اجرا کنید: 
npm install -g firebase-tools
  1. برای تأیید صحت نصب CLI، دستور زیر را اجرا کنید: 
firebase --version

مطمئن شوید که نسخه Firebase CLI شما ۸ یا بالاتر است تا تمام ویژگی‌های جدید مورد نیاز برای Cloud Functions را داشته باشد. اگر اینطور نیست، npm install -g firebase-tools برای ارتقا اجرا کنید.

  1. برای ورود به فایربیس، دستور زیر را اجرا کنید: 
firebase login

هنگام ورود به فایربیس، مطمئن شوید که از همان حساب گوگلی استفاده می‌کنید که برای ایجاد پروژه اکشن‌های خود استفاده کرده‌اید.

مخزن را کلون کنید

در این بخش، فایل‌های مورد نیاز برای این codelab را کلون می‌کنید. برای دریافت این فایل‌ها، این مراحل را دنبال کنید:

  1. یک ترمینال باز کنید و به دایرکتوری که معمولاً پروژه‌های کدنویسی خود را در آن ذخیره می‌کنید، بروید. اگر چنین دایرکتوری ندارید، به دایرکتوری خانگی خود بروید.
  2. برای کلون کردن این مخزن، دستور زیر را در ترمینال خود اجرا کنید: 
git clone https://github.com/actions-on-google/actions-builder-canvas-codelab-nodejs

پوشه‌ی start/ را باز کنید. این مخزن شامل پوشه‌های مهم زیر است که با آنها کار خواهید کرد:

  • public/ : این دایرکتوری شامل کدهای HTML، CSS و جاوا اسکریپت برای برنامه وب شما است.
  • sdk/custom/ : این دایرکتوری شامل منطق مربوط به اکشن محاوره‌ای شما (صحنه‌ها، اهداف و انواع) است.
  • sdk/webhooks/ : این دایرکتوری، وب‌هوک شما است و منطق بازی در آن قرار دارد.

4864e8047bb2c8f6.png

شکل ۳. ساختار کد دایرکتوری start .

۴. پروژه اقدامات خود را تنظیم کنید

در این بخش، پروژه Actions خود را ایجاد و پیکربندی می‌کنید، کد را از مخزن کلون شده با استفاده از رابط خط فرمان gactions به کنسول Actions منتقل می‌کنید و برنامه وب و وب‌هوک خود را مستقر می‌کنید.

ایجاد یک پروژه اکشن

پروژه Actions شما یک ظرف برای Action شماست. برای ایجاد پروژه Actions خود برای این codelab، این مراحل را دنبال کنید:

  1. کنسول Actions را باز کنید.
  2. روی پروژه جدید کلیک کنید.
  3. نام پروژه ، مانند canvas-codelab را تایپ کنید. این نام برای ارجاع داخلی شماست. بعداً می‌توانید یک نام خارجی برای پروژه خود تعیین کنید.

7ea69f1990c14ed1.png

  1. روی ایجاد پروژه کلیک کنید.
  2. در صفحه «چه نوع عملیاتی می‌خواهید بسازید؟» ، کارت بازی را انتخاب کنید.
  3. روی بعدی کلیک کنید.
  4. کارت پروژه خالی را انتخاب کنید.
  5. روی شروع ساخت کلیک کنید.

شناسه پروژه را برای اکشن خود ذخیره کنید

شناسه پروژه یک شناسه منحصر به فرد برای اکشن شماست. در چندین مرحله از این آزمایشگاه کد به شناسه پروژه خود نیاز خواهید داشت.

برای بازیابی شناسه پروژه خود، مراحل زیر را دنبال کنید:

  1. در کنسول Actions، روی سه نقطه عمودی > تنظیمات پروژه کلیک کنید.

6f59050b85943073.png

  1. شناسه پروژه را کپی کنید.

مرتبط کردن یک حساب صورتحساب

برای اینکه بتوانید بعداً در این آزمایشگاه کد با استفاده از توابع ابری، تکمیل سفارش خود را انجام دهید، باید یک حساب صورتحساب را به پروژه خود در Google Cloud مرتبط کنید. اگر از قبل یک حساب صورتحساب دارید، می‌توانید مراحل زیر را نادیده بگیرید.

برای مرتبط کردن یک حساب صورتحساب با پروژه خود، این مراحل را دنبال کنید:

  1. به صفحه پرداخت پلتفرم ابری گوگل بروید.
  2. روی افزودن حساب صورتحساب یا ایجاد حساب کلیک کنید.
  3. اطلاعات پرداخت خود را پر کنید.
  4. روی شروع دوره آزمایشی رایگان من یا ارسال و فعال کردن صورتحساب کلیک کنید.
  5. به صفحه پرداخت گوگل کلود بروید.
  6. روی برگه «پروژه‌های من» کلیک کنید.
  7. روی سه نقطه > تغییر صورتحساب کلیک کنید.
  8. در منوی کشویی، حساب صورتحسابی را که پیکربندی کرده‌اید، انتخاب کنید.
  9. روی تنظیم حساب کلیک کنید.

برای جلوگیری از تحمیل هزینه، مراحل موجود در بخش «پاکسازی پروژه» را دنبال کنید.

استقرار برنامه وب

در این بخش، شما برنامه وب خود (بازی Snow Pal ) را با استفاده از Firebase CLI مستقر می‌کنید. پس از استقرار، می‌توانید URL برنامه وب را بازیابی کنید و ببینید که بازی در مرورگر چگونه به نظر می‌رسد.

برای استقرار برنامه وب خود، این مراحل را دنبال کنید:

  1. در ترمینال، به دایرکتوری start/ بروید.
  2. دستور زیر را اجرا کنید و به جای {PROJECT_ID} ، شناسه پروژه خود را قرار دهید: 
firebase deploy --project {PROJECT_ID} --only hosting

بعد از چند دقیقه، باید عبارت " Deploy complete! " را ببینید که نشان می‌دهد برنامه وب Snow Pal با موفقیت در Firebase مستقر شده است.

برای مشاهده بازی Snow Pal در مرورگر، مراحل زیر را دنبال کنید:

  1. آدرس میزبانی وب ارائه شده در خروجی ترمینال خود را بازیابی کنید. این آدرس باید به شکل زیر باشد: https://<PROJECT_ID>.web.app
  1. آدرس اینترنتی (URL) را در مرورگر خود جایگذاری کنید. باید صفحه شروع بازی Snow Pal را با دکمه شروع بازی مشاهده کنید:

68429faae5141ed0.png

افزودن آدرس اینترنتی برنامه وب و شناسه پروژه به پروژه Actions

در مرحله بعد، آدرس اینترنتی برنامه وب و شناسه پروژه خود را به فایل actions.intent.MAIN.yaml اضافه کنید. اضافه کردن آدرس اینترنتی برنامه وب به Conversational Action اجازه می‌دهد تا بداند داده‌ها را به کدام URL ارسال کند، در حالی که اضافه کردن شناسه پروژه در settings.yaml به شما امکان می‌دهد تا فایل‌های دانلود شده را به پروژه صحیح در کنسول Actions ارسال کنید.

برای اضافه کردن آدرس اینترنتی برنامه وب و شناسه پروژه، این مراحل را دنبال کنید:

  1. فایل start/sdk/custom/global/actions.intent.MAIN.yaml را در ویرایشگر متن خود باز کنید.
  2. در فیلد URL ، رشته‌ی جایگزین را با URL برنامه‌ی وب خود جایگزین کنید.
  3. فایل start/sdk/settings/settings.yaml را در ویرایشگر متن خود باز کنید.
  4. در فیلد projectId ، رشته‌ی جایگزین را با شناسه‌ی پروژه‌ی خود جایگزین کنید.

انتقال پروژه به کنسول اکشن‌ها

برای به‌روزرسانی کنسول Actions با پروژه محلی خود، باید پروژه Actions خود را به کنسول Actions منتقل کنید. برای انجام این کار، این مراحل را دنبال کنید:

  1. به دایرکتوری sdk تغییر دهید: 
cd sdk/
  1. برای کپی کردن پیکربندی سیستم فایل محلی خود در کنسول Actions، دستور زیر را اجرا کنید: 
gactions push

استقرار وب‌هوک

وقتی دستور gactions push را اجرا کردید، کد وب‌هوک اولیه را به کنسول Actions وارد کردید. در ادامه‌ی این آموزش کدنویسی، می‌توانید کد وب‌هوک خود را در کنسول Actions ویرایش کنید. در این مرحله، می‌توانید وب‌هوک را از کنسول Actions مستقر کنید.

برای استقرار وب‌هوک خود، مراحل زیر را دنبال کنید:

  1. در کنسول Actions، روی Develop در نوار ناوبری کلیک کنید.
  2. روی تب Webhook در نوار ناوبری کلیک کنید.
  3. روی «استقرار تکمیل سفارش» کلیک کنید.

ممکن است چند دقیقه طول بکشد تا توابع ابری، تکمیل و پیاده‌سازی شما را انجام دهند. باید پیام « استقرار تابع ابری در حال انجام است... » را ببینید. وقتی کد با موفقیت مستقر شد، پیام « استقرار تابع ابری شما به‌روز است» به‌روزرسانی می‌شود.

تست در شبیه‌ساز

در این مرحله، اکشن شما به برنامه وب متصل شده است. می‌توانید از شبیه‌ساز کنسول اکشن‌ها استفاده کنید تا مطمئن شوید که هنگام فراخوانی اکشن، برنامه وب نمایش داده می‌شود.

برای آزمایش اکشن خود، مراحل زیر را دنبال کنید:

  1. در نوار ناوبری کنسول Actions، روی Test کلیک کنید.
  2. عبارت Talk to Snow Pal sample در فیلد ورودی تایپ کرده و Enter فشار دهید.
  3. در فیلد ورودی، Yes را تایپ کنید و Enter را فشار دهید. یا، روی شروع بازی (Start game) کلیک کنید.

37f7bc4e550d817c.png

شما هنوز منطق حدس زدن یک حرف یا حدس زدن کلمه را پیکربندی نکرده‌اید، بنابراین اگر یک کلمه یا حرف را حدس بزنید، این پاسخ را دریافت می‌کنید: «...نادرست. به تلاش ادامه دهید! به نظر می‌رسد برای اینکه این درست کار کند، باید قابلیت‌های بیشتری اضافه کنیم.»

۵. زیرساخت بوم تعاملی را درک کنید

برای این پروژه، عملکرد به سه جزء اصلی سازماندهی شده است: اقدام محاوره‌ای، برنامه وب و وب‌هوک. توجه داشته باشید که این یک مدل برای نحوه تنظیم اقدام شماست و به این شکل سازماندهی شده است تا عملکرد اصلی بوم تعاملی را برجسته کند.

بخش‌های بعدی به جزئیات بیشتری در مورد نحوه‌ی همکاری Conversational Action، Webhook و Web App و همچنین سایر عناصر مهم Interactive Canvas می‌پردازند.

کنش مکالمه‌ای

کامپوننت Conversational Action در Action شما، ورودی کاربر را شناسایی، پردازش و به صحنه مناسب ارسال می‌کند، جایی که پاسخی برای کاربر ساخته می‌شود. به عنوان مثال، اگر کاربری در بازی Snow Pal بگوید "من حرف e را حدس می‌زنم" ، Conversational Action شما این حرف را به عنوان یک پارامتر intent استخراج کرده و آن را به منطق بازی مناسب ارسال می‌کند، که تعیین می‌کند آیا حدس درست است یا خیر و برنامه وب را بر اساس آن به‌روزرسانی می‌کند. می‌توانید این منطق مکالمه را در Actions Builder، یک IDE مبتنی بر وب در کنسول Actions، مشاهده و تغییر دهید. تصویر زیر بخشی از Conversational Action شما را در Actions Builder نشان می‌دهد:

۹۱d1c5300f015ff9.png

شکل ۴. تجسمی از Main invocation در Actions Builder.

این تصویر، Main invocation برای اکشن شما را نشان می‌دهد که کاربران با گفتن عبارتی مانند "سلام گوگل، با نمونه اسنو پال صحبت کن" (Hey Google, talk to Snow Pal sample) با آن مطابقت دارند. وقتی کاربر اکشن شما را فراخوانی می‌کند، Main invocation یک اعلان با پاسخ canvas ارسال می‌کند که حاوی URL برنامه وب شما است.

اولین پاسخ canvas در Action شما باید شامل URL برنامه وب باشد. این پاسخ به Assistant می‌گوید که برنامه وب را در آن آدرس در دستگاه کاربر رندر کند. پاسخ‌های canvas اضافی در Actions Builder می‌توانند شامل فیلدی به send_state_data_to_canvas_app باشند که روی true تنظیم شده است. این فیلد نام intent و هر مقدار پارامتری را هنگام تطبیق intent به برنامه وب ارسال می‌کند و برنامه وب بر اساس این داده‌ها از ورودی کاربر به‌روزرسانی می‌شود.

وب‌هوک

برای این کدلب، وب‌هوک شما شامل منطق بازی است (می‌توانید وب‌هوک خود را مانند یک سرور بازی در نظر بگیرید). منطق بازی شامل عناصری مانند تعیین درست یا نادرست بودن حدس کاربر، یا برنده یا بازنده بودن کاربر، و ساخت پاسخ بر اساس نتیجه است. می‌توانید وب‌هوک خود را در Actions Builder تغییر دهید.

وقتی اکشن شما نیاز به اجرای منطق بازی دارد، اکشنز بیلدر یک فراخوانی به وب‌هوک انجام می‌دهد. برای مثال، هدف guess intent) در صحنه Game یک فراخوانی وب‌هوک به هندلر guess handler) انجام می‌دهد که سپس منطقی را اجرا می‌کند تا مشخص شود حدس کاربر درست است یا خیر. وب‌هوک می‌تواند شامل پاسخ‌های Canvas در هندلرهایی باشد که به فایل‌های برنامه وب نگاشت می‌شوند و وب را به طور مناسب به‌روزرسانی می‌کنند.

برنامه وب

ca564ef59e1003d4.png

شکل ۵. نمایش بصری از تعامل بین اقدام محاوره‌ای، وب‌هوک و برنامه وب در یک اقدام بوم تعاملی.

فایل‌های برنامه وب شامل کد مربوط به جلوه‌های بصری و انیمیشن‌های برنامه وب شما و همچنین منطق به‌روزرسانی برنامه وب بر اساس ورودی کاربر هستند. شما فایل‌های برنامه وب خود را در ویرایشگر متن خود تغییر می‌دهید و این تغییرات را با استفاده از Firebase CLI اعمال می‌کنید.

ارتباط بین Conversational Action و برنامه وب

شما باید ارتباط بین اقدام مکالمه‌ای و برنامه وب خود را فعال کنید تا برنامه وب شما بتواند بر اساس ورودی کاربر به‌روزرسانی شود. برای مثال، اگر کاربری بگوید "من حرف f را حدس می‌زنم" ،

اکشن محاوره‌ای باید حرف f را به برنامه وب ارائه دهد تا برنامه وب بتواند بر اساس آن به‌روزرسانی شود. برای ارسال ورودی کاربر از اکشن محاوره‌ای به برنامه وب، باید API بوم تعاملی را بارگذاری کنید.

اسکریپت این API در /public/index.html قرار دارد که فایل HTML اصلی بازی Snow Pal است. این فایل نحوه نمایش و بارگذاری رابط کاربری شما را در چندین اسکریپت تعریف می‌کند:

فهرست.html 

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

برای به‌روزرسانی برنامه وب بر اساس ورودی کاربر، باید فراخوانی‌های برگشتی را نیز در فایل برنامه وب خود ثبت و پیکربندی کنید. فراخوانی‌های برگشتی به برنامه وب شما اجازه می‌دهند تا به اطلاعات یا درخواست‌های اقدام محاوره‌ای پاسخ دهد.

در /public/js/action.js ، یک کلاس از پیش پیکربندی شده به نام Action برای اعلان و ثبت callbackها وجود دارد. کلاس Action یک پوشش (wrapper) در اطراف Interactive Canvas API است. هنگامی که برنامه وب با تابع create() در scene.js ایجاد می‌شود، یک نمونه Action جدید ایجاد می‌شود و setCallbacks() فراخوانی می‌شود، همانطور که در قطعه کد زیر نشان داده شده است:

صحنه.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 تعریف شده است. این تابع فراخوانی‌های برگشتی را تعریف کرده و آنها را پس از ایجاد بازی در API مربوط به Interactive Canvas ثبت می‌کند: 

  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 را ارسال می‌کنید، فراخوانی می‌شود.

بخش بعدی نحوه پیکربندی کد خاص این پروژه را برای انتقال داده‌ها از اقدام محاوره‌ای به برنامه وب شرح می‌دهد.

به‌روزرسانی برنامه وب بر اساس ورودی کاربر

در این آزمایشگاه کد، شما از یک نقشه فرمان برای به‌روزرسانی برنامه وب بر اساس ورودی کاربر استفاده می‌کنید. برای مثال، هنگامی که هدف start_game در صحنه Welcome مطابقت دارد، پاسخ canvas موجود در اعلان به برنامه وب ارسال می‌شود. onUpdate() فراداده را از پاسخ canvas تجزیه می‌کند و دستور START_GAME را فراخوانی می‌کند، که به نوبه خود، تابع start() را در scene.js فراخوانی می‌کند و برنامه وب را برای شروع یک جلسه بازی جدید به‌روزرسانی می‌کند.

تابع start() در scene.js همچنین تابعی به نام updateCanvasState() را فراخوانی می‌کند که از متدی به نام setCanvasState() برای افزودن داده‌های وضعیتی که وب‌هوک شما می‌تواند به آنها دسترسی داشته باشد، استفاده می‌کند.

متد updateCanvasState() در انتهای هر دستور فراخوانی می‌شود (این دستورات را در سراسر کد اضافه خواهید کرد) و وضعیت برنامه وب را به‌روزرسانی می‌کند. هر بار که updateCanvasState() فراخوانی می‌شود، مقادیر displayedWord و incorrectGuesses بر اساس وضعیت فعلی به‌روزرسانی می‌شوند:

صحنه.js 

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

سپس وضعیت به‌روزرسانی‌شده برای نوبت مکالمه بعدی در دسترس است. می‌توانید از طریق conv.context.canvas.state در webhook به این وضعیت دسترسی داشته باشید، همانطور که در قطعه کد زیر نشان داده شده است:

ایندکس.js 

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

۶. قابلیت حدس زدن را اضافه کنید

در این بخش، قابلیت guess را به اکشن خود اضافه می‌کنید که به کاربر امکان می‌دهد حروف درون کلمه یا خود کلمه را حدس بزند.

کنش مکالمه‌ای

در بخش تست در شبیه‌ساز ، پاسخی دریافت کردید که شامل این بود: «به نظر می‌رسد برای اینکه این به درستی کار کند، باید قابلیت‌های بیشتری اضافه کنیم.» اکنون می‌توانید آن اعلان را در کنسول Actions حذف کنید تا فقط webhook را فراخوانی کنید (در صحنه Game ، هدف guess از قبل طوری پیکربندی شده است که وقتی webhook مطابقت پیدا کرد، فراخوانی شود).

برای حذف اعلان ایستا هنگامی که guess با هدف مطابقت دارد، این مراحل را دنبال کنید:

  1. در کنسول Actions، روی Scenes در نوار ناوبری کلیک کنید.
  2. برای رفتن به صحنه Game ، روی «بازی » کلیک کنید.
  3. برای حذف اعلان، روی «وقتی حدس مطابقت دارد» در بخش «مدیریت قصد کاربر» کلیک کنید. «ارسال اعلان‌ها» را پاک کنید.
  4. روی ذخیره کلیک کنید.

وب‌هوک

در این بخش، شما وب‌هوک خود را با منطقی به‌روزرسانی می‌کنید که حدس درست یا نادرست کاربر را به منطق موجود در یک فایل برنامه وب نگاشت می‌کند، که سپس برنامه وب را بر اساس آن به‌روزرسانی می‌کند. کنترل‌کننده اینتنت guess از قبل برای شما در وب‌هوک پیکربندی شده است، بنابراین فقط باید پاسخ‌های Canvas را به این اینتنت اضافه کنید تا منطقی را فعال کند که برنامه وب را به‌روزرسانی می‌کند.

برای به‌روزرسانی وب‌هوک خود، مراحل زیر را دنبال کنید:

  1. در کنسول Actions، روی Webhook در نوار ناوبری کلیک کنید.
  2. کد زیر را به index.js در زیر تابع 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',
  },
}));
  1. روی ذخیره تکمیل سفارش کلیک کنید.
  2. روی «اجرای استقرار» کلیک کنید. پس از اتمام استقرار، پیامی با عنوان «استقرار عملکرد ابری شما به‌روز است» نمایش داده می‌شود.

برنامه وب

اکنون می‌توانید برنامه وب خود را برای مدیریت دستورات CORRECT_ANSWER و INCORRECT_ANSWER پیکربندی کنید.

  1. public/js/action.js را در ویرایشگر متن خود باز کنید.
  2. برنامه وب را برای مدیریت دستورات CORRECT_ANSWER و INCORRECT_ANSWER به‌روزرسانی کنید:

action.js (بخش ج): 

// Add Section C `CORRECT_ANSWER: (params) => {` content here.
      CORRECT_ANSWER: (params) => {
        this.gameScene.correctAnswer(params);
      },
      INCORRECT_ANSWER: (params) => {
        this.gameScene.incorrectAnswer();
      },
  1. برای به‌روزرسانی برنامه وب، دستور زیر را اجرا کنید: 
firebase deploy --project {PROJECT_ID} --only hosting

اکشن خود را در شبیه‌ساز آزمایش کنید

در این مرحله، اکشن شما می‌تواند تشخیص دهد که آیا حدس درست است یا نادرست و برنامه وب را بر این اساس به‌روزرسانی کند.

برای آزمایش اکشن خود، مراحل زیر را دنبال کنید:

  1. در نوار پیمایش، روی «آزمون» کلیک کنید.
  2. عبارت Talk to Snow Pal sample در فیلد ورودی تایپ کرده و Enter فشار دهید.
  3. در فیلد ورودی، Yes را تایپ کنید و Enter را فشار دهید. یا می‌توانید روی دکمه بله (Yes) کلیک کنید.
  4. حرفی را که می‌خواهید حدس بزنید در فیلد ورودی تایپ کنید و Enter فشار دهید.

۱c2c2d59a418642b.png

کد را بفهمید

در بخش قبلی، کدی اضافه کردید که به کاربران اجازه می‌دهد حروف بازی شما را حدس بزنند و آن حدس‌ها را در کلمه یا Snow Pal منعکس شده ببینند. در سطح بالا، وقتی guess با هدف مطابقت دارد، یک فراخوانی وب‌هوک در Actions Builder انجام می‌دهید که داده‌ها را به برنامه وب شما منتقل می‌کند تا آن را متناسب با آن به‌روزرسانی کند. به عنوان مثال، اگر کاربر حرفی را در بازی Snow Pal حدس بزند که در کلمه وجود دارد، برنامه وب به‌روزرسانی می‌شود تا حرف را در موقعیت صحیح در کلمه نشان دهد.

برای اکشن‌هایی که از Interactive Canvas استفاده می‌کنند، روند کلی انتقال داده‌ها از وب‌هوک به برنامه وب به شرح زیر است:

  1. ورودی کاربر با هدفی که شامل پاسخ Canvas است، مطابقت دارد.
  2. اقدام محاوره‌ای یا وب‌هوک، پاسخ Canvas را ارسال می‌کند که فراخوانی onUpdate() را فعال می‌کند.
  3. تابع فراخوانی onUpdate() به منطق سفارشی نگاشت می‌شود که برنامه وب را بر اساس آن به‌روزرسانی می‌کند.

برای این پروژه خاص، کد به روش زیر عمل می‌کند:

  1. وقتی کاربر با guess مورد نظر مطابقت داشته باشد، Actions Builder حرف را به عنوان پارامتر از ورودی کاربر استخراج می‌کند.
  2. اکشن بیلدر، هندلر guess در وب‌هوک شما فراخوانی می‌کند که شامل منطقی است تا مشخص کند آیا حرفی که کاربر حدس زده در کلمه وجود دارد یا خیر.
  3. کنترل‌کننده‌ی guess شامل دو پاسخ Canvas است - یکی که وقتی حرف صحیح است اجرا می‌شود و دیگری که وقتی حرف نادرست است اجرا می‌شود. هر پاسخ Canvas داده‌های مناسب (دستور CORRECT_ANSWER یا INCORRECT_ANSWER ) را به برنامه‌ی وب ارسال می‌کند.
  4. داده‌های موجود در فیلد data پاسخ Canvas به متد onUpdate() در action.js ارسال می‌شوند. onUpdate() دستور مناسب را در نقشه‌ی دستورات در scene.js فراخوانی می‌کند.
  5. دستور map به توابع correctAnswer() و incorrectAnswer() در scene.js می‌شود. این توابع، برنامه وب را به طور مناسب به‌روزرسانی می‌کنند تا حدس کاربر را منعکس کنند و setCanvasState() را فراخوانی می‌کنند تا داده‌های وضعیت را از برنامه وب شما به وب‌هوک شما ارسال کنند.

۷. قابلیت برد/باخت را اضافه کنید

در این بخش، قابلیت برد و باخت را به اکشن خود اضافه می‌کنید، که شامل منطقی است که تعیین می‌کند کاربر برنده شده است یا بازنده و منطقی برای به‌روزرسانی تصویر برنامه وب بر اساس نتیجه کاربر.

کنش مکالمه‌ای

عملکردی که برد یا باخت کاربر در بازی را مدیریت می‌کند، درون guess intent پیکربندی خواهد شد، بنابراین لازم نیست هیچ پیکربندی اضافی در Actions Builder انجام دهید.

وب‌هوک

در این بخش، وب‌هوک خود را با منطقی به‌روزرسانی می‌کنید که زمان برد یا باخت کاربر در بازی را مدیریت می‌کند و به منطق برنامه وب نگاشت می‌شود که بازی را با صفحه برد یا باخت مناسب به‌روزرسانی می‌کند.

برای به‌روزرسانی وب‌هوک خود، مراحل زیر را دنبال کنید:

  1. در کنسول Actions، روی Webhook در نوار ناوبری کلیک کنید.
  2. کد زیر را به index.js در زیر تابع guess اضافه کنید:

index.js (بخش د): 

// 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 (بخش E):

// Add Section E `}` here.
}

index.js (بخش F): 

// 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.
}
  1. روی ذخیره تکمیل سفارش کلیک کنید.
  2. روی «اجرای استقرار» کلیک کنید. پس از اتمام استقرار، پیامی با عنوان «استقرار عملکرد ابری شما به‌روز است» نمایش داده می‌شود.

در اینجا، شما دو پاسخ Canvas با دستورات WIN_GAME و LOSE_GAME اضافه کردید تا زمانی که کاربران بازی را می‌برند یا می‌بازند، مدیریت شوند. در بخش بعدی، قابلیتی اضافه می‌کنید که برنامه وب را بر اساس برد یا باخت کاربر به‌روزرسانی می‌کند.

برنامه وب

اکنون می‌توانید برنامه وب خود را طوری پیکربندی کنید که بر اساس برد یا باخت کاربر، به‌روزرسانی شود. برای به‌روزرسانی برنامه وب خود، این مراحل را دنبال کنید:

  1. public/js/action.js را در ویرایشگر متن خود باز کنید.
  2. برنامه وب خود را برای مدیریت دستورات 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();
      },
  1. برای به‌روزرسانی برنامه وب، دستور زیر را اجرا کنید: 
firebase deploy --project {PROJECT_ID} --only hosting

اکشن خود را در شبیه‌ساز آزمایش کنید

در این مرحله، اکشن شما می‌تواند زمان برد یا باخت کاربر در بازی را مدیریت کند و صفحه مناسب برای هر نتیجه را نمایش دهد.

برای آزمایش اکشن خود، مراحل زیر را دنبال کنید:

  1. در نوار ناوبری کنسول Actions، روی Test کلیک کنید.
  2. عبارت Talk to Snow Pal sample در فیلد ورودی تایپ کرده و Enter فشار دهید.
  3. در فیلد ورودی، Yes را تایپ کنید و Enter را فشار دهید. یا، روی دکمه شروع بازی کلیک کنید.
  4. حروف و کلمات را حدس بزنید تا زمانی که یا برنده شوید یا ببازید.

ee572870f9a7df36.png

اگر دوباره درخواست بازی کنید، پیامی دریافت خواهید کرد که نشان می‌دهد هنوز قابلیت لازم برای بازی دوباره اضافه نشده است. این قابلیت را در بخش بعدی اضافه خواهید کرد.

کد را بفهمید

عملکرد برد و باخت همانند عملکرد حدس زدن عمل می‌کند - کاربر با هدف guess مطابقت دارد و وب‌هوک شما حدس کاربر را ارزیابی می‌کند. اگر حدس آنها درست باشد، کد بررسی می‌کند که آیا کاربر برنده شده است یا خیر؛ اگر برنده شده باشد، دستور WIN_GAME به برنامه وب ارسال می‌شود. اگر حدس آنها اشتباه باشد، کد بررسی می‌کند که آیا باخته است یا خیر؛ اگر باخته باشد، دستور LOSE_GAME به برنامه وب ارسال می‌شود. این دستورات توابع winGame() و loseGame() را در scene.js فعال می‌کنند که برنامه وب را برای نمایش صفحه برد یا باخت و به‌روزرسانی وضعیت بازی به‌روزرسانی می‌کنند.

۸. قابلیت پخش مجدد را اضافه کنید

در این بخش، شما قابلیتی اضافه می‌کنید که به کاربر اجازه می‌دهد یا بگوید "دوباره بازی کن" یا روی دکمه‌ی " دوباره بازی کن " در برنامه‌ی وب کلیک کند تا یک بازی جدید شروع شود. شما قصد play_again در Actions Builder تغییر می‌دهید تا یک پاسخ canvas ارسال کند که برنامه‌ی وب را به طور مناسب به‌روزرسانی کند، و منطقی اضافه می‌کنید که قصد play_again را هنگامی که کاربر روی دکمه‌ی "دوباره بازی کن" کلیک می‌کند، فعال کند.

کنش مکالمه‌ای

وقتی اکشن خود را در بخش قبلی آزمایش کردید، اگر دوباره سعی می‌کردید بازی را انجام دهید، با پیام زیر مواجه می‌شدید: «عالی می‌شد، اما ما این قابلیت را در بخش بعدی ایجاد خواهیم کرد. فعلاً، اکشن را مجدداً تنظیم کنید.» اکنون می‌توانید این پیام را حذف کرده و آن را با پیامی جایگزین کنید که به کاربر هنگام درخواست بازی دیگر پاسخ می‌دهد ( «خب، این هم یک بازی دیگر!» ) و شامل یک پاسخ canvas برای راه‌اندازی برنامه وب جهت شروع یک بازی جدید است.

برای به‌روزرسانی اعلان زمانی که کاربر می‌خواهد دوباره بازی کند، این مراحل را دنبال کنید:

  1. در کنسول Actions، روی منوی کشویی Scene کلیک کنید.
  2. روی صحنه بازی کلیک کنید.
  3. در قسمت مدیریت قصد کاربر، روی «وقتی play_again مطابقت دارد» کلیک کنید.
  4. عبارت زیر را جایگزین عبارت prompt کنید: 
candidates:
  - first_simple:
      variants:
        - speech: 'Okay, here''s another game!' 
    canvas:
      sendStateDataToCanvasApp: true
  1. روی ذخیره کلیک کنید.

وب‌هوک

در این آزمایشگاه کد، وب‌هوک منطق بازی را مدیریت می‌کند. از آنجا که قابلیت بازی دوباره نیازی به هیچ نوع اعتبارسنجی منطقی ندارد، نیازی به فراخوانی وب‌هوک ندارید؛ در عوض، می‌توانید یک پاسخ canvas را مستقیماً از Actions Builder ارسال کنید تا داده‌های لازم را به برنامه وب منتقل کنید (این مورد را در بخش قبلی پیکربندی کرده‌اید).

برنامه وب

اکنون می‌توانید فایل‌های برنامه وب خود را طوری تغییر دهید که وقتی کاربر دوباره درخواست پخش می‌دهد، به‌طور مناسب به‌روزرسانی شوند. برای افزودن این قابلیت، این مراحل را دنبال کنید:

  1. public/js/action.js را در ویرایشگر متن خود باز کنید.
  2. برنامه وب را برای مدیریت دستور PLAY_AGAIN به‌روزرسانی کنید:

action.js (بخش اول): 

// Add Section I `PLAY_AGAIN: (params) => {` content here.
      PLAY_AGAIN: (params) => {
        this.gameScene.start();
      },
  1. public/js/scene.js را در ویرایشگر متن خود باز کنید.
  2. برنامه وب را به‌روزرسانی کنید تا وقتی کاربر روی دکمه « بازی دوباره » کلیک می‌کند، یک جلسه بازی جدید شروع شود:

scene.js (بخش J): 

// Add Section J `sendTextQuery` content here.
     window.interactiveCanvas.sendTextQuery('Play again');
  1. برای به‌روزرسانی برنامه وب، دستور زیر را اجرا کنید: 
firebase deploy --project {PROJECT_ID} --only hosting

اکشن خود را در شبیه‌ساز آزمایش کنید

اکنون اکشن شما می‌تواند یک جلسه بازی جدید را زمانی که کاربر می‌گوید «دوباره بازی کن» یا روی دکمه «دوباره بازی کن » کلیک می‌کند، شروع کند.

برای آزمایش اکشن خود، مراحل زیر را دنبال کنید:

  1. در نوار پیمایش، روی «آزمون» کلیک کنید.
  2. عبارت Talk to Snow Pal sample در فیلد ورودی تایپ کرده و Enter فشار دهید.
  3. در فیلد ورودی، Yes را تایپ کنید و Enter را فشار دهید. یا، روی دکمه شروع بازی کلیک کنید.
  4. حروف و کلمات را حدس بزنید تا زمانی که یا برنده شوید یا ببازید.
  5. Play again در فیلد ورودی عبارت «پخش» را تایپ کنید و Enter را فشار دهید. یا می‌توانید روی دکمه «پخش دوباره» کلیک کنید.

1fbc7193f7a9d0f5.png

کد را بفهمید

When you tested your Action, you could start a new game through either voice input ( "Play again" ) or touch input (click the Play again button).

For the voice input option, when the user says "Play again" or some variation of that, the play_again intent is matched and adds a prompt ( "Okay, here's another game!" ) to the prompt queue. The canvas response included in the prompt sends the intent name and other metadata to the web app. The intent name is passed to the onUpdate() callback, which maps the corresponding command, PLAY_AGAIN , to the command map in action.js . The PLAY_AGAIN command triggers the start() function in scene.js and updates the web app with a new game session.

For the touch input option, you use sendTextQuery() , an Interactive Canvas API that allows you to trigger an intent through touch input, to make the button work.

In this codelab, you use sendTextQuery() to invoke the play_again intent when a user clicks the Play again button. The Play again argument matches a training phrase in the play_again intent and triggers this intent in the same way a user saying "Play again" does. The play_again intent then triggers logic that updates the web app and begins a new game session.

9. Update PLAY_GAME built-in intent

In this section, you update the PLAY_GAME built-in intent .

The PLAY_GAME built-in intent allows users to invoke your Action when they make a general request, such as "I want to play a game."

The source code contains the PLAY_GAME built-in intent, which is located at /sdk/custom/global/actions.intent.PLAY_GAME.yaml . This is reflected in the console in the Invocation section as PLAY_GAME , as shown in the following screenshot:

c4f11e2d1c255219.png

To enable users to invoke your Action through this built-in intent, you need to add a canvas response with the web app URL to the PLAY_GAME built-in intent. To do so, follow these steps:

  1. In the Actions console, click PLAY_GAME in the navigation bar.
  2. Update the prompt to include your web app URL, as shown in the following snippet: 
candidates:
  - canvas:
      url: 'https://<PROJECT_ID>.web.app'
  1. روی ذخیره کلیک کنید.

اکشن خود را در شبیه‌ساز آزمایش کنید

Your Action now supports the PLAY_GAME built-in intent.

To test your Action, follow these steps:

  1. In the navigation bar, click Test .
  2. Click Test built-in intent handling .
  3. Click Invoke Action .

1a4f647e17ebab53.png

Your Action should be invoked in the simulator.

10. Appendix: Troubleshooting the Interactive Canvas Action

In this section, you learn how to debug your Interactive Canvas Action when it's not working properly. The Snow Pal project comes pre-packaged with a debugging overlay that you can enable. The overlay displays all console.log() and console.error() output to the bottom right of the display, as shown in the following screenshot:

4c8531d24366b5df.png

To enable this overlay, open the /public/css/main.css file and comment the line display: none !important; , as shown in the following snippet:

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;
}

پروژه خود را پاکسازی کنید [توصیه می‌شود]

To avoid incurring possible charges, it is recommended to remove projects that you don't intend to use. To delete the projects you created in this codelab, follow these steps:

  1. To delete the Google Cloud Project and resources, complete the steps listed in the Shutting down (deleting) projects section.
  1. اختیاری: برای حذف فوری پروژه خود از کنسول اقدامات، مراحل ذکر شده در بخش حذف یک پروژه را انجام دهید. اگر این مرحله را انجام ندهید، پروژه شما تقریباً پس از 30 روز به طور خودکار حذف خواهد شد.

۱۱. تبریک می‌گویم!

You've completed the introductory Interactive Canvas codelab and now have the skills necessary to build your own Interactive Canvas Action.

آنچه آموخته‌اید

  • How to build, deploy, and test an Interactive Canvas Action
  • How to use Canvas responses to update the web app
  • How to use different methods to enhance your Action, like sendTextQuery() and setCanvasState()
  • How to debug your Action

بیشتر بدانید

Check out the following resources to learn more about Interactive Canvas:

نظرسنجی بازخورد

قبل از رفتن، لطفاً یک نظرسنجی کوتاه در مورد تجربه خود پر کنید.