Google 어시스턴트와 Cloud Firestore를 사용한 맞춤법 연습 게임

1. 개요

Google 어시스턴트 개발자 플랫폼을 사용하면 스마트 스피커, 스마트폰, 자동차, TV, 헤드폰 등 10억 대 이상의 기기에서 가상 개인 비서인 Google 어시스턴트의 기능을 확장하는 소프트웨어를 만들 수 있습니다. 사용자는 어시스턴트와의 대화를 통해 식료품을 구매하거나 차량을 예약하는 등의 작업을 처리합니다. 개발자는 어시스턴트 개발자 플랫폼을 사용하여 사용자와 서드 파티 처리 서비스 간의 즐겁고 효과적인 대화 환경을 쉽게 만들고 관리할 수 있습니다.

이 Codelab에서는 Google 어시스턴트, Cloud Functions, Cloud Firestore로 개발하기 위한 중급 수준의 개념을 다룹니다. 이 Codelab에서는 Google 어시스턴트를 사용하여 사용자에게 단어의 철자를 묻는 '맞춤법 연습'이라는 게임을 빌드합니다.

빌드할 항목

이 Codelab에서는 다음 기능을 사용하여 정교한 게임을 빌드합니다.

  • 사용자로부터 맞춤법 응답을 받고 값에 따라 대화 프롬프트를 수정합니다.
  • 단어의 정의 또는 단어 반복과 같이 단어의 철자와 관련된 힌트를 사용하여 응답합니다.
  • 사용자가 단어의 철자를 입력한 후 어시스턴트와 다시 상호작용할 수 있도록 게임 루프를 생성합니다.

빌드를 시작하기 전에 "Hey Google, 맞춤법 연습에 맡겨 줘"라고 말하여 Google 어시스턴트 지원 기기에서 실시간 작업과 상호작용할 수 있습니다. 재사용자의 이 작업을 통한 기본 경로는 다음 상호작용과 같습니다.

이 Codelab을 마치면 완료된 작업은 다음과 같은 대화 흐름을 갖게 됩니다.

2e9f94dc0ceafc96.png

학습 내용

  • Cloud Firestore와 상호작용하는 방법
  • 슬롯을 사용하여 사용자로부터 데이터를 수집하는 방법
  • 사용자 입력을 처리하고 응답을 반환하는 방법
  • 조건을 사용하여 장면에 로직을 추가하는 방법
  • 게임 루프 추가 방법

필요한 항목

이 Codelab의 기본 요건은 다음과 같습니다.

  • 웹브라우저(예: Chrome)
  • Cloud Functions를 작성하기 위한 IDE입니다.
  • 결제 수단 이 Codelab에서는 Firebase용 Cloud Functions를 사용하므로 프로젝트에서 Firebase Blaze 요금제를 사용해야 합니다 ( 자세히 알아보기).
  • 셸 명령어를 실행하는 터미널
  • Node.js 10 이상

2. 함수 코드 가져오기

명령줄에서 GitHub 저장소를 클론합니다.

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

3. Firebase 프로젝트 만들기 및 앱 설정

Firebase 프로젝트 만들기

  1. Firebase에 로그인합니다.
  2. Firebase Console에서 프로젝트 추가 (또는 프로젝트 만들기)를 클릭한 후 Firebase 프로젝트의 이름을 Spelling-Practice로 지정합니다.

66ae8d1894f4477.png

  1. 프로젝트 만들기 옵션을 클릭합니다. 메시지가 표시되면 Firebase 약관에 동의합니다. 이 앱에는 애널리틱스를 사용하지 않으므로 Google 애널리틱스 설정을 건너뛰세요.

Firebase 프로젝트에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

Blaze 요금제로 업그레이드

Firebase용 Cloud Functions를 사용하려면 Firebase 프로젝트를 Blaze 요금제로 업그레이드해야 합니다. 즉, 프로젝트에 Google Cloud Billing 계정을 연결해야 합니다. 이때 신용카드 또는 기타 결제 수단을 제공해야 합니다.

Blaze 요금제를 포함한 모든 Firebase 프로젝트에서 Cloud Functions의 무료 사용 할당량에 계속 액세스할 수 있습니다. 이 Codelab에서 설명하는 단계는 무료 사용량 한도에 포함됩니다. 하지만 Cloud Storage에서 Cloud Functions 빌드 이미지를 호스팅하는 데 사용되는 소액의 요금 ( 약 $0.03)이 청구됩니다.

4. Firebase CLI 설치

Firebase CLI (명령줄 인터페이스)를 사용하면 Cloud Functions를 배포할 수 있습니다.

운영체제 및 사용 사례에 따라 여러 가지 Firebase CLI 설치 옵션이 있습니다. 다음 단계에서는 Cloud Functions도 사용하는 경우 가장 일반적인 옵션을 설명합니다.

  1. 일반적으로 Node.js와 함께 제공되는 npm을 설치했는지 확인합니다.
  2. 다음 npm 명령어를 실행하여 CLI를 설치하거나 업그레이드합니다.
$ npm -g install firebase-tools
  1. 다음을 실행하여 CLI가 올바르게 설치되었는지 확인합니다.
$ firebase --version

Cloud Functions에 필요한 최신 기능이 모두 포함되어 있도록 Firebase CLI 버전이 9.0.0 이상인지 확인합니다. 그렇지 않은 경우 npm install -g firebase-tools를 실행하여 위와 같이 업그레이드합니다.

  1. 다음을 실행하여 Firebase CLI를 승인합니다.
$ firebase login
  1. Swipe-functions-start 디렉터리에서 Firebase 프로젝트를 사용하도록 Firebase CLI를 설정합니다. 다음 명령어를 실행하고 프로젝트 ID를 선택한 후 안내를 따릅니다. 메시지가 표시되면 codelab와 같은 별칭을 선택할 수 있습니다.
