Ejercicio: Plantillas de mensaje

⏱ 45 minutos
📶 Nivel: intermedio

Objetivo

Validar una plantilla antes de mandarla a revisión, construir el arreglo de variables a partir de un pedido y comprobar los límites de los botones de respuesta rápida, todo con funciones puras que se comprueban en el navegador.

Cómo se trabaja

La parte A se hace con la documentación de Meta y tu cuenta de pruebas (sin enviar nada a clientes reales). La parte B son funciones de JavaScript puro. Los límites que usamos (cuerpo de 1024 caracteres, botón de 25, hasta 10 botones de respuesta rápida) vienen de la documentación; verifica que sigan vigentes cuando trabajes con una cuenta real.

💡 Reto extra

Haz que validarPlantilla también avise cuando el cuerpo empieza o termina con una variable (Meta suele rechazar plantillas así: verifica la regla vigente en la documentación) y cuando hay más variables que ejemplos disponibles.

▶ 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 en la documentación oficial de Meta la guía de plantillas y anota en notas.md las tres categorías y para qué sirve cada una.
Parte A. Redacta en notas.md tres plantillas del minimarket (confirmación de pedido, pedido en camino, promoción de fin de semana). Para cada una indica la categoría que crees que le tocará y por qué.
Parte A. Si tienes cuenta de pruebas de WhatsApp, crea una plantilla de utilidad en el panel de plantillas (o con la API) y observa su estado de revisión. No la envíes a nadie que no sea tu propio número de prueba.
Parte B. Escribe contarVariables(texto): devuelve cuántas variables posicionales distintas tiene el texto ({{1}}, {{2}}...). Si los números no son consecutivos desde 1 (por ejemplo {{1}} y {{3}}), lanza un Error. Una variable repetida cuenta una sola vez.
Parte B. Escribe nombreValido(nombre): true solo si tiene letras minúsculas sin tilde, números y guiones bajos, entre 1 y 512 caracteres.
Parte B. Escribe validarPlantilla(def): def es { nombre, cuerpo, botones: [textos] }. Devuelve un arreglo de problemas (texto); vacío si todo está bien. Reglas: nombre válido, cuerpo de 1 a 1024 caracteres, variables consecutivas, hasta 10 botones y cada texto de botón de 1 a 25 caracteres.
Parte B. Escribe variablesDePedido(pedido): devuelve [pedido.id, "S/ " + total con 2 decimales], que serán {{1}} y {{2}}.

💡 Pista 1: Encontrar las variables

Con texto.match(...) y una expresión regular global que busque dos llaves, dígitos y dos llaves obtienes todas las apariciones. Saca los números, quita repetidos con new Set(...), ordénalos y comprueba que sean 1, 2, 3... sin saltos.

💡 Pista 2: Nombre válido

Una expresión regular con letras a-z minúsculas, dígitos y guion bajo (con +, entre ^ y $), más la comprobación del largo, resuelve todo. Las tildes y mayúsculas no pasan.

💡 Pista 3: Formato de soles

pedido.total.toFixed(2) da dos decimales: 8.6 se vuelve "8.60".

🔎 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 contarVariables(texto) {
  const hallados = texto.match(/\{\{(\d+)\}\}/g) ?? [];
  const numeros = [...new Set(hallados.map((h) => Number(h.slice(2, -2))))].sort((a, b) => a - b);
  numeros.forEach((n, i) => {
    if (n !== i + 1) throw new Error("Las variables deben ser consecutivas desde {{1}}");
  });
  return numeros.length;
}

function nombreValido(nombre) {
  return typeof nombre === "string" && nombre.length >= 1 && nombre.length <= 512 && /^[a-z0-9_]+$/.test(nombre);
}

function validarPlantilla(def) {
  const problemas = [];
  if (!nombreValido(def.nombre)) problemas.push("Nombre inválido: solo minúsculas sin tilde, números y guion bajo");
  if (!def.cuerpo || def.cuerpo.length > 1024) problemas.push("El cuerpo debe tener entre 1 y 1024 caracteres");
  try { contarVariables(def.cuerpo ?? ""); } catch (e) { problemas.push(e.message); }
  const botones = def.botones ?? [];
  if (botones.length > 10) problemas.push("Máximo 10 botones");
  for (const b of botones) {
    if (!b || b.length > 25) problemas.push(`Texto de botón de 1 a 25 caracteres: "${b}"`);
  }
  return problemas;
}

function variablesDePedido(pedido) {
  return [pedido.id, "S/ " + pedido.total.toFixed(2)];
}