CuatroBé es el proyecto de Gime Botta, profesora de Educación Física y entrenadora, que da clases de fuerza online para entrenar en casa, en el gimnasio o en una plaza. Tenía una web que funcionaba, pero cada clase vivía en una página distinta, cada programa se vendía por separado y la alumna que quería entrenar tenía que buscar el video entre menús pensados para otra cosa. Rehicimos la web completa y, adentro, armamos una app de entrenamiento que se instala en el celular con un ícono propio, sin pasar por ninguna tienda de aplicaciones y sin ocupar lugar.
En esta nota cuento qué había, qué hicimos y por qué elegimos una web app en lugar de una app de las tiendas. CuatroBé aparece con su nombre porque así lo acordamos.
Cómo estaba la web antes
El sitio anterior estaba hecho con Elementor sobre el tema Hello Elementor, con WooCommerce y Memberships para cobrar y dar acceso. Para un sitio que vende clases eso alcanza al principio, y después empieza a crujir por tres lados.
- Había cuatro planes (Inicia tu movimiento, Activa tu cuerpo, Potencia tu fuerza y Desafía tu límite) y varios tenían versión mensual y trimestral. En total eran siete productos y siete membresías distintas para algo que la alumna vive como una sola cosa, entrenar con Gime.
- Los videos estaban repartidos en páginas sueltas (bienvenida, calendario de clases, todos los videos, corrección de técnica, respiración). No había forma de saber qué clase venía después ni cuál ya habías hecho.
- El área de la alumna era la pantalla estándar de Mi cuenta de WooCommerce, con pedidos, direcciones y datos. Muy útil para una tienda de zapatillas y bastante menos para alguien que quiere entrenar un martes a las siete de la mañana.
La web nueva
Escribimos un tema propio, hijo de GeneratePress, sin constructor visual. Elementor sigue instalado, pero el tema no carga ninguno de sus estilos ni de sus scripts en el sitio que ve la gente. Estos son los cambios que se notan del lado público.
- Tres planes en lugar de siete productos: mensual (USD 25), trimestral (USD 60, con 20 % de descuento) y anual (USD 225, con 25 %). Los tres incluyen los tres niveles, los videos de técnica, la planificación descargable, un video por semana con correcciones de Gime y contacto por WhatsApp.
- Precio en pesos o en dólares, con cobro por Mercado Pago desde Argentina y PayPal desde el exterior. Son pagos únicos por período, sin débito automático.
- Una Clase Express gratis de 15 minutos que se mira sin registrarse. Para Gime es la mejor publicidad posible, porque quien la prueba ya entrenó un rato con ella.
- Un plan por compra. Si alguien suma un plan y después otro, el carrito se vacía y queda el último. Parece un detalle hasta que te toca devolver una compra doble.
- Un formulario de contacto propio, sin plugin, con protección contra spam.
- Catorce páginas viejas redirigidas con 301 a su lugar nuevo (los programas sueltos van a Planes y los videos van a la app), para no perder enlaces ni lo que Google ya tenía indexado.
La app de entrenamiento
Cuando la alumna entra con su cuenta, el sitio la lleva directo a la app. Tiene cuatro secciones, siempre a mano en una barra abajo, como cualquier app del celular: Hoy, Clases, Mi rutina y Perfil. En la computadora la misma barra pasa a ser un menú lateral.
Hoy
La pantalla de inicio saluda por el nombre y muestra tres números, los días seguidos entrenando, las clases hechas y los minutos acumulados. Debajo aparece la clase que dejaste a medias, con los minutos que te faltan, o la próxima de tu programa si no hay ninguna empezada. El programa se ve por semanas y las clases se tildan a medida que las hacés. Más abajo están los videos de técnica de un minuto y los tres programas con su barra de avance.
Clases y Mi rutina
La biblioteca reúne las 21 clases: 10 completas, repartidas en los tres niveles, y 11 videos de técnica y respiración. El buscador encuentra por nombre de clase, ejercicio o músculo (escribís «glúteos» y aparecen) y hay filtros por nivel. Con el corazón guardás una clase en Mi rutina, que funciona como una lista de favoritas para armar tu propio entrenamiento.
Cada clase
- El video retoma donde lo dejaste, aunque hayas cerrado el celular a la mitad.
- El avance se guarda solo cada 15 segundos y la clase se marca como hecha al llegar al 90 %. También se puede marcar a mano.
- Al terminar, una cuenta regresiva de seis segundos te lleva a la clase siguiente, salvo que elijas quedarte.
- Debajo del video están la lista de ejercicios, la planificación en PDF (series, repeticiones y peso, para hacerla a tu ritmo) y los videos de técnica de los ejercicios de esa clase.
Perfil
Muestra el plan activo y cuándo vence, con un botón para renovar. Ahí está también el video semanal para que Gime corrija la técnica. Por ahora se manda por WhatsApp con un mensaje ya escrito, y el próximo paso es poder subirlo desde la misma app. Los pedidos, los datos y la contraseña siguen saliendo de WooCommerce, pero dentro del diseño de la app.
Una app que se instala sin pasar por ninguna tienda
Esta es la parte del proyecto que más me gusta. CuatroBé es una web app (también se las llama PWA, por progressive web app), o sea, una web que el celular reconoce como aplicación. La alumna la agrega a su pantalla de inicio y le queda un ícono con el logo de CuatroBé, al lado de WhatsApp y de la calculadora. Lo toca y se abre a pantalla completa, sin la barra del navegador, directo en sus clases.
- En iPhone se instala desde Safari, con el botón Compartir y «Agregar a inicio».
- En Android se instala desde Chrome, con el menú de los tres puntos e «Instalar app» o «Agregar a la pantalla principal». Si después mantenés apretado el ícono, aparecen dos accesos directos, Mis clases y Mi rutina.
Las mismas instrucciones están dentro del Perfil, plegadas, para que nadie tenga que salir a buscarlas.
Por qué una web app y no una app de las tiendas
| Web app (CuatroBé) | App de App Store o Google Play | |
|---|---|---|
| Descarga | No hay: se agrega a la pantalla de inicio en dos toques | Hay que buscarla, bajarla y esperar |
| Lugar en el celular | Prácticamente ninguno, es un ícono que abre la web | Ocupa espacio y crece con cada actualización |
| Actualizaciones | Automáticas: cuando cambia la web, cambia la app | Cada versión pasa por la revisión de la tienda y la alumna tiene que actualizar |
| Desarrollo | Un solo código para iPhone, Android y computadora | Normalmente una versión por sistema, más la web |
| Cobro | Mercado Pago y PayPal, como en la web | Las tiendas cobran su comisión sobre lo que se vende adentro de la app |
| Computadora | Es la misma app, con menú lateral | Hace falta una web aparte |
Para un negocio como el de Gime, que vende clases en video y necesita que la alumna entre rápido y entrene, la cuenta da sola. Una app de tienda tiene sentido cuando hacen falta funciones que la web todavía no resuelve bien en todos los celulares. Acá se necesitaba que el video arranque, que se acuerde dónde quedaste y que el ícono esté a mano.
La app necesita conexión a internet, como cualquier plataforma de video. Los videos se reproducen desde Vimeo y no se guardan en el teléfono, así que lo único que queda instalado es el ícono.
Rápida en el celular, que es donde se entrena
Casi todas las alumnas entran desde el teléfono, muchas veces con datos y desde el gimnasio. Por eso el tema carga solo lo que usa: un archivo de estilos, un script chico y diferido, la tipografía de la marca alojada en el mismo sitio (con las dos variantes principales precargadas) y el reproductor de Vimeo únicamente en las páginas con video. Los estilos de WooCommerce aparecen solo en el carrito, el pago y la cuenta.
En PageSpeed Insights, en celular, cuatrobe.com sacó 98 en rendimiento, 96 en accesibilidad, 100 en recomendaciones y 100 en SEO, además de 2 de 2 en la prueba nueva de navegación con agentes. El primer contenido aparece en 1,4 segundos y el elemento más grande, en 2,0. En escritorio el rendimiento da 100 y el elemento más grande aparece en 0,4 segundos.
PageSpeed simula un celular de gama media con una conexión lenta, y el puntaje cambia de una medición a otra según el servidor y la red del momento. Conviene medir más de una vez y mirarlo como tendencia, para comparar y encontrar problemas.
Lo que viene
El siguiente paso es que la alumna suba su video semanal desde el Perfil, sin pasar por WhatsApp, y que Gime le devuelva las correcciones en el mismo lugar. La base ya está, porque cada alumna tiene su cuenta, su progreso y su historial adentro de la app.
Preguntas frecuentes
¿Qué es una web app o PWA?
Es un sitio web preparado para que el celular lo trate como una aplicación. Se agrega a la pantalla de inicio con un ícono propio y se abre a pantalla completa, sin la barra del navegador. No se descarga de ninguna tienda.
¿Ocupa lugar en el celular?
Prácticamente no. El ícono abre la web y el contenido, en este caso los videos, se reproduce desde internet. No hay que liberar espacio ni actualizar nada.
¿Funciona en iPhone y en Android?
Sí. En iPhone se agrega desde Safari con Compartir y «Agregar a inicio». En Android, desde Chrome con «Instalar app». También funciona en la computadora y en la tablet, desde el navegador.
¿Se puede usar sin internet?
No, porque las clases son videos que se reproducen en línea. Lo que queda guardado en la cuenta es el progreso: qué clases hiciste, dónde quedó cada video y tu rutina.
¿Se puede hacer algo así para otro negocio?
Sí. Sirve para cualquier negocio con clientes que vuelven seguido, como cursos, entrenamientos, turnos, pedidos o comunidades. Se arma sobre WordPress, así que el negocio sigue cargando su contenido desde un panel que ya conoce.
Si tenés un negocio donde tus clientes vuelven seguido y te gustaría que te tengan a un toque en el celular, mirá Aplicaciones y plataformas a medida. Y si te interesa otro caso parecido, en la nota de Campus & Science cuento cómo convertimos un sitio en una plataforma de cursos online.
