Jogo de prática de ortografia usando Google Assistant e Cloud Firestore

1. Visão Geral

A plataforma de desenvolvedor do Google Assistant permite criar software para estender a funcionalidade do Google Assistant, um assistente pessoal virtual, em mais de 1 bilhão de dispositivos, incluindo alto-falantes inteligentes, telefones, carros, TVs, fones de ouvido e muito mais. Os usuários conversam com o Assistente para realizar tarefas, como comprar mantimentos ou reservar uma viagem. Como desenvolvedor, você pode usar a plataforma de desenvolvedor Assistant para criar e gerenciar facilmente experiências de conversação agradáveis ​​e eficazes entre usuários e seu próprio serviço de atendimento terceirizado.

Este codelab aborda conceitos de nível intermediário para desenvolvimento com Google Assistant, Cloud Functions e Cloud Firestore. Neste codelab, você criará um jogo chamado "Prática de Ortografia" que usa o Google Assistente para pedir aos usuários que soletrem palavras.

O que você construirá

Neste codelab, você criará um jogo sofisticado com as seguintes funcionalidades:

• Recebe respostas ortográficas do usuário e, dependendo do valor, modifica os prompts de conversação
• Responde com dicas relacionadas à ortografia da palavra, como sua definição ou repetição da palavra
• Cria um loop de jogo para que um usuário possa interagir com o Assistente novamente após soletrar a palavra

Antes de começar a construir, você pode interagir com a ação ao vivo em seu dispositivo habilitado para Google Assistente dizendo "Ok Google, fale com o praticante de ortografia". O caminho padrão através desta ação para um usuário que retorna é semelhante à seguinte interação:

Quando você terminar este codelab, sua ação concluída terá o seguinte fluxo de conversa:

O que você aprenderá

• Como interagir com o Cloud Firestore
• Como usar slots para coletar dados do usuário
• Como processar a entrada de um usuário e retornar uma resposta
• Como usar condições para adicionar lógica a uma cena
• Como adicionar um loop de jogo

O que você precisará

Os pré-requisitos para este codelab incluem o seguinte:

• Um navegador da web, como o Google Chrome
• Um IDE para escrever Cloud Functions.
• Um método de pagamento. Este codelab utiliza o Cloud Functions para Firebase, que exige que seu projeto esteja no plano de preços Firebase Blaze ( saiba mais ).
• Um terminal para executar comandos shell
• Node.js 10 ou posterior

2. Obtenha o código de funções

Clone o repositório GitHub na linha de comando:

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

3. Crie um projeto Firebase e configure seu aplicativo

Crie um projeto do Firebase

1. Faça login no Firebase .
2. No console do Firebase, clique em Adicionar projeto (ou Criar um projeto ) e nomeie seu projeto do Firebase Spelling-Practice .

3. Clique nas opções de criação do projeto. Aceite os termos do Firebase, se solicitado. Ignore a configuração do Google Analytics porque você não usará o Analytics para este aplicativo.

Para saber mais sobre os projetos do Firebase, consulte Entender os projetos do Firebase .

Atualize para o plano de preços Blaze

Para usar o Cloud Functions para Firebase, você precisará atualizar seu projeto do Firebase para o plano de preços Blaze , o que significa que você anexará uma conta do Google Cloud Billing ao seu projeto. Isso exige que você forneça um cartão de crédito ou outro método de pagamento.

Todos os projetos do Firebase, incluindo aqueles do plano Blaze, ainda têm acesso às cotas de uso gratuitas do Cloud Functions. As etapas descritas neste codelab estarão dentro dos limites de uso gratuito. No entanto, você verá pequenas cobranças ( cerca de US$ 0,03 ) do Cloud Storage, que é usado para hospedar suas imagens de compilação do Cloud Functions.

4. Instale a CLI do Firebase

A Firebase CLI (interface de linha de comando) permite implantar suas Cloud Functions.

Existem várias opções para instalar a CLI do Firebase, dependendo do seu sistema operacional e caso de uso. As etapas a seguir descrevem a opção mais comum se você também estiver usando o Cloud Functions.

1. Certifique-se de ter instalado o npm , que normalmente vem com o Node.js.
2. Instale ou atualize a CLI executando o seguinte comando npm:

$ npm -g install firebase-tools

3. Verifique se a CLI foi instalada corretamente executando:

$ firebase --version

Certifique-se de que a versão da CLI do Firebase seja 9.0.0 ou posterior para que ela tenha todos os recursos mais recentes necessários para o Cloud Functions. Caso contrário, execute npm install -g firebase-tools para atualizar conforme mostrado acima.

4. Autorize a CLI do Firebase executando:

$ firebase login

5. No diretório Spelling-Functions-Start, configure a CLI do Firebase para usar seu projeto do Firebase. Execute o seguinte comando, selecione o ID do projeto e siga as instruções. Quando solicitado, você pode escolher qualquer Alias, como codelab , por exemplo.

$ firebase use --add

5. O diretório de funções

Agora você adicionará funcionalidades usando o SDK do Firebase para Cloud Functions para criar o back-end do jogo Spelling Practice .

