Aplicación de mantenimiento de puntaje de petanca / jeu-de-boules: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Esta es una aplicación de mantenimiento de puntajes de petanca (en ocasiones conocida como Jeu de Boules) para Android. Esta aplicación se puede utilizar tal cual y es completamente funcional. O puede usarse en combinación con la pantalla Petanque Matrix [instructables separados]. Esta parte del proyecto es fácil ya que no se requiere hardware, solo software gratuito disponible.

Suministros

1. Un teléfono compatible con Android (preferiblemente)
2. Un dispositivo con acceso a un navegador de Internet, preferiblemente una computadora con mouse para el trabajo de codificación y diseño.
3. Una cuenta con MIT App Inventor (gratis)
4. Un paquete de dibujo simple, p. Ej. Pixlr o Gimp (todo gratis)
5. Un sitio web de recursos de iconos, p. Ej. Iconos de la interfaz de usuario de material o Material.io (todos gratuitos)

Software y código fuente:

Puede encontrar un enlace a la aplicación Actual Petanque en la parte inferior de esta página. Aquí también puede encontrar un enlace al código fuente completo (lo siento, pero Instructables no me permite cargar un archivo.aia…).

Paso 1: Anatomía y navegación de la aplicación

El diseño y la navegación de la aplicación es bastante simple. Hay 4 pantallas en total:

1. Pantalla principal n. ° 1 (donde pasamos la mayor parte de nuestro tiempo llevando la puntuación)
2. Pantalla de partidos n. ° 2 (donde encontramos una lista de todos los partidos y puntuaciones jugados)
3. Pantalla de configuración n. ° 3 (configuración de la aplicación, tareas administrativas, depuración, etc.)
4. Acerca de la pantalla n. ° 0 (el logotipo, el logotipo y dónde obtener las instrucciones de construcción, es decir, ESTA página web)

El diseño de las pantallas y la posición de los botones se ha optimizado para el uso con 1 mano y 1 dedo (pulgar). Los botones en el menú de navegación inferior lo llevan a las pantallas a la derecha o izquierda de la pantalla actual. Entonces, el botón 0 lo lleva a la pantalla Acerca de # 0. Y el botón n. ° 1 lo lleva de regreso a la pantalla principal n. ° 1, etc., usw.

¿Claro? Que continuemos …

Paso 2: El diseño de datos (base)

Ahora, antes de crear la primera pantalla, necesitamos un lugar para almacenar todos los datos que usará esta aplicación. Para ello usaremos la forma más simple que ofrece MIT App Inventor: TinyDB. Esto es bastante limitado ya que solo puede almacenar un par clave / valor, pero con un poco de ayuda y algunos trucos podemos hacer que esto haga todo lo que queremos.

Hay 2 tipos de valores que almacenaremos:

• Almacenaremos 10 valores simples de clave / valor en toda la aplicación (como se muestra en la función 'CreateIgnoreList' anterior).
• Y una clave / valor más compleja que almacena todos los datos de los juegos completados en una cadena con la clave / valor 'CurrentMatch' actuando como la clave principal * (como se muestra en la función 'Guardar puntuación' arriba). Estos campos dentro de este par clave / valor están separados por un carácter de control no visual '\ t'. Este carácter de control nos permitirá en la pantalla Coincidencias # 2 recuperar todos los valores en sus componentes separados y mostrarlos y ordenarlos. Pero más sobre eso en la sección Pantalla 2 (partidos).

* Más información sobre cómo crear una clave principal para TinyDb en AppInventor en YouTube.

Paso 3: Pantalla 1 (Principal)

Esta es nuestra pantalla de 'caballo de batalla' donde pasaremos la mayor parte del tiempo como usuarios de la aplicación. También es el punto de partida de nuestra aplicación MIT App Inventor.

Como puede ver en la (imagen n. ° 1) anterior, aunque la pantalla tiene una configuración simple, hay bastante interactividad oculta, manejo de errores, desplazamiento, pantalla dividida, menú flotante, gestos de deslizamiento, protección contra errores, entradas erróneas e incluso recuperación de choques. Para conocer todas estas funciones, consulte el código fuente detallado de cada pantalla. Entonces, ¿qué puedes hacer aquí?

• Presione 'Equipo 1' y recibirá una Notificación que le permitirá cambiar el nombre del 'Equipo 1'. Una vez cambiado, esto cambiará este 'Equipo 1' por el nombre que haya elegido. Este es también el nombre que se utilizará para reflejar su puntuación de "juego" y "partido" (en las siguientes pantallas).
• La 'puntuación del equipo 1' y la 'puntuación del equipo 2' cambian según los botones '+' y '-' presionados en la parte inferior de cada equipo respectivo. Si la puntuación es 0 y se presiona '-', se emite una señal visual y audible, pero la puntuación sigue siendo 0 (por supuesto).
• Si un 'puntaje' llega a 13, suceden algunas cosas: se proporciona una señal visual, una ventana de notificación muestra los resultados (imagen n. ° 2) y le brinda la opción de comenzar un nuevo juego o un nuevo partido (y, por supuesto, un nuevo juego). Sin embargo, si no ha seleccionado el puntaje clásico de Petanca sino el puntaje de diferencia de 2 puntos (que se puede seleccionar en la pantalla de configuración # 3), dependiendo de la diferencia entre dos equipos, uno será declarado ganador (como se muestra en la imagen # 3).).
• La 'puntuación' del 'partido' actual se muestra en el centro de la pantalla entre las puntuaciones del 'Equipo 1' y el 'Equipo 2'. Y esto seguirá tabulando hasta que se inicie una nueva 'coincidencia'.
• Para navegar a otras pantallas, también puede 'deslizar hacia la izquierda' para mostrar la pantalla Acerca de # 0 o 'deslizar hacia la derecha' para mostrar la pantalla Coincidencias # 2.

Finalmente en la parte inferior está la barra de menú de navegación. Esto siempre se coloca en la parte inferior absoluta de la pantalla, sin importar el tamaño de la pantalla. Incluso si se utiliza la funcionalidad de 'Pantalla dividida' de Android. El menú de navegación inferior tiene 3 botones:

1. Abajo a la izquierda: el '?' El botón irá a la izquierda y mostrará de nuevo la pantalla Acerca de la puesta en marcha inicial (# 0).
2. Abajo al centro: el botón de reinicio (que parece una '@' con una flecha) te permitirá comenzar un nuevo juego o un nuevo partido en 'cualquier momento' en el juego, solo presiona el botón 'Reiniciar' en la parte inferior central. Esto también mostrará una ventana de notificación que le pedirá que inicie un nuevo juego o un nuevo partido.
3. Abajo a la derecha: el botón '->' irá a la derecha y mostrará la vista general de la pantalla de todas las coincidencias (n. ° 2).

Paso 4: Pantalla 2 (Coincidencias)

Aunque es muy simple en la composición visual, esta pantalla tiene el código más interesante en su interior que las otras pantallas. Pero antes de entrar en eso, veamos qué hace la pantalla:

Debajo de las etiquetas 'Equipo 1' y 'Equipo 2' hay una lista de todos los Partidos y sus respectivos puntajes totales. Esta es una lista ordenada con el "último partido jugado" en la parte superior y el "partido más antiguo jugado" en la parte inferior.

En el medio, entre 'Equipo 1' y 'Equipo 2', hay un botón que se puede usar para ordenar la lista de Partidos en orden ascendente o descendente. El icono cambiará según la dirección de clasificación elegida.

Para navegar a otras pantallas, también puede "deslizar hacia la izquierda" para mostrar la pantalla principal n. ° 1 o "deslizar hacia la derecha" para mostrar la pantalla de configuración n. ° 3.

Finalmente en la parte inferior está la barra de menú de navegación. Esto siempre se coloca en la parte inferior absoluta de la pantalla, sin importar el tamaño de la pantalla. Incluso si se usa la funcionalidad de 'Pantalla dividida' de Android (como se muestra en la Imagen n. ° 2). El menú de navegación inferior tiene 3 botones:

1. Abajo a la izquierda: el '?' El botón irá a la izquierda y mostrará de nuevo la pantalla Acerca de la puesta en marcha inicial (# 0).
2. Abajo al centro: el botón de reinicio (que parece una '@' con una flecha) te permitirá comenzar un nuevo juego o un nuevo partido en 'cualquier momento' en el juego, simplemente presiona el botón 'Reiniciar' en la parte inferior central. Esto también mostrará una ventana de notificación que le pedirá que inicie un nuevo juego o un nuevo partido.
3. Abajo a la derecha: el botón '->' irá a la derecha y mostrará la vista general de la pantalla de todas las coincidencias (n. ° 2).

Centrando la lista de Coincidencias en la pantalla:

Quería mostrar la lista de coincidencias centrada en la pantalla con el divisor '-' como centro. Ahora, debido a que la cantidad de juegos que ha ganado un equipo puede ser de 1 o más dígitos y el nombre real de cada equipo puede ser de diferente tamaño, no podemos poner esto en una lista. Todo se vería así:

Equipo 1 0-1 Equipo 2

Foo 1 - 42 FooBar

Por lo tanto, la etiqueta del divisor '-' debe estar centrada. Con el 'nombre del equipo 1' y la 'puntuación del equipo 1' alineados a la derecha a la izquierda del divisor '-'. Y la 'puntuación del equipo 2' y el 'nombre del equipo 2' alineados a la izquierda a la derecha del divisor '-'. Así que terminamos así:

"Equipo 1 0" "-" "1 Equipo 2" "Foo 1" "-" "42 FooBar"

Y como no sé cuánto tiempo será nuestra lista de Partidos, coloco todo el 'Nombre del equipo 1' y la 'Puntuación del equipo 1' en la misma Etiqueta de formato HTML y después de cada Partido inserto un y coloco el siguiente en una Nueva línea.

Prepare las cosas para clasificarlas:

Como se mencionó en el paso Diseño de datos (base), solo puedo almacenar un valor único. Así que guardé los valores de 'Nombre del equipo 1', 'Puntaje del equipo 1', 'Puntaje del equipo 2' y 'Nombre del equipo 2' separados por un carácter de control no visual '\ t'. Ahora primero necesito sacarlos de la base de datos (como se muestra en la Imagen # 3).

El fragmento de código muestra que primero verificamos si el indicador de depuración está configurado (esto se hace en cada pantalla de esta aplicación. A continuación, crea una lista de pares de clave / valor) que debemos ignorar al pasar por la base de datos. Solo nos interesan los datos de 'Coincidencia', nada más. Luego recorremos la base de datos, ignorando todas las claves de la lista Ignorelist y creamos una nueva lista con 2 valores:

1. La clave principal (recuerde que este es un número que indica el número de coincidencia, comenzando con la coincidencia n. ° 1)
2. Una cadena que contiene los valores de 'Nombre del equipo 1', 'Puntaje del equipo 1', 'Puntaje del equipo 2' y 'Nombre del equipo 2'

Luego recorremos la Lista y creamos una nueva Lista de Listas donde los campos individuales se dividen en elementos individuales (como se muestra en la Imagen # 4):

DataToSort -> Índice de lista 1 -> Índice de lista 1 (número PK)

-> Índice de la lista 2 (Nombre del equipo 1) -> Índice de la lista 3 (Puntaje del equipo 1) -> Índice de la lista 4 (Puntaje del equipo 2) -> Índice de la lista 5 (Nombre del equipo 2) -> Índice de la lista 2 -> Índice de la lista 1 (Número PK) -> Índice de lista 2 (Nombre del equipo 1) ->… ->…

Después de eso, mostramos información de depuración si el indicador de depuración es Verdadero. Y ahora finalmente podemos ordenar nuestra Lista (de Listas).

BubbleSort * una lista de listas:

La imagen n. ° 5 muestra la lista completa de BubbleSort * nuestra lista de listas. Por supuesto, este algoritmo se puede utilizar para listas de listas de cualquier tamaño, sin importar cuántos índices estén presentes.

* Más información sobre lo simple que es el algoritmo BubbleSort en YouTube.

Paso 5: Pantalla 3 (Configuración)

Esta pantalla parece muy ocupada y tiene muchos elementos de diseño visual. Pero al final solo hay 5 interruptores de palanca:

1. 'Fred Scoring': si se activa 'On', cambia el comportamiento de puntuación y decide el ganador basándose en una diferencia de 2 puntos en 13 y no solo en el primero en llegar a 13.
2. 'Emparejamiento Bluetooth': (cuando está habilitado) si se activa 'Activado' habilita el emparejamiento con el de esta aplicación con la pantalla de petanca externa.
3. 'Restablecer coincidencias': si está activado, restablecerá / eliminará todas las coincidencias y comenzará con la Partida 1.
4. 'Restablecer DB': si se activa, eliminará / restablecerá todos los partidos y todas las demás configuraciones de la aplicación a la configuración original, incluida la puntuación actual, los partidos, los nombres de los equipos, la configuración de depuración, el orden de clasificación, la configuración de Bluetooth (cuando está habilitada), etc..
5. 'Depurar': si está activado, mostrará la información de depuración en toda la aplicación entre corchetes ''. Cosas como 'Número total de registros, número total de variables, número de coincidencia actual, número de PK del juego, etc.

Finalmente en la parte inferior está la barra de menú de navegación. Esto siempre se coloca en la parte inferior absoluta de la pantalla, sin importar el tamaño de la pantalla. Incluso si se utiliza la funcionalidad de 'Pantalla dividida' de Android o la pantalla es un poco más alta de lo que puede mostrar debido a la cantidad de elementos en la pantalla. Cuando este sea el caso, siempre puede desplazarse deslizando hacia arriba y hacia abajo. Este menú de navegación inferior tiene solo 1 botón:

Abajo a la izquierda: el botón '<-' irá a la izquierda y mostrará el resumen inicial de la pantalla de todos los partidos (# 2)

Paso 6: Pantalla 0 (Acerca de)

La pantalla final. Solo información, nada más.

Esta pantalla se muestra la primera vez que se inicia esta aplicación. Después de eso, nunca se volverá a mostrar, a menos que elija hacerlo presionando el botón '?' en la pantalla principal # 1.

La barra de menú de navegación inferior solo tiene 1 botón y esto lo lleva de regreso a la pantalla principal # 1.

Paso 7: Software y / o código fuente

Finalmente.

Puede descargar la aplicación desde esta ubicación de Google Drive.

Puede descargar el código de la entrada de MIT App Inventor Gallery para Pentaque (imagen n. ° 1). Esto le permitirá guardar el proyecto en su propia cuenta MIT App Inventor (puede cambiarle el nombre por el que desee). Desde allí puede ver todo el código en el editor de Bloques, las pantallas en el editor de Diseñador y todos los medios y recursos utilizados para este proyecto.

También puede descargar el código fuente (un archivo.aia, que en realidad es un archivo.zip) desde esta ubicación de Google Drive.