Aplicação de manutenção de pontuação Petanque / Jeu-de-Boules: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

Este é um aplicativo de manutenção de pontuação Petanque (também conhecido como Jeu de Boules) para Android. Este aplicativo pode ser usado exatamente como está e é totalmente funcional. Ou pode ser usado em combinação com o display Petanque Matrix [instructables separados]. Esta parte do projeto é fácil, pois nenhum hardware é necessário, apenas software gratuito disponível.

Suprimentos

1. Um telefone compatível com Android (de preferência)
2. Um dispositivo com acesso por navegador de internet, de preferência um computador com mouse para o trabalho de codificação e design
3. Uma conta no MIT App Inventor (gratuito)
4. Um pacote de desenho simples, por exemplo Pixlr ou Gimp (todos gratuitos)
5. Um site de recursos de ícones, por exemplo Ícones de IU de materiais ou Material.io (tudo grátis)

Software e código fonte:

Você pode encontrar um link para o aplicativo Petanca Real na parte inferior desta página. Aqui você também pode encontrar um link para o código-fonte completo (desculpe por isso, mas o Instructables não me permite fazer upload de um arquivo.aia…).

Etapa 1: anatomia e navegação do aplicativo

O design e a navegação do aplicativo são bastante simples. Existem 4 telas no total:

1. Tela principal # 1 (onde passamos a maior parte do nosso tempo anotando a pontuação)
2. Tela de partidas nº 2 (onde encontramos uma lista de todas as partidas disputadas e pontuações)
3. Tela de configurações nº 3 (configurações do aplicativo, tarefas administrativas, depuração, etc.)
4. Sobre a tela # 0 (sobre, logotipo e onde obter as instruções de construção, ou seja, ESTA página da web)

O layout das telas e o posicionamento dos botões foram otimizados para uso com 1 mão e 1 dedo (polegar). Os botões no menu de navegação inferior levam você às telas à direita ou à esquerda da tela atual. Assim, o botão 0 leva você à tela Sobre # 0. E o botão nº 1 leva você de volta à tela principal nº 1 etc., usw.

Claro? Então vamos continuar …

Etapa 2: O Design de Dados (base)

Agora, antes de criarmos a primeira tela, precisamos de algum lugar para armazenar todos os dados que este aplicativo usará. Para isso, usaremos a forma mais simples que o MIT App Inventor tem a oferecer: TinyDB. Isso é bastante limitado, pois só pode armazenar um par Chave / Valor, mas com um pouco de ajuda e alguns truques podemos fazer com que isso faça tudo o que queremos.

Existem 2 tipos de valores que iremos armazenar:

• Armazenaremos 10 valores simples de chave / valor em todo o aplicativo (conforme mostrado na função 'CreateIgnoreList' acima).
• E uma chave / valor mais complexo armazenando todos os dados de jogos concluídos em uma string com a chave / valor 'CurrentMatch' atuando como a chave primária * (conforme mostrado na função 'SaveScore' acima). Esses campos dentro deste par de chave / valor são separados por um caractere de controle não visual '\ t'. Este caractere de controle nos permitirá, na tela Matches # 2, recuperar todos os valores em seus componentes separados, exibi-los e classificá-los. Mas mais sobre isso na seção Tela 2 (correspondências).

* Mais informações sobre como criar uma chave primária para TinyDb no AppInventor no YouTube.

Etapa 3: Tela 1 (principal)

Esta é a nossa tela 'burra', onde passaremos a maior parte do tempo como usuários do aplicativo. É também o ponto de partida para nosso aplicativo MIT App Inventor.

Como você pode ver na (imagem 1) acima, embora a tela seja simples na configuração, há bastante interatividade oculta, tratamento de erros, rolagem, tela dividida, menu flutuante, gestos de deslizar, proteção contra erros, entradas erradas e até mesmo recuperação de travamentos. Para todos esses recursos, consulte o código-fonte detalhado para cada tela. Então, o que você pode fazer aqui:

• Pressione 'Equipe 1' e você receberá uma Notificação que permitirá que você altere o nome da 'Equipe 1'. Uma vez alterado, isso mudará este 'Time 1' para o nome que você escolheu. Este também é o nome que será usado para refletir sua pontuação de 'jogo' e 'partida' (nas próximas telas).
• A 'pontuação da equipe 1' e a 'pontuação da equipe 2' mudam com base nos botões '+' e '-' pressionados na parte inferior de cada equipe respectiva. Se a pontuação for 0 e '-' for pressionado, um sinal sonoro e visual é fornecido, mas a pontuação permanece 0 (é claro).
• Se a 'pontuação' chegar a 13, algumas coisas acontecem: um sinal visual é fornecido, uma janela de notificação mostra os resultados (imagem # 2) e oferece a opção de iniciar um novo jogo ou uma nova partida (e, claro, um novo jogos). Se, no entanto, você não selecionou a pontuação clássica da Petanca, mas a pontuação de diferença de 2 pontos (que pode ser selecionada na tela de configurações # 3), dependendo da diferença entre duas equipes, uma será declarada a vencedora (conforme mostrado na imagem # 3)
• A 'pontuação' na 'partida' atual é mostrada no centro da tela entre as pontuações da 'Equipe 1' e da 'Equipe 2'. E isso continuará tabulando até que uma nova 'partida' seja iniciada.
• Para navegar para outras telas, você também pode 'deslizar para a esquerda' para mostrar a tela Sobre # 0 ou 'deslizar para a direita' para mostrar a tela de Partidas # 2.

Finalmente, na parte inferior, está a barra de menu de navegação. Ele está sempre posicionado na parte inferior absoluta da tela, não importa o tamanho da tela. Mesmo se a funcionalidade de 'tela dividida' do Android for usada. O menu de navegação inferior possui 3 botões:

1. Inferior esquerdo: o '?' botão irá para a esquerda e mostrará a tela inicial Sobre (# 0) novamente.
2. Centro-inferior: o botão de reinicialização (que se parece com um '@' com uma seta) permitirá que você comece um novo jogo ou uma nova partida a 'qualquer momento' no jogo, basta pressionar o botão 'Reiniciar' inferior central. Isso também exibirá uma janela de notificação que solicitará que você inicie um novo jogo ou uma nova partida.
3. Parte inferior direita: O botão '->' irá para a direita e mostrará a visão geral de todas as telas de partidas (# 2).

Etapa 4: Tela 2 (correspondências)

Embora seja muito simples na composição visual, essa tela tem o código mais interessante dentro dela do que as outras telas. Mas antes de entrarmos nisso, vamos ver o que a tela faz:

Abaixo dos rótulos 'Equipe 1' e 'Equipe 2' está uma lista de todas as partidas e suas respectivas pontuações totais. Esta é uma lista ordenada com a 'última partida jogada' na parte superior e a 'partida mais antiga' na parte inferior.

No meio, entre 'Equipe 1' e 'Equipe 2', está um botão que pode ser usado para classificar a lista de partidas em ordem crescente ou decrescente. O ícone mudará dependendo da direção de classificação escolhida.

Para navegar para outras telas, você também pode 'deslizar para a esquerda' para mostrar a tela principal nº 1 ou 'deslizar para a direita' para mostrar a tela de configurações nº3.

Finalmente, na parte inferior, está a barra de menu de navegação. Ele está sempre posicionado na parte inferior absoluta da tela, não importa o tamanho da tela. Mesmo se a funcionalidade de 'tela dividida' do Android for usada (como mostrado na Figura 2). O menu de navegação inferior possui 3 botões:

1. Inferior esquerdo: o '?' botão irá para a esquerda e mostrará a tela inicial Sobre (# 0) novamente.
2. Centro-inferior: o botão de reinicialização (que se parece com um '@' com uma seta) permitirá que você comece um novo jogo ou uma nova partida a 'qualquer momento' no jogo, basta pressionar o botão 'Reiniciar' inferior central. Isso também exibirá uma janela de notificação que solicitará que você inicie um novo jogo ou uma nova partida.
3. Parte inferior direita: O botão '->' irá para a direita e mostrará a visão geral de todas as telas de partidas (# 2).

Centralizando a lista de partidas na tela:

Eu queria mostrar a lista de partidas centralizadas na tela com o divisor '-' no centro. Agora, como o número de jogos que uma equipe ganhou pode ter 1 ou mais dígitos e o nome real de cada equipe pode ser diferente em tamanho, não podemos simplesmente colocar isso em 1 lista. Tudo seria mais ou menos assim:

Equipe 1 0 - 1 Equipe 2

Foo 1 - 42 FooBar

Portanto, o rótulo do divisor '-' precisa ser centralizado. Com o 'nome da equipe 1' e a 'pontuação da equipe 1' alinhados à esquerda do divisor '-'. E a 'pontuação da equipe 2' e o 'nome da equipe 2' alinhados à esquerda à direita do divisor '-'. Então acabamos assim:

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

E como não sei quanto tempo nossa lista de partidas será, coloco todo o 'nome da equipe 1' e 'pontuação da equipe 1' no mesmo rótulo de formato HTML e, após cada partida, insiro um e coloco o próximo em uma NewLine.

Prepare as coisas para classificação:

Conforme mencionado na etapa O projeto de dados (base), só posso armazenar um único valor. Portanto, armazenei os valores de 'Nome da equipe 1', 'Pontuação da equipe 1', 'Pontuação da equipe 2' e 'Nome da equipe 2' separados por um caractere de controle não visual '\ t'. Agora preciso primeiro retirá-los do banco de dados (conforme mostrado na Figura 3).

O trecho de código mostra que primeiro verificamos se o sinalizador de depuração está definido (isso é feito em todas as telas deste aplicativo. Em seguida, ele cria uma lista de chaves (pares s / valor) que precisamos ignorar ao passar pelo banco de dados. Estamos interessados apenas nos dados 'Match', nada mais. Em seguida, percorremos o banco de dados, ignorando todas as chaves na Ignorelist e criamos uma nova lista com 2 valores:

1. A chave primária (lembre-se de que este é um número que indica o número da correspondência, começando com a correspondência # 1)
2. Uma string que contém os valores para 'Nome da equipe 1', 'Pontuação da equipe 1', 'Pontuação da equipe 2' e 'Nome da equipe 2'

Em seguida, percorremos a Lista e criamos uma nova Lista de Listas onde os campos individuais são divididos em itens individuais (conforme mostrado na Figura 4):

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

-> Índice de lista 2 (Nome da equipe 1) -> Índice de lista 3 (pontuação da equipe 1) -> Índice da lista 4 (pontuação da equipe 2) -> Índice da lista 5 (nome da equipe 2) -> Índice da lista 2 -> Índice da lista 1 (Número PK) -> Índice de lista 2 (nome da equipe 1) -> … -> …

Depois disso, mostramos algumas informações de depuração se o sinalizador Debug for True. E agora podemos finalmente classificar nossa lista (de listas).

BubbleSort * uma lista de listas:

A imagem 5 mostra a lista completa para BubbleSort * nossa lista de listas. Este algoritmo pode ser usado para Lista de Listas de qualquer tamanho, não importando quantos Índices estejam presentes.

* Mais informações sobre a simplicidade do algoritmo BubbleSort no YouTube.

Etapa 5: Tela 3 (configurações)

Esta tela parece muito ocupada e tem muitos elementos de design visual. Mas no final, existem apenas 5 interruptores:

1. 'Pontuação de Fred': se ativado, muda o comportamento de pontuação e decide o vencedor com base em uma diferença de 2 pontos em 13 e não apenas no primeiro a chegar a 13.
2. 'Emparelhamento Bluetooth': (quando ativado) se ativado em 'On', permite o emparelhamento com o deste aplicativo com o display de petanca externo.
3. 'Redefinir partidas': se estiver definido como 'Ligado', ele reinicializará / excluirá todas as correspondências e iniciará com a partida 1.
4. 'Redefinir banco de dados': se ativado, excluirá / redefinirá todas as partidas e todas as outras configurações do aplicativo de volta às configurações originais, incluindo a pontuação atual, partidas, nomes de times, configurações de depuração, ordem de classificação, configurações de luetooth (quando habilitado) etc..
5. 'Depurar': se estiver definido como 'Ativado', as informações de depuração serão exibidas em todo o aplicativo entre colchetes ''. Coisas como 'Número total de registros, número total de variáveis, número da partida atual, número do jogo PK, etc.

Finalmente, na parte inferior, está a barra de menu de navegação. Ele está sempre posicionado na parte inferior absoluta da tela, não importa o tamanho da tela. Mesmo se a funcionalidade de 'tela dividida' do Android for usada ou a tela for apenas mais alta do que a tela pode exibir devido ao número de itens na tela. Onde for esse o caso, você sempre pode rolar deslizando para cima e para baixo. Este menu de navegação inferior possui apenas 1 botão:

Esquerda inferior: o botão '<-' irá para a esquerda e mostrará a exibição inicial da tela de todas as partidas (# 2)

Etapa 6: Tela 0 (sobre)

A tela final. Apenas informações, nada mais.

Esta tela é exibida na primeira vez que este aplicativo é iniciado. Depois disso, ele nunca será mostrado novamente, a menos que você opte por fazer isso pressionando '?' botão na tela principal # 1.

A barra de menu de navegação inferior tem apenas 1 botão e isso o leva de volta à tela principal # 1.

Etapa 7: Software e / ou código-fonte

Finalmente.

Você pode baixar o aplicativo a partir deste local do Google Drive.

Você pode baixar o código da entrada do MIT App Inventor Gallery para Pentaque (imagem # 1). Isso permitirá que você salve o projeto em sua própria conta do MIT App Inventor (você pode renomeá-lo como quiser). A partir daí você pode ver todo o código no editor de Blocos, as telas no editor Designer e todas as mídias e recursos usados para este projeto.

Você também pode baixar o código-fonte (um arquivo.aia, que na verdade é um arquivo.zip) deste local do Google Drive.