Applicazione per il mantenimento del punteggio di bocce / Jeu-de-Boules: 7 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Questa è un'applicazione per il mantenimento del punteggio di Petanque (a volte indicata come Jeu de Boules) per Android. Questa applicazione può essere utilizzata così com'è ed è completamente funzionante. Oppure può essere utilizzato in combinazione con il display Petanque Matrix [istruzioni separate]. Questa parte del progetto è semplice poiché non è richiesto alcun hardware, solo software gratuito disponibile.

Forniture

1. Un telefono compatibile con Android (preferibilmente)
2. Un dispositivo con accesso tramite browser Internet, preferibilmente un computer con mouse per il lavoro di codifica e progettazione
3. Un account con MIT App Inventor (gratuito)
4. Un semplice pacchetto di disegno, ad es. Pixlr o Gimp (tutto gratis)
5. Un sito Web di risorse di icone, ad es. Icone dell'interfaccia utente dei materiali o Material.io (tutto gratuito)

Software e codice sorgente:

È possibile trovare un collegamento all'applicazione Actual Bocce in fondo a questa pagina. Qui puoi anche trovare un link al codice sorgente completo (scusate per questo, ma Instructables non mi permette di caricare un file.aia…).

Passaggio 1: anatomia e navigazione dell'app

Il design e la navigazione dell'app sono piuttosto semplici. Ci sono 4 schermi in totale:

1. Schermata principale n. 1 (dove passiamo la maggior parte del tempo a tenere il punteggio)
2. Schermata Partite n. 2 (dove troviamo un elenco di tutte le partite giocate e dei punteggi)
3. Schermata delle impostazioni n. 3 (impostazioni per l'app, attività amministrative, debug, ecc.)
4. Informazioni sulla schermata #0 (le informazioni, il logo e dove trovare le istruzioni di costruzione, ad esempio QUESTA pagina web)

Il layout degli schermi e il posizionamento dei pulsanti è stato ottimizzato per l'uso con 1 mano e 1 dito (pollice). I pulsanti nel menu di navigazione in basso portano alle schermate a destra oa sinistra della schermata corrente. Quindi il pulsante 0 ti porta alla schermata Informazioni su #0. E il pulsante n. 1 ti riporta alla schermata principale n. 1 ecc., usw.

Chiaro? Allora continuiamo…

Passaggio 2: la progettazione dei dati (base)

Ora, prima di creare la prima schermata, abbiamo bisogno di un posto in cui archiviare tutti i dati che utilizzerà questa app. Per questo utilizzeremo il modulo più semplice che l'App Inventor del MIT ha da offrire: TinyDB. Questo è piuttosto limitato poiché può memorizzare solo una coppia chiave/valore, ma con un po' di aiuto e alcuni trucchi possiamo fare in modo che faccia tutte le cose che vogliamo.

Ci sono 2 tipi di valori che memorizzeremo:

• Memorizzeremo 10 semplici valori chiave/valore a livello di app (come mostrato nella funzione "CreateIgnoreList" sopra).
• E una chiave/valore più complessa che memorizza tutti i dati delle partite completate in una stringa con la chiave/valore "CurrentMatch" che funge da chiave primaria * (come mostrato nella funzione "SaveScore" sopra). Questi campi all'interno di questa coppia chiave/valore sono separati da un carattere di controllo non visivo "\t". Questo carattere di controllo ci consentirà nella schermata 2 delle corrispondenze di recuperare tutti i valori nei suoi componenti separati e di visualizzarli e ordinarli. Ma di questo parleremo nella sezione Schermata 2 (partite).

* Ulteriori informazioni su come creare una chiave primaria per TinyDb in AppInventor su YouTube.

Passaggio 3: schermata 1 (principale)

Questa è la nostra schermata "cavallo di battaglia" in cui passeremo la maggior parte del tempo come utenti dell'app. È anche il punto di partenza per la nostra app MIT App Inventor.

Come puoi vedere dalla (immagine n. 1) sopra, sebbene lo schermo sia semplice nella configurazione, c'è un po' di interattività nascosta, gestione degli errori, scorrimento, schermo diviso, menu mobile, gesti di scorrimento, protezione da errori, input errati e persino ripristino dagli incidenti. Per tutte queste funzionalità si prega di guardare il codice sorgente dettagliato per ogni schermata. Quindi cosa puoi fare qui:

• Premi 'Team 1' e riceverai una notifica che ti consentirà di cambiare il nome di 'Team 1'. Una volta modificato, questo cambierà questa "Squadra 1" con il nome che hai scelto. Questo è anche il nome che verrà utilizzato per riflettere il tuo punteggio di "partita" e "partita" (nelle schermate successive).
• Il "punteggio della squadra 1" e il "punteggio della squadra 2" cambiano in base ai pulsanti "+" e "-" premuti nella parte inferiore di ciascuna rispettiva squadra. Se il punteggio è 0 e si preme '-' viene fornito un segnale acustico e visivo ma il punteggio rimane 0 (ovviamente).
• Se un "punteggio" raggiunge 13, accadono alcune cose: viene fornito un segnale visivo, una finestra di notifica mostra i risultati (immagine n. 2) e offre la possibilità di iniziare una nuova partita o una nuova partita (e ovviamente una nuova gioco). Se invece non hai selezionato il classico punteggio di Petanque ma il punteggio di differenza di 2 punti (che può essere selezionato nella schermata delle impostazioni n. 3) che a seconda della differenza tra due squadre una sarà dichiarata vincitrice (come mostrato nella figura n. 3).
• Il "punteggio" della "partita" corrente è mostrato al centro dello schermo tra i punteggi della "Squadra 1" e della "Squadra 2". E questo continuerà a tabulare fino a quando non verrà avviata una nuova "match".
• Per passare ad altre schermate puoi anche "scorrere verso sinistra" per visualizzare la schermata Informazioni n. 0 o "scorrere verso destra" per visualizzare la schermata n. 2 delle partite.

Infine in fondo c'è la barra dei menu di navigazione. Questo è sempre posizionato nella parte inferiore assoluta dello schermo, indipendentemente dalle dimensioni dello schermo. Anche se viene utilizzata la funzionalità "Schermo diviso" di Android. Il menu di navigazione in basso ha 3 pulsanti:

1. In basso a sinistra: il '?' Il pulsante andrà a sinistra e mostrerà nuovamente la schermata Informazioni di avvio iniziale (#0).
2. In basso al centro: il pulsante di ripristino (che ha l'aspetto di una "@" con una freccia) ti consentirà di iniziare una nuova partita o una nuova partita in "qualsiasi momento" del gioco, basta premere il pulsante "Ripristina" in basso al centro. Questo includerà anche una finestra di notifica che ti chiederà di iniziare una nuova partita o una nuova partita.
3. In basso a destra: il pulsante '->' andrà a destra e mostrerà la panoramica di tutte le schermate delle partite (#2).

Passaggio 4: schermata 2 (partite)

Sebbene molto semplice nella composizione visiva, questa schermata ha al suo interno il codice più interessante rispetto alle altre schermate. Ma prima di approfondire, vediamo cosa fa lo schermo:

Sotto le etichette "Squadra 1" e "Squadra 2" c'è un elenco di tutte le partite e dei rispettivi punteggi totali. Questo è un elenco ordinato con l'"ultima partita giocata" in alto e la "partita più vecchia" in basso.

Nel mezzo, tra "Team 1" e "Team 2", c'è un pulsante che può essere utilizzato per ordinare l'elenco delle partite in ordine crescente o decrescente. L'icona cambierà a seconda della direzione di ordinamento scelta.

Per passare ad altre schermate puoi anche "scorrere verso sinistra" per visualizzare la schermata principale n. 1 o "scorrere verso destra" per visualizzare la schermata n. 3 delle impostazioni.

Infine in fondo c'è la barra dei menu di navigazione. Questo è sempre posizionato nella parte inferiore assoluta dello schermo, indipendentemente dalle dimensioni dello schermo. Anche se viene utilizzata la funzionalità Android 'Split screen' (come mostrato nell'immagine n. 2). Il menu di navigazione in basso ha 3 pulsanti:

1. In basso a sinistra: il '?' Il pulsante andrà a sinistra e mostrerà nuovamente la schermata Informazioni di avvio iniziale (#0).
2. In basso al centro: il pulsante di ripristino (che ha l'aspetto di una "@" con una freccia) ti consentirà di iniziare una nuova partita o una nuova partita in "qualsiasi momento" del gioco, basta premere il pulsante "Ripristina" in basso al centro. Questo includerà anche una finestra di notifica che ti chiederà di iniziare una nuova partita o una nuova partita.
3. In basso a destra: il pulsante '->' andrà a destra e mostrerà la panoramica di tutte le schermate delle partite (#2).

Centrare l'elenco delle Partite sullo schermo:

Volevo mostrare l'elenco delle partite centrato sullo schermo con il divisore "-" al centro. Ora, poiché il numero di partite vinte da una squadra può essere di 1 o più cifre e il nome effettivo di ciascuna squadra può essere di dimensioni diverse, non possiamo semplicemente inserirlo in 1 elenco. Sarebbe tutto simile a questo:

Squadra 1 0 - 1 Squadra 2

Foo 1 - 42 FooBar

Quindi l'etichetta per il divisore '-' deve essere centrata. Con "Nome squadra 1" e "Punteggio squadra 1" allineati a destra a sinistra del divisore "-". E il "Punteggio squadra 2" e "Nome squadra 2" sono allineati a sinistra a destra del divisore "-". Quindi finiamo così:

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

E poiché non so quanto sarà lungo il nostro elenco di partite, metto tutti i "Nome squadra 1" e "Punteggio squadra 1" nella stessa etichetta HTMLFormat e dopo ogni partita inserisco una e metto la successiva su una NewLine.

Prepara le cose per l'ordinamento:

Come menzionato nella fase di progettazione di The Data(base), posso memorizzare solo un singolo valore. Quindi ho memorizzato i valori di "Nome squadra 1", "Punteggio squadra 1", "Punteggio squadra 2" e "Nome squadra 2" separati da un carattere di controllo non visivo "\t". Ora devo prima estrarli dal database (come mostrato nell'immagine n. 3).

Il frammento di codice mostra che prima controlliamo se il flag Debug è impostato (questo viene fatto in ogni schermata di questa applicazione. Successivamente crea un elenco di coppie di chiavi/valori) che dobbiamo ignorare quando si passa attraverso il database. Ci interessano solo i dati 'Match', nient'altro, quindi eseguiamo il ciclo del database, ignorando tutte le chiavi nell'elenco Ignore e creiamo un nuovo elenco con 2 valori:

1. La chiave primaria (ricorda che questo è un numero che indica il numero della corrispondenza, che inizia con la corrispondenza n. 1)
2. Una stringa che contiene i valori di "Nome squadra 1", "Punteggio squadra 1", "Punteggio squadra 2" e "Nome squadra 2"

Passiamo quindi attraverso l'elenco e creiamo un nuovo elenco di elenchi in cui i singoli campi sono suddivisi in singoli elementi (come mostrato nell'immagine n. 4):

DataToSort -> Indice elenco 1 -> Indice elenco 1 (numero PK)

-> Indice elenco 2 (Nome squadra 1) -> Indice elenco 3 (Punteggio squadra 1) -> Indice elenco 4 (Punteggio squadra 2) -> Indice elenco 5 (Nome squadra 2) -> Indice elenco 2 -> Indice elenco 1 (Numero PK) -> Indice elenco 2 (Nome squadra 1) -> … -> …

Dopodiché mostriamo alcune informazioni di debug se il flag Debug è True. E ora possiamo finalmente ordinare il nostro Elenco (di elenchi).

BubbleSort* un elenco di elenchi:

L'immagine n. 5 mostra l'elenco completo di BubbleSort*, il nostro elenco di elenchi. Questo algoritmo può ovviamente essere utilizzato per List of List di qualsiasi dimensione, indipendentemente dal numero di Index presenti.

* Ulteriori informazioni su quanto sia semplice l'algoritmo BubbleSort su YouTube.

Passaggio 5: schermata 3 (Impostazioni)

Questa schermata sembra molto occupata e ha molti elementi di design visivo. Ma alla fine ci sono solo 5 interruttori a levetta:

1. 'Fred Scoring': se impostato su 'On' cambia il comportamento del punteggio e decide il vincitore in base a una differenza di 2 punti a 13 e non solo al primo a raggiungere 13.
2. 'Bluetooth Pairing': (quando abilitato) se impostato su 'On' abilita l'accoppiamento con il di questa applicazione con il Bocce Display esterno.
3. 'Reimposta partite': se impostato su 'On', azzera/cancella tutte le partite e inizia con la partita 1.
4. 'Ripristina DB': se impostato su 'On' eliminerà/ripristinerà tutte le partite e tutte le altre impostazioni dell'applicazione riportandole alle impostazioni originali, inclusi il punteggio corrente, le partite, i nomi delle squadre, le impostazioni di debug, l'ordinamento, le impostazioni di luetooth (se abilitate) ecc..
5. 'Debug': se impostato su 'On' mostrerà le informazioni di debug in tutta l'app tra parentesi quadre ''. Cose come "Numero totale di record, Numero totale di variabili, Numero partita corrente, Numero PK di gioco, ecc.

Infine in fondo c'è la barra dei menu di navigazione. Questo è sempre posizionato nella parte inferiore assoluta dello schermo, indipendentemente dalle dimensioni dello schermo. Anche se viene utilizzata la funzionalità "Schermo diviso" di Android o lo schermo è solo più alto di quanto lo schermo possa visualizzare a causa del numero di elementi sullo schermo. In questo caso puoi sempre scorrere scorrendo su e giù. Questo menu di navigazione in basso ha solo 1 pulsante:

In basso a sinistra: il pulsante '<-' andrà a sinistra e mostrerà la schermata iniziale di tutte le partite (#2)

Passaggio 6: schermata 0 (informazioni)

La schermata finale. Solo informazioni, niente di più.

Questa schermata viene mostrata la prima volta che viene avviata questa applicazione. Dopodiché non verrà più mostrato, a meno che tu non abbia scelto di farlo premendo il tasto '?' pulsante sulla schermata principale #1.

La barra dei menu di navigazione in basso ha solo 1 pulsante e questo ti riporta alla schermata principale n. 1.

Passaggio 7: software e/o codice sorgente

Finalmente.

Puoi scaricare l'applicazione da questa posizione di Google Drive.

È possibile scaricare il codice dalla voce della galleria dell'inventore dell'app del MIT per Pentaque (immagine n. 1). Ciò ti consentirà di salvare il progetto sul tuo account MIT App Inventor (puoi rinominarlo come vuoi). Da lì puoi vedere tutto il codice nell'editor Blocchi, le schermate nell'editor Designer e tutti i media e le risorse utilizzati per questo progetto.

Puoi anche scaricare il codice sorgente (un file.aia, che in realtà è un file.zip) da questa posizione di Google Drive.