Kontynuuj tworzenie po stronie klienta lub serwera

Po zapoznaniu się z podstawowymi informacjami możesz ulepszyć działanie i dostosować je do metod używanych w Canvas. Podczas tworzenia projektu Actions możesz wybrać działanie, korzystając z modelu realizacji zamówień klienta lub modelu realizacji po stronie serwera. Więcej informacji o tych opcjach znajdziesz w artykule Włączanie interaktywnego obszaru roboczego.

Jeśli wybierzesz opcję modelu realizacji zamówień, możesz używać w działaniu tych działań:

• wszystkie interfejsy API wymienione w sekcji Build with side-customer fulfillment (Realizacja w ramach realizacji po stronie klienta).

• Wszystkie interfejsy API wymienione w obszarze Kompilacja przy realizacji po stronie serwera

• Wywołanie zwrotne onTtsMark()

Jeśli wybierzesz opcję modelu realizacji zamówień, możesz używać w działaniu tych danych:

• Wszystkie interfejsy API wymienione w obszarze Kompilacja przy realizacji po stronie serwera
• Wywołania zwrotne

Niektóre interfejsy Interactive Canvas API nie są zalecane do użytku z konkretnym modelem realizacji. W tabeli poniżej znajdziesz interfejsy API włączone po wybraniu opcji realizacji zamówień klienta oraz wskazujemy, czy są one zalecane czy niezalecane w przypadku każdego modelu:

Z tych sekcji dowiesz się, jak zaimplementować interfejsy API do realizacji modeli po stronie klienta i po stronie serwera w interaktywnym obszarze roboczym.

Kompilowanie przy realizacji zamówień po stronie klienta

W logice aplikacji internetowej możesz zaimplementować te interaktywne interfejsy API Canvas:

outputTts()

Ten interfejs API umożliwia generowanie tekstu na mowę (TTS) z urządzenia bez wysyłania statycznego monitu z Kreatora działań ani wywoływania webhooka. Jeśli nie jest wymagana logika po stronie serwera powiązana z TTS, możesz użyć outputTts() po stronie klienta, aby pominąć podróż do serwera i szybciej uzyskać odpowiedź.

Po stronie klienta outputTts()może przerywać lub anulować zamianę tekstu na mowę po stronie serwera. Aby uniknąć przerywania przetwarzania po stronie serwera, wykonaj te czynności:

• Unikaj wywoływania funkcji outputTts() na początku sesji. Zamiast tego użyj funkcji zamiany tekstu na mowę po stronie serwera w pierwszym akcie konwersacyjnym akcji.
• Staraj się nie wywoływać kolejno kolejnych outputTts() bez działania ze strony użytkownika.

Ten fragment kodu pokazuje, jak używać polecenia outputTts() do generowania tekstu TTS po stronie klienta:

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

Możesz też użyć outputTts() i onTtsMark(), aby umieścić znaczniki SSML w sekwencji tekstu. Użycie onTtsMark() powoduje synchronizację animacji lub stanu gry w aplikacjach internetowych w określonych momentach ciągu SSML TTS, jak pokazano w tym fragmencie:

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

W poprzednim przykładzie 2 znaczniki dostosowujące odpowiedź są wysyłane do aplikacji internetowej za pomocą zamiany tekstu na mowę.

Obsługa realizacji intencji klienta

W modelu realizacji serwera dla funkcji Interactive Canvas wszystkie intencje muszą być obsługiwane przez webhooka, co zwiększa czas oczekiwania na działanie. Zamiast wywoływać webhooka, możesz obsłużyć realizację intencji w aplikacji internetowej.

Aby zarządzać intencjami po stronie klienta, możesz używać tych interfejsów API:

• createIntentHandler(): metoda umożliwiająca definiowanie modułów obsługi intencji w kodzie aplikacji internetowej na potrzeby intencji niestandardowych zdefiniowanych w Kreatorze działań.
• expect(): metoda, która aktywuje lub rejestruje moduł obsługi intencji, aby użytkownik mógł dopasować intencję.
• clearExpectations(): metoda, która usuwa oczekiwania w przypadku wszystkich obecnie aktywowanych intencji, dzięki czemu nie można ich dopasować, nawet jeśli użytkownik wypowie intencję pasującą do intencji.
• deleteHandler(): metoda, która wyłącza poszczególne moduły obsługi intencji, aby nie można było dopasować tych intencji.

Za pomocą tych interfejsów API możesz selektywnie aktywować lub wyłączać intencje dla różnych stanów interaktywnego obszaru roboczego. Aby aktywować te intencje, musisz użyć expect() w modułach obsługi intencji.

