Juego de práctica de ortografía con Google Assistant y Cloud Firestore

1. Información general

La plataforma para desarrolladores de Google Assistant le permite crear software para ampliar la funcionalidad de Google Assistant, un asistente personal virtual, en más de mil millones de dispositivos, incluidos parlantes inteligentes, teléfonos, automóviles, televisores, auriculares y más. Los usuarios entablan conversaciones con el Asistente para hacer cosas, como comprar alimentos o reservar un viaje. Como desarrollador, puede utilizar la plataforma de desarrollador Asistente para crear y administrar fácilmente experiencias de conversación agradables y efectivas entre los usuarios y su propio servicio de cumplimiento de terceros.

Este codelab cubre conceptos de nivel intermedio para desarrollar con Google Assistant, Cloud Functions y Cloud Firestore. En este codelab, creará un juego llamado "Práctica de ortografía" que utiliza el Asistente de Google para pedir a los usuarios que deletreen palabras.

lo que construirás

En este codelab, crearás un juego sofisticado con la siguiente funcionalidad:

• Recibe respuestas ortográficas del usuario y, según el valor, modifica las indicaciones de conversación.
• Responde con sugerencias relacionadas con la ortografía de la palabra, como su definición o la repetición de la palabra.
• Crea un bucle de juego para que un usuario pueda interactuar con el Asistente nuevamente después de deletrear la palabra.

Antes de comenzar a construir, puedes interactuar con la acción en vivo en tu dispositivo habilitado para el Asistente de Google diciendo "Hola Google, habla con Práctica de ortografía". La ruta predeterminada a través de esta Acción para un usuario que regresa se parece a la siguiente interacción:

Cuando hayas terminado este codelab, tu acción completada tendrá el siguiente flujo de conversación:

lo que aprenderás

• Cómo interactuar con Cloud Firestore
• Cómo utilizar slots para recopilar datos del usuario
• Cómo procesar la entrada de un usuario y devolver una respuesta
• Cómo usar condiciones para agregar lógica a una escena
• Cómo agregar un bucle de juego

Lo que necesitarás

Los requisitos previos para este codelab incluyen lo siguiente:

• Un navegador web, como Google Chrome
• Un IDE para escribir funciones en la nube.
• Un método de pago. Este codelab utiliza Cloud Functions para Firebase, lo que requiere que su proyecto esté en el plan de precios de Firebase Blaze ( Más información ).
• Una terminal para ejecutar comandos de shell
• Node.js 10 o posterior

2. Obtenga el código de funciones.

Clona el repositorio de GitHub desde la línea de comando:

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

3. Crea un proyecto de Firebase y configura tu aplicación

Crear un proyecto de Firebase

1. Inicia sesión en Firebase .
2. En Firebase console, haz clic en Agregar proyecto (o Crear un proyecto ) y luego nombra tu proyecto de Firebase Spelling-Practice .

3. Haga clic en las opciones de creación de proyectos. Acepte los términos de Firebase si se le solicita. Omita la configuración de Google Analytics, ya que no utilizará Analytics para esta aplicación.

Para obtener más información sobre los proyectos de Firebase, consulte Comprender los proyectos de Firebase .

Actualice al plan de precios Blaze

Para utilizar Cloud Functions para Firebase, deberá actualizar su proyecto de Firebase al plan de precios Blaze , lo que significa que adjuntará una cuenta de facturación de Google Cloud a su proyecto. Esto requiere que proporcione una tarjeta de crédito u otro método de pago.

Todos los proyectos de Firebase, incluidos los del plan Blaze, aún tienen acceso a las cuotas de uso sin costo para Cloud Functions. Los pasos descritos en este codelab estarán dentro de los límites de uso sin costo. Sin embargo, verá pequeños cargos ( alrededor de $0,03 ) de Cloud Storage, que se utiliza para alojar sus imágenes de compilación de Cloud Functions.

4. Instale Firebase CLI

Firebase CLI (interfaz de línea de comandos) le permite implementar sus funciones en la nube.

Hay varias opciones para instalar Firebase CLI según su sistema operativo y caso de uso. Los siguientes pasos describen la opción más común si también utiliza Cloud Functions.

1. Asegúrese de haber instalado npm , que normalmente viene con Node.js.
2. Instale o actualice la CLI ejecutando el siguiente comando npm:

$ npm -g install firebase-tools

3. Verifique que la CLI se haya instalado correctamente ejecutando:

$ firebase --version

Asegúrese de que la versión de Firebase CLI sea 9.0.0 o posterior para que tenga todas las funciones más recientes necesarias para Cloud Functions. De lo contrario, ejecute npm install -g firebase-tools para actualizar como se muestra arriba.

4. Autorice Firebase CLI ejecutando:

$ firebase login

5. Desde el directorio de inicio de funciones de ortografía, configure Firebase CLI para usar su proyecto de Firebase. Ejecute el siguiente comando, seleccione su ID de proyecto y luego siga las instrucciones. Cuando se le solicite, puede elegir cualquier alias, como codelab , por ejemplo.

$ firebase use --add

5. El directorio de funciones.