O Cloud Functions permite que você tenha código executado na nuvem sem precisar configurar um servidor. Este codelab mostrará como criar funções que reagem a eventos do Firebase Authentication, Cloud Storage e Firebase Realtime Database. Vamos começar com autenticação.

Ao usar o SDK do Firebase para Cloud Functions, o código de funções ficará no diretório functions (por padrão). Para facilitar para você, já criamos o arquivo functions/index.js onde irá seu código. Sinta-se à vontade para inspecionar o diretório functions antes de prosseguir.

$ cd functions
$ ls

Seu código de funções também é um aplicativo Node.js e, portanto, precisa de um package.json que forneça algumas informações sobre seu aplicativo e liste dependências.

Se você não estiver familiarizado com o Node.js , será útil saber mais sobre ele antes de continuar o codelab.

O arquivo package.json já lista duas dependências necessárias: o SDK do Firebase para Cloud Functions e o SDK Admin do Firebase . Para instalá-los localmente, execute npm install no diretório functions :

$ npm install

Vamos agora dar uma olhada no arquivo 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.

Primeiro você importará os módulos necessários e depois escreverá quatro funções no lugar dos TODOs. Continue na próxima etapa do codelab para importar os módulos.

6. Importe os módulos necessários

Este codelab requer três módulos.

• O módulo firebase-functions nos permite escrever os gatilhos para nossas Cloud Functions
• O módulo firebase-admin nos permite usar a plataforma Firebase em um servidor com acesso de administrador, por exemplo, para gravar no Cloud Firestore.
• A Actions SDK Node.js Fulfillment Library atende aos manipuladores do Actions SDK para o Google Assistant.

1. Instale o Actions SDK executando o seguinte comando npm:

$ npm install @assistant/conversation

2. No arquivo index.js , substitua o primeiro TODO pelo seguinte.

Essas alterações importam cada um dos módulos necessários.

Além disso, o SDK Admin do Firebase pode ser configurado automaticamente quando implantado em um ambiente do Cloud Functions ou em outro contêiner do Google Cloud. Isso é o que acontece quando chamamos admin.initializeApp(); nas alterações abaixo.

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.

Agora vamos adicionar lógica de negócios usando funções para dar suporte a ações do assistente.

7. Crie funções

Obtenha as definições das palavras e grave-as no Cloud Firestore

Você usará a API pública dictionaryapi.dev para obter as definições de palavras.

No arquivo index.js , substitua TODO por getWordDetailsFromDictionaryAPI pelo seguinte:

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

Adicionar um gatilho do Cloud Firestore

A seguir, você criará uma Cloud Function que é acionada sempre que um novo documento é criado no Cloud Firestore. Ele chamará a API dictionaryapi.dev para obter definições de palavras por meio da função getWordDetailsFromDictionaryAPI que escrevemos acima.

No arquivo index.js , substitua TODO para createSpellingPracticeWord pelo seguinte:

index.js

// Gatilho do Firestore que busca definições de palavras por meio de getWordDetailsFromDictionaryAPI para cada novo documento do Firestore

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

Obtenha uma lista de palavras para o jogo

Você pode escrever uma função do Cloud que recupera uma lista de palavras de prática ortográfica do Cloud Firestore para o Assistant. Para isso, usamos o manipulador de aplicativos.

No arquivo index.js , substitua TODO para getSpellingWordList pelo seguinte.

Adicionar esta função ao app.handle especial é uma forma de tornar a função acessível a partir do Assistente.

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

Receba uma palavra da sessão do Assistente

Você pode escrever uma função do Cloud que retorne a próxima palavra ortográfica da lista de palavras.

No arquivo index.js , substitua TODO para getSpellingWord pelo seguinte:

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

Habilite o jogo para repetir a palavra

Você pode escrever uma Cloud Function que repete a palavra atual do jogo.

No arquivo index.js , substitua TODO por repeatSpellingWord pelo seguinte:

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

Obtenha a definição da palavra

Você pode escrever uma Cloud Function que forneça a definição da palavra atual do jogo.

No arquivo index.js , substitua TODO por definitionOfSpellingWord pelo seguinte:

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

Verifique a resposta ortográfica do usuário

Você pode escrever uma Cloud Function que verifica a resposta do usuário sobre como soletrar a palavra atual do jogo.

No arquivo index.js , substitua TODO para verifySpellingWord pelo seguinte:

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

Implante todas as suas funções

Suas Cloud Functions só estarão ativas depois de serem implantadas no Firebase.

Na raiz do diretório spelling-functions-start , execute o seguinte comando:

$ firebase deploy --only functions

Esta é a saída do console que você deverá ver:

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

Anote o URL do endpoint Http da função ActionsOnGoogleFulfillment para uso posterior. Para obter o endpoint, abra o Firebase Console e clique em projeto de prática ortográfica . Abra o painel de funções para visualizar o ponto final das funções.

Você concluiu a adição de todas as funções necessárias. Agora vamos configurar o Cloud Firestore.

8. Habilite o Cloud Firestore

