Arquitectura MVC para Escalabilidad en Bots de Mensajería

Clase 10 de 28 • Curso de ChatBot con WhatsApp API

Resumen

Implementar un bot escalable usando una arquitectura organizada es esencial para gestionar su crecimiento y adaptabilidad a nuevos servicios. En este enfoque, se aplica la arquitectura Modelo-Vista-Controlador (MVC), dividiendo el proyecto en componentes específicos para garantizar claridad y facilitar futuras mejoras sin complicaciones.

¿Por qué es importante dividir el código en módulos?

Mantener toda la lógica en un solo archivo podría funcionar para proyectos pequeños, pero a medida que una aplicación crece, resulta insostenible. Dividir el código permite:

Escalabilidad: Facilita agregar funciones sin afectar la estabilidad del sistema.
Mantenimiento: Aislar cada función permite identificar y corregir errores más rápido.
Colaboración: Permite que múltiples desarrolladores trabajen en diferentes áreas sin interferir entre sí.

¿Cómo se organiza la estructura del bot?

La estructura del proyecto se divide en carpetas específicas, ubicadas en una carpeta principal llamada src, cada una cumpliendo una función particular:

config: Centraliza la configuración de variables de entorno para que puedan ser reutilizadas en toda la aplicación sin duplicación.
controllers: Encargado de recibir y manejar solicitudes entrantes y salientes. Aquí se ubica el webhook controller, responsable de gestionar los mensajes de Meta y las rutas de Webhub.
routes: Define las rutas específicas que la aplicación servirá usando Express.
services: Contiene servicios esenciales, como Message Handle y WhatsApp Service, los cuales gestionan y envían mensajes a la API de WhatsApp.

¿Qué papel juegan los webhooks en esta configuración?

Los webhooks, configurados en el archivo webhub controller, manejan las solicitudes POST y GET en las rutas especificadas (/webhub). Este controlador permite:

Validar que el servidor esté correctamente conectado con Meta.
Filtrar mensajes entrantes según su tipo y decidir las acciones correspondientes (e.g., replicar o marcar como leído).

¿Qué aporta la clase `WhatsApp Service`?

La clase WhatsApp Service administra el envío de mensajes y la interacción directa con la API de WhatsApp, lo que permite:

Enviar respuestas automáticas en función del tipo de mensaje recibido.
Marcar mensajes como leídos tras la respuesta, mejorando la experiencia del usuario.

¿Cómo contribuye esta arquitectura al trabajo en equipo?

La modularización permite que los desarrolladores trabajen en componentes específicos sin interferir con otros. Esta estructura optimiza el rendimiento, evita errores por cambios simultáneos en el código y asegura que los desarrollos futuros sean implementados eficientemente.

¿Cómo se gestiona la inicialización de la aplicación?

El archivo App.js centraliza la configuración general de la aplicación, incluyendo:

Configuración de variables de entorno y rutas de Webhub.
Inicialización del servidor, dejando la lógica de manejo de solicitudes a los controladores y servicios.

Oscar Barajas Tavares

Team Platzi•

Puedes clonar el proyecto desde este link: https://github.com/platzi/whatsapp-api/commit/4e0d59e32c564a7afc8ab04ec777953ad479247b

Marcelo J. Gracia

student•

Tenemos alguna forma de extender tiempo de expiración del token?.. 3hs son muy poc..

Daniel Oto Diaz

student•

Marcelo, si puedes, pasando a producción el proyecto, en test tienes ese limitante de 3 horas el token

orlando kuan

student•

Hice lo mismo pero python ocupando Fast-api, por si alguien le interesa. DarkCodePE/whatsapp-webhook-fast-api: This is a fast-api integration with whatsapp webhook.

Andres Cuervo

student•

Buenisimo !

Carlos Ruminaus

student•

Gracias Orlando!

Oscar Rubio

student•

Alguien me puede ayudar con este error.

Despues de crear los archivos del MVC, al ejecutar el comando npm run start, me abre el archivo de nodemon.js y no se ejecuta el programa

Daniel Esteban Martínez Herrera

student•

es en formato json no js

aquí se le puede cambiar el tipo de formato

Matias Ezequiel Rivero

student•

Hola, por la imagen, también te falta cerrar el objeto con la llave de cierre " } "

Carlos Sebastian Gracia Yañez

student•

Me hubiera gustado mas que de a poco construyéramos el modelo vista controlador explicando el paso a paso en vez de solo dar el recorrido. ni modo, toca hacer clon de una repo

jeison jose yamarte naranjo

student•

hola , te recomiendo hacer clon pero escribelo tu mismo, y le puedes preguntar chat gpt cada parte eso ayudara bastante

Oscar Ivan Lozoya Rodríguez

student•

Note dos pequeños errores que me hicieron jugar un buen rato con el código, les paso los tips:

1.- el código que se muestra puede que no compile ...nodemon la extensión correcta .json para mi caso y funciono

2.-el mensaje genera error 400 y no se hace el echo... quite el contexto

" context: { message_Id: messageId, }, " que estaba dentro del data

con estos cambios ya se responde con la nueva estructura, me quedo pendiente el marcar el mensaje como leído, pero eso se vera en próximas clases.. espero, saludos.

que

Sabina de la Serna Espinosa

student•

que significa el error 400

Deivis Montenegro

student•

Excelente clase!

Francisco Manuel Sanchez Morales

student•

Comentario solo para promocionar Deno jaja Pero con Deno no es necesario usar axios, nodemon, y el uso de env es sencillo 🦕 igual estoy usando Hono como alternativa a express hasta ahora todo bien 👍🏼

Marcelo J. Gracia

student•

me tome el trabajo de ver 2 veces este clase..

linea por linea.. incluso comparando archivos de los recursos y no logro hacer que el boot, me responda..

me marca el msg enviado pero no me hace el reply!.--

El error lo tengo en la clase WhastsAppService, en el sendMesage

Error sending message: {"message":"Request failed with status code 400","name":"AxiosError","stack":"AxiosError: Request failed with status code 400\n at settle (file:///home/marcelo/code/WhatsApp%20API/medPets/medpetsboot/node_modules/axios/lib/core/settle.js:19:12)\

José Álvarez

student•

Esta clase es la de calcular la masa del sol. Veniamos bien hasta que de pronto tengo que ir a revisar codigo en github para continuar el curso. No entiendo porque hacen estas cosas. Grabame 3 clases mas y hagamoslo en video...

ANDRES ALFONSO MIRA MEJIA

student•

✅

Andrés Cardona

student•

Algo no funciona, no está escuchando el puerto 3000, ayuda por favor

German Moreno Leiva

student•

cambia a puerto 4000

Christian Suarez

student•

Lo repliqué a .Net!!

Christian Suarez

student•

Hay que usar ngrok para simular la salida a internet de localhost!

Ulqernesh Karvenae

student•

import axios from 'axios';
import config from '../config/env.js';

class WhatsAppService {
  async sendMessage({ to , type, content }) {
    try {
      await axios({
        method: 'POST',
        url: `https://graph.facebook.com/${config.API_VERSION}/${config.BUSINESS_PHONE}/messages`,
        headers: {
          Authorization: `Bearer ${config.API_TOKEN}`,
        },
        data: {
          messaging_product: 'whatsapp',
          to,
          type,
          ...content
        },
      });
    } catch (error) {
      console.error('Error sending message:', error);
    }
  }

  async markAsRead(messageId) {
    try {
      await axios({
        method: 'POST',
        url: `https://graph.facebook.com/${config.API_VERSION}/${config.BUSINESS_PHONE}/messages`,
        headers: {
          Authorization: `Bearer ${config.API_TOKEN}`,
        },
        data: {
          messaging_product: 'whatsapp',
          status: 'read',
          message_id: messageId,
        },
      });
    } catch (error) {
      console.error('Error marking message as read:', error);
    }
  }
}

export default new WhatsAppService();
``````js
import whatsappService from './whatsappService.js';

class MessageHandler {
  async handleIncomingMessage(message) {
    const isTypeText = message?.type === 'text'
    if (message?.text.body.includes('img')) {
      const content = {
        image: {
          link: "https://generative-ai-ultisaer.s3.sa-east-1.amazonaws.com/images/breaking_free_from_chains_converted.jpg",
          caption: "Cosmic Void Darkness"
        }
      }
      await whatsappService.sendMessage({ to: message.from, type: 'image', content})
      await whatsappService.markAsRead(message.id);
      return
    }
    if (isTypeText) {
      const content = {
        text: {
          body: `Echo: ${message.text.body}`
        }
      }
      await whatsappService.sendMessage({ to: message.from, type: 'text', content});
      await whatsappService.markAsRead(message.id);
      return
    }
  }
}

export default new MessageHandler();
```Lo que se puede hacer es que al enviar un mensaje la responsabilidad caiga en el messageHandler haciendo mas modular y permitiendo enviar imgs y videos



![](https://static.platzi.com/media/user_upload/image-42f6eadc-cd29-4291-9410-20909c4c9aed.jpg)

Leidy Tatiana Rico Gamboa

student•

el video da este mensaje, No se pudo cargar el vídeo debido a un fallo del servidor o de la red o porque el formato no es compatible., que se hace hay?

JUAN JOSE VILLA SORIA

student•

Para crear las carpetas mencionadas en el video, simplemente debes estructurar tu proyecto de la siguiente manera:

Crea una carpeta principal llamada src (source).
Dentro de src, crea las siguientes carpetas:
- config
- controllers
- routes
- services

Cada carpeta tendrá su propio archivo que manejará la lógica correspondiente. Por ejemplo, en config puedes tener un archivo para las variables de entorno, en controllers los controladores de tu bot y así sucesivamente. Esto te ayudará a mantener tu código organizado y escalable.

Os Lorenzana

student•

Sigo sin poder verlo, en el iPad, alguno le pasa lo mismo. Se queda el video en negro y no se ve ningún capítulo

Arquitectura MVC para Escalabilidad en Bots de Mensajería

¿Por qué es importante dividir el código en módulos?

¿Cómo se organiza la estructura del bot?

¿Qué papel juegan los webhooks en esta configuración?

¿Qué aporta la clase WhatsApp Service?

¿Cómo contribuye esta arquitectura al trabajo en equipo?

¿Cómo se gestiona la inicialización de la aplicación?

¿Qué aporta la clase `WhatsApp Service`?