Aplikácia na udržiavanie skóre v Petanque / Jeu-de-Boules: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Toto je aplikácia na uchovávanie skóre v Petanque (niekedy označovaná ako Jeu de Boules) pre Android. Túto aplikáciu je možné používať tak, ako je a je plne funkčná. Alebo ho možno použiť v kombinácii s displejom Petanque Matrix [samostatné pokyny]. Táto časť projektu je jednoduchá, pretože nie je potrebný žiadny hardvér, iba bezplatný dostupný softvér.

Zásoby

1. Telefón kompatibilný s Androidom (najlepšie)
2. Zariadenie s prístupom k internetovému prehliadaču, najlepšie počítač s myšou na kódovanie a návrhové práce
3. Účet s MIT App Inventor (zadarmo)
4. Jednoduchý kresliaci balíček napr. Pixlr alebo Gimp (všetko zadarmo)
5. Webová stránka s ikonami, napr. Ikony používateľského rozhrania materiálu alebo Material.io (všetko zadarmo)

Softvér a zdrojový kód:

Odkaz na aplikáciu Actual Petanque nájdete v spodnej časti tejto stránky. Tu nájdete aj odkaz na úplný zdrojový kód (ospravedlňujeme sa, ale Instructables mi neumožňuje nahrať súbor.aia …).

Krok 1: Anatómia a navigácia v aplikácii

Dizajn a navigácia aplikácie sú veľmi jednoduché. K dispozícii sú celkom 4 obrazovky:

1. Hlavná obrazovka č. 1 (kde trávime väčšinu času uchovávaním skóre)
2. Obrazovka zápasov č. 2 (kde nájdeme zoznam všetkých odohraných zápasov a skóre)
3. Obrazovka s nastaveniami č. 3 (nastavenia pre aplikáciu, administratívne úlohy, ladenie atď.)
4. Obrazovka č. 0 (stránka s informáciami, logo a kde získať pokyny k zostaveniu, tj TENTO webový server)

Rozloženie obrazoviek a umiestnenie tlačidiel bolo optimalizované pre použitie 1 rukou a 1 prstom (palcom). Tlačidlá v spodnej navigačnej ponuke vás zavedú na obrazovky vpravo alebo vľavo od aktuálnej obrazovky. Tlačidlom 0 sa teda dostanete na obrazovku Informácie #0. A tlačidlo č. 1 vás vráti na hlavnú obrazovku č. 1 atď., USW.

Jasný? Potom pokračujme…

Krok 2: Návrh dátovej základne

Teraz, než vytvoríme prvú obrazovku, potrebujeme nejaké miesto na uloženie všetkých údajov, ktoré táto aplikácia bude používať. Na to použijeme najjednoduchší formulár, ktorý MIT App Inventor môže ponúknuť: TinyDB. Je to dosť obmedzené, pretože je možné uložiť iba pár kľúč/hodnota, ale s trochou pomoci a niektorých trikov to dokážeme dosiahnuť, aby sme robili všetko, čo chceme.

Existujú 2 typy hodnôt, ktoré budeme ukladať:

• Uložíme 10 jednoduchých hodnôt kľúč/hodnota pre celú aplikáciu (ako je uvedené vo funkcii „CreateIgnoreList“vyššie).
• A komplexnejší kľúč/hodnota ukladajúca všetky dokončené údaje o hrách do jedného reťazca s kľúčom/hodnotou „CurrentMatch“, ktorý slúži ako primárny kľúč * (ako je uvedené vo funkcii „SaveScore“vyššie). Tieto polia v rámci tohto jedného páru kľúč/hodnota sú oddelené nevizuálnym riadiacim znakom „\ t“. Tento kontrolný znak nám na obrazovke Zhody č. 2 umožní načítať všetky hodnoty do svojich oddelených komponentov a zobrazovať ich a triediť. Ale o tom viac v sekcii Obrazovka 2 (zápasy).

* Viac informácií o tom, ako vytvoriť primárny kľúč pre TinyDb v AppInventor na YouTube.

Krok 3: Obrazovka 1 (hlavná)

Toto je naša obrazovka „pracovného koňa“, kde budeme ako používateľ aplikácie tráviť väčšinu času. Je to tiež východiskový bod pre našu aplikáciu MIT App Inventor.

Ako vidíte z (obrázok č. 1) vyššie, aj keď je obrazovka v jednoduchom nastavení, je tu celkom skrytá interaktivita, spracovanie chýb, posúvanie, rozdelená obrazovka, plávajúce menu, posúvanie gestami, ochrana pred chybami, chybnými vstupmi a dokonca aj obnova z havárií. Všetky tieto funkcie nájdete v podrobnom zdrojovom kóde pre každú obrazovku. Čo tu teda môžete urobiť:

• Stlačte „Tím 1“a dostanete upozornenie, ktoré vám umožní zmeniť názov „Tím 1“. Po zmene sa zmení tento „tím 1“na meno, ktoré ste si vybrali. Toto je tiež názov, ktorý bude použitý na vyjadrenie vášho skóre „hry“a „zápasu“(na nasledujúcich obrazovkách).
• „Skóre tímu 1“a „skóre tímu 2“sa mení na základe tlačidiel „+“a „-“stlačených v spodnej časti každého príslušného tímu. Ak je skóre 0 a stlačené '-', zaznie zvukový a vizuálny signál, ale skóre zostane 0 (samozrejme).
• Ak „skóre“dosiahne 13, stane sa niekoľko vecí: zobrazí sa vizuálny signál, v oznamovacom okne sa zobrazia výsledky (obrázok č. 2) a poskytne vám možnosť buď začať novú hru, alebo nový zápas (a samozrejme nový hra). Ak ste však nevybrali klasické bodovanie Petanque, ale dvojbodové rozdielové skóre (ktoré je možné zvoliť na obrazovke nastavení č. 3), v závislosti od rozdielu medzi dvoma tímami bude za víťaza vyhlásené jedno (ako je znázornené na obrázku č. 3)).
• „Skóre“v aktuálnom „zápase“sa zobrazuje v strede obrazovky medzi skóre „tímu 1“a „tímu 2“. A to bude pokračovať v tabuľkách, kým sa nezačne nový „zápas“.
• Ak chcete prejsť na iné obrazovky, môžete tiež „potiahnutím doľava“zobraziť obrazovku Informácie č. 0 alebo „posunutím prsta doprava“zobraziť obrazovku Zápalky č. 2.

Nakoniec v spodnej časti je navigačná ponuka. Toto je vždy umiestnené v absolútnej spodnej časti obrazovky, bez ohľadu na to, aká je veľkosť obrazovky. Aj keď sa používa funkcia rozdelenej obrazovky systému Android. Dolná navigačná ponuka má tri tlačidlá:

1. Vľavo dole: „?“tlačidlo prejde doľava a znova zobrazí úvodnú obrazovku O programe (#0).
2. Dole v strede: tlačidlo reset (ktoré vyzerá ako „@“so šípkou) vám umožní začať novú hru alebo nový zápas „kedykoľvek“v hre, stačí stlačiť spodné stredné tlačidlo „Reset“. Zobrazí sa aj okno s upozornením, ktoré vás požiada, aby ste začali novú hru alebo nový zápas.
3. Vpravo dole: Tlačidlo „->“prejde doprava a zobrazí prehľad všetkých obrazoviek Zápasov (#2).

Krok 4: Obrazovka 2 (zápasy)

Aj keď je táto obrazovka veľmi jednoduchá na vizuálne líčenie, má v sebe zaujímavejší kód ako ostatné obrazovky. Ale skôr, ako sa do toho pustíme, uvidíme, čo robí jeho obrazovka:

Pod štítkami „Tím 1“a „Tím 2“sa nachádza zoznam všetkých zápasov a ich príslušných celkových skóre. Toto je zoradený zoznam s „posledným odohraným zápasom“hore a „najstarším odohraným zápasom“v dolnej časti.

V strede medzi „tímom 1“a „tímom 2“je tlačidlo, ktoré je možné použiť na zoradenie zoznamu zápasov vzostupne alebo zostupne. Ikona sa zmení v závislosti od zvoleného smeru triedenia.

Ak chcete prejsť na iné obrazovky, môžete tiež „potiahnutím prstom doľava“zobraziť hlavnú obrazovku č. 1 alebo „posunutím prsta doprava“zobraziť obrazovku nastavení č. 3.

Nakoniec v spodnej časti je navigačná ponuka. Toto je vždy umiestnené v absolútnej spodnej časti obrazovky, bez ohľadu na to, aká je veľkosť obrazovky. Aj keď sa používa funkcia rozdelenej obrazovky systému Android (ako je znázornené na obrázku č. 2). Dolná navigačná ponuka má tri tlačidlá:

1. Vľavo dole: „?“tlačidlo prejde doľava a znova zobrazí úvodnú obrazovku O programe (#0).
2. V strede dole: tlačidlo reset (ktoré vyzerá ako „@“so šípkou) vám umožní začať novú hru alebo nový zápas „kedykoľvek“v hre, stačí stlačiť spodné stredné tlačidlo „Reset“. Zobrazí sa aj okno s upozornením, ktoré vás požiada, aby ste začali novú hru alebo nový zápas.
3. Vpravo dole: Tlačidlo „->“prejde doprava a zobrazí prehľad všetkých obrazoviek Zápasov (#2).

Centrovanie zoznamu zápasov na obrazovku:

Chcel som zobraziť zoznam zápasov v strede na obrazovke s deliacim bodom '-' v strede. Pretože počet hier, ktoré tím vyhral, môže mať 1 alebo viac číslic a skutočný názov každého tímu môže mať rôznu veľkosť, nemôžeme to zaradiť iba do 1 zoznamu. Celé to bude vyzerať asi takto:

Tím 1 0 - 1 Tím 2

Foo 1 - 42 FooBar

Štítok oddeľovača „-“je preto potrebné vycentrovať. S oddeľovačom „Názov tímu 1“a „Skóre tímu 1“vpravo vľavo od oddeľovača „-“. A „skóre tímu 2“a „názov tímu 2“vľavo zarovnané napravo od oddeľovača „-“. Skončíme teda takto:

"Tím 1 0" "-" "1 Tím 2" "Foo 1" "-" "42 FooBar"

A keďže neviem, aký dlhý bude náš zoznam zápasov, vložil som všetky „mená 1 tímu“a „skóre 1 tímu“do rovnakého štítka HTMLFormat a po každom zápase vložím a a vložím nasledujúci na NewLine.

Pripravte si veci na triedenie:

Ako je uvedené v kroku Návrhu údajov (základňa), môžem uložiť iba jednu hodnotu. Uložil som teda hodnoty „názov tímu 1“, „skóre tímu 1“, „skóre tímu 2“a „názov tímu 2“oddelené nevizuálnym kontrolným znakom „\ t“. Teraz ich musím najskôr dostať z databázy (ako je znázornené na obrázku č. 3).

Útržok kódu ukazuje, že najskôr skontrolujeme, či je nastavený príznak Debug (to sa robí na každej obrazovke tejto aplikácie. Ďalej sa vytvorí zoznam párov kľúčov (s/hodnota), ktoré musíme pri prechádzaní databázou ignorovať. Zaujímajú nás iba údaje „Zhoda“, nič iné. Potom sa opakujeme v databáze, pričom ignorujeme všetky kľúče v Ignoreliste a vytvoríme nový zoznam s 2 hodnotami:

1. PrimaryKey (pamätajte, že toto je číslo, ktoré označuje číslo zhody, začínajúc od zhody č. 1)
2. Reťazec, ktorý obsahuje hodnoty pre „názov tímu 1“, „skóre tímu 1“, „skóre tímu 2“a „názov tímu 2“

Potom prejdeme zoznamom a vytvoríme nový zoznam zoznamov, kde sú jednotlivé polia rozdelené na jednotlivé položky (ako je znázornené na obrázku č. 4):

DataToSort -> Zoznam index 1 -> Zoznam index 1 (číslo PK)

-> Zoznam indexov 2 (Názov tímu 1) -> Zoznam indexov 3 (Tímové skóre 1) -> Zoznamový zoznam 4 (Tímové skóre 2) -> Zoznamový zoznam 5 (Názov tímu 2) -> Zoznamový zoznam 2 -> Zoznamový zoznam 1 (Číslo PK) -> Zoznam 2 (názov tímu 1) ->… ->…

Potom ukážeme niekoľko informácií o ladení, ak je príznak Debug True. A teraz môžeme konečne zoradiť náš zoznam (zoznamov).

BubbleSort* zoznam zoznamov:

Obrázok č. 5 zobrazuje úplný zoznam BubbleSort* nášho zoznamu zoznamov. Tento algoritmus môže byť samozrejme použitý pre zoznamy akejkoľvek veľkosti bez ohľadu na to, koľko indexov je prítomných.

* Viac informácií o tom, aký jednoduchý je algoritmus BubbleSort na YouTube.

Krok 5: Obrazovka 3 (Nastavenia)

Táto obrazovka vyzerá veľmi zaneprázdnene a má veľa prvkov vizuálneho dizajnu. Nakoniec však existuje iba 5 prepínacích prepínačov:

1. „Fred Scoring“: Po zapnutí „On“sa zmení správanie pri bodovaní a rozhodne o víťazovi na základe rozdielu 2 bodov pri 13 bodoch a nie iba pri prvom, kto dosiahne 13.
2. „Párovanie Bluetooth“: (ak je zapnuté), ak je zapnuté, „Zapnuté“umožňuje párovanie s touto aplikáciou s externým displejom Petanque.
3. „Resetovať zápasy“: Ak je zapnuté, resetuje/vymaže všetky zápasy a začne zápasom 1.
4. „Obnoviť databázu“: Ak je zapnutá, vymaže/resetuje všetky zápasy a všetky ostatné nastavenia aplikácie späť na pôvodné nastavenia vrátane aktuálneho skóre, zápasov, názvov tímov, nastavení ladenia, poradia zoradenia, nastavení luetooth (ak je povolené) atď..
5. „Debug“: Ak je zapnutý, bude zobrazovať informácie o ladení v celej aplikácii medzi hranatými zátvorkami „“. Veci ako „Celkový počet záznamov, Celkový počet premenných, Aktuálne číslo zápasu, Číslo PK hry atď.

Nakoniec v spodnej časti je navigačná ponuka. Toto je vždy umiestnené v absolútnej spodnej časti obrazovky, bez ohľadu na to, aká je veľkosť obrazovky. Aj keď je v systéme Android použitá funkcia „Rozdelená obrazovka“alebo je obrazovka vzhľadom na počet položiek na obrazovke len vyššia, než sa na nej môže zobraziť. V takom prípade sa môžete vždy posúvať potiahnutím nahor a nadol. Táto spodná navigačná ponuka má iba 1 tlačidlo:

Vľavo dole: tlačidlo '<-' prejde doľava a zobrazí úvodnú obrazovku s prehľadom všetkých zápasov (č. 2)

Krok 6: Obrazovka 0 (Informácie)

Záverečná obrazovka. Len informácie, nič viac.

Táto obrazovka sa zobrazuje pri prvom spustení tejto aplikácie. Potom sa už nikdy nezobrazí, pokiaľ sa tak nerozhodnete stlačením klávesu „?“tlačidlo na hlavnej obrazovke #1.

Dolná navigačná ponuka má iba 1 tlačidlo, čím sa dostanete späť na hlavnú obrazovku č. 1.

Krok 7: Softvér a/alebo zdrojový kód

Konečne.

Aplikáciu si môžete stiahnuť z tohto umiestnenia Disku Google.

Kód si môžete stiahnuť z záznamu MIT App Inventor Gallery pre Pentaque (obrázok č. 1). To vám umožní uložiť projekt do vlastného účtu MIT App Inventor (môžete ho premenovať na čokoľvek chcete). Odtiaľ môžete vidieť všetok kód v editore blokov, obrazovky v editore návrhára a všetky médiá a zdroje použité na tento projekt.

Z tohto umiestnenia Disku Google si tiež môžete stiahnuť zdrojový kód (súbor.aia, ktorý je v skutočnosti súborom.zip).