El panel de configuración de la aplicación se ha creado para que puedas configurar elementos concretos de la app, elegir botones, configurar colores, etc. De esta forma puedes personalizar tu aplicación de carreras virtuales o de Live al máximo.

Acceso al panel

Haz clic en «Aplicaciones» en el menú superior de Sportmaniacs y busca la carrera sobre la que quieres trabajar, luego haz clic sobre el icono del lápiz para editar.

El siguiente gif muestra cómo hacerlo:

En el panel de gestión de la aplicación encontrarás tres pestañas:

• • • Configuración de la aplicación.
    • Gestión de componentes.
    • Visualización de componentes.

  

  Configuración de la aplicación

  En esta pestaña puedes configurar:

  • Eventos: permite habilitar el evento como virtual, configurar las fechas de participación y decidir si el evento es de recorrido fijo o libre.

  

  • Campos de formulario, podrás configurar la forma en la que los participantes se validan en la aplicación seleccionando cualquiera de los campos disponibles en el panel de inscritos, por ejemplo, DNI, dorsal, fecha de nacimiento, etc. También podrás cambiar el nombre al campo para que los participantes entiendan mejor qué datos debe introducir, por ejemplo, «DNI» puedes hacer que se llame «Documento».

  

  • Botones de home. Existen 4 tipos de botones:
    • Info: dirige a “Información de carrera”.
    • Live: dirige a “Clasificación en vivo”.
    • Entrenamiento: dirige a “Entrenamientos”.
    • Personalizado: dirige a URL que se configure.

  

  Los botones de tipo Info, Live y Entrenamiento son personalizables pero no se puede cambiar su acción predefinida. Estos botones son visibles según el momento en el que se encuentre la carrera y esta visualización no es configurable. Por ejemplo, si ha pasado el periodo en el que se pueden realizar entrenamientos no será visible el botón «Entrenamiento». Aunque puedas crear varios botones de cada uno de estos tipos, sólo se verá uno, por lo que no tiene sentido que crees más de un botón de cada uno.

  Con el botón de tipo Personalizado puedes crear un botón desde cero y enlazarlo a cualquier URL, además, puedes crear tantos como necesites. Por ejemplo, puedes enlazar enlazar el botón de inscripciones y, así, permitir inscripciones a la vez que se está celebrando el evento (en carreras virtuales y siempre que tengas las inscripciones conectadas vía API a Copernico, desde Sportmaniacs o desde otra plataforma de inscripciones.

  

   

  ¿Qué se puede personalizar en cada uno de los botones?

  Puedes personalizar diferentes componentes de los botones:

  • Título: texto principal del botón.
  • Subtítulo: texto secundario del botón. Es más pequeño que el título y permite explicar o describir.
  • Imagen: muestra en la parte derecha del botón. Se puede utilizar para añadir la imagen de algún patrocindor, por ejemplo.
  • Texto de la imagen: permite poner un texto al pie de la imagen.

  

   

  Gestión de componentes

  Un componente es un área dentro de la pantalla de la APP, que será ocupada por una imagen o un vídeo que tú definas de una marca o sponsor: es un espacio publicitario y puedes usarlo para tu propia marca o empresa.

  

  Existen 3 tipos de componentes:

  • Imagen: inserta una imagen.
  • Webview: carga el contenido de una web en la aplicación
  • Youtube: inserta un video de youtube en el espacio predefinido para ello.

  

  Debes tener en cuenta:

  • Para cada pantalla solo puede ser visible uno de los componentes: si tienes varias imágenes con publicidad, únicamente podrás subir una de ellas a cada pantalla.
  • No todos los componentes son visibles en todas las áreas de la aplicación. Por ejemplo, no puedes subir un vídeo en la pantalla home de la prueba.

  ¿Cómo se configura cada uno de de los componentes?

  Cada componentes se configura de forma distinta aunque los campos a completar sean los mismos.

  

  Imagen

  • Id: es cómo quieres denominar el componente. Un identificador para tí.
  • Tipo: debes seleccionar el tipo imagen.
  • Fondo: puedes configurar un color de fondo en el componente.
  • Título: añade un título a la imagen.
  • Enlace: si hacen tap en la imagen, es la URL a la que quieres que se redireccione.
  • Valor: debes añadir la URL donde se encuentra alojada la imagen. Por ahora tendrás que subir la imagen a un servidor y enlazarla.
  • La imagen es el componente que en más pantallas se puede usar. Es el más versátil.

  

   

  Video

  • Id: es cómo quieres denominar el componente. Un identificador para tí.
  • Tipo: debes seleccionar el tipo vídeo.
  • Fondo: puedes configurar un color de fondo en el componente. Por defecto será blanco.
  • Título: añade un título al vídeo.
  • Enlace: al vídeo de youtube. En el ejemplo: https://www.youtube.com/watch?v=fWmNxhB_TgA
  • Valor: debe coincidir con las últimas letras después del signo igual «=». En el ejemplo: fWmNxhB_TgA

  

  La pantalla más habitual para añadir un vídeo es en la de calibración del GPS, que se realiza para competir en carreras virtuales.

  Webview

  Webview es un componente que permite que otras aplicaciones de tu dispositivo muestren contenido web, sin tener que abrir un navegador. Abre una url en la aplicación.

  • Id: es cómo quieres denominar el componente. Un identificador para tí.
  • Tipo: debes seleccionar el tipo webview.
  • Fondo: en este caso no haría falta.
  • Título: añade un título.
  • Enlace: URL que quieres se visualice al añadir el webview.
  • Valor: URL que quieres que se cargue al añadir el webview.

  El componente de tipo Webview, por el momento, únicamente se puede utilizar en la «pestaña personalizable en el live». Una vez configurado, cuando el usuario toca ese botón accede a la web que has indicado en el campo valor sin salir de la aplicación.

  En las siguientes imágenes puedes ver el ejemplo. Se ha configurado el Webview con el título WEBTS:

  

  Y, al hacer tap sobre el botón, se abre la web de timingsense en la aplicación.

  

   

  Visualización de componentes

  En esta pestaña puedes elegir dónde se verá cada componente creado con anterioridad. Puedes tener varias imágenes y puedes querer que cada una de ellas se vea en una área o pantalla diferente dentro de la aplicación.

  

  Para configurar la visualización de cada elemento creado:

  1. Selecciona la pantalla o ubicación en la que quieres añadir el componente del esquema móvil de la derecha. Por ejemplo: la home de la carrera.
  2. En la parte central estarán disponibles todos los componentes que se hayan creado: puedes identificarlos por el título que les has puesto.
  3. Arrastra el componente hacia el esquema móvil de la derecha.
  4. Haz clic en el botón «Guardar».

  Recuerda:

  • En cada una de las pantallas sólo puede ser uno de los componentes
  • No todos los componentes son visibles en todas las zonas de la aplicación.
  • Si la pantalla ya tiene un componente o no se puede añadir un tipo de componente, este tendrá el icono de un candado.