إنشاء مهمة من إنشاء "لوحة الرسم" التفاعلية لـ "مساعد Google" باستخدام "أداة إنشاء المهام"

1. نظرة عامة

‫Actions on Google هي منصة للمطوّرين تتيح لك إنشاء برامج لتوسيع وظائف مساعد Google، وهو مساعد شخصي افتراضي من Google، على أكثر من مليار جهاز، بما في ذلك مكبرات الصوت الذكية والهواتف والسيارات وأجهزة التلفزيون وسماعات الرأس وغيرها. يتفاعل المستخدمون مع "مساعد Google" في محادثة لإنجاز مهام، مثل شراء البقالة أو حجز رحلة. للحصول على قائمة كاملة بالمهام المتاحة الآن، يمكنك الاطّلاع على دليل الإجراءات. بصفتك مطوّرًا، يمكنك استخدام Actions on Google لإنشاء تجارب محادثة ممتعة ومفيدة بين المستخدمين وخدمتك الخاصة التابعة لجهة خارجية وإدارتها بسهولة.

هذا الدرس البرمجي عبارة عن وحدة متقدّمة مخصّصة للقراء الذين لديهم بعض الخبرة في إنشاء "إجراءات على Google" لـ "مساعد Google". إذا لم يكن لديك أي خبرة سابقة في تطوير تطبيقات باستخدام "إجراءات على Google"، يمكنك التعرّف على المنصة من خلال اتّباع الدروس التطبيقية حول الترميز التمهيدية ( المستوى 1 و المستوى 2). ستقدّم لك هذه الوحدات سلسلة من الميزات التي يمكن أن تساعدك في توسيع وظائف تطبيقك على "أعمال Google" وزيادة عدد المستخدمين.

في هذا الدرس التطبيقي حول الترميز، ستستخدم لوحة الرسم التفاعلية، وهو إطار عمل يستند إلى "مساعد Google"، لإضافة لعبة بملء الشاشة إلى "مهمة قائمة على المحادثة". اللعبة هي تطبيق ويب تفاعلي يرسله "مساعد Google" ردًا على المستخدم في المحادثة. يمكن للمستخدم بعد ذلك لعب اللعبة من خلال إدخال الصوت أو النص على الشاشات الذكية وأجهزة Android الجوّالة.

بدلاً من إنشاء لعبة كاملة بنفسك، يمكنك تفعيل لعبة تم إنشاؤها مسبقًا بشكل جزئي باسم Snow Pal وإضافة منطق اللعبة أثناء تقدُّمك في درس تطبيقي حول الترميز. Snow Pal هي نسخة معدّلة من لعبة الجلّاد التقليدية، حيث تعرض لك اللعبة عددًا من الفراغات التي تمثّل كلمة، وعليك تخمين الأحرف التي تعتقد أنّها قد تكون في الكلمة. مع كل تخمين غير صحيح، يذوب صديقك الثلجي أكثر. ستفوز باللعبة إذا تمكّنت من معرفة الكلمة قبل أن يذوب صديقك الثلجي تمامًا.

الشكل 1: لعبة Snow Pal مكتملة جزئيًا

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستنشئ إجراءً يستخدم "لوحة الرسم التفاعلية". ستتضمّن "الإجراءات" الميزات التالية:

لعبة كلمات بملء الشاشة يمكن للمستخدمين لعبها من خلال الصوت
زر يمكن للمستخدمين الضغط عليه لبدء اللعبة
زر يمكن للمستخدمين النقر عليه لتشغيل اللعبة مرة أخرى

عند الانتهاء من هذا الدرس التطبيقي حول الترميز، سيتضمّن الإجراء المكتمل مسار المحادثة التالي:

مساعد Google: Welcome to Snow Pal! Would you like to start playing the game?

المستخدم: Yes.

مساعد Google: Try guessing a letter in the word or guessing the word.

المستخدم: I guess the letter E.

مساعد Google: Let's see if your guess is there...E is right. Right on! Good guess.

يواصل المستخدم تخمين الحروف أو الكلمة غير المعروفة نفسها إلى أن تنتهي اللعبة.

أهداف الدورة التعليمية

كيفية إنشاء "إجراء" في "لوحة الرسم التفاعلية" ونشره
كيفية تعديل لعبة الكلمات استنادًا إلى الإدخال الصوتي وإدخال اللمس للمستخدم
كيفية نقل البيانات إلى تطبيق الويب باستخدام طرق مختلفة
كيفية تصحيح أخطاء "إجراء" لوحة الرسم التفاعلية

المتطلبات

تشمل المتطلبات الأساسية لهذا الدرس التطبيقي حول الترميز ما يلي:

متصفّح ويب، مثل Google Chrome
بيئة تطوير متكاملة (IDE) أو محرّر نصوص من اختيارك
تثبيت Node.js وnpm وgit على جهازك

ننصحك بشدة أن تكون على دراية بلغة JavaScript (الإصدار ES6) لمساعدتك في فهم الرمز المستخدَم في هذا الدرس التطبيقي حول الترميز.

اختياري: الحصول على رمز نموذجي كامل

