Ejercicio: Enviar mensajes

⏱ 50 minutos
📶 Nivel: intermedio

Objetivo

Enviar de verdad un texto, botones y una lista a tu celular, y practicar con JavaScript puro las tres decisiones que toma el código de envío: validar botones, armar el cuerpo de un texto y decidir qué hacer ante un código de error.

Cómo se trabaja

La parte A usa tu cuenta de pruebas de la lección 12 y el código del curso. La parte B son tres funciones que se comprueban en esta página; son versiones reducidas de construirEnvio y de la tabla de errores. No pegues tokens reales aquí.

💡 Reto extra

Añade validarLista(secciones) con las reglas de la lección (máximo 10 filas en total, títulos de fila de hasta 24 caracteres y descripción de hasta 72) y compárala con envioLista de src/whatsapp.js.

▶ 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. En codigo/, crea un script enviar-prueba.mjs que importe construirEnvio y enviarMensaje de ./src/whatsapp.js, lea WA_TOKEN y WA_PHONE_ID de process.env y envíe un texto a tu celular de prueba.
Parte A. Ejecútalo con tu token temporal en variables de entorno (no en el archivo). Si tu ventana de 24 horas está cerrada, responde hola desde el celular y repite.
Parte A. Envía un mensaje de botones con dos opciones (entrega:recojo y entrega:delivery) y toca uno desde el celular. Mira en los registros qué id llega.
Parte A. Provoca un error a propósito (token falso o título de botón de 30 letras) y anota el mensaje que ves.
Parte B. Escribe validarBotones(botones): recibe un arreglo de {id, titulo} y devuelve un arreglo de textos con los problemas encontrados (vacío si todo está bien). Problemas: "entre 1 y 3 botones" si hay 0 o más de 3; "titulo largo: <titulo>" si un título pasa de 20 caracteres; "titulo repetido: <titulo>" si un título ya apareció; "id vacio" si falta un id.
Parte B. Escribe cuerpoTexto(to, texto): devuelve el cuerpo de la API { messaging_product: "whatsapp", recipient_type: "individual", to, type: "text", text: { preview_url: false, body: texto } }. Si el texto está vacío o pasa de 4096 caracteres, lanza un Error.
Parte B. Escribe accionParaError(codigo): devuelve "renovar-token" para 190; "usar-plantilla" para 131047; "revisar-cuerpo" para 100, 131051 y 132000; "esperar" para 130429 y 131056; "pedir-revision-cliente" para 131026; y "leer-documentacion" para cualquier otro código.

💡 Pista 1: Validar sin repetir

Para detectar títulos repetidos usa un Set: si ya lo contiene, agrega el problema; si no, añádelo. Para el largo, compara titulo.length > 20.

💡 Pista 2: Cuerpo de texto

Valida primero (if (!texto || texto.length > 4096) throw new Error(...)) y luego devuelve el objeto literal. Cuida el nombre preview_url y su valor false.

💡 Pista 3: Tabla de códigos

Un switch o un objeto { 190: "renovar-token", ... } con ?? "leer-documentacion" resuelve todo. Los números del código pueden venir como número; no hace falta convertirlos.

🔎 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

function validarBotones(botones) {
  const problemas = [];
  if (!Array.isArray(botones) || botones.length < 1 || botones.length > 3) {
    problemas.push("entre 1 y 3 botones");
  }
  const titulos = new Set();
  for (const b of botones ?? []) {
    if (!b.id) problemas.push("id vacio");
    if (b.titulo.length > 20) problemas.push("titulo largo: " + b.titulo);
    if (titulos.has(b.titulo)) problemas.push("titulo repetido: " + b.titulo);
    titulos.add(b.titulo);
  }
  return problemas;
}

function cuerpoTexto(to, texto) {
  if (!texto || texto.length > 4096) throw new Error("texto vacio o de mas de 4096 caracteres");
  return {
    messaging_product: "whatsapp",
    recipient_type: "individual",
    to,
    type: "text",
    text: { preview_url: false, body: texto },
  };
}

const ACCIONES = {
  190: "renovar-token",
  131047: "usar-plantilla",
  100: "revisar-cuerpo",
  131051: "revisar-cuerpo",
  132000: "revisar-cuerpo",
  130429: "esperar",
  131056: "esperar",
  131026: "pedir-revision-cliente",
};

function accionParaError(codigo) {
  return ACCIONES[codigo] ?? "leer-documentacion";
}