Petanque / Jeu-de-Boules Utrzymanie wyniku: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:28

Jest to aplikacja do przechowywania wyników Petanque (czasami określana jako Jeu de Boules) na Androida. Ta aplikacja może być używana tak jak jest i jest w pełni funkcjonalna. Lub może być używany w połączeniu z wyświetlaczem Petanque Matrix [oddzielne instrukcje]. Ta część projektu jest łatwa, ponieważ nie jest wymagany sprzęt, a jedynie dostępne bezpłatne oprogramowanie.

Kieszonkowe dzieci

1. Telefon kompatybilny z Androidem (najlepiej)
2. Urządzenie z dostępem do przeglądarki internetowej, najlepiej komputer z myszką do kodowania i prac projektowych
3. Konto z MIT App Inventor (bezpłatne)
4. Prosty pakiet do rysowania m.in. Pixlr lub Gimp (wszystkie darmowe)
5. Witryna z zasobami ikon, np. Ikony Material UI lub Material.io (wszystkie za darmo)

Oprogramowanie i kod źródłowy:

Link do aplikacji Rzeczywiste Petanque można znaleźć na dole tej strony. Tutaj możesz również znaleźć link do pełnego kodu źródłowego (przepraszam za to, ale Instructables nie pozwala mi przesłać pliku.aia…).

Krok 1: Anatomia i nawigacja w aplikacji

Projekt i nawigacja w aplikacji są dość proste. W sumie są 4 ekrany:

1. Główny ekran #1 (gdzie spędzamy większość czasu na zapisywaniu punktów)
2. Ekran meczów #2 (gdzie znajdujemy listę wszystkich rozegranych meczów i wyników)
3. Ekran ustawień nr 3 (ustawienia aplikacji, zadania administracyjne, debugowanie itp.)
4. O ekranie #0 (informacje, logo i skąd uzyskać instrukcje budowania, tj. TA strona)

Układ ekranów i rozmieszczenie przycisków zostały zoptymalizowane pod kątem obsługi 1 ręką i 1 palcem (kciukiem). Przyciski w dolnym menu nawigacyjnym prowadzą do ekranów po prawej lub lewej stronie bieżącego ekranu. Tak więc przycisk 0 prowadzi do ekranu Informacje #0. A przycisk nr 1 przenosi z powrotem do ekranu głównego nr 1 itd., usw.

Jasne? Niż kontynuujmy…

Krok 2: Projekt danych (bazy)

Teraz, zanim utworzymy pierwszy ekran, potrzebujemy miejsca do przechowywania wszystkich danych, z których będzie korzystać ta aplikacja. W tym celu użyjemy najprostszej formy, jaką ma do zaoferowania MIT App Inventor: TinyDB. Jest to raczej ograniczone, ponieważ może przechowywać tylko parę klucz/wartość, ale z niewielką pomocą i kilkoma sztuczkami możemy sprawić, że zrobi to wszystko, czego chcemy.

Przechowujemy 2 rodzaje wartości:

• Przechowamy 10 prostych wartości klucza/wartości dla całej aplikacji (jak pokazano w funkcji „CreateIgnoreList” powyżej).
• I bardziej złożony klucz/wartość przechowująca wszystkie dane ukończonych gier w jednym ciągu, przy czym klucz/wartość „CurrentMatch” działa jako klucz podstawowy * (jak pokazano w funkcji „Zapisz wynik” powyżej). Te pola w tej jednej parze klucz/wartość są oddzielone niewizualnym znakiem kontrolnym „\t”. Ten znak kontrolny pozwoli nam na ekranie Dopasowania #2 pobrać wszystkie wartości do oddzielnych składników oraz wyświetlić je i posortować. Ale więcej na ten temat w sekcji Ekran 2 (mecze).

* Więcej informacji na temat tworzenia klucza podstawowego dla TinyDb w AppInventor na YouTube.

Krok 3: Ekran 1 (główny)

To jest nasz ekran „konia roboczego”, na którym spędzimy większość czasu jako użytkownik aplikacji. Jest to również punkt wyjścia dla naszej aplikacji MIT App Inventor.

Jak widać z (zdjęcie #1) powyżej, chociaż ekran jest prosty w konfiguracji, jest sporo ukrytej interaktywności, obsługi błędów, przewijania, podzielonego ekranu, pływającego menu, gestów przesuwania, ochrony przed błędami, błędnymi danymi wejściowymi, a nawet odzyskiwania od awarii. Wszystkie te funkcje znajdziesz w szczegółowym kodzie źródłowym każdego ekranu. Więc co możesz tutaj zrobić:

• Naciśnij „Drużyna 1”, a otrzymasz powiadomienie, które umożliwi Ci zmianę nazwy „Zespołu 1”. Po zmianie zmieni to nazwę „Drużyny 1” na wybraną przez Ciebie nazwę. Jest to również nazwa, która będzie używana do odzwierciedlenia wyniku „gry” i „meczu” (na następnych ekranach).
• „Wynik zespołu 1” i „Wynik zespołu 2” zmieniają się w zależności od naciśnięcia przycisków „+” i „-” u dołu każdej odpowiedniej drużyny. Jeśli wynik wynosi 0 i zostanie naciśnięty „-”, słychać sygnał dźwiękowy i wizualny, ale wynik pozostaje 0 (oczywiście).
• Jeśli „wynik” osiągnie 13, wydarzy się kilka rzeczy: pojawia się sygnał wizualny, okno powiadomień pokazuje wyniki (rysunek #2) i zapewnia opcję rozpoczęcia nowej gry lub nowego meczu (i oczywiście nowego gra). Jeśli jednak wybrałeś nie klasyczną punktację w Petanque, ale różnicę 2 punktów (którą można wybrać na ekranie ustawień #3), wówczas w zależności od różnicy między dwoma zespołami jeden zostanie ogłoszony zwycięzcą (jak pokazano na rysunku #3).
• „Wynik” w bieżącym „meczu” jest wyświetlany na środku ekranu pomiędzy wynikami „Drużyny 1” i „Drużyny 2”. I to będzie kontynuowane aż do rozpoczęcia nowego „meczu”.
• Aby przejść do innych ekranów, możesz także „przesuń palcem w lewo”, aby wyświetlić ekran Informacje #0 lub „przesuń palcem w prawo”, aby wyświetlić ekran meczów #2.

Wreszcie na dole znajduje się pasek menu nawigacji. Jest on zawsze umieszczany na samym dole ekranu, bez względu na jego rozmiar. Nawet jeśli używana jest funkcja „Podziel ekran” systemu Android. W dolnym menu nawigacyjnym znajdują się 3 przyciski:

1. U dołu po lewej: znak „?” przycisk przejdzie w lewo i ponownie pokaże początkowy ekran startowy (#0).
2. Dolny środek: przycisk resetowania (wygląda jak „@” ze strzałką) pozwoli Ci rozpocząć nową grę lub nowy mecz w dowolnym momencie gry, wystarczy nacisnąć dolny środkowy przycisk „Resetuj”. Spowoduje to również wyświetlenie okna powiadomienia, które poprosi Cię o rozpoczęcie nowej gry lub nowego meczu.
3. Na dole po prawej: przycisk '->' przejdzie w prawo i pokaże ekran przeglądu wszystkich meczów (#2).

Krok 4: Ekran 2 (mecze)

Chociaż bardzo prosty w wizualnym makijażu, ten ekran zawiera ciekawszy kod niż inne ekrany. Ale zanim przejdziemy do tego, zobaczmy, co robi ekran:

Pod etykietami „Drużyna 1” i „Drużyna 2” znajduje się lista wszystkich meczów i ich łączne wyniki. Jest to posortowana lista z „ostatnim rozegranym meczem” na górze i „najstarszym rozegranym meczem” na dole.

Pośrodku, pomiędzy „Drużyna 1” a „Drużyna 2”, znajduje się przycisk, za pomocą którego można sortować listę meczów w kolejności rosnącej lub malejącej. Ikona zmieni się w zależności od wybranego kierunku sortowania.

Aby przejść do innych ekranów, możesz także „przesunąć palcem w lewo”, aby wyświetlić ekran główny nr 1 lub „przesuń palcem w prawo”, aby wyświetlić ekran ustawień nr 3.

Wreszcie na dole znajduje się pasek menu nawigacji. Jest to zawsze umieszczane na dole ekranu, bez względu na jego rozmiar. Nawet jeśli używana jest funkcja „Podział ekranu” Androida (jak pokazano na Zdjęciu #2). W dolnym menu nawigacyjnym znajdują się 3 przyciski:

1. U dołu po lewej: znak „?” przycisk przejdzie w lewo i ponownie pokaże początkowy ekran startowy (nr 0).
2. Dolny środek: przycisk resetowania (wygląda jak „@” ze strzałką) pozwoli Ci rozpocząć nową grę lub nowy mecz w dowolnym momencie gry, wystarczy nacisnąć dolny środkowy przycisk „Resetuj”. Spowoduje to również wyświetlenie okna powiadomienia, które poprosi Cię o rozpoczęcie nowej gry lub nowego meczu.
3. Na dole po prawej: przycisk '->' przejdzie w prawo i pokaże ekran przeglądu wszystkich meczów (#2).

Centrowanie listy meczów na ekranie:

Chciałem wyświetlić listę dopasowań wyśrodkowaną na ekranie z dzielnikiem „-” w środku. Teraz, ponieważ liczba meczów, które drużyna wygrała, może składać się z jednej lub więcej cyfr, a rzeczywista nazwa każdego zespołu może mieć różny rozmiar, nie możemy po prostu umieścić tego na jednej liście. To wszystko wyglądałoby mniej więcej tak:

Drużyna 1 0 - 1 Drużyna 2

Foo 1 - 42 FooBar

Dlatego etykieta rozdzielacza „-” musi być wyśrodkowana. Z wyrównaniem „Nazwa zespołu 1” i „Wynik zespołu 1” do lewej strony dzielnika „-”. A „Wynik zespołu 2” i „Nazwa zespołu 2” wyrównane do lewej strony dzielnika „-”. Więc kończymy tak:

"Drużyna 1 0" "-" "1 drużyna 2" "Foo 1" "-" "42 FooBar"

A ponieważ nie wiem, jak długa będzie nasza lista dopasowań, umieszczam wszystkie „Nazwa zespołu 1” i „Wynik zespołu 1” w tej samej etykiecie formatu HTML, a po każdym dopasowaniu wstawiam a i umieszczam następny w nowej linii.

Przygotuj rzeczy do sortowania:

Jak wspomniano w kroku The Data(base) Design, mogę przechowywać tylko jedną wartość. Zapisałem więc wartości „Nazwa zespołu 1”, „Wynik zespołu 1”, „Wynik zespołu 2” i „Nazwa zespołu 2” oddzielone niewizualnym znakiem kontrolnym „\t”. Teraz muszę najpierw usunąć je z bazy danych (jak pokazano na Zdjęciu #3).

Fragment kodu pokazuje, że najpierw sprawdzamy, czy ustawiona jest flaga Debug (odbywa się to na każdym ekranie tej aplikacji. Następnie tworzy listę par klucz(y/wartość), które musimy zignorować podczas przechodzenia przez bazę danych. Interesują nas tylko dane „Dopasuj”, nic więcej. Następnie przechodzimy przez bazę danych, ignorując wszystkie klucze na liście ignorowanych i tworzymy nową listę z 2 wartościami:

1. Klucz podstawowy (pamiętaj, że jest to liczba wskazująca numer dopasowania, zaczynając od dopasowania nr 1)
2. Ciąg zawierający wartości dla „Nazwa zespołu 1”, „Wynik zespołu 1”, „Wynik zespołu 2” i „Nazwa zespołu 2”

Następnie przechodzimy przez Listę i tworzymy nową Listę List, w której poszczególne pola są podzielone na pojedyncze elementy (jak pokazano na Rysunku #4):

DataToSort -> Indeks listy 1 -> Indeks listy 1 (numer PK)

-> Indeks listy 2 (Nazwa zespołu 1) -> Indeks listy 3 (Wynik zespołu 1) -> Indeks listy 4 (Wynik zespołu 2) -> Indeks listy 5 (Nazwa zespołu 2) -> Indeks listy 2 -> Indeks listy 1 (Numer PK) -> Indeks listy 2 (Nazwa zespołu 1) -> … -> …

Następnie pokazujemy informacje debugowania, jeśli flaga Debug ma wartość True. A teraz możemy wreszcie posortować naszą Listę (List).

BubbleSort* lista list:

Zdjęcie nr 5 pokazuje pełną listę do BubbleSort* naszej listy list. Algorytm ten może być oczywiście używany dla dowolnej listy list, bez względu na to, ile indeksów jest obecnych.

* Więcej informacji o tym, jak prosty jest algorytm BubbleSort na YouTube.

Krok 5: Ekran 3 (Ustawienia)

Ten ekran wygląda na bardzo zajęty i ma wiele elementów wizualnych. Ale w końcu jest tylko 5 przełączników Toggle:

1. „Punktacja Freda”: Jeśli jest włączona, zmienia zachowanie punktacji i decyduje zwycięzca na podstawie różnicy 2 punktów na 13, a nie tylko pierwszego, który osiągnie 13.
2. 'Bluetooth Pairing': (jeżeli jest włączone) jeśli jest włączone 'On' umożliwia parowanie tej aplikacji z zewnętrznym wyświetlaczem Petanque.
3. „Zresetuj mecze”: Jeśli jest włączony, zresetuje/usunie wszystkie mecze i rozpocznie się od meczu 1.
4. „Zresetuj bazę danych”: Po włączeniu spowoduje usunięcie/zresetowanie wszystkich meczów i wszystkich innych ustawień aplikacji do oryginalnych ustawień, w tym bieżącego wyniku, meczów, nazw drużyn, ustawień debugowania, kolejności sortowania, ustawień Bluetooth (jeśli są włączone) itp..
5. „Debugowanie”: po włączeniu opcji „Włączone” informacje o debugowaniu będą wyświetlane w całej aplikacji w nawiasach kwadratowych „”. Rzeczy takie jak „Całkowita liczba rekordów, całkowita liczba zmiennych, bieżący numer meczu, numer PK gry itp.

Wreszcie na dole znajduje się pasek menu nawigacji. Jest to zawsze umieszczane na dole ekranu, bez względu na jego rozmiar. Nawet jeśli używana jest funkcja „Podziel ekran” systemu Android lub ekran jest po prostu wyższy niż ekran może wyświetlać ze względu na liczbę elementów na ekranie. W takim przypadku zawsze możesz przewijać, przesuwając w górę i w dół. To dolne menu nawigacyjne ma tylko 1 przycisk:

Dolny lewy: przycisk '<-' przejdzie w lewo i pokaże początkowy ekran przeglądu wszystkich meczów (#2)

Krok 6: Ekran 0 (Informacje)

Ostatni ekran. Tylko informacje, nic więcej.

Ten ekran jest wyświetlany przy pierwszym uruchomieniu tej aplikacji. Po tym nigdy nie zostanie ponownie wyświetlony, chyba że zdecydujesz się to zrobić, naciskając „?” na ekranie głównym #1.

Dolny pasek menu nawigacji ma tylko 1 przycisk, co prowadzi z powrotem do ekranu głównego #1.

Krok 7: Oprogramowanie i/lub kod źródłowy

Wreszcie.

Aplikację można pobrać z tej lokalizacji Dysku Google.

Możesz pobrać kod z wpisu Galerii MIT App Inventor dla Pentaque (zdjęcie nr 1). Umożliwi to zapisanie projektu na własnym koncie MIT App Inventor (możesz zmienić jego nazwę na dowolną, jaką chcesz). Stamtąd możesz zobaczyć cały kod w edytorze bloków, ekrany w edytorze projektanta oraz wszystkie media i zasoby używane w tym projekcie.

Możesz także pobrać kod źródłowy (plik.aia, który w rzeczywistości jest plikiem.zip) z tej lokalizacji na Dysku Google.