في هذا الدرس التطبيقي حول الترميز، ستنشئ النموذج خطوة بخطوة من إصدار غير مكتمل. يمكنك أيضًا الحصول على النموذج المكتمل من مستودع GitHub إذا كنت تفضّل ذلك.

2. مقدمة عن "لوحة الرسم التفاعلية"

‫Interactive Canvas هو إطار عمل يستند إلى "مساعد Google" ويتيح لك إضافة صور متحركة ومرئيات بملء الشاشة إلى "الإجراء الحواري".

تعمل "المهمة" التي تستخدم "لوحة الرسم التفاعلية" بشكل مشابه للمهمة العادية القائمة على المحادثة. ومع ذلك، يوفّر تطبيق Interactive Canvas Action إمكانية إضافية تتمثّل في إرسال ردّ إلى الجهاز الذي يفتح تطبيق ويب بملء الشاشة.

يقدّم المستخدم إدخالات إلى تطبيق الويب إما من خلال الصوت أو اللمس إلى أن تنتهي المحادثة.

الشكل 2: هي "إجراء" تم إنشاؤه باستخدام "لوحة الرسم التفاعلية".

في هذا الدرس التطبيقي حول الترميز، يتم تنظيم مشروعك في ثلاثة أجزاء رئيسية على النحو التالي:

تطبيق الويب: تحتوي ملفات تطبيق الويب على الرمز البرمجي الخاص بالرسومات المتحركة والمرئية لتطبيق الويب، بالإضافة إلى منطق لتعديل تطبيق الويب استنادًا إلى إدخال المستخدم.
مهمة المحادثة: تحتوي مهمة المحادثة على منطق المحادثة الذي يتعرّف على مدخلات المستخدم ويعالجها ويستجيب لها.
الويب هوك: يتعامل الويب هوك مع منطق اللعبة. في هذا الدرس التطبيقي حول الترميز، يمكنك اعتبار Webhook خادم لعبتك.

في كل قسم من هذا الدرس التطبيقي حول الترميز، ستعدّل تطبيق الويب و"إجراء المحادثة" وخطاف الويب لإضافة وظائف إلى "إجراء Interactive Canvas".

على مستوى عالٍ، تعمل "الإجراء الحواري" وخطاف الويب وتطبيق الويب في إجراء Snow Pal بالطريقة التالية:

تطلب "الإجراء الحواري" من المستخدم تخمين حرف في الكلمة أو تخمين الكلمة بأكملها.
يقول المستخدم "أعتقد أنّ الحرف هو i" لتطبيق الويب Snow Pal على شاشة ذكية.
يتم توجيه طلب المستخدم إلى "المهمة القائمة على المحادثة"، والتي يتم تحديدها في مشروعك على Actions Builder و/أو Actions SDK.
يعالج "الإجراء الحواري" طلب المستخدم، واستنادًا إلى هذا الطلب، يتم إما تشغيل منطق في رابط الويب الذي يعدّل تطبيق الويب أو إرسال بيانات وصفية لتعديل تطبيق الويب مباشرةً.
يتم تعديل تطبيق الويب لعرض موضع الحرف في الكلمة، ويُطلب من المستخدم التخمين مرة أخرى.

يمكنك التعرّف على مزيد من المعلومات حول طريقة عمل Interactive Canvas في قسم التعرّف على بنية Interactive Canvas الأساسية. بعد أن تعرّفت على الأساسيات، يمكنك البدء في إعداد بيئة العمل لهذا الدرس العملي.

3- إعداد

التحقّق من إعدادات أذوناتك على Google

لاختبار الإجراء الذي تنشئه في هذا الدرس التطبيقي حول الترميز، عليك تفعيل الأذونات اللازمة حتى يتمكّن محاكي "وحدة تحكّم المهام" من الوصول إلى الإجراء. لتفعيل الأذونات، اتّبِع الخطوات التالية:

انتقِل إلى عناصر التحكّم في النشاط.
سجِّل الدخول باستخدام حساب Google إذا لزم الأمر.
فعِّل الأذونات التالية:

النشاط على الويب وفي التطبيقات
ضَع علامة في المربّع تضمين سجلّ Chrome والأنشطة التي تتم على المواقع والتطبيقات والأجهزة التي تستخدم خدمات Google ضمن النشاط على الويب وفي التطبيقات.

تثبيت واجهة سطر الأوامر gactions

في هذا الدرس التطبيقي حول الترميز، ستستخدم أداة واجهة سطر الأوامر (CLI) الخاصة بـ gactions لمزامنة مشروع "إجراءات Google" بين "وحدة تحكّم المهام" ونظام الملفات المحلي.

لتثبيت واجهة سطر الأوامر gactions، اتّبِع التعليمات الواردة في قسم تثبيت أداة سطر الأوامر gactions.

تثبيت واجهة سطر الأوامر في Firebase

تتيح لك واجهة سطر الأوامر (CLI) في Firebase نشر مشروع "إجراءات Google" على "وظائف Cloud" واستضافة تطبيق الويب.

يستخدم هذا الدرس التطبيقي حول الترميز npm لتثبيت Firebase CLI. احرص على تثبيت npm، الذي يأتي عادةً مع Node.js.

