16 KiB
Υλοποίηση Διαλόγου "Προσθήκη Συναλλαγής"
Επισκόπηση
Η εφαρμογή τραπεζικής σας διαθέτει πλέον ισχυρή διαχείριση κατάστασης και αποθήκευση δεδομένων, αλλά της λείπει ένα κρίσιμο χαρακτηριστικό που χρειάζονται οι πραγματικές τραπεζικές εφαρμογές: η δυνατότητα για τους χρήστες να προσθέτουν τις δικές τους συναλλαγές. Σε αυτή την εργασία, θα υλοποιήσετε έναν πλήρη διάλογο "Προσθήκη Συναλλαγής" που ενσωματώνεται άψογα με το υπάρχον σύστημα διαχείρισης κατάστασης.
Αυτή η εργασία συνδυάζει όλα όσα έχετε μάθει στα τέσσερα μαθήματα τραπεζικής: HTML templating, χειρισμό φορμών, ενσωμάτωση API και διαχείριση κατάστασης.
Στόχοι Μάθησης
Με την ολοκλήρωση αυτής της εργασίας, θα:
- Δημιουργήσετε ένα φιλικό προς τον χρήστη διάλογο για εισαγωγή δεδομένων
- Υλοποιήσετε προσβάσιμο σχεδιασμό φόρμας με υποστήριξη πληκτρολογίου και αναγνωστών οθόνης
- Ενσωματώσετε νέες λειτουργίες στο υπάρχον σύστημα διαχείρισης κατάστασης
- Εξασκηθείτε στην επικοινωνία με API και στη διαχείριση σφαλμάτων
- Εφαρμόσετε σύγχρονα πρότυπα ανάπτυξης ιστού σε ένα χαρακτηριστικό πραγματικού κόσμου
Οδηγίες
Βήμα 1: Κουμπί Προσθήκης Συναλλαγής
Δημιουργήστε ένα κουμπί "Προσθήκη Συναλλαγής" στη σελίδα του πίνακα ελέγχου που οι χρήστες μπορούν εύκολα να βρουν και να χρησιμοποιήσουν.
Απαιτήσεις:
- Τοποθετήστε το κουμπί σε μια λογική θέση στον πίνακα ελέγχου
- Χρησιμοποιήστε σαφές, προσανατολισμένο στη δράση κείμενο κουμπιού
- Στυλιζάρετε το κουμπί ώστε να ταιριάζει με τον υπάρχοντα σχεδιασμό UI
- Βεβαιωθείτε ότι το κουμπί είναι προσβάσιμο μέσω πληκτρολογίου
Βήμα 2: Υλοποίηση Διαλόγου
Επιλέξτε μία από τις δύο προσεγγίσεις για την υλοποίηση του διαλόγου σας:
Επιλογή Α: Ξεχωριστή Σελίδα
- Δημιουργήστε ένα νέο πρότυπο HTML για τη φόρμα συναλλαγής
- Προσθέστε μια νέα διαδρομή στο σύστημα δρομολόγησης σας
- Υλοποιήστε πλοήγηση προς και από τη σελίδα της φόρμας
Επιλογή Β: Μοντέλο Διαλόγου (Συνιστάται)
- Χρησιμοποιήστε JavaScript για να εμφανίσετε/κρύψετε το διάλογο χωρίς να φύγετε από τον πίνακα ελέγχου
- Υλοποιήστε χρησιμοποιώντας την ιδιότητα
hiddenή κλάσεις CSS - Δημιουργήστε μια ομαλή εμπειρία χρήστη με σωστή διαχείριση εστίασης
Βήμα 3: Υλοποίηση Προσβασιμότητας
Βεβαιωθείτε ότι ο διάλογος σας πληροί πρότυπα προσβασιμότητας για μοντέλα διαλόγου:
Πλοήγηση με Πληκτρολόγιο:
- Υποστηρίξτε το πλήκτρο Escape για να κλείσετε το διάλογο
- Παγιδεύστε την εστίαση μέσα στο διάλογο όταν είναι ανοιχτός
- Επαναφέρετε την εστίαση στο κουμπί ενεργοποίησης όταν κλείσει
Υποστήριξη Αναγνωστών Οθόνης:
- Προσθέστε κατάλληλες ετικέτες ARIA και ρόλους
- Ανακοινώστε το άνοιγμα/κλείσιμο του διαλόγου στους αναγνώστες οθόνης
- Παρέχετε σαφείς ετικέτες πεδίων φόρμας και μηνύματα σφαλμάτων
Βήμα 4: Δημιουργία Φόρμας
Σχεδιάστε μια φόρμα HTML που συλλέγει δεδομένα συναλλαγής:
Απαιτούμενα Πεδία:
- Ημερομηνία: Πότε πραγματοποιήθηκε η συναλλαγή
- Περιγραφή: Για ποιο σκοπό ήταν η συναλλαγή
- Ποσό: Αξία συναλλαγής (θετικό για έσοδα, αρνητικό για έξοδα)
Χαρακτηριστικά Φόρμας:
- Επικυρώστε την εισαγωγή χρήστη πριν την υποβολή
- Παρέχετε σαφή μηνύματα σφαλμάτων για μη έγκυρα δεδομένα
- Περιλάβετε χρήσιμο κείμενο placeholder και ετικέτες
- Στυλιζάρετε με συνέπεια με τον υπάρχοντα σχεδιασμό
Βήμα 5: Ενσωμάτωση API
Συνδέστε τη φόρμα σας με το backend API:
Βήματα Υλοποίησης:
- Ανασκοπήστε τις προδιαγραφές API του διακομιστή για το σωστό endpoint και τη μορφή δεδομένων
- Δημιουργήστε δεδομένα JSON από τις εισαγωγές της φόρμας σας
- Στείλτε τα δεδομένα στο API με κατάλληλη διαχείριση σφαλμάτων
- Εμφανίστε μηνύματα επιτυχίας/αποτυχίας στον χρήστη
- Διαχειριστείτε σφάλματα δικτύου με χάρη
Βήμα 6: Ενσωμάτωση Διαχείρισης Κατάστασης
Ενημερώστε τον πίνακα ελέγχου με τη νέα συναλλαγή:
Απαιτήσεις Ενσωμάτωσης:
- Ανανεώστε τα δεδομένα του λογαριασμού μετά την επιτυχή προσθήκη συναλλαγής
- Ενημερώστε την εμφάνιση του πίνακα ελέγχου χωρίς να απαιτείται ανανέωση της σελίδας
- Βεβαιωθείτε ότι η νέα συναλλαγή εμφανίζεται άμεσα
- Διατηρήστε τη σωστή συνέπεια κατάστασης καθ' όλη τη διαδικασία
Τεχνικές Προδιαγραφές
Λεπτομέρειες Endpoint API: Ανατρέξτε στην τεκμηρίωση API του διακομιστή για:
- Απαιτούμενη μορφή JSON για δεδομένα συναλλαγής
- Μέθοδο HTTP και URL endpoint
- Αναμενόμενη μορφή απάντησης
- Διαχείριση απαντήσεων σφαλμάτων
Αναμενόμενο Αποτέλεσμα: Μετά την ολοκλήρωση αυτής της εργασίας, η τραπεζική σας εφαρμογή θα πρέπει να διαθέτει ένα πλήρως λειτουργικό χαρακτηριστικό "Προσθήκη Συναλλαγής" που φαίνεται και λειτουργεί επαγγελματικά:
Δοκιμή της Υλοποίησής σας
Λειτουργική Δοκιμή:
- Επαληθεύστε ότι το κουμπί "Προσθήκη Συναλλαγής" είναι σαφώς ορατό και προσβάσιμο
- Δοκιμάστε ότι ο διάλογος ανοίγει και κλείνει σωστά
- Επιβεβαιώστε ότι η επικύρωση φόρμας λειτουργεί για όλα τα απαιτούμενα πεδία
- Ελέγξτε ότι οι επιτυχείς συναλλαγές εμφανίζονται άμεσα στον πίνακα ελέγχου
- Βεβαιωθείτε ότι η διαχείριση σφαλμάτων λειτουργεί για μη έγκυρα δεδομένα και προβλήματα δικτύου
Δοκιμή Προσβασιμότητας:
- Πλοηγηθείτε σε όλη τη ροή χρησιμοποιώντας μόνο το πληκτρολόγιο
- Δοκιμάστε με έναν αναγνώστη οθόνης για να βεβαιωθείτε ότι γίνονται σωστές ανακοινώσεις
- Επαληθεύστε ότι η διαχείριση εστίασης λειτουργεί σωστά
- Ελέγξτε ότι όλα τα στοιχεία της φόρμας έχουν κατάλληλες ετικέτες
Κριτήρια Αξιολόγησης
| Κριτήριο | Εξαιρετικό | Επαρκές | Χρειάζεται Βελτίωση |
|---|---|---|---|
| Λειτουργικότητα | Το χαρακτηριστικό προσθήκης συναλλαγής λειτουργεί άψογα με εξαιρετική εμπειρία χρήστη και ακολουθεί όλες τις βέλτιστες πρακτικές των μαθημάτων | Το χαρακτηριστικό προσθήκης συναλλαγής λειτουργεί σωστά αλλά μπορεί να μην ακολουθεί κάποιες βέλτιστες πρακτικές ή έχει μικρά προβλήματα χρηστικότητας | Το χαρακτηριστικό προσθήκης συναλλαγής λειτουργεί μερικώς ή έχει σημαντικά προβλήματα χρηστικότητας |
| Ποιότητα Κώδικα | Ο κώδικας είναι καλά οργανωμένος, ακολουθεί καθιερωμένα πρότυπα, περιλαμβάνει σωστή διαχείριση σφαλμάτων και ενσωματώνεται άψογα με την υπάρχουσα διαχείριση κατάστασης | Ο κώδικας λειτουργεί αλλά μπορεί να έχει κάποια προβλήματα οργάνωσης ή ασυνέπειες με τον υπάρχοντα κώδικα | Ο κώδικας έχει σημαντικά δομικά προβλήματα ή δεν ενσωματώνεται καλά με τα υπάρχοντα πρότυπα |
| Προσβασιμότητα | Πλήρης υποστήριξη πλοήγησης με πληκτρολόγιο, συμβατότητα με αναγνώστες οθόνης και ακολουθεί τις οδηγίες WCAG με εξαιρετική διαχείριση εστίασης | Βασικά χαρακτηριστικά προσβασιμότητας υλοποιημένα αλλά μπορεί να λείπουν κάποια χαρακτηριστικά πλοήγησης με πληκτρολόγιο ή αναγνώστες οθόνης | Περιορισμένες ή καθόλου προσβασιμότητα |
| Εμπειρία Χρήστη | Διαισθητική, καλοσχεδιασμένη διεπαφή με σαφή ανατροφοδότηση, ομαλές αλληλεπιδράσεις και επαγγελματική εμφάνιση | Καλή εμπειρία χρήστη με μικρές περιοχές για βελτίωση στην ανατροφοδότηση ή τον οπτικό σχεδιασμό | Κακή εμπειρία χρήστη με μπερδεμένη διεπαφή ή έλλειψη ανατροφοδότησης |
Πρόσθετες Προκλήσεις (Προαιρετικό)
Αφού ολοκληρώσετε τις βασικές απαιτήσεις, εξετάστε αυτές τις βελτιώσεις:
Ενισχυμένα Χαρακτηριστικά:
- Προσθέστε κατηγορίες συναλλαγών (φαγητό, μεταφορές, ψυχαγωγία κ.λπ.)
- Υλοποιήστε επικύρωση εισαγωγής με ανατροφοδότηση σε πραγματικό χρόνο
- Δημιουργήστε συντομεύσεις πληκτρολογίου για έμπειρους χρήστες
- Προσθέστε δυνατότητες επεξεργασίας και διαγραφής συναλλαγών
Προχωρημένη Ενσωμάτωση:
- Υλοποιήστε λειτουργία αναίρεσης για πρόσφατα προστιθέμενες συναλλαγές
- Προσθέστε μαζική εισαγωγή συναλλαγών από αρχεία CSV
- Δημιουργήστε δυνατότητες αναζήτησης και φιλτραρίσματος συναλλαγών
- Υλοποιήστε δυνατότητα εξαγωγής δεδομένων
Αυτά τα προαιρετικά χαρακτηριστικά θα σας βοηθήσουν να εξασκηθείτε σε πιο προχωρημένες έννοιες ανάπτυξης ιστού και να δημιουργήσετε μια πιο ολοκληρωμένη τραπεζική εφαρμογή!
Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.