क्लाइंट या सर्वर साइड फ़ुलफ़िलिंग की मदद से बनाना जारी रखें

अब जब आपने ऐक्शन की बुनियादी बातें जान ली हैं, तो अपने ऐक्शन को बेहतर और पसंद के मुताबिक बनाया जा सकता है खास तरीकों से. अपनी Action को डेवलप करने के लिए, क्लाइंट के फ़ुलफ़िलमेंट मॉडल या सर्वर साइड फ़ुलफ़िलमेंट मॉडल. इसके लिए इन विकल्पों के बारे में ज़्यादा जानकारी के लिए, इंटरैक्टिव कैनवस चालू करें.

अगर आपने क्लाइंट फ़ुलफ़िलमेंट मॉडल का विकल्प चुना है, तो इनका इस्तेमाल आपकी कार्रवाई:

अगर आपने सर्वर फ़ुलफ़िलमेंट मॉडल का विकल्प चुना है, तो नीचे दिए गए तरीकों का इस्तेमाल किया जा सकता है आपकी कार्रवाई:

किसी खास ग्राहक को आइटम भेजने का मॉडल. इस टेबल में, चालू किए गए एपीआई दिखाए गए हैं. क्लाइंट फ़ुलफ़िलमेंट विकल्प के साथ-साथ यह भी देख सकता है कि इन एपीआई का सुझाव दिया गया है या नहीं या के लिए सलाह नहीं दी जाती:

एपीआई का नाम क्या यह सर्वर फ़ुलफ़िलमेंट मॉडल में काम करता है? क्या क्लाइंट के फ़ुलफ़िलमेंट मॉडल में यह सुविधा काम करती है?
sendTextQuery() हां काम करता है, लेकिन इसका सुझाव नहीं दिया जाता (sendtextQuery() देखें देखें)
outputTts() हां हां
triggerScene() नहीं हां
createIntentHandler(), expect(), clearExpectations(), prompt() नहीं हां
createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot() नहीं हां
setHomeParam(), getHomeParam(), setUserParam(), getUserParam() नहीं हां

यहां दिए गए सेक्शन में, क्लाइंट और एपीआई के लिए, एपीआई लागू करने का तरीका बताया गया है आपके इंटरैक्टिव कैनवस ऐक्शन में, सर्वर साइड फ़ुलफ़िलमेंट मॉडल.

क्लाइंट-साइड फ़ुलफ़िलमेंट की मदद से बनाएं

अपने वेब ऐप्लिकेशन के लॉजिक में, इन इंटरैक्टिव कैनवस एपीआई को लागू किया जा सकता है:

outputTts()

यह एपीआई आपको किसी डिवाइस से बोली को लिखाई में बदलने की सुविधा (टीटीएस) को बिना भेजे, इस्तेमाल करने की सुविधा देता है Actions Builder से मिले स्टैटिक प्रॉम्प्ट या वेबहुक को चालू करने का प्रॉम्प्ट. अगर कोई सर्वर-साइड नहीं है टीटीएस के साथ जुड़ा तर्क ज़रूरी है, आप outputTts() का इस्तेमाल क्लाइंट-साइड का इस्तेमाल करके, सीधे आपके सर्वर पर न जाएं और तेज़ी से रिस्पॉन्स दें आपके उपयोगकर्ता.

क्लाइंट-साइड outputTts()सर्वर-साइड टीटीएस को बाधित या रद्द कर सकता है. इनसे बचा जा सकता है इन सावधानियों का ध्यान रखते हुए सर्वर-साइड TTS में रुकावट डालना:

  • सेशन की शुरुआत में outputTts() को कॉल करने से बचें; इसके बजाय, Action के पहले बातचीत के लहजे में सर्वर साइड TTS का इस्तेमाल करें.
  • इस दौरान, outputTts() को लगातार कॉल न करें. इसके लिए, उपयोगकर्ता को कोई कार्रवाई नहीं करनी होगी.

नीचे दिया गया स्निपेट दिखाता है किoutputTts() क्लाइंट-साइड:

interactiveCanvas.outputTts(
      '<speak>This is an example response.</speak>', true);

outputTts() को onTtsMark() के साथ भी इस्तेमाल किया जा सकता है का इस्तेमाल करें. onTtsMark() का इस्तेमाल करने से आपका वेब सिंक हो जाएगा SSML TTS स्ट्रिंग के खास पॉइंट पर ऐप्लिकेशन ऐनिमेशन या गेम की स्थिति, जैसा कि नीचे दिखाया गया है स्निपेट में:

interactiveCanvas.outputTts(
      '<speak>Speak as <mark name="number" /> number <break time="700ms"/>' +
      '<say-as interpret-as="cardinal">12345</say-as> <break time="300ms"/> ' +
      'Speak as <mark name="digits" /> digits <break time="700ms"/>' +
      '<say-as interpret-as="characters">12345</say-as></speak>', true);