$ firebase use --add

5. 함수 디렉터리

이제 Cloud Functions용 Firebase SDK를 사용하여 게임 백엔드를 빌드하는 맞춤법 연습 기능을 추가해 보겠습니다.

Cloud Functions를 사용하면 서버를 설정하지 않고도 클라우드에서 실행되는 코드를 사용할 수 있습니다. 이 Codelab에서는 Firebase 인증, Cloud Storage, Firebase 실시간 데이터베이스 이벤트에 반응하는 함수를 빌드하는 방법을 보여줍니다. 인증부터 시작하겠습니다.

Cloud Functions용 Firebase SDK를 사용하면 함수 코드는 기본적으로 functions 디렉터리에 있습니다. 보다 쉽게 할 수 있도록 코드가 전송될 functions/index.js 파일을 이미 만들었습니다. 계속하기 전에 언제든지 functions 디렉터리를 검사하세요.

$ cd functions
$ ls

함수 코드는 Node.js 앱이기도 하므로 앱에 대한 일부 정보를 제공하고 종속 항목을 나열하는 package.json가 필요합니다.

Node.js에 익숙하지 않은 경우 Codelab을 계속하기 전에 Node.js에 대해 자세히 알아보는 것이 좋습니다.

package.json 파일에는 두 가지 필수 종속 항목인 Cloud Functions용 Firebase SDKFirebase Admin SDK가 이미 나열되어 있습니다. 로컬에 설치하려면 functions 디렉터리에서 npm install를 실행합니다.

$ npm install

이제 index.js 파일을 살펴보겠습니다.

index.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 모듈을 사용하면 Cloud Functions의 트리거를 작성할 수 있습니다.
  • firebase-admin 모듈을 사용하면 관리 액세스 권한이 있는 서버에서 Firebase 플랫폼을 사용할 수 있습니다(예: Cloud Firestore에 쓰기).
  • Actions SDK Node.js 처리 라이브러리는 Google 어시스턴트용 Actions SDK 핸들러를 처리합니다.
  1. 다음 npm 명령어를 실행하여 Actions SDK를 설치합니다.
$ npm install @assistant/conversation
  1. index.js 파일에서 첫 번째 TODO를 다음으로 바꿉니다.

이렇게 변경하면 각 필수 모듈을 가져옵니다.

또한 Firebase Admin SDK는 Cloud Functions 환경이나 기타 Google Cloud 컨테이너에 배포할 때 자동으로 구성될 수 있습니다. 아래 변경사항에서 admin.initializeApp();를 호출하면 다음과 같은 결과가 발생합니다.

index.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를 다음으로 바꿉니다.

index.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 Firestore에서 새 문서가 생성될 때마다 트리거되는 Cloud 함수를 만듭니다. 바로 위에서 작성한 getWordDetailsFromDictionaryAPI 함수를 통해 단어 정의를 가져오기 위해 dictionaryapi.dev API를 호출합니다.

index.js 파일에서 createSpellingPracticeWord의 TODO를 다음으로 바꿉니다.

index.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 Firestore에서 맞춤법 연습 단어 목록을 검색하는 Cloud 함수를 작성할 수 있습니다. 이를 위해 앱 핸들러를 사용합니다.

index.js 파일에서 getSpellingWordList의 TODO를 다음으로 바꿉니다.

이 함수를 특수 app.handle에 추가하면 어시스턴트에서 함수에 액세스할 수 있습니다.

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

어시스턴트 세션에서 단어 듣기

단어 목록에서 다음 철자 단어를 반환하는 Cloud 함수를 작성할 수 있습니다.

index.js 파일에서 getSpellingWord의 TODO를 다음으로 바꿉니다.

index.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');
});

단어를 반복하도록 게임 사용 설정

게임의 현재 단어를 반복하는 Cloud 함수를 작성할 수 있습니다.

index.js 파일에서 repeatSpellingWord의 TODO를 다음으로 바꿉니다.

index.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');
});

단어의 정의 확인

게임의 현재 단어 정의를 제공하는 Cloud 함수를 작성할 수 있습니다.

index.js 파일에서 definitionOfSpellingWord의 TODO를 다음으로 바꿉니다.

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

사용자의 맞춤법 응답 확인하기

게임에서 현재 단어의 철자를 어떻게 쓰는지에 대한 사용자의 응답을 확인하는 Cloud 함수를 작성할 수 있습니다.

index.js 파일에서 verifySpellingWord의 TODO를 다음으로 바꿉니다.

index.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 Console을 연 후 spelling-practice 프로젝트를 클릭합니다. Functions 대시보드를 열어 함수 엔드포인트를 확인합니다.

332cb0437411a242.png

모든 필수 함수를 추가했습니다. 이제 Cloud Firestore 설정을 살펴보겠습니다.

8. Cloud Firestore 사용 설정

Cloud Firestore를 사용 설정해야 합니다.

Firebase Console의 빌드 섹션에서 Firestore를 클릭합니다. 그런 다음 데이터베이스 만들기를 클릭합니다.

5c0b4abf4410ffcf.png

Cloud Firestore의 데이터에 대한 액세스는 보안 규칙으로 제어됩니다. 시작하려면 데이터에 몇 가지 기본 규칙을 설정해야 합니다. Firestore를 클릭한 다음 Firebase Console의 규칙 탭에서 다음 규칙을 추가한 후 게시를 클릭합니다.

다음 규칙은 데이터 액세스 권한을 로그인한 사용자로 제한하여 인증되지 않은 사용자가 읽거나 쓸 수 없도록 합니다.

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 컬렉션의 모든 새 문서에 대해 Dictionary API 서비스에서 단어 세부정보를 가져오도록 create맞춤법 연습Word 함수가 트리거됩니다.

