Crear una Telegram Mini App con redes neuronales se puede: la IA se ocupa bien de los maquetados de las pantallas, de la lógica del catálogo y del formulario, y de los textos de la interfaz. En manual quedan la configuración del bot en Telegram, el hosting, la comprobación de los datos del usuario en el servidor, el pago y la prueba en un teléfono de verdad. Así fue en mi proyecto «Taro i Teni»: empecé por los maquetados de las pantallas, elegí yo misma las herramientas de cada etapa, y después la aplicación se armó y se comprobó muchas veces dentro del propio Telegram.
Abajo separo qué acelera concretamente la red neuronal, dónde no se puede prescindir de una persona y cómo va el trabajo desde la idea hasta la primera versión.
Qué es una Mini App y en qué se distingue de un bot
Un bot corriente habla con mensajes y botones en el chat. Una Mini App es una aplicación web que se abre dentro de Telegram por encima del chat: con sus pantallas, búsqueda, filtros y formularios. Técnicamente es una página web, pero Telegram le pasa datos del usuario, los colores del tema actual y acceso a sus elementos de interfaz.
¿Cuándo basta un bot y cuándo hace falta una mini aplicación? Si el usuario hace una pregunta y recibe una respuesta, reserva una hora o elige entre tres variantes, un bot corriente basta. Si hay que hojear un catálogo, buscar, comparar, guardar en favoritos y rellenar un formulario de varios campos, los mensajes del chat se vuelven incómodos. Ahí aparece el sentido de una mini aplicación: la persona se queda en Telegram, pero obtiene la interfaz habitual de un sitio.
Una mini aplicación se puede abrir de varias formas. Según la documentación de Telegram, el bot puede mostrarla con el botón del menú, se puede configurar una mini aplicación principal que se abre desde el perfil del bot o por un enlace directo del tipo t.me/nombre_del_bot?startapp. Todo eso se configura en @BotFather.
El camino del usuario suele verse así:
- El bot: la persona lo encuentra en la búsqueda, por un enlace o por un código QR.
- El botón: abre la mini aplicación.
- La mini aplicación: catálogo, fichas, formulario.
- El servidor: recibe los datos y comprueba que vinieron de Telegram.
- La solicitud: llega al dueño del negocio.
La red neuronal ayuda sobre todo en el tercer paso. Los demás eslabones exigen configuración manual.
Qué hace la red neuronal al crear una Mini App
Interfaz y pantallas
Los maquetados de las pantallas son por donde conviene empezar con IA. En «Taro i Teni» empecé justo por los maquetados: el catálogo de cartas, la ficha, los favoritos, las tarifas, el formulario. En esta etapa se pueden probar variantes rápido, mientras la lógica no está fijada y no duele tirar nada.
El lado fuerte de la red neuronal aquí es la velocidad de los borradores. El lado débil es que diseña para una pantalla abstracta. La mini aplicación vive dentro de Telegram en el teléfono: arriba la cabecera de Telegram, abajo los elementos del sistema, y el ancho de la pantalla es pequeño. Eso hay que indicarlo en la tarea, si no el maquetado quedará bonito en el ordenador y apretado en el teléfono.
Otro detalle que conviene meter en la tarea desde el principio son los temas. Telegram puede ser claro u oscuro, y la mini aplicación recibe de él el esquema y los colores actuales. Si el maquetado está calculado solo para un fondo claro, en el tema oscuro parte del texto puede perderse. La red neuronal lo tendrá en cuenta si se lo pide, pero por su cuenta no siempre lo recuerda.
Por eso fijo el marco antes de los maquetados: que es una mini aplicación dentro de Telegram, a qué ancho de pantalla y con qué márgenes respecto de los elementos del sistema vive, cómo se ve en el tema claro y en el oscuro, qué pantallas tiene y qué ve la persona cuando la búsqueda no encuentra nada o la carga falla. Si el marco no está puesto, un maquetado bonito después hay que rehacerlo.
Lógica del catálogo y del formulario
Un catálogo con búsqueda, filtros y favoritos es una tarea clara para una red neuronal. En la primera versión de «Taro i Teni» es un catálogo de 78 cartas: 22 arcanos mayores y 56 menores, búsqueda por los nombres en ruso y en inglés, filtros, favoritos que se guardan en el dispositivo. También seis temas de lecturas en vídeo, tarifas, la interfaz del formulario de solicitud y la entrada desde el sitio por un código QR.
Para que la red neuronal arme esa lógica sin errores, los datos conviene prepararlos antes: la lista de todos los elementos del catálogo con sus campos, las reglas de los filtros, qué cuenta como coincidencia en la búsqueda. Si la búsqueda debe funcionar en dos idiomas, eso también hay que decirlo de forma explícita.
También conviene decidir antes dónde se guardan los datos del usuario. Los favoritos de «Taro i Teni» se guardan en el dispositivo: es simple y no exige servidor, pero si la persona abre la aplicación en otro teléfono, allí no estarán. Para una primera versión esa decisión es normal. Para un área personal con el historial de pedidos ya hace falta un servidor, y eso cambia el volumen de trabajo.
Técnicamente la aplicación está armada con React, TypeScript y Vite y funciona como PWA. Para una mini aplicación ese conjunto no es obligatorio, pero la combinación es cómoda: las páginas se arman rápido y se comprueban fácil.
Textos y gráficos
Los textos de los botones, las pistas, los mensajes de error y los estados vacíos los escribe rápido la red neuronal. Igual hay que revisarlos: en una pantalla estrecha un rótulo largo rompe el botón, y el mensaje «algo salió mal» no le explica nada a la persona.
Con los gráficos la red neuronal también ayuda, pero hay un tropiezo que en «Taro i Teni» costó un trabajo aparte: el peso. La primera pantalla pesaba 2,4 MB y, tras la optimización, cerca de 0,9 MB. Los iconos al principio pesaban 227–380 KB cada uno y después 13–17 KB. Para una mini aplicación que se abre con internet móvil, esa diferencia se nota.
Por eso los requisitos de peso de las imágenes y de orden de carga los fijo antes, y no los corrijo al final. Sin ellos la interfaz queda bonita, pero tarda en abrirse en el metro.
Qué queda como trabajo manual
El bot y los ajustes en Telegram
La mini aplicación no existe aparte del bot. Hay que crear el bot, configurar el botón del menú o la mini aplicación principal, indicar la dirección de la aplicación y comprobar cómo se abre desde el chat, desde el perfil del bot y por el enlace directo. Todo eso se hace en @BotFather, y aquí la red neuronal solo puede sugerir el orden de los pasos.
Aquí entra también todo lo que la persona ve antes de abrir la aplicación: el nombre del bot, la descripción, el mensaje de bienvenida, el texto del botón. La red neuronal propondrá textos, pero elegirlos y escribirlos habrá que hacerlo a mano. De esos detalles depende si la persona entiende para qué pulsar el botón.
Hosting y dirección
Una mini aplicación es una página web que hay que alojar en algún sitio. El hosting, el dominio, la dirección que se indica en los ajustes del bot: todo eso es trabajo manual. De aquí salen también errores inesperados. En «Taro i Teni» apareció el error «Página no encontrada»: Telegram añadía a la dirección sus datos de servicio y la aplicación no reconocía la página. Lo corregí tratando las rutas. La red neuronal no predice un error así hasta que lo ve en funcionamiento.
Comprobación de los datos del usuario en el servidor
Telegram le pasa a la mini aplicación datos del usuario. La documentación advierte de forma directa: los datos del campo initDataUnsafe no se pueden dar por fiables, e initData hay que comprobarlo en el servidor del bot antes de usarlo. Si no, cualquiera puede poner el identificador de otra persona.
En palabras simples: la mini aplicación se abre en Telegram y recibe de él un «pase» con los datos del usuario. Por sí solo ese pase no garantiza nada hasta que el servidor comprueba la firma de Telegram. Si en la aplicación hay un área personal, pedidos o algo que no se puede mostrar a otros, no se puede lanzar sin la comprobación en el servidor.
Esa comprobación la puede escribir la red neuronal, pero la decisión de dónde se ejecuta y qué pasa si falla la toma una persona. Y comprobar que todo funciona también le toca a una persona.
Pago
En la primera versión de «Taro i Teni» no hay pago: las tarifas se muestran, y el formulario de solicitud está preparado para enviarse por el bot en versiones siguientes. Si el pago hace falta, habrá que entender las reglas de Telegram. Según la documentación, los bienes y servicios físicos se pagan por proveedores de pago externos, y los bienes y servicios digitales dentro de Telegram se pagan en Telegram Stars. Elegir el esquema y conectar el proveedor es trabajo manual.
Para una primera versión a menudo es razonable prescindir del pago, como en «Taro i Teni»: mostrar las tarifas y recoger solicitudes. Así es más fácil comprobar si la gente necesita el producto antes de entrar en pagos, devoluciones y recibos.
Cómo va el trabajo: de la idea a la primera versión
El trabajo sobre una mini aplicación no empieza por el código, sino por la respuesta a qué debe hacer la persona dentro de Telegram y qué debe obtener al final: elegir un producto, reservar, encontrar la ficha que busca. De eso dependen los datos que hay que reunir antes, las pantallas, la lógica y lo que con seguridad no entrará en la primera versión. Después van los maquetados al ancho del teléfono, el armado, la configuración del bot, el hosting y la dirección. La IA acelera casi cada una de estas etapas, pero atarlas en una aplicación que funciona y aceptar el resultado es tarea de una persona que entiende cómo están hechos la interfaz, Telegram y la parte del servidor.
Lo que más se descubre es en la prueba dentro del propio Telegram en el teléfono. En «Taro i Teni», después de esa prueba, hicieron falta más de 20 correcciones de interfaz, y se comprobó un ancho de pantalla de 320–430 px. Las comprobaciones automáticas vigilan los datos y los mecanismos de la aplicación: el catálogo, la búsqueda, los filtros, los favoritos, todo lo que es fácil romper en la corrección siguiente. Y una decisión aparte es qué aplazar. En «Taro i Teni» las lecturas con IA son un plan de desarrollo, no una función de la primera versión.
Quién hace qué: la IA y la persona
| Etapa | Qué hace la IA | Qué hace la persona |
|---|---|---|
| Idea y escenario | Propone variantes de pantallas | Decide qué necesita el usuario |
| Maquetados | Arma borradores rápido | Los comprueba al ancho del teléfono |
| Lógica del catálogo y del formulario | Escribe el código a partir de los datos | Prepara los datos y las reglas |
| Textos de la interfaz | Escribe rótulos y pistas | Comprueba la longitud y el sentido |
| Bot y ajustes | Sugiere el orden | Los configura en @BotFather |
| Hosting y dirección | Sugiere variantes | Lo publica y comprueba la dirección |
| Datos del usuario | Escribe la comprobación de initData | Decide dónde y cómo comprobar |
| Pago | Ayuda con el código | Elige el esquema y el proveedor |
Qué comprobar antes del lanzamiento
La lista es corta, pero cada punto en mi proyecto dio un error al menos una vez:
- La aplicación se abre de todas las formas: desde el botón del menú, desde el perfil del bot, por el enlace directo, por el código QR del sitio.
- No hay error «Página no encontrada» al abrirla con los parámetros de Telegram.
- La interfaz cabe en pantallas estrechas, nada se recorta y nada se mete bajo los elementos del sistema.
- Tema claro y oscuro de Telegram: el texto se lee en ambos.Telegram le pasa a la aplicación los colores del tema, y conviene usarlos.
- La primera pantalla carga rápido con internet móvil: compruebe el peso de la página y de las imágenes.
- Los datos del usuario se comprueban en el servidor y no se toman de initDataUnsafe.
- El formulario de solicitud dice qué ocurrió después del envío y no pierde lo escrito si hay un error.
Después del lanzamiento el trabajo no termina. Cada corrección en el código significa una prueba nueva en Telegram en el teléfono, porque lo que se ve normal en el navegador del ordenador dentro de Telegram puede comportarse de otra forma. Las comprobaciones automáticas cazan las roturas de datos y de lógica, pero el aspecto igual lo mira una persona.
Si planea su propia mini aplicación, mire cómo está hecha la desarrollo de una Telegram Mini App, y si la tarea sale del catálogo y del formulario, eso ya es desarrollo a medida. La idea se puede hablar por el cuestionario de mara-craft.com: miraré qué entra en la primera versión y qué conviene aplazar.