Ahora agregarás funcionalidad usando el SDK de Firebase para Cloud Functions para crear el backend del juego, Spelling Practice .

Cloud Functions le permite tener código que se ejecuta en la nube sin tener que configurar un servidor. Este codelab le mostrará cómo crear funciones que reaccionen a los eventos de Firebase Authentication, Cloud Storage y Firebase Realtime Database. Comencemos con la autenticación.

Cuando utilice Firebase SDK para Cloud Functions, su código de funciones residirá en el directorio functions (de forma predeterminada). Para ponértelo más fácil, ya hemos creado el archivo functions/index.js donde irá tu código. No dude en inspeccionar el directorio functions antes de continuar.

$ cd functions
$ ls

Su código de funciones también es una aplicación Node.js y, por lo tanto, necesita un package.json que brinde información sobre su aplicación y enumere las dependencias.

Si no está familiarizado con Node.js , le resultará útil obtener más información antes de continuar con el codelab.

El archivo package.json ya enumera dos dependencias requeridas: Firebase SDK para Cloud Functions y Firebase Admin SDK . Para instalarlos localmente, ejecute npm install desde el directorio functions :

$ npm install

Ahora echemos un vistazo al archivo 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.

Primero importará los módulos necesarios y luego escribirá cuatro funciones en lugar de los TODO. Continúe con el siguiente paso del codelab para importar los módulos.

6. Importe los módulos necesarios

Este codelab requiere tres módulos.

• El módulo firebase-functions nos permite escribir los activadores de nuestras Cloud Functions
• El módulo firebase-admin nos permite usar la plataforma Firebase en un servidor con acceso de administrador, por ejemplo, para escribir en Cloud Firestore.
• La biblioteca de cumplimiento de Actions SDK Node.js cumple con los controladores de Actions SDK para el Asistente de Google.

1. Instale el SDK de acciones ejecutando el siguiente comando npm:

$ npm install @assistant/conversation

2. En el archivo index.js , reemplace el primer TODO con lo siguiente.

Estos cambios importan cada uno de los módulos requeridos.

Además, el SDK de Firebase Admin se puede configurar automáticamente cuando se implementa en un entorno de Cloud Functions u otro contenedor de Google Cloud. Esto es lo que sucede cuando llamamos admin.initializeApp(); en los cambios a continuación.

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.

Ahora agreguemos lógica empresarial utilizando funciones para admitir acciones del asistente.

7. Crear funciones

Obtenga las definiciones de palabras y escríbalas en Cloud Firestore

Utilizará la API pública dictionaryapi.dev para obtener las definiciones de palabras.

En el archivo index.js , reemplace TODO para getWordDetailsFromDictionaryAPI con lo siguiente:

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

Agregar un activador de Cloud Firestore

A continuación, creará una función en la nube que se activa cada vez que se crea un documento nuevo en Cloud Firestore. Llamará a la API dictionaryapi.dev para obtener definiciones de palabras a través de la función getWordDetailsFromDictionaryAPI que escribimos justo arriba.

En el archivo index.js , reemplace TODO para createSpellingPracticeWord con lo siguiente:

index.js

// Activador de Firestore que recupera definiciones de palabras a través de getWordDetailsFromDictionaryAPI para cada nuevo documento de Firestore

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

Obtén una lista de palabras para el juego.

Puede escribir una función en la nube que recupere una lista de palabras de práctica de ortografía de Cloud Firestore para el Asistente. Para ello utilizamos el controlador de aplicaciones.

En el archivo index.js , reemplace TODO para getSpellingWordList con lo siguiente.

Agregar esta función al app.handle especial es una forma de hacer que la función sea accesible desde el Asistente.

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

Recibir noticias de la sesión del Asistente

Puede escribir una función en la nube que devuelva la siguiente palabra de ortografía de la lista de palabras.

En el archivo index.js , reemplace TODO para getSpellingWord con lo siguiente:

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

Habilita el juego para repetir la palabra.

Puedes escribir una función en la nube que repita la palabra actual del juego.

En el archivo index.js , reemplace TODO para repeatSpellingWord con lo siguiente:

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

Obtenga la definición de la palabra.

Puedes escribir una función en la nube que proporcione la definición de la palabra actual para el juego.

En el archivo index.js , reemplace TODO para definitionOfSpellingWord con lo siguiente:

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 la respuesta ortográfica del usuario.

Puede escribir una función en la nube que verifique la respuesta del usuario sobre cómo deletrear la palabra actual del juego.

En el archivo index.js , reemplace TODO para verifySpellingWord con lo siguiente:

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

Implementa todas tus funciones

Tus Cloud Functions solo estarán activas después de que las hayas implementado en Firebase.

Desde la raíz del directorio spelling-functions-start , ejecute el siguiente comando:

$ firebase deploy --only functions

Esta es la salida de la consola que deberías 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

Tome nota de la URL del punto final HTTP de la función ActionsOnGoogleFulfillment para su uso posterior. Para obtener el punto final, abra Firebase Console y luego haga clic en Proyecto de práctica de ortografía . Abra el panel de funciones para ver el punto final de funciones.

