Aplikasi Penyimpanan Skor Petanque / Jeu-de-Boules: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54

Ini adalah aplikasi penyimpanan skor Petanque (kadang-kadang disebut sebagai Jeu de Boules) untuk Android. Aplikasi ini dapat digunakan apa adanya dan berfungsi penuh. Atau dapat digunakan dalam kombinasi dengan tampilan Matriks Petanque [instruksi terpisah]. Bagian proyek ini mudah karena tidak memerlukan perangkat keras, hanya perangkat lunak yang tersedia gratis.

Perlengkapan

1. Ponsel yang kompatibel dengan Android (lebih disukai)
2. Perangkat dengan akses browser internet, sebaiknya komputer dengan mouse untuk pekerjaan pengkodean dan desain
3. Akun dengan MIT App Inventor (Gratis)
4. Paket gambar sederhana mis. Pixlr atau Gimp (semuanya Gratis)
5. Situs web sumber daya ikon mis. Ikon UI Material atau Material.io (semuanya Gratis)

Perangkat Lunak dan Kode Sumber:

Anda dapat menemukan tautan ke aplikasi Petanque Aktual di bagian bawah halaman ini. Di sini Anda juga dapat menemukan tautan ke kode sumber lengkap (maaf untuk ini, tetapi Instructables tidak mengizinkan saya mengunggah file.aia…).

Langkah 1: Anatomi dan Navigasi Aplikasi

Desain dan navigasi aplikasi ini cukup sederhana. Ada 4 layar total:

1. Layar utama #1 (di mana kami menghabiskan sebagian besar waktu kami untuk mencatat skor)
2. Layar pertandingan #2 (tempat kami menemukan daftar semua pertandingan dan skor yang dimainkan)
3. Layar pengaturan #3 (pengaturan untuk aplikasi, tugas administratif, debug, dll.)
4. Tentang layar #0 (tentang, logo, dan di mana mendapatkan instruksi pembuatan yaitu halaman web INI)

Tata letak layar dan posisi tombol telah dioptimalkan untuk penggunaan 1 tangan dan 1 jari (ibu jari). Tombol-tombol di menu navigasi bawah membawa Anda ke layar di sebelah kanan atau kiri layar saat ini. Jadi tombol 0 membawa Anda ke Tentang layar #0. Dan tombol #1 membawa Anda kembali ke layar Utama #1 dll., usw.

Jernih? Daripada mari kita lanjutkan…

Langkah 2: Desain Data(basis)

Sekarang, sebelum kita membuat layar pertama, kita membutuhkan tempat untuk menyimpan semua data yang akan digunakan oleh aplikasi ini. Untuk ini kita akan menggunakan formulir paling sederhana yang ditawarkan oleh MIT App Inventor: TinyDB. Ini agak terbatas karena hanya dapat menyimpan pasangan Kunci/Nilai, tetapi dengan sedikit bantuan dan beberapa trik kita dapat membuat ini melakukan semua hal yang kita inginkan.

Ada 2 jenis nilai yang akan kita simpan:

• Kami akan menyimpan 10 nilai kunci/nilai sederhana di seluruh aplikasi (seperti yang ditunjukkan pada fungsi 'CreateIgnoreList' di atas).
• Dan kunci/nilai yang lebih kompleks menyimpan semua data game yang telah selesai dalam satu string dengan kunci/nilai 'CurrentMatch' bertindak sebagai Kunci Utama * (seperti yang ditunjukkan pada fungsi 'SaveScore' di atas). Bidang ini dalam satu pasangan kunci/nilai ini dipisahkan oleh karakter kontrol non-visual '\t'. Karakter kontrol ini akan memungkinkan kita di layar Matches #2 untuk mengambil semua nilai ke dalam komponen yang terpisah dan menampilkan serta mengurutkannya. Tetapi lebih lanjut tentang itu di bagian Layar 2 (cocok).

* Informasi lebih lanjut tentang cara Membuat PrimaryKey untuk TinyDb di AppInventor di YouTube.

Langkah 3: Layar 1 (Utama)

Ini adalah layar 'pekerja keras' kami di mana kami akan menghabiskan sebagian besar waktu sebagai pengguna aplikasi. Ini juga merupakan titik awal untuk aplikasi MIT App Inventor kami.

Seperti yang Anda lihat dari (gambar #1) di atas meskipun layar dalam pengaturan sederhana, ada beberapa interaktivitas tersembunyi, penanganan kesalahan, pengguliran, layar terpisah, menu mengambang, gerakan menggesek, menjaga dari kesalahan, input yang salah dan bahkan pemulihan dari crash. Untuk semua fitur ini, silakan lihat kode sumber terperinci untuk setiap layar. Jadi apa yang dapat Anda lakukan di sini:

• Tekan 'Tim 1' dan Anda akan mendapatkan Notifikasi yang memungkinkan Anda untuk mengubah nama 'Tim 1'. Setelah diubah, ini akan mengubah 'Tim 1' ini menjadi nama yang telah Anda pilih. Ini juga merupakan nama yang akan digunakan untuk mencerminkan skor 'permainan' dan 'pertandingan' Anda (di layar berikutnya).
• 'Skor Tim 1' dan 'skor Tim 2' berubah berdasarkan tombol '+' dan '-' yang ditekan di bagian bawah masing-masing tim. Jika skor 0 dan '-' ditekan, sinyal suara dan visual diberikan tetapi skor tetap 0 (tentu saja).
• Jika 'skor' mencapai 13, beberapa hal terjadi: sinyal visual diberikan, jendela notifikasi menunjukkan hasil (gambar #2) dan memberi Anda opsi untuk memulai permainan baru atau pertandingan baru (dan tentu saja pertandingan baru). permainan). Namun jika Anda telah memilih bukan skor Petanque klasik tetapi skor selisih 2 poin (yang dapat dipilih di layar pengaturan #3) daripada bergantung pada perbedaan antara dua tim, satu akan dinyatakan sebagai pemenang (seperti yang ditunjukkan pada gambar #3).
• 'Skor' dalam 'pertandingan' saat ini ditampilkan di tengah layar antara skor 'Tim 1' dan 'Tim 2'. Dan ini akan terus ditabulasi sampai 'pertandingan' baru dimulai.
• Untuk menavigasi ke layar lain, Anda juga dapat 'menggesek ke Kiri' untuk menampilkan layar Tentang #0 atau 'menggesek ke Kanan' untuk menampilkan layar Kecocokan #2.

Terakhir di bagian bawah adalah menubar navigasi. Ini selalu diposisikan di bagian bawah layar, tidak peduli berapa ukuran layarnya. Bahkan jika fungsi 'Layar terpisah' Android digunakan. Menu navigasi bawah memiliki 3 tombol:

1. Kiri bawah: '?' tombol akan ke kiri dan menampilkan layar Tentang start-up awal (#0) lagi.
2. Bawah-tengah: tombol reset (yang terlihat seperti '@' dengan panah) akan memungkinkan Anda untuk memulai permainan baru atau pertandingan baru di 'kapan saja' dalam permainan cukup tekan tombol 'Reset' tengah bawah. Ini juga akan menampilkan jendela notifikasi yang akan meminta Anda untuk memulai permainan baru atau pertandingan baru.
3. Kanan bawah: Tombol '->' akan ke kanan dan menampilkan ikhtisar semua layar Pertandingan (#2).

Langkah 4: Layar 2 (Cocok)

Meskipun sangat sederhana dalam riasan visual, layar ini memiliki kode yang lebih menarik di dalamnya daripada layar lainnya. Tapi sebelum kita membahasnya, mari kita lihat apa yang dia lakukan di layar:

Di bawah label 'Tim 1' dan 'Tim 2' adalah daftar semua Pertandingan dan total skor masing-masing. Ini adalah daftar yang diurutkan dengan 'pertandingan terakhir yang dimainkan' di bagian atas dan 'pertandingan yang paling lama dimainkan' di bagian bawah.

Di tengah, antara 'Tim 1' dan 'Tim 2', terdapat tombol yang dapat digunakan untuk mengurutkan daftar Kecocokan dalam urutan Ascending atau Descending. Ikon akan berubah tergantung pada arah pengurutan yang dipilih.

Untuk menavigasi ke layar lain, Anda juga dapat 'swipe Left' untuk menampilkan layar Utama #1 atau 'swipe Right' untuk menampilkan layar Settings #3.

Terakhir di bagian bawah adalah menubar navigasi. Ini selalu diposisikan di bagian bawah layar, tidak peduli berapa ukuran layarnya. Bahkan jika fungsi 'Layar terpisah' Android digunakan (seperti yang ditunjukkan pada Gambar #2). Menu navigasi bawah memiliki 3 tombol:

1. Kiri bawah: '?' tombol akan ke kiri dan menampilkan layar Tentang start-up awal (#0) lagi.
2. Bawah-tengah: tombol reset (yang terlihat seperti '@' dengan panah) akan memungkinkan Anda untuk memulai permainan baru atau pertandingan baru di 'kapan saja' dalam permainan cukup tekan tombol 'Reset' tengah bawah. Ini juga akan menampilkan jendela notifikasi yang akan meminta Anda untuk memulai permainan baru atau pertandingan baru.
3. Kanan bawah: Tombol '->' akan mengarah ke kanan dan menampilkan ikhtisar semua layar Pertandingan (#2).

Memusatkan daftar Pertandingan di layar:

Saya ingin menampilkan daftar Pertandingan yang berpusat di layar dengan pembagi '-' sebagai pusatnya. Nah, karena jumlah permainan yang dimenangkan oleh sebuah tim bisa 1 digit atau lebih dan nama sebenarnya dari masing-masing tim bisa berbeda ukurannya, kita tidak bisa memasukkan ini ke dalam 1 daftar saja. Semuanya akan terlihat seperti ini:

Tim 1 0 - 1 Tim 2

Foo 1 - 42 FooBar

Jadi label untuk pembagi '-' harus di tengah. Dengan 'Nama Tim 1' dan 'Skor Tim 1' sejajar di sebelah kiri pembatas '-'. Dan 'Skor Tim 2' dan 'Nama Tim 2' rata kiri di sebelah kanan pembatas '-'. Jadi kita berakhir seperti ini:

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

Dan karena saya tidak tahu berapa lama daftar Kecocokan kami, saya memasukkan semua 'Nama Tim 1' dan 'skor Tim 1' ke dalam Label Format HTML yang sama dan setelah setiap Kecocokan saya memasukkan a dan meletakkan yang berikutnya di NewLine.

Siapkan barang-barang untuk disortir:

Seperti yang disebutkan dalam langkah The Data(base) Design, saya hanya dapat menyimpan satu nilai. Jadi saya menyimpan nilai 'Nama Tim 1', 'Skor Tim 1', 'Skor Tim 2' dan 'Nama Tim 2' dipisahkan oleh karakter kontrol non-visual '\t'. Sekarang saya harus terlebih dahulu mengeluarkannya dari database (seperti yang ditunjukkan pada Gambar #3).

Cuplikan kode menunjukkan bahwa pertama-tama kita memeriksa apakah flag Debug telah disetel (ini dilakukan di setiap layar aplikasi ini. Selanjutnya, ia membuat daftar pasangan Kunci/Nilai) yang perlu kita abaikan saat menelusuri database. Kami hanya tertarik pada data 'Match', tidak ada yang lain. Kami kemudian mengulang database, mengabaikan semua Keys pada Ignorelist dan membuat daftar baru dengan 2 nilai:

1. PrimaryKey (ingat ini adalah Angka yang menunjukkan nomor Match, dimulai dengan Match #1)
2. String yang berisi nilai untuk 'Nama Tim 1', 'Skor Tim 1', 'Skor Tim 2', dan 'Nama Tim 2'

Kami kemudian pergi melalui Daftar dan membuat Daftar Daftar baru di mana masing-masing bidang dibagi menjadi item individual (seperti yang ditunjukkan pada Gambar #4):

DataToSort -> Daftar indeks 1 -> Daftar indeks 1 (nomor PK)

-> Daftar indeks 2 (Nama tim 1) -> Daftar indeks 3 (Skor tim 1) -> Daftar indeks 4 (Skor tim 2) -> Daftar indeks 5 (Nama tim 2) -> Daftar indeks 2 -> Daftar indeks 1 (Nomor PK) -> Daftar indeks 2 (Nama tim 1) -> … -> …

Setelah itu kami menampilkan beberapa informasi debug jika flag Debug adalah True. Dan sekarang kami akhirnya dapat mengurutkan Daftar kami (Daftar).

BubbleSort* daftar Daftar:

Gambar #5 menunjukkan daftar lengkap ke BubbleSort* Daftar Daftar kami. Algoritma ini tentu saja dapat digunakan untuk berbagai ukuran Daftar Daftar tidak peduli berapa banyak Indeks yang ada.

* Informasi lebih lanjut tentang betapa sederhananya algoritme BubbleSort di YouTube.

Langkah 5: Layar 3 (Pengaturan)

Layar ini terlihat sangat sibuk dan memiliki banyak elemen desain visual. Tetapi pada akhirnya hanya ada 5 sakelar Toggle:

1. 'Fred Scoring': Jika diaktifkan 'On' itu mengubah perilaku penilaian dan memutuskan pemenang berdasarkan perbedaan 2 poin di 13 dan bukan hanya yang pertama mencapai 13.
2. 'Pemasangan Bluetooth': (bila diaktifkan) jika diaktifkan 'Aktif' memungkinkan pemasangan dengan aplikasi ini dengan Tampilan Petanque eksternal.
3. 'Reset Matches': Jika diaktifkan 'On' itu akan Reset/menghapus semua pertandingan dan mulai dengan Match 1.
4. 'Reset DB': Jika diaktifkan 'On' itu akan Menghapus/Mengatur Ulang semua Kecocokan dan semua pengaturan aplikasi lainnya kembali ke pengaturan awal termasuk skor saat ini, kecocokan, nama tim, pengaturan debug, urutan penyortiran, pengaturan luetooth (bila diaktifkan) dll.
5. 'Debug': Jika diaktifkan 'On', informasi Debug akan ditampilkan di seluruh aplikasi di antara tanda kurung siku ''. Hal-hal seperti 'Jumlah total catatan, Jumlah total variabel, Nomor pertandingan saat ini, nomor Game PK, dll.

Terakhir di bagian bawah adalah menubar navigasi. Ini selalu diposisikan di bagian bawah layar, tidak peduli berapa ukuran layarnya. Bahkan jika fungsi 'Layar terpisah' Android digunakan atau layar hanya lebih tinggi dari yang dapat ditampilkan layar karena jumlah item di layar. Dalam hal ini, Anda selalu dapat menggulir dengan menggesekkan ke atas dan ke bawah. Menu navigasi bawah ini hanya memiliki 1 tombol:

Kiri bawah: tombol '<-' akan ke kiri dan menunjukkan tampilan awal ikhtisar semua layar Pertandingan (#2)

Langkah 6: Layar 0 (Tentang)

Layar terakhir. Sekedar info, tidak lebih.

Layar ini ditampilkan pertama kali aplikasi ini dijalankan. Setelah itu tidak akan pernah ditampilkan lagi, kecuali jika Anda memilih untuk melakukannya dengan menekan '?' tombol di layar Utama #1.

Menubar navigasi bawah hanya memiliki 1 tombol dan ini membawa Anda kembali ke layar Utama #1.

Langkah 7: Perangkat Lunak Dan/atau Kode Sumber

Akhirnya.

Anda dapat mengunduh Aplikasi dari lokasi Google Drive ini.

Anda dapat mengunduh kode dari entri Galeri MIT App Inventor untuk Pentaque (gambar #1). Ini akan memungkinkan Anda untuk menyimpan proyek ke akun MIT App Inventor Anda sendiri (Anda dapat mengganti namanya menjadi apa pun yang Anda inginkan). Dari sana Anda dapat melihat semua kode di editor Blok, layar di editor Desainer dan semua media dan sumber daya yang digunakan untuk proyek ini.

Anda juga dapat mengunduh kode sumber (file.aia, yang sebenarnya adalah file.zip) dari lokasi Google Drive ini.