Cloud Firestore 컬렉션 만들기

  1. Firebase Console에서 Cloud Firestore 섹션으로 이동합니다.
  2. + 컬렉션 시작을 클릭합니다.
  3. 컬렉션 ID 텍스트 상자에 wordlist을 입력하고 다음을 클릭합니다.

1b4ccadb90f52f02.png

다음으로 agreement라는 단어에 대한 문서를 만듭니다.

  1. 문서 ID 텍스트 상자에 agreement을 입력합니다.
  2. 필드 텍스트 상자에 word을 입력하고 텍스트 상자에 agreement을 입력합니다.
  3. 저장을 클릭합니다.

379037e011e8511e.png

이 문서를 Cloud Firestore에 추가하면 createLegalingPracticeWord 함수를 트리거하여 단어의 정의 세부정보를 가져옵니다. 각 단어에 대해 새 문서를 만들어 더 많은 단어 (예: 놀라움, 자동차, 참, 말하기, 더 나은, 출퇴근길)를 추가합니다.

10. Google 어시스턴트 설정

다음 섹션에서는 Google 어시스턴트 개발 환경을 설정하고 작업 프로젝트를 만드는 방법을 설명합니다.

Google 권한 설정 확인하기

이 Codelab에서 빌드하는 작업을 테스트하려면 시뮬레이터가 작업에 액세스할 수 있도록 필요한 권한을 사용 설정해야 합니다. 권한을 사용 설정하려면 다음 단계를 따르세요.

  1. 활동 제어 페이지로 이동합니다.
  2. 아직 로그인하지 않았다면 Google 계정으로 로그인합니다.
  3. 다음 권한을 사용 설정합니다.
  • 웹 및 앱 활동
  • 웹 및 앱 활동에서 Chrome 방문 기록 및 Google 서비스를 사용하는 사이트, 앱, 기기에서 이루어진 활동 포함 옆의 체크박스를 선택합니다.

C988e1e639e6d6e1.png

작업 프로젝트 만들기

작업 프로젝트는 작업의 컨테이너입니다. 이 Codelab에서 사용할 작업 프로젝트를 만들려면 다음 단계를 따르세요.

  1. Actions 콘솔을 엽니다.
  2. 새 프로젝트를 클릭합니다.
  3. 서비스 약관 동의

B174d45710b8086b.png

  1. Firebase Console을 사용하여 만든 spelling-practice-codelab을 입력하거나 선택합니다. (내부 참고용 이름입니다. 나중에 프로젝트의 외부 이름을 설정할 수 있습니다.)

a2951de5d2001fac.png

  1. 프로젝트 가져오기를 클릭합니다.
  2. What kind of Action do you want to build? 화면에서 Custom 카드를 선택합니다.
  3. 다음을 클릭합니다.
  4. Blank project 카드를 선택합니다.
  5. Start build를 클릭합니다.
  6. 표시 이름에 맞춤법 연습을 입력하고 저장을 클릭합니다.

사용자는 호출을 통해 작업과 대화를 시작합니다. 예를 들어 사용자는 "Hey Google, 맞춤법에 관해 말해 줘"와 같이 말하여 작업을 호출할 수 있습니다. 여기서 맞춤법 연습표시 이름입니다.

작업을 프로덕션에 배포하려면 작업에 표시 이름이 있어야 합니다. 하지만 작업을 테스트하기 위해 표시 이름을 정의할 필요는 없습니다. 대신 시뮬레이터에서 "테스트 앱에 연결해줘" 문구를 사용하여 작업을 호출할 수 있습니다.

fulfillment 구성

이 Codelab 앞부분에서 작성하고 배포한 Cloud Functions의 이벤트 핸들러를 어시스턴트에 연결해야 합니다.

처리를 구성하려면 다음 단계를 따르세요.

  1. 측면 탐색 메뉴에서 웹훅을 클릭합니다.
  2. 처리 옵션으로 Https 엔드포인트를 선택합니다.

D523bf003e96e66f.png

  1. HTTPS 엔드포인트 텍스트 상자에 함수의 엔드포인트 URL을 입력한 다음 저장을 클릭합니다.

be53e2cd0d914d54.png

다음 섹션에서는 Actions 콘솔에서 기본 호출에 대한 메시지를 맞춤설정합니다.

기본 호출 설정

사용자가 작업을 호출한 후 발생하는 결과를 정의하려면 기본 호출을 수정해야 합니다.

호출이 트리거되면 기본적으로 Actions Builder에 일반적인 프롬프트가 제공됩니다 ('Start building your Action by defining main invocation.').

사용자가 작업을 호출할 때 작업에서 사용자에게 보내는 프롬프트를 수정하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Main invocation을 클릭합니다.

9ff088c04c995cde.png

  1. Call your webhook을 선택하고 텍스트 상자에 이벤트 핸들러 이름 getSpellingWordList을 추가합니다.
  2. 코드 편집기에서 speech 필드의 텍스트를 Welcome to Spelling Practice 환영 메시지로 바꿉니다.

참고: YAML 또는 JSON 형식을 사용하여 프롬프트를 수정할 수 있습니다.

  1. 저장을 클릭합니다.

시뮬레이터에서 기본 호출 테스트하기

Actions 콘솔은 작업을 테스트하기 위한 시뮬레이터라는 웹 도구를 제공합니다. 이 인터페이스는 하드웨어 기기와 관련 설정을 시뮬레이션하므로 스마트 디스플레이, 휴대전화, 스피커 또는 KaiOS에서 실행되는 것처럼 작업과 대화할 수 있습니다.

