تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
الشكل 1. هي لعبة تفاعلية تم إنشاؤها باستخدام "لوحة الرسم" التفاعلية.
"لوحة الرسم التفاعلية" هي إطار عمل مصمّم في "مساعد Google"
يتيح لمطوّري البرامج إضافة تجارب مرئية غامرة إلى "الإجراءات الحوارية". هذه التجربة المرئية هي تطبيق ويب تفاعلي يرسله "مساعد Google" ردًا على المستخدم في المحادثة. على عكس الردود المنسّقة التي تكون مضمَّنة في محادثة "مساعد Google"، يتم عرض تطبيق الويب "لوحة الرسم التفاعلية" كعرض بملء الشاشة على الويب.
يمكنك استخدام "لوحة الرسم التفاعلية" إذا كنت تريد تنفيذ أي من الإجراءات التالية في الإجراء:
إنشاء مرئيات بملء الشاشة
إنشاء تأثيرات انتقال وصور متحركة مخصّصة
إجراء تمثيل بصري للبيانات
إنشاء تنسيقات مخصّصة لواجهة المستخدم التصويرية
الأجهزة المتوافقة
تتوفّر "لوحة الرسم التفاعلية" حاليًا على الأجهزة التالية:
الشاشات الذكية
أجهزة جوّال تعمل بنظام التشغيل Android
آلية العمل
يتألف الإجراء الذي يستخدم "لوحة الرسم التفاعلية" مكوّنين رئيسيين:
تطبيق ويب: هو تطبيق ويب في الواجهة الأمامية يتضمّن عناصر مرئية مخصّصة يرسلها
الإجراء كرد للمستخدمين أثناء المحادثة. يمكنك إنشاء تطبيقات الويب
باستخدام تقنيات ويب مثل HTML وJavaScript وCSS.
يمكن للمستخدمين الذين يتفاعلون مع لوحة الرسم التفاعلية إجراء محادثة ذهابًا وإيابًا مع "مساعد Google" لتحقيق هدفهم. ومع ذلك، بالنسبة إلى
لوحة الرسم التفاعلية، تتم الجزء الأكبر من هذه المحادثة ضمن سياق
تطبيق الويب. عند ربط إجراء المحادثة بتطبيق الويب، عليك تضمين
واجهة برمجة التطبيقات للوحة الرسم التفاعلية في رمز تطبيق الويب.
مكتبة "لوحة الرسم" التفاعلية: هي مكتبة JavaScript تضمّها في تطبيق الويب لإتاحة التواصل بين تطبيق الويب و"إجراء المحادثة" باستخدام واجهة برمجة تطبيقات. للحصول على مزيد من المعلومات، يُرجى الاطّلاع على مستندات واجهة برمجة التطبيقات التفاعلية حول "لوحة الرسم".
بالإضافة إلى تضمين مكتبة "لوحة الرسم التفاعلية"، يجب عرض نوع الاستجابة Canvas في محادثتك لفتح تطبيق الويب على جهاز المستخدم. يمكنك أيضًا استخدام استجابة Canvas لتحديث تطبيق الويب
بناءً على إدخال المستخدم.
Canvas: هي استجابة تحتوي على عنوان URL لتطبيق الويب وبيانات
لتمريره. يمكن لأداة إنشاء المهام تعبئة الردّ Canvas تلقائيًا بالنية المتطابقة وبيانات المشهد الحالية لتحديث تطبيق الويب. وبدلاً من ذلك، يمكنك إرسال استجابة Canvas من الرد التلقائي على الويب باستخدام مكتبة توصيل Node.js. لمزيد من المعلومات،
راجِع الإشعارات حول لوحة الرسم.
لتوضيح آلية عمل "لوحة الرسم التفاعلية"، اختَر إجراءً افتراضيًا
يُعرف باسم الألوان الرائعة يمكن من خلاله تغيير لون شاشة الجهاز إلى لون يحدّده المستخدم. بعد أن يستدعي المستخدم الإجراء، يحدث المسار التالي:
يُظهر المستخدم عبارة ضبط الشاشة باللون الأزرق على جهاز"مساعد Google".
توجّه منصة "المهام مع مساعد Google" طلب المستخدم إلى منطقك محادثة لمطابقة هدف معيّن.
تتطابق المنصة مع الهدف مع مشهد الإجراء، الذي يؤدي إلى بدء حدث ويرسل استجابة Canvas إلى الجهاز. يحمّل الجهاز تطبيق ويب باستخدام عنوان URL متوفّر في الاستجابة (إذا لم يتم تحميله بعد).
عند تحميل تطبيق الويب، يُسجِّل معاودة الاتصال باستخدام واجهة برمجة التطبيقات التفاعلية "لوحة الرسم".
إذا كانت استجابة "لوحة الرسم" تحتوي على الحقل data، يتم تمرير قيمة الكائن للحقل data في استدعاء onUpdate المسجّل لتطبيق الويب.
في هذا المثال، يرسل منطق المحادثة استجابة Canvas مع حقل بيانات يتضمن متغيرًا مع القيمة blue.
عند تلقّي القيمة data للاستجابة Canvas، يمكن لمعاودة الاتصال على onUpdate تنفيذ منطق مخصّص لتطبيق الويب وإجراء التغييرات المحدّدة. في هذا المثال، تقرأ معاودة الاتصال onUpdate اللون من data وتحوّل الشاشة إلى اللون الأزرق.
توفير الطلبات من جهة العميل والخادم
عند إنشاء إجراء تفاعلي لللوحة، يمكنك الاختيار بين مسارين لتنفيذ التنفيذ: تنفيذ الخادم أو تنفيذ العميل. عند تنفيذ الخادم، يتم في المقام الأول استخدام واجهات برمجة التطبيقات التي تتطلب ردًّا تلقائيًا على الويب. وعند تنفيذ البرنامج،
يمكنك استخدام واجهات برمجة تطبيقات من جهة العميل وواجهات برمجة التطبيقات التي تتطلب ردًّا تلقائيًا على الويب للميزات التي لا تتطلب لوحة الرسم (مثل ربط الحساب)، إذا لزم الأمر.
إذا اخترت الإنشاء باستخدام الرد التلقائي على الويب الخاص بالخادم في مرحلة إنشاء المشروع، عليك نشر ردّ تلقائي على الويب للتعامل مع منطق المحادثة وJavaScript من جهة العميل من أجل تعديل تطبيق الويب وإدارة عملية التواصل بين الاثنين.
إذا اختَرت الإنشاء باستخدام توصيل العميل
(متاح حاليًا في معاينة المطوّر)، يمكنك استخدام واجهات برمجة تطبيقات جديدة من جهة العميل لإنشاء
منطق إجراءك حصريًا في تطبيق الويب، ما يسهِّل
تجربة التطوير ويقلل وقت الاستجابة بين المنعطفات الحوارية،
ويمكّنك من استخدام الإمكانات على الجهاز فقط. يمكنك أيضًا التبديل إلى
منطق من جهة الخادم من العميل إذا لزم الأمر.
تاريخ التعديل الأخير: 2023-05-16 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2023-05-16 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eInteractive Canvas is a framework by Google Assistant to build interactive, full-screen web apps for visual experiences within Conversational Actions.\u003c/p\u003e\n"],["\u003cp\u003eIt is currently supported on smart displays and Android mobile devices and is primarily used for gaming, storytelling, and educational experiences.\u003c/p\u003e\n"],["\u003cp\u003eInteractive Canvas Actions utilize a conversational interface paired with a web app, communicating using the Interactive Canvas API for dynamic updates.\u003c/p\u003e\n"],["\u003cp\u003eYou can implement your Action's logic using either server fulfillment (webhooks) or client fulfillment (client-side APIs).\u003c/p\u003e\n"],["\u003cp\u003eFor detailed guidance and a sample project, refer to the web apps documentation and the GitHub sample.\u003c/p\u003e\n"]]],[],null,["# Interactive Canvas\n\n**Figure 1.** An interactive game built using Interactive Canvas.\n\nInteractive Canvas is a framework built on Google Assistant that allows\ndevelopers to add visual, immersive experiences to Conversational Actions. This visual\nexperience is an interactive web app that Assistant sends as a response to the\nuser in conversation. Unlike [rich responses](/assistant/conversational/prompts-rich) that exist in-line in an\nAssistant conversation, the Interactive Canvas web app renders as a full-screen\nweb view.\n\nUse Interactive Canvas if you want to do any of the following in your Action:\n\n- Create full-screen visuals\n- Create custom animations and transitions\n- Do data visualization\n- Create custom layouts and GUIs\n\n| **Note:** At this time, Google is only approving Actions that use Interactive Canvas for gaming, storytelling, and educational experiences. Actions that use Interactive Canvas also take slightly longer for Google's review team to test and approve. Allow extra time in your release process to account for this.\n\nSupported devices\n-----------------\n\nInteractive Canvas is currently available on the following devices:\n\n- Smart displays\n- Android mobile devices\n\n| **Note:** For Canvas to work on Android mobile devices, your Android Google Search App (AGSA) must be version 9.86 or later.\n\nHow it works\n------------\n\nAn Action that uses Interactive Canvas consists of two main components:\n\n- **Conversational Action:** An Action that uses a conversational interface to fulfill user requests. You can use either [Actions Builder](/assistant/conversational/build#actions_builder) or the [Actions SDK](/assistant/conversational/build#actions_sdk) to build your conversation.\n- **Web app:** A front-end web app with customized visuals that your Action sends as a response to users during a conversation. You build the web app with web technologies like HTML, JavaScript, and CSS.\n\nUsers interacting with an Interactive Canvas Action have a back-and-forth\nconversation with Google Assistant to fulfill their goal. However, for\nInteractive Canvas, the bulk of this conversation occurs within the context of\nyour web app. When connecting your Conversational Action to your web app, you must include\nthe **Interactive Canvas API** in your web app code.\n\n- **Interactive Canvas library:** A JavaScript library that you include in the web app to enable communication between the web app and your Conversational Action using an API. For more information, see the [Interactive Canvas API documentation](/assistant/interactivecanvas/reference).\n\nIn addition to including the Interactive Canvas library, you must return the\n[`Canvas`](/assistant/conversational/reference/rest/v1/TopLevel/fulfill#canvas) response type in your conversation to open your web app on the\nuser's device. You can also use a `Canvas` response to update your web app based\non the user's input.\n\n- **`Canvas`:** A response that contains a URL of the web app and data to pass it. Actions Builder can automatically populate the `Canvas` response with the matched intent and current scene data to update the web app. Alternatively, you can send a `Canvas` response from a webhook using the [Node.js fulfillment library](https://actions-on-google.github.io/assistant-conversation-nodejs/3.0.0/classes/_conversation_prompt_canvas_.canvas.html). For more information, see [Canvas prompts](/assistant/interactivecanvas/prompts).\n\nTo illustrate how Interactive Canvas works, imagine a hypothetical Action\ncalled *Cool Colors* that changes the device screen color to a color the user\nspecifies. After the user invokes the Action, the following flow happens:\n\n1. The user says, *\"Turn the screen blue.\"* to the Assistant device.\n2. The Actions on Google platform routes the user's request to your conversational logic to match an intent.\n3. The platform matches the intent with the Action's scene, which triggers an event and sends a `Canvas` response to the device. The device loads a web app using a URL provided in the response (if it has not yet been loaded).\n4. When the web app loads, it registers callbacks with the Interactive Canvas API. If the Canvas response contains a `data` field, the object value of the `data` field is passed into the registered `onUpdate` callback of the web app. In this example, the conversational logic sends a `Canvas` response with a data field that includes a variable with the value of `blue`.\n5. Upon receiving the `data` value of the `Canvas` response, the `onUpdate` callback can execute custom logic for your web app and make the defined changes. In this example, the `onUpdate` callback reads the color from `data` and turns the screen blue.\n\nClient-side and server-side fulfillment\n---------------------------------------\n\n| **Warning:** Some client-side APIs listed in this documentation are in Developer Preview. You can test these APIs in the simulator, but do not deploy an Action that uses this feature to alpha, beta, or production channels. Actions deployed using these features will not function on end-user devices.\n\nWhen building an Interactive Canvas Action, you can choose between two fulfillment\nimplementation paths: server fulfillment or client fulfillment. With server\nfulfillment, you primarily use APIs that require a webhook. With client fulfillment,\nyou can use client-side APIs and, if needed, APIs that require a webhook for\nnon-Canvas features (such as account linking).\n\nIf you choose to build with [**server webhook fulfillment**](/assistant/interactivecanvas/prompts#enable_interactive_canvas) in\nthe project creation stage, you must deploy a webhook to handle the conversational\nlogic and client-side JavaScript to update the web app and manage communication\nbetween the two.\n\nIf you choose to build with [**client fulfillment**](/assistant/interactivecanvas/prompts#enable_interactive_canvas)\n(currently available in Developer Preview), you can use new client-side APIs to\nbuild your Action's logic exclusively in the web app, which simplifies the\ndevelopment experience, reduces latency between conversational turns, and\nenables you to use on-device capabilities. If needed, you can also switch to\nserver-side logic from the client.\n\nFor more information about client-side capabilities, see\n[Build with client-side fulfillment](/assistant/interactivecanvas/fulfillment#build_with_client-side_fulfillment).\n\nNext steps\n----------\n\nTo learn how to build a web app for Interactive Canvas, see [Web apps](/assistant/interactivecanvas/web-apps).\n\nTo see the code for a complete Interactive Canvas Action, see the\n[sample on GitHub](https://github.com/actions-on-google/actions-builder-canvas-nodejs)."]]
