Las Telegram Mini Apps permiten crear servicios interactivos completos dentro del mensajero: catálogos, aplicaciones de aprendizaje, reserva de consultas, pedidos y gestión de clientes. Para el proyecto «Taro i Teni» desarrollé una aplicación así, que combina una guía gratuita de cartas del Tarot y un servicio de lecturas personales en vídeo. Cuento cómo está organizado el proyecto, qué decisiones tomé y con qué problemas técnicos me encontré.
El proyecto «Taro i Teni»: cómo empezó todo
«Taro i Teni» es un proyecto de autora de Karina Ter-Grigoreva, dedicado al Tarot y a las lecturas personales en vídeo.
Primero desarrollé el landing en Tilda: el sitio taroiteni.ru. Creé un estilo visual propio, las secciones informativas y la descripción de servicios y tarifas. Más sobre el sitio en un caso aparte. Además, la autora lleva un canal de Telegram donde conversa con su audiencia.
Con el tiempo surgió la idea de ampliar las posibilidades del proyecto y crear un servicio interactivo que los visitantes pudieran usar directamente en Telegram.
Me interesaba hacer una aplicación donde la funcionalidad gratuita se combinara con los servicios de pago. También quería mantener la conexión visual con el sitio y dejar espacio para crecer.
Por qué el formato Telegram Mini App encajaba en el proyecto
El proyecto ya tenía audiencia en Telegram, así que crear una aplicación dentro del mensajero parecía lo más lógico.
La mayor ventaja de las Telegram Mini Apps para el usuario es que no hay que instalar nada. La aplicación se abre desde un enlace o a través de un bot de Telegram. Al mismo tiempo, el usuario obtiene la interfaz móvil de siempre, con pantallas, botones, catálogos y elementos interactivos.
Preví varias formas de entrar en la aplicación. Una de ellas es un código QR colocado en el sitio principal de «Taro i Teni».
El visitante del sitio puede escanear el código con el móvil y abrir la aplicación directamente en Telegram.
Resultó una estructura conectada de tres plataformas:
Sitio web
Presentación del proyecto, de la autora y de los servicios.
Canal de Telegram
Publicaciones y conversación con la audiencia.
Telegram Mini App
Guía interactiva y una interfaz adicional de interacción con el proyecto.
Este enfoque sirve también para otros nichos. Por ejemplo, una tienda online puede tener un catálogo móvil dentro de Telegram, un proyecto educativo una biblioteca interactiva de materiales y un consultor un servicio de reservas y gestión de solicitudes.
Cómo definí la funcionalidad de la primera versión
Una de las tareas importantes del desarrollo es decidir qué funciones son realmente necesarias al empezar.
Al principio se podían prever cuentas personales, historial de pedidos, pago integrado, chat interno y otras funciones. Pero cada decisión adicional aumenta el volumen de desarrollo y complica el mantenimiento posterior de la aplicación.
Por eso elegí un enfoque por etapas.
En la primera versión me centré en dos escenarios de usuario:
- El visitante abre la aplicación, explora las cartas del Tarot, usa la búsqueda y guarda los materiales que le interesan.
- El visitante conoce los temas de las lecturas personales en vídeo, mira las tarifas y pasa al formulario de solicitud.
Para usar la guía no hace falta registrarse. Las cartas favoritas se guardan en el dispositivo del usuario.
El pago integrado, el historial de pedidos y una cuenta personal completa decidí dejarlos para las siguientes etapas.
Esto permitió centrar la atención en la interfaz, el contenido del catálogo y la calidad de las funciones principales.
El resultado: un catálogo interactivo de 78 cartas del Tarot
La base de la aplicación es una guía digital de la baraja clásica Rider-Waite-Smith.
Contiene 78 cartas: 22 Arcanos Mayores y 56 Arcanos Menores.
Desarrollé una interfaz que permite ver el catálogo completo, encontrar cartas por nombre y abrir páginas independientes con interpretaciones detalladas.
Búsqueda y filtros
El catálogo tiene búsqueda por nombres en ruso y en inglés y filtros por categorías de cartas.
El usuario puede llegar rápido al arcano que busca sin recorrer toda la baraja.
Durante el desarrollo presté atención a la comprobación de los datos: que la baraja esté completa, los nombres de las cartas, las imágenes y el contenido de los textos.
Fichas con interpretaciones
Cada carta tiene su propia página con imagen y descripción.
Este formato es cómodo para estudiar la baraja paso a paso. El usuario puede abrir la carta que le interesa y leer el material dentro de la propia aplicación.
Cartas favoritas
Añadí la posibilidad de guardar cartas en favoritos.
La selección sigue disponible al volver a abrir la aplicación en el mismo dispositivo, mientras se conserven sus datos locales.
Para una guía pequeña es una solución bastante práctica: el usuario obtiene una función útil sin registrarse ni crear una cuenta aparte.
Más adelante, si hace falta, los favoritos se pueden vincular a una cuenta personal y sincronizar entre dispositivos.
Cómo está organizada la sección de lecturas personales en vídeo
Además del catálogo gratuito, la aplicación tiene secciones dedicadas a los servicios de pago de la autora del proyecto.
En la pantalla principal hay seis temas de lecturas personales en vídeo.
El visitante puede elegir un tema, conocer las condiciones y ver las tarifas.
Para enviar una solicitud desarrollé un formulario con tres campos principales:
- Nombre — se puede usar un seudónimo.
- Tema de la solicitud.
- Pregunta para una lectura personal.
La interfaz del formulario está preparada para conectar más adelante el envío automático de solicitudes mediante un bot de Telegram.
Cuando se haga esta integración, la autora del proyecto podrá recibir las solicitudes directamente en Telegram. En el futuro el sistema se puede completar con notificaciones, historial de pedidos y una interfaz de administración.
Por separado preví secciones informativas: datos sobre el proyecto, la descripción del proceso para obtener el servicio en cinco pasos, tarifas y respuestas a preguntas.
Así el visitante puede obtener por sí mismo toda la información necesaria antes de ponerse en contacto.
Diseño: cómo conservar el estilo del sitio en una aplicación móvil
Como «Taro i Teni» ya tenía un sitio web, decidí conservar su estilo visual en la Telegram Mini App.
Aun así, la interfaz de la aplicación necesitaba un diseño aparte. En una pantalla pequeña hay que tener en cuenta la posición de los botones, el tamaño de las imágenes, la accesibilidad de la navegación y el comportamiento de los elementos interactivos.
Presté especial atención al catálogo de cartas. Las imágenes tenían que seguir siendo lo bastante grandes para verse bien, pero sin sobrecargar la pantalla.
Preparé los primeros diseños en Claude Design y después pasé a construir la interfaz.
Durante el desarrollo comprobé la aplicación muchas veces directamente en Telegram, en el móvil.
En total hice más de 20 ajustes de la interfaz. Afiné los tamaños de los elementos, la posición de los botones, el aspecto de cada pantalla y el comportamiento de los componentes.
Además comprobé la adaptación en anchos de 320 a 430 píxeles.
Para mí es fundamental evaluar la interfaz terminada en un dispositivo real. Incluso un diseño cuidado puede requerir cambios importantes tras probarlo en un entorno móvil.
Optimización de gráficos: cómo reducir el peso de la aplicación
Las imágenes de una aplicación móvil deben prepararse optimizadas desde el principio: de su peso depende la velocidad de carga.
La aplicación usa 78 cartas del Tarot, elementos decorativos e iconos. Los gráficos originales resultaron bastante pesados para una interfaz móvil.
Por la gran cantidad de archivos, las imágenes tardaban en cargar más de lo que me gustaría.
Revisé los tamaños de los recursos gráficos y preparé versiones más ligeras de los archivos.
Como resultado se lograron las siguientes cifras:
- El peso de la primera pantalla bajó de 2,4 a aproximadamente 0,9 MB.
- El volumen de datos descargados se redujo en torno a un 62,5%.
- El tamaño de algunos iconos bajó de 227-380 KB a 13-17 KB.
- Las imágenes del catálogo empezaron a cargar más rápido.
Las cartas también se prepararon con una resolución más compacta, adecuada para una interfaz móvil.
Esta etapa confirmó una vez más la importancia de optimizar los gráficos en aplicaciones con muchas imágenes.
Al diseñar servicios así, ahora tengo en cuenta el peso de los recursos gráficos ya en la fase de preparación del diseño.
Particularidades del desarrollo dentro de Telegram
Las Telegram Mini Apps tienen particularidades técnicas que hay que tener en cuenta al desarrollar y probar.
Me encontré con una de ellas al probar la aplicación.
En un navegador normal todo se abría bien. Pero al iniciarla dentro de Telegram, en algunos casos aparecía el error «Página no encontrada».
La causa estaba en cómo se procesan las direcciones. Telegram añadía a la URL datos de servicio que el mecanismo de navegación de la aplicación interpretaba mal.
Tras analizar el problema cambié el procesamiento de las rutas y corregí el error.
Este caso demostró lo importante que es probar la aplicación directamente dentro de Telegram.
Presté atención aparte a la comprobación del catálogo, la búsqueda, los favoritos y la carga de imágenes. Para el proyecto se prepararon comprobaciones automáticas de los datos y de algunos mecanismos de la aplicación.
Resultado: la primera versión de la Telegram Mini App está publicada
El desarrollo dio como resultado una aplicación en funcionamiento que complementa el landing de «Taro i Teni» y el sitio taroiteni.ru.
La primera versión incluye:
- Una página principal con seis temas de lecturas en vídeo.
- Una guía interactiva de 78 cartas del Tarot.
- Búsqueda y filtros del catálogo.
- Fichas con imágenes e interpretaciones.
- Guardado de cartas favoritas.
- Secciones sobre la autora y sobre cómo obtener los servicios.
- Tarifas y respuestas a preguntas.
- Interfaz del formulario de solicitud.
- Acceso desde el sitio principal mediante un código QR.
La aplicación está adaptada a dispositivos móviles, los gráficos están optimizados y las funciones principales se han comprobado.
Para el proyecto es una plataforma digital adicional que ofrece a la audiencia un servicio interactivo gratuito y presenta los servicios personales de la autora.
La primera versión también se ha convertido en la base para seguir ampliando la funcionalidad.
Cómo puede seguir creciendo la aplicación
En la fase de la primera versión limité deliberadamente el conjunto de funciones, pero al diseñar tuve en cuenta la posibilidad de seguir desarrollándola.
Una Telegram Mini App tiene un potencial bastante amplio: a medida que crezca el proyecto, se pueden añadir a la interfaz inicial nuevos módulos e integraciones.
Para «Taro i Teni» se estudian varias direcciones.
Tiradas interactivas con inteligencia artificial
En la aplicación se puede crear una función de tirada propia.
El usuario elige las cartas y recibe una interpretación automática hecha con ayuda de inteligencia artificial.
Más adelante se pueden prever distintos tipos de tiradas y funciones de pago del servicio.
Automatización de la recepción de solicitudes
La siguiente etapa es conectar el formulario de solicitud a un bot de Telegram.
Así la autora del proyecto recibirá los avisos de nuevas solicitudes directamente en el mensajero.
Además se pueden implementar notificaciones automáticas, cambio de estado de los pedidos y otras herramientas para trabajar con las solicitudes.
Cuenta personal para la autora del proyecto
Para Karina se puede desarrollar una interfaz de administración aparte, donde se reúna la información sobre el funcionamiento del servicio.
En esa cuenta se puede prever la consulta de solicitudes, el historial de pedidos, fichas de clientes, cambio de estados y búsqueda de solicitudes.
Con el desarrollo del proyecto, la funcionalidad se puede ampliar con la gestión de tarifas, indicadores financieros y otras herramientas.
Estadísticas y analítica
Otra dirección prometedora es conectar analítica.
Por ejemplo, se puede seguir el número de visitantes, la popularidad de las secciones, la demanda de los temas de lecturas en vídeo, la evolución de las solicitudes y el número de pedidos completados.
Estos datos ayudarán a la autora a entender los intereses de la audiencia y a tomar decisiones sobre el desarrollo del proyecto.
Integraciones con servicios externos
Si hace falta, la aplicación se puede completar con pago online, CRM, un sistema de notificaciones y otras integraciones.
Así la guía inicial podrá convertirse poco a poco en un servicio más funcional para la relación con los clientes y la gestión de pedidos.
Qué me aportó este proyecto como desarrolladora
Trabajar en «Taro i Teni» me permitió reunir varias áreas en las que trabajo: diseño de interfaces, desarrollo de productos digitales, creación de contenido e integración del sitio web con servicios adicionales.
Resultaron especialmente importantes la preparación de gráficos ligeros, la adaptación de la interfaz a Telegram y la definición de las funciones de la primera versión.
Con esta aplicación se ve bien cómo se puede desarrollar paso a paso un pequeño proyecto de autor: primero crear un sitio, después completarlo con una Telegram Mini App y más adelante conectar automatización, analítica y nuevas funciones para los usuarios.
Este enfoque sirve para distintos tipos de negocio. Para un proyecto puede ser una guía interactiva, para otro un catálogo de productos, un servicio educativo o un sistema de reservas de clientes.
En cada caso empiezo estudiando la tarea y diseñando los escenarios de usuario, para definir el conjunto adecuado de funciones y las posibilidades de crecimiento.
Desarrollo de Telegram Mini Apps para las tareas de tu proyecto
Me dedico al desarrollo de sitios web y servicios digitales, incluidas Telegram Mini Apps para empresas, expertos y proyectos de autor.
Según la tarea, puede ser una aplicación compacta con varias pantallas o un servicio más complejo con cuentas personales, pago, analítica e integraciones.
Al desarrollar presto atención a la estructura, a la comodidad de la interfaz, a la calidad técnica y a la posibilidad de ampliar la funcionalidad más adelante.
Si planeas crear tu propia aplicación dentro de Telegram, cuéntame tu idea.
Te ayudaré a definir qué funciones hacen falta en la primera etapa, cómo organizar los escenarios de usuario y cómo puede crecer la aplicación junto con tu proyecto.