시뮬레이터에서 작업의 기본 호출을 테스트하려면 다음 단계를 따르세요.

  1. 상단 탐색 메뉴에서 Test를 클릭하여 시뮬레이터로 이동합니다.
  2. 시뮬레이터에서 작업을 호출하려면 왼쪽 상단의 입력란에 Talk to Spelling Practice을 입력하고 키보드에서 Enter 키를 누릅니다.

651fc8da1ac9aa0a.png

작업의 기본 호출을 트리거하면 어시스턴트가 맞춤설정된 환영 메시지로 응답합니다. 이때 어시스턴트가 인사말로 응답하면 대화가 종료됩니다.

이벤트 로그 보기

Test 탭에서는 오른쪽 패널에 이벤트 로그가 표시되며, 이 로그에는 대화 기록이 이벤트 로그로 표시됩니다. 각 이벤트 로그는 대화가 이어지는 동안 발생하는 이벤트를 표시합니다. 이벤트 로그를 보려면 이벤트 앞에 있는 회색 아이콘을 클릭하세요.

작업에 현재 하나의 이벤트 로그가 있으며, 여기에는 사용자 입력 ('Talk to 맞춤법 연습')과 작업의 응답이 모두 표시됩니다. 다음 스크린샷은 작업의 이벤트 로그를 보여줍니다.

a6fb192f94426824.png

11. 맞춤법 연습을 위한 대화 만들기

사용자가 작업을 호출한 후 발생하는 결과를 정의했으므로 이제 작업의 나머지 대화를 빌드할 수 있습니다. 맞춤법 연습에는 4개의 장면이 있으며 각 장면을 활성화해야 실행할 수 있습니다. 장면을 활성화하는 가장 일반적인 방법은 사용자가 장면 내의 사용자 인텐트와 매칭할 때 해당 인텐트가 다른 장면으로의 전환을 트리거하고 활성화하도록 작업을 구성하는 것입니다.

기본 호출에서 시작 장면으로 전환

이 섹션에서는 Start라는 새 장면을 만듭니다. 이 장면에서는 사용자에게 맞춤법 연습을 시작할지 묻는 메시지를 보냅니다. 또한 기본 호출에서 새 Start 장면으로의 전환도 추가합니다.

이 장면을 만들고 전환을 추가하려면 다음 단계를 따르세요.

  1. 상단 탐색 메뉴에서 개발을 클릭합니다. 그런 다음 왼쪽 탐색 메뉴에서 Main invocation을 클릭합니다.
  2. 오른쪽의 Transition 섹션에서 드롭다운 메뉴를 클릭한 다음 텍스트 필드에 Start를 입력합니다.

dd4f1807a57f794d.png

  1. 추가를 클릭합니다. 이렇게 하면 Start 장면이 만들어지고, 작업이 사용자에게 환영 메시지를 전송한 후 Start 장면으로 전환하도록 작업에 지시합니다.
  2. 왼쪽 탐색 메뉴에서 Scenes(장면)를 클릭하여 장면 목록을 표시합니다.
  3. Scenes에서 Start를 클릭하여 Start 장면을 표시합니다.
  4. Start 장면의 On Enter 섹션에서 +를 클릭합니다.
  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

시뮬레이터에서 작업 테스트

이 시점에서 작업은 기본 호출에서 Start 장면으로 전환되고 사용자에게 계속 진행할지 묻습니다. 추천 칩은 시뮬레이션된 디스플레이에도 표시되어야 합니다.

시뮬레이터에서 작업을 테스트하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Test를 클릭하여 시뮬레이터로 이동합니다.
  2. 시뮬레이터에서 작업을 테스트하려면 입력 필드에 Talk to Spelling Practice를 입력합니다.
  3. Enter를 누릅니다. 작업에서 Main invocation 프롬프트와 추가된 Start 장면 프롬프트인 'Welcome to 맞춤법 연습. 알파벳을 사용하여 단어의 철자를 입력합니다. 예를 들어 a는 알파, b는 브라보, c는 찰리 등입니다. 계속할까요?"

다음 스크린샷은 이 상호작용을 보여줍니다.

338c9570b02a618e.png

  1. Yes, No 또는 Help with Phonetics 추천 칩을 클릭하여 프롬프트에 응답합니다. ("예" 또는 "아니요" 또는 "소리나는 대로 도와줘"라고 말하거나 입력 필드에 Yes 또는 No 또는 Help with Phonetics을 입력할 수도 있습니다.)

프롬프트에 응답하면 작업이 입력을 이해할 수 없음을 나타내는 다음과 같은 메시지로 응답합니다. '죄송합니다. 말씀하신 내용을 이해하지 못했습니다. 다시 시도해 주시겠어요?" 아직 'Yes' 또는 'No' 입력을 이해하고 응답하도록 작업을 구성하지 않았으므로 작업은 입력을 NO_MATCH 인텐트와 일치시킵니다.

기본적으로 NO_MATCH 시스템 인텐트는 일반적인 응답을 제공하지만 이러한 응답을 맞춤설정하여 사용자에게 입력을 이해하지 못했음을 나타낼 수 있습니다. 어시스턴트는 사용자 입력을 세 번 일치시킬 수 없으면 작업과의 대화를 종료합니다.

'no' 및 소리나는 대로 인텐트 추가

이제 작업이 제기하는 질문에 사용자가 응답할 수 있으므로 사용자의 응답 ('예' 또는 '아니요' 또는 '소리나는 대로 도움말')을 이해하도록 작업을 구성할 수 있습니다. 다음 섹션에서는 사용자가 'Yes' 또는 'No' 또는 'Help with Phonetics'라고 말할 때 매칭되는 사용자 인텐트를 만들고 이러한 인텐트를 Start 장면에 추가합니다. 시스템 인텐트 yes를 사용하고 다른 인텐트를 만들어 보겠습니다.

