Desarrollo de una aplicación de ChatBot con React Native y DialogFlow

Parte 3. Utilizando el SDK de DialogFlow en React Native.

Hemos creado una pequeña aplicación multiplataforma en ReactNative con respuesta automática gracias a DialogFlow y su increíble API, por lo cual decidimos hacer un tutorial.

Este tutorial consta de 3 partes:

Parte 1. Instalación de dependencias y configuración.

Parte 2. Añadiendo estilos a la aplicación y ocultando información sensible.

Parte 3. Utilizando el SDK de DialogFlow en React Native (estamos aquí).

Probando el SDK de dialogflow con nuestra aplicación

Vamos a probar nuestro chatbot integrando con el SDK de dialogflow, añadimos el módulo de la siguiente forma:

import { ApiAiClient } from 'api-ai-javascript';

También es importante añadir nuestras variables de entorno, para esto necesitamos conocer nuestro TOKEN de dialogflow, en las siguientes imágenes les muestro como obtenerlas.

En la parte de abajo se encuentran nuestros TOKENS, utilizaremos el Developer access token.

Creamos el archivo .env en la raíz de nuestro proyecto y agregamos lo siguiente:

// .env
DIALOGFLOW_ACCESS_TOKEN="tu token de acceso"
// App.js
import { DIALOGFLOW_ACCESS_TOKEN } from 'react-native-dotenv';

Enviando una petición a nuestro bot

Para esto vamos a utilizar async/await, esto nos permitirá crear una promesa asíncrona y esperar hasta que haya respondido nuestra solicitud, ya que no hacerlo de esta forma puede regresarnos objetos no definidos (undefined).

Para hacerlo vamos a crear el método sendMessage de la siguiente forma:

async sendMessage() {
  const response = await dialogflow.textRequest('Hola');
  
  // Imprime la respuesta del chatbot 
  console.log(response.result.fulfillment.speech);
}

Esto nos permitirá imprimir la respuesta de nuestro bot y saber que si se está efectuando la petición.

Lo añadimos al método onSend con el método done(), para así esperar la respuesta.

onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));
this.sendMessage().done();
  }

Y checamos nuestra terminal, veremos algo similar a esto:

13:42:16: Running app on HUAWEI TAG-L13 in development mode
13:43:32: Hola, es un gusto poder conversar con un humano. ¿Cómo te va hoy?

Genial, todo parece funcionar de maravilla, ahora vamos a añadirlo al chat y dejar que el usuario ponga el texto que quiere.

Enviando peticiones a nuestro chatBot directamente desde la aplicación

Antes que nada, vamos a añadir el campo de user a nuestro state, para que así lo podamos controlar mejor.

user: {
        _id: 2,
        name: 'Chatbot',
        avatar: 'https://s3.us-east-2.amazonaws.com/biotec-io/robot.png',
      },

Vamos a separar un poco nuestro código, primero vamos a crear el método appendToChat para mostrar los mensajes en el chat.

appendToChat(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));
  }

Vamos a añadir una dependencia, que nos servirá para definir correctamente la _id del mensaje, esta es uuid, instalamos con la siguiente línea:

// En la terminal
$ yarn add uuid
// añadimos a nuestra aplicación
// App.js
import uuid from 'uuid';

Ahora el método sendQuery para enviar los mensajes que escriba el usuario.

async sendQuery(messages = []) {
    const response = await dialogflow.textRequest(messages[0].text);
this.appendToChat([{
      _id: uuid.v4(),
      text: response.result.fulfillment.speech === '' ? '¿Puedes repetirlo?' : response.result.fulfillment.speech,
      createdAt: new Date(),
      user: this.state.user,
    }]);
  }

Si observan, le hemos puesto el cuerpo completo al chat y hemos solamente utilizado para la solicitud (textRequest) el puro texto del chat. Esto nos permite obtener la solicitud de forma precisa.

Actualizamos el método onSend.

onSend(messages = []) {
    this.appendToChat(messages);
this.sendQuery(messages).done();
  }

Ahora probamos nuestro chatbot.

Listo, trabajo hecho. Esta parte está en las etiquetas v0.1.3 el principio y en v0.1.4 el final.

Puedes checar todo el tutorial en:

biotec.io

Recuerda que consta de tres partes:

Parte 1. Instalación de dependencias y configuración.

Parte 2. Añadiendo estilos a la aplicación y ocultando información sensible.

Parte 3. Utilizando el SDK de DialogFlow en React Native (estamos aquí).

Síguenos para recibir más tutoriales como este o más artículos interesantes.