Creando una aplicación de reconocimiento de voz con Watson, React y Express
Parte 1. Introducción, instalación de dependencias y configuración de backend
Este tutorial se encuentra divido en tres partes, cada una de las cuales se encuentra en los siguientes enlaces:
- Introducción, instalación de dependencias y configuración de backend (Estamos aquí)
- Registro en IBM Watson, configuración de keys y claves, ejemplos de uso de la API
- Integración con ReactJS
Introducción
La importancia del desarrollo web hoy en día radica en el uso que hacemos de las herramientas que tenemos a nuestra disposición, la integración se convierte en la habilidad más elemental y útil que como desarrolladores debemos trabajar.
Si tuviera que definir el desarrollo como el cuerpo humano, sin duda alguna la integración serían los músculos (mejor no me salgo tanto de tema).
Por lo mismo quiero definir las tres tecnologías que integramos para desarrollar una pequeña aplicación web con reconocimiento de voz utilizando la Inteligencia Artificial que nos facilita IBM Watson.
IBM Watson Speech to text
ReactJS
ExpressJS
El proyecto fue generado create-react-app puede checar la documentación en el siguiente enlace:
facebook/create-react-app
create-react-app - Create React apps with no build configuration.
github.com
Preparación del proyecto e instalación de dependencias
El proyecto del que partiremos está alojado en el siguiente repositorio en github:
El primer paso es clonar el repositorio e instalarlo en la carpeta de tu sistema que prefieras:
git clone https://github.com/biotec-io/watson-voice-course.gitEntramos a la carpeta y jalamos todas las referencias para que podamos tener todas las ramas y tags del proyecto: cd watson-voice-course && git fetch --all esto nos permitirá hacer checkout a cada caso del tutorial.
Ahora instalamos las dependencias.
// Con yarn o con npm
npm install
yarn installEl proyecto ya está terminado, he agregado algunos estilos e integré el proyecto con material-design para darle una mejor apariencia, por lo cual debemos de partir de la v0.1.1, para hacerlo solo bastan con cambiarnos de rama.
git checkout tags/v0.1.1Instalación de dependencias necesarias para el servidor
Ahora ya estamos en el punto cero de nuestro proyecto, lo importante es instalar las dependencias que necesitamos para integrar con nuestro servidor.
Ejecutamos el siguiente comando:
// Con yarn
yarn add express express-rate-limit express-secure-only vcap-services watson-developer-cloud
// Con npm
npm install --save express express-rate-limit express-secure-only vcap-services watson-developer-cloud corsAhora creamos un archivo en la raíz de nuestro proyecto que se llamará: server.js con el siguiente contenido:
const express = require('express');
const app = express();app.get('/', (req, res) => {
res.send('Hola mundo');
});app.listen(8080, () => console.log('Server listening on localhost:8080'));
Esto nos permitirá probar el servidor de forma exitosa, ahora podrás navegar a localhost:3000 y verás: Hola mundo.
Ahora navegaremos en la siguiente dirección para checar los ejemplos de implementación que tiene watson con speech-to-text:
Una vez en el repositorio, buscamos el archivo server.js y copiamos todo su contenido, y reemplazamos ese contenido en nuestro proyecto:
Quedaría de la siguiente forma:
Este archivo realmente no nos funcionará para trabajar con él, ahora lo que debemos hacer es borrar algunas líneas, trataré de explicar para que sirve cada fragmento de código más adelante:
Vamos a eliminar lo siguiente:
// De la línea 25-28
const expressBrowserify = require('express-browserify');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');// De la línea 56-79
// Inicia en:
// set up express-browserify to serve browserify bundles for examples// De la línea 110-134
// Inicia en:
// text to speech token endpoint
Estas líneas que hemos eliminado son las configuraciones para construir el código con webpack y browserify, y los endpoints y configuración para usar la API de text-to-speech de Watson que no es el caso para este tutorial.
El archivo final quedaría de la siguiente forma:
Lo único que estamos haciendo con esto es generar un token, una vez tengamos las claves configuradas vamos a probar para checar si nuestra API funciona correctamente.
Ya estamos a un paso de poder probar el servidor, eso lo haremos en la siguiente parte. En el código de arriba puedes checar toda la configuración del servidor.
Ahora hay que conectar nuestro servidor con la API, pero eso lo haremos en la próxima parte de nuestro tutorial.
