Sports Multi timer Assistant
1.0.0
Proyek Stream Three: Pengembangan Pusat Data - Code Institute.
Proyek ini dibuat menggunakan Flask Microframework, dan dapat digunakan sebagai stopwatch manual untuk menghitung waktu beberapa atlet dalam renang dan lari. Tujuan dari aplikasi ini adalah untuk meningkatkan efisiensi dalam pengaturan waktu olahraga dengan mengurangi jumlah orang yang mencatat waktu secara terpisah dan langsung menyimpan waktu, dibandingkan dengan menyimpan dokumentasi tertulis.
APLIKASI INI HANYA UNTUK PENGGUNAAN PENDIDIKAN. APLIKASI INI BUKAN UNTUK PENGGUNAAN KOMERSIAL.
Demo langsung proyek ini dapat ditemukan di sini. Aplikasi ini dihosting di Heroku. Waktu disimpan di MongoDB.
Ide untuk aplikasi Timing Assistant ini datang dari pengalaman saya berenang sepanjang masa kecil saya. Saya memperhatikan bahwa perlu ada sejumlah orang yang terlibat dalam proses pengaturan waktu, karena touchpad di pool tidak selalu menghasilkan waktu yang akurat atau dapat dibaca karena berbagai alasan. Selain itu, pelatih dan atlet tidak dapat melihat waktu terakhir atau pembagian waktu hingga pertemuan selesai, kecuali Anda memiliki beberapa orang yang mencatat waktu di dek untuk setiap jalur yang mencatat waktunya di papan klip.
Saya melihat peluang ini untuk membuat sebuah aplikasi yang akan mengurangi jumlah orang yang terlibat dalam proses pengaturan waktu, dengan harapan dapat meningkatkan efisiensi pertemuan dan umpan balik kepada para atlet dan pelatih. Aplikasi ini dapat dioptimalkan untuk olahraga apa pun, dan versi ini berfungsi dengan renang dan lari.
Pelatih dan pengatur waktu sama-sama dapat memilih olahraga, pertemuan, acara, heat, dan nomor jalur yang semuanya membantu mereka melacak apa yang terjadi dalam pertemuan. Hal ini juga memungkinkan mereka untuk memberikan umpan balik instan kepada atletnya setelah perlombaan, karena waktu muncul setelah Anda menyimpannya dan kemudian menekan 'waktu lihat'. Saya juga ingin memastikan mereka dapat melihat hasil kumulatif dari pertemuan tersebut, bukan hanya satu acara dalam satu waktu.
Tidak ada tema yang digunakan untuk desain ini, desain modern dipilih karena dengan banyak pengatur waktu dan data pada suatu halaman, dapat terlihat berantakan dan tidak teratur. Saya tidak menginginkan hal ini, jadi meskipun saya menginginkan pengatur waktu, waktu, dan opsi acara pada satu halaman, saya pikir membagi halaman menjadi tiga bagian secara vertikal akan menjadi cara terbaik untuk melakukan hal ini, sehingga menciptakan perbedaan mencolok antara setiap halaman ketiga.
Timing Assistant dibuat menggunakan Flask Microframework dengan Python dengan database NoSQL (MongoDB) di backend, dengan HTML, CSS, Javascript, dan jQuery di frontend dan untuk fungsionalitas stopwatch, terhubung ke backend dengan AJAX.
Di halaman beranda aplikasi, pengguna memasukkan olahraga yang ingin mereka ikuti waktunya, nama tim, nama pengguna, dan nama pertemuan. Tindakan ini membawa mereka ke halaman stopwatch, di mana mereka kemudian dapat memilih acara dan acara panas yang ingin mereka ikuti. Pengguna dapat menghitung waktu hingga tiga jalur dan mengambil split untuk ketiga jalur tersebut. Pengguna harus menghentikan pengatur waktu utama secara manual setelah ketiga pengatur waktu kecil dihentikan, karena pengatur waktu tersebut disetel satu per satu. Namun hal ini akan sangat berguna jika pelatih ingin mengetahui berapa lama lomba berlangsung dan membandingkan waktu perenangnya dengan waktu perenang terakhir. Waktu pengatur waktu utama tidak akan disimpan ke database.
Begitu mereka mengeklik "kirim", acara dan acara panas akan muncul. Mereka kemudian dapat memulai penghitungan waktu hingga tiga jalur dengan menekan 'MULAI' pada stopwatch utama. Ini akan memulai keempat stopwatch, namun hanya tiga stopwatch terbawah yang akan disimpan dalam database. Ada opsi untuk mengumpulkan waktu split untuk setiap jalur satu per satu dengan tombol 'SPLIT'. Setiap pengatur waktu dapat dihentikan dan dimulai satu per satu, dengan pengatur waktu utama mengontrol semua stopwatch (mulai, berhenti, dan reset).
Dengan mengklik 'SIMPAN WAKTU', waktu akan disimpan dengan menggunakan panggilan AJAX di file Javascript untuk memasukkan waktu ke Flask, dengan Flask terhubung ke MongoDB. Setelah waktu disimpan, dengan mengklik 'LIHAT WAKTU', waktu akan muncul di bawah stopwatch.
Data juga akan disimpan tanpa peristiwa atau panas yang ditentukan (bidang ini akan kosong ketika waktu dilihat). Hal ini dapat berguna jika pelatih ingin menggunakan stopwatch dalam latihan dan bukan dalam situasi pertemuan.
Saya ingin memberikan kesempatan kepada para pelatih untuk mengunduh data dalam format PDF atau format file lainnya. Dalam jangka panjang, hal ini akan memungkinkan mereka untuk menyimpan semua pengaturan waktu manual untuk catatan mereka tanpa harus bergantung pada data tulisan tangan atau mengandalkan situs ini setiap kali mereka ingin kembali dan melihat pertemuan lama.
Saya juga ingin mengizinkan pelatih untuk memilih jumlah stopwatch yang ingin mereka lihat berdasarkan jumlah atlet di setiap babak. Saat ini, Anda hanya dapat mencatat waktu untuk 3 atlet sekaligus, dan Anda tidak dapat memilih waktu yang kurang dari 3 atlet.
Saya juga ingin menerapkan 'mode latihan' dan 'mode pertemuan' yang memungkinkan pengaturan waktu yang lebih canggih untuk pertemuan dan latihan. Mode Meet akan menciptakan lebih banyak batasan dalam memilih acara atau babak penyisihan, dan akan memungkinkan pelatih untuk memilih berapa banyak jalur yang ingin mereka ikuti. Mode latihan akan memungkinkan pelatih membuat catatan waktu yang mereka simpan (untuk latihan tertentu, dll), tanpa harus menentukan acara atau babak.
Semua pengujian untuk proyek ini dilakukan secara manual. Formulir di laman landas memiliki atribut wajib pada tag masukan untuk mencegah pengguna tidak mengisi kolom di formulir, karena hal ini akan mengakibatkan kesalahan 400, karena rute aplikasi Flask bergantung pada masukan ini.
Fungsi Ajax dan tombol Hemat Waktu diuji melalui konsol dan memverifikasi bahwa data telah muncul dengan format yang benar di MongoDB. Data yang dikumpulkan dari pengatur waktu dan struktur data yang dimaksudkan juga diuji.
Penghematan waktu satu per satu dengan satu dokumen per jalur:
Waktu untuk jalur yang ditampilkan dalam dokumen yang sama (catatan: untuk tujuan pengujian, hanya dua jalur yang disimpan di sini untuk memastikan bahwa dua jalur akan muncul dalam dokumen yang sama.):
Struktur Data yang Benar:
Pengujian stopwatch juga dilakukan secara manual untuk memastikan bahwa tombol reset utama mengatur ulang stopwatch dan menghapus pemisahan dari semua pengatur waktu, sementara masing-masing stopwatch hanya menghapus waktu dan pembagiannya sendiri. Selain itu, ini juga diuji untuk fungsi start/stop, karena stopwatch utama mengontrol semua stopwatch, sedangkan stopwatch individual hanya mengontrol fungsi start/stopnya sendiri.
Semua jalur Flask juga diuji untuk memastikan bahwa semua tautan berfungsi dan dapat menangani nilai masukan apa pun yang tidak biasa, dan akan menampilkan masukan dengan benar melalui Jinja dalam file HTML.
Selama proses pengujian, saya menyadari bahwa ada kemungkinan dua pengguna memiliki nama pertemuan atau nama klub yang sama, sehingga memungkinkan pengguna tersebut menemukan data orang lain. Jadi, untuk melihat waktu di template, saya telah menyertakan yang berikut ini untuk memastikan bahwa tiga kolom input di halaman arahan harus cocok untuk menampilkan waktu yang sesuai. Hal ini memerlukan nama tim, nama pengguna, dan nama pertemuan yang benar agar sesuai untuk mencegah penyimpanan silang atau tampilan silang waktu.
{% if time.team == team %}
{% if time.username == username %}
{% if time.meet == meets %}
Perpecahan untuk setiap jalur awalnya muncul dalam format berikut:
split: ["00:02.2300:01.45"]
Namun, saya ingin mereka muncul dalam daftar seperti ini:
split: ["00:02.23", "00:01.45"]
Jadi saya harus menerapkan pemahaman daftar untuk memisahkan string ini menjadi beberapa string dalam daftar (jika lebih dari satu pemisahan diambil untuk satu jalur) setiap 9 karakter.
Dalam HTML timer_page.html, formulir yang mengirimkan data untuk fungsi AJAX sepertinya memiliki tag akhir yang menyimpang, namun, diperlukan untuk mencakup semua data waktu terakhir, pemisahan, dan jalur untuk menyimpan waktu ke MongoDB . Karena gaya dan elemen lain yang perlu ditampilkan, bentuknya memang terlihat tidak serasi dengan elemen lainnya. Selain itu, jika dilihat dari HTML, ada tag yang kosong, namun di sinilah waktu split dimasukkan ke dalam HTML menggunakan jQuery.
Saat menyimpan waktu, jika Anda memilih jalur yang sama untuk setiap pengatur waktu (jalur 1, misalnya), hanya satu dari 1 jalur yang akan muncul di waktu tampilan. Namun, Anda harus memilih jalur, karena Anda tidak dapat melihat waktu yang telah Anda simpan tanpa jalur tersebut karena sifat struktur datanya. Drop-down jalur diatur untuk menyimpan di jalur 1, jalur 2, dan jalur 3 secara default jika pengguna tidak menentukan jalur. Saya berharap untuk menerapkan validasi yang akan melarang penghematan waktu jika pengguna memilih nomor jalur yang sama untuk dua jalur dalam cuaca panas.
Fungsi Javascript yang menjalankan stopwatch dimodifikasi dari Coding dengan tutorial stopwatch Sara untuk aplikasi ini. Beberapa HTML juga dimodelkan berdasarkan contohnya, namun dimodifikasi agar sesuai dengan gaya, banyak tombol, pemisahan, dan jalur.
Untuk JavaScript, fungsi setel ulang telah dimodifikasi untuk tombol setel ulang guna menyetel ulang semua stopwatch alih-alih menyegarkan halaman, dan tombol setel ulang individual untuk setiap stopwatch kecil telah dihapus karena ini merupakan fitur yang tidak diperlukan untuk UX proyek ini. Fungsi split juga ditambahkan. Fungsi Mulai/Berhenti telah dimodifikasi untuk perubahan gaya pada tombol menggunakan jQuery. Stopwatch utama ditambahkan untuk UX sehingga pelatih dapat melihat total waktu yang telah berlalu beserta waktu individu, mirip dengan papan skor renang. Tombol Simpan untuk meneruskan nilai ke Flask dan ke MongoDB ditambahkan menggunakan Ajax.
Fungsi Ajax dimodelkan setelah posting ini dari Stack Overflow dan dimodifikasi agar sesuai dengan proyek ini dengan melihat pola penggunaan dan sintaksis Ajax lainnya. Sebuah preventDefault ditambahkan untuk mencegah halaman dimuat ulang ketika panggilan AJAX dilakukan.
Rekursi di Jinja digunakan untuk mengulangi kamus bersarang dengan Python untuk merender waktu dan memenuhi data dengan benar dengan memastikan bahwa semua jalur dilewati dan ditampilkan. Metode dari Stack Overflow ini diikuti sebagai pedoman, dan dimodifikasi sesuai sifat struktur data saya.
Fungsi javascript untuk stopwatch dicoba untuk difaktorkan ulang sehingga pengguna dapat memutuskan berapa banyak stopwatch yang ingin ditampilkan di layar berdasarkan jumlah jalur yang dipilih.
var stopwatches = [ ] ;
var i ;
for ( i = 0 ; i <= 1 ; i ++ ) {
var stopwatch = new timing ( "timerLabel" + i , "start" + i , "splitLabel" + i ) ;
stopwatches . push ( stopwatch ) ;
console . log ( i ) ;
document . getElementById ( "start" + i ) . onclick = function ( ) {
stopwatches [ i ] . start ( ) ;
}
document . getElementById ( "reset" + i ) . onclick = function ( ) {
stopwatches [ i ] . reset ( ) ;
}
document . getElementById ( "split" + i ) . onclick = function ( ) {
stopwatches [ i ] . split ( ) ;
}
console . log ( stopwatches ) ;
} Ketika mencoba menulis ini dalam perulangan for seperti ini, stopwatches[i].start() tidak akan membaca i sebagai variabel yang dapat berubah, namun, ketika dikodekan dengan keras, tidak ada masalah:
document . getElementById ( "reset" + i ) . onclick = function ( ) {
stopwatches [ 0 ] . reset ( ) ;
}
document . getElementById ( "split" + i ) . onclick = function ( ) {
stopwatches [ 0 ] . split ( ) ;
}Saya mencoba melakukan pendekatan dengan cara yang berbeda, yang melibatkan pernyataan if agar stopwatch yang sesuai muncul.
Mencoba meneruskan i melalui suatu fungsi sebagai argumen yang diambil dari perulangan for di atas, namun tidak berhasil:
function chooseNumberOfStopwatches ( i ) {
if ( i == 1 ) {
stopwatches_one . start ( ) ;
}
else if ( i == 2 ) {
stopwatches_one . start ( ) ;
stopwatches_two . start ( ) ;
} else {
console . log ( 'else' ) ;
}
}Jika Anda tertarik untuk mengkloning repositori ini, untuk menyiapkan dan menginstal semua yang ada di requiremen.txt, jalankan perintah berikut di terminal:
$ sudo pip3 -r install requirements.txt
Harap dicatat bahwa saya menggunakan Cloud9 untuk proyek ini, jadi jika Anda menggunakan editor yang berbeda, perintah terminal mungkin berbeda. Silakan lihat dokumen editor yang Anda gunakan untuk informasi lebih lanjut tentang perintah terminal khusus editor. Semua kunci rahasia untuk MongoDB perlu diperoleh secara individual, karena kunci tersebut tersembunyi dan spesifik untuk saya.
