Application de score de pétanque / Jeu-de-Boules : 7 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Il s'agit d'une application de notation de pétanque (parfois appelée Jeu de Boules) pour Android. Cette application peut être utilisée telle quelle et est entièrement fonctionnelle. Ou il peut être utilisé en combinaison avec l'affichage de la matrice de pétanque [instructables séparés]. Cette partie du projet est simple car aucun matériel n'est requis, uniquement des logiciels gratuits disponibles.

Fournitures

1. Un téléphone compatible Android (de préférence)
2. Un appareil avec accès au navigateur Internet, de préférence un ordinateur avec souris pour le travail de codage et de conception
3. Un compte avec MIT App Inventor (gratuit)
4. Un paquet de dessin simple, par ex. Pixlr ou Gimp (tous gratuits)
5. Un site Web de ressources d'icônes, par ex. Icônes de l'interface utilisateur matérielle ou Material.io (tous gratuits)

Logiciel et code source:

Vous trouverez un lien vers l'application Actual Petanque en bas de cette page. Ici, vous pouvez également trouver un lien vers le code source complet (désolé pour cela, mais Instructables ne me permet pas de télécharger un fichier.aia…).

Étape 1: Anatomie et navigation de l'application

La conception et la navigation de l'application sont assez simples. Il y a 4 écrans au total:

1. Écran principal n°1 (où nous passons le plus clair de notre temps à noter les scores)
2. Écran des matchs n°2 (où l'on trouve une liste de tous les matchs et scores joués)
3. Écran de configuration n°3 (paramètres de l'application, tâches administratives, débogage, etc.)
4. À propos de l'écran #0 (à propos, logo et où obtenir les instructions de construction, c'est-à-dire CETTE page Web)

La disposition des écrans et le positionnement des boutons ont été optimisés pour une utilisation à 1 main et 1 doigt (pouce). Les boutons du menu de navigation inférieur vous permettent d'accéder aux écrans situés à droite ou à gauche de l'écran actuel. Le bouton 0 vous amène donc à l'écran À propos n°0. Et le bouton #1 vous ramène à l'écran principal #1 etc., usw.

Dégager? Alors continuons…

Étape 2: La conception des données (base)

Maintenant, avant de créer le premier écran, nous avons besoin d'un endroit pour stocker toutes les données que cette application utilisera. Pour cela, nous utiliserons la forme la plus simple que le MIT App Inventor a à offrir: TinyDB. C'est plutôt limité car il ne peut stocker qu'une paire clé/valeur, mais avec un peu d'aide et quelques astuces, nous pouvons faire en sorte que cela fasse tout ce que nous voulons.

Il y a 2 types de valeurs que nous allons stocker:

• Nous allons stocker 10 valeurs de clé/valeur simples à l'échelle de l'application (comme indiqué dans la fonction « CreateIgnoreList » ci-dessus).
• Et une clé/valeur plus complexe stockant toutes les données des jeux terminés dans une chaîne avec la clé/valeur 'CurrentMatch' agissant comme clé primaire * (comme indiqué dans la fonction 'SaveScore' ci-dessus). Ces champs au sein de cette paire clé/valeur sont séparés par un caractère de contrôle non visuel « \t ». Ce caractère de contrôle nous permettra dans l'écran Matches #2 de récupérer toutes les valeurs dans ses composants séparés et de les afficher et les trier. Mais plus à ce sujet dans la section Écran 2 (matchs).

* Plus d'informations sur la création d'une clé primaire pour TinyDb dans AppInventor sur YouTube.

Étape 3: Écran 1 (Principal)

Il s'agit de notre écran « cheval de travail » où nous passerons la plupart du temps en tant qu'utilisateur de l'application. C'est également le point de départ de notre application MIT App Inventor.

Comme vous pouvez le voir sur (image 1) ci-dessus, bien que l'écran soit simple à configurer, il y a une certaine interactivité cachée, la gestion des erreurs, le défilement, l'écran partagé, le menu flottant, les gestes de balayage, la protection contre les erreurs, les entrées erronées et même la récupération des accidents. Pour toutes ces fonctionnalités, veuillez consulter le code source détaillé pour chaque écran. Alors, que pouvez-vous faire ici:

• Appuyez sur « Équipe 1 » et vous recevrez une notification qui vous permettra de changer le nom de « Équipe 1 ». Une fois modifié, cela changera cette 'Équipe 1' au nom que vous avez choisi. C'est également le nom qui sera utilisé pour refléter votre score « match » et « match » (dans les prochains écrans).
• Le « score de l'équipe 1 » et le « score de l'équipe 2 » changent en fonction des boutons « + » et « - » enfoncés au bas de chaque équipe respective. Si le score est de 0 et que '-' est enfoncé, un signal sonore et visuel est émis mais le score reste à 0 (bien sûr).
• Si un « score » atteint 13, certaines choses se produisent: un signal visuel est fourni, une fenêtre de notification affiche les résultats (image #2) et vous offre la possibilité de démarrer une nouvelle partie ou un nouveau match (et bien sûr un nouveau Jeu). Si toutefois vous avez sélectionné non pas le score de pétanque classique mais le score de différence à 2 points (qui peut être sélectionné dans l'écran des paramètres #3) alors en fonction de la différence entre deux équipes, une sera déclarée gagnante (comme indiqué sur l'image #3).
• Le « score » du « match » en cours est affiché au centre de l'écran entre les scores « Équipe 1 » et « Équipe 2 ». Et cela continuera jusqu'à ce qu'un nouveau « match » soit commencé.
• Pour naviguer vers d'autres écrans, vous pouvez également « glisser vers la gauche » pour afficher l'écran À propos de #0 ou « glisser vers la droite » pour afficher l'écran Matches #2.

Enfin en bas se trouve la barre de menu de navigation. Celui-ci est toujours positionné tout en bas de l'écran, quelle que soit la taille de l'écran. Même si la fonctionnalité Android « Split screen » est utilisée. Le menu de navigation inférieur comporte 3 boutons:

1. En bas à gauche: le '?' ira à gauche et affichera à nouveau l'écran À propos de démarrage initial (#0).
2. En bas au centre: le bouton de réinitialisation (qui ressemble à un « @ » avec une flèche) vous permettra de commencer une nouvelle partie ou un nouveau match à « n'importe quel moment » dans le jeu, appuyez simplement sur le bouton « Réinitialiser » en bas au milieu. Cela affichera également une fenêtre de notification qui vous demandera de démarrer une nouvelle partie ou un nouveau match.
3. En bas à droite: le bouton '->' ira vers la droite et affichera l'aperçu de tous les écrans des matchs (#2).

Étape 4: Écran 2 (Correspondances)

Bien que très simple en maquillage visuel, cet écran contient le code le plus intéressant que les autres écrans. Mais avant d'entrer dans cela, voyons ce qu'il fait:

Sous les étiquettes « Équipe 1 » et « Équipe 2 » se trouve une liste de tous les matchs et de leurs scores totaux respectifs. Il s'agit d'une liste triée avec le « dernier match joué » en haut et le « plus ancien match joué » en bas.

Au milieu, entre « Équipe 1 » et « Équipe 2 », se trouve un bouton qui peut être utilisé pour trier la liste des matchs par ordre croissant ou décroissant. L'icône changera en fonction du sens de tri choisi.

Pour naviguer vers d'autres écrans, vous pouvez également « glisser vers la gauche » pour afficher l'écran principal n° 1 ou « glisser vers la droite » pour afficher l'écran des paramètres n°3.

Enfin en bas se trouve la barre de menu de navigation. Celui-ci est toujours positionné tout en bas de l'écran, quelle que soit la taille de l'écran. Même si la fonctionnalité Android « Split screen » est utilisée (comme indiqué sur l'image #2). Le menu de navigation inférieur comporte 3 boutons:

1. En bas à gauche: le '?' ira à gauche et affichera à nouveau l'écran À propos de démarrage initial (#0).
2. En bas au centre: le bouton de réinitialisation (qui ressemble à un « @ » avec une flèche) vous permettra de commencer une nouvelle partie ou un nouveau match à « n'importe quel moment » dans le jeu, appuyez simplement sur le bouton « Réinitialiser » en bas au milieu. Cela affichera également une fenêtre de notification qui vous demandera de démarrer une nouvelle partie ou un nouveau match.
3. En bas à droite: le bouton '->' ira vers la droite et affichera l'aperçu de tous les écrans des matchs (#2).

Centrage de la liste des Matches à l'écran:

Je voulais afficher la liste des matchs centrée sur l'écran avec le diviseur '-' comme centre. Maintenant, parce que le nombre de matchs gagnés par une équipe peut être composé d'un ou plusieurs chiffres et que le nom réel de chaque équipe peut être de taille différente, nous ne pouvons pas simplement le mettre dans une seule liste. Tout ressemblerait à quelque chose comme ça:

Équipe 1 0 - 1 Équipe 2

Foo 1 - 42 FooBar

L'étiquette du séparateur « - » doit donc être centrée. Avec le « nom de l'équipe 1 » et le « score de l'équipe 1 » alignés à droite à gauche du séparateur « - ». Et le « score de l'équipe 2 » et le « nom de l'équipe 2 » sont alignés à gauche à droite du séparateur « - ». Donc on finit comme ça:

"Équipe 1 0" "-" "1 Équipe 2" "Foo 1" "-" "42 FooBar"

Et comme je ne sais pas combien de temps durera notre liste de matchs, je mets tous les « noms de l'équipe 1 » et « le score de l'équipe 1 » dans la même étiquette HTMLFormat et après chaque match, j'insère un et mets le suivant sur une nouvelle ligne.

Préparez les choses pour le tri:

Comme mentionné dans l'étape de conception de la base de données, je ne peux stocker qu'une seule valeur. J'ai donc stocké les valeurs de 'Nom de l'équipe 1', 'Score de l'équipe 1', 'Score de l'équipe 2' et 'Nom de l'équipe 2' séparées par un caractère de contrôle non visuel '\t'. Maintenant, je dois d'abord les sortir de la base de données (comme indiqué sur l'image #3).

L'extrait de code montre que nous vérifions d'abord si le drapeau de débogage est défini (cela est fait dans chaque écran de cette application. Ensuite, il crée une liste de paires clé (s/valeur) que nous devons ignorer lorsque nous parcourons la base de données. Nous ne nous intéressons qu'aux données 'Match', rien d'autre. Nous parcourons ensuite la base de données en ignorant toutes les clés de la liste Ignorelist et créons une nouvelle liste avec 2 valeurs:

1. La PrimaryKey (rappelez-vous qu'il s'agit d'un nombre qui indique le numéro de correspondance, en commençant par la correspondance 1).
2. Une chaîne qui contient les valeurs de 'Nom de l'équipe 1', 'Score de l'équipe 1', 'Score de l'équipe 2' et 'Nom de l'équipe 2'

Nous parcourons ensuite la liste et créons une nouvelle liste de listes où les champs individuels sont divisés en éléments individuels (comme le montre l'image n ° 4):

DataToSort -> Index de liste 1 -> Index de liste 1 (numéro PK)

-> Liste index 2 (Nom de l'équipe 1) -> Liste index 3 (Team score 1) -> Liste index 4 (Team score 2) -> List index 5 (Team name 2) -> List index 2 -> List index 1 (Numéro PK) -> Index de liste 2 (Nom de l'équipe 1) -> … -> …

Après cela, nous affichons des informations de débogage si l'indicateur de débogage est True. Et maintenant, nous pouvons enfin trier notre liste (de listes).

BubbleSort* une liste de listes:

L'image #5 montre la liste complète de BubbleSort* notre liste de listes. Cet algorithme peut bien sûr être utilisé pour n'importe quelle taille de liste de listes, quel que soit le nombre d'index présents.

* Plus d'informations sur la simplicité de l'algorithme BubbleSort sur YouTube.

Étape 5: Écran 3 (Paramètres)

Cet écran a l'air très occupé et contient de nombreux éléments de conception visuelle. Mais au final, il n'y a que 5 interrupteurs à bascule:

1. « Score Fred »: s'il est activé, il modifie le comportement de notation et décide du vainqueur en fonction d'une différence de 2 points à 13 et pas seulement du premier à atteindre 13.
2. « Pairage Bluetooth »: (lorsqu'il est activé) s'il est activé, « Marche » permet l'appairage avec le de cette application avec l'écran de pétanque externe.
3. « Réinitialiser les matchs »: s'il est activé, il réinitialisera/supprimera tous les matchs et commencera par le match 1.
4. « Réinitialiser la base de données »: si elle est activée, elle supprimera/réinitialisera tous les matchs et tous les autres paramètres de l'application aux paramètres d'origine, y compris le score actuel, les matchs, les noms d'équipe, les paramètres de débogage, l'ordre de tri, les paramètres Luetooth (lorsqu'il est activé), etc..
5. « Debug »: si activé, les informations de débogage seront affichées dans toute l'application entre crochets « ». Des choses comme "Nombre total d'enregistrements, nombre total de variables, numéro de match actuel, numéro de PK de jeu, etc.

Enfin en bas se trouve la barre de menu de navigation. Celui-ci est toujours positionné tout en bas de l'écran, quelle que soit la taille de l'écran. Même si la fonctionnalité Android « Split screen » est utilisée ou si l'écran est juste plus grand que ce que l'écran peut afficher en raison du nombre d'éléments à l'écran. Lorsque c'est le cas, vous pouvez toujours faire défiler en glissant vers le haut et vers le bas. Ce menu de navigation inférieur ne comporte qu'un seul bouton:

En bas à gauche: le bouton '<-' ira à gauche et affichera l'écran initial de l'aperçu de tous les matchs (#2)

Étape 6: Écran 0 (À propos)

L'écran final. Juste des infos, rien de plus.

Cet écran s'affiche la toute première fois que cette application est démarrée. Après cela, il ne sera plus jamais affiché, à moins que vous ne choisissiez de le faire en appuyant sur le '?' bouton sur l'écran principal #1.

La barre de menu de navigation inférieure n'a qu'un seul bouton et cela vous ramène à l'écran principal #1.

Étape 7: Logiciel et/ou code source

Finalement.

Vous pouvez télécharger l'Application à partir de cet emplacement Google Drive.

Vous pouvez télécharger le code à partir de l'entrée MIT App Inventor Gallery pour Pentaque (image #1). Cela vous permettra d'enregistrer le projet sur votre propre compte MIT App Inventor (vous pouvez le renommer comme vous le souhaitez). De là, vous pouvez voir tout le code dans l'éditeur de blocs, les écrans dans l'éditeur Designer et tous les médias et ressources utilisés pour ce projet.

Vous pouvez également télécharger le code source (un fichier.aia, qui est en fait un fichier.zip) à partir de cet emplacement Google Drive.