Ha completado la adición de todas las funciones requeridas. Ahora pasemos a configurar Cloud Firestore.

8. Habilite Cloud Firestore

Deberá habilitar Cloud Firestore.

En la sección Compilación de Firebase console, haz clic en Firestore . Luego, haga clic en Crear base de datos .

El acceso a los datos en Cloud Firestore está controlado por reglas de seguridad. Primero, debe establecer algunas reglas básicas sobre los datos para comenzar. Haga clic en Firestore y luego en la pestaña Reglas de Firebase console, agregue las siguientes reglas y luego haga clic en Publicar .

Las siguientes reglas restringen el acceso a los datos a los usuarios que han iniciado sesión, lo que impide que los usuarios no autenticados lean o escriban.

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. Agregue datos de palabras de ortografía a Cloud Firestore

En este paso, escribirás datos de palabras de ortografía en Cloud Firestore para poder generar una lista de palabras para el Asistente (y el juego).

Los datos de Cloud Firestore están estructurados en colecciones, documentos, campos y subcolecciones. Cada palabra del juego se almacenará como su propio documento en una colección de nivel superior llamada wordlist . Para cada documento nuevo en la colección de Firestore, se activará la función createSpellingPracticeWord para obtener los detalles de la palabra del servicio API Dictionary .

Crear una colección de Cloud Firestore

1. En Firebase console, navega hasta la sección Cloud Firestore.
2. Haga clic en + Iniciar colección .
3. En el cuadro de texto ID de colección , ingrese wordlist y luego haga clic en Siguiente .

A continuación, crearemos un documento para una palabra: acuerdo

4. En el cuadro de texto ID del documento , ingrese agreement .
5. En el cuadro de texto Campo , ingrese word y en el cuadro de texto Valor ingrese agreement .
6. Clic en Guardar .

Cuando agrega este documento a Cloud Firestore, activa su función createSpellingPracticeWord para obtener los detalles de la definición de la palabra. Agregue más palabras (por ejemplo: asombro, automóvil, verdad, contar, mejor, viaje,...) creando un nuevo documento para cada palabra.

10. Configura el Asistente de Google

Las siguientes secciones describen cómo configurar el entorno de desarrollo del Asistente de Google y crear su proyecto de Acciones.

Verifique la configuración de permisos de Google

Para probar la acción que creas en este codelab, debes habilitar los permisos necesarios para que el simulador pueda acceder a tu acción. Para habilitar permisos, siga estos pasos:

1. Vaya a la página de controles de actividad .
2. Inicie sesión con su cuenta de Google, si aún no lo ha hecho.
3. Habilite los siguientes permisos:

• Actividad web y de aplicaciones
• En Actividad web y de aplicaciones , seleccione la casilla de verificación junto a Incluir el historial y la actividad de Chrome de sitios, aplicaciones y dispositivos que utilizan los servicios de Google .

Crear un proyecto de acciones

Su proyecto de Acciones es un contenedor para su Acción. Para crear tu proyecto de Acciones para este codelab, sigue estos pasos:

1. Abra la consola de Acciones .
2. Haga clic en Nuevo proyecto .
3. Aceptar términos de servicio

4. Escriba o seleccione spelling-practice-codelab que creó con Firebase Console. (El nombre es para su referencia interna. Más adelante, puede establecer un nombre externo para su proyecto).

5. Haga clic en Importar proyecto .
6. En el ¿Qué tipo de Acción quieres construir? pantalla, seleccione la tarjeta personalizada .
7. Haga clic en Siguiente .
8. Seleccione la tarjeta de proyecto en blanco .
9. Haga clic en Comenzar a construir .
10. Ingrese Práctica de ortografía para mostrar el nombre y haga clic en guardar.

Los usuarios inician la conversación con su Acción mediante invocación . Por ejemplo, los usuarios pueden invocar su acción diciendo una frase como "Hola Google, habla con Práctica de ortografía", donde Práctica de ortografía es el nombre para mostrar.

Su acción debe tener un nombre para mostrar si desea implementarla en producción; sin embargo, para probar su acción, no necesita definir el nombre para mostrar. En su lugar, puedes utilizar la frase "Habla con mi aplicación de prueba" en el simulador para invocar tu acción.

Configurar el cumplimiento

Debe conectar al Asistente los controladores de eventos para las funciones de nube que escribió e implementó anteriormente en este codelab.

Para configurar su cumplimiento, siga estos pasos:

1. Haga clic en Webhook en la navegación lateral.
2. Seleccione el punto final Https como opción de cumplimiento:

3. Ingrese la URL del punto final de su función en el cuadro de texto del punto final HTTPs y luego haga clic en Guardar .

En la siguiente sección, personalizará el mensaje para su invocación principal en la consola de Acciones.

Configurar la invocación principal

Debes editar la invocación principal para definir qué sucede después de que un usuario invoca tu acción.

De forma predeterminada, Actions Builder proporciona un mensaje genérico cuando se activa su invocación ( "Empiece a crear su acción definiendo la invocación principal").

Para modificar el mensaje que su Acción envía al usuario cuando invoca su Acción, siga estos pasos:

1. Haga clic en Invocación principal en la navegación.

2. Marque Call your webhook y agregue el nombre del controlador de eventos getSpellingWordList en el cuadro de texto.
3. En el editor de código, reemplace el texto en el campo speech con el siguiente mensaje de bienvenida: Welcome to Spelling Practice

Nota: Puede utilizar el formato YAML o JSON para editar sus indicaciones.

4. Clic en Guardar .

Probar la invocación principal en el simulador.

La consola de Acciones proporciona una herramienta web para probar su Acción llamada simulador . La interfaz simula dispositivos de hardware y sus configuraciones, por lo que puedes conversar con tu Action como si se estuviera ejecutando en una pantalla inteligente, un teléfono, un altavoz o KaiOS.

Para probar la invocación principal de tu Acción en el simulador, sigue estos pasos:

1. En la barra de navegación superior, haga clic en Probar para ir al simulador.
2. Para invocar su acción en el simulador, escriba Talk to Spelling Practice en el campo de entrada en la parte superior izquierda, luego presione Entrar en su teclado.

Cuando activa la invocación principal de su Acción, el Asistente responde con su mensaje de bienvenida personalizado. En este punto, la conversación finaliza después de que el Asistente responda con un saludo.

Ver registros de eventos

Cuando estás en la pestaña Prueba , el panel de la derecha muestra los registros de eventos , que muestran el historial de conversaciones como registros de eventos. Cada registro de eventos muestra los eventos que suceden durante ese turno de la conversación. Para ver el registro de eventos, haga clic en el icono gris antes del evento.

Su acción actualmente tiene un registro de eventos, que muestra tanto la entrada del usuario ( "Hablar con la práctica de ortografía" ) como la respuesta de su acción. La siguiente captura de pantalla muestra el registro de eventos de su acción:

11. Construya la conversación para la práctica de ortografía.

Ahora que ha definido lo que sucede después de que un usuario invoca su Acción, puede desarrollar el resto de la conversación de su Acción. La práctica de ortografía tiene cuatro escenas y debes activar cada escena antes de que pueda ejecutarse. La forma más común de activar una escena es configurar su Acción para que, cuando un usuario coincida con una intención de usuario dentro de una escena, esa intención active la transición a otra escena y la active.

Transición de la invocación principal a la escena inicial.

En esta sección, crea una nueva escena llamada Start , que envía un mensaje al usuario preguntándole si le gustaría comenzar a jugar Práctica de ortografía . También agrega una transición desde la invocación principal a la nueva escena Start .

Para crear esta escena y agregarle una transición, siga estos pasos:

1. Haga clic en Desarrollar en la navegación superior. Luego, haga clic en Invocación principal en la navegación izquierda.
2. En la sección Transición a la derecha, haga clic en el menú desplegable y luego escriba Start en el campo de texto.

3. Haga clic en Agregar . Esto crea una escena llamada Start y le dice a la Acción que pase a la escena Start después de que la Acción entregue el mensaje de bienvenida al usuario.
4. Haga clic en Escenas en la navegación izquierda para mostrar la lista de escenas.
5. En Escenas , haga clic en Iniciar para ver la escena Start .
6. Haga clic en + en la sección Al ingresar de la escena Start .
7. Seleccione Enviar mensajes .
8. Reemplace la oración en el campo speech ( Enter the response that users will see or hear... ) con una pregunta para hacerle al usuario: Use phonetic alphabet to spell the word. For example alpha for a, bravo for b, charlie for c etc. Do you want to continue?

Los chips de sugerencias ofrecen sugerencias en las que el usuario puede hacer clic y que su acción procesa como entrada del usuario. En esta sección, agregas fichas de sugerencias que aparecen debajo del mensaje que acabas de configurar ( Do you want to play

Spelling Practice

? ) para brindar soporte a los usuarios en dispositivos con pantallas.

Para agregar chips de sugerencias al mensaje de la escena Start , siga estos pasos:

9. En la escena Start , haga clic en sugerencias debajo del editor de código. Esta acción añade un único chip de sugerencia.
10. En el campo title , reemplace Suggested Response por 'Yes' .
11. Usando el mismo formato, agregue manualmente un chip de sugerencias titulado 'No' y 'Help with Phonetics' . Su código debería verse como el siguiente fragmento:
12. Clic en Guardar .

Prueba tu acción en el simulador.

En este punto, su acción debería pasar de la invocación principal a la escena de inicio y preguntarle al usuario si desea continuar. Las fichas de sugerencias también deberían aparecer en la pantalla simulada.

Para probar tu Acción en el simulador, sigue estos pasos:

1. En la barra de navegación, haga clic en Probar para ir al simulador.
2. Para probar su acción en el simulador, escriba Talk to Spelling Practice en el campo de entrada.
3. Presione Entrar . Su acción debe responder con el mensaje Main invocation y el mensaje Start escena agregado, "Bienvenido a la práctica de ortografía. Utilice el alfabeto fonético para deletrear la palabra. Por ejemplo, alfa para a, bravo para b, charlie para c, etc. ¿Quiere ¿continuar?" .

La siguiente captura de pantalla muestra esta interacción:

4. Haga clic en el chip de sugerencias Yes o No o Help with Phonetics para responder al mensaje. (También puede decir "Sí" o "No" o "Ayuda con fonética" o ingresar Yes o No o Help with Phonetics en el campo de entrada ).

Cuando respondes al mensaje, tu Acción responde con un mensaje que indica que no puede entender tu entrada: "Lo siento, no entendí eso. ¿Puedes intentarlo de nuevo?" Dado que aún no ha configurado su acción para comprender y responder a las entradas "Sí" o "No" , su acción hace coincidir su entrada con una intención NO_MATCH .

De forma predeterminada, la intención del sistema NO_MATCH proporciona respuestas genéricas, pero puede personalizar estas respuestas para indicarle al usuario que no entendió su entrada. El Asistente finaliza la conversación del usuario con su Acción después de que no puede coincidir con la entrada del usuario tres veces.

Agregar intenciones fonéticas y no

Ahora que los usuarios pueden responder a la pregunta que plantea su Acción, puede configurar su Acción para comprender las respuestas de los usuarios ( "Sí" o "No" o "Ayuda con fonética" ). En las siguientes secciones, creará intenciones de usuario que coinciden cuando el usuario dice "Sí" , "No" o "Ayuda con fonética" y agregará estas intenciones a la escena Start . Usaremos la intención del sistema, yes , y crearemos otras intenciones.

no crear intención

Ahora, debes crear la no intención de comprender y responder al usuario cuando no quiera jugar. Para crear esta intención, siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intenciones personalizadas en la navegación para abrir la lista de intenciones.
3. Haga clic en + (signo más) al final de la lista de intenciones. Asigne un nombre al nuevo no de intención y presione Entrar .
4. Haga clic en no para abrir la página no intención.
5. En la sección Agregar frases de entrenamiento , haga clic en el cuadro de texto Ingresar frase e ingrese las siguientes frases:

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

6. Clic en Guardar .

No agregar no intención a la escena Start

Ahora, la Acción puede entender cuando un usuario expresa "no" o algo similar a "no" , como "no" . Debe agregar la intención no usuario a la escena Start porque el usuario está respondiendo al mensaje Start (" Bienvenido a la práctica de ortografía. Utilice el alfabeto fonético para deletrear la palabra. Por ejemplo, alfa para a, bravo para b, charlie para c etc. ¿Quieres continuar?" ).

Para agregar este intent a la escena Start , siga estos pasos:

1. Haga clic en la escena Iniciar en la navegación.
2. Haga clic en + (signo más) en la escena Start junto a Manejo de intenciones del usuario.
3. En la sección Intención , seleccione no en el menú desplegable.

4. Haga clic en Enviar mensajes y actualice el campo speech con el siguiente texto: Good Bye .

El código en su editor debería verse como el siguiente fragmento:

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

5. En la sección Transición , seleccione Finalizar conversación en el menú desplegable.
6. Clic en Guardar .

Prueba no intención en el simulador

En este punto, su acción comprende cuándo el usuario no quiere jugar y devuelve la respuesta adecuada.

Para probar esta intención en el simulador, siga estos pasos:

1. En la barra de navegación, haga clic en Probar .
2. Escriba Talk to Spelling Practice en el campo Entrada y presione Enter .
3. Escriba No en el campo Entrada y presione Entrar. Alternativamente, haga clic en el chip Sin sugerencia.

Agregar sistema YES con la intención de Start la escena

Ahora, agregaremos la intención del SISTEMA "SÍ" a la escena Start , ya que el usuario responde sí al mensaje Start (" Bienvenido a la práctica de ortografía. Utilice el alfabeto fonético para deletrear la palabra. Por ejemplo, alfa para a, bravo para b, charlie por c, etc. ¿Quieres continuar?" ).

Para agregar esta intención de usuario a la escena Start , siga estos pasos:

1. Haga clic en la escena Iniciar en la navegación.
2. Haga clic en + (signo más) en la escena Start junto a Manejo de intenciones del usuario .
3. En Todas las intenciones del sistema, seleccione SÍ en el menú desplegable de intenciones.

4. Haga clic en Llamar a su webhook y actualice el cuadro de texto event handler con la función que creó anteriormente: getSpellingWordList
5. En la sección Transición , haga clic en el menú desplegable y seleccione Finalizar conversación .
6. Clic en Guardar .

Pruebe la intención YES en el simulador

En este punto, su acción comprende cuándo el usuario quiere jugar y devuelve la respuesta adecuada.

Para probar esta intención en el simulador, siga estos pasos:

1. En la barra de navegación, haga clic en Probar .
2. Para probar su acción en el simulador, escriba Talk to Spelling Practice en el campo de entrada y presione Entrar .
3. Escriba Yes en el campo Entrada y presione Entrar . Alternativamente, haga clic en el chip de sugerencia Yes .

Su acción obtiene una lista de todas las palabras de práctica de ortografía y las almacena en la sesión. Luego, su acción finaliza la sesión porque seleccionó la transición End conversation para la intención YES .

Crear intención Phonetics

Para crear la intención Phonetics , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intenciones personalizadas en la navegación para abrir la lista de intenciones.
3. Haga clic en + (signo más) al final de la lista de intenciones. Asigne un nombre a la nueva intención phonetics y presione Enter .
4. Haga clic en la intención phonetics para abrir la página de intención phonetics .
5. En la sección Agregar frases de entrenamiento, haga clic en el cuadro de texto Ingresar frase e ingrese las siguientes frases:

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

6. Clic en Guardar .

Agregar intención phonetics a la escena Start

Ahora, la Acción puede comprender cuándo un usuario expresa una intención "fonética" . Puede agregar la intención del usuario phonetics a la escena Start , ya que el usuario está respondiendo al mensaje Start (" Bienvenido a la práctica de ortografía. Utilice el alfabeto fonético para deletrear la palabra. Por ejemplo, alfa para a, bravo para b, charlie para c etc. ¿Quieres continuar?" ).

Para agregar esta intención de usuario a la escena Start , siga estos pasos:

1. Haga clic en la escena Iniciar en la navegación.
2. Haga clic en + (signo más) en la escena Start junto a Manejo de intenciones del usuario.
3. Seleccione fonética en el menú desplegable de intención.

4. En la sección Transición , haga clic en el menú desplegable y seleccione Finalizar conversación.
5. Clic en Guardar .

Transición de la escena inicial a la escena ortográfica

En esta sección, crea una nueva escena llamada Ortografía , que envía un mensaje al usuario para que deletree la palabra usando el alfabeto fonético.

Para crear esta escena y agregarle una transición, siga estos pasos:

1. Haga clic en Desarrollar en la navegación superior. Luego, haga clic en Iniciar escena en la navegación izquierda.
2. En la sección Manejo de intenciones del usuario, haga clic when actions.intent.YES is matched y, a la derecha, en la sección de transición , haga clic en el menú desplegable y escriba Spelling en el campo de texto.
3. Haga clic en Agregar . Esto crea una escena llamada Spelling y le dice a la Acción que pase a la escena Spelling después de la coincidencia con la intención SÍ.
4. Expanda Escenas en la navegación izquierda para mostrar la lista de escenas.
5. En Escenas , haga clic en Ortografía para ver la escena Spelling .
6. Haga clic en + en la sección Al ingresar de la escena Spelling .
7. Haga clic en Llamar a su webhook e ingrese getSpellingWord en el cuadro de texto del controlador de eventos.
8. Seleccione Enviar mensajes .
9. Reemplace la oración en el campo speech ( Enter the response that users will see or hear... ) con {} . El mensaje real se completará con un webhook.

Los chips de sugerencias ofrecen sugerencias en las que el usuario puede hacer clic y que su acción procesa como entrada del usuario.

Para agregar fichas de sugerencias al mensaje de la escena Spelling , siga estos pasos:

10. En la escena Spelling , haga clic en sugerencias debajo del editor de código. Esta acción añade tres fichas de sugerencia.
11. En el campo title , reemplace Suggested Response por 'Repeat' .
12. Usando el mismo formato, agregue manualmente un chip de sugerencias titulado 'Skip' .
13. Usando el mismo formato, agregue manualmente un chip de sugerencias titulado 'Quit' . Su código debería verse como el siguiente fragmento:
14. Clic en Guardar .

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

Crear intención Repeat

Para crear la intención repeat , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intenciones personalizadas en la navegación para abrir la lista de intenciones.
3. Haga clic en + (signo más) al final de la lista de intenciones. Asigne un nombre repeat a la nueva intención y presione Enter .
4. Haga clic en la intención repeat para abrir la página de intención definition .
5. En la sección Agregar frases de entrenamiento , haga clic en el cuadro de texto Ingresar frase e ingrese las siguientes frases:

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

6. Clic en Guardar .

Agregar intención repeat a la escena Spelling

Ahora, la Acción puede comprender cuándo un usuario expresa una intención de "repetición" . Puede agregar la intención repeat del usuario a la escena Spelling , ya que el usuario está respondiendo al mensaje Spelling (" Deletrear la palabra usando el alfabeto fonético ").

Para agregar esta intención de usuario a la escena Spelling , siga estos pasos:

1. Haga clic en la escena Ortografía en la navegación.
2. Haga clic en + (signo más) en la escena Spelling junto a Manejo de la intención del usuario .
3. Seleccione repetir en el menú desplegable de intención.

4. Marque Llame a su webhook e ingrese repetirSpellingWord en el cuadro de texto del controlador de eventos para obtener la definición de la palabra.
5. Marque Enviar mensajes .
6. Reemplace la oración en el campo speech ( Enter the response that users will see or hear... ) con ''. El mensaje real se completará con un webhook.

Agregue chips de sugerencia a "Cuando la repetición coincida"

7. En " Cuando la repetición coincide ", en Manejo de la intención del usuario, haga clic en sugerencias debajo del editor de código. Esta acción añade tres fichas de sugerencia.
8. En el campo title , reemplace Suggested Response por 'Skip' .
9. Usando el mismo formato, agregue manualmente un chip de sugerencia titulado 'Quit' . Su código debería verse como el siguiente fragmento:

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

10. Clic en Guardar.

Crear intención definition

Para crear la intención definition , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intenciones personalizadas en la navegación para abrir la lista de intenciones.
3. Haga clic en + (signo más) al final de la lista de intenciones. Asigne un nombre a la nueva definition de intención y presione Enter .
4. Haga clic en la intención definition para abrir la página de intención definition .
5. En la sección Agregar frases de entrenamiento , haga clic en el cuadro de texto Ingresar frase e ingrese las siguientes frases:

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

6. Clic en Guardar .

Agregar intención definition a la escena Spelling

Ahora, la Acción puede comprender cuándo un usuario expresa una intención de "definición" . Puede agregar la definition de intención del usuario a la escena Spelling , ya que el usuario está respondiendo al mensaje Spelling (" Deletrear la palabra usando el alfabeto fonético ").

Para agregar esta intención de usuario a la escena Spelling , siga estos pasos:

1. Haga clic en la escena Ortografía en la navegación.
2. Haga clic en el + (signo más) en la escena Spelling junto al manejo de la intención del usuario .
3. Seleccione la definición en el menú desplegable de intención.

4. Verifique la llamada a su webhook e ingrese la definición de la palabra de venta en el cuadro de texto del controlador de eventos para obtener la definición de la palabra.
5. Verifique las indicaciones de envío .
6. Reemplace la oración en el campo speech ( Enter the response that users will see or hear... ) con '' '. El aviso real estará poblado por Webhook.

Agregue chips de sugerencia a la respuesta del webhook

7. En la escena Start , haga clic en Sugerencias debajo del editor de códigos. Esta acción agrega tres chips de sugerencia.
8. En el campo title , reemplace Suggested Response con 'Skip' .
9. Usando el mismo formato, agregue manualmente un chip de sugerencia titulado 'Quit' . Su código debería parecerse al siguiente fragmento:

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

10. Clic en Guardar .

Crear intención skip

Para crear la intención skip , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intentos en la navegación para abrir la lista de intentos.
3. Haga clic en + (signo más) al final de la lista de intentos. Nombra el nuevo intento skip y presione Enter .
4. Haga clic en la intención skip para abrir la página de intención de skip .
5. En la sección Agregar frases de entrenamiento , haga clic en el cuadro de texto Ingrese frase e ingrese las siguientes frases:

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

6. Clic en Guardar .

Agregar intención Skip a la escena Spelling

Ahora, la acción puede entender cuándo un usuario expresa una intención de "omitir" . Puede agregar la intención del usuario skip a la escena Spelling , ya que el usuario está respondiendo a la solicitud Spelling (" deletree la palabra usando el alfabeto fonético ").

Para agregar esta intención del usuario a la escena Spelling , siga estos pasos:

1. Haga clic en la escena de la ortografía en la navegación.
2. Haga clic en el + (signo más) en la escena Spelling junto a la intención del usuario Handlin g.
3. Seleccione omitir en el menú desplegable de intención.

4. En la sección de transición a la derecha, haga clic en el menú desplegable y seleccione Spelling .

5. Clic en Guardar .

Crear intención quit

Para crear la intención Quit , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en Intentos en la navegación para abrir la lista de intentos.
3. Haga clic en + (signo más) al final de la lista de intentos. Nombre la nueva intención Quit y presione Enter .
4. Haga clic en la intención de Quit de abrir la página de intención de definición .
5. En la sección Agregar frases de entrenamiento , haga clic en el cuadro de texto Ingrese frase e ingrese las siguientes frases:

• I quit
• Goodbye
• Cancel
• Exit
• Quit

6. Clic en Guardar.

Agregue la intención Quit a la escena Spelling

Ahora, la acción puede entender cuándo un usuario expresa una intención de "dejar de fumar" . Puede agregar la intención del usuario de quit a la escena Spelling , ya que el usuario está respondiendo a la solicitud Spelling (" deletree la palabra usando el alfabeto fonético ").

Para agregar esta intención del usuario a la escena Spelling , siga estos pasos:

1. Haga clic en la escena de la ortografía en la navegación.
2. Haga clic en el + (signo más) en la escena Spelling junto al manejo de la intención del usuario .
3. Seleccione Salir en el menú desplegable de intención.

4. En la sección de transición a la derecha, haga clic en el menú desplegable y seleccione End conversation .
5. Clic en Guardar .

Crear phonetic_alphabet tipo

En esta sección, crea un nuevo tipo llamado phonetic_alphabet , que especifica las opciones de alfabeto fonético que los usuarios pueden elegir para deletrear la palabra. También puede definir algunos sinónimos para estas opciones en caso de que un usuario diga algo similar. En una sección posterior, agrega el tipo phonetic_alphabet a una ranura para especificar que desea obtener la respuesta del usuario.

Para crear el tipo phonetic_alphabet , siga estos pasos:

1. Haga clic en Desarrollar en la navegación.
2. Haga clic en el + (signo más) en tipos .
3. Escriba phonetic_alphabet y presione Enter .
4. Haga clic en phonetic_alphabet para abrir las opciones.
5. ¿En qué tipo de valores admitirá este tipo? Sección, seleccione la opción de palabras y sinónimos
6. Ingrese las siguientes entradas y valores correspondientes en la sección Agregar entradas :

Su tabla de valor clave debe verse como la siguiente:

8. Clic en Guardar .

Configurar el llenado de ranuras

A continuación, debe configurar el relleno de ranuras en la escena de la ortografía. Para configurar la lógica de llenado de ranuras, siga estos pasos:

1. Haga clic en la escena de la ortografía en la navegación.
2. Haga clic en el + (más signo) en la escena Spelling para el llenado de ranuras .
3. En el campo Ingrese Nombre de la ranura , agregue userresponse como el nombre de la ranura.
4. En el desplegable Seleccionar Tipo de tipo , seleccione Phonetic_Alphabet como el tipo de ranura.
5. Verificar esta ranura acepta una lista de valores
6. Verifique que se requiere esta ranura .
7. Seleccione Personalizar la opción de redacción del valor de la ranura e ingrese UserResponse en el cuadro de texto del parámetro de sesión.

8. Clic en Guardar .

Agregar condición a la pantalla Spelling

Para agregar condición a la escena Spelling , siga estos pasos:

1. Haga clic en la escena de la ortografía en la navegación.
2. Haga clic en el + (signo más) en la escena Spelling junto a la condición.
3. Ingrese scene.slots.status == "FINAL" como condición
4. Consulte la llamada a su webhook e ingrese Verifyspellingword en el cuadro de texto del controlador de eventos para verificar la respuesta del usuario.
5. Verifique las indicaciones de envío.
6. Reemplace la oración en el campo speech ( Enter the response that users will see or hear... ) con {} . El aviso real estará poblado por Webhook.

Agregue chips de sugerencia a la respuesta del webhook

7. En la escena Start , haga clic en Sugerencias debajo del editor de códigos. Esta acción agrega tres chips de sugerencia.
8. En el campo title , reemplace Suggested Response con 'Next' .
9. Usando el mismo formato, agregue manualmente un chip de sugerencia titulado 'Quit' . Su código debería parecerse al siguiente fragmento:

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

10. Clic en Guardar .

12. Práctica de ortografía de prueba en el simulador

Para probar su acción en el simulador, siga estos pasos:

1. En la barra de navegación, haga clic en Prueba para llevarlo al simulador.
2. Para probar su acción en el simulador, escriba Talk to Spelling Practice en el campo de entrada.
3. Presione Entrar . Su acción debe responder con el mensaje Main invocation y el mensaje de escena Start adicional : "Bienvenido a la práctica de la ortografía. Use el alfabeto fonético para deletrear la palabra. Por ejemplo, alfa para A, Bravo para B, Charlie para C, etc. ¿continuar?" .
4. Di que sí para continuar
5. El simulador reproducirá un sonido de la palabra para deletrear
6. Puedes deletrear la palabra usando alfabetos fonéticos. Por ejemplo, para mejor decir o escribir "Bravo Echo Tango Tango Echo Romeo"
7. El simulador responderá con la respuesta correcta o incorrecta.
8. Diga a continuación para continuar con la siguiente palabra o decir que deje de salir del bucle del juego.

13. Felicitaciones

¡Felicitaciones, has creado con éxito tu juego, práctica de ortografía !

Ahora conoce los pasos clave necesarios para construir un juego usando Cloud Firestore, Funciones de la nube y Google Assistant Action Builder.

Lo que cubriste

• Cómo interactuar con la nube Firestore
• Cómo usar ranuras para recopilar datos del usuario
• Cómo procesar la entrada de un usuario y devolver una respuesta
• Cómo usar condiciones para agregar lógica a una escena
• Cómo agregar un bucle de juego

Recursos de aprendizaje adicionales

Puede explorar estos recursos para aprender sobre la creación de acciones para el Asistente de Google:

• Documentación para desarrollar acciones para el Asistente de Google
• Acciones en la página de Google Github para el código de muestra y las bibliotecas
• La comunidad oficial de Reddit para desarrolladores que trabajan con el Asistente de Google
• Pautas de diseño de conversación para las mejores prácticas y directrices sobre acciones de conversación
• Introducción a la nube Firestore

Limpie su proyecto [recomendado]

Para evitar incurrir en posibles cargos, se recomienda eliminar los proyectos que no tiene la intención de usar. Para eliminar los proyectos que creó en este Codelab, siga estos pasos:

1. Para eliminar su proyecto y recursos de Firebase, complete los pasos enumerados en la sección de proyectos de cierre (eliminación) .

PRECAUCIÓN: Asegúrese de seleccionar el proyecto correcto para la eliminación en la página Configuración de Google Cloud Console.

2. Opcional: para eliminar inmediatamente su proyecto de la consola de acciones, complete los pasos enumerados en la sección Eliminar un proyecto . Si no completa este paso, su proyecto se eliminará automáticamente después de aproximadamente 30 días.

¡Siga @ActionSongoogle y @FireBase en Twitter para estar atentos a nuestros últimos anuncios y tweet a #Googleio para compartir lo que ha construido!