لتثبيت واجهة سطر الأوامر أو ترقيتها، افتح وحدة طرفية ونفِّذ الأمر التالي npm:

npm install -g firebase-tools

للتحقّق من تثبيت واجهة سطر الأوامر بشكل صحيح، نفِّذ الأمر التالي:

firebase --version

تأكَّد من أنّ إصدار Firebase CLI هو 8 أو إصدار أحدث ليتضمّن جميع الميزات الحديثة المطلوبة لوظائف Cloud Functions. إذا لم يكن كذلك، شغِّل npm install -g firebase-tools لإجراء الترقية.

لتسجيل الدخول إلى Firebase، شغِّل الأمر التالي:

firebase login

عند تسجيل الدخول إلى Firebase، تأكَّد من استخدام حساب Google نفسه الذي استخدمته لإنشاء مشروعك على "إجراءات Google".

إنشاء نسخة طبق الأصل من المستودع

في هذا القسم، ستنسخ الملفات التي تحتاج إليها في هذا الدرس البرمجي. للحصول على هذه الملفات، اتّبِع الخطوات التالية:

افتح نافذة أوامر طرفية وانتقِل إلى دليل تخزِّن فيه عادةً مشاريع الترميز. إذا لم يكن لديك دليل، انتقِل إلى دليل المنزل.
لاستنساخ هذا المستودع، شغِّل الأمر التالي في الوحدة الطرفية:

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. إعداد مشروع "الإجراءات"

في هذا القسم، يمكنك إنشاء مشروع "إجراءات Google" وضبطه، ونقل الرمز من المستودع المستنسخ إلى وحدة تحكّم "إجراءات Google" باستخدام gactions CLI، ونشر تطبيق الويب وخطاف الويب.

إنشاء مشروع "إجراءات"

مشروع "الإجراءات" هو حاوية للإجراء. لإنشاء مشروع "أوامر Google" في هذا الدرس التطبيقي حول الترميز، اتّبِع الخطوات التالية:

افتح وحدة تحكّم الإجراءات.
انقر على مشروع جديد.
اكتب اسم مشروع، مثل canvas-codelab. هذا الاسم مخصّص للاستخدام الداخلي. يمكنك لاحقًا ضبط اسم خارجي لمشروعك.

انقر على إنشاء مشروع.
في شاشة ما هو نوع الإجراء الذي تريد إنشاءه؟، اختَر بطاقة لعبة.
انقر على التالي.
اختَر بطاقة مشروع فارغ.
انقر على بدء الإنشاء.

حفظ رقم تعريف المشروع للإجراء

رقم تعريف المشروع هو معرّف فريد للإجراء. ستحتاج إلى رقم تعريف مشروعك في عدة خطوات من هذا الدرس العملي.

لاسترداد رقم تعريف مشروعك، اتّبِع الخطوات التالية:

في "وحدة تحكّم Actions"، انقر على النقاط العمودية الثلاث > إعدادات المشروع.

انسخ رقم تعريف المشروع.

ربط حساب فوترة

لنشر عملية التنفيذ لاحقًا في هذا الدرس التطبيقي حول الترميز باستخدام Cloud Functions، يجب ربط حساب فوترة بمشروعك في Google Cloud. إذا كان لديك حساب فوترة، يمكنك تجاهل الخطوات التالية.

لربط حساب فوترة بمشروعك، اتّبِع الخطوات التالية:

انتقِل إلى صفحة الفوترة في Google Cloud Platform.
انقر على إضافة حساب فوترة أو إنشاء حساب.
املأ معلومات الدفع.
انقر على بدء الفترة التجريبية المجانية أو إرسال الفوترة وتفعيلها.
انتقِل إلى صفحة الفوترة في Google Cloud.
انقر على علامة التبويب مشاريعي.
انقر على النقاط الثلاث > تغيير الفوترة.
في القائمة المنسدلة، اختَر حساب الفوترة الذي أعددته.
انقر على ضبط الحساب.

لتجنُّب تحمّل رسوم، اتّبِع الخطوات الواردة في قسم تنظيف مشروعك.

نشر تطبيق ويب