Você precisará ativar o Cloud Firestore.

Na seção Build do console do Firebase, clique em Firestore . Em seguida, clique em Criar banco de dados .

O acesso aos dados no Cloud Firestore é controlado por regras de segurança. Primeiro você precisa definir algumas regras básicas sobre os dados para começar. Clique em Firestore e, na guia Regras do console do Firebase, adicione as seguintes regras e clique em Publicar .

As regras a seguir restringem o acesso aos dados aos usuários que estão conectados, o que impede que usuários não autenticados leiam ou gravem.

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. Adicione dados de ortografia de palavras ao Cloud Firestore

Nesta etapa, você gravará dados de ortografia de palavras no Cloud Firestore para poder gerar uma lista de palavras para o Assistente (e para o jogo).

Os dados do Cloud Firestore são estruturados em coleções, documentos, campos e subcoleções. Cada palavra do jogo será armazenada como seu próprio documento em uma coleção de nível superior chamada wordlist . Para cada novo documento na coleção Firestore, a função createSpellingPracticeWord será acionada para obter os detalhes da palavra do serviço API do Dicionário .

Crie uma coleção do Cloud Firestore

1. No console do Firebase, navegue até a seção Cloud Firestore.
2. Clique em + Iniciar coleta .
3. Na caixa de texto ID da coleção , insira wordlist e clique em Avançar .

A seguir, criaremos um documento para uma palavra: acordo

4. Na caixa de texto ID do documento , insira agreement .
5. Na caixa de texto Campo , insira word e na caixa de texto Valor insira agreement .
6. Clique em Salvar .

Quando você adiciona este documento ao Cloud Firestore, ele aciona a função createSpellingPracticeWord para buscar os detalhes da definição da palavra. Adicione mais palavras (por exemplo: admiração, carro, verdade, contar, melhor, deslocamento, ...) criando um novo documento para cada palavra.

10. Configure o Google Assistente

As seções a seguir descrevem como configurar seu ambiente de desenvolvimento do Google Assistant e criar seu projeto Actions.

Verifique suas configurações de permissão do Google

Para testar a ação criada neste codelab, você precisa ativar as permissões necessárias para que o simulador possa acessar sua ação. Para habilitar permissões, siga estas etapas:

1. Vá para a página Controles de atividades .
2. Faça login com sua Conta do Google, caso ainda não tenha feito isso.
3. Habilite as seguintes permissões:

• Atividade na Web e de aplicativos
• Em Atividade na Web e de apps , marque a caixa de seleção ao lado de Incluir histórico do Chrome e atividades de sites, aplicativos e dispositivos que usam serviços do Google .

Criar um projeto do Actions

Seu projeto Actions é um contêiner para sua Action. Para criar seu projeto do Actions para este codelab, siga estas etapas:

1. Abra o console de Ações .
2. Clique em Novo projeto .
3. Aceite os termos de serviço

4. Digite ou selecione spelling-practice-codelab que você criou usando o Firebase Console. (O nome é para sua referência interna. Posteriormente, você pode definir um nome externo para o seu projeto.)

5. Clique em Importar projeto .
6. Na seção Que tipo de ação você deseja construir? tela, selecione o cartão Personalizado .
7. Clique em Avançar .
8. Selecione o cartão de projeto em branco .
9. Clique em Iniciar construção .
10. Insira Prática de Ortografia para o nome de exibição e clique em salvar.

Os usuários iniciam a conversa com sua Action por meio de invocação . Por exemplo, os usuários podem invocar sua ação dizendo uma frase como "Ok Google, fale com o Spelling Practice", onde Spelling Practice é o nome de exibição.

Sua Action deverá ter um nome de exibição se você quiser implantá-la em produção; entretanto, para testar sua ação, você não precisa definir o nome de exibição. Em vez disso, você pode usar a frase "Fale com meu aplicativo de teste" no simulador para invocar sua ação.

Configurar atendimento

Você precisa conectar ao Assistant os manipuladores de eventos do Cloud Functions que você escreveu e implantou anteriormente neste codelab.

Para configurar seu atendimento, siga estas etapas:

1. Clique em Webhook na navegação lateral.
2. Selecione endpoint HTTPS como opção de atendimento:

3. Insira a URL do endpoint da sua função na caixa de texto Endpoint HTTPs e clique em Salvar .

Na próxima seção, você personalizará o prompt da sua invocação principal no console do Actions.

Configurar a invocação principal

Você deve editar a invocação principal para definir o que acontece depois que um usuário invoca sua ação.

Por padrão, o Actions Builder fornece um prompt genérico quando sua invocação é acionada ( "Comece a construir sua ação definindo a invocação principal.").

Para modificar o prompt que sua ação envia de volta ao usuário quando ele invoca sua ação, siga estas etapas:

1. Clique em Chamada principal na navegação.

2. Marque Call your webhook e adicione o nome do manipulador de eventos getSpellingWordList na caixa de texto.
3. No editor de código, substitua o texto no campo de speech pela seguinte mensagem de boas-vindas: Welcome to Spelling Practice

