Este artículo te explica cómo desarrollar un mosaico personalizado en la aplicación de tus clientes. Esto te permite ampliar las posibilidades de nuestro software de forma ilimitada.
Cuando el usuario pulsa sobre su mosaico en la aplicación móvil Hexfit, abrimos una WebView con la URL que nos ha facilitado previamente.
Si lo desea, antes de abrirla, la aplicación puede insertar automáticamente información sobre el usuario conectado directamente en la URL en forma de variables.
Variables disponibles
Variable | Contenido |
{{FIRSTNAME}} | Nombre del usuario |
{{LASTNAME}} | Apellidos del usuario |
{{EMAIL}} | Dirección de correo electrónico del usuario |
{{APIKEY}} | Clave API de Hexfit del usuario |
Puede colocar estas variables en cualquier parte de la URL que nos facilite. Por ejemplo:
https://votre-app.exemple.com/entree?apikey={{APIKEY}}&email={{EMAIL}}
Cuando un usuario pulsa el mosaico, la aplicación sustituye las variables y abre la URL real:
https://votre-app.exemple.com/entree?apikey=abc123&email=jane@exemple.com
Esto te permite adaptar el contenido del mosaico al contexto del usuario.
Identificar al usuario en el lado del servidor
Una vez que tu página reciba la clave `{{APIKEY}}`, puedes llamar a la API de Hexfit para recuperar el perfil completo del usuario:
GET https://v2.hexfit.io/User/GetInfo?user_id=-
Authorization: Bearer <APIKEY>
El `user_id=-` es un atajo que devuelve la información del propietario de la clave, es decir, el usuario que está conectado actualmente.
Documentación: https://docs.hexfit.com/#tag/users/GET/User/GetInfo
⚠️ **Nota de seguridad:**
La clave API es personal. Utiliza siempre HTTPS y no la guardes sin cifrar.
APIKEY para el desarrollo
Para el desarrollo, te recomendamos que inicies sesión en el software con una cuenta de cliente propia. Copia la APIKEY del encabezado y utilízala para realizar tus pruebas.
La APIKEY caducará, así que no dudes en repetir el proceso para obtener una nueva clave.
La documentación de nuestra API se encuentra aquí: https://docs.hexfit.com/
Vibe Coding (Lovable, Base44, Bolt, etc.)
Aquí tienes un código básico que puedes copiar y pegar en una página web de Vibe Coding para crear tu propio mosaico personalizado. Asegúrate de añadir al final las funciones que desees.
Estoy desarrollando un mosaico personalizado para la aplicación móvil Hexfit.
Hexfit es una plataforma que utilizan los profesionales de la salud y el entrenamiento (kinesiólogos, entrenadores, fisioterapeutas) para realizar el seguimiento de sus clientes.
Un mosaico personalizado es una pequeña aplicación web que se muestra en la interfaz de usuario de la aplicación móvil Hexfit. Se carga a través de una URL externa en una vista web móvil.
Al cargarse, Hexfit proporciona en la URL:
- apikey
- a veces, otros parámetros contextuales
El mosaico debe:
- leer los parámetros presentes en la URL
- utilizar apikey para llamar a la API de Hexfit (User/GetInfo?user_id=- para saber a quién pertenece la APIKEY)
- recuperar los datos del cliente
- mostrar estos datos en una interfaz sencilla y útil
- no almacenar en caché el contenido de la página, ya que la APIKEY cambia cada vez que se abre
Restricciones:
- funcionar en una vista web móvil
- ser «mobile-first» y responsiva
- ser segura
- mostrar una interfaz clara y sencilla
Documentación de Hexfit:
- Documentación de la API: https://apidoc.myhexfit.com/
- Guía de mosaicos personalizados: https://help.myhexfit.com/fr/articles/13921809-tuiles-personnalisees-guide-developpeur-externe
Funcionalidades de la vista web:
Aunque programar suele ser muy fácil, contar con alguien con conocimientos técnicos te puede ser de gran ayuda.
Poner en marcha
Una vez que tu sitio web esté listo, solo tienes que facilitarnos el enlace y lo integraremos en tu aplicación.