في هذا القسم، ستنشر تطبيق الويب (لعبة 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 مع زر بدء اللعبة:

إضافة عنوان URL لتطبيق الويب ورقم تعريف المشروع إلى مشروع "الإجراءات"

بعد ذلك، أضِف عنوان 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، استبدِل السلسلة النائبة برقم تعريف مشروعك.

نقل المشروع إلى "وحدة تحكّم المهام"

لتعديل وحدة تحكّم "المهام" باستخدام مشروع على جهاز المستخدم، عليك نقل مشروع "المهام" إلى وحدة تحكّم "المهام". ولإجراء ذلك، اتبع الخطوات التالية:

انتقِل إلى الدليل sdk:

cd sdk/

لنسخ إعدادات نظام الملفات على جهازك إلى "وحدة تحكّم الإجراءات"، نفِّذ الأمر التالي:

gactions push

تفعيل الويب هوك

عند تنفيذ gactions push، استوردت رمز webhook الأولي إلى "وحدة تحكّم الإجراءات". بالنسبة إلى بقية هذا الدرس التطبيقي حول الترميز، يمكنك تعديل رمز ويب هوك ضمن "وحدة تحكّم المهام". في هذه المرحلة، يمكنك نشر خطاف الويب من "وحدة تحكّم الإجراءات".

لنشر خطاف الويب، اتّبِع الخطوات التالية:

في "وحدة تحكّم الإجراءات"، انقر على تطوير في شريط التنقّل.
انقر على علامة التبويب Webhook في شريط التنقّل.
انقر على نشر خدمة التنفيذ.

قد يستغرق توفير عملية التنفيذ ونشرها في Cloud Functions بضع دقائق. من المفترض أن تظهر لك الرسالة يتم حاليًا نشر Cloud Function.... عندما يتم نشر الرمز بنجاح، يتم تعديل الرسالة إلى تمّ نشر "الدالة السحابية" بنجاح.

الاختبار في المحاكي

في هذه المرحلة، يتم ربط الإجراء بتطبيق الويب. يمكنك استخدام محاكي "وحدة تحكّم الإجراءات" للتأكّد من ظهور تطبيق الويب عند استدعاء الإجراء.

لاختبار الإجراء، اتّبِع الخطوات التالية:

في شريط التنقّل في وحدة تحكّم "الإجراءات"، انقر على اختبار.
اكتب Talk to Snow Pal sample في حقل الإدخال واضغط على Enter.
اكتب Yes في حقل الإدخال واضغط على Enter. يمكنك بدلاً من ذلك النقر على بدء اللعبة.

لم يتم بعد ضبط منطق تخمين حرف أو كلمة، لذا إذا خمّنت كلمة أو حرفًا، ستتلقّى الرد "...غير صحيح. استمِر في المحاولة. يبدو أنّنا بحاجة إلى إضافة المزيد من الوظائف لكي تعمل هذه الميزة بشكل صحيح".

5- التعرّف على البنية الأساسية لـ "لوحة الرسم التفاعلية"

في هذا المشروع، يتم تنظيم الوظائف في ثلاثة مكونات رئيسية: "الإجراء الحواري" وتطبيق الويب وخطاف الويب. يُرجى العِلم أنّ هذا نموذج واحد لكيفية إعداد "الإجراء"، وهو منظَّم بهذه الطريقة لتسليط الضوء على الوظيفة الأساسية لـ "لوحة العرض التفاعلية".

تقدّم الأقسام التالية تفاصيل أكثر حول كيفية عمل "الإجراء الحواري" وخطاف الويب وتطبيق الويب معًا، بالإضافة إلى عناصر مهمة أخرى في Interactive Canvas.

إجراء المحادثة

يتولّى مكوّن "الإجراء الحواري" في الإجراء التعرّف على طلب المستخدم ومعالجته وإرساله إلى المشهد المناسب، حيث يتم إنشاء ردّ على المستخدم. على سبيل المثال، إذا قال المستخدم "أعتقد أنّ الحرف هو e" في لعبة Snow Pal، يستخرج تطبيقك للحوار الحرف كمَعلمة هدف ويمرّره إلى منطق اللعبة المناسب، الذي يحدّد ما إذا كانت التخمينات صحيحة ويعدّل تطبيق الويب وفقًا لذلك. يمكنك عرض هذه المنطق الحواري وتعديله ضمن Actions Builder، وهي بيئة تطوير متكاملة مستندة إلى الويب في Actions Console. تعرض لقطة الشاشة التالية جزءًا من "الإجراء الحواري" ضمن Actions Builder:

الشكل 4. تمثيل مرئي Main invocation في Actions Builder

تعرض لقطة الشاشة هذه Main invocation لإجراءك، وهو ما يطابق المستخدمون عندما يقولون عبارة مثل "Ok Google، أريد التحدث إلى نموذج Snow Pal". عندما يستدعي المستخدم "مهمّتك"، يرسل Main invocation طلبًا يتضمّن ردًا canvas، والذي يحتوي على عنوان URL لتطبيق الويب.

يجب أن يتضمّن الرد الأول من canvas في "الإجراء" عنوان URL لتطبيق الويب. تطلب هذه الاستجابة من "مساعد Google" عرض تطبيق الويب على هذا العنوان على جهاز المستخدم. يمكن أن تتضمّن ردود canvas الإضافية في "أداة إنشاء الإجراءات" حقل send_state_data_to_canvas_app تم ضبطه على true. يرسل هذا الحقل اسم الغرض وأي قيم للمَعلمات إلى تطبيق الويب عند مطابقة الغرض، ويعدّل تطبيق الويب استنادًا إلى هذه البيانات من إدخال المستخدم.

ويب هوك

في هذا الدرس التطبيقي حول الترميز، يحتوي خطاف الويب على منطق اللعبة (يمكنك اعتبار خطاف الويب بمثابة خادم ألعاب). تتضمّن منطق اللعبة عناصر مثل تحديد ما إذا كان تخمين المستخدم صحيحًا أم خاطئًا، أو ما إذا كان المستخدم قد فاز أو خسر، وإنشاء ردّ استنادًا إلى النتيجة. يمكنك تعديل خطاف الويب ضمن "أداة إنشاء الإجراءات".

عندما يحتاج الإجراء إلى تنفيذ منطق اللعبة، يطلب "أداة إنشاء الإجراءات" من خطاف الويب تنفيذ ذلك. على سبيل المثال، يؤدي الغرض guess في المشهد Game إلى إجراء طلب ربط بخدمة خارجية إلى معالج guess، الذي ينفّذ بعد ذلك منطقًا لتحديد ما إذا كان تخمين المستخدم صحيحًا أم لا. يمكن أن يتضمّن خطاف الويب Canvas ردودًا ضمن معالجات يتم ربطها بملفات تطبيقات الويب وتعديل الويب بشكلٍ مناسب.

تطبيق الويب

الشكل 5. تمثيل مرئي للتفاعل بين "الإجراء الحواري" وwebhook وتطبيق الويب في "إجراء لوحة الرسم التفاعلية"

تحتوي ملفات تطبيق الويب على الرموز البرمجية الخاصة بالرسومات المتحركة والمرئية لتطبيق الويب، بالإضافة إلى منطق لتعديل تطبيق الويب استنادًا إلى إدخال المستخدم. يمكنك تعديل ملفات تطبيق الويب في محرِّر النصوص ونشر هذه التغييرات باستخدام واجهة سطر الأوامر في Firebase.

التواصل بين "إجراء المحادثة" وتطبيق الويب

عليك تفعيل التواصل بين "الإجراء الحواري" وتطبيق الويب لكي يتمكّن تطبيق الويب من التعديل استنادًا إلى بيانات أدخلها المستخدم. على سبيل المثال، إذا قال المستخدم "أعتقد أنّ الحرف هو f"،

يجب أن يزوّد "الإجراء الحواري" تطبيق الويب بالحرف f لكي يتمكّن تطبيق الويب من تعديل المحتوى وفقًا لذلك. لنقل إدخال المستخدم من "الإجراء الحواري" إلى تطبيق الويب، عليك تحميل Interactive Canvas 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>

لتعديل تطبيق الويب استنادًا إلى إدخال المستخدم، يجب أيضًا تسجيل عمليات رد الاتصال وإعدادها في ملف تطبيق الويب. تسمح عمليات معاودة الاتصال لتطبيق الويب بالردّ على المعلومات أو الطلبات الواردة من "الإجراء الحواري".

في /public/js/action.js، هناك فئة تم إعدادها مسبقًا باسم Action لتحديد وظائف معالجة البيانات وتسجيلها. فئة Action هي برنامج تضمين لواجهة برمجة التطبيقات 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.

يوضّح القسم التالي كيفية ضبط الرمز البرمجي الخاص بهذا المشروع لتمرير البيانات من "الإجراء الحواري" إلى تطبيق الويب.

تعديل تطبيق الويب استنادًا إلى إدخالات المستخدم

في هذا الدرس التطبيقي حول الترميز، ستستخدم خريطة أوامر لتعديل تطبيق الويب استنادًا إلى إدخال المستخدم. على سبيل المثال، عندما تتم مطابقة الغرض start_game في المشهد Welcome، يتم إرسال الردّ canvas المضمّن في الطلب إلى تطبيق الويب. يحلّل onUpdate() البيانات الوصفية من الردّ canvas ويستدعي الأمر START_GAME، الذي يستدعي بدوره الدالة start() في scene.js ويعدّل تطبيق الويب لبدء جلسة لعب جديدة.

تستدعي الدالة start() في scene.js أيضًا دالة، updateCanvasState()، تستخدم طريقة تُسمى setCanvasState() لإضافة بيانات الحالة التي يمكن أن يصل إليها خطاف الويب.

يتم استدعاء الطريقة updateCanvasState() في نهاية كل أمر (ستضيف هذه الأوامر خلال درس تطبيقي حول الترميز) ويتم تعديل حالة تطبيق الويب. في كل مرة يتم فيها استدعاء 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 إلى "الإجراء"، ما يتيح للمستخدم تخمين الحروف داخل الكلمة أو الكلمة نفسها.

إجراء المحادثة

في قسم الاختبار في المحاكي، تلقّيت ردًا يتضمّن "يبدو أنّنا بحاجة إلى إضافة المزيد من الوظائف لكي تعمل هذه الميزة بشكلٍ صحيح". يمكنك الآن حذف هذا الطلب في "وحدة تحكّم الإجراءات" حتى لا يتم استدعاء رمز ربط الخدمة إلا عند استيفاء الشرط (في المشهد Game، تمّ إعداد الغرض guess مسبقًا لإجراء عملية استدعاء رمز ربط الخدمة عند مطابقته).

لإزالة الطلب الثابت عندما يتمّ العثور على تطابق مع الغرض guess، اتّبِع الخطوات التالية:

في وحدة تحكّم "الإجراءات"، انقر على المشاهد في شريط التنقّل.
انقر على لعبة للانتقال إلى مشهد Game.
انقر على عندما تتم مطابقة التخمين ضمن التعامل مع نية المستخدم. انقر على محو الطلبات لإزالة الطلب.
انقر على حفظ.

ويب هوك

في هذا القسم، يمكنك تعديل خطاف الويب باستخدام منطق يربط تخمين المستخدم الصحيح أو غير الصحيح بالمنطق في ملف تطبيق ويب، والذي يعدّل تطبيق الويب بعد ذلك وفقًا لذلك. تمّت إعداد معالج الغرض guess لك مسبقًا في Webhook، لذا ما عليك سوى إضافة ردود Canvas إلى هذا الغرض لتفعيل منطق يحدّث تطبيق الويب.

لتعديل عنوان URL الخاص بخطاف الويب، اتّبِع الخطوات التالية:

في وحدة تحكّم Actions، انقر على Webhook في شريط التنقّل.
أضِف الرمز التالي إلى 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 (القسم B):

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

انقر على حفظ عملية التنفيذ.
انقر على نشر خدمة التنفيذ. عند اكتمال عملية النشر، ستظهر الرسالة تم تحديث عملية نشر Cloud Function.

تطبيق الويب

يمكنك الآن ضبط تطبيق الويب للتعامل مع الأمرين CORRECT_ANSWER وINCORRECT_ANSWER.

افتح public/js/action.js في محرِّر النصوص.
عدِّل تطبيق الويب للتعامل مع الأمرَين CORRECT_ANSWER وINCORRECT_ANSWER:

‫action.js (القسم 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.

فهم الرمز البرمجي

في القسم السابق، أضفت رمزًا برمجيًا يتيح للمستخدمين تخمين الحروف في لعبتك والاطّلاع على هذه التخمينات في الكلمة أو في Snow Pal. بشكل عام، يمكنك إجراء طلب ربط خطّاف الويب في Actions Builder عندما تتم مطابقة الغرض guess، ما يؤدي إلى تمرير البيانات إلى تطبيق الويب لتعديله وفقًا لذلك. على سبيل المثال، إذا خمّن المستخدم حرفًا في لعبة Snow Pal وكان الحرف موجودًا في الكلمة، سيتم تعديل تطبيق الويب لإظهار الحرف في الموضع الصحيح في الكلمة.

بالنسبة إلى الإجراءات التي تستخدم Interactive Canvas، يكون التدفق العام لكيفية نقل البيانات من خطاف الويب إلى تطبيق الويب على النحو التالي:

تتطابق البيانات التي أدخلها المستخدم مع هدف يتضمّن ردًا من النوع Canvas.
يرسل الإجراء الحواري أو خطاف الويب الرد Canvas، ما يؤدي إلى تشغيل معاودة الاتصال onUpdate().
يتم ربط onUpdate() بعملية ردّ الاتصال بمنطق مخصّص يعدّل تطبيق الويب وفقًا لذلك.

بالنسبة إلى هذا المشروع تحديدًا، يعمل الرمز بالطريقة التالية:

عندما يتطابق قصد المستخدِم مع guess، يستخرج Actions Builder الحرف من إدخال المستخدِم كمعلَمة.
يستدعي Actions Builder المعالج guess في رمز ربط الويب، والذي يتضمّن منطقًا لتحديد ما إذا كان الحرف الذي خمّنه المستخدم يظهر في الكلمة.
يحتوي معالج guess على ردّين Canvas، أحدهما يتم تنفيذه عندما يكون الحرف صحيحًا، والآخر يتم تنفيذه عندما يكون الحرف غير صحيح. يمرّر كل ردّ Canvas البيانات المناسبة (الأمر CORRECT_ANSWER أو INCORRECT_ANSWER) إلى تطبيق الويب.
يتم تمرير البيانات الواردة في الحقل data من الردّ Canvas إلى الطريقة onUpdate() في action.js. يستدعي onUpdate() الأمر المناسب في خريطة الأوامر في scene.js.
تتم مطابقة خريطة الأوامر مع الدالتَين correctAnswer() وincorrectAnswer() في scene.js. تعدّل هذه الدوال تطبيق الويب بشكلٍ مناسب لتعكس تخمين المستخدم وتستدعي setCanvasState() لإرسال بيانات الحالة من تطبيق الويب إلى خطاف الويب.

7. إضافة وظيفة الفوز/الخسارة

في هذا القسم، ستضيف وظيفة الفوز والخسارة إلى "الإجراء"، والتي تتضمّن منطقًا يحدّد ما إذا كان المستخدم قد فاز أو خسر، ومنطقًا لتعديل صورة تطبيق الويب استنادًا إلى نتيجة المستخدم.

إجراء المحادثة

سيتم ضبط الوظيفة التي تحدّد ما إذا كان المستخدم سيفوز باللعبة أو سيخسرها ضمن الغرض guess، لذا ليس عليك إجراء أي إعدادات إضافية في "أداة إنشاء الإجراءات".

ويب هوك

في هذا القسم، يمكنك تعديل خطاف الويب باستخدام منطق يتعامل مع الحالات التي يفوز فيها المستخدم أو يخسر اللعبة، ويتم ربطه بمنطق تطبيق الويب الذي يعدّل اللعبة باستخدام شاشة الفوز أو الخسارة المناسبة.

لتعديل عنوان URL الخاص بخطاف الويب، اتّبِع الخطوات التالية:

في وحدة تحكّم Actions، انقر على Webhook في شريط التنقّل.
أضِف الرمز التالي إلى 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 (القسم هـ):

// 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.
}

انقر على حفظ عملية التنفيذ.
انقر على نشر خدمة التنفيذ. عند اكتمال عملية النشر، ستظهر الرسالة تم تحديث عملية نشر 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. يمكنك بدلاً من ذلك النقر على زر بدء المباراة.
خمِّن الأحرف والكلمات إلى أن تفوز أو تخسر.

إذا طلبت تشغيل اللعبة مرة أخرى، ستتلقّى رسالة تشير إلى أنّه لم تتم إضافة الوظيفة اللازمة لتشغيلها مرة أخرى بعد. ستضيف هذه الوظيفة في القسم التالي.

فهم الرمز البرمجي

تعمل وظيفة الفوز والخسارة بالطريقة نفسها التي تعمل بها وظيفة التخمين، حيث يطابق المستخدم الغرض guess، ويقيّم برنامج الويب هوك تخمين المستخدم. إذا كان التخمين صحيحًا، يتحقّق الرمز مما إذا كان المستخدم قد فاز. وإذا فاز، يتم إرسال الأمر WIN_GAME إلى تطبيق الويب. وإذا كان التخمين خاطئًا، يتحقّق الرمز مما إذا كان المستخدم قد خسر. وإذا خسر، يتم إرسال الأمر LOSE_GAME إلى تطبيق الويب. تؤدي هذه الأوامر إلى تشغيل الدالتَين winGame() وloseGame() في scene.js، ما يؤدي إلى تعديل تطبيق الويب لعرض شاشة الفوز أو الخسارة وتعديل حالة اللعبة.

8. إضافة وظيفة التشغيل مرة أخرى

في هذا القسم، ستضيف وظيفة تتيح للمستخدم إما قول "ألعب مجددًا" أو النقر على الزر ألعب مجددًا في تطبيق الويب لبدء لعبة جديدة. يمكنك تعديل الغرض play_again في Actions Builder لإرسال الرد canvas الذي يعدّل تطبيق الويب بشكل مناسب، وإضافة منطق يؤدي إلى تفعيل الغرض play_again عندما ينقر المستخدم على الزر تشغيل مرة أخرى.

إجراء المحادثة

عند اختبار "الإجراء" في القسم السابق، تلقّيت الطلب التالي إذا حاولت تشغيل اللعبة مرة أخرى: "سيكون ذلك رائعًا، ولكننا سنضيف هذه الوظيفة في قسم لاحق. في الوقت الحالي، ما عليك سوى إعادة ضبط الإجراء". يمكنك الآن حذف هذا الطلب واستبداله بطلب آخر يردّ على المستخدم عندما يطلب لعبة أخرى ("حسنًا، إليك لعبة أخرى") ويتضمّن ردًا canvas لتفعيل تطبيق الويب لبدء لعبة جديدة.

لتعديل الطلب عندما يريد المستخدم اللعب مرة أخرى، اتّبِع الخطوات التالية:

في "وحدة تحكّم الإجراءات"، انقر على القائمة المنسدلة المشهد.
انقر على مشهد اللعبة.
انقر على عند مطابقة play_again ضمن التعامل مع نية المستخدم.
استبدِل الطلب بما يلي:

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

انقر على حفظ.

ويب هوك

في هذا الدرس التطبيقي حول الترميز، يدير خطاف الويب منطق اللعبة. بما أنّ وظيفة "اللعب مرة أخرى" لا تتطلّب أي نوع من التحقّق من صحة المنطق، ليس عليك استدعاء خطاف الويب، بل يمكنك إرسال ردّ canvas مباشرةً من Actions Builder لتمرير البيانات اللازمة إلى تطبيق الويب (لقد أعددت ذلك في القسم السابق).

تطبيق الويب

يمكنك الآن تعديل ملفات تطبيق الويب لتعديلها بشكل مناسب عندما يطلب المستخدم إعادة التشغيل. لإضافة هذه الوظيفة، اتّبِع الخطوات التالية:

افتح public/js/action.js في محرِّر النصوص.
عدِّل تطبيق الويب للتعامل مع الأمر PLAY_AGAIN:

‫action.js (القسم الأول):

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

افتح public/js/scene.js في محرِّر النصوص.
عدِّل تطبيق الويب لبدء جلسة لعب جديدة عندما ينقر المستخدم على الزر اللعب مجددًا:

‫scene.js (القسم J):

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

نفِّذ الأمر التالي لتعديل تطبيق الويب:

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

اختبار الإجراء في المحاكي

يمكن أن يبدأ الإجراء الآن جلسة لعب جديدة عندما يقول المستخدم "أريد اللعب مجددًا" أو ينقر على الزر أريد اللعب مجددًا.

لاختبار الإجراء، اتّبِع الخطوات التالية:

في شريط التنقّل، انقر على اختبار.
اكتب Talk to Snow Pal sample في حقل الإدخال واضغط على Enter.
اكتب Yes في حقل الإدخال واضغط على Enter. يمكنك بدلاً من ذلك النقر على زر بدء المباراة.
خمِّن الأحرف والكلمات إلى أن تفوز أو تخسر.
اكتب Play again في حقل الإدخال واضغط على Enter. يمكنك بدلاً من ذلك النقر على الزر اللعب مرة أخرى.

فهم الرمز البرمجي

عند اختبار الإجراء، يمكنك بدء لعبة جديدة من خلال إدخال الصوت ("العب مرة أخرى") أو إدخال اللمس (النقر على الزر العب مرة أخرى).

بالنسبة إلى خيار الإدخال الصوتي، عندما يقول المستخدم "تشغيل مرة أخرى" أو عبارة مشابهة، يتمّ الربط بنية play_again وإضافة طلب ("حسنًا، إليك لعبة أخرى") إلى قائمة الطلبات. تُرسِل استجابة canvas المُضمَّنة في الطلب اسم الغرض والبيانات الوصفية الأخرى إلى تطبيق الويب. ويتم تمرير اسم الغرض إلى معاودة الاتصال onUpdate() التي تربط الأمر المقابل PLAY_AGAIN بخريطة الأوامر في action.js. يؤدي الأمر PLAY_AGAIN إلى تشغيل الدالة start() في scene.js وتحديث تطبيق الويب بجلسة لعبة جديدة.

بالنسبة إلى خيار الإدخال باللمس، يمكنك استخدام sendTextQuery()، وهي واجهة برمجة تطبيقات Interactive Canvas تتيح لك تفعيل هدف من خلال الإدخال باللمس، وذلك لجعل الزر يعمل.

في هذا الدرس العملي، ستستخدم sendTextQuery() لاستدعاء الغرض 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. يظهر ذلك في وحدة التحكّم في قسم الاستدعاء على النحو PLAY_GAME، كما هو موضّح في لقطة الشاشة التالية:

لتمكين المستخدمين من استدعاء الإجراء من خلال هذا الهدف المضمّن، عليك إضافة ردّ canvas يتضمّن عنوان URL لتطبيق الويب إلى الهدف المضمّن PLAY_GAME. ولإجراء ذلك، اتبع الخطوات التالية:

في Actions Console، انقر على PLAY_GAME في شريط التنقّل.
عدِّل الطلب ليشمل عنوان URL لتطبيق الويب، كما هو موضّح في المقتطف التالي:

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

انقر على حفظ.

اختبار الإجراء في المحاكي

يتوافق الإجراء الآن مع الغرض المضمّن PLAY_GAME.

لاختبار الإجراء، اتّبِع الخطوات التالية:

في شريط التنقّل، انقر على اختبار.
انقر على اختبار معالجة الأهداف المضمّنة.
انقر على تنفيذ الإجراء.

يجب استدعاء الإجراء في المحاكي.

10. الملحق: تحديد المشاكل وحلّها في تطبيق Interactive Canvas

في هذا القسم، سنتعرّف على كيفية تصحيح أخطاء "مهمة 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;
}

تنظيف مشروعك [يُنصح به]

لتجنُّب تحمّل رسوم محتملة، ننصحك بإزالة المشاريع التي لا تنوي استخدامها. لحذف المشاريع التي أنشأتها في هذا الدرس العملي، اتّبِع الخطوات التالية:

لحذف مشروع Google Cloud والموارد، أكمِل الخطوات الواردة في قسم إيقاف المشاريع (حذفها).

اختياري: لإزالة مشروعك على الفور من وحدة تحكّم "الإجراءات"، أكمِل الخطوات الواردة في قسم حذف مشروع. إذا لم تُكمل هذه الخطوة، ستتم إزالة مشروعك تلقائيًا بعد 30 يومًا تقريبًا.

11. تهانينا!

لقد أكملت الآن الدرس التطبيقي التمهيدي حول Interactive Canvas، وأصبحت لديك المهارات اللازمة لإنشاء "إجراء" خاص بك على Interactive Canvas.

ما تعلّمته

كيفية إنشاء "إجراء على لوحة الرسم التفاعلية" ونشره واختباره
كيفية استخدام ردود Canvas لتعديل تطبيق الويب
كيفية استخدام طرق مختلفة لتحسين "الإجراء"، مثل sendTextQuery() وsetCanvasState()
كيفية تصحيح أخطاء الإجراء

مزيد من المعلومات

اطّلِع على المراجع التالية لمعرفة المزيد عن Interactive Canvas:

مستندات Interactive Canvas: مستندات Actions on Google الرسمية حول Interactive Canvas.
عيّنة Interactive Canvas: الرمز البرمجي للعبة بسيطة على Interactive Canvas تتيح لك تدوير مثلث وتعديل ألوانه.
بوابة الألعاب: الإرشادات المتعلّقة بتصميم الألعاب على "مساعد Google"

استطلاع لجمع الملاحظات

قبل إنهاء المحادثة، يُرجى ملء استطلاع موجز حول تجربتك.