Observação: você pode usar a formatação YAML ou JSON para editar seus prompts.

4. Clique em Salvar .

Teste a invocação principal no simulador

O console do Actions fornece uma ferramenta da web para testar sua ação chamada simulador . A interface simula dispositivos de hardware e suas configurações, para que você possa conversar com sua Action como se ela estivesse sendo executada em um Smart Display, telefone, alto-falante ou KaiOS.

Para testar a invocação principal da sua Action no simulador, siga estes passos:

1. Na barra de navegação superior, clique em Testar para acessar o simulador.
2. Para invocar sua ação no simulador, digite Talk to Spelling Practice no campo de entrada no canto superior esquerdo e pressione Enter no teclado.

Quando você aciona a invocação principal da sua ação, o Assistente responde com sua mensagem de boas-vindas personalizada. Neste ponto, a conversa termina após o Assistente responder com uma saudação.

Ver logs de eventos

Quando você está na guia Teste , o painel à direita mostra os logs de eventos , que exibem o histórico de conversas como logs de eventos. Cada log de eventos exibe os eventos que acontecem durante aquele turno da conversa. Para visualizar o log de eventos, clique no ícone cinza antes do evento.

Atualmente, sua ação possui um log de eventos, que mostra a entrada do usuário ( "Talk to Spelling Practice" ) e a resposta da sua ação. A captura de tela a seguir mostra o log de eventos da sua ação:

11. Construa a conversa para a prática ortográfica

Agora que você definiu o que acontece depois que um usuário invoca sua Action, você pode desenvolver o restante da conversa da sua Action. O Spelling Practice tem quatro cenas e você deve ativar cada cena antes que ela possa ser executada. A maneira mais comum de ativar uma cena é configurar sua ação para que, quando um usuário corresponder a uma intenção de usuário em uma cena, essa intenção acione a transição para outra cena e a ative.

Transição da invocação principal para a cena inicial

Nesta seção, você cria uma nova cena chamada Start , que envia um prompt ao usuário perguntando se ele gostaria de começar a jogar Spelling Practice . Você também adiciona uma transição da invocação principal para a nova cena Start .

Para criar esta cena e adicionar uma transição a ela, siga estes passos:

1. Clique em Desenvolver na navegação superior. Em seguida, clique em Invocação principal na navegação esquerda.
2. Na seção Transição à direita, clique no menu suspenso e digite Start no campo de texto.

3. Clique em Adicionar . Isso cria uma cena chamada Start e instrui a Action a fazer a transição para a cena Start depois que a Action entrega o prompt de boas-vindas ao usuário.
4. Clique em Cenas na navegação esquerda para mostrar a lista de cenas.
5. Em Cenas , clique em Iniciar para ver a cena Start .
6. Clique em + na seção On enter da cena Start .
7. Selecione Enviar prompts .
8. Substitua a frase no campo speech ( Enter the response that users will see or hear... ) por uma pergunta a ser feita ao usuário: Use phonetic alphabet to spell the word. For example alpha for a, bravo for b, charlie for c etc. Do you want to continue?

Os chips de sugestões oferecem sugestões clicáveis ​​para o usuário que sua ação processa como entrada do usuário. Nesta seção, você adiciona fichas de sugestões que aparecem abaixo do prompt que você acabou de configurar ( Do you want to play

Spelling Practice

? ) para oferecer suporte a usuários em dispositivos com telas.

Para adicionar chips de sugestão ao prompt da cena Start , siga estas etapas:

9. Na cena Start , clique em sugestões abaixo do editor de código. Esta ação adiciona um único chip de sugestão.
10. No campo title , substitua Suggested Response por 'Yes' .
11. Usando a mesma formatação, adicione manualmente um chip de sugestão intitulado 'No' e 'Help with Phonetics' . Seu código deve se parecer com o seguinte trecho:
12. Clique em Salvar .

Teste sua ação no simulador

Neste ponto, sua ação deve fazer a transição da invocação principal para a cena inicial e perguntar ao usuário se ele deseja continuar. Fichas de sugestões também deverão aparecer na exibição simulada.

Para testar sua Action no simulador, siga estes passos:

1. Na barra de navegação, clique em Testar para ir ao simulador.
2. Para testar sua ação no simulador, digite Talk to Spelling Practice no campo de entrada.
3. Pressione Enter . Sua ação deve responder com o prompt Main invocation e o prompt de cena Start adicionado, "Bem-vindo à prática de ortografia. Use o alfabeto fonético para soletrar a palavra. Por exemplo, alfa para a, bravo para b, charlie para c etc. Você deseja continuar?" .

A captura de tela a seguir mostra essa interação:

4. Clique no chip de sugestão Yes ou No ou Help with Phonetics para responder ao prompt. (Você também pode dizer "Sim" ou "Não" ou "Ajuda com Fonética" ou inserir Yes ou No ou Help with Phonetics no campo de entrada .)

Quando você responde ao prompt, sua Action responde com uma mensagem indicando que não consegue entender sua entrada: "Desculpe, não entendi. Você pode tentar novamente?" Como você ainda não configurou sua ação para entender e responder à entrada "Sim" ou "Não" , sua ação corresponde à sua entrada com uma intenção NO_MATCH .