Aktywuj moduły obsługi intencji

Aktywowanie modułu obsługi intencji to proces dwuetapowy. Najpierw musisz określić intencję w Kreatorze działań. Aby następnie dopasować intencję, musisz wywołać expect() w module intencji.

Aby skonfigurować i aktywować moduł obsługi intencji po stronie klienta, wykonaj te czynności:

1. Otwórz projekt w konsoli Actions i dodaj Intencję niestandardową.

2. W odpowiedzi na pytanie Czy to zamiar globalny? wybierz Tak.

3. Skonfiguruj intencję i kliknij Zapisz.

4. Zdefiniuj moduł obsługi intencji w logice aplikacji internetowej w sposób podany w tym fragmencie kodu:

   /**
   * 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. Wywołaj metodę expect(), aby zarejestrować moduł obsługi intencji, jak pokazano w tym fragmencie:

   /**
   * 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);
   

Wyłącz moduły obsługi intencji

Po zdefiniowaniu modułu obsługi intencji możesz go aktywować lub dezaktywować w razie potrzeby dla swojego działania. Gdy wywołujesz expect(), aby aktywować intencję, zwraca obiekt z metodą deleteHandler(), której możesz użyć do wyłączenia nowo utworzonego modułu obsługi. Definicja modułu obsługi intencji jest kontynuowana, nawet jeśli intencja jest obecnie nieaktywna. W razie potrzeby możesz go ponownie aktywować.

Aby wyłączyć moduł obsługi intencji, wywołaj metodę deleteHandler() w module intencji, jak pokazano w tym fragmencie kodu:

    /**
    * 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();
    

Możesz wywołać expect(), aby ponownie dodać wyłączony moduł obsługi intencji, jak pokazano w tym fragmencie:

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

Aby zbiorczo wyłączyć intencje, możesz użyć metody clearExpectations(), która wyłącza wszystkie obecnie aktywowane intencje. Ten fragment zawiera informacje o wyjaśnieniu oczekiwań wszystkich modułów obsługi intencji:

interactiveCanvas.clearExpectations();

Obsługa wypełnienia boksu przez klienta

Zamiast dodawać wypełnianie boksów do sceny w Kreatorze działań, możesz je obsługiwać bezpośrednio w aplikacji internetowej.

Aby obsługiwać wypełnianie przedziałów po stronie klienta, musisz najpierw utworzyć boks przy użyciu jednego z tych interfejsów API:

• createNumberSlot(callback, hints): metoda umożliwiająca zdefiniowanie boksu liczbowego w kodzie aplikacji internetowej. Służy do podawania użytkownikowi numeru.
• createTextSlot(callback, hints): metoda umożliwiająca zdefiniowanie boksu tekstowego w kodzie aplikacji internetowej. Służy do proszenia użytkownika o słowo.
• createConfirmationSlot(callback, hints): metoda umożliwiająca zdefiniowanie przedziału potwierdzenia w kodzie aplikacji internetowej. Służy do proszenia użytkownika o potwierdzenie (tak/nie).
• createOptionsSlot(options, callback, hints): metoda umożliwiająca zdefiniowanie boksu opcji w kodzie aplikacji internetowej. Służy do zachęcania użytkowników do wybrania opcji z listy wstępnie zdefiniowanych.

Podczas tworzenia boksu możesz opcjonalnie zdefiniować triggerHints, czyli słowa kluczowe, które ulepszają system rozpoznawania języka naturalnego (NLU) dla Twojego działania. Te słowa kluczowe powinny być krótkimi słowami, które użytkownik może przekazać podczas wypełniania boksu. Na przykład słowo kluczowe triggerHints w boksie reklamowym może mieć postać years. Jeśli użytkownik odpowie na pytanie o swój wiek w rozmowie z odpowiedzią „Mam trzydzieści lat”, Twoje działanie częściej rozpoznaje, że użytkownik prawidłowo wypełnia boks.

Po utworzeniu boksu możesz poprosić użytkownika o przedział, używając interfejsu API prompt:

• prompt(tts, slot): metoda, która zwraca TTS do użytkownika i pyta go o wypełnienie oczekiwanego boksu.

Wywołanie prompt() zwraca obietnicę stanu i wartości wypełnionego boksu.

Utwórz przedział liczb

Gniazdo numer umożliwia użytkownikowi wyświetlenie prośby o podanie numeru podczas rozmowy. Więcej informacji o wypełnianiu boksów znajdziesz w sekcji Wypełnianie boksów w dokumentacji Actions Actions.

Aby poprosić użytkownika o wpisanie boksu liczbowego po stronie klienta, wykonaj te czynności:

1. Wywołaj metodę createNumberSlot(), aby utworzyć boks liczbowy w logice aplikacji internetowej:

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

2. Wywołaj metodę prompt(), aby wyświetlić użytkownikowi żądanie dotyczące przedziału i zastosuj wartość boksu w zwróconej obietnicy, jak pokazano w tym fragmencie:

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

Utwórz boks tekstowy

Gniazdo tekstowe umożliwia wyświetlenie prośby o słowo w trakcie rozmowy. Więcej informacji o wypełnianiu boksów znajdziesz w sekcji Wypełnianie boksów w dokumentacji Actions Actions.

Aby poprosić użytkownika o wypełnienie boksu tekstowego po stronie klienta, wykonaj te czynności:

1. Wywołaj metodę createTextSlot(), aby utworzyć boks tekstowy w logice aplikacji internetowej:

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

2. Wywołaj metodę prompt(), aby wyświetlić użytkownikowi żądanie dotyczące przedziału i zastosuj wartość boksu w zwróconej obietnicy, jak pokazano w tym fragmencie:

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

Utwórz przedział potwierdzenia

Przedział potwierdzenia umożliwia wyświetlenie prośby o potwierdzenie (użytkownik może odpowiedzieć „Tak” lub „Nie”, aby wypełnić przedział). Więcej informacji o wypełnianiu boksów znajdziesz w sekcji Wypełnianie boksów w dokumentacji Actions Actions.

Aby poprosić użytkownika o wpisanie boksu potwierdzenia po stronie klienta, wykonaj te czynności:

1. Wywołaj metodę createConfirmationSlot(), aby utworzyć boks potwierdzenia w logice aplikacji internetowej:

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

2. Wywołaj metodę prompt(), aby wyświetlić użytkownikowi żądanie dotyczące przedziału i zastosuj wartość boksu w zwróconej obietnicy, jak pokazano w tym fragmencie:

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

Utwórz przedział opcji

Gniazdo opcji pozwala poprosić użytkownika o wybranie opcji z listy wstępnie zdefiniowanych. Więcej informacji o wypełnianiu boksów znajdziesz w sekcji Wypełnianie boksów w dokumentacji Actions Actions.

Aby poprosić użytkownika o wypełnienie boksu opcji po stronie klienta, wykonaj te czynności:

1. Wywołaj metodę createOptionsSlot(), aby utworzyć boks opcji w logice aplikacji internetowej:

   /**
    * 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. Wywołaj metodę prompt(), aby wyświetlić użytkownikowi żądanie dotyczące przedziału i zastosuj wartość boksu w zwróconej obietnicy, jak pokazano w tym fragmencie:

   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()

Interfejs triggerScene() API umożliwia przejście do innego punktu akcji w interaktywnym obszarze roboczym z realizacji po stronie klienta. Za pomocą triggerScene() możesz też przejść z realizacji po stronie klienta na realizację po stronie serwera, gdy użytkownik musi uzyskać dostęp do sceny systemowej w Actions Builder, która wymaga webhooka. Możesz na przykład wywołać triggerScene(), gdy użytkownik będzie musiał połączyć swoje konto lub otrzymywać powiadomienia, a potem wrócić do realizacji po stronie klienta za pomocą polecenia Canvas.

Ten fragment kodu pokazuje, jak wdrożyć triggerScene() do akcji:

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

Dom i miejsce na dane użytkownika

Zamiast używać webhooka do pobierania i ustawiania wartości miejsca na dane dla domu i użytkownika, możesz wywoływać interfejsy API po stronie klienta, aby zarządzać pamięcią domową i dla użytkownika w swojej aplikacji internetowej. Aplikacja może następnie używać tych przechowywanych wartości w wielu sesjach (na przykład w podpowiedziach i warunkach), a w razie potrzeby może uzyskiwać dostęp do określonego numeru domu lub użytkownika. Używanie tych interfejsów API może zmniejszyć czas oczekiwania na interaktywne działanie obszaru roboczego, ponieważ nie trzeba już wywoływać webhooka, aby pobrać i ustawić wartości miejsca na dane.

Przechowywanie danych w domu i użytkowników w aplikacji jest takie samo jak przechowywanie danych w webhooku. Więcej informacji na temat przechowywania w domu i na kontach użytkowników znajdziesz w dokumentacji dotyczącej pamięci domowej i pamięci użytkownika.

Miejsce na dane po stronie klienta

Pamięć domowa umożliwia przechowywanie wartości dla domowników na podstawie wykresu domowego i jest używana przez wszystkie sesje w tym domu. Jeśli na przykład użytkownik gra w interaktywną grę Canvas w domu, wynik gry można zapisać w pamięci domowej, a inni domownicy mogą nadal grać w nią z zachowanym wynikiem.

Aby umożliwić Akcji działanie obsługi pamięci domowej, wykonaj te czynności:

1. W konsoli Actions kliknij Deploy > Directory information > More Information (Wdróż > Informacje o katalogu > Dodatkowe informacje).

2. Zaznacz pole Tak w sekcji Czy Akcje korzystają z pamięci domowej?

   

Aby zapisać wartość w pamięci masowej w aplikacji internetowej, wywołaj metodę setHomeParam(), jak w tym fragmencie:

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

Aby odczytać w aplikacji internetowej wartość z pamięci domowej, wywołaj metodę getHomeParam(), jak pokazano w tym fragmencie kodu:

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

Aby usunąć całe istniejące miejsce na dane w domu, wywołaj metodę resetHomeParam() zgodnie z tym fragmentem:

interactiveCanvas.resetHomeParam();

Miejsce na dane po stronie klienta

Pamięć użytkownika umożliwia przechowywanie wartości parametrów określonego, zweryfikowanego użytkownika w wielu sesjach. Jeśli np. użytkownik gra w grę, wynik może zostać zapisany dla tego użytkownika. W kolejnej sesji użytkownik może kontynuować grę z takim samym wynikiem.

Aby zapisać wartość w pamięci użytkownika w aplikacji internetowej, wywołaj metodę setUserParam() zgodnie z tym fragmentem:

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

Aby odczytać wartość z pamięci użytkownika w aplikacji internetowej, wywołaj metodę getUserParam() zgodnie z tym fragmentem:

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

Aby wyczyścić całe istniejące miejsce na dane użytkownika, wywołaj metodę resetUserParam() zgodnie z tym fragmentem:

interactiveCanvas.resetUserParam();

setCanvasState()

Metoda setCanvasState() pozwala wysyłać dane o stanie ze swojej interaktywnej aplikacji internetowej Canvas do realizacji zamówienia i powiadamia Asystenta, że aplikacja internetowa zaktualizowała stan. Aplikacja internetowa wysyła zaktualizowany stan jako obiekt JSON.

Wywołanie setCanvasState() nie wywołuje intencji. Po wywołaniu elementu setCanvasState(), jeśli funkcja sendTextQuery() jest wywołana lub zapytanie użytkownika pasuje do zamiaru w rozmowie, dane ustawione za pomocą typu setCanvasState() w poprzednim wątku konwersacyjnym są dostępne w następnych rotacjach wątku.

W tym fragmencie kodu aplikacja internetowa używa setCanvasState() do ustawienia danych stanu Canvas:

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

Odwołanie do stanu obszaru roboczego z webhooka

Zapisane wartości stanu Canvas możesz znaleźć w kodzie realizacji. Aby odwołać się do tej wartości, użyj składni conv.context.canvas.state.KEY, gdzie KEY to klucz podany, gdy ustawiona jest wartość stanu obszaru roboczego.

Jeśli na przykład wcześniej zapisałeś wartość wyniku dla gry w obszarze roboczym jako parametr score, odwołaj się do tej wartości za pomocą conv.context.canvas.state.score, by uzyskać dostęp do tej wartości podczas realizacji:

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

Odwołanie do stanu obszaru roboczego w komunikatach

Odwołanie do przechowywanych wartości stanu Canvas może pojawić się w wierszu poleceń. Aby odwołać się do tej wartości, użyj składni $canvas.state.KEY, gdzie KEY to klucz podany, gdy ustawiona jest wartość stanu obszaru roboczego.

Jeśli na przykład wcześniej zapisałeś wartość wyniku dla gry w obszarze roboczym jako parametr score, odwołaj się do tej wartości, używając $canvas.state.score, by uzyskać dostęp do tej wartości w wierszu poleceń:

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

Odwołanie do stanu obszaru roboczego w warunkach

Możesz też odwoływać się do przechowywanych wartości stanu Canvas. Aby odwołać się do tej wartości, użyj składni canvas.state.KEY, gdzie KEY jest kluczem podanym jako wartość stanu Canvas.

Jeśli na przykład wcześniej zapisałeś w Canvas wartość wyniku gry w postaci parametru score i chcesz porównać go z wartością 999 w warunku, możesz odwoływać się do wartości przechowywanej w warunku za pomocą właściwości canvas.state.score. Wyrażenie warunku wygląda tak:

canvas.state.score >= 999
    

sendTextQuery()

Metoda sendTextQuery() wysyła zapytania tekstowe do czynności konwersacyjnej, aby automatycznie dopasować je do intencji. W tym przykładzie sendTextQuery() uruchamia ponownie grę w trakcie obracania trójkąta, gdy użytkownik kliknie przycisk. Gdy użytkownik klika przycisk „Uruchom ponownie grę”, sendTextQuery() wysyła zapytanie tekstowe pasujące do intencji Restart game i zwraca obietnicę. Ta obietnica zwraca SUCCESS, jeśli intencja zostanie wywołana, i BLOCKED, jeśli nie. Następujący fragment pasuje do intencji i obsługuje przypadki sukcesu i niepowodzenia:

…
/**
* 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;
}
…
    

Jeśli obietnica kończy się wynikiem SUCCESS, moduł obsługi webhooka Restart game wysyła odpowiedź Canvas do Twojej aplikacji internetowej:

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

Ta odpowiedź Canvas uruchamia wywołanie zwrotne onUpdate(), które wykonuje kod w poniższym fragmencie kodu RESTART_GAME:

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

Kompilacja przy realizacji po stronie serwera

W webhooku możesz zaimplementować te interaktywne interfejsy API Canvas:

Włącz tryb pełnoekranowy

Domyślnie interaktywne aplikacje internetowe obszaru roboczego zawierają nagłówek z nazwą akcji. Aby usunąć nagłówek i zastąpić go tymczasowym komunikatem wyświetlanym na ekranie wczytywania, możesz użyć polecenia enableFullScreen, które umożliwia interakcję z reklamą na pełnym ekranie. Komunikat zawiera wyświetlaną nazwę akcji, nazwę dewelopera oraz instrukcje dotyczące zamykania akcji, a ich kolor zmienia się w zależności od tego, co użytkownik wybierze jako motyw na swoim urządzeniu.

Jeśli użytkownik często wchodzi w interakcję z Twoim działaniem, komunikat ten tymczasowo przestaje się wyświetlać na ekranie wczytywania. Jeśli użytkownik przez jakiś czas nie będzie wchodzić w interakcję, komunikat pojawi się ponownie po uruchomieniu działania.

Możesz włączyć tryb pełnoekranowy w webhooku lub w statycznym wierszu w kreatorze działań.

Aby włączyć tryb pełnoekranowy w webhooku, wykonaj te czynności:

1. W pierwszej odpowiedzi canvas zwróconej przez webhooka w sesji ustaw pole enableFullScreen na true. Ten przykładowy fragment kodu to przykładowa implementacja korzystająca z biblioteki klienta 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);
   

Aby w trybie statycznym w kreatorze działań włączyć tryb pełnoekranowy, wykonaj te czynności:

1. Otwórz projekt w Konsoli Actions.
2. Na pasku nawigacyjnym kliknij Develop (Otwórz) i otwórz wiersz z pierwszą odpowiedzią canvas.

3. Ustaw enable_full_screen na true, jak pokazano w tym fragmencie kodu:

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

continueTtsDuringTouch

Domyślnie, gdy użytkownik dotknie ekranu podczas korzystania z interaktywnego działania obszaru roboczego, odtwarzanie TTS zostanie zatrzymane. Możesz włączyć zamianę tekstu na mowę, aby kontynuować odtwarzanie, gdy użytkownik dotknie ekranu za pomocą continueTtsDuringTouch. Tego działania nie można włączać i wyłączać w tej samej sesji.

Możesz to zrobić w webhooku lub w statycznym wierszu w kreatorze działań.

Aby włączyć TTS, gdy użytkownik dotknie ekranu w webhooku, wykonaj te czynności:

• W pierwszej odpowiedzi canvas zwróconej przez webhooka w sesji ustaw pole continueTtsDuringTouch na true. Ten przykładowy fragment kodu to przykładowa implementacja korzystająca z biblioteki klienta 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);
  

Aby włączyć TTS, gdy użytkownik dotknie ekranu w statycznym komunikacie w Kreatorze działań, wykonaj te czynności:

1. Otwórz projekt w Konsoli Actions.
2. Na pasku nawigacyjnym kliknij Programowanie i otwórz okno z pierwszymi odpowiedziami w canvas.

3. Ustaw continue_tts_during_touch na true, jak pokazano w tym fragmencie kodu:

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