使用 Google Assistant 和 Cloud Firestore 的拼字練習遊戲

1. 概述

Google Assistant 開發者平台可讓您建立軟體,將虛擬個人助理 Google Assistant 的功能擴展至超過 10 億台設備,包括智慧音箱、手機、汽車、電視、耳機等。用戶與助手進行對話來完成事情,例如購買雜貨或預訂乘車。作為開發人員,您可以使用 Assistant 開發人員平台輕鬆建立和管理使用者與您自己的第三方履行服務之間的愉快且有效的對話體驗。

此 Codelab 涵蓋使用 Google Assistant、Cloud Functions 和 Cloud Firestore 進行開發的中階概念。在此 Codelab 中,您將建立一款名為「拼字練習」的遊戲,該遊戲使用 Google Assistant 要求使用者拼寫單字。

你將建構什麼

在此 Codelab 中,您將建立一個具有以下功能的複雜遊戲:

  • 接收來自使用者的拼字回應,並根據值修改對話提示
  • 回覆與拼字單字相關的提示,例如其定義或重複該單字
  • 創建一個遊戲循環,以便用戶在拼寫單字後可以再次與助手交互

在開始建置之前,您可以透過說「嘿 Google,與拼字練習交談」來與支援 Google Assistant 的裝置上的即時操作進行互動。返回使用者通過此操作的預設路徑類似於以下互動:

完成此 Codelab 後,您完成的操作將具有以下對話流程:

2e9f94dc0ceafc96.png

你將學到什麼

  • 如何與 Cloud Firestore 交互
  • 如何使用槽從使用者收集數據
  • 如何處理使用者的輸入並回傳回應
  • 如何使用條件為場景新增邏輯
  • 如何添加遊戲循環

你需要什麼

此 Codelab 的先決條件包括以下內容:

  • 網頁瀏覽器,例如 Google Chrome
  • 用於編寫 Cloud Functions 的 IDE。
  • 一種付款方式。此 Codelab 使用 Cloud Functions for Firebase,這要求您的專案採用 Firebase Blaze 定價方案(了解更多)。
  • 運行 shell 命令的終端
  • Node.js 10 或更高版本

2. 取得函數程式碼

從命令列克隆GitHub 儲存庫

$ git clone https://github.com/FirebaseExtended/codelab-actions-firestore

3. 建立 Firebase 專案並設定您的應用

創建 Firebase 項目

  1. 登入Firebase
  2. 在 Firebase 控制台中,按一下新增專案(或建立專案),然後將您的 Firebase 專案命名為Spelling-Practice

66ae8d1894f4477.png

  1. 按一下項目建立選項。如果出現提示,請接受 Firebase 條款。跳過設定 Google Analytics,因為您不會為此應用程式使用 Analytics。

要了解有關 Firebase 專案的更多信息,請參閱了解 Firebase 專案

升級到 Blaze 定價計劃

為了使用 Cloud Functions for Firebase,您需要將 Firebase 專案升級到Blaze 定價計劃,這表示您需要將 Google Cloud Billing 帳號附加到您的專案。這需要您提供信用卡或其他付款方式。

所有 Firebase 專案(包括 Blaze 計劃中的專案)仍然可以使用 Cloud Functions 的免費使用配額。本 Codelab 中列出的步驟將屬於免費使用限制範圍。但是,您會看到用於託管 Cloud Functions 建置映像的 Cloud Storage 的少量費用(約 0.03 美元)。

4. 安裝 Firebase CLI

Firebase CLI(命令列介面)可讓您部署 Cloud Functions。

根據您的作業系統和使用案例,有多種安裝 Firebase CLI 的選項。如果您也使用 Cloud Functions,以下步驟描述了最常見的選項。

  1. 確保您已經安裝了npm ,它通常隨Node.js一起提供。
  2. 透過執行以下 npm 命令安裝或升級 CLI:
$ npm -g install firebase-tools
  1. 透過執行以下命令驗證 CLI 是否已正確安裝:
$ firebase --version

確保 Firebase CLI 的版本為9.0.0或更高版本,以便它具有 Cloud Functions 所需的所有最新功能。如果沒有,請執行 npm install -g firebase-tools 進行升級,如上所示。

  1. 透過執行以下命令來授權 Firebase CLI:
$ firebase login
  1. 在spelling-functions-start目錄中,設定Firebase CLI以使用您的Firebase專案。執行以下命令,選擇您的項目 ID,然後按照說明進行操作。出現提示時,您可以選擇任何別名,例如codelab
$ firebase use --add

5. 函數目錄

現在,您將使用 Firebase SDK for Cloud Functions 新增功能來建立遊戲Spelling Practice的後端。

Cloud Functions 可讓您在雲端中執行程式碼,而無需設定伺服器。此 Codelab 將向您展示如何建立對 Firebase 驗證、雲端儲存和 Firebase 即時資料庫事件做出反應的函數。讓我們從身份驗證開始。

使用適用於 Cloud Functions 的 Firebase SDK 時,您的函數程式碼將位於functions目錄下(預設)。為了讓您更輕鬆,我們已經建立了您的程式碼所在的functions/index.js檔案。在繼續之前,請隨意檢查functions目錄。

$ cd functions
$ ls

您的函數程式碼也是Node.js應用程序,因此需要一個package.json來提供有關您的應用程式的一些資訊並列出依賴項。

如果您不熟悉Node.js ,那麼在繼續 Codelab 之前了解更多資訊將會有所幫助。

package.json檔案已列出兩個必要的依賴: Firebase SDK for Cloud FunctionsFirebase Admin SDK 。若要在本機安裝它們,請從functions目錄執行npm install

$ npm install

現在讓我們來看看index.js檔:

索引.js

/**
 * Copyright 2021 Google Inc. All Rights Reserved.
 * ...
 */
// TODO(DEVELOPER): Import the Cloud Functions for Firebase and Firebase Admin modules here. Also import the Actions SDK here.
// TODO(DEVELOPER): Write the getWordDetailsFromDictionaryAPI function here.
// TODO(DEVELOPER): Write the createSpellingPracticeWord function here.
// TODO(DEVELOPER): Write the app Handle getSpellingWordList function here.
// TODO(DEVELOPER): Write the app Handle getSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle repeatSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle definitionOfSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle verifySpellingWord function here.

您將首先匯入所需的模組,然後編寫四個函數來取代 TODO。繼續執行 Codelab 的下一步以導入模組。

6.導入所需模組

此 Codelab 需要三個模組。

  • firebase-functions模組允許我們為雲端函數編寫觸發器
  • firebase-admin模組讓我們可以在具有管理員存取權限的伺服器上使用 Firebase 平台,例如寫入 Cloud Firestore。
  • Actions SDK Node.js 實作庫實作了 Google Assistant 的 Actions SDK 處理程序。
  1. 透過執行以下 npm 指令來安裝 Actions SDK:
$ npm install @assistant/conversation
  1. index.js檔案中,將第一個 TODO 替換為以下內容。

這些變更導入每個所需的模組。

此外,部署在 Cloud Functions 環境或其他 Google Cloud 容器上時,可以自動設定 Firebase Admin SDK。這就是當我們呼叫admin.initializeApp();在下面的變化中。

索引.js

/**
 * Copyright 2021 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Actions SDK
const {conversation} = require('@assistant/conversation');
const https = require('https');
const app = conversation();
const cors = require('cors')({origin: true});

// Import the Firebase SDK for Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();
// To access Cloud Firestore
const db = admin.firestore();
// TODO(DEVELOPER): Write the getWordDetailsFromDictionaryAPI function here.
// TODO(DEVELOPER): Write the createSpellingPracticeWord function here.
// TODO(DEVELOPER): Write the shuffleWordList function here.
// TODO(DEVELOPER): Write the app Handle getSpellingWordList function here.
// TODO(DEVELOPER): Write the app Handle getSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle repeatSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle definitionOfSpellingWord function here.
// TODO(DEVELOPER): Write the app Handle verifySpellingWord function here.

現在讓我們使用函數來新增業務邏輯來支援助理操作。

7. 建立函數

取得單字定義並將其寫入 Cloud Firestore

您將使用dictionaryapi.dev公共API 來取得單字定義。

index.js檔案中,將getWordDetailsFromDictionaryAPI的 TODO 替換為以下內容:

索引.js

// Retrieves word definition and audio pronunciation from api.dictionaryapi.dev service
// Function uses service provided by https://dictionaryapi.dev/
async function getWordDetailsFromDictionaryAPI(word) {
  let responseData="";
  let req = https.request({
    host: 'api.dictionaryapi.dev',
    port: 443,
    path:'/api/v2/entries/en/' + word,
    method:'GET'
  }, (res) => {
    res.setEncoding('utf8');
    res.on('data', d => {
        responseData+=d;
    })
    res.on('end',function(){
        let object = JSON.parse(responseData)
        const wordListRef = db.collection('wordlist');
        wordListRef.doc(object[0].word).set(
          object[0]
        );
       return responseData;
     });
  });
  req.end();
}

新增 Cloud Firestore 觸發器

接下來,您將建立一個 Cloud Function,每當在 Cloud Firestore 中建立新文件時就會觸發函數。它將呼叫dictionaryapi.dev API,透過我們上面編寫的getWordDetailsFromDictionaryAPI函數來取得單字定義。

index.js檔案中,將createSpellingPracticeWord的 TODO 替換為以下內容:

索引.js

// Firestore 觸發器透過 getWordDetailsFromDictionaryAPI 為每個新 Firestore 文件取得單字定義

exports.createSpellingPracticeWord = functions.firestore
  .document('wordlist/{word}')
  .onCreate((snap, context) => {
    const newValue = snap.data();
    const word = newValue.word;
    getWordDetailsFromDictionaryAPI(word);
});

取得遊戲的單字列表

您可以編寫一個 Cloud Function,從 Cloud Firestore 中為 Assistant 擷取拼字練習單字清單。為此,我們使用應用程式處理程序。

index.js檔案中,將getSpellingWordList的 TODO 替換為以下內容。

將此函數新增至特殊的app.handle是使該函數可以從 Assistant 存取的一種方式。

索引.js

// Store the list of spelling words in Assistant session
app.handle('getSpellingWordList', conv => {
  const wordListRef = db.collection('wordlist').limit(50);
  const snapshot = wordListRef;

  if (snapshot.empty) {
    console.log('No matching documents.');
    return;
  }
  VocabularyList = []

  return snapshot.get().then(snapshot => {
    snapshot.forEach(doc => {
      if (doc.data().word) {
          let definition = 'unknown';
          let audio = 'unknown';
          try {
            if(doc.data().hasOwnProperty('meanings')) {
              if(doc.data().meanings[0].hasOwnProperty('definitions')) {
                  definition = doc.data().meanings[0].definitions[0].definition;
              }
            }
            if(doc.data().hasOwnProperty('phonetics')) {
              if(doc.data().phonetics.length > 0)
                audio = doc.data().phonetics[0].audio;
            }
          } catch (error) {
            console.log(error);
          }

          let obj = {
            word: doc.data().word,
            answer: doc.data().word.split("").join(" "),
            definition: definition,
            audio: audio
          }
          VocabularyList.push(obj);
      }
      // Shuffle the array
      let currentIndex = VocabularyList.length, temporaryValue, randomIndex;
      while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = VocabularyList[currentIndex];
        VocabularyList[currentIndex] = VocabularyList[randomIndex];
        VocabularyList[randomIndex] = temporaryValue;
      }
      conv.session.params.vocabWord = VocabularyList;
      conv.session.params.vocabWordIndex = 0;
    });
  });
})

從 Google 助理會話中獲取一句話

您可以編寫一個雲端函數來傳回單字清單中的下一個拼字單字。

index.js檔案中,將getSpellingWord的 TODO 替換為以下內容:

索引.js

// Returns a spelling practice word to Google Assistant and uses Speech Synthesis Markup Language (SSML) to format the response
app.handle('getSpellingWord',  conv => {
  if (!conv.session.params.vocabWord.empty) {
    conv.session.params.vocabWordIndex+=1;
    const ssml = '<speak>' +
    '<audio src="'+ conv.session.params.vocabWord[conv.session.params.vocabWordIndex].audio +'">Use phonetics to spell the word.</audio> ' +
    '</speak>';
    conv.add(ssml);
  }
  else
    conv.add('Great job! You completed the Spelling practice');
});

使遊戲能夠重複單字

您可以編寫一個雲函數來重複遊戲的當前單字。

index.js檔案中,將repeatSpellingWord的TODO 替換為以下內容:

索引.js

// Returns current spelling word
app.handle('repeatSpellingWord',  conv => {
  if (!conv.session.params.vocabWord.empty) {
    const ssml = '<speak>' +
    '<audio src="'+ conv.session.params.vocabWord[conv.session.params.vocabWordIndex].audio +'">Use phonetics to spell the word. </audio> ' +
    '</speak>';
    conv.add(ssml);
  }
  else
    conv.add('Great job! You completed the Spelling practice');
});

取得單字的定義

您可以編寫一個雲端函數來提供遊戲當前單字的定義。

index.js檔案中,將definitionOfSpellingWord的TODO 替換為以下內容:

索引.js

// Returns spelling word definition from Assistant session parameter
app.handle('definitionOfSpellingWord',  conv => {
  conv.add( 'It means ' + conv.session.params.vocabWord[conv.session.params.vocabWordIndex].definition);
});

檢查使用者的拼字回應

您可以編寫一個雲端函數來驗證使用者對如何拼字遊戲中當前單字的回應。

index.js檔案中,將verifySpellingWord的 TODO 替換為以下內容:

索引.js

// Verifies user spelling response
app.handle('verifySpellingWord', conv => {
  try {
    userResponse = conv.intent.params.userresponse.resolved.join("");
    if (userResponse.toLowerCase() === conv.session.params.vocabWord[conv.session.params.vocabWordIndex].word.toLowerCase()) {
      conv.add('You are correct. Say next to continue.');
    }
    else {
      conv.add('Sorry, wrong answer. The correct answer is ' + conv.session.params.vocabWord[conv.session.params.vocabWordIndex].answer + ' . Say next to continue.');
    }
  } catch (error) {
    conv.add('Sorry. I did not understand your response' );
  }
});
exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

部署所有功能

您的 Cloud Functions 僅在將其部署到 Firebase 後才會處於活動狀態。

spelling-functions-start目錄的根目錄中,執行以下指令:

$ firebase deploy --only functions

這是您應該看到的控制台輸出:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function createSpellingPracticeWord(us-central1)...
✔  functions[createSpellingPracticeWord(us-central1)]: Successful create operation.
i  functions: creating function ActionsOnGoogleFulfillment(us-central1)...
✔  functions[ActionsOnGoogleFulfillment(us-central1)]: Successful create operation.

✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/spelling-practice-1234/overview

記下 ActionsOnGoogleFulfillment 函數 Http 端點 url 以供日後使用。若要取得端點,請開啟Firebase 控制台,然後按一下拼字練習項目。打開函數儀表板以查看函數端點。

332cb0437411a242.png

您已完成新增所有必要的功能。現在讓我們開始設定 Cloud Firestore。

8.啟用Cloud Firestore

您需要啟用 Cloud Firestore。

在 Firebase 控制台的「建置」部分中,按一下Firestore 。然後,按一下建立資料庫

5c0b4abf4410ffcf.png

對 Cloud Firestore 中資料的存取由安全規則控制。首先,您需要對資料設定一些基本規則才能開始。按一下 Firestore,然後在 Firebase 控制台的「規則」標籤中新增下列規則,然後按一下「發佈」

以下規則限制已登入使用者的資料訪問,從而阻止未經身份驗證的使用者讀取或寫入。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

9. 將拼字單字資料加入 Cloud Firestore

在此步驟中,您將把拼字單字資料寫入 Cloud Firestore,以便為助手(和遊戲)產生單字清單。

Cloud Firestore 資料分為集合、文件、欄位和子集合。遊戲中的每個單字都將作為自己的文件儲存在名為wordlist頂級集合中。對於 Firestore 集合中的每個新文檔,都會觸發createSpellingPracticeWord函數以從Dictionary API 服務取得單字詳細資訊。

建立 Cloud Firestore 集合

  1. 在 Firebase 控制台中,導覽至 Cloud Firestore 部分。
  2. 點選 +開始收集
  3. 集合 ID文字方塊中,輸入wordlist ,然後按一下下一步

1b4ccadb90f52f02.png

接下來,我們將為單字建立一個文件:協議

  1. 文件 ID文字方塊中,輸入agreement
  2. 欄位文字方塊中輸入word ,然後在文字方塊中輸入agreement
  3. 按一下「儲存」

379037e011e8511e.png

當您將此文件新增至 Cloud Firestore 時,它會觸發createSpellingPracticeWord函數來取得該單字的定義詳細資訊。透過為每個單字建立一個新文件來新增更多單字(例如:awe、car、true、tell、better、commut…)。

10. 設定 Google 助理

以下部分說明如何設定 Google Assistant 開發環境並建立 Actions 專案。

檢查您的 Google 權限設定

要測試您在此 Codelab 中建置的操作,您需要啟用必要的權限,以便模擬器可以存取您的操作。若要啟用權限,請執行下列步驟:

  1. 轉到活動控制頁面。
  2. 如果您尚未登錄,請使用您的 Google 帳號登入。
  3. 啟用以下權限:
  • 網路和應用程式活動
  • 「網路和應用程式活動」下,勾選「包含使用 Google 服務的網站、應用程式和裝置的 Chrome 歷史記錄和活動」旁的核取方塊。

c988e1e639e6d6e1.png

創建一個行動項目

您的 Actions 專案是您的 Action 的容器。若要為此 Codelab 建立 Actions 項目,請按照以下步驟操作:

  1. 開啟操作控制台
  2. 點選新建項目
  3. 接受服務條款

b174d45710b8086b.png

  1. 輸入或選擇您使用 Firebase 控制台建立的spelling-practice-codelab 。 (此名稱供您內部參考。稍後您可以為您的專案設定外部名稱。)

a2951de5d2001fac.png

  1. 按一下導入項目
  2. “您想要建立什麼類型的操作?”中螢幕上,選擇自訂卡。
  3. 點擊下一步
  4. 選擇空白項目卡。
  5. 單擊開始建置
  6. 輸入顯示名稱的拼字練習,然後按一下「儲存」。

用戶透過呼叫開始與您的 Action 對話。例如,使用者可以透過說「Hey Google,與 Spelling Practice 交談」之類的短語來呼叫您的操作,其中Spelling Practice顯示名稱。

如果您想將其部署到生產環境,您的操作必須有一個顯示名稱;但是,要測試您的操作,您不需要定義顯示名稱。相反,您可以在模擬器中使用短語“與我的測試應用程式交談”來調用您的操作。

配置履行

您需要將您先前在此 Codelab 中編寫和部署的 Cloud Functions 的事件處理程序連接到 Assistant。

若要設定您的履行,請依照下列步驟操作:

  1. 點選側邊導航中的Webhook
  2. 選擇Https 端點作為履行選項:

d523bf003e96e66f.png

  1. HTTPs 端點文字方塊中輸入函數端點的 URL,然後按一下儲存

be53e2cd0d914d54.png

在下一部分中,您將在操作控制台中自訂主要呼叫的提示。

設定主調用

您必須編輯主呼叫來定義使用者呼叫您的操作後會發生什麼。

預設情況下,Actions Builder 在觸發您的呼叫時提供通用提示「透過定義主呼叫開始建立您的動作。」)。

若要修改您的操作在使用者呼叫您的操作時傳回給使用者的提示,請依照下列步驟操作:

  1. 按一下導航中的主調用

9ff088c04c995cde.png

  1. 選取Call your webhook並在文字方塊中新增事件處理程序名稱getSpellingWordList
  2. 在程式碼編輯器中,將speech欄位中的文字替換為以下歡迎訊息: Welcome to Spelling Practice

注意:您可以使用YAMLJSON格式來編輯提示。

  1. 按一下「儲存」

在模擬器中測試主要調用

Actions 控制台提供了一個用於測試 Action 的 Web 工具,稱為模擬器。此介面模擬硬體設備及其設置,因此您可以與您的 Action 進行對話,就像它在智慧型顯示器、手機、揚聲器或 KaiOS 上運行一樣。

若要在模擬器中測試 Action 的主要調用,請按照下列步驟操作:

  1. 在頂部導覽列中,按一下「測試」進入模擬器。
  2. 若要在模擬器中呼叫操作,請在左上角的輸入欄位中輸入Talk to Spelling Practice ,然後按下鍵盤上的 Enter。

651fc8da1ac9aa0a.png

當您觸發操作的主要呼叫時,助手會以您自訂的歡迎訊息回應。此時,在助理回覆問候語後,對話結束。

查看事件日誌

當您位於「測試」標籤時,右側面板將顯示事件日誌,其中將對話記錄顯示為事件日誌。每個事件日誌都會顯示該輪對話期間發生的事件。若要查看事件日誌,請按一下事件前的灰色圖示。

您的操作目前有一個事件日誌,其中顯示使用者的輸入( “與拼字練習對話” )和您的操作的回應。以下螢幕截圖顯示了您的操作的事件日誌:

a6fb192f94426824.png

11. 建立拼字練習對話

現在您已經定義了使用者調用您的操作後會發生什麼,您可以建立操作對話的其餘部分。拼字練習有四個場景,您必須啟動每個場景才能運行。啟動場景的最常見方法是配置操作,以便當使用者在場景中匹配使用者意圖時,該意圖會觸發到另一個場景的轉換並啟動它。

從主調用過渡到開始場景

在本部分中,您將建立一個名為Start的新場景,該場景向使用者發送提示,詢問他們是否要開始玩Spelling Practice 。您也可以新增從主呼叫到新的Start場景的過渡。

若要建立此場景並向其新增過渡,請執行下列步驟:

  1. 點擊頂部導航中的“開發” 。然後,按一下左側導覽列中的「主要呼叫」
  2. 在右側的「過渡」部分中,按一下下拉式選單,然後在文字欄位中鍵入Start

dd4f1807a57f794d.png

  1. 按一下“新增” 。這將創建一個名為Start的場景,並告訴 Action 在 Action 向用戶提供歡迎提示後轉換到Start場景。
  2. 按一下左側導覽中的場景以顯示場景清單。
  3. “場景”下,按一下“開始”以查看Start場景。
  4. 按一下Start場景的「輸入時」部分中的「+」
  5. 選擇發送提示
  6. speech欄位中的句子( Enter the response that users will see or hear... )替換為詢問使用者的問題: Use phonetic alphabet to spell the word. For example alpha for a, bravo for b, charlie for c etc. Do you want to continue?

建議晶片為用戶提供可點擊的建議,您的操作將其作為用戶輸入進行處理。在此部分中,您將添加顯示在剛剛配置的提示下方的建議籌碼( Do you want to play

Spelling Practice

? )以支援有螢幕裝置上的使用者。

若要將建議條新增至Start場景的提示中,請依照下列步驟操作:

  1. Start場景中,按一下程式碼編輯器下方的建議。此操作添加了一個建議晶片。
  2. title欄位中,將Suggested Response替換為'Yes'
  3. 使用相同的格式,手動新增標題為'No''Help with Phonetics'的建議卡。您的程式碼應類似於以下程式碼片段:
  4. 按一下「儲存」

5ff2ecdc56801b91.png

在模擬器中測試您的操作

此時,您的操作應該從主呼叫過渡到「開始」場景,並詢問使用者是否要繼續。建議籌碼也應該出現在模擬顯示中。

若要在模擬器中測試您的操作,請依照下列步驟操作:

  1. 在導覽列中,按一下「測試」將您帶到模擬器。
  2. 若要在模擬器中測試您的操作,請在輸入欄位中輸入Talk to Spelling Practice
  3. Enter鍵。您的操作應以Main invocation提示和添加的Start場景提示進行響應,“歡迎來到拼寫練習。使用拼音字母拼寫單詞。例如 alpha 代表 a,bravo 代表 b,charlie 代表 c 等。您想要繼續?”

以下螢幕截圖顯示了此互動:

338c9570b02a618e.png

  1. 點擊YesNoHelp with Phonetics建議晶片以回應提示。 (您也可以說「是」「否」「語音幫助」 ,或在輸入欄位中輸入Yes 」或「 No 」或Help with Phonetics 。)

當您回應提示時,您的操作會回應一條訊息,表明它無法理解您的輸入: “抱歉,我沒聽清楚。您可以再試一次嗎?”由於您尚未將操作配置為理解並回應「是」「否」輸入,因此您的操作會將您的輸入與NO_MATCH意圖相符。

預設情況下, NO_MATCH系統意圖提供通用回應,但您可以自訂這些回應以向使用者表明您不理解他們的輸入。在 3 次無法匹配使用者輸入後,助理會結束使用者與您的操作的對話。

加入 no 和語音意圖

現在使用者可以回答您的操作提出的問題,您可以配置您的操作以了解使用者的回應( “是”“否”“語音幫助” )。在以下部分中,您將建立當使用者說出「是」「否」或「語音幫助」時匹配的使用者意圖,並將這些意圖新增至Start場景。我們將使用系統yes並將創建其他意圖。

no意圖地創造

現在,您需要在用戶不想玩遊戲時創建no理解和響應用戶的意圖。若要建立此意圖,請按照下列步驟操作:

  1. 按一下導覽中的「開發」
  2. 按一下導覽中的「自訂意圖」以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。將新意圖命名為no並回Enter
  4. 點選“否”開啟no意圖頁面。
  5. 「新增訓練短語」部分中,按一下「輸入短語」文字方塊並輸入以下短語:
  • No
  • N
  • I don't want
  • nope

98b0c9a7b67ea9b9.png

  1. 按一下「儲存」

noStart場景添加意圖

現在,該操作可以理解使用者何時表達「不」或類似「不」的內容,例如「否」 。您需要將no使用者意圖新增至「 Start場景,因為使用者正在回應「 Start提示(「歡迎來到拼字練習。使用拼音字母來拼寫單字。例如,a 為 alpha,b 為 bravo,c 為 charlie)等等。您想繼續嗎? 」 )。

若要為Start場景新增此意圖,請依照下列步驟操作:

  1. 點擊導航中的“開始”場景。
  2. 按一下Start場景中「使用者意圖處理」旁的+(加號)
  3. 「意圖」部分中,從下拉清單中選擇「否」

51f752e78c8b4942.png

  1. 點擊“發送提示”並使用以下文字更新speech欄位: Good Bye

編輯器中的程式碼應類似於以下程式碼片段:

candidates:
  - first_simple:
      variants:
        - speech: >-
             Goodbye.
  1. 「轉換」部分中,從下拉清單中選擇「結束對話」
  2. 按一下「儲存」

在模擬器中測試no意圖

此時,您的 Action 會了解用戶何時不想玩遊戲並返回適當的回應。

若要在模擬器中測試此意圖,請依照下列步驟操作:

  1. 在導覽列中,按一下「測試」
  2. 在輸入欄位中輸入Talk to Spelling Practice ,然後按下Enter
  3. 輸入欄位中輸入No ,然後按 Enter。或者,按一下“無建議”選項。

7727a456b522f31b.png

將系統YES意圖加入Start場景

現在,我們將向「 Start 」場景新增系統意圖「YES」 ,因為使用者對Start提示回應「是」( 「歡迎來到拼字練習。使用拼音字母拼字單字。例如 alpha 代表 a,bravo 代表b、查理代表c 等等。您想繼續嗎? 」 )。

若要將此使用者意圖新增至Start場景,請執行下列步驟:

  1. 點擊導航中的“開始”場景。
  2. 按一下Start場景中「使用者意圖處理」旁的+(加號)
  3. 在「所有系統意圖」下,在意圖下拉清單中選擇「是」

f6cbe789cde49e8f.png

  1. 點擊呼叫您的 webhook並使用您先前建立的函數event handler程序文字方塊: getSpellingWordList
  2. 「轉換」部分中,按一下下拉式功能表並選擇「結束對話」
  3. 按一下「儲存」

在模擬器中測試YES意圖

此時,您的 Action 會了解使用者何時想要玩遊戲並返回適當的回應。

若要在模擬器中測試此意圖,請依照下列步驟操作:

  1. 在導覽列中,按一下「測試」
  2. 若要在模擬器中測試您的操作,請在輸入欄位中輸入Talk to Spelling Practice ,然後按下Enter
  3. 輸入欄位中輸入Yes ,然後按Enter 。或者,按一下Yes建議晶片。

您的操作會取得所有拼字練習單字的清單並將它們儲存在會話中。然後,您的操作會結束會話,因為您為YES意圖選擇了End conversation轉換。

創建Phonetics意圖

若要建立Phonetics意圖,請依照下列步驟操作:

  1. 按一下導覽中的「開發」
  2. 按一下導覽中的「自訂意圖」以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。命名新的意圖phonetics並按Enter
  4. 點選phonetics意圖開啟phonetics意圖頁面。
  5. 在新增訓練短語部分中,按一下輸入短語文字方塊並輸入以下短語:
  • how do I spell words
  • phonetics
  • help me with phonetics
  • phonetic alphabet

1455bdfca8dae46.png

  1. 按一下「儲存」

phonetics意圖新增至Start場景

現在,該操作可以理解使用者何時表達「語音」意圖。您可以將phonetics使用者意圖新增至「 Start場景,因為使用者正在回應「 Start 」提示(「歡迎來到拼字練習。使用拼音字母拼寫單字。例如 alpha 代表 a,bravo 代表 b,charlie 代表 c)等等。您想繼續嗎?” )。

若要將此使用者意圖新增至Start場景,請執行下列步驟:

  1. 點擊導航中的“開始”場景。
  2. 按一下Start場景中「使用者意圖處理」旁邊的 +(加號)。
  3. 在意圖下拉清單中選擇語音

67ee2e08000b2aee.png

  1. “轉換”部分中,點擊下拉式選單並選擇“結束對話”。
  2. 按一下「儲存」

從“開始”場景過渡到“拼字”場景

在本部分中,您將建立一個名為Spelling的新場景,它會向使用者發送提示,要求使用者使用拼音字母拼寫單字。

若要建立此場景並向其新增過渡,請執行下列步驟:

  1. 點擊頂部導航中的“開發” 。然後,點擊左側導覽列中的「開始場景」。
  2. 「使用者意圖處理」部分中when actions.intent.YES is matched按一下,然後在轉換部分的右側,按一下下拉式功能表並在文字欄位中鍵入Spelling
  3. 按一下“新增” 。這將創建一個名為Spelling的場景,並告訴 Action 在與 YES 意圖匹配後轉換到Spelling場景。
  4. 展開左側導覽中的場景以顯示場景清單。
  5. “場景”下,按一下“拼字”以查看Spelling場景。
  6. 按一下Spelling場景的「輸入時」區段中的+
  7. 點擊呼叫您的 webhook並在事件處理程序文字方塊中輸入getSpellingWord
  8. 選擇發送提示
  9. speech欄位中的句子 Enter the response that users will see or hear... )替換為{} 。實際的提示將由 webhook 填入。

建議晶片為用戶提供可點擊的建議,您的操作將其作為用戶輸入進行處理。

若要將建議條新增至Spelling場景的提示中,請依照下列步驟操作:

  1. Spelling場景中,按一下程式碼編輯器下方的建議。此操作新增了三個建議籌碼。
  2. title欄位中,將Suggested Response替換為'Repeat'
  3. 使用相同的格式,手動新增標題為'Skip'建議卡。
  4. 使用相同的格式,手動新增標題為'Quit'建議條。您的程式碼應類似於以下程式碼片段:
  5. 按一下「儲存」
suggestions:
      - title: 'Repeat'
      - title: 'Skip'
      - title: 'Quit'

e1d437f714ea1539.png

創建Repeat意圖

若要建立repeat意圖,請依照下列步驟操作:

  1. 按一下導覽中的「開發」
  2. 按一下導覽中的「自訂意圖」以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。將新意圖命名repeat並回Enter
  4. 點選repeat意圖開啟definition意圖頁面。
  5. 新增訓練短語部分中,按一下輸入短語文字方塊並輸入以下短語:
  • one more time please
  • say the word again
  • repeat the word
  • tell me again
  • repeat

e61f0b9f80510bc9.png

  1. 按一下「儲存」

repeat意圖新增至Spelling場景

現在,操作可以理解使用者何時表達「重複」意圖。您可以將repeat使用者意圖新增至Spelling場景中,因為使用者正在回應「 Spelling提示(「使用拼音字母拼寫單字」)。

若要將此使用者意圖新增至Spelling場景中,請執行下列步驟:

  1. 按一下導覽中的“拼字”場景。
  2. 按一下Spelling場景中「使用者意圖處理」旁的+(加號)
  3. 在意圖下拉清單中選擇重複

5cfd623b25bedbed.png

  1. 選取「呼叫您的 webhook」並在事件處理程序文字方塊中輸入「repeatSpellingWord」以取得單字定義。
  2. 選取發送提示
  3. speech欄位中的句子( Enter the response that users will see or hear... )替換為「」。實際的提示將由 webhook 填入。

將建議晶片添加到“當重複匹配時”

  1. 在「使用者意圖處理」下的「重複配對時」中,按一下程式碼編輯器下方的建議。此操作新增了三個建議籌碼。
  2. title欄位中,將Suggested Response替換為'Skip'
  3. 使用相同的格式,手動新增標題為'Quit'的建議晶片。您的程式碼應類似於以下程式碼片段:
suggestions:
      - title: 'Skip'
      - title: 'Quit'

ab40e4b0c432b97c.png

  1. 點選“儲存”。

建立definition意圖

若要建立definition意圖,請依照下列步驟操作:

  1. 按一下導覽中的「開發」
  2. 按一下導覽中的「自訂意圖」以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。命名新意圖definition並按Enter
  4. 按一下definition意圖開啟definition意圖頁面。
  5. 新增訓練短語部分中,按一下輸入短語文字方塊並輸入以下短語:
  • I would like to know the definition
  • tell me the definition
  • what does it mean
  • meaning
  • definition
  • what is the definition?

c1b88a9c0b1ac082.png

  1. 按一下「儲存」

definition意圖新增至Spelling場景

現在,操作可以理解使用者何時表達「定義」意圖。您可以將definition使用者意圖新增至Spelling場景中,因為使用者正在回應Spelling提示(「使用語音字母拼字單字」)。

若要將此使用者意圖新增至Spelling場景中,請按照以下步驟:

  1. 按一下導覽中的拼字場景。
  2. 點選使用者意圖處理旁邊的Spelling場景中的+(加號)
  3. 在意圖下拉中選擇定義

646BDCAC3AD3EB0C.PNG

  1. 在事件處理程序文字方塊中選取呼叫您的Webhook並輸入sperspellingword的定義,以取得單字定義。
  2. 檢查發送提示
  3. 用''替換speech欄位中的句子( Enter the response that users will see or hear... )。實際提示將由Webhook填入。

將建議晶片添加到Webhook響應中

  1. Start場景中,按一下「程式碼編輯器」下方的建議。此操作增加了三個建議。
  2. title欄位中,用'Skip'取代Suggested Response
  3. 使用相同的格式,手動新增一個名為'Quit'的建議晶片。您的程式碼應該看起來像以下片段:
suggestions:
      - title: 'Skip'
      - title: 'Quit'

25227545839d9333f.png

  1. 按一下「儲存」

創建skip意圖

若要建立skip意圖,請按照以下步驟:

  1. 點擊導航中的開發
  2. 點擊導航中的意圖以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。命名新的意圖skip ,然後按Enter
  4. 按一下「 skip意圖」以開啟skip意圖頁面。
  5. 「新增培訓短語」部分中,按一下「 Enter」短語文字方塊並輸入以下短語:
  • next word
  • go next
  • next
  • skip
  • skip word

D1C4908A3D7882F8.PNG

  1. 按一下「儲存」

Skip意圖新增至Spelling場景

現在,該動作可以理解當使用者表達「跳過」意圖時。您可以將skip使用者意圖新增至Spelling場景中,因為使用者正在回應Spelling提示(「使用語音字母拼字單字」)。

若要將此使用者意圖新增至Spelling場景中,請按照以下步驟:

  1. 按一下導覽中的拼字場景。
  2. 使用者意圖handlin g旁邊的Spelling場景中點選+(加號)
  3. 選擇“ Intent”下拉下的Skip

5465F97542217964.PNG

  1. 在右側的“過渡”部分中,按一下下拉式選單,然後選擇Spelling

C8072485CA82BD3F.png

  1. 按一下「儲存」

創建quit意圖

若要建立Quit意圖,請按照以下步驟:

  1. 點擊導航中的開發
  2. 點擊導航中的意圖以開啟意圖清單。
  3. 點選意圖清單末尾的+(加號) 。命名新的意圖Quit ,然後回Enter
  4. 按一下Quit意圖以開啟定義意圖頁面。
  5. 「新增培訓短語」部分中,按一下「 Enter」短語文字方塊並輸入以下短語:
  • I quit
  • Goodbye
  • Cancel
  • Exit
  • Quit

9916F77B8766541E.png

  1. 單擊儲存。

Quit意圖加入Spelling場景

現在,該動作可以理解當使用者表達「退出」意圖時。您可以將quit使用者意圖新增至Spelling場景中,因為使用者正在回應Spelling提示(「使用語音字母拼字單字」)。

若要將此使用者意圖新增至Spelling場景中,請按照以下步驟:

  1. 按一下導覽中的拼字場景。
  2. 點選使用者意圖處理旁邊的Spelling場景中的+(加號)
  3. 在意圖下拉中選擇退出

5F62FB18A3653D66.PNG

  1. 在右側的「過渡」部分中,按一下下拉式選單,然後選擇End conversation1FFBE35A7BBBB4B0.PNG
  2. 按一下「儲存」

創建phonetic_alphabet類型

在本節中,您建立了一個名為phonetic_alphabet的新類型,該類型指定使用者可以選擇拼字單字的語音字母選項。您也可以為這些選項定義一些同義詞,以防使用者說類似的內容。在後面的部分中,您將phonetic_alphabet類型新增至插槽中,以指定要獲得使用者回應的指定。

若要建立phonetic_alphabet類型,請依照下列步驟:

  1. 點擊導航中的開發
  2. 按一下類型下的+(加號)
  3. 鍵入phonetic_alphabet ,然後按Enter
  4. 點選phonetic_alphabet開啟選項。
  5. 這種類型的支援在什麼樣的值中?部分,選擇單字和同義詞選項
  6. 「新增條目」部分輸入下列條目和對應值:

A

阿爾法,蘋果,阿姆斯特丹

布拉沃,黃油,巴爾的摩

C

查理,貓,卡薩布蘭卡

d

三角洲,狗,丹麥

e

Echo,Edward,Edison

F

福克斯特,福克斯,佛羅裡達

G

高爾夫,喬治,加里波利

H

哈里,哈里酒店

印度,墨水,義大利

j

茱麗葉,強尼,耶路撒冷

k

Kilo,King,公斤

利馬,愛,倫敦

麥克,金錢,馬達加斯加

n

11月,紐約,南希

奧斯卡,橘色,奧斯陸

p

爸爸,巴黎,彼得

q

魁北克,女王

r

羅密歐,羅馬,羅伯特

s

塞拉,糖,聖地牙哥

t

探戈,湯米,黎波里

統一,傘,叔叔

v

維克多,醋,瓦倫西亞

w

威士忌,威廉,華盛頓

X

X射線

y

洋基,黃色,約克

z

Zulu,斑馬,蘇黎世

您的鑰匙值表看起來應該如下:

5B5A5CD9FA557E1B.PNG

  1. 按一下「儲存」

配置插槽填充

接下來,您需要在拼字場景中配置插槽填充。若要設定插槽填滿邏輯,請依照下列步驟:

  1. 按一下導覽中的拼字場景。
  2. 點擊Spelling場景中的+(加號)以進行插槽填滿
  3. 「輸入插槽名稱」欄位中,將userresponse新增為插槽名稱。
  4. 「選擇類型」下拉式選單中,選擇phonetic_alphabet作為插槽類型。
  5. 檢查此插槽接受值列表
  6. 需要檢查此插槽
  7. 選擇「自訂插槽值寫回」選項,然後在「會話參數」文字方塊中輸入userresponse。

BA57A419877A07F3.PNG

  1. 按一下「儲存」

Spelling螢幕上新增條件

若要在Spelling場景中新增條件,請按照以下步驟:

  1. 按一下導覽中的拼字場景。
  2. 點選條件旁邊的Spelling場景中的+(加號)
  3. 輸入scene.slots.status == "FINAL"作為條件
  4. 在事件處理程序文字方塊中選取呼叫您的Webhook並輸入verifySpellingword ,以驗證使用者回應。
  5. 檢查發送提示。
  6. {}取代speech欄位中的句子( Enter the response that users will see or hear... )。實際提示將由Webhook填入。

將建議晶片添加到Webhook響應中

  1. Start場景中,按一下「程式碼編輯器」下方的建議。此操作增加了三個建議。
  2. title欄位中,用'Next'取代Suggested Response
  3. 使用相同的格式,手動新增一個名為'Quit'的建議晶片。您的程式碼應該看起來像以下片段:
suggestions:
      - title: 'Next'
      - title: 'Quit'

AC3D7A9366EBC1B1.PNG

  1. 按一下「儲存」

12.模擬器中的測驗拼字練習

若要在模擬器中測試您的操作,請執行下列步驟:

  1. 在導覽列中,按一下測試將您帶到模擬器。
  2. 若要在模擬器中測試您的操作,請在輸入欄位中鍵入Talk to Spelling Practice
  3. Enter 。您的操作應以Main invocation提示和附加的Start場景提示做出響應:“歡迎拼寫練習。使用語音字母拼寫單詞。例如,Alpha for A,Bravo for B,Charlie for C等。繼續?”
  4. 繼續
  5. 模擬器將播放一個單字聲音拼寫
  6. 您可以使用語音字母拼寫單字。例如,為了更好地說或鍵入“ Bravo Echo Tango Tango Echo Romeo”
  7. 模擬器將以正確或不正確的響應做出響應。
  8. 在接下來說下一個單字或說退出遊戲循環。

13.恭喜

恭喜,您已經成功建立了遊戲,拼字練習

現在,您知道使用Cloud Firestore,Cloud Functions和Google Assistant Action Builder建立遊戲所需的關鍵步驟。

你涵蓋了什麼

  • 如何與Cloud Firestore互動
  • 如何使用插槽從用戶收集數據
  • 如何處理使用者的輸入並回傳回應
  • 如何使用條件將邏輯加入場景中
  • 如何添加遊戲循環

其他學習資源

您可以探索這些資源,以了解有關Google Assistant的建立行動的資源:

清理您的專案[推薦]

為了避免產生可能的費用,建議刪除您不打算使用的項目。若要刪除您在此Codelab中建立的項目,請按照以下步驟:

  1. 若要刪除您的Firebase專案和資源,請完成關閉(刪除)專案部分中列出的步驟。

注意:確保您在Google Cloud Console的設定頁面上選擇正確的刪除項目。

  1. 選用:若要立即將您的項目從操作控制台中刪除,請完成刪除項目部分中所列的步驟。如果您不完成此步驟,則大約30天後將自動刪除您的項目。

在Twitter上關注@actionsongoogle@firebase ,請繼續關注我們的最新公告,並推文#googleio分享您已建立的內容!