Por padrão, a intenção do sistema NO_MATCH fornece respostas genéricas, mas você pode personalizar essas respostas para indicar ao usuário que você não entendeu a entrada. O Assistente encerra a conversa do usuário com sua ação depois que ela não consegue corresponder a entrada do usuário três vezes.

Adicione intenções não e fonéticas

Agora que os usuários podem responder às perguntas feitas pela sua ação, você pode configurá-la para entender as respostas dos usuários ( "Sim" ou "Não" ou "Ajuda com fonética" ). Nas seções a seguir, você cria intenções de usuário que correspondem quando o usuário diz "Sim" ou "Não" ou "Ajuda com Fonética" e adiciona essas intenções à cena Start . Usaremos a intenção do sistema yes e criaremos outras intenções.

Não crie no intenção

Agora, você precisa criar a intenção de no entender e responder ao usuário quando ele não quiser jogar. Para criar essa intenção, siga estas etapas:

1. Clique em Desenvolver na navegação.
2. Clique em Intenções personalizadas na navegação para abrir a lista de intenções.
3. Clique em + (sinal de mais) no final da lista de intenções. Nomeie a nova intenção no e pressione Enter .
4. Clique em não para abrir a página no intenção.
5. Na seção Adicionar frases de treinamento , clique na caixa de texto Inserir frase e insira as seguintes frases:

• No
• N
• I don't want
• nope

6. Clique em Salvar .

no adicione nenhuma intenção à cena Start

Agora, a Action pode entender quando um usuário está expressando "no" ou algo semelhante a "no" , como "nope" . Você precisa adicionar a intenção no usuário à cena Start porque o usuário está respondendo ao prompt Start (" Bem-vindo à prática de ortografia. Use o alfabeto fonético para soletrar a palavra. Por exemplo, alfa para a, bravo para b, charlie para c etc. Deseja continuar?" ).

Para adicionar esta intenção à cena Start , siga estas etapas:

1. Clique na cena inicial na navegação.
2. Clique no + (sinal de mais) na cena Start ao lado de Tratamento de intenção do usuário.
3. Na seção Intenção , selecione não no menu suspenso.

4. Clique em Enviar prompts e atualize o campo speech com o seguinte texto: Good Bye .

O código em seu editor deve ser semelhante ao seguinte trecho:

candidates:
  - first_simple:
      variants:
        - speech: >-
             Goodbye.

5. Na seção Transição , selecione Encerrar conversa no menu suspenso.
6. Clique em Salvar .

Não teste no intenção no simulador

Neste ponto, sua Action entende quando o usuário não quer jogar e retorna a resposta adequada.

Para testar essa intenção no simulador, siga estas etapas:

1. Na barra de navegação, clique em Testar .
2. Digite Talk to Spelling Practice no campo de entrada e pressione Enter .
3. Digite No no campo Entrada e pressione Enter. Como alternativa, clique no ícone Sem sugestão.

Adicionar intenção do sistema YES para Start a cena

Agora, adicionaremos a intenção SYSTEM "YES" à cena Start , já que o usuário está respondendo sim ao prompt Start (" Bem-vindo à prática de ortografia. Use o alfabeto fonético para soletrar a palavra. Por exemplo, alfa para a, bravo para b, charlie para c etc. Quer continuar?" ).

Para adicionar esta intenção do usuário à cena Start , siga estas etapas:

1. Clique na cena inicial na navegação.
2. Clique no + (sinal de mais) na cena Start ao lado de Tratamento de intenção do usuário .
3. Em Todas as intenções do sistema, selecione SIM no menu suspenso de intenções.

4. Clique em Chame seu webhook e atualize a caixa de texto event handler com a função que você criou anteriormente: getSpellingWordList
5. Na seção Transição , clique no menu suspenso e selecione Encerrar conversa .
6. Clique em Salvar .

Teste a intenção YES no simulador

Neste ponto, sua Action entende quando o usuário deseja jogar e retorna a resposta adequada.

Para testar essa intenção no simulador, siga estas etapas:

1. Na barra de navegação, clique em Testar .
2. Para testar sua ação no simulador, digite Talk to Spelling Practice no campo Input e pressione Enter .
3. Digite Yes no campo Entrada e pressione Enter . Como alternativa, clique no ícone de sugestão Yes .

Sua ação busca uma lista de todas as palavras de prática ortográfica e as armazena na sessão. Sua ação encerra a sessão porque você selecionou a transição End conversation para a intenção YES .

Criar intenção Phonetics

Para criar a intenção Phonetics , siga estas etapas:

1. Clique em Desenvolver na navegação.
2. Clique em Intenções personalizadas na navegação para abrir a lista de intenções.
3. Clique em + (sinal de mais) no final da lista de intenções. Nomeie a nova phonetics da intenção e pressione Enter .
4. Clique na intenção phonetics para abrir a página de intenção phonetics .
5. Na seção Adicionar frases de treinamento, clique na caixa de texto Inserir frase e insira as seguintes frases:

• how do I spell words
• phonetics
• help me with phonetics
• phonetic alphabet

6. Clique em Salvar .

Adicionar intenção phonetics à cena Start

Agora, a Action pode entender quando um usuário está expressando uma intenção “fonética” . Você pode adicionar a intenção do usuário phonetics à cena Start , pois o usuário está respondendo ao prompt Start (" Bem-vindo ao treino ortográfico. Use o alfabeto fonético para soletrar a palavra. Por exemplo, alfa para a, bravo para b, charlie para c etc. Deseja continuar?" ).

Para adicionar esta intenção do usuário à cena Start , siga estas etapas:

1. Clique na cena inicial na navegação.
2. Clique no + (sinal de mais) na cena Start ao lado de Tratamento de intenção do usuário.
3. Selecione fonética no menu suspenso de intenções.

4. Na seção Transição , clique no menu suspenso e selecione Encerrar conversa.
5. Clique em Salvar .

Transição da cena inicial para a cena de ortografia

Nesta seção, você cria uma nova cena chamada Ortografia , que envia um prompt ao usuário para soletrar a palavra usando o alfabeto fonético.

Para criar esta cena e adicionar uma transição a ela, siga estes passos:

1. Clique em Desenvolver na navegação superior. Em seguida, clique em Iniciar cena na navegação esquerda.
2. Na seção Tratamento de intenção do usuário, clique when actions.intent.YES is matched e à direita na seção de transição , clique no menu suspenso e digite Spelling no campo de texto.
3. Clique em Adicionar . Isso cria uma cena chamada Spelling e diz à Ação para fazer a transição para a cena Spelling após a correspondência com a intenção YES.
4. Expanda Cenas na navegação esquerda para mostrar a lista de cenas.
5. Em Cenas , clique em Ortografia para ver a cena Spelling .
6. Clique em + na seção Ao entrar da cena Spelling .
7. Clique em Chame seu webhook e insira getSpellingWord na caixa de texto do manipulador de eventos.
8. Selecione Enviar prompts .
9. Substitua a frase no campo speech ( Enter the response that users will see or hear... ) por {} . O prompt real será preenchido pelo webhook.

Os chips de sugestões oferecem sugestões clicáveis ​​para o usuário que sua ação processa como entrada do usuário.

Para adicionar chips de sugestão ao prompt da cena Spelling , siga estas etapas:

10. Na cena Spelling , clique nas sugestões abaixo do editor de código. Esta ação adiciona três fichas de sugestões.
11. No campo title , substitua Suggested Response por 'Repeat' .
12. Usando a mesma formatação, adicione manualmente um ícone de sugestão intitulado 'Skip' .
13. Usando a mesma formatação, adicione manualmente um ícone de sugestão intitulado 'Quit' . Seu código deve se parecer com o seguinte trecho:
14. Clique em Salvar .

suggestions:
      - title: 'Repeat'
      - title: 'Skip'
      - title: 'Quit'

Criar intenção Repeat

Para criar a intenção repeat , siga estas etapas:

1. Clique em Desenvolver na navegação.
2. Clique em Intenções personalizadas na navegação para abrir a lista de intenções.
3. Clique em + (sinal de mais) no final da lista de intenções. Nomeie a nova intenção repeat e pressione Enter .
4. Clique na intenção de repeat para abrir a página de intenção definition .
5. Na seção Adicionar frases de treinamento , clique na caixa de texto Inserir frase e insira as seguintes frases:

• one more time please
• say the word again
• repeat the word
• tell me again
• repeat

6. Clique em Salvar .

Adicionar intenção repeat à cena Spelling

Agora, a Action pode entender quando um usuário está expressando uma intenção de “repetição” . Você pode adicionar a intenção repeat do usuário à cena Spelling , já que o usuário está respondendo ao prompt Spelling (" Soletre a palavra usando o alfabeto fonético ").

Para adicionar esta intenção do usuário à cena Spelling , siga estas etapas:

1. Clique na cena Ortografia na navegação.
2. Clique no + (sinal de mais) na cena Spelling ao lado de Tratamento da intenção do usuário .
3. Selecione repetir no menu suspenso de intenções.

4. Marque Chame seu webhook e insira repeatSpellingWord na caixa de texto do manipulador de eventos para obter a definição da palavra.
5. Marque Enviar prompts .
6. Substitua a frase no campo speech ( Enter the response that users will see or hear... ) por ''. O prompt real será preenchido pelo webhook.

Adicione chips de sugestão a "Quando a repetição for correspondida"

7. Em " Quando a repetição é correspondida " em Tratamento da intenção do usuário, clique nas sugestões abaixo do editor de código. Esta ação adiciona três fichas de sugestões.
8. No campo title , substitua Suggested Response por 'Skip' .
9. Usando a mesma formatação, adicione manualmente um ícone de sugestão intitulado 'Quit' . Seu código deve ser semelhante ao seguinte snippet:

suggestions:
      - title: 'Skip'
      - title: 'Quit'

10. Clique em Salvar.

Criar intenção definition

Para criar a intenção definition , siga estas etapas:

1. Clique em Desenvolver na navegação.
2. Clique em Intenções personalizadas na navegação para abrir a lista de intenções.
3. Clique em + (sinal de mais) no final da lista de intenções. Nomeie a nova definition de intenção e pressione Enter .
4. Clique na intenção definition para abrir a página de intenção definition .
5. Na seção Adicionar frases de treinamento , clique na caixa de texto Inserir frase e insira as seguintes frases:

• I would like to know the definition
• tell me the definition
• what does it mean
• meaning
• definition
• what is the definition?

6. Clique em Salvar .

Adicionar intenção definition à cena Spelling

Agora, a Action pode entender quando um usuário está expressando uma intenção de “definição” . Você pode adicionar a definition de intenção do usuário à cena Spelling , já que o usuário está respondendo ao prompt Spelling (" Soletre a palavra usando o alfabeto fonético ").

Para adicionar esta intenção do usuário à cena Spelling , siga estas etapas:

1. Clique na cena Ortografia na navegação.
2. Clique no + (sinal de mais) na cena Spelling ao lado de Tratamento da intenção do usuário .
3. Selecione a definição no menu suspenso de intenções.

4. Verifique a chamada de seu webhook e insira a DefinitionOfSellingWord na caixa de texto Handler para obter a definição da palavra.
5. Verifique os prompts de envio .
6. Substitua a frase no campo speech ( Enter the response that users will see or hear... ) por '' `. O prompt real será preenchido pelo Webhook.

Adicione chips de sugestão à resposta da webhook

7. Na cena Start , clique em sugestões abaixo do editor de código. Esta ação adiciona três chips de sugestão.
8. No campo title , substitua Suggested Response por 'Skip' .
9. Usando a mesma formatação, adicione manualmente um chip de sugestão intitulado 'Quit' . Seu código deve parecer o seguinte snippet:

suggestions:
      - title: 'Skip'
      - title: 'Quit'

10. Clique em Salvar .

Crie intenção skip

Para criar a intenção skip , siga estas etapas:

1. Clique em desenvolver na navegação.
2. Clique em intenções na navegação para abrir a lista de intenções.
3. Clique em + (mais sinal) no final da lista de intenções. Nomeie o novo skip intenção e pressione Enter .
4. Clique na intenção skip para abrir a página de intenção skip .
5. Na seção Adicionar frases de treinamento , clique na caixa de texto Digite a frase e insira as seguintes frases:

• next word
• go next
• next
• skip
• skip word

6. Clique em Salvar .

Adicione a intenção de Skip a cena Spelling

Agora, a ação pode entender quando um usuário está expressando uma intenção de "pular" . Você pode adicionar a intenção do usuário skip à cena Spelling , pois o usuário está respondendo ao prompt Spelling (" Setra a palavra usando o alfabeto fonético ").

Para adicionar essa intenção do usuário à cena Spelling , siga estas etapas:

1. Clique na cena da ortografia na navegação.
2. Clique no + (mais sinal) na cena Spelling ao lado da intenção do usuário Handlin G.
3. Selecione Skip no suspensão da intenção.

4. Na seção de transição à direita, clique no menu suspenso e selecione Spelling .

5. Clique em Salvar .

Crie quit Intent

Para criar a intenção Quit , siga estas etapas:

1. Clique em desenvolver na navegação.
2. Clique em intenções na navegação para abrir a lista de intenções.
3. Clique em + (mais sinal) no final da lista de intenções. Nomeie a nova intenção Quit e pressione Enter .
4. Clique na intenção de Quit de abrir a página de intenção de definição .
5. Na seção Adicionar frases de treinamento , clique na caixa de texto Digite a frase e insira as seguintes frases:

• I quit
• Goodbye
• Cancel
• Exit
• Quit

6. Clique em Salvar.

Adicione a intenção Quit de Spelling

Agora, a ação pode entender quando um usuário está expressando uma intenção de "parar" . Você pode adicionar a intenção do usuário quit ao cenário Spelling , já que o usuário está respondendo ao prompt Spelling (" Setra a palavra usando o alfabeto fonético ").

Para adicionar essa intenção do usuário à cena da Spelling , siga estas etapas:

1. Clique na cena da ortografia na navegação.
2. Clique no + (mais sinal) na cena Spelling ao lado do manuseio de intenções do usuário .
3. Selecione Deset na retirada de intenção.

4. Na seção de transição à direita, clique no menu suspenso e selecione End conversation .
5. Clique em Salvar .

Crie tipo phonetic_alphabet

Nesta seção, você cria um novo tipo chamado phonetic_alphabet , que especifica as opções fonéticas do alfabeto que os usuários podem optar por soletrar a palavra. Você também pode definir alguns sinônimos para essas opções, caso um usuário diga algo semelhante. Em uma seção posterior, você adiciona o tipo phonetic_alphabet a um slot para especificar que deseja obter a resposta do usuário.

Para criar o tipo phonetic_alphabet , siga estas etapas:

1. Clique em desenvolver na navegação.
2. Clique no + (mais sinal) em tipos .
3. Digite phonetic_alphabet e pressione Enter .
4. Clique em phonetic_alphabet para abrir as opções.
5. No que tipo de valores esse tipo suportará? Seção, selecione as palavras e a opção de sinônimos
6. Digite as seguintes entradas e valores correspondentes na seção Adicionar entradas :

Sua tabela de valor-chave deve parecer o seguinte:

8. Clique em Salvar .

Configure o enchimento do slot

Em seguida, você precisa configurar o preenchimento de slots na cena da ortografia. Para configurar a lógica de preenchimento de slots, siga estas etapas:

1. Clique na cena da ortografia na navegação.
2. Clique no + (mais sinal) na cena Spelling para recheio de slot .
3. No campo Enter nomes do slot , adicione userresponse como o nome do slot.
4. No suspensão do tipo de seleção , selecione Phonetic_alphabet como o tipo de slot.
5. Verifique este slot aceita uma lista de valores
6. Verifique se este slot é necessário .
7. Selecione a opção Personalizar valor de slot writeback e digite o UserResponse na caixa de texto do parâmetro da sessão.

8. Clique em Salvar .

Adicione condição à tela Spelling

Para adicionar condição à cena Spelling , siga estas etapas:

1. Clique na cena da ortografia na navegação.
2. Clique no + (mais sinal) na cena Spelling ao lado da condição.
3. Digite scene.slots.status == "FINAL" como condição
4. Verifique o seu Webhook e digite o VerifySpelingWord na caixa de texto Handler para verificar a resposta do usuário.
5. Verifique os prompts de envio.
6. Substitua a frase no campo speech ( Enter the response that users will see or hear... ) por {} . O prompt real será preenchido pelo Webhook.

Adicione chips de sugestão à resposta da webhook

7. Na cena Start , clique em sugestões abaixo do editor de código. Esta ação adiciona três chips de sugestão.
8. No campo title , substitua Suggested Response por 'Next' .
9. Usando a mesma formatação, adicione manualmente um chip de sugestão intitulado 'Quit' . Seu código deve parecer o seguinte snippet:

suggestions:
      - title: 'Next'
      - title: 'Quit'

10. Clique em Salvar .

12. Teste a prática de ortografia no simulador

Para testar sua ação no simulador, siga estas etapas:

1. Na barra de navegação, clique em Teste para levá -lo ao simulador.
2. Para testar sua ação no simulador, digite Talk to Spelling Practice no campo de entrada.
3. Pressione Enter . Sua ação deve responder com o prompt Main invocation e o prompt de cena Start adicionada: "Bem -vindo à prática de ortografia. Use o alfabeto fonético para soletrar a palavra. Por exemplo, Alpha para A, Bravo para B, Charlie para C etc. Você quer continuar?" .
4. Diga sim para continuar
5. Simulador vai tocar um som de palavra para soletrar
6. Você pode soletrar a palavra usando alfabetos fonéticos. Por exemplo, para melhor dizer ou digitar "Bravo Echo Tango Tango Echo Romeo"
7. O simulador responderá com a resposta correta ou incorreta.
8. Diga a seguir para continuar a próxima palavra ou dizer que pare para sair do loop do jogo.

13. Parabéns

Parabéns, você construiu seu jogo com sucesso, prática de ortografia !

Agora você conhece as principais etapas necessárias para criar um jogo usando o Cloud Firestore, as funções em nuvem e o Google Assistant Action Builder.

O que você cobriu

• Como interagir com a nuvem Firestore
• Como usar slots para coletar dados do usuário
• Como processar a entrada de um usuário e retornar uma resposta
• Como usar as condições para adicionar lógica a uma cena
• Como adicionar um loop de jogo

Recursos de aprendizado adicionais

Você pode explorar esses recursos para aprender sobre a construção de ações para o Google Assistant:

• Documentação para o desenvolvimento de ações para o Google Assistant
• Ações na página do Google Github para código de amostra e bibliotecas
• A comunidade oficial do Reddit para desenvolvedores que trabalham com o Google Assistant
• Diretrizes de design de conversas para obter as melhores práticas e diretrizes sobre ações de conversação
• Introdução ao Cloud Firestore

Limpe seu projeto [recomendado]

Para evitar incorrer em cobranças possíveis, é recomendável remover projetos que você não pretende usar. Para excluir os projetos que você criou neste código, siga estas etapas:

1. Para excluir o projeto e os recursos do Firebase, preencha as etapas listadas na seção Projetos de desligamento (exclusão) .

Cuidado: verifique se você seleciona o projeto correto para exclusão na página Configurações do Google Cloud Console.

2. Opcional: Para remover imediatamente seu projeto do console de ações, preencha as etapas listadas na exclusão de uma seção de projeto . Se você não concluir esta etapa, seu projeto será removido automaticamente após aproximadamente 30 dias.

Siga @Actsongogle & @FireBase no Twitter para ficar atento aos nossos mais recentes anúncios e tweet para #Googleio para compartilhar o que você criou!