Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 6

5 minuto(s)

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

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5
Parte 6
Parte 7 (Final – Código Fuente GitHub)

Antes de continuar te invito a leer los siguientes artículos:

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


/app
├── /manifests
├── /java
├── /java (generated)
├── /res
    ├── /drawable
    ├── /layout
    ├── /mipmap
    ├── /raw
    ├── /values 
        ├── colors.xml 
        ├── strings.xml // Abro este Archivo 
        ├── themes(2) 
/Gradle Scripts

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.


<!-- 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

<resources>

<string name="app_name">TiendaPostresBot</string>

<string name="placeholder">Ingresa tu mensaje. </string>

<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


/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

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.


<!-- 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>

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

<?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.


<!-- 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>

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

<?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


/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

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.


<!-- 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>

1

2

3

4

5

6

7

8

9

<?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.


<!-- 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>

1

2

3

4

5

6

7

8

<?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


/app
├── /manifests
├── /java
├── /java (generated)
├── /res
    ├── /drawable
    ├── /layout
    ├── /mipmap
    ├── /raw
        ├── credenciales.json // Creo y Abro este Archivo 
    ├── /values 
/Gradle Scripts

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.


// 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": " "
}

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.

Android Inteligencia Artificial Kotlin Machine Learning Tutoriales
17-02-2021
21-02-2022
Crear un Post - Eventos Devs - Foro

Todas Nuestras Páginas y Categorías:

Accesorios Dev Agile Android Android Studio Angular Anuncios Apache Cassandra API REST APIs Apple WWDC Arduino Arq. de Software Articulos Axios Backend Bases de Datos Blockchain Bootstrap C# CDNs Chrome Dev Tools Ciberseguridad Cloud Computing CSS DApps Dart Data Mining Data Science (Ciencia de Datos) DevOps Devs Devs Hardware Django Docker Editores de Código Electron JS Entretenimiento Eventos Dev Experimental Firebase Flutter Frontend Game Dev Gin Git GitHub GitOps Google IO GraphQL Hacking Ético HTML 5 Inteligencia Artificial Ionic iOS JAMStack Java JavaScript jQuery Kotlin Kubernetes Laravel Linux Machine Learning Marketing Digital Material Design Micro Frontend MongoDB Móvil MS SQL Server MySQL News NFT Node JS Oracle DB Pentesting PHP PostgreSQL Premium Principal Python Ranking BD Ranking Lenguajes Raspberry Pi React JS React Native Recursos Redis Ruby Ruby on Rails Rust Seguridad SEO Servidores Social Media Socket IO Spring SQL SQLite Stack Overflow Svelte Swift Tailwind CSS Tecnología Tendencias GitHub Testing Tutoriales Tutoriales de Go TypeScript UI Unicode Unity Utilidades UX Vite JS VPS Vue JS Web 3.0 Wordpress

Partners

Somos expertos en programación, desarrollo de software y tecnología.

Blog de Programación y Desarrollo de apps móviles, Python, JavaScript, PHP, IA, nft, blockchain, ciberseguridad, pentesting, ciencia de datos, ml, seo, ux, ui, Gemini AI, ChatGPT, API, Visual Studio Code, POO, tecnología y más.

Utilizamos cookies para proporcionar y mejorar nuestros servicios. Al navegar por nuestro sitio, usted acepta las cookies. Política de Cookies | Política de Privacidad

Redes Sociales (Developers)

Web

Grupo de Facebook

YouTube

Twitch

Instagram

GitHub

Grupo de WhatsApp

Grupo de Telegram

Discord

Slack

Spotify for Podcasters

Podcasts en Spotify

Podcasts en SoundCloud

Apple Podcasts

Open Collectiva

Threads

YouTube Podcasts

Amazon Music for Podcasters

Canal de WhatsApp

Canal de Telegram

Signal

Bluesky

Skype

Patreon

Reddit

Mastodon

Pastebin

Amazon (USA)

Amazon (España)

Tumblr

TikTok

Substack

Redes Sociales (Digital)

YouTube

Grupo de WhatsApp

Grupo de Telegram

Discord

Skype

Twitch