no 인텐트 만들기

이제 사용자가 게임을 원하지 않을 때 사용자를 이해하고 이에 응답할 수 있도록 no 인텐트를 만들어야 합니다. 이 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 Custom Intents를 클릭하여 인텐트 목록을 엽니다.
  3. 인텐트 목록 끝에 있는 + (더하기 기호)를 클릭합니다. 새 인텐트의 이름을 no로 지정하고 Enter 키를 누릅니다.
  4. 아니요를 클릭하여 no 인텐트 페이지를 엽니다.
  5. 학습 문구 추가 섹션에서 문구 입력 텍스트 상자를 클릭하고 다음 문구를 입력합니다.
  • No
  • N
  • I don't want
  • nope

98b0c9a7b67ea9b9.png

  1. 저장을 클릭합니다.

Start 장면에 no 인텐트 추가

이제 사용자가 '아니요' 또는 '아니요'와 같이 '아니요'와 비슷한 표현을 할 때 작업이 이해할 수 있습니다. no 사용자 인텐트를 Start 장면에 추가해야 합니다. 사용자가 Start 프롬프트 ('맞춤법 연습에 오신 것을 환영합니다. 알파벳을 사용하여 단어의 철자를 입력합니다. 예를 들어 a는 알파, b는 브라보, c는 찰리 등입니다. 계속할까요?").

Start 장면에 이 인텐트를 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Start 장면을 클릭합니다.
  2. 사용자 인텐트 처리 옆에 있는 Start 장면에서 + (더하기)를 클릭합니다.
  3. Intent 섹션의 드롭다운에서 no를 선택합니다.

51f752e78c8b4942.png

  1. 메시지 보내기를 클릭하고 speech 입력란을 Good Bye 텍스트로 업데이트합니다.

편집기의 코드는 다음 스니펫과 같습니다.

candidates:
  - first_simple:
      variants:
        - speech: >-
             Goodbye.
  1. Transition 섹션의 드롭다운에서 EndConversation을 선택합니다.
  2. 저장을 클릭합니다.

시뮬레이터에서 no 인텐트 테스트

이 시점에서 작업은 사용자가 게임을 플레이하지 않으려고 할 때를 파악하고 적절한 응답을 반환합니다.

시뮬레이터에서 이 인텐트를 테스트하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Test(테스트)를 클릭합니다.
  2. 입력 필드에 Talk to Spelling Practice를 입력하고 Enter 키를 누릅니다.
  3. Input 필드에 No를 입력하고 Enter 키를 누릅니다. 또는 추천 항목 없음 칩을 클릭합니다.

7727a456b522f31b.png

Start 장면에 시스템 YES 인텐트 추가

이제 사용자가 Start 프롬프트 ('Welcome to 맞춤법 연습에 오신 것을 환영합니다.Start 알파벳을 사용하여 단어의 철자를 입력합니다. 예를 들어 a는 알파, b는 브라보, c는 찰리 등입니다. 계속할까요?").

이 사용자 인텐트를 Start 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Start 장면을 클릭합니다.
  2. User 인텐트 처리 옆에 있는 Start 장면에서 + (더하기) 기호를 클릭합니다.
  3. All System Intents(모든 시스템 인텐트)의 인텐트 드롭다운에서 YES를 선택합니다.

f6cbe789cde49e8f.png

  1. 웹훅 호출을 클릭하고 이전에 만든 함수(getSpellingWordList)로 event handler 텍스트 상자를 업데이트합니다.
  2. 전환 섹션에서 드롭다운을 클릭하고 대화 종료를 선택합니다.
  3. 저장을 클릭합니다.

시뮬레이터에서 YES 인텐트 테스트

이 시점에서 작업은 사용자가 언제 게임을 플레이하려고 하는지 이해하고 적절한 응답을 반환합니다.

시뮬레이터에서 이 인텐트를 테스트하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Test(테스트)를 클릭합니다.
  2. 시뮬레이터에서 작업을 테스트하려면 Input 필드에 Talk to Spelling Practice를 입력하고 Enter 키를 누릅니다.
  3. Input 필드에 Yes를 입력하고 Enter 키를 누릅니다. 또는 Yes 추천 칩을 클릭합니다.

작업이 모든 맞춤법 연습 단어의 목록을 가져와 세션에 저장합니다. 그러면 YES 인텐트에 End conversation 전환을 선택했으므로 작업이 세션을 종료합니다.

Phonetics 인텐트 만들기

Phonetics 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 Custom Intents를 클릭하여 인텐트 목록을 엽니다.
  3. 인텐트 목록 끝에 있는 + (더하기 기호)를 클릭합니다. 새 인텐트의 이름을 phonetics로 지정하고 Enter 키를 누릅니다.
  4. phonetics 인텐트를 클릭하여 phonetics 인텐트 페이지를 엽니다.
  5. 학습 문구 추가 섹션에서 문구 입력 텍스트 상자를 클릭하고 다음 문구를 입력합니다.
  • how do I spell words
  • phonetics
  • help me with phonetics
  • phonetic alphabet

1455bdfca8dae46.png

  1. 저장을 클릭합니다.

Start 장면에 phonetics 인텐트 추가

이제 작업에서 사용자가 '소리나는 대로' 인텐트를 표현할 때 작업을 이해할 수 있습니다. phonetics 사용자 인텐트를 Start 장면에 추가할 수 있습니다. 사용자가 Start 프롬프트 ('맞춤법 연습에 오신 것을 환영합니다. 알파벳을 사용하여 단어의 철자를 입력합니다. 예를 들어 a는 알파, b는 브라보, c는 찰리 등입니다. 계속할까요?").

이 사용자 인텐트를 Start 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Start 장면을 클릭합니다.
  2. 사용자 인텐트 처리 옆에 있는 Start 장면에서 + (더하기) 기호를 클릭합니다.
  3. 인텐트 드롭다운에서 소리나는 대로를 선택합니다.

67ee2e08000b2aee.png

  1. 전환 섹션에서 드롭다운을 클릭하고 대화 종료를 선택합니다.
  2. 저장을 클릭합니다.

시작 장면에서 맞춤법 검사 장면으로 전환

이 섹션에서는 맞춤법이라는 새 장면을 만듭니다. 이 장면은 사용자에게 소리나는 대로 단어의 철자를 입력하라는 메시지를 보냅니다.

이 장면을 만들고 전환을 추가하려면 다음 단계를 따르세요.

  1. 상단 탐색 메뉴에서 개발을 클릭합니다. 그런 다음 왼쪽 탐색 메뉴에서 Start(장면)를 클릭합니다.
  2. 사용자 인텐트 처리 섹션에서 when actions.intent.YES is matched을 클릭하고 오른쪽에서 전환 섹션을 클릭한 후 텍스트 필드에 Spelling를 입력합니다.
  3. 추가를 클릭합니다. 이렇게 하면 Spelling라는 장면이 생성되고 YES 인텐트와 일치한 후 Spelling 장면으로 전환하도록 작업에 지시합니다.
  4. 왼쪽 탐색 메뉴에서 Scenes를 펼쳐 장면 목록을 표시합니다.
  5. 장면에서 맞춤법을 클릭하여 Spelling 장면을 표시합니다.
  6. Spelling 장면의 On Enter 섹션에서 +를 클릭합니다.
  7. 웹훅 호출을 클릭하고 이벤트 핸들러 텍스트 상자에 getSpeakingWord를 입력합니다.
  8. 메시지 보내기를 선택합니다.
  9. speech 필드(Enter the response that users will see or hear...)의 문장을 {}로 바꿉니다. 실제 프롬프트는 웹훅에 의해 채워집니다.

추천 칩은 클릭 가능한 추천을 사용자에게 제공하며, 작업이 사용자 입력으로 처리합니다.

Spelling 장면의 프롬프트에 추천 검색어 칩을 추가하려면 다음 단계를 따르세요.

  1. Spelling 장면에서 코드 편집기 아래의 제안을 클릭합니다. 이 작업을 통해 3개의 추천 칩이 추가됩니다.
  2. title 필드에서 Suggested Response'Repeat'로 바꿉니다.
  3. 동일한 형식을 사용하여 'Skip'라는 추천 칩을 수동으로 추가합니다.
  4. 동일한 형식을 사용하여 'Quit'라는 추천 칩을 수동으로 추가합니다. 코드는 다음 스니펫과 같습니다.
  5. 저장을 클릭합니다.
suggestions:
      - title: 'Repeat'
      - title: 'Skip'
      - title: 'Quit'

e1d437f714ea1539.png

Repeat 인텐트 만들기

repeat 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 Custom Intents를 클릭하여 인텐트 목록을 엽니다.
  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. 저장을 클릭합니다.

Spelling 장면에 repeat 인텐트 추가

이제 작업에서 사용자가 "repeat" 인텐트를 표현할 때 작업을 파악할 수 있습니다. repeat 사용자 인텐트를 Spelling 장면에 추가할 수 있습니다. 사용자가 Spelling 프롬프트 ('소리나는 대로 단어의 철자를 입력하세요')에 응답하기 때문입니다.

이 사용자 인텐트를 Spelling 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. User 인텐트 처리 옆에 있는 Spelling 장면에서 + (더하기) 기호를 클릭합니다.
  3. 인텐트 드롭다운에서 repeat를 선택합니다.

5cfd623b25bedbed.png

  1. 웹훅 호출을 선택하고 이벤트 핸들러 텍스트 상자에 repeatSpeakingWord를 입력하여 단어 정의를 가져옵니다.
  2. 메시지 보내기를 선택합니다.
  3. speech 필드 (Enter the response that users will see or hear...)의 문장을 ‘'로 바꿉니다. 실제 프롬프트는 웹훅에 의해 채워집니다.

'반복이 일치하는 경우'에 추천 검색어 칩 추가

  1. 사용자 인텐트 처리의 '반복 일치 시'에서 코드 편집기 아래의 제안을 클릭합니다. 이 작업을 통해 3개의 추천 칩이 추가됩니다.
  2. title 필드에서 Suggested Response'Skip'로 바꿉니다.
  3. 동일한 형식을 사용하여 'Quit'라는 추천 칩을 수동으로 추가합니다. 코드는 다음 스니펫과 같습니다.
suggestions:
      - title: 'Skip'
      - title: 'Quit'

Ab40e4b0c432b97c.png

  1. 저장을 클릭합니다.

definition 인텐트 만들기

definition 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 Custom Intents를 클릭하여 인텐트 목록을 엽니다.
  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. 저장을 클릭합니다.

Spelling 장면에 definition 인텐트 추가

이제 작업에서 사용자가 'definition' 인텐트를 표현할 때 이를 이해할 수 있습니다. definition 사용자 인텐트를 Spelling 장면에 추가할 수 있습니다. 사용자가 Spelling 프롬프트 ('소리나는 대로 단어의 철자를 입력하세요')에 응답하기 때문입니다.

이 사용자 인텐트를 Spelling 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. User 인텐트 처리 옆에 있는 Spelling 장면에서 + (더하기) 기호를 클릭합니다.
  3. 인텐트 드롭다운에서 정의를 선택합니다.

646bdcac3ad3eb0c.png

  1. 웹훅 호출을 선택하고 이벤트 핸들러 텍스트 상자에 definitionOf맞춤법 단어를 입력하여 단어 정의를 가져옵니다.
  2. 메시지 보내기를 선택합니다.
  3. speech 필드 (Enter the response that users will see or hear...)의 문장을 ‘‘`으로 바꿉니다. 실제 프롬프트는 웹훅에 의해 채워집니다.

웹훅 응답에 추천 칩 추가

  1. Start 장면에서 코드 편집기 아래의 suggestions를 클릭합니다. 이 작업을 통해 3개의 추천 칩이 추가됩니다.
  2. title 필드에서 Suggested Response'Skip'로 바꿉니다.
  3. 동일한 형식을 사용하여 'Quit'라는 추천 칩을 수동으로 추가합니다. 코드는 다음 스니펫과 같습니다.
suggestions:
      - title: 'Skip'
      - title: 'Quit'

25227545839d933f.png

  1. 저장을 클릭합니다.

skip 인텐트 만들기

skip 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 인텐트를 클릭하여 인텐트 목록을 엽니다.
  3. 인텐트 목록 끝에 있는 + (더하기 기호)를 클릭합니다. 새 인텐트의 이름을 skip로 지정하고 Enter 키를 누릅니다.
  4. skip 인텐트를 클릭하여 skip 인텐트 페이지를 엽니다.
  5. 학습 문구 추가 섹션에서 문구 입력 텍스트 상자를 클릭하고 다음 문구를 입력합니다.
  • next word
  • go next
  • next
  • skip
  • skip word

d1c4908a3d7882f8.png

  1. 저장을 클릭합니다.

Spelling 장면에 Skip 인텐트 추가

이제 작업에서 사용자가 "skip" 인텐트를 표현할 때 작업을 이해할 수 있습니다. skip 사용자 인텐트를 Spelling 장면에 추가할 수 있습니다. 사용자가 Spelling 프롬프트 ('소리나는 대로 단어의 철자를 입력하세요')에 응답하기 때문입니다.

이 사용자 인텐트를 Spelling 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. 사용자 인텐트 처리 옆에 있는 Spelling 장면에서 + (더하기) 기호를 클릭합니다.
  3. 인텐트 드롭다운에서 건너뛰기를 선택합니다.

5465f97542217964.png

  1. 오른쪽의 Transition 섹션에서 드롭다운 메뉴를 클릭하고 Spelling을 선택합니다 .

C8072485ca82bd3f.png

  1. 저장을 클릭합니다.

quit 인텐트 만들기

Quit 인텐트를 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 탐색 메뉴에서 인텐트를 클릭하여 인텐트 목록을 엽니다.
  3. 인텐트 목록 끝에 있는 + (더하기 기호)를 클릭합니다. 새 인텐트의 이름을 Quit로 지정하고 Enter 키를 누릅니다.
  4. Quit 인텐트를 클릭하여 정의 인텐트 페이지를 엽니다.
  5. 학습 문구 추가 섹션에서 문구 입력 텍스트 상자를 클릭하고 다음 문구를 입력합니다.
  • I quit
  • Goodbye
  • Cancel
  • Exit
  • Quit

9916f77b8766541e.png

  1. 저장을 클릭합니다.

Spelling 장면에 Quit 인텐트 추가

이제 작업에서 사용자가 "quit" 인텐트를 표현할 때 작업을 이해할 수 있습니다. quit 사용자 인텐트를 Spelling 장면에 추가할 수 있습니다. 사용자가 Spelling 프롬프트 ('소리나는 대로 단어의 철자를 입력하세요')에 응답하기 때문입니다.

이 사용자 인텐트를 Spelling 장면에 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. User 인텐트 처리 옆에 있는 Spelling 장면에서 + (더하기) 기호를 클릭합니다.
  3. 인텐트 드롭다운에서 quit을 선택합니다.

5f62fb18a3653d66.png

  1. 오른쪽의 Transition 섹션에서 드롭다운 메뉴를 클릭하고 End conversation을 선택합니다 . 1ffbe35a7bbbb4b0.png
  2. 저장을 클릭합니다.

phonetic_alphabet 유형 만들기

이 섹션에서는 사용자가 단어의 철자를 선택하는 데 선택할 수 있는 소리나는 알파벳 옵션을 지정하는 phonetic_alphabet라는 새 유형을 만듭니다. 사용자가 비슷한 말을 할 경우를 대비해 이러한 옵션의 동의어를 몇 가지 정의할 수도 있습니다. 이후 섹션에서 phonetic_alphabet 유형을 슬롯에 추가하여 사용자의 응답을 얻도록 지정합니다.

phonetic_alphabet 유형을 만들려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 개발을 클릭합니다.
  2. 유형에서 + (더하기) 기호를 클릭합니다.
  3. phonetic_alphabet이라고 입력하고 Enter 키를 누릅니다.
  4. phonetic_alphabet 아이콘을 클릭하여 옵션을 엽니다.
  5. 이 유형은 어떤 종류의 값을 지원하나요? 섹션에서 단어 및 동의어 옵션을 선택합니다.
  6. 항목 추가 섹션에 다음 항목과 해당 값을 입력합니다.

알파, 사과, 암스테르담

브라보, 버터, 볼티모어

찰리, 고양이, 카사블랑카

델타, 개, 덴마크

e

에코, 에드워드, 에디슨

폭스트롯, 여우, 플로리다

골프, 조지, 갈리폴리

시간

호텔, 해리, 하바나

i

인도, 잉크, 이탈리아

j

줄리엣, 조니, 예루살렘

k

킬로, 킹, 킬로그램

1

리마, 사랑, 런던

마이크, 머니, 마다가스카르

n

11월, 뉴욕, 낸시

o

오스카, 주황색, 오슬로

파파, 파리, 피터

q

퀘벡, 퀸

r

로메오, 로마, 로버트

시에라, 설탕, 산티아고

탱고, 토미, 트리폴리

u

제복, 우산, 삼촌

v

빅터, 식초, 발렌시아

위스키, 윌리엄, 워싱턴

엑스레이

양키, 노란색, 요커

z

줄루, 얼룩말, 취리히

키-값 표는 다음과 같이 표시됩니다.

5b5a5cd9fa557e1b.png

  1. 저장을 클릭합니다.

슬롯 채우기 구성

다음으로 맞춤법 장면에서 슬롯 채우기를 구성해야 합니다. 슬롯 채우기 로직을 구성하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. 슬롯 채우기Spelling 장면에서 + (더하기)를 클릭합니다.
  3. 슬롯 이름 입력 필드에 userresponse를 슬롯 이름으로 추가합니다.
  4. 유형 선택 드롭다운에서 슬롯 유형으로 phonetic_alphabet을 선택합니다.
  5. 이 슬롯에서 값 목록을 허용함을 선택합니다.
  6. 필수 슬롯입니다를 선택합니다.
  7. 슬롯 값 기록 맞춤설정 옵션을 선택하고 세션 매개변수 텍스트 상자에 사용자 응답을 입력합니다.

ba57a419877a07f3.png

  1. 저장을 클릭합니다.

Spelling 화면에 조건 추가

Spelling 장면에 조건을 추가하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 맞춤법 검사 장면을 클릭합니다.
  2. 조건 옆에 있는 Spelling 장면에서 + (더하기) 기호를 클릭합니다.
  3. 조건으로 scene.slots.status == "FINAL" 입력
  4. 웹훅 호출을 선택하고 이벤트 핸들러 텍스트 상자에 verifyQualingWord를 입력하여 사용자 응답을 확인합니다.
  5. 메시지 보내기를 선택합니다.
  6. speech필드 (Enter the response that users will see or hear...)의 문장을 {}로 바꿉니다. 실제 프롬프트는 웹훅에 의해 채워집니다.

웹훅 응답에 추천 칩 추가

  1. Start 장면에서 코드 편집기 아래의 suggestions를 클릭합니다. 이 작업을 통해 3개의 추천 칩이 추가됩니다.
  2. title 필드에서 Suggested Response'Next'로 바꿉니다.
  3. 동일한 형식을 사용하여 'Quit'라는 추천 칩을 수동으로 추가합니다. 코드는 다음 스니펫과 같습니다.
suggestions:
      - title: 'Next'
      - title: 'Quit'

ac3d7a9366ebc1b1.png

  1. 저장을 클릭합니다.

12. 시뮬레이터에서 맞춤법 연습 테스트

시뮬레이터에서 작업을 테스트하려면 다음 단계를 따르세요.

  1. 탐색 메뉴에서 Test를 클릭하여 시뮬레이터로 이동합니다.
  2. 시뮬레이터에서 작업을 테스트하려면 입력 필드에 Talk to Spelling Practice를 입력합니다.
  3. Enter를 누릅니다. 작업에서 Main invocation 프롬프트와 추가된 Start 장면 프롬프트인 'Welcome to 맞춤법 연습. 알파벳을 사용하여 단어의 철자를 입력합니다. 예를 들어 a는 알파, b는 브라보, c는 찰리 등입니다. 계속할까요?"
  4. 계속하려면 라고 말하세요.
  5. 시뮬레이터에서 단어 소리를 재생하여 철자를 입력합니다.
  6. 발음 기호를 사용하여 단어의 철자를 입력할 수 있습니다. 예를 들어 더 잘하려면 'bravo echo tango tango echo romeo'라고 말하거나 입력합니다.
  7. 시뮬레이터가 정답 또는 오답으로 응답합니다.
  8. next라고 말하여 다음 단어를 계속하거나 quit이라고 말하여 게임 루프를 종료합니다.

13. 수고하셨습니다

축하합니다. 맞춤법 연습 게임을 성공적으로 빌드했습니다.

지금까지 Cloud Firestore, Cloud Functions, Google 어시스턴트 작업 빌더를 사용하여 게임을 빌드하는 데 필요한 주요 단계를 알아봤습니다.

학습한 내용

  • Cloud Firestore와 상호작용하는 방법
  • 슬롯을 사용하여 사용자로부터 데이터를 수집하는 방법
  • 사용자 입력을 처리하고 응답을 반환하는 방법
  • 조건을 사용하여 장면에 로직을 추가하는 방법
  • 게임 루프 추가 방법

추가 학습 리소스

Google 어시스턴트용 작업을 빌드하는 방법을 알아보려면 다음 리소스를 살펴보세요.

프로젝트 정리하기[권장]

요금이 청구되지 않도록 하려면 사용하지 않을 프로젝트를 삭제하는 것이 좋습니다. 이 Codelab에서 만든 프로젝트를 삭제하려면 다음 단계를 따르세요.

  1. Firebase 프로젝트 및 리소스를 삭제하려면 프로젝트 종료 (삭제) 섹션에 나열된 단계를 완료합니다.

주의: Google Cloud Console의 설정 페이지에서 삭제할 올바른 프로젝트를 선택해야 합니다.

  1. 선택사항: Actions 콘솔에서 프로젝트를 즉시 삭제하려면 프로젝트 삭제 섹션에 나열된 단계를 완료합니다. 이 단계를 완료하지 않으면 프로젝트가 약 30일 후에 자동으로 삭제됩니다.

Twitter에서 @ActionsOnGoogle@Firebase를 팔로우하여 최신 소식을 확인하고 #GoogleIO에 트윗을 보내 직접 빌드한 결과물을 공유하세요.