Cómo crear una App para Gimnasios o Entrenadores

Si sigues los pasos de esta guía, en poco más de media hora contarás con una App Móvil para el sector del Fitness capaz de rivalizar con cualquier desarrollo a medida como el de las grandes empresas del sector. 

En este ejemplo aprenderemos a configurar una App con:

1. Información del gimnasio o entrenador
   
2. Una sección de Preguntas Frecuentes
   
3. Horario de Clases
   
4. Reserva de Clases
   
5. Zona privada para acceder a la tabla o documentación personal de cada usuario
   
6. Mensajes Push
   

Estas son las funciones que hemos escogido para nuestro ejemplo, pero lógicamente podrías añadir muchas otras si así lo deseas:

Chat, Formulario de Sugerencias, Formulario para Captar emails, Eventos, Tienda etc...

Si quieres ver el ejemplo que hemos creado en tu propio dispositivo, puedes escanear el siguiente Código QR:

Primeros Pasos

Una vez en la pantalla de inicio de Scoreapps, en el menú lateral izquierdo encontrarás el icono con forma de 'a' del constructor de apps. Ahí podrás crear una nueva aplicación y darle nombre.

Una vez estés en la pantalla de administración de Apps, haz clic en 'Nueva App':

Una vez hayas creado y puesto nombre a tu app, te aparecerá una pantalla en la que podrás elegir entre varias plantillas.

Son diseños predefinidos para que no partas de cero pero en realidad, después podrás modificar absolutamente todo. De hecho, podrás cambiar la plantilla que escojas ahora. Y si no te encaja ninguna, haz clic en 'Blank Template' para empezar de cero a diseñar tu App.

Para este ejemplo escogeremos una plantilla en blanco

El proceso de creación de Aplicaciones con Scoreapps es muy sencillo. Sólo tienes que ir siguiendo los pasos del constructor.

Estos pasos están representados en la barra de progreso que tendrás siempre a tu disposición en la parte superior del constructor y que te permitirá fácilmente navegar entre las distintas páginas, con sólo clicar encima del icono.

Primer paso. Diseño de la App

En la pestaña Diseño, encontrarás todas las opciones relacionadas con la información del menú y de la pantalla inicial de tu App.

La sección Opciones de Pantalla de Inicio muestra las opciones disponibles según el estilo de navegación (Layout) escogido. Debes tener en cuenta que cada estilo de navegación o Layout dispone de sus propios ajustes de configuración.

Menú de elección del Layout

Para este aplicación, hemos escogido el layout 9. Este diseño de layout muestra el contenido de la primera función que hemos establecido en el menú. Un botón tipo hamburguesa desplegará lateralmente un menú dónde se mostrarán el resto de funciones. 

Como puedes observar, la pantalla inicial de nuestra aplicación muestra directamente la presentación del gimnasio en una página personalizada. Cómo configurar esta función lo veremos más adelante. 

Estos son los parámetros de configuración que podrás ver en el constructor para este layout en concreto.

- Puedes escoger si queres que se vean los títulos de las funciones en el menú. 

- Puedes configurar que los títulos se muestren en minúsculas o mayúsculas. 

- Ancho sidebar: puedes establecer el tamaño del menú desplegable. Puedes configurarlo en base a un porcentaje respecto la pantalla o un ancho fijo de píxeles. 

La sección que se muestra a continuación, te ayuda a elegir una imagen para la pantalla de inicio que se vea bien en todos los dispositivos y ratios de pantalla. Usa la herramienta overlay (sombreado) para comprobar si la información importante de tu diseño queda dentro de las zonas seguras recomendadas en función de la orientación de pantalla para la que está diseñada tu App.

Asegúrate que los elementos que consideres importantes, queden dentro de la zona sin sombrear.

Para saber cómo diseñar bien las imágenes puedes descargar la plantilla con las medidas, disponible tanto en formato .png como en .psd.

Veamos ahora un pequeño vídeo de 5 minutos para aprender a diseñar la Pantalla de Inicio de la Aplicación:

Escoge el idioma en función de tu país y la moneda de tu aplicación. Se utilizará para diferentes aspectos, como la zona horaria y el símbolo de la moneda.

Si quieres cambiar la fuente de tu app puedes seleccionar una de las que aparecen en el menú del constructor, o importar una desde Google Fonts. Para hacerlo es tan sencillo como escribir el nombre de la fuente.

---

Segundo paso. Colores

Elige los colores principales de la aplicación.

- General: aplica al fondo (si no hay una imagen específica) y al texto general.
- Inicio: aplica al menú de navegación y a sus elementos.
- Cabecera: aplica a la cabecera de navegación de la app.
- Tarjeta: aplica a los elementos mostrados en formato tarjeta.
- Lista: aplica a los elementos mostrados en formato lista.

Además, si dispones de conocimientos de programación Web, en la parte inferior del panel encontrarás un espacio para poder introducir código CSS y así, personalizar al 100% los elementos de tu App.

---

Tercer paso. Funciones

Una vez diseñada la pantalla inicial y escogidos los colores principales de la Aplicación, vamos con la parte funcional.

Las plantillas incorporan de forma predeterminada algunas funciones que consideramos interesantes para cada sector. Puedes verlas en el carrusel de funciones. Pero si quieres eliminar alguna, sólo tendrás que darle a la “X”.

Para que veas lo sencillo que es incorporar nuevas funciones a tu App, te mostramos este gif donde podrás ver cómo realizamos el proceso.

"Altafitness" (Página Personalizada)

Para esta app hemos configurado una página de presentación del gimnasio. Un espacio dónde hemos añadido el logotipo de la marca en la cabecera de la página, un "claim", un video promocional y una imagen de presentación de las distintas actividades que se ofrecen. 

Esta funcionalidad te ofrece múltiples opciones para crear una página informativa.

Puedes escribir un artículo con una imagen, puedes publicar una galería de fotos, puedes publicar un vídeo directamente en esta página y puedes agregar botones de llamada o un enlace a cualquier sitio web externo. 

Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Página Personalizada".

"Mi cuenta" (Mi cuenta)

Esta función es muy sencilla, con sólo añadirla en tu menú, ya viene preconfigurada para que pueda funcionar. Edita los estilos y modifica alguna opción si es de tu preferencia. 

"Preguntas Frecuentes" (Página Personalizada)

En esta sección, Altafitness responde a las preguntas más frecuentes que formulan los usuarios.

La función que hemos utilizado es la de "Página Personalizada", y se compone de una cabecera y texto. 

Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Página Personalizada".

"Horario Clases" (Página Personalizada)

En esta sección, se pueden consultar los horarios de las distintas actividades dirigidas. También hemos añadido la opción de poder descargarlos, por si algún usuario quiere imprimirlo, guardarlo en otro lugar, etc. 

Clica en este enlace y podrás ver un artículo paso a paso explicando la función "Página Personalizada".

"Reserva tu clase" (Reservas Pro)

Para un gimnasio, es fundamental disponer de un sistema de reserva de citas completo, eficaz y efectivo. Tus clientes van a poder reservar su cita desde su teléfono con sólo un cliq. La función Reservas Pro, no sólo va a permitir ésto, si no que enviará a tus clientes recordatorios de su cita, permitirá el previo pago de éstas, automatizará el sistema de puntos de fidelidad (función vinculada a "Tarjeta de Fidelidad"), y mucho más.

Cuando el usuario paga a través de diferentes modos de pago, las pasarelas de pago cobran al dueño del negocio por cada transacción, y si el consumidor canceló la reserva, en ese caso, los dueños de los negocios tienen que asumir todas las pérdidas. Para proteger estas pérdidas, Reservas Pro cuenta con una opción de 'Cancelación' a través de la cual, se pueden aplicar cargos por la cancelación de la reserva.

Como administrador, podrás definir de forma sencilla los horarios de cierre y apertura de tus gimnasios o centros y establecer horarios específicos para cada uno de tus proveedores de servicios.  

Para una experiencia de usuario más completa, ésta función también permite mostrar la distancia a la que se encuentran las distintas sucursales de su negocio en relación a la ubicación del usuario (Para ello es necesario ingresar correctamente una clave API de Google Maps desde el apartado del menú "Claves API" > Configuración de Google Maps).

Veámos paso por paso cómo hemos configurado esta función para nuestro gimnasio.

Pestaña de ajustes

Visualiza este vídeo para ver las opciones de configuración de esta pestaña.

A continuación puedes ver las configuraciones que hemos utilizado para nuestro gimasio.

Pestaña de Pago

Para configurar las distintas opciones de pago, deberás seleccionar y rellenar los datos de las distintas plataformas.

Por ejemplo, para el pago con tarjeta, deberás rellenar los datos de Stripe. Éstos los podrás encontrar en su página web.

Si no sabes cómo obtener tus claves de Stripe, te dejamos el enlace a un artículo de su página web Aquí.

Para nuestra app de gimnasio, al no tener coste las reservas de las clase, no configuramos ningún medio de pago.

Pestaña Carrusel

Si lo deseas puedes añadir un carrusel de imágenes en la parte superior de la pantalla principal de la función Reservas Pro. Para ello debes haber marcado la casilla de verificación "Mostrar Carrusel" en la pestaña "Ajustes".

Para añadir más imágenes al carrusel solo tienes que repetir de nuevo este proceso.

Recuerda que las imágenes deberán tener un tamaño de 512 x 320 píxeles.

En nuestra app de Altafitness no hemos añadido esta opción.

Integraciones

Desde aquí puedes obtener la URL web y el código de inserción para usar la función de reservas donde quieras.

Etiquetas

Desde aquí podrás modificar el texto de las distintas etiquetas del sistema, como por ejemplo sustituir el texto "Proveedores" por "Monitores".

Panel

Desde aquí puedes administrar los requisitos completos del sistema de reservas como crear y administrar las ubicaciones, los servicios o clases, los proveedores, gestionar las reservas, acceder al calendario y a Informes para analizar la recaudación de fondos a través de las reservas.

Nada mas acceder a esta sección encontrarás una gráfica que de forma predeterminada muestra información de la estimación de ingresos de la semana actual de lunes a domingo en orden creciente como se muestra en la imagen de arriba. Obtendrás información sobre el total de reservas confirmadas, ingresos de la semana hasta la fecha, ingresos proyectados (lo que significa el valor previsto de los ingresos, quepuede cambiar de acuerdo con el número final de reservas) y el ingreso total estimado.

En el área de visualización de análisis gráfico del tablero, podrás identificar el total de reservas en la linea de color rojoy  las reservas completadas en la línea de color verde. El gráfico de análisis muestra los datos de un mes completo.

Ubicaciones, Categorías, Servicios y Proveedores

Te mostramos las opciones de configuración de este panel.

En nuestra app, hemos configurado la información de la siguiente manera.

En ubicaciones hemos configurado la situación geográfica del gimnasio, los datos de contacto y el horario de apertura y cierre. También hemos añadido una pequeña galería fotográfica. 

En Categorías hemos establecido las distintas tipologías de clase. Puedes organizar tus servicios de la forma que tu prefieras. Podríamos haber dividido las clases en "Cardio", "Relax" o "Tonificación", por ejemplo. 

En servicios hemos detallado las distintas clases, a qué categoría pertenecen, su duración, el profesional que lo imparte, etc. 

En proveedores hemos configurado los datos de los profesionales que prestan sus servicios en el gimnasio dando clases colectivas.

Tenemos que tener en cuenta que cada servicio se da a ciertas horas puntuales, es decir, que la clase de Yoga se imparte el lunes a las 9:00, por ejemplo. Otra forma de enfocarlo es que la clase de yoga no está disponible todo el día, sólo el lunes a las 9:00, el martes a las 10:00, etc. por lo tanto, no podemos establecer que Megan, la profesora de Yoga, está disponible todo el lunes (aunque quizás Megan trabaje en otros momentos del día en la sala de musculación o en la recepción).

Habrá que establecer una disponibilidad de Megan para el lunes a las 9:00, otra para el martes a las 10:00. Es decir, que la disponibilidad de los profesionales, estará sujeta a los horarios de las clases que ellos imparten. 

Como sólo se puede establecer una franja horaria para cada día de la semana, puede darse el caso de que tengamos que repetir el perfil del profesional. En este nuevo perfil añadiremos el horario de la nueva clase.

Por ejemplo: Megan imparte clase de Yoga el lunes a las 9:00 y el lunes a las 17:00. En el primer perfil de Megan deberá reflejarse la clase de las 9:00 y en el segundo, la clase de las 17:00. 

En "Servicios" de cada profesional, estableceremos las actividades que imparten.

Reservas de Servicios

En la sección Reservas de Servicios, puedes administrar todas las reservas pudiendo filtrar por Próximas / Hoy / Todas o agregar nuevas reservas.

1- Selecciona Ubicación: Desde aquí puedes aplicar un filtro por ubicación seleccionando la ubicación en el menú desplegable.

2- Selecciona Proveedor: Desde aquí puedes aplicar un filtro por proveedores seleccionando el proveedor del menú desplegable.

3- Selecciona Estado: Desde aquí puede aplicar un filtro según el estado de la reserva como: Aceptado, Pendiente, completado, Rechazado, etc. seleccionando el estado en el menú desplegable.

4- ID: Desde la columna ID puede obtener el número de identificación único de la reserva.

5- Cliente / Ubicación / Servicio: Desde esta columna puedes obtener los detalles sobre el nombre del cliente, la ubicación de la reserva y el servicio reservado por el cliente.

6- Fecha: Desde esta columna puedes ver la fecha de la reserva.

7- Slot: Desde esta columna puedes ver el detalle de duración del slot de la reserva.

8- Importe: Desde esta columna puede ver el importe a cobrar por esa reserva en particular.

9- Estado: Desde esta columna puedes ver el estado actual de la reserva.

10- Acción: Al hacer clic sobre el icono de los tres puntos, puedes administrar la reserva por completo:

a) Vista: Desde aquí puedes ver los detalles completos de la reserva, es decir: Reserva, Pago, Cliente y servicio.

b) Aceptar: Al hacer clic en 'Aceptar' aceptarás la reserva y se preparará para la entrega.

c) Rechazar: Al hacer clic en "Rechazar" rechazarás la solicitud de la reserva por parte del cliente.

d) Marcar como completado: Al hacer clic en "Marcar como completado" se actualizará el estado de la reserva como completado. 

e) Cancelar: Al hacer clic en "Cancelar" se cancelará la reserva.

Nota: El usuario tiene también podrá cancelar la reserva por su parte desde la aplicación.

f) Eliminar: Al hacer clic en "Eliminar" se eliminará la reserva de la plataforma.

- Añadir Reservas: También puedes añadir reservas directamente desde la plataforma, para ello simplemente tienes que hacer clic en el botón azul "Añadir reserva" y completar los datos necesarios.

Calendario

Desde aquí puedes ver las reservas que se han realizado desde la aplicación de forma individual y y de todas las ubicaciones de tu negocio. También puedes gestionar la reservas directamente desde aquí ya que puedes Ver, Aceptar, Rechazar, Marcar como Completado, Cancelar y Eliminar la reserva.

Haz clic en este enlace y podrás ver un artículo paso a paso de la función “Reservas Pro”

"Fit Plan" (Carpetas)

Hemos creado una sección exclusiva para los socios del gimnasio dónde podrán encontrar distintas tablas y rutinas de ejercicios. Esta sección estará controlada por la función "Candado Pro", que explicaremos un poco más adelante.

Para crear este contenido hemos utilizado una función "Carpetas". Esta función tiene como objetivo contener y organizar dentro de ella otras funciones. Es decir, que a la función carpeta que hemos llamado "Fit Plan" va a contener otras funciones, en este caso, una página personalizada, dónde se añadirán las tablas de ejercicios. 

Aquí te mostramos un video sobre la función Carpetas.

Clica en este enlace y podrás ver un artículo paso a paso explicando la función “Carpetas”.

"Gym en casa" (Página Personalizada)

En esta página, que también es de acceso exclusivo para los socios del gimnasio, se muestran videos con clases guiadas para hacer en casa. Esta configurada a través de la función "Página Personalizada" y está compuesta por textos y videos embebidos.

"Share" (Candado Pro)

Una vez creadas las páginas que queremos "proteger" o restringir su acceso sólo a los socios del club, añadiremos la función "Candado Pro"

Seleccionaremos:

- Desbloqueo mediante: Cuenta

- Elige las funciones a bloquear: "Fit Plan" y "Gym en casa"

Una vez hayamos seleccionado estas opciones, pasaremos a asignar el acceso a cada usuario a su correspondiente página:

- Selecciona a un cliente o socio del desplegable (aparecerán por su dirección de correo electrónico).

- Selecciona el Rol al cual le das acceso, es decir, aquellas funciones a las que puede acceder. En este caso "Fit Plan" y "Gym en casa"

En Fecha de expiración puedes seleccionar si quieres que esta acción expire. Si lo dejas en blanco no caducará.

Por último, como no queremos "Candado Pro" aparezca en el menú, desactivaremos esta opción. 

Mensajes Push

Los mensajes o notificaciones Push son el sistema de marketing más eficiente que existe en la actualidad. Mientras que de cada 10 emails enviados 8 caen en las bandejas de SPAM, con los Mensajes Push ocurre lo contrario... el 99% son leídos. 

Añadir esta potente herramienta a tu App es muy sencillo:

1- Debes incluir en la Aplicación la función "Notificaciones Push"

2- Para poder hacer uso de las Notificaciones Push, es necesario que la Aplicación en cuestión se encuentre publicada para las versiones nativas Android y/o iOS.

Una vez que la aplicación haya sido publicada en App Store y/o Google Play, podrás enviar notificaciones directamente desde la propia función "Notificaciones Push".

Clica en este enlace y podrás ver un artículo, paso a paso, de la función "Notificaciones Push"

---

Paso 4. Icono y ajustes de la Aplicación

Desde aquí puedes elegir el icono que se mostrará en la pantalla del dispositivo del usuario, así como el diseño del botón “volver”.

Si quieres enviar notificaciones push, aquí es donde puedes personalizar algunos aspectos, como el icono o el color de fondo.

Esta herramienta te ayudará a elegir una imagen de inicio que será compatible con todos los tamaños de pantalla de los diferentes dispositivos. Ésta se verá cuando se inicie la aplicación mientras se está cargando.

---

Paso 5. Avanzado

Si lo deseas, puedes monetizar tu aplicación agregando anuncios publicitarios o anuncios intersticiales que se mostrarán a los usuarios de tu aplicación. Para ello deberás configurar el sistema de publicidad Admob.

Publicación de tu App

En función de Plan (Starter, Business, Growth o Reseller) dispondrás de distintos tipos de Publicación:

1. Versión Nativa Android.
2. Versión Nativa iOS.
   
3. Web app HTML5.
   
4. Modo PWA (Progressive Web App).
   

Para publicar la versión nativa de tu App en Appstore o en Google Play, necesitas un plan Business, Growth o Reseller, mientras que la versión Web App y PWA puedes publicarlas con un plan Starter o incluso durante el Trial gratuito de 14 días.

Promoción y Lanzamiento de tu App

Si has seguido la guía hasta aquí ya deberías tener lista una primera versión de tu Aplicación. Recuerda que si tienes cualquier duda puedes consultar nuestro Centro de Ayuda o escribir al equipo de Soporte (soporte@scoreapps.com)

• Popular Articles

• Guía de Negocio para Resellers y Partners

  En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...

• Ver una Demo de Scoreapps para Resellers

  En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:

• Proporciona acceso a tus Aplicaciones

  Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...

• Cómo Crear una App de Tienda

  El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...

• Cómo diseñar la pantalla de inicio o portada de una App

  En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:

• Related Articles

• Cómo Crear una App para Restaurantes (con o sin Delivery)

  Primeros Pasos Una vez en la pantalla de inicio de Scoreapps, en el menú lateral izquierdo encontrarás el icono con forma de 'a' del constructor de apps. Ahí podrás crear una nueva aplicación y darle nombre. Una vez estés en la pantalla de ...

• Cómo Crear una App para Negocios de Servicios (Clínicas, Gyms...)

  El uso de dispositivos móviles para la contratación y reserva de servicios se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App Móvil resulta imprescindible para ...

• Cómo crear una Aplicación para Fichar

  ¡Hacer una aplicación así es perfectamente posible! ¿Qué funciones hay que añadir en la App? - Registro - Formulario Será necesario añadir la API de Google Maps para que la App pueda geolocalizar al Usuario / Trabajador en el momento de fichar. - ...

• Cómo Crear una App de Eventos

  La adopción de las Aplicaciones Móviles se ha disparado durante la última década en todo el mundo. Habrá alrededor de 4.000 millones de usuarios de teléfonos móviles en todo el mundo para 2023, y se espera que se vendan 1.800 millones de teléfonos ...

• Cómo crear una App de Directorio

  ¿Tienes una idea para una App de tipo Directorio y te gustaría verla publicada en el Appstore y en Google Play? Con Scoreapps puedes crear tu Aplicación sin necesidad de ningún conocimiento técnico ni de programación y además ahorrar miles de euros ...