Configuración inicial

1

Desarrolla tu Chatbot con la API de Whatsapp

2

¿Cómo funciona la API de WhatsApp?

3

¿Cómo crear una cuenta de desarrollador en Meta?

4

¿Cómo configurar una aplicación en Developers Facebook?

5

Creación y configuración de una aplicación en Whatsapp

Integración con la API de WhatsApp

6

¿Cómo configurar la API de WhatsApp para recibir y enviar mensajes?

7

¿Cómo configurar la API de WhatsaApp con Postman?

8

¿Cómo crear un servidor de Express?

Implementación de Servidor Express

9

¿Cómo implementar Webhooks en Express?

10

¿Cómo optimizar la arquitectura de un bot usando servicios y controladores?

Comunicación con la API de WhatsApp

11

¿Cómo enviar un mensaje de bienvenida con la API de WhatsApp?

12

¿Cómo configurar una respuesta personalizada desde la API de WhatsApp?

Flujos de Interacción con la API de WhatsApp

13

¿Cómo desarrollar un flujo inicial para guiar a los usuarios con WhatsApp API?

14

¿Cómo configurar un menú de opciones desde la API de WhatsApp?

Multimedia con WhatsApp API

15

¿Cómo integrar mensajes multimedia en el flujo de tu chatbot?

16

¿Cómo Integrar el Send-Media-Message al flujo de tu Chatbot?

17

¿Cómo crear el flujo para agendar una cita desde la API de WhatsApp?

18

¿Cómo crear una lógica que permita almacenar el flujo de tu Chatbot?

Avances y Personalización

19

¿Cómo conectar tu chatbot con Google Sheets para la gestión de datos?

20

¿Cómo configurar la API de Google Sheets para almacenar la información de tu usuario?

21

¿Cómo conectar la API de WhatsApp con ChatGPT?

22

¿Cómo integrar ChatGPT al flujo de la API de WhatsApp?

23

¿Cómo enviar contactos desde tu chatbot para soporte al usuario?

24

¿Cómo configurar la API de WhatsApp para enviar ubicaciones a tu usuario?

25

¿Cómo crear flujos escalables en la API de WhatsApp usando buenas prácticas de programación?

26

¿Cómo desplegar la API de WhatsApp en un ambiente de producción?

27

¿Cómo publicar tu Chatbot para interacciones reales?

28

Ahora tienes tu Chatbot que potencia las interacciones con tu usuario

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Cómo Integrar el Send-Media-Message al flujo de tu Chatbot?

16/28
Recursos

Aportes 14

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

![](https://static.platzi.com/media/user_upload/image-d537386a-a439-4b9a-90aa-9525bc13f2f1.jpg)
Miramos las coincidencias ![](https://static.platzi.com/media/user_upload/image-67189af3-b70a-441d-a909-95b260b39194.jpg) y de acuerdo a eso mostramos la información que queramos, lo unico que cambia entre los envio de los mensajes son el content ![](https://static.platzi.com/media/user_upload/image-b2706fe7-6077-4e5e-a72a-3a9684f28c1c.jpg) por eso tengo un servicio ![](https://static.platzi.com/media/user_upload/image-0c7366ae-688d-48e5-9220-cb6dc5675849.jpg) y los globales para evitar fallos y mejorar la consistencia ![](https://static.platzi.com/media/user_upload/image-d4257470-7f6c-4149-9f45-0fcd5fb0547d.jpg)
Creamos una función donde tendremos las palabras claves de tipos de formatos: ![](https://static.platzi.com/media/user_upload/image-2a137e93-ad8f-424d-a4c5-c8e0492de891.jpg) Listamos los archivos multimedia: ![](https://static.platzi.com/media/user_upload/image-68c7913b-2c1f-4e15-a032-044ceb8fc9f2.jpg) Creamos nuestra función que hará la magia: ![](https://static.platzi.com/media/user_upload/image-d8cd6420-72e3-4d0a-8c03-65d660a6ef17.jpg) y por último, agregamos al flujo conversacional: ![](https://static.platzi.com/media/user_upload/image-c3904340-ea7b-4994-80ac-749a0c27d41c.jpg)
Hola, Mi función quedo así, envie la palabra al momento de llamar la función. ![](https://static.platzi.com/media/user_upload/image-d7309a74-65b1-4067-b7f4-c5b319729dc3.jpg)
Un sistema para separa turnos en peluquerias o salone de belleza
En los recursos no están ni los archivos ni las URLs para seguir el ejemplo del profesor
wooooaaaaah se puede audio, que genial
![]()Asi quedo mi función: repo: <https://github.com/zearkiatos/medpet-chatbot-service> ```js mediaActions = { audio: { url: `${config.CDN_BASE_URL}/medpet-audio.aac`, caption: "Welcome 🔉", }, image: { url: `${config.CDN_BASE_URL}/medpet-imagen.png`, caption: "¡This is an image! 🏞️", }, video: { url: `${config.CDN_BASE_URL}/medpet-video.mp4`, caption: "¡This is a video! 🎥", }, document: { url: `${config.CDN_BASE_URL}/medpet-file.pdf`, caption: "¡This is a PDF! 📄", }, }; async sendMedia(to, media) { const { url, caption } = this.mediaActions[media]; await whatsappService.sendMediaMessage(to, media, url, caption); } ``` mediaActions = { audio: { url: `${config.CDN\_BASE\_URL}/medpet-audio.aac`, caption: "Welcome 🔉", }, image: { url: `${config.CDN\_BASE\_URL}/medpet-imagen.png`, caption: "¡This is an image! 🏞️", }, video: { url: `${config.CDN\_BASE\_URL}/medpet-video.mp4`, caption: "¡This is a video! 🎥", }, document: { url: `${config.CDN\_BASE\_URL}/medpet-file.pdf`, caption: "¡This is a PDF! 📄", }, }; async sendMedia(to, media) { const { url, caption } = this.mediaActions\[media]; await whatsappService.sendMediaMessage(to, media, url, caption); }
Hola, ustedes están haciendo commit y subiendo a github ?? Comparto como intente resolverlo. Observe en los comentarios una forma más legible de hacerlo con mapas. Use un switch para evaluar el type: ![](https://static.platzi.com/media/user_upload/imagen-958ef8fa-4e13-4e9e-b501-4486c868998f.jpg) Y genere una función getMediaResponse para recibir el mensaje y evaluar si coincide con alguno de los disparadores, retornando el disparador: ![](https://static.platzi.com/media/user_upload/imagen-4a3e9977-31b0-4d85-a4b6-a8e404115686.jpg) Por último (que me parece que no quedo tan bien) en el else if llame a la función anterior para que fuera true si hay coincidencia y luego la llame nuevamente para pasar la palabra como argumento en handleSendMedia: ![](https://static.platzi.com/media/user_upload/imagen-04e71ae0-dc15-42cf-b377-2d64952c2d7f.jpg) Resultados: ![](https://static.platzi.com/media/user_upload/imagen-2394a3d1-9089-4efc-9317-936806860d12.jpg) Espero que les sirva a alguien para guiarlo si es necesario, y quedo abierto a las sugerencias de optimización, legibilidad, y buenas prácticas. Gracias.
## ✨🦄 Para ahorrar código definí un formato para recibir uno de los 4 tipos de media: Se ve algo así: ![](https://static.platzi.com/media/user_upload/image-deb013f7-30eb-4d13-b11f-b578b1ec2d32.jpg) Código: ![](https://static.platzi.com/media/user_upload/image-d4047235-8ea2-44df-b309-ef6dd7d29413.jpg) ![](https://static.platzi.com/media/user_upload/image-520dd8d8-6671-4a7d-93e8-dfd4f39af195.jpg)
Muchas gracias a todos por sus aportes ;)
Solución: 1\. Función similar para detertar saludos pero ahora con tipos de mensajes multimedia: `isMediaType(message){    const greetings = ["audio", "image", "video", "document"]    return greetings.includes(message)  }` 1. Modificación en sendMedia: `async sendMedia (to, type){    try{      let mediaUrl;      let caption;` `      switch(type){        case "audio":          mediaUrl = "https://s3.amazonaws.com/gndx.dev/medpet-audio.aac";          caption = "Hola";          break;        case "video":          mediaUrl = 'https://s3.amazonaws.com/gndx.dev/medpet-video.mp4';          caption = '¡Esto es una video!';          break;        case "document":          mediaUrl = 'https://s3.amazonaws.com/gndx.dev/medpet-file.pdf';          caption = '¡Esto es un PDF!'          break;        case "image":          mediaUrl = 'https://s3.amazonaws.com/gndx.dev/medpet-imagen.png';          caption = '¡Esto es una Imagen!'          break;      }` `      await whatsappService.sendMediaMessage(to, type, mediaUrl, caption)` `    }catch(e){      console.error("Error in SendMedia: ", e)    }}` 2. Finalmente uso en el flujo principal (handleIncomingMessage): ` if(this.isGreeting(incomingMessage)){            await this.sendWelcomeMessage(message.from, message.id, senderInfo);            await this.sendWelcomeMenu(message.from)        } else if(this.isMediaType(incomingMessage)){          await this.sendMedia(message.from, incomingMessage)        }`
![](https://static.platzi.com/media/user_upload/image-02e74794-daac-4f8e-9340-85bde0372ac2.jpg)
Comparto mi solución ayudada en parte por ChatGPT Para tener los archivos multimedia: ```js async sendMedia(to, mediaTrigger) { //Objeto de objetos con los diferentes archivos multimedia const mediaMap = { audio: { mediaUrl: 'https://s3.amazonaws.com/gndx.dev/medpet-audio.aac', caption: 'Esto es un audio', type: 'audio', }, video: { mediaUrl: 'https://s3.amazonaws.com/gndx.dev/medpet-video.mp4', caption: 'Esto es un video', type: 'video', }, image: { mediaUrl: 'https://s3.amazonaws.com/gndx.dev/medpet-imagen.png', caption: 'Esto es una imagen', type: 'image', }, document: { mediaUrl: 'https://s3.amazonaws.com/gndx.dev/medpet-file.pdf', caption: 'Esto es un documento', type: 'document', }, }; // Selecciona el tipo de archivo correspondiente const selectedMedia = mediaMap[mediaTrigger]; //Manejamos el error en caso de no ser soportado if (!selectedMedia) { throw new Error('El tipo de mensaje enviado no es soportado'); } // Llama al servicio con los datos seleccionados await whatsappService.SendMediaMessage( to, selectedMedia.type, selectedMedia.mediaUrl, selectedMedia.caption ); } ```Luego, para el uso de la función ```js else if (mediaType.includes(incommingMessage)){ try{ await this.sendMedia(message.from, incommingMessage) } catch{ console.error ('Error al momento de enviar archivos multimedia', error) } } ```