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

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

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 (estamos aquí).

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

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

Instalación

Primero que nada es importante dejar la lista de requesitos que necesitamos para poder instalar nuestras dependencias:

1. Node.js
2. Yarn o NPM
3. Una cuenta registrada en Expo y la aplicación en nuestro dispositivo

Pueden checar la documentación y todo lo que se necesita en el siguiente enlace:

Expo

Vamos a instalar create-react-native-app, esto nos permitirá instalar nuestra aplicación con todo lo necesario.

Ejecutamos en terminal:

# si utilizas npm
$ npm install -g create-react-native-app
# o si utilizas yarn
$ yarn global add create-react-native-app

Una vez instalado escribimos el siguiente comando con el cual instalaremos todo lo necesario para nuestra aplicación:

$ create-react-native-app chatbot-reactnative

En este caso yo he obtado por ponerle el nombre: chatbot-reactnative, es cuestión de gustos, tú puedes elegir el nombre que desees.

Damos por hecho que ya hiciste el registro en expo, eso quiere decir que ya podemos empezar a probar nuestra aplicación:

Vamos a entrar a la carpeta en la que se instaló el proyecto: cd chatbot-reactnative y vamos a escribir el siguiente comando:

# si utilizas npm
$ npm start
# si utilizas yarn
$ yarn start

Esto nos mostrará la siguientes pantallas:

Lado izquierdo: la pantall que nos muestra que el servidor está corriendo, lado derecho: la captura de la aplicación en nuestro móvil.

Ahora ya tenemos una aplicación corriendo de forma correcta, vamos a configurar nuestros estilos para que la aplicación se vea como tal.

Creando una cuenta para usar DialogFlow

Nuestra aplicación ya se encuentra corriendo sin ningún problema, ahora es tiempo de utilizar la librería DialogFlow para poder crear nuestro ChatBot.

Seguimos los pasos y registramos una cuenta (si tenemos una cuenta de Google solamente la enlazamos)

Dialogflow

Le damos click en IR A LA CONSOLA

Ahora enlazamos nuestra cuenta de Google

Le damos click en: CREATE AGENT

Simplemente configuramos nuestro agente y lo creamos

Ahora podemos empezar a configurar nuestro agente, vamos a probarlo para que veas lo sencillo que es.

He introducido la palabra Hola, e inmediatamente me responde con lo siguiente: ¿Podrías repetirlo, por favor?

Eso demuestra que nuestro ChatBot está trabajando de manera óptima.

Quiero mostrar la respuesta JSON que genera la aplicación:

{
  "id": "b5a4088c-1e47-4f2b-936d-f4b3e3d3eb08",
  "timestamp": "2018-04-09T16:19:38.927Z",
  "lang": "es",
  "result": {
    "source": "agent",
    "resolvedQuery": "Hola",
    "action": "input.unknown",
    "actionIncomplete": false,
    "parameters": {},
    "contexts": [],
    "metadata": {
      "intentId": "5fde027e-2032-4cc9-90ca-63eeaa1df6bf",
      "webhookUsed": "false",
      "webhookForSlotFillingUsed": "false",
      "intentName": "Default Fallback Intent"
    },
    "fulfillment": {
      "speech": "¿Cómo?",
      "messages": [
        {
          "type": 0,
          "speech": "¿Podrías repetirlo, por favor?"
        }
      ]
    },
    "score": 1
  },
  "status": {
    "code": 200,
    "errorType": "success",
    "webhookTimedOut": false
  },
  "sessionId": "1ff2b523-39bb-49c2-980b-ec2e42e6834b"
}

Ya tenemos configurado todo, ahora es necesario enlazarlo con React Native, vamos a utilizar una librería que es bastante sencilla de implementar (la implementación también se puede hacer siguiendo la documentación de dialogflow, pero por cuestiones de simplicidad y facilidad de uso, lo haremos con esta librería)

Actualización: Ya no se usará la librería react-native-dialogflow, dado que no nos permite manejar promesas, y eso es sumamente importante para que nuestra aplicación funcione correctamente, ahora utilizaremos la api de javascript de DialogFlow:

dialogflow/dialogflow-javascript-client

Vamos a instalalarlo en nuestro proyecto de la siguiente forma:

// con npm
$ npm install --save api-ai-javascript
// con yarn
$ npm install --save api-ai-javascript@2

Instalación de dependencias para UI

Utilizaremos dos dependencias para mejorar nuestra interfaz de usuario y no quedarnos con lo que nos deja React Native, las dependencias serán las siguientes:

react-native-training/react-native-elements

FaridSafi/react-native-gifted-chat

Vamos a instalarlas con un solo comando, para evitarnos pasos extras. También instalaremos las dependencias necesarias para utilizar variables de entorno (env vars) en nuestra aplicación. En este caso utilizaremos react-native-dotenv.

// con npm
$ npm install --save react-native-elements react-native-gifted-chat react-native-dotenv babel-preset-react-native@4
// con yarn
$ yarn add react-native-elements react-native-gifted-chat react-native-dotenv babel-preset-react-native@4

Para asegurarnos que todo está bien, vamos a probar nuestra aplicación.

// con npm
$ npm start
// con yarn
& yarn start

Como ven, todo marcha sobre ruedas, no tenemos ningún error.

Hemos creado un repositorio con lo contenido en cada sección, al inicio de este tutorial, el repositorio apunta a la etiqueta (tag) v0.1.1 y al finalizar el tutorial en la etiqueta v0.1.2.

Primero, clona el proyecto:

$ git clone https://github.com/biotec-io/biotec-bot.git
// una vez clonado entra a la carpeta
$ cd biotec-bot
// instala dependencias ya sea con yarn o con npm
$ yarn install
$ npm install
// ahora puedes cambiar de rama de la siguiente forma
$ git checkout tags/v0.1.2

Eso es todo por el momento, en la segunda parte de nuestro tutorial vamos a importar la librería y a utilizarla.

NOTA: Solucionar problema con watchman

Si tienes algún problema con watchman, es necesario que cheques el siguiente enlace, ahí muestra las soluciones.

Troubleshooting