Ejercicio: Cómo funciona un bot de WhatsApp

⏱ 40 minutos
📶 Nivel: básico

Objetivo

Aplicar la regla de la ventana de 24 horas con código y reconocer a qué categoría pertenece cada plantilla, para que el bot decida qué puede enviar en cada momento.

Cómo se trabaja

La parte A es de investigación y la haces con tu navegador: sirve para conocer la documentación oficial, que será tu mejor aliada. La parte B son tres funciones de JavaScript puro que se comprueban en esta página. Todas las horas se manejan como números en milisegundos (Date.now()), así que no necesitas fechas complicadas.

La ventana de 24 horas equivale a 24 * 60 * 60 * 1000 milisegundos. Considera que la ventana está abierta si pasó menos de ese tiempo desde el último mensaje del cliente.

Motivo	Categoría
`codigo-verificacion`	`authentication`
`confirmacion-pedido`, `pedido-en-camino`, `recordatorio-pedido`	`utility`
`promocion`, `oferta`, `descuento`	`marketing`

💡 Reto extra

Añade una función horasRestantes(ultimoMensajeCliente, ahora) que diga cuántas horas le quedan a la ventana (redondeando hacia abajo y sin devolver números negativos). Más adelante la usarás para decidir cuándo conviene enviar un recordatorio como texto libre y cuándo como plantilla.

▶ Prueba tu código aquí (opcional)

Código (edítalo y pulsa Ejecutar)

<script>
// Escribe aquí tus funciones y pruébalas con console.log
</script>

Página (resultado)

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Parte A. Abre la documentación oficial de WhatsApp Business Platform en developers.facebook.com y localiza las páginas de precios y de plantillas de mensaje. Anota en un archivo notas.md cuál es hoy la regla de cobro de los mensajes dentro de la ventana de 24 horas.
Parte A. Escribe en notas.md una conversación de ejemplo de tu minimarket (5 mensajes) e indica, para cada mensaje del bot, si saldría dentro de la ventana o como plantilla.
Parte B. Escribe ventanaAbierta(ultimoMensajeCliente, ahora): devuelve true si el cliente escribió hace menos de 24 horas y false si pasó más tiempo o si nunca escribió (null).
Parte B. Escribe puedoEnviar(tipo, ultimoMensajeCliente, ahora): con "texto" solo se puede si la ventana está abierta; con "plantilla" se puede siempre (se supone que el cliente dio su opt-in). Devuelve true o false.
Parte B. Escribe categoriaPlantilla(motivo): devuelve "authentication", "utility" o "marketing" según el motivo. Si el motivo no está en la tabla, devuelve "marketing" (ante la duda, es la categoría más segura de asumir).

💡 Pista 1: Cómo medir el tiempo

Resta: ahora - ultimoMensajeCliente. Compara el resultado con 24 * 60 * 60 * 1000. No olvides el caso en que ultimoMensajeCliente sea null.

💡 Pista 2: puedoEnviar reutiliza ventanaAbierta

Si tipo === "plantilla", devuelve true. Si es "texto", devuelve lo que diga ventanaAbierta(...). Para cualquier otro tipo, devuelve false.

💡 Pista 3: Tabla de categorías

Un objeto como { "codigo-verificacion": "authentication", ... } y tabla[motivo] ?? "marketing" resuelve el caso por defecto con una sola línea.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista. Pega solo el JavaScript, sin las etiquetas <script>.

Tu código de JavaScript

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

funciones.js

const VENTANA_MS = 24 * 60 * 60 * 1000;

function ventanaAbierta(ultimoMensajeCliente, ahora) {
  if (ultimoMensajeCliente == null) return false;
  return ahora - ultimoMensajeCliente < VENTANA_MS;
}

function puedoEnviar(tipo, ultimoMensajeCliente, ahora) {
  if (tipo === "plantilla") return true;
  if (tipo === "texto") return ventanaAbierta(ultimoMensajeCliente, ahora);
  return false;
}

const CATEGORIAS = {
  "codigo-verificacion": "authentication",
  "confirmacion-pedido": "utility",
  "pedido-en-camino": "utility",
  "recordatorio-pedido": "utility",
  "promocion": "marketing",
  "oferta": "marketing",
  "descuento": "marketing",
};

function categoriaPlantilla(motivo) {
  return CATEGORIAS[motivo] ?? "marketing";
}