8.5 KiB

Raw Blame History

Laksanakan Dialog "Tambah Transaksi"

Gambaran Keseluruhan

Aplikasi perbankan anda kini mempunyai pengurusan keadaan dan penyimpanan data yang kukuh, tetapi ia masih kekurangan satu ciri penting yang diperlukan oleh aplikasi perbankan sebenar: keupayaan untuk pengguna menambah transaksi mereka sendiri. Dalam tugasan ini, anda akan melaksanakan dialog "Tambah Transaksi" yang lengkap dan berintegrasi dengan sistem pengurusan keadaan anda yang sedia ada.

Tugasan ini menggabungkan semua yang telah anda pelajari dalam empat pelajaran perbankan: templat HTML, pengendalian borang, integrasi API, dan pengurusan keadaan.

Objektif Pembelajaran

Dengan menyelesaikan tugasan ini, anda akan:

Mencipta antara muka dialog mesra pengguna untuk kemasukan data
Melaksanakan reka bentuk borang yang boleh diakses dengan sokongan papan kekunci dan pembaca skrin
Mengintegrasikan ciri baharu dengan sistem pengurusan keadaan anda yang sedia ada
Berlatih komunikasi API dan pengendalian ralat
Mengaplikasikan corak pembangunan web moden kepada ciri dunia sebenar

Arahan

Langkah 1: Butang Tambah Transaksi

Cipta butang "Tambah Transaksi" pada halaman papan pemuka anda yang mudah dicari dan diakses oleh pengguna.

Keperluan:

Letakkan butang di lokasi yang logik pada papan pemuka
Gunakan teks butang yang jelas dan berorientasikan tindakan
Gayakan butang agar sepadan dengan reka bentuk UI anda yang sedia ada
Pastikan butang boleh diakses dengan papan kekunci

Langkah 2: Pelaksanaan Dialog

Pilih salah satu daripada dua pendekatan ini untuk melaksanakan dialog anda:

Pilihan A: Halaman Berasingan

Cipta templat HTML baharu untuk borang transaksi
Tambah laluan baharu ke sistem penghalaan anda
Laksanakan navigasi ke dan dari halaman borang

Pilihan B: Dialog Modal (Disyorkan)

Gunakan JavaScript untuk menunjukkan/menyembunyikan dialog tanpa meninggalkan papan pemuka
Laksanakan menggunakan sifat hidden atau kelas CSS
Cipta pengalaman pengguna yang lancar dengan pengurusan fokus yang betul

Langkah 3: Pelaksanaan Kebolehaksesan

Pastikan dialog anda memenuhi standard kebolehaksesan untuk dialog modal:

Navigasi Papan Kekunci:

Sokong kekunci Escape untuk menutup dialog
Perangkap fokus dalam dialog apabila dibuka
Kembalikan fokus ke butang pencetus apabila ditutup

Sokongan Pembaca Skrin:

Tambah label dan peranan ARIA yang sesuai
Umumkan pembukaan/penutupan dialog kepada pembaca skrin
Sediakan label medan borang yang jelas dan mesej ralat

Langkah 4: Penciptaan Borang

Reka borang HTML yang mengumpulkan data transaksi:

Medan Diperlukan:

Tarikh: Bila transaksi berlaku
Deskripsi: Untuk apa transaksi itu
Jumlah: Nilai transaksi (positif untuk pendapatan, negatif untuk perbelanjaan)

Ciri Borang:

Sahkan input pengguna sebelum penghantaran
Sediakan mesej ralat yang jelas untuk data tidak sah
Sertakan teks dan label petunjuk yang berguna
Gayakan secara konsisten dengan reka bentuk anda yang sedia ada

Langkah 5: Integrasi API

Sambungkan borang anda ke API backend:

Langkah Pelaksanaan:

Semak spesifikasi API pelayan untuk endpoint dan format data yang betul
Cipta data JSON daripada input borang anda
Hantar data ke API dengan pengendalian ralat yang sesuai
Paparkan mesej kejayaan/kegagalan kepada pengguna
Tangani ralat rangkaian dengan baik

Langkah 6: Integrasi Pengurusan Keadaan

Kemas kini papan pemuka anda dengan transaksi baharu:

Keperluan Integrasi:

Segarkan data akaun selepas penambahan transaksi berjaya
Kemas kini paparan papan pemuka tanpa memerlukan muat semula halaman
Pastikan transaksi baharu muncul dengan segera
Kekalkan konsistensi keadaan sepanjang proses

Spesifikasi Teknikal

Butiran Endpoint API: Rujuk dokumentasi API pelayan untuk:

Format JSON yang diperlukan untuk data transaksi
Kaedah HTTP dan URL endpoint
Format respons yang dijangka
Pengendalian respons ralat

Hasil Dijangka: Selepas menyelesaikan tugasan ini, aplikasi perbankan anda sepatutnya mempunyai ciri "Tambah Transaksi" yang berfungsi sepenuhnya dan kelihatan profesional:

Ujian Pelaksanaan Anda

Ujian Fungsional:

Sahkan butang "Tambah Transaksi" jelas kelihatan dan boleh diakses
Uji bahawa dialog dibuka dan ditutup dengan betul
Pastikan pengesahan borang berfungsi untuk semua medan yang diperlukan
Periksa bahawa transaksi yang berjaya muncul dengan segera di papan pemuka
Pastikan pengendalian ralat berfungsi untuk data tidak sah dan isu rangkaian

Ujian Kebolehaksesan:

Navigasi melalui keseluruhan aliran menggunakan hanya papan kekunci
Uji dengan pembaca skrin untuk memastikan pengumuman yang betul
Sahkan pengurusan fokus berfungsi dengan betul
Periksa bahawa semua elemen borang mempunyai label yang sesuai

Rubrik Penilaian

Kriteria	Cemerlang	Memadai	Perlu Penambahbaikan
Fungsi	Ciri tambah transaksi berfungsi dengan sempurna dengan pengalaman pengguna yang sangat baik dan mengikuti semua amalan terbaik daripada pelajaran	Ciri tambah transaksi berfungsi dengan betul tetapi mungkin tidak mengikuti beberapa amalan terbaik atau mempunyai isu kebolehgunaan kecil	Ciri tambah transaksi sebahagiannya berfungsi atau mempunyai masalah kebolehgunaan yang ketara
Kualiti Kod	Kod tersusun dengan baik, mengikuti corak yang ditetapkan, termasuk pengendalian ralat yang betul, dan berintegrasi dengan lancar dengan pengurusan keadaan sedia ada	Kod berfungsi tetapi mungkin mempunyai beberapa isu organisasi atau corak yang tidak konsisten dengan kod sedia ada	Kod mempunyai isu struktur yang ketara atau tidak berintegrasi dengan baik dengan corak sedia ada
Kebolehaksesan	Sokongan navigasi papan kekunci penuh, keserasian pembaca skrin, dan mengikuti garis panduan WCAG dengan pengurusan fokus yang sangat baik	Ciri kebolehaksesan asas dilaksanakan tetapi mungkin kehilangan beberapa navigasi papan kekunci atau ciri pembaca skrin	Pertimbangan kebolehaksesan terhad atau tidak dilaksanakan
Pengalaman Pengguna	Antara muka yang intuitif, kemas dengan maklum balas yang jelas, interaksi yang lancar, dan penampilan profesional	Pengalaman pengguna yang baik dengan kawasan kecil untuk penambahbaikan dalam maklum balas atau reka bentuk visual	Pengalaman pengguna yang lemah dengan antara muka yang mengelirukan atau kekurangan maklum balas pengguna

Cabaran Tambahan (Pilihan)

Setelah anda menyelesaikan keperluan asas, pertimbangkan penambahbaikan ini:

Ciri Dipertingkatkan:

Tambah kategori transaksi (makanan, pengangkutan, hiburan, dll.)
Laksanakan pengesahan input dengan maklum balas masa nyata
Cipta pintasan papan kekunci untuk pengguna mahir
Tambah keupayaan penyuntingan dan penghapusan transaksi

Integrasi Lanjutan:

Laksanakan fungsi undo untuk transaksi yang baru ditambah
Tambah import transaksi secara pukal daripada fail CSV
Cipta carian dan penapisan transaksi
Laksanakan fungsi eksport data

Ciri-ciri pilihan ini akan membantu anda berlatih konsep pembangunan web yang lebih maju dan mencipta aplikasi perbankan yang lebih lengkap!

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

8.5 KiB Raw Blame History