16920403198114970697

شکل 1. یک بازی تعاملی که با استفاده از بوم تعاملی ساخته شده است.

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

اگر می‌خواهید هر یک از موارد زیر را در Action خود انجام دهید، از Canvas Interactive استفاده کنید:

  • تصاویری تمام صفحه ایجاد کنید
  • انیمیشن ها و انتقال های سفارشی ایجاد کنید
  • تجسم داده ها را انجام دهید
  • طرح بندی و رابط کاربری گرافیکی سفارشی ایجاد کنید

دستگاه های پشتیبانی شده

Canvas تعاملی در حال حاضر در دستگاه‌های زیر در دسترس است:

  • نمایشگرهای هوشمند
  • دستگاه های موبایل اندروید

چگونه کار می کند

اکشنی که از Canvas تعاملی استفاده می کند از دو جزء اصلی تشکیل شده است:

  • کنش مکالمه: اقدامی که از یک رابط مکالمه برای انجام درخواست های کاربر استفاده می کند. می توانید از Actions Builder یا Actions SDK برای ساخت مکالمه خود استفاده کنید.
  • برنامه وب: یک برنامه وب جلویی با تصاویر سفارشی شده که Action شما به عنوان پاسخی برای کاربران در طول مکالمه ارسال می کند. شما برنامه وب را با فناوری های وب مانند HTML، جاوا اسکریپت و CSS می سازید.

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

  • کتابخانه بوم تعاملی: یک کتابخانه جاوا اسکریپت که در برنامه وب قرار می دهید تا ارتباط بین برنامه وب و کنش مکالمه خود را با استفاده از یک API فعال کنید. برای اطلاعات بیشتر، به مستندات Interactive Canvas API مراجعه کنید.

علاوه بر گنجاندن کتابخانه Interactive Canvas، باید نوع پاسخ Canvas را در مکالمه خود برگردانید تا برنامه وب خود را در دستگاه کاربر باز کنید. همچنین می توانید از پاسخ Canvas برای به روز رسانی برنامه وب خود بر اساس ورودی کاربر استفاده کنید.

  • Canvas : پاسخی که حاوی URL برنامه وب و داده هایی برای ارسال آن است. Actions Builder می‌تواند به‌طور خودکار پاسخ Canvas را با هدف و داده‌های صحنه فعلی پر کند تا برنامه وب را به‌روزرسانی کند. همچنین، می‌توانید با استفاده از کتابخانه تکمیل Node.js، یک پاسخ Canvas را از یک webhook ارسال کنید. برای اطلاعات بیشتر، به درخواست‌های Canvas مراجعه کنید.

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

  1. کاربر می گوید: «صفحه نمایش را آبی کنید». به دستگاه دستیار
  2. پلتفرم Actions on Google درخواست کاربر را به منطق مکالمه شما هدایت می کند تا با یک هدف مطابقت داشته باشد.
  3. پلتفرم هدف را با صحنه اکشن مطابقت می‌دهد، که یک رویداد را راه‌اندازی می‌کند و یک پاسخ Canvas را به دستگاه ارسال می‌کند. دستگاه یک برنامه وب را با استفاده از URL ارائه شده در پاسخ بارگیری می کند (اگر هنوز بارگیری نشده باشد).
  4. هنگامی که برنامه وب بارگیری می شود، با Interactive Canvas API تماس ها را ثبت می کند. اگر پاسخ Canvas حاوی یک فیلد data باشد، مقدار شیء فیلد data به فراخوان ثبت شده در onUpdate برنامه وب ارسال می شود. در این مثال، منطق مکالمه یک پاسخ Canvas را با یک فیلد داده ارسال می کند که شامل متغیری با مقدار blue است.
  5. پس از دریافت مقدار data پاسخ Canvas ، پاسخ تماس onUpdate می تواند منطق سفارشی را برای برنامه وب شما اجرا کند و تغییرات تعریف شده را ایجاد کند. در این مثال، پاسخ تماس onUpdate رنگ را از data می خواند و صفحه را آبی می کند.

انجام سمت مشتری و سمت سرور

هنگام ایجاد یک Canvas Action تعاملی، می‌توانید بین دو مسیر اجرای اجرا انتخاب کنید: انجام سرور یا انجام مشتری. با تکمیل سرور، شما در درجه اول از API هایی استفاده می کنید که نیاز به وب هوک دارند. با تکمیل مشتری، می‌توانید از APIهای سمت کلاینت و در صورت نیاز از APIهایی استفاده کنید که برای ویژگی‌های غیر Canvas (مانند پیوند دادن حساب) به یک هوک نیاز دارند.

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

اگر تصمیم به ساخت با تکمیل مشتری دارید (در حال حاضر در پیش‌نمایش برنامه‌نویس موجود است)، می‌توانید از APIهای سمت کلاینت جدید برای ایجاد منطق Action خود منحصراً در برنامه وب استفاده کنید، که تجربه توسعه را ساده می‌کند، تأخیر بین نوبت‌های مکالمه را کاهش می‌دهد و شما را قادر می‌سازد. برای استفاده از قابلیت های روی دستگاه در صورت نیاز، می‌توانید از طریق کلاینت به منطق سمت سرور نیز سوئیچ کنید.

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

مراحل بعدی

برای یادگیری نحوه ساخت یک برنامه وب برای بوم تعاملی، به برنامه های وب مراجعه کنید.

برای مشاهده کد یک اکشن کامل Interactive Canvas، نمونه را در GitHub ببینید.