Cómo transferimos el servicio web a Telegram Mini Apps / Sudo Null IT News

Hasta el verano de 2023, los desarrolladores de Tochka Network se enfrentaron a un problema: CJM se estaba volviendo complejo y esto dificultaba el trabajo en el producto. Como resultado, se nos ocurrió una solución: abandonamos por completo la web y concentramos el desarrollo de la plataforma solo en Mini Apps de Telegram. Sin esto, sería imposible seguir desarrollando el producto.

En el artículo te contaré cómo y por qué abandonamos la versión web de Tochka Network, una comunidad local de emprendedores, y nos mudamos a Telegram.

Mini Apps se ejecuta en tecnologías web estándar: HTML, CSS y JavaScript. La integración se produce a través de la API de Telegram, que le permite intercambiar datos con un bot de Telegram. Todo esto hace posible utilizar el Messenger sin problemas con los sistemas y servicios existentes.

Inicialmente se suponía que las Mini Apps serían utilizadas principalmente en tiendas online. Para fines de demostración, el equipo de Telegram incluso creó un bot especial: Durger King.

Sin embargo, los desarrolladores y creadores de productos comenzaron a utilizar Mini Apps más ampliamente y a implementar sitios web completos que no están orientados a las ventas: por ejemplo, cursos de capacitación. Seguimos aproximadamente el mismo camino.

Requisitos previos para transferir el servicio a Telegram

Tochka.Network se basa en una plataforma de comunicación y citas para emprendedores. Originalmente fue creado como un sitio web con funcionalidad coincidente. Lo desarrollamos según el principio de “primero el móvil”, porque la mayoría de nuestros usuarios lo utilizaban desde dispositivos móviles. Encontrar una manera de simplificar la autorización nos llevó a Telegram y creamos un bot. La autorización fue así: el usuario vino de la página de inicio de sesión, lo verificamos a través del bot y lo transferimos nuevamente al sitio. De esta manera, los usuarios no tenían que crear un nombre de usuario y contraseña.

El siguiente paso fue utilizar el bot para envíos de servicios: por ejemplo, enviar notificaciones sobre la selección de interlocutores. También duplicamos la funcionalidad de las pestañas “Interlocutores” y “Reseñas” en la vista web.

Pero durante las entrevistas con los usuarios, descubrimos que dividir el servicio en dos entidades confunde a los usuarios. A medida que el bot adquirió funcionalidad del sitio, a los participantes del servicio les resultó difícil comprender qué plataforma era la principal. Según las solicitudes de soporte, vimos que los usuarios a menudo olvidan su contraseña, ya que todavía era necesaria en la web.

También nos perjudicó a nosotros, los desarrolladores. Era necesario tener presente constantemente de dónde venía el usuario y adónde sería transferido a continuación. CJM se estaba volviendo complejo y dificultaba el trabajo en el producto. Por ello, en el verano de 2023 decidieron abandonar por completo la web y concentrar el desarrollo de la plataforma únicamente en Telegram.

Matices de cambiar a Telegram

La transición del servicio al bot de Telegram fue gradual. Lo más difícil e importante fue decidir qué mostraríamos en la Mini App y qué quedaría solo en el bot. Como resultado, decidimos empaquetar toda la información estática y de referencia en una aplicación web. Está oculto debajo del botón “Menú”, que pasó a llamarse “Gabinete”, y la información dinámica y los correos siguen llegando al bot de Telegram.

Así, se ha trasladado una nueva funcionalidad a la Mini App:

• buscar todos los participantes del servicio,

• lista de preguntas populares: preguntas frecuentes,

• Página con los interlocutores recomendados para todos los tiempos.

La página principal estándar de la Mini Aplicación era la página de búsqueda.

Fue posible llamar a la Mini App no ​​solo presionando el botón “Gabinete”. Usamos el complemento de Telegram y agregamos “teclas de acceso rápido” al bot para acceder rápidamente a la funcionalidad oculta en la Mini aplicación: buscar en toda la base de datos de miembros, su propio perfil, preguntas frecuentes. Pero resultó que los botones en el menú inferior del bot no pueden transmitirnos información sobre qué tipo de usuario es.

Es decir, cuando haces clic en el botón “Gabinete”, que inicia nuestra Mini Aplicación, Telegram transmite su ID de Telegram y su apodo, pero cuando haces clic en los botones en el menú inferior, no transmite al bot.

Resolvimos este problema enviando un mensaje de búfer al bot con un botón de apertura de vista web.

La tarea de mostrar una selección de seis interlocutores resultó no ser trivial: un partido principal y cinco adicionales para elegir. El problema de su ubicación compacta se resolvió creando un “carrusel”, un mensaje dinámico con la capacidad de ver información sobre los usuarios de la colección que llegaron al bot.

La transición se realizó mediante los botones de flecha. Debajo de cada frase se colocaron tres botones más: ver el perfil del interlocutor, escribirle y anotar que el usuario “no es adecuado”.

Tomó un tiempo lograr el “carrusel” perfecto la primera vez. Por ejemplo, al principio había una flecha para desplazarse en una sola dirección y no había numeración de interlocutores. Debido a esto, los usuarios no entendieron que habían recibido seis tarjetas y no una.

Vista actualizada del “carrusel” Por cierto, en las primeras versiones debajo del “carrusel” no había tres botones, sino cuatro, incluido “Cómo iniciar un diálogo”, que lanzaba la función de generar saludos usando ChatGPT. Mi colega Elena Volodina escribió más sobre ella en Habré.

Qué ha cambiado:

• Agregamos una segunda flecha para que el “carrusel” pudiera desplazarse en ambas direcciones.

• Numeración insertada para tarjetas en la selección.

• Eliminamos el botón de ChatGPT y lo movimos al segundo paso del “carrusel”; ahora lo mostramos debajo del perfil que abrió el usuario.

También tuvimos que cambiar la mecánica del botón “Escribe a tu interlocutor”, al hacer clic en el cual estaba previsto que el usuario accediera a su cuenta de Telegram y pudiera enviar un mensaje.

El problema fue que Telegram no nos transmite información sobre cómo hacer clic en el botón “Escribir a su interlocutor”. Esto creó un “punto ciego”: no entendíamos con quién contactaba realmente el usuario o incluso con quién intentaba contactar. Tuve que cambiar el nombre del botón a “Obtener contacto”. Cuando hacía clic en él, el siguiente mensaje era una minitarjeta con un botón “Escribir a su interlocutor” y un botón “Generar saludo usando ChatGPT”.

Al hacer clic en “Obtener contacto”, enviamos la llamada al usuario cuyo contacto se solicitó. Esto es útil por dos razones:

• Avisamos al interlocutor que le podría escribir una persona de la Red.

• Si por alguna razón el interlocutor no se escribe, una segunda persona puede iniciar la reunión.

Lo más difícil fue trasladar el cuestionario de participante que el usuario completa a la Mini App.

El primer problema fue que trasladar el cuestionario a Mini Apps interrumpió la atribución del tráfico. Yandex.Metrica percibe Webview en Telegram como un nuevo navegador, y se rompió la conexión entre el navegador desde el que el usuario accedió a nuestro bot y el navegador webview. Esto nos impidió comprender la conversión: qué personas visitaron la página de destino, cuáles completaron el cuestionario y se convirtieron en usuarios del servicio. No estaba claro qué fuente de tráfico funcionó mejor. Configurar correctamente Yandex.Metrica también nos llevó mucho tiempo.

El segundo problema estaba relacionado con los iPhone. Dado que Mini Apps en iOS usa Safari, han surgido matices adicionales: por ejemplo, al establecer el foco en un campo de entrada, Safari “lleva” al usuario al centro del espacio libre sobre el teclado. Pero en Mini Apps lo hizo sólo visualmente. De hecho, vio un campo de entrada en la pantalla y el texto se mostró arriba. Incluso después de ocultar el teclado, cuando Safari debería volver a colocar todo en su lugar, esto no sucedió. Debido a esto, si había algún botón en la página (clics), no se registraban, ya que los botones estaban dibujados debajo de su posición real.

Hubo pocos problemas de este tipo, pero para solucionarlos, tuve que hacer muchos cambios en la interfaz de usuario bancaria general.

Resultados de la transición

1. Experiencia de usuario mejorada.

No solo pudimos proporcionar una interfaz conveniente y accesible dentro del popular Messenger, sino que también duplicamos uno de nuestros principales indicadores: la retención del sexto mes. Principalmente debido a la fluidez del servicio en Telegram, donde las notificaciones y las acciones principales ocurren en un solo lugar sin transiciones entre aplicaciones y sitios.

2. Redujimos time2market y comenzamos a vender tareas más rápido.

3. Tasas de comentarios de los usuarios mejoradas.

4. Pudimos ampliar significativamente la funcionalidad de la plataforma con búsqueda, chats y un calendario de eventos, aumentando así la actividad en el servicio en un 42% año tras año.

Algunos consejos para trabajar con Telegram Mini Apps

1. Utilice initData para controlar el acceso y la autorización.

Al desarrollar miniaplicaciones, es importante que la autenticación del usuario sea segura. Utilice initData para verificar su autenticidad. El usuario tiene varios puntos de entrada a las Mini Apps: botón en línea, botón de menú de bot, modo en línea, enlace directo, menú de archivos adjuntos (botón de teclado).

initData se pasa en todos los casos excepto en el botón del teclado. La autenticación se realiza en su servidor descifrando initData y comparándolo con los valores esperados.

2. Desarrollo local

Por desgracia, la pantalla de Mini Apps en Telegram siempre es pequeña, lo que impone exigencias especiales al diseño. Para el desarrollo local de Mini Apps, recomiendo leer este artículo. Si lo desea, puede hacer todo usando ngrok sin utilizar certificados de firma automática.

3. Experimente con los botones integrados: MainButton, BackButton y SettingsButton

Importante: Cuando trabaje con botones en la Mini Aplicación, no olvide desvincular los eventos adjuntos al botón usando el método offClick, para que al hacer clic no llame a todas sus funciones anteriores. Además, puedes personalizar el botón principal del bot: configurar la funcionalidad y cambiar el nombre.

4. Utilice showAlert, showPopup, showConfirm para organizar notificaciones y diálogos con los usuarios.

Tienen una personalización limitada, pero no es necesario que las implemente usted mismo.

5. Una característica útil es HapticFeedback

Agrega vibración al hacer clic en elementos de su interfaz. Puedes ver cómo funciona usando el bot @yoldi_hapticfeedback_bot.