Desarrollo de una aplicación de ChatBot con React Native y DialogFlow
Parte 2. Añadiendo estilos a la aplicación y ocultando información sensible
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 (estamos aquí).
Parte 3. Utilizando el SDK de DialogFlow en React Native.
Configuración extra
Añandiendo variables de entorno
A la hora de crear una aplicación es de suma importancia no exponer nuestras datos sensibles o confidenciales, por eso en la parte 1 de este tutorial hemos instalado las dependencias que nos servirán para lidiar con este problema.
Para poder utilizar las variables de entorno, vamos a hacer lo siguiente:
Añadimos a .gitignore la línea .env para ocultar esa información sensible, y modificamos el archivo.babelrc de la siguiente forma:
{
"presets": ["babel-preset-expo", "react-native-dotenv"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}Ahora simplemente con agregar nuestras variables de entorno al archivo .env podremos sin nigún problema utilizarlas (eso lo veremos después).
Añadiendo estilos con react-native-elements
Sin duda alguna una de las librerías que más me ha gustado es react-native-elements, primer por su fácil integración con expo, y después porque solamente te da los elementos necesarios con estilos básicos para cuando necesitas hacer un prototipo rápido de una aplicación.
Para este propósito simplemente vamos a insertar una cabecera, así le daremos un estilo más adecuado a nuestra aplicación.
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Header } from 'react-native-elements';const styles = StyleSheet.create({
container: {
flex: 1,
},
});class App extends Component {
render() {
return (
<View style={styles.container}>
<Header
backgroundColor="#233978"
centerComponent={{ text: 'BiotecBot', style: { color: '#fff' } }}
/>
</View>
);
}
}export default App;
Como te podrás dar cuenta, hemos cambiado algunas cosas de nuestra aplicación. Eliminamos el text que tenía y solamente añadimos la cabecera insertando un text en el centro que dice: BiotecBot, puedes checar la documentación de react-native-elements en el siguiente enlace:
Haciendo que nuestra aplicación luzca como un chat
Ahora vamos a poder integrar tanto nuestros estilos como la parte del chat, para hacerlo más simple, hemos utilizado el plugin react-native-gifted-chat.
Para hacerlo simplemente añadimos la dependencia en nuestros imports, agregando la siguiente línea:
import { GiftedChat } from 'react-native-gifted-chat';Checando el ejemplo que aparece en el repositorio de gifted-chat, vamos a agregarlo a nuestra aplicación para probarla.
Adentro de nuestra clase App, vamos a agregar un constructor, este nos garantizará el uso de nuestro state de forma adecuada:
constructor() {
super();
this.state = {
messages: [],
};
}Para asegurarnos que React Native no nos muestre errores, cambiaremos el método componentWillMount por UNSAFE_componentWillMount, esto es parte de una actualización de React Native.
UNSAFE_componentWillMount() {
this.setState({
messages: [
{
_id: 1,
text: 'Hola, ¿en qué puedo ayudarte?',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://s3.us-east-2.amazonaws.com/biotec-io/robot.png',
},
},
],
});
}Necesitamos enviar mensaje, para eso GiftedChat cuenta con un método bastante útil que nos permite agregar mensajes sin problema, este método es append.
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}));
}Ahora si, podremos probar nuestra chat con el component GiftedChat.
render() {
return (
<View style={styles.container}>
<Header
backgroundColor="#233978"
centerComponent={{ text: 'BiotecBot', style: { color: '#fff' } }}
/><GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1,
}}
/>
</View>
);
}
Todo nuestro código, ya integrado queda de la siguiente forma:
Ahora podemos probar nuestra aplicación, inicamos el servidor (o si ya lo tenemos iniciado no hay problema, recordemos que tenemos hot-reloading).
Como te darás cuenta en el caso de Android, al momento de escribir algo en nuestro formulario, el teclado hace que desaparezca, esto se debe a un error con React Native, que se soluciona de forma muy sencilla cambiando el componente View por KeyboardAvoidingView .
// Cambiamos en nuestros módulos
import { StyleSheet, KeyboardAvoidingView } from 'react-native';// En el método render
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<Header
...
</KeyboardAvoidingView>
Ahora ya vemos que el error está corregido:
Por ahora es todo, hemos integrado correctamente nuestra aplicación con react-native-elements y gifted-chat, en la siguiente parte de nuestro tutorial, aprenderemos a utilizar el SDK de javascript de dialogflow para interactura con nuestra ChatBot.
En esta caso el tutorial empieza en la etiqueta v0.1.2 y termina en la v0.1.3, si quieres cambiar de versión puedes hacerlo siguiendo las instrucciones el la parte 1 del tutorial.