पिछले उदाहरण में, दो निशान आपके जवाब को कस्टमाइज़ करने के लिए टीटीएस की मदद से वेब ऐप्लिकेशन को भेजा जाता है.

क्लाइंट के इंटेंट पूरा करने को मैनेज करना

इंटरैक्टिव कैनवस के लिए सर्वर फ़ुलफ़िलमेंट मॉडल में, सभी इंटेंट वेबहुक की मदद से कार्रवाई को मैनेज किया जाना चाहिए. इससे आपकी सेट की गई कार्रवाई में इंतज़ार का समय बढ़ जाता है. इसके बजाय वेबहुक कॉल करने पर, अपने वेब ऐप्लिकेशन में इंटेंट को पूरा किया जा सकता है.

इंटेंट क्लाइंट-साइड को मैनेज करने के लिए, इन एपीआई का इस्तेमाल किया जा सकता है:

  • createIntentHandler(): यह ऐसा तरीका है जिससे आपको अपने यूआरएल में इंटेंट हैंडलर तय करने में मदद मिलती है Actions Builder में तय किए गए कस्टम इंटेंट के लिए वेब ऐप्लिकेशन कोड.
  • expect(): यह एक तरीका है जो इंटेंट हैंडलर को चालू/रजिस्टर करता है, ताकि उपयोगकर्ता इंटेंट से मैच कर सके.
  • clearExpectations(): ऐसा तरीका जो सभी लोगों की उम्मीदों पर खरा उतरता है मौजूदा इंटेंट ऐक्टिव किए गए हों, ताकि इंटेंट मैच न किए जा सकें. भले ही, जब कोई उपयोगकर्ता ऐसे वाक्य कहता है जो इंटेंट से मेल खाता है.
  • deleteHandler(): ऐसा तरीका जो अलग-अलग इंटेंट हैंडलर को बंद करता है उन इंटेंट का मिलान नहीं किया जा सकता.

इन एपीआई की मदद से, अलग-अलग आपकी इंटरैक्टिव कैनवस ऐक्शन की स्थिति. आपको इंटेंट पर expect() का इस्तेमाल करना होगा हैंडलर से कनेक्ट करने की ज़रूरत नहीं है.

इंटेंट हैंडलर चालू करें

इंटेंट हैंडलर को चालू करने की प्रोसेस दो चरणों में होती है. सबसे पहले, आपको इंटेंट चुनें. इसके बाद, इंटेंट को मैच करने लायक बनाने के लिए, आपको इंटेंट हैंडलर पर expect() को कॉल करें.

क्लाइंट-साइड पर इंटेंट हैंडलर को कॉन्फ़िगर और चालू करने के लिए, यह तरीका अपनाएं यह तरीका अपनाएं:

  1. Actions कंसोल में अपना प्रोजेक्ट खोलें और कस्टम इंटेंट जोड़ें.

  2. क्या यह ग्लोबल इंटेंट है? के लिए हां चुनें

  3. अपना इंटेंट कॉन्फ़िगर करें और सेव करें पर क्लिक करें.

  4. अपने वेब ऐप्लिकेशन लॉजिक में इंटेंट के लिए हैंडलर तय करें, जैसा कि इस स्निपेट में दिखाया गया है:

    /**
* Define handler for intent.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });

/**
* Define handler for intent with an argument.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    const numberOfPeople = matchedIntent.getIntentArg('numberOfPeople');
    console.log(`Intent match handler to reserve a table for ${number of people} was triggered!`);
  });

  5. इंटेंट हैंडलर को रजिस्टर करने के लिए, expect() तरीके को कॉल करें, जैसा कि स्निपेट:

    /**
* Define handler for intent and expect() it.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });
var handler = interactiveCanvas.expect(bookTableIntent);

इंटेंट हैंडलर बंद करें

इंटेंट हैंडलर तय करने के बाद, उसे चालू या बंद किया जा सकता है आपकी कार्रवाई के लिए ज़रूरत के हिसाब से इंटेंट. जब आप expect() पर कॉल करके, इंटेंट पर, यह deleteHandler() तरीके से एक ऑब्जेक्ट दिखाता है, जिसका इस्तेमाल नए बनाए गए हैंडलर को बंद करें. इंटेंट हैंडलर परिभाषा अगर इंटेंट फ़िलहाल ऐक्टिव नहीं है, तो की ज़रूरत नहीं है.

इंटेंट हैंडलर को बंद करने के लिए, इंटेंट हैंडलर पर deleteHandler() को कॉल करें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    
    // Delete the handler for `bookTableIntent`.
    handler.deleteHandler();

बंद किए गए इंटेंट हैंडलर को फिर से जोड़ने के लिए, expect() को कॉल किया जा सकता है, जैसा कि स्निपेट:

    // Re-add the `bookTableIntent` handler.
    handler = interactiveCanvas.expect(bookTableIntent);

इंटेंट को एक साथ बंद करने के लिए, clearExpectations() तरीके का इस्तेमाल किया जा सकता है. चालू किए गए सभी इंटेंट को बंद कर देता है. नीचे दिए गए स्निपेट में, सभी इंटेंट हैंडलर की उम्मीदों के बारे में साफ़ तौर पर बताएं:

interactiveCanvas.clearExpectations();

क्लाइंट के लिए स्लॉट भरने पर हैंडल करना

Actions Builder में, सीन में स्लॉट जोड़ने के बजाय, ये काम किए जा सकते हैं अपने वेब ऐप्लिकेशन में सीधे स्लॉट भरने पर उसे हैंडल करें.

क्लाइंट-साइड पर स्लॉट भरने के लिए, आपको पहले इसका इस्तेमाल करके स्लॉट बनाना होगा इनमें से कोई एक एपीआई:

  • createNumberSlot(callback, hints): आप इस तरीके की मदद से आपके वेब ऐप्लिकेशन कोड में नंबर स्लॉट की जानकारी दिखेगी. इसका इस्तेमाल उपयोगकर्ता को कोई नंबर मांगने के लिए किया जाता है.
  • createTextSlot(callback, hints): यह एक ऐसा तरीका है जो आपको टेक्स्ट तय करने की सुविधा देता है आपके वेब ऐप्लिकेशन कोड में स्लॉट बन सकता है. इसका इस्तेमाल किसी शब्द के लिए उपयोगकर्ता को प्रॉम्प्ट भेजने के लिए किया जाता है.
  • createConfirmationSlot(callback, hints): इस तरीके की मदद से, ये काम किए जा सकते हैं अपने वेब ऐप्लिकेशन कोड में पुष्टि करने का स्लॉट तय करें. इसका इस्तेमाल, लोगों को प्रॉम्प्ट भेजने के लिए किया जाता है पुष्टि के लिए (हां/नहीं).
  • createOptionsSlot(options, callback, hints): इस तरीके की मदद से, ये काम किए जा सकते हैं अपने वेब ऐप्लिकेशन कोड में विकल्प स्लॉट तय करें. इसका इस्तेमाल, लोगों को पहले से तय विकल्पों की सूची में से चुनें.

कोई स्लॉट बनाते समय, वैकल्पिक रूप से triggerHints तय किया जा सकता है, जो ऐसे कीवर्ड की मदद से जो आपकी भाषा की समझ (एनएलयू) सिस्टम को बेहतर बनाते हैं ऐक्शन. ये कीवर्ड छोटे शब्द होने चाहिए, जिन्हें उपयोगकर्ता तब कह सकता है जब स्लॉट भर रहे हैं. उदाहरण के लिए, नंबर स्लॉट के लिए triggerHints कीवर्ड यह हो सकता है years होना चाहिए. जब कोई उपयोगकर्ता बातचीत में अपनी उम्र से जुड़े सवाल का जवाब देता है "मैं तीस साल का हूँ" जवाब के साथ, आपकी कार्रवाई यह पहचान करने के लिए कि उपयोगकर्ता स्लॉट को सही तरीके से भर रहा है.

स्लॉट बनाने के बाद, prompt API का इस्तेमाल करके उपयोगकर्ता को स्लॉट डालने का अनुरोध किया जा सकता है:

  • prompt(tts, slot): एक ऐसा तरीका जो उपयोगकर्ता को टीटीएस का आउटपुट देगा, ताकि उन्हें अनुमानित स्लॉट भरने के लिए कहा जा सके.

prompt() को कॉल करने पर, भरा हुआ स्लॉट.

नंबर स्लॉट बनाएं

नंबर स्लॉट की मदद से, उपयोगकर्ता को किसी नंबर के लिए अनुरोध किया जा सकता है बातचीत. स्लॉट भरने के बारे में ज़्यादा जानकारी के लिए, देखें इसके स्लॉट भरने वाले सेक्शन कार्रवाइयां बनाने वाला दस्तावेज़.

उपयोगकर्ता को क्लाइंट-साइड पर नंबर स्लॉट भरने का अनुरोध करने के लिए, यह तरीका अपनाएं:

  1. अपने वेब में नंबर स्लॉट बनाने के लिए, createNumberSlot() तरीके को कॉल करें ऐप्लिकेशन का लॉजिक:

    /**
 * Create number slot.
 */
const triggerHints = { associatedWords: ['guess number', 'number'] };
const slot = interactiveCanvas.createNumberSlot(
  number => {
    console.log(`Number guessed: ${number}.`);
  }, triggerHints);

  2. उपयोगकर्ता को स्लॉट के लिए प्रॉम्प्ट देने के लिए, prompt() तरीके को कॉल करें और दिए गए प्रॉमिस से स्लॉट वैल्यू, जैसा कि इस स्निपेट में दिखाया गया है:

    const promptPromise = interactiveCanvas.prompt(
  { text: 'What number am I thinking of between 1 and 10?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 5, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

टेक्स्ट स्लॉट बनाएं

टेक्स्ट स्लॉट की मदद से आप उपयोगकर्ता को किसी शब्द के लिए प्रॉम्प्ट बातचीत. स्लॉट भरने के बारे में ज़्यादा जानकारी के लिए, देखें इसके स्लॉट भरने वाले सेक्शन कार्रवाइयां बनाने वाला दस्तावेज़.

उपयोगकर्ता को क्लाइंट-साइड पर कोई टेक्स्ट स्लॉट भरने का अनुरोध करने के लिए, यह तरीका अपनाएं:

  1. अपने वेब ऐप्लिकेशन लॉजिक में टेक्स्ट स्लॉट बनाने के लिए, createTextSlot() तरीके को कॉल करें:

    /**
 * Create text slot.
 */
const triggerHints = { associatedWords: ['favorite color', 'color'] };
const slot = interactiveCanvas.createTextSlot(
  text => {
    console.log(`Favorite color: ${text}.`);
  }, triggerHints);

  2. उपयोगकर्ता को स्लॉट के लिए प्रॉम्प्ट देने के लिए, prompt() तरीके को कॉल करें और दिए गए प्रॉमिस से स्लॉट वैल्यू, जैसा कि इस स्निपेट में दिखाया गया है:

    const promptPromise = interactiveCanvas.prompt(
  { text: 'What is your favorite color?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: "red", status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

पुष्टि करने का स्लॉट बनाएं

पुष्टि करने वाले स्लॉट की मदद से, उपयोगकर्ता से पुष्टि करने का अनुरोध किया जा सकता है (उपयोगकर्ता "हां" में जवाब दें या "नहीं" डालें). स्लॉट भरने के बारे में ज़्यादा जानकारी के लिए, देखें इसके स्लॉट भरने वाले सेक्शन कार्रवाइयां बनाने वाला दस्तावेज़.

उपयोगकर्ता से क्लाइंट-साइड पर पुष्टि करने वाला स्लॉट भरने का अनुरोध करने के लिए, यह तरीका अपनाएं यह तरीका अपनाएं:

  1. पुष्टि करने का स्लॉट बनाने के लिए, createConfirmationSlot() तरीके को कॉल करें आपके वेब ऐप्लिकेशन का लॉजिक:

    /**
 * Create confirmation slot (boolean).
 */
const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
const slot = interactiveCanvas.createConfirmationSlot(
  yesOrNo => {
    console.log(`Confirmation: ${yesOrNo}`);
  }, triggerHints);

  2. उपयोगकर्ता को स्लॉट के लिए प्रॉम्प्ट देने के लिए, prompt() तरीके को कॉल करें और दिए गए प्रॉमिस से स्लॉट वैल्यू, जैसा कि इस स्निपेट में दिखाया गया है:

    const promptPromise = interactiveCanvas.prompt(
  { text: 'Do you agree to the Terms of Service?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: true, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

विकल्प स्लॉट बनाएं

विकल्प स्लॉट की मदद से, उपयोगकर्ता को पहले से तय विकल्पों का इस्तेमाल करें. स्लॉट भरने के बारे में ज़्यादा जानकारी के लिए, देखें इसके स्लॉट भरने वाले सेक्शन कार्रवाइयां बनाने वाला दस्तावेज़.

उपयोगकर्ता को क्लाइंट-साइड पर विकल्प स्लॉट भरने का अनुरोध करने के लिए, यह तरीका अपनाएं:

  1. अपने खाते में विकल्प स्लॉट बनाने के लिए, createOptionsSlot() तरीके को कॉल करें वेब ऐप्लिकेशन का लॉजिक:

    /**
 * Create options slot (list selection).
 */
const triggerHints = { associatedWords: ['select fruit', 'choose fruit'] };
// Define selectable options
const options = [{
  key: 'apple',
  synonyms: ['apple', 'large apple', 'gala apple'],
}, {
  key: 'banana',
  synonyms: ['banana', 'green banana', 'plantain'],
}];
const slot = interactiveCanvas.createOptionsSlot(
  options,
  selectedOption => {
    console.log(`You have selected ${selectedOption} as your fruit.`);
  }, triggerHints);

  2. उपयोगकर्ता को स्लॉट के लिए प्रॉम्प्ट देने के लिए, prompt() तरीके को कॉल करें और दिए गए प्रॉमिस से स्लॉट वैल्यू, जैसा कि इस स्निपेट में दिखाया गया है:

    const promptPromise = interactiveCanvas.prompt(
  { text: 'Would you like a banana or an apple?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 'apple', status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

triggerScene()

triggerScene() एपीआई की मदद से, अपने क्लाइंट-साइड फ़ुलफ़िलमेंट की ओर से इंटरैक्टिव कैनवस ऐक्शन. के साथ triggerScene(), क्लाइंट-साइड फ़ुलफ़िलमेंट से सर्वर साइड पर भी स्विच किया जा सकता है ग्राहक को आइटम भेजना, जब उपयोगकर्ता को Actions Builder में सिस्टम सीन वेबहुक की ज़रूरत होती है. उदाहरण के लिए, triggerScene()को तब कॉल किया जा सकता है, जब कोई उपयोगकर्ता अपना खाता लिंक करने या सूचनाएं पाने की ज़रूरत है; तो आप यहां से वापस आ सकते हैं उस सीन को Canvas प्रॉम्प्ट के साथ क्लाइंट-साइड फ़ुलफ़िलमेंट से जोड़ें.

नीचे दिया गया स्निपेट आपकी कार्रवाई में triggerScene() को लागू करने का तरीका दिखाता है:

interactiveCanvas.triggerScene('SceneName').then((status) => {
  console.log("sent the request to trigger scene.");
}).catch(e => {
  console.log("Failed to trigger a scene.");
})

होम और उपयोगकर्ता के लिए, क्लाइंट का स्टोरेज

होम और उपयोगकर्ता के स्टोरेज की वैल्यू पाने और सेट करने के लिए, वेबहुक का इस्तेमाल करने के बजाय, ये काम किए जा सकते हैं अपने वेब ऐप्लिकेशन में होम और उपयोगकर्ता स्टोरेज मैनेज करने के लिए, क्लाइंट-साइड एपीआई को कॉल करें. आपका वेब तो ऐप्लिकेशन इन सेव की गई वैल्यू का इस्तेमाल कई सेशन में कर सकता है (उदाहरण के लिए, प्रॉम्प्ट और शर्तें), और किसी खास परिवार के लिए तय की गई वैल्यू ऐक्सेस कर सकते हैं या उपयोगकर्ता को ज़रूरत के समय. इन एपीआई का इस्तेमाल करने पर, आपके इंटरैक्टिव कैनवस में इंतज़ार के समय को कम किया जा सकता है कार्रवाई इसलिए की गई, क्योंकि सेट करने और पाने के लिए अब आपको वेबहुक को कॉल करने की ज़रूरत नहीं है स्टोरेज वैल्यू.

वेब ऐप्लिकेशन में होम और उपयोगकर्ता का स्टोरेज उन सामान्य नियमों का पालन करता है जो जगह तय करें. होम और उपयोगकर्ता के स्टोरेज के बारे में ज़्यादा जानने के लिए, यहां जाएं होम स्टोरेज के दस्तावेज़ और उपयोगकर्ता के लिए स्टोरेज.

क्लाइंट-साइड होम स्टोरेज

होम स्टोरेज की मदद से, घर के उपयोगकर्ताओं के लिए वैल्यू सेव की जा सकती हैं. ऐसा इन के आधार पर किया जाता है होम ग्राफ़ बनाया गया है. साथ ही, इसे सभी सेशन में शामिल हो सकते हैं. उदाहरण के लिए, अगर कोई उपयोगकर्ता इंटरैक्टिव कैनवस चलाता है ऐसे लोग जो परिवार के सदस्यों के साथ शेयर किए गए हैं, उनके स्कोर को होम के स्टोरेज में सेव किया जा सकता है और घर के दूसरे सदस्य स्टोर किए गए स्कोर के साथ गेम खेलना जारी रख सकते हैं.

होम स्टोरेज के साथ काम करने के लिए, ऐक्शन को चालू करने के लिए, यह तरीका अपनाएं:

  1. Actions कंसोल में, Deploy > डायरेक्ट्री की जानकारी > ज़्यादा जानकारी.

  2. क्या आपकी कार्रवाइयां, होम स्टोरेज का इस्तेमाल करती हैं? के लिए हां बॉक्स को चुनें

अपने वेब ऐप्लिकेशन में होम स्टोरेज की वैल्यू को लिखने के लिए, setHomeParam() पर कॉल करें तरीका, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

interactiveCanvas.setHomeParam('familySize',  10).then(
      result => {
        console.log('Set home param success');
      },
      fail => {
        console.error(err);
      });

अपने वेब ऐप्लिकेशन में होम स्टोरेज से मिली वैल्यू पढ़ने के लिए, getHomeParam() पर कॉल करें तरीका, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

interactiveCanvas.getHomeParam('familySize').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

होम का मौजूदा स्टोरेज खाली करने के लिए, resetHomeParam() तरीके को कॉल करें, जैसा कि दिखाया गया है स्निपेट में:

interactiveCanvas.resetHomeParam();

क्लाइंट-साइड उपयोगकर्ता स्टोरेज

उपयोगकर्ता स्टोरेज की मदद से, पुष्टि किए गए किसी खास उपयोगकर्ता के लिए पैरामीटर वैल्यू स्टोर की जा सकती हैं को ट्रैक किया जा सकता है. उदाहरण के लिए, यदि कोई उपयोगकर्ता कोई गेम खेल रहा है, तो तो गेम को उस उपयोगकर्ता के लिए सेव किया जा सकता है. उसके बाद के गेमप्ले सेशन में, उपयोगकर्ता उतने ही स्कोर के साथ गेम खेलना जारी रख सकें.

अपने वेब ऐप्लिकेशन में उपयोगकर्ता के स्टोरेज में वैल्यू लिखने के लिए, setUserParam() को कॉल करें तरीका, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

interactiveCanvas.setUserParam('color',  'blue').then(
      result => {
        console.log('Set user param success');
      },
      err => {
        console.error(err);
      });

अपने वेब ऐप्लिकेशन में उपयोगकर्ता के स्टोरेज से मिली वैल्यू पढ़ने के लिए, getUserParam() को कॉल करें तरीका, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

interactiveCanvas.getUserParam('color').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

सभी मौजूदा उपयोगकर्ता स्टोरेज खाली करने के लिए, resetUserParam() तरीके को कॉल करें, जैसा कि दिखाया गया है स्निपेट में:

interactiveCanvas.resetUserParam();

setCanvasState()

setCanvasState() तरीका आपको अपने इंटरैक्टिव विज्ञापन से राज्य का डेटा भेजने की अनुमति देता है Canvas वेब ऐप्लिकेशन को आपका ऑर्डर पूरा करने के लिए कहेगा. साथ ही, Assistant को यह सूचना देता है कि वेब ऐप्लिकेशन उसकी स्थिति अपडेट की गई. वेब ऐप्लिकेशन, अपनी अपडेट की गई स्थिति को JSON ऑब्जेक्ट के तौर पर भेजता है.

setCanvasState() को कॉल करने से इंटेंट नहीं आता है. इस तारीख के बाद setCanvasState() को शुरू करना, अगर sendTextQuery() शुरू हो गया है या उपयोगकर्ता की क्वेरी बातचीत में मौजूद किसी इंटेंट से मैच करता है, यानी वह डेटा जो setCanvasState() के साथ सेट किया गया था तो, वह भी इसके बाद के सभी मोड़ पर उपलब्ध बातचीत.

नीचे दिए गए स्निपेट में, वेब ऐप्लिकेशन setCanvasState() का इस्तेमाल करके कैनवस स्थिति सेट करता है डेटा:

JavaScript

this.action.canvas.setCanvasState({ score: 150 })

वेबहुक से, कैनवस की स्थिति का रेफ़रंस दें

फ़ुलफ़िलमेंट कोड में, सेव किए गए कैनवस की स्थिति की वैल्यू का रेफ़रंस दिया जा सकता है. संदर्भ के लिए वैल्यू में, conv.context.canvas.state.KEY सिंटैक्स का इस्तेमाल करें, जहां कैनवस स्टेट वैल्यू सेट करते समय दी गई कुंजी KEY होती है.

उदाहरण के लिए, अगर आपने पहले किसी गेम के लिए सबसे ज़्यादा स्कोर की वैल्यू कैनवस में सेव की थी पैरामीटर score के रूप में बताएं, कार्रवाई में उस वैल्यू को ऐक्सेस करने के लिए conv.context.canvas.state.score:

Node.js

app.handle('webhook-name', conv => {
    console.log(conv.context.canvas.state.score);
})

प्रॉम्प्ट में रेफ़रंस कैनवस की स्थिति

प्रॉम्प्ट में, सेव किए गए कैनवस की स्थिति की वैल्यू का रेफ़रंस दिया जा सकता है. संदर्भ के लिए वैल्यू में, $canvas.state.KEY सिंटैक्स का इस्तेमाल करें, जहां कैनवस स्टेट वैल्यू सेट करते समय दी गई कुंजी KEY होती है.

उदाहरण के लिए, अगर आपने पहले किसी गेम के लिए सबसे ज़्यादा स्कोर की वैल्यू कैनवस में सेव की थी पैरामीटर score के रूप में बताएं, $canvas.state.score का इस्तेमाल करके उस मान का संदर्भ दें प्रॉम्प्ट में उस वैल्यू को ऐक्सेस करने के लिए:

JSON

{
  "candidates": [{
    "first_simple": {
      "variants": [{
        "speech": "Your high score is $canvas.state.score."
      }]
    }
  }]
}

शर्तों के अंदर संदर्भ कैनवस

सेव की गई कैनवस की स्थिति की वैल्यू को शर्तों में भी देखा जा सकता है. यहां की यात्रा पर हूं इस वैल्यू का रेफ़रंस देने के लिए, canvas.state.KEY का इस्तेमाल करें सिंटैक्स, जहां कैनवस प्रिंट करते समय KEY कुंजी दी जाती है राज्य का मान सेट किया गया.

उदाहरण के लिए, अगर आपने पहले किसी गेम के लिए सबसे ज़्यादा स्कोर की वैल्यू कैनवस में सेव की थी पैरामीटर score के रूप में बताता है और इसकी तुलना999 शर्त है, तो आप इसका इस्तेमाल करके अपनी शर्त में स्टोर वैल्यू का रेफ़रंस दे सकते हैं canvas.state.score. आपका कंडीशन एक्सप्रेशन ऐसा दिखता है:

शर्त का सिंटैक्स

canvas.state.score >= 999

sendTextQuery()

sendTextQuery() वाला तरीका, बातचीत वाली कार्रवाई को टेक्स्ट क्वेरी भेजता है प्रोग्रामेटिक रूप से किसी इंटेंट से मैच करता है. यह सैंपल, रीस्टार्ट करने के लिए sendTextQuery() का इस्तेमाल करता है जब उपयोगकर्ता किसी बटन पर क्लिक करता है, तो तीर के ऊपर-नीचे चलने वाले गेम. जब उपयोगकर्ता क्लिक करता है "गेम फिर से शुरू करें" बटन, sendTextQuery() एक टेक्स्ट क्वेरी भेजता है Restart game इंटेंट से मैच करता है और प्रॉमिस देता है. इस वादे का नतीजा अगर इंटेंट ट्रिगर होता है, तो SUCCESS और अगर ऐसा नहीं है, तो BLOCKED. नीचे दिए गए स्निपेट इंटेंट से मेल खाता है और प्रॉमिस:

JavaScript

…
/**
* Handle game restarts
*/
async handleRestartGame() {
    console.log(`Request in flight`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
    const res = await this.action.canvas.sendTextQuery('Restart game');
    if (res.toUpperCase() !== 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        return;
    }
    console.log(`Request in flight: ${res}`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
}
…

अगर प्रॉमिस का नतीजा SUCCESS में आता है, तो Restart game वेबहुक हैंडलर आपके वेब ऐप्लिकेशन पर Canvas जवाब:

JavaScript

…
app.handle('restart', conv => {
  conv.add(new Canvas({
    data: {
      command: 'RESTART_GAME'
    }
  }));
});
…

यह Canvas रिस्पॉन्स onUpdate() कॉलबैक को ट्रिगर करता है, जो नीचे RESTART_GAME कोड स्निपेट में कोड दिया गया है:

JavaScript

…
RESTART_GAME: (data) => {
    this.scene.button.texture = this.scene.button.textureButton;
    this.scene.sprite.spin = true;
    this.scene.sprite.tint = 0x00FF00; // green
    this.scene.sprite.rotation = 0;
},
…

सर्वर साइड फ़ुलफ़िलमेंट की मदद से बनाएं

अपने वेबहुक में, इस इंटरैक्टिव कैनवस एपीआई को लागू किया जा सकता है:

फ़ुल-स्क्रीन मोड चालू करना

डिफ़ॉल्ट रूप से, इंटरैक्टिव कैनवस वेब ऐप्लिकेशन में हेडर शामिल होता है स्क्रीन के सबसे ऊपरी हिस्से पर, अपनी सेट की गई कार्रवाई के नाम के साथ. enableFullScreen का इस्तेमाल किया जा सकता है हेडर को हटाने और उसे अस्थायी टोस्ट से बदलने के लिए, स्क्रीन लोड हो रही है. इससे उपयोगकर्ता को फ़ुल-स्क्रीन पर वीडियो देखने का अनुभव मिलता है ऐक्शन के साथ इंटरैक्ट करते समय इनका इस्तेमाल करें. टोस्ट मैसेज में ऐक्शन का डिसप्ले दिखाया गया है नाम, डेवलपर का नाम, और Action से बाहर निकलने के लिए निर्देश, और टोस्ट उपयोगकर्ता अपने डिवाइस पर थीम के तौर पर जो चुनता है उसके आधार पर रंग बदलता है.

पहली इमेज. किसी कार्रवाई के लिए, लोड होने वाली स्क्रीन पर दिख रहा टोस्ट मैसेज.

अगर कोई उपयोगकर्ता आपकी सेट की गई कार्रवाई के साथ अक्सर इंटरैक्ट करता है, तो टोस्ट मैसेज कुछ समय के लिए दिखता है लोड होने वाली स्क्रीन पर नहीं दिखेगा. अगर उपयोगकर्ता आपकी कार्रवाई को लॉन्च करने पर, कुछ समय के लिए टोस्ट मैसेज फिर से दिख सकता है.

अपने वेबहुक में या स्टैटिक प्रॉम्प्ट का इस्तेमाल करके, फ़ुल-स्क्रीन मोड को चालू किया जा सकता है ऐक्शन बिल्डर.

अपने वेबहुक में फ़ुल-स्क्रीन मोड चालू करने के लिए, यह तरीका अपनाएं:

  1. पहले canvas जवाब में enableFullScreen फ़ील्ड को true पर सेट करें किसी सेशन में वेबहुक से दिखाया गया. यहां दिया गया स्निपेट एक उदाहरण है Node.js क्लाइंट लाइब्रेरी का इस्तेमाल करके लागू करें:

     const { conversation, Canvas } = require('@assistant/conversation');
 const functions = require('firebase-functions');

 const app = conversation();

 app.handle('invocation_fullscreen', conv => {
   conv.add(new Canvas(
     {
       url: 'https://example-url.com',
       enableFullScreen: true
     }));
 });

 exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

Actions Builder में, स्टैटिक प्रॉम्प्ट में फ़ुल-स्क्रीन मोड चालू करने के लिए, यह तरीका अपनाएं:

  1. कार्रवाइयां कंसोल में अपना प्रोजेक्ट खोलें.
  2. नेविगेशन बार में, डेवलप करें पर क्लिक करें. इसके बाद, वह प्रॉम्प्ट खोलें जिसमें पहला canvas जवाब.

  3. enable_full_screen को true पर सेट करें, जैसा कि इस स्निपेट में दिखाया गया है:

     {
  "candidates": [
    {
      "canvas": {
        "url": "https://example-url.com",
        "enable_full_screen": true
      }
    }
  ]
}

continueTtsDuringTouch

डिफ़ॉल्ट रूप से, जब कोई उपयोगकर्ता इंटरैक्टिव कैनवस का इस्तेमाल करते समय स्क्रीन पर टैप करता है कार्रवाई करने पर, TTS चलना बंद हो जाता है. खेलना जारी रखने के लिए, टीटीएस की सुविधा चालू की जा सकती है जब उपयोगकर्ता continueTtsDuringTouch की मदद से स्क्रीन को छूते हैं. यह व्यवहार नहीं किया जा सकता को एक ही सेशन में चालू और बंद किया जाना चाहिए.

इस व्यवहार को अपने वेबहुक या स्टैटिक प्रॉम्प्ट में लागू किया जा सकता है कार्रवाइयां बिल्डर में.

अगर आप चाहते हैं कि उपयोगकर्ता आपके वेबहुक में स्क्रीन पर टैप करे, तो टीटीएस की सुविधा चालू हो जाए. इसके लिए, यह चरण:

  • पहले canvas जवाब में continueTtsDuringTouch फ़ील्ड को true पर सेट करें किसी सेशन में वेबहुक से दिखाया गया. यहां दिया गया स्निपेट एक उदाहरण है Node.js क्लाइंट लाइब्रेरी का इस्तेमाल करके लागू करें:

    const { conversation, Canvas } = require('@assisant/conversation');
const functions = require('firebase-functions');

const app = conversation();

app.handle('intent-name', conv => {
  conv.add(new Canvas(
    {
      url: 'https://example-url.com',
      continueTtsDuringTouch: true
    }));
});

exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

इससे उपयोगकर्ता के स्टैटिक प्रॉम्प्ट में स्क्रीन पर टैप करने के बाद भी टीटीएस की सुविधा चालू की जा सकती है ऐक्शन बिल्डर, यह तरीका अपनाएं:

  1. कार्रवाइयां कंसोल में अपना प्रोजेक्ट खोलें.
  2. नेविगेशन बार में, डेवलप करें पर क्लिक करें और शामिल की गई पहला canvas जवाब.

  3. continue_tts_during_touch को true पर सेट करें, जैसा कि इस स्निपेट में दिखाया गया है:

      {
   "candidates": [
     {
       "canvas": {
         "url": "https://example-url.com",
         "continue_tts_during_touch": true
       }
     }
   ]
 }