App de registro de carreras

Una app de registro de carreras es una app móvil que anota en el momento la distancia, el tiempo, el ritmo y la ruta de cada carrera desde el teléfono, y muestra a cada persona que ha iniciado sesión solo sus propios registros. Cuando termina una carrera, el registro de hoy se suma a la lista, y los registros de otras personas no son visibles entre sí.

Este ejemplo muestra una sola cosa. Una app móvil usa exactamente el mismo backend que usarías para un servicio web. Guardar registros, admitir miembros y mostrar a cada persona solo sus propios registros no es distinto en la web que en una app. Por eso este ejemplo también recorre de principio a fin todo el proceso de montar ese backend (los datos que guardan los registros, el inicio de sesión de los miembros y el permiso para ver solo tus propios registros), y por separado señala las dos cosas que cambian por ser móvil: el despliegue y la conexión que trae el resultado del inicio de sesión de vuelta a la app.

Qué construimos

En lugar de una tienda de ropa o un blog, este ejemplo es una app personal de registro de carreras. Hay tres pantallas.

• Pantalla de inicio de sesión: inicias sesión con Google.
• Lista de registros: la persona que ha iniciado sesión ve los registros de carrera que ha anotado hasta ahora, del más reciente al más antiguo.
• Añadir un registro: anotas la distancia, el tiempo, el ritmo, la ruta y la fecha de una carrera.

Lo esencial es "cada persona ve solo sus propios registros". A la persona que ha iniciado sesión se le entregan solo los registros que ella anotó, y los registros de otras personas no son visibles. Esta condición es lo que hace que más adelante hagan falta a la vez el inicio de sesión de los miembros y los permisos.

Diseñar primero las pantallas y luego conectarlas

Construir esta app por tu cuenta son dos pasos. Primero creas las pantallas de la app y después dejas en manos de WEEGLOO lo que hay detrás de esas pantallas.

1. Crear los diseños de las pantallas. Las pantallas de arriba se obtuvieron dándole a un LLM un prompt como el de abajo. Le indicas en una línea qué clase de app estás haciendo, la lista de pantallas y qué contiene cada pantalla, y una dirección de diseño.

Diseña las pantallas de una app de registro de carreras. Es una app móvil vertical.

Pantallas:

• Inicio de sesión: una línea que presenta la app y un botón "Continue with Google".
• Lista de registros (inicio): un resumen de la distancia total y el número de carreras, una lista de tarjetas de registro de carrera (fecha, distancia, tiempo, ritmo, miniatura de la ruta) y un botón de añadir un registro.
• Añadir un registro: campos de fecha, distancia, tiempo, ritmo, notas y foto de la ruta, más guardar.

Que quede limpia y activa, de modo que cifras como la distancia y el ritmo se lean de un vistazo. Sigue las convenciones de UI móvil.

Las tres pantallas de "Qué construimos" de arriba son el resultado de este prompt. Por ahora todavía no hay datos ni inicio de sesión: son solo las pantallas.

2. Conectar con WEEGLOO. Conecta el agente con WEEGLOO (Conectarlo) y dile esto.

Intégralo con WEEGLOO.

Sin explicar con detalle qué estás haciendo, el agente examina estas pantallas y monta lo que hace falta detrás de ellas. Este flujo de dejarlo todo en sus manos es el mismo que Integrarlo en una frase.

Lo que WEEGLOO monta detrás de las pantallas

Con la sola instrucción "intégralo", el agente examina las pantallas y monta estas cuatro cosas. Es el backend que WEEGLOO asume detrás de las pantallas.

1. Una estructura de datos para guardar los registros de carrera (Content Type). Guarda elementos como la distancia, el tiempo, el ritmo, la ruta y la fecha.
2. Inicio de sesión con Google (ServiceLogin). Permite que los usuarios de la app se registren e inicien sesión por sí mismos.
3. El permiso de "solo tus propios registros". Permite que la persona que ha iniciado sesión lea, escriba y borre solo los registros que ella anotó.
4. Entrega de tus propios registros. Envía a cada persona que ha iniciado sesión solo sus propios registros en forma de lista.

Estas cuatro cosas son exactamente lo que necesitas cuando construyes el mismo servicio para la web. Cómo tratar cada pieza por separado se cubre una a una en Añadir registro e inicio de sesión, Repartir permisos y Guardar y recuperar datos. Si además quieres dejar una imagen del mapa de la ruta o una foto, puedes adjuntar un archivo (Media).

Lo que realmente se creó

A continuación están los recursos realmente creados en el Space Stride de este ejemplo. No es un recorrido de cómo configurar cada uno; es una mirada a lo que apareció en esta app como resultado de "intégralo".

La estructura que guarda los registros de carrera

Lo primero es la estructura que guarda los registros de carrera (Content Type), "Run". Los valores que entran en una sola carrera están repartidos en casillas por elemento.

No hay ninguna casilla aparte que guarde el ritmo medio. Es un valor que se obtiene solo con la distancia y el tiempo, así que la app lo calcula y lo muestra en el momento (el "auto-calculated" de la pantalla de añadir un registro).

Inicio de sesión con Google

Lo segundo es el canal que los miembros usan para iniciar sesión con Google (ServiceLogin). En este ejemplo el nombre se fija en "Stride", y Google es el único método de inicio de sesión activado. Una persona recién registrada recibe por defecto el permiso "Runner" de más abajo. Cuando termina el inicio de sesión, el resultado vuelve a la app a través de la página intermedia que hace de puente descrita en Traer el resultado del inicio de sesión de vuelta a la app.

El permiso de "solo tus propios registros"

Lo tercero es el permiso que reciben los miembros (ServiceUserRole), "Runner". Las reglas son las siguientes.

Como "leer" está atado a "solo los que tú creaste", la lista muestra a cada persona solo sus propios registros. De las cuatro cosas mencionadas antes, la número 3 (permiso) y la número 4 (entrega) en realidad salen juntas de esta única regla. Como los registros que cada miembro puede leer son solo los suyos, esa es precisamente la lista que se entrega a esa persona.

Registros y fotos

Lo cuarto son cada registro de carrera individual (Content) y la foto de la ruta (Media). Estos dos no se crean con antelación; cada uno se crea a nombre de un miembro cuando anota una carrera en la app. A continuación hay un registro que se anotó realmente. La estructura "Run" de arriba está rellena con valores, y una foto de la ruta va adjunta junto a él.

La distancia 42.195 es un maratón completo. El tiempo se guarda en segundos (aquí, un registro de 3 horas y 53 minutos) y en la app se muestra como 3:53:00. La foto de la ruta se guarda aparte como un archivo (Media), y el registro guarda solo un enlace que apunta a ese archivo. La lista y las tarjetas de "Qué construimos" son el aspecto que tienen estos registros una vez que se han acumulado varios.

Las dos cosas que difieren de la web

Todo lo anterior es igual que en la web. Una app móvil usa el mismo backend tal cual. Solo dos cosas cambian por ser móvil.

Despliegue: el mercado de apps está fuera de WEEGLOO

Un servicio web puede poner un producto terminado en internet con Web Hosting (Poner un sitio en internet), pero hacer llegar una app móvil terminada a las manos de la gente (publicarla en un mercado de apps) ocurre fuera de WEEGLOO. Lo que WEEGLOO asume son los datos, los miembros y los permisos detrás de las pantallas de la app.

Traer el resultado del inicio de sesión de vuelta a la app

La función de inicio de sesión en sí se conecta de la misma forma que en la web. Lo que difiere de la web es la conexión que trae el resultado de vuelta a la app cuando termina el inicio de sesión. El resultado del inicio de sesión solo puede volver a una dirección web, así que hace falta un paso extra: una página que actúa como puente intermedio y pasa ese resultado a la app. Este paso técnico se cubre en Auth API.

Comprobar que de verdad son solo tus propios registros

La condición esencial de esta app, "cada persona ve solo sus propios registros", se cumple de verdad. A continuación están las pantallas de inicio de la misma app abierta con dos cuentas distintas. Es la misma app, pero la distancia total, el número de carreras y los registros que aparecen en la lista son todos distintos.

Una cuenta muestra solo una carrera de 5km, y la otra muestra solo dos carreras, un maratón y una de 3km. Sus registros no son visibles entre sí. Stride guarda los tres registros (consulta Lo que realmente se creó), pero a cada miembro se le entregan solo los registros que él anotó. Es el resultado de haber atado la lectura a "solo los que tú creaste" en El permiso de "solo tus propios registros" de arriba.

Qué hacer a continuación

• Añadir registro e inicio de sesión: cubre cómo añadir por separado un inicio de sesión que admita a tus propios miembros.
• Auth API: cubre el paso técnico de traer el resultado del inicio de sesión de vuelta a la app.
• Repartir permisos: cubre cómo fijar los permisos para que los miembros traten solo sus propias cosas.
• Guardar y recuperar datos: cubre cómo crear una estructura de datos y rellenarla con contenido.