En esta página:
Demo
La Parte anterior llamada Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 5 creamos el código para los archivos solicitarTarea.kt y Util.kt, con ello ya tenemos nuestra aplicación en un 80 % de terminada, ahora en esta Parte 6 vamos a crear algunos elementos esenciales para mostrar los mensajes entre el bot y el usuario en la zona de chat de la aplicación, asimismo configuraremos las credenciales para consumir los servicios de Dialogflow (Google Cloud Platform), vamos con ello.
Partes
Antes de continuar te invito a leer los siguientes artículos:
- Que es Android y tu Primera aplicación Hola Mundo
- Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 1
- Que es Kotlin y otros detalles
- Tipos de Variables en Kotlin
- Las Novedades más Destacadas que trae Android Studio 4.0
- Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 1
- Como Solicitar Permisos del GPS Cuando una Aplicación se esta ejecutando (FusedLocationProviderClient) con Java – Parte 1
- Puedes leer más artículos en la categoría Android
Asimismo, te invito a escuchar el Podcast: “No Encuentro Empleo Por Mi Edad ¿ Que Puedo Hacer ?”:
| Spotify: | Sound Cloud: | Apple Podcasts |
 |
 |
 |
Bien ahora continuemos con el Post: Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 6.
Elementos del Chat
La interface del Chat o el contenedor del Chat requiere de ciertos elementos para mostrar los mensajes de la interacción entre el usuario y el bot, abro el archivo llamado strings.xml que se encuentra en res > values > strings.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── /mipmap ├── /raw ├── /values ├── colors.xml ├── strings.xml // Abro este Archivo ├── themes(2) /Gradle Scripts |
Dentro del archivo strings.xml agrego 4 elementos de tipo string que serán los mensajes de validación en la ventana del chat, estos mensajes los definí en el archivo MainActivity.kt con el nombre mensajedevoz, mensajedevoznoadmitido, audio_no_se_entiende y ingresa_mensaje.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Archivo strings.xml --> <resources> <string name="app_name">TiendaPostresBot</string> <string name="placeholder">Ingresa tu mensaje. </string> <!-- Elementos del Chat --> <string name="mensajedevoz"> Di algo en el micrófono. </string> <string name="mensajedevoznoadmitido"> Tu teléfono no es compatible con la función de micrófono. </string> <string name="audio_no_se_entiende"> No puedo entender lo que dijiste, dilo de nuevo. </string> <string name="ingresa_mensaje"> Por Favor, ingresa un mensaje. </string> </resources> |
Ahora voy a crear 2 layouts, uno será para mostrar los mensajes del usuario llamado mensaje_usuario.xml y otro para mostrar los mensajes del bot llamado mensaje_bot.xml, estos 2 layouts los creo en res > layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── activity_main.xml ├── mensaje_bot.xml // Creo este Archivo ├── mensaje_usuario.xml // Creo este Archivo ├── /mipmap ├── /values /Gradle Scripts |
Bien primero abro el archivo llamado mensaje_usuario.xml y le agrego lo siguiente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- Archivo usuario.xml --> <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp"> <LinearLayout android:id="@+id/userMsgLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|center_vertical" android:layout_marginTop="4dp" android:layout_marginBottom="4dp" android:layout_marginEnd="16dp" android:layout_marginStart="8dp" android:background="@drawable/bg_msgusuario" android:gravity="end|center_vertical" android:orientation="vertical" android:layout_marginRight="16dp" android:layout_marginLeft="8dp"> <TextView android:id="@+id/msg_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:padding="7.5dp" android:text="abcdefgh" android:textColor="@color/blanco" android:textSize="15sp" /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp"> </FrameLayout> </LinearLayout> </FrameLayout> |
Ahora abro el archivo llamado mensaje_bot.xml y le agrego lo siguiente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- Archivo mensaje_bot.xml --> <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp"> <LinearLayout android:id="@+id/botMsgLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start|center_vertical" android:layout_marginTop="4dp" android:layout_marginBottom="4dp" android:layout_marginEnd="16dp" android:layout_marginStart="8dp" android:background="@drawable/bg_msgbot" android:gravity="start|center_vertical" android:orientation="vertical" android:layout_marginRight="16dp" android:layout_marginLeft="8dp"> <TextView android:id="@+id/msg_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:padding="7.5dp" android:textColor="@color/blanco" android:text="abcdefgh" android:textSize="15sp" /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp"> </FrameLayout> </LinearLayout> </FrameLayout> |
Paso seguido crearé 2 drawables para estilizar el diseño de cada contenedor de los mensajes del usuario y del bot, creo 2 archivos llamados bg_msgbot.xml y bg_msgusuario.xml en res > drawable
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── bg_msgbot.xml // Creo este Archivo ├── bg_msgusuario.xml // Creo este Archivo ├── btn_enviar.png ├── btn_microfono.png ├── cajatxt.xml ├── ic_launcher_background.xml ├── ic_launcher_foreground.xml (v24) ├── /layout ├── /mipmap ├── /values /Gradle Scripts |
Primero abro el archivo bg_msgbot.xml y le agrego lo siguiente.
|
1 2 3 4 5 6 7 8 9 |
<!-- archivo bg_msgbot.xml --> <?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#2196F3"/> <corners android:radius="7dp"/> </shape> |
Luego abro el archivo bg_msgusuario.xml y le agrego lo siguiente.
|
1 2 3 4 5 6 7 8 |
<!-- archivo bg_msgusuario.xml --> <?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#E91E63"/> <corners android:radius="7dp"/> </shape> |
Bueno con esto terminamo todo lo referente al diseño de los elementos del Chat de la aplicación, ahora pasemos a configura la autenticación de la app en Dialogflow (Google Cloud Platform).
Autenticación en Dialogflow (Google Cloud Platform)
Para nuestro Bot vamos a usar el servicio Dialogflow, este nos ofrece un conjunto de herramientas y elementos para configurar las respuestas del Bot al usuario. En el Canal de YouTube de Nube Colectiva he subido un video en donde te explico como obtener nuestras credenciales de Dialogflow desde Google Cloud Platform, esta es la nueva manera de obtenerlas, hasta la fecha de este Post al menos aún lo es y te recomiendo que sigas los pasos de este video antes de continuar con el tutorial, este video te lo comparto a continuación.
Una vez que obtengas tus credenciales para poder usar Dialogflow, vamos a crear un directorio con el nombre raw dentro del directorio res y dentro del directorio raw crearé un archivo con el nombre credenciales.json, tu le puedes poner el nombre que desees no hay problema.
Entonces el archivo credenciales.json quedaría creado en res > raw > credenciales.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── /mipmap ├── /raw ├── credenciales.json // Creo y Abro este Archivo ├── /values /Gradle Scripts |
Abro el archivo que he creado llamado credenciales.json y dentro de el agrego mis datos de autenticación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Archivo credenciales.json { "type": " ", "project_id": " ", "private_key_id": " ", "private_key": " ", "client_email": " ", "client_id": " ", "auth_uri": " ", "token_uri": " ", "auth_provider_x509_cert_url": " ", "client_x509_cert_url": " " } |
Con esto ya tenemos integrado Dialogflow en nuestra aplicación o Bot de la tienda de Postres.
Y bueno hasta aquí terminamos esta Parte 6, en donde creamos determinados elementos importantes para el chat y conectamos nuestra aplicación al servicio Dialogflow (Google Cloud Platform).
Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota (s)
- En la siguiente Parte de este tutorial configuraremos los intentos (Intents) y las entidades (Entities) en el servicio servicio Dialogflow (Google Cloud Platform), entre otros detalles.
- El código expuesto en este capitulo del tutorial pueden cambiar, esto no depende de mi, si no de la empresa que dan soporte a Android Studio, y Kotlin que suelen cambiar sus tecnologías en futuras versiones.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.