Web-Dev-For-Beginners/translations/el/7-bank-project/4-state-management

Δημιουργία Εφαρμογής Τραπεζικής Μέρος 4: Έννοιες Διαχείρισης Κατάστασης

Ερωτηματολόγιο Πριν το Μάθημα

Ερωτηματολόγιο πριν το μάθημα

Εισαγωγή

Η διαχείριση κατάστασης μοιάζει με το σύστημα πλοήγησης του διαστημικού σκάφους Voyager – όταν όλα λειτουργούν ομαλά, σχεδόν δεν το παρατηρείς. Αλλά όταν κάτι πάει στραβά, γίνεται η διαφορά μεταξύ του να φτάσεις στο διαστρικό χώρο και του να χαθείς στο κοσμικό κενό. Στην ανάπτυξη ιστοσελίδων, η κατάσταση αντιπροσωπεύει όλα όσα πρέπει να θυμάται η εφαρμογή σας: την κατάσταση σύνδεσης του χρήστη, δεδομένα φόρμας, ιστορικό πλοήγησης και προσωρινές καταστάσεις διεπαφής.

Καθώς η τραπεζική σας εφαρμογή εξελίχθηκε από μια απλή φόρμα σύνδεσης σε μια πιο εξελιγμένη εφαρμογή, πιθανότατα αντιμετωπίσατε κάποιες κοινές προκλήσεις. Ανανεώστε τη σελίδα και οι χρήστες αποσυνδέονται απροσδόκητα. Κλείστε τον περιηγητή και όλη η πρόοδος εξαφανίζεται. Εντοπίστε ένα πρόβλημα και ψάχνετε μέσα από πολλές συναρτήσεις που τροποποιούν τα ίδια δεδομένα με διαφορετικούς τρόπους.

Αυτά δεν είναι σημάδια κακού προγραμματισμού – είναι οι φυσικές δυσκολίες που εμφανίζονται όταν οι εφαρμογές φτάνουν σε ένα συγκεκριμένο επίπεδο πολυπλοκότητας. Κάθε προγραμματιστής αντιμετωπίζει αυτές τις προκλήσεις καθώς οι εφαρμογές του μεταβαίνουν από "απόδειξη της ιδέας" σε "έτοιμες για παραγωγή".

Σε αυτό το μάθημα, θα εφαρμόσουμε ένα κεντρικό σύστημα διαχείρισης κατάστασης που θα μεταμορφώσει την τραπεζική σας εφαρμογή σε μια αξιόπιστη, επαγγελματική εφαρμογή. Θα μάθετε να διαχειρίζεστε τη ροή δεδομένων προβλέψιμα, να διατηρείτε τις συνεδρίες χρηστών κατάλληλα και να δημιουργείτε την ομαλή εμπειρία χρήστη που απαιτούν οι σύγχρονες εφαρμογές ιστού.

Προαπαιτούμενα

Πριν εμβαθύνετε στις έννοιες της διαχείρισης κατάστασης, θα πρέπει να έχετε ρυθμίσει σωστά το περιβάλλον ανάπτυξης σας και να έχετε θέσει τις βάσεις της τραπεζικής σας εφαρμογής. Αυτό το μάθημα βασίζεται άμεσα στις έννοιες και τον κώδικα από τα προηγούμενα μέρη αυτής της σειράς.

Βεβαιωθείτε ότι έχετε τα εξής έτοιμα πριν προχωρήσετε:

Απαιτούμενη Ρύθμιση:

• Ολοκληρώστε το μάθημα ανάκτησης δεδομένων - η εφαρμογή σας θα πρέπει να φορτώνει και να εμφανίζει επιτυχώς δεδομένα λογαριασμού
• Εγκαταστήστε το Node.js στο σύστημά σας για την εκτέλεση του backend API
• Ξεκινήστε το server API τοπικά για τη διαχείριση λειτουργιών δεδομένων λογαριασμού

Δοκιμή του Περιβάλλοντος σας:

Επιβεβαιώστε ότι ο server API λειτουργεί σωστά εκτελώντας αυτήν την εντολή σε ένα τερματικό:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

Τι κάνει αυτή η εντολή:

• Στέλνει ένα αίτημα GET στον τοπικό server API σας
• Δοκιμάζει τη σύνδεση και επιβεβαιώνει ότι ο server ανταποκρίνεται
• Επιστρέφει τις πληροφορίες έκδοσης του API αν όλα λειτουργούν σωστά

---

Διάγνωση των Τρεχόντων Προβλημάτων Κατάστασης

Όπως ο Σέρλοκ Χολμς που εξετάζει μια σκηνή εγκλήματος, πρέπει να κατανοήσουμε ακριβώς τι συμβαίνει στην τρέχουσα υλοποίηση μας πριν λύσουμε το μυστήριο των εξαφανισμένων συνεδριών χρηστών.

Ας διεξάγουμε ένα απλό πείραμα που αποκαλύπτει τις υποκείμενες προκλήσεις διαχείρισης κατάστασης:

🧪 Δοκιμάστε Αυτό το Διαγνωστικό Τεστ:

1. Συνδεθείτε στην τραπεζική σας εφαρμογή και μεταβείτε στον πίνακα ελέγχου
2. Ανανεώστε τη σελίδα του περιηγητή
3. Παρατηρήστε τι συμβαίνει με την κατάσταση σύνδεσής σας

Αν ανακατευθυνθείτε πίσω στην οθόνη σύνδεσης, έχετε ανακαλύψει το κλασικό πρόβλημα διατήρησης κατάστασης. Αυτή η συμπεριφορά συμβαίνει επειδή η τρέχουσα υλοποίηση αποθηκεύει δεδομένα χρήστη σε μεταβλητές JavaScript που επαναφέρονται με κάθε φόρτωση σελίδας.

Προβλήματα Τρέχουσας Υλοποίησης:

Η απλή μεταβλητή account από το προηγούμενο μάθημα δημιουργεί τρία σημαντικά προβλήματα που επηρεάζουν τόσο την εμπειρία χρήστη όσο και τη συντηρησιμότητα του κώδικα:

Πρόβλημα	Τεχνική Αιτία	Επίπτωση στον Χρήστη
Απώλεια Συνεδρίας	Η ανανέωση της σελίδας καθαρίζει τις μεταβλητές JavaScript	Οι χρήστες πρέπει να επαληθεύονται συχνά
Διασκορπισμένες Ενημερώσεις	Πολλαπλές συναρτήσεις τροποποιούν την κατάσταση απευθείας	Η αποσφαλμάτωση γίνεται όλο και πιο δύσκολη
Ατελής Εκκαθάριση	Η αποσύνδεση δεν καθαρίζει όλες τις αναφορές κατάστασης	Πιθανά προβλήματα ασφάλειας και ιδιωτικότητας

Η Αρχιτεκτονική Πρόκληση:

Όπως ο σχεδιασμός των διαμερισμάτων του Τιτανικού που φαινόταν ανθεκτικός μέχρι που πλημμύρισαν πολλαπλά διαμερίσματα ταυτόχρονα, η επίλυση αυτών των προβλημάτων μεμονωμένα δεν θα αντιμετωπίσει το υποκείμενο αρχιτεκτονικό πρόβλημα. Χρειαζόμαστε μια ολοκληρωμένη λύση διαχείρισης κατάστασης.

💡 Τι προσπαθούμε πραγματικά να πετύχουμε εδώ;

Η διαχείριση κατάστασης αφορά την επίλυση δύο βασικών γρίφων:

1. Πού είναι τα δεδομένα μου;: Παρακολούθηση των πληροφοριών που έχουμε και από πού προέρχονται
2. Είναι όλοι στην ίδια σελίδα;: Εξασφάλιση ότι αυτό που βλέπουν οι χρήστες ταιριάζει με αυτό που πραγματικά συμβαίνει

Το Σχέδιο μας:

Αντί να κυνηγάμε την ουρά μας, θα δημιουργήσουμε ένα κεντρικό σύστημα διαχείρισης κατάστασης. Σκεφτείτε το σαν να έχετε έναν πολύ οργανωμένο άνθρωπο υπεύθυνο για όλα τα σημαντικά πράγματα:

Κατανόηση αυτής της ροής δεδομένων:

• Κεντρικοποιεί όλη την κατάσταση της εφαρμογής σε μία τοποθεσία
• Δρομολογεί όλες τις αλλαγές κατάστασης μέσω ελεγχόμενων συναρτήσεων
• Εξασφαλίζει ότι η διεπαφή χρήστη παραμένει συγχρονισμένη με την τρέχουσα κατάσταση
• Παρέχει ένα σαφές, προβλέψιμο μοτίβο για τη διαχείριση δεδομένων

💡 Επαγγελματική Συμβουλή: Αυτό το μάθημα επικεντρώνεται σε βασικές έννοιες. Για σύνθετες εφαρμογές, βιβλιοθήκες όπως το Redux παρέχουν πιο προηγμένες δυνατότητες διαχείρισης κατάστασης. Η κατανόηση αυτών των βασικών αρχών θα σας βοηθήσει να κατακτήσετε οποιαδήποτε βιβλιοθήκη διαχείρισης κατάστασης.

⚠️ Προχωρημένο Θέμα: Δεν θα καλύψουμε αυτόματες ενημερώσεις διεπαφής χρήστη που ενεργοποιούνται από αλλαγές κατάστασης, καθώς αυτό περιλαμβάνει έννοιες Αντιδραστικού Προγραμματισμού. Θεωρήστε το αυτό ως ένα εξαιρετικό επόμενο βήμα για την εκπαιδευτική σας πορεία!

Εργασία: Κεντρικοποίηση Δομής Κατάστασης

Ας ξεκινήσουμε τη μετατροπή της διασκορπισμένης διαχείρισης κατάστασης σε ένα κεντρικό σύστημα. Αυτό το πρώτο βήμα θέτει τα θεμέλια για όλες τις βελτιώσεις που ακολουθούν.

Βήμα 1: Δημιουργία Κεντρικού Αντικειμένου Κατάστασης

Αντικαταστήστε τη δήλωση της απλής account:

let account = null;

Με ένα δομημένο αντικείμενο κατάστασης:

let state = {
  account: null
};

Γιατί αυτή η αλλαγή έχει σημασία:

• Κεντρικοποιεί όλα τα δεδομένα της εφαρμογής σε μία τοποθεσία
• Προετοιμάζει τη δομή για την προσθήκη περισσότερων ιδιοτήτων κατάστασης αργότερα
• Δημιουργεί ένα σαφές όριο μεταξύ κατάστασης και άλλων μεταβλητών
• Θέτει ένα μοτίβο που κλιμακώνεται καθώς η εφαρμογή σας μεγαλώνει

Βήμα 2: Ενημέρωση Μοτίβων Πρόσβασης Κατάστασης

Ενημερώστε τις συναρτήσεις σας ώστε να χρησιμοποιούν τη νέα δομή κατάστασης:

Στις συναρτήσεις register() και login(), αντικαταστήστε:

account = ...

Με:

state.account = ...

Στη συνάρτηση updateDashboard(), προσθέστε αυτή τη γραμμή στην κορυφή:

const account = state.account;

Τι επιτυγχάνουν αυτές οι ενημερώσεις:

• Διατηρούν την υπάρχουσα λειτουργικότητα ενώ βελτιώνουν τη δομή
• Προετοιμάζουν τον κώδικα σας για πιο εξελιγμένη διαχείριση κατάστασης
• Δημιουργούν συνεπή μοτίβα για πρόσβαση σε δεδομένα κατάστασης
• Θέτουν τα θεμέλια για κεντρικές ενημερώσεις κατάστασης

💡 Σημείωση: Αυτή η αναδιάρθρωση δεν λύνει άμεσα τα προβλήματά μας, αλλά δημιουργεί τα απαραίτητα θεμέλια για τις ισχυρές βελτιώσεις που έρχονται στη συνέχεια!

Εφαρμογή Ελεγχόμενων Ενημερώσεων Κατάστασης

Με την κατάσταση μας κεντρικοποιημένη, το επόμενο βήμα περιλαμβάνει τη δημιουργία ελεγχόμενων μηχανισμών για τροποποιήσεις δεδομένων. Αυτή η προσέγγιση εξασφαλίζει προβλέψιμες αλλαγές κατάστασης και ευκολότερη αποσφαλμάτωση.

Η βασική αρχή μοιάζει με τον έλεγχο εναέριας κυκλοφορίας: αντί να επιτρέπουμε σε πολλαπλές συναρτήσεις να τροποποιούν την κατάσταση ανεξάρτητα, θα διοχετεύουμε όλες τις αλλαγές μέσω μιας μόνο, ελεγχόμενης συνάρτησης. Αυτό το μοτίβο παρέχει σαφή εποπτεία του πότε και πώς συμβαίνουν οι αλλαγές δεδομένων.

Διαχείριση Αμετάβλητης Κατάστασης:

Θα αντιμετωπίσουμε το αντικείμενο state ως αμετάβλητο, που σημαίνει ότι δεν το τροποποιούμε ποτέ απευθείας. Αντίθετα, κάθε αλλαγή δημιουργεί ένα νέο αντικείμενο κατάστασης με τα ενημερωμένα δεδομένα.

Παρόλο που αυτή η προσέγγιση μπορεί αρχικά να φαίνεται λιγότερο αποδοτική σε σύγκριση με τις άμεσες τροποποιήσεις, παρέχει σημαντικά πλεονεκτήματα για την αποσφαλμάτωση, τη δοκιμή και τη διατήρηση της προβλεψιμότητας της εφαρμογής.

Πλεονεκτήματα της διαχείρισης αμετάβλητης κατάστασης:

Πλεονέκτημα	Περιγραφή	Επίπτωση
Προβλεψιμότητα	Οι αλλαγές συμβαίνουν μόνο μέσω ελεγχόμενων συναρτήσεων	Ευκολότερη αποσφαλμάτωση και δοκιμή
Παρακολούθηση Ιστορικού	Κάθε αλλαγή κατάστασης δημιουργεί ένα νέο αντικείμενο	Δυνατότητα λειτουργίας αναίρεσης/επανάληψης
Πρόληψη Παρενεργειών	Δεν υπάρχουν τυχαίες τροποποιήσεις	Αποτροπή μυστηριωδών σφαλμάτων
Βελτιστοποίηση Απόδοσης	Εύκολος εντοπισμός αλλαγών κατάστασης	Ενεργοποίηση αποδοτικών ενημερώσεων διεπαφής χρήστη

Αμετάβλητη Κατάσταση JavaScript με Object.freeze():

Η JavaScript παρέχει το Object.freeze() για την αποτροπή τροποποιήσεων αντικειμένων:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

Ανάλυση του τι συμβαίνει εδώ:

• Αποτρέπει άμεσες αναθέσεις ή διαγραφές ιδιοτήτων
• Εμφανίζει εξαιρέσεις αν γίνουν προσπάθειες τροποποίησης
• Εξασφαλίζει ότι οι αλλαγές κατάστασης πρέπει να περάσουν από ελεγχόμενες συναρτήσεις
• Δημιουργεί ένα σαφές συμβόλαιο για το πώς μπορεί να ενημερωθεί η κατάσταση

💡 Βαθύτερη Ανάλυση: Μάθετε για τη διαφορά μεταξύ ρηχών και βαθιών αμετάβλητων αντικειμένων στη τεκμηρίωση MDN. Η κατανόηση αυτής της διάκρισης είναι κρίσιμη για σύνθετες δομές κατάστασης.

Εργασία

Ας δημιουργήσουμε μια νέα συνάρτηση updateState():

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

Σε αυτή τη συνάρτηση, δημιουργούμε ένα νέο αντικείμενο κατάστασης και αντιγράφουμε δεδομένα από την προηγούμενη κατάσταση χρησιμοποιώντας τον τελεστή διασποράς (...). Στη συνέχεια, αντικαθιστούμε μια συγκεκριμένη ιδιότητα του αντικειμένου κατάστασης με τα νέα δεδομένα χρησιμοποιώντας τη σημειογραφία αγκύλης [property] για ανάθεση. Τέλος, κλειδώνουμε το αντικείμενο για να αποτρέψουμε τροποποιήσεις χρησιμοποιώντας το Object.freeze(). Προς το παρόν έχουμε μόνο την ιδιότητα account αποθηκευμένη στην κατάσταση, αλλά με αυτή την προσέγγιση μπορείτε να προσθέσετε όσες ιδιότητες χρειάζεστε στην κατάσταση.

Θα ενημερώσουμε επίσης την αρχικοποίηση της state για να βεβαιωθούμε ότι η αρχική κατάσταση είναι επίσης κλειδωμένη:

let state = Object.freeze({
  account: null
});

Μετά από αυτό, ενημερώστε τη συνάρτηση register αντικαθιστώντας την ανάθεση state.account = result; με:

updateState('account', result);

Κάντε το ίδιο με τη συνάρτηση login, αντικαθιστώντας την state.account = data; με:

updateState('account', data);

Τώρα θα εκμεταλλευτούμε την ευκαιρία να διορθώσουμε το πρόβλημα των δεδομένων λογαριασμού που δεν καθαρίζονται όταν ο χρήστης κάνει κλικ στο Αποσύνδεση.

Δημιουργήστε μια νέα συνάρτηση logout():

function logout() {
  updateState('account', null);
  navigate('/login');
}

Σ

💡 Προχωρημένη Επιλογή: Για σύνθετες offline εφαρμογές με μεγάλα σύνολα δεδομένων, εξετάστε το IndexedDB API. Παρέχει μια πλήρη βάση δεδομένων στην πλευρά του πελάτη, αλλά απαιτεί πιο σύνθετη υλοποίηση.

Εργασία: Υλοποίηση Επίμονης Αποθήκευσης με localStorage

Ας υλοποιήσουμε επίμονη αποθήκευση ώστε οι χρήστες να παραμένουν συνδεδεμένοι μέχρι να αποσυνδεθούν ρητά. Θα χρησιμοποιήσουμε το localStorage για να αποθηκεύσουμε δεδομένα λογαριασμού μεταξύ των συνεδριών του προγράμματος περιήγησης.

Βήμα 1: Ορισμός Ρύθμισης Αποθήκευσης

const storageKey = 'savedAccount';

Τι παρέχει αυτή η σταθερά:

• Δημιουργεί έναν συνεπή αναγνωριστικό για τα αποθηκευμένα δεδομένα μας
• Αποτρέπει τυπογραφικά λάθη στις αναφορές κλειδιών αποθήκευσης
• Διευκολύνει την αλλαγή του κλειδιού αποθήκευσης αν χρειαστεί
• Ακολουθεί βέλτιστες πρακτικές για συντηρήσιμο κώδικα

Βήμα 2: Προσθήκη Αυτόματης Επίμονης Αποθήκευσης

Προσθέστε αυτή τη γραμμή στο τέλος της συνάρτησης updateState():

localStorage.setItem(storageKey, JSON.stringify(state.account));

Ανάλυση του τι συμβαίνει εδώ:

• Μετατρέπει το αντικείμενο λογαριασμού σε JSON string για αποθήκευση
• Αποθηκεύει τα δεδομένα χρησιμοποιώντας το συνεπές κλειδί αποθήκευσης
• Εκτελείται αυτόματα κάθε φορά που συμβαίνουν αλλαγές κατάστασης
• Εξασφαλίζει ότι τα αποθηκευμένα δεδομένα είναι πάντα συγχρονισμένα με την τρέχουσα κατάσταση

💡 Πλεονέκτημα Αρχιτεκτονικής: Επειδή κεντροποιήσαμε όλες τις ενημερώσεις κατάστασης μέσω της updateState(), η προσθήκη της επίμονης αποθήκευσης απαιτούσε μόνο μία γραμμή κώδικα. Αυτό δείχνει τη δύναμη των καλών αρχιτεκτονικών αποφάσεων!

Βήμα 3: Επαναφορά Κατάστασης κατά τη Φόρτωση της Εφαρμογής

Δημιουργήστε μια συνάρτηση αρχικοποίησης για την επαναφορά των αποθηκευμένων δεδομένων:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Κατανόηση της διαδικασίας αρχικοποίησης:

• Ανακτά οποιαδήποτε προηγουμένως αποθηκευμένα δεδομένα λογαριασμού από το localStorage
• Μετατρέπει το JSON string πίσω σε αντικείμενο JavaScript
• Ενημερώνει την κατάσταση χρησιμοποιώντας τη λειτουργία ελεγχόμενης ενημέρωσης
• Επαναφέρει τη συνεδρία του χρήστη αυτόματα κατά τη φόρτωση της σελίδας
• Εκτελείται πριν από τις ενημερώσεις διαδρομής για να εξασφαλίσει ότι η κατάσταση είναι διαθέσιμη

Βήμα 4: Βελτιστοποίηση Προεπιλεγμένης Διαδρομής

Ενημερώστε την προεπιλεγμένη διαδρομή για να αξιοποιήσει την επίμονη αποθήκευση:

Στο updateRoute(), αντικαταστήστε:

// Replace: return navigate('/login');
return navigate('/dashboard');

Γιατί αυτή η αλλαγή έχει νόημα:

• Αξιοποιεί αποτελεσματικά το νέο σύστημα επίμονης αποθήκευσης
• Επιτρέπει στον πίνακα ελέγχου να χειρίζεται ελέγχους ταυτοποίησης
• Ανακατευθύνει αυτόματα στη σύνδεση αν δεν υπάρχει αποθηκευμένη συνεδρία
• Δημιουργεί μια πιο ομαλή εμπειρία χρήστη

Δοκιμή της Υλοποίησής σας:

1. Συνδεθείτε στην εφαρμογή τραπεζικής σας
2. Ανανεώστε τη σελίδα του προγράμματος περιήγησης
3. Επαληθεύστε ότι παραμένετε συνδεδεμένοι και στον πίνακα ελέγχου
4. Κλείστε και ανοίξτε ξανά το πρόγραμμα περιήγησης
5. Επιστρέψτε στην εφαρμογή σας και επιβεβαιώστε ότι είστε ακόμα συνδεδεμένοι

🎉 Επιτυχία: Έχετε υλοποιήσει με επιτυχία τη διαχείριση επίμονης κατάστασης! Η εφαρμογή σας τώρα λειτουργεί σαν μια επαγγελματική διαδικτυακή εφαρμογή.

Ισορροπία Επίμονης Αποθήκευσης και Φρεσκάδας Δεδομένων

Το σύστημα επίμονης αποθήκευσης διατηρεί με επιτυχία τις συνεδρίες των χρηστών, αλλά εισάγει μια νέα πρόκληση: τη παλαιότητα των δεδομένων. Όταν πολλοί χρήστες ή εφαρμογές τροποποιούν τα ίδια δεδομένα στον διακομιστή, οι τοπικές αποθηκευμένες πληροφορίες γίνονται παρωχημένες.

Αυτή η κατάσταση μοιάζει με τους Βίκινγκς ναυτικούς που βασίζονταν τόσο σε αποθηκευμένους αστρικούς χάρτες όσο και σε τρέχουσες παρατηρήσεις των ουράνιων σωμάτων. Οι χάρτες παρείχαν συνέπεια, αλλά οι ναυτικοί χρειάζονταν φρέσκες παρατηρήσεις για να προσαρμοστούν στις μεταβαλλόμενες συνθήκες. Παρομοίως, η εφαρμογή μας χρειάζεται τόσο επίμονη κατάσταση χρήστη όσο και τρέχοντα δεδομένα από τον διακομιστή.

🧪 Ανακάλυψη του Προβλήματος Παλαιότητας Δεδομένων:

1. Συνδεθείτε στον πίνακα ελέγχου χρησιμοποιώντας τον λογαριασμό test
2. Εκτελέστε αυτήν την εντολή σε ένα τερματικό για να προσομοιώσετε μια συναλλαγή από άλλη πηγή:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

3. Ανανεώστε τη σελίδα του πίνακα ελέγχου στο πρόγραμμα περιήγησης
4. Παρατηρήστε αν βλέπετε τη νέα συναλλαγή

Τι δείχνει αυτή η δοκιμή:

• Δείχνει πώς το localStorage μπορεί να γίνει "παρωχημένο" (ξεπερασμένο)
• Προσομοιώνει σενάρια πραγματικού κόσμου όπου οι αλλαγές δεδομένων συμβαίνουν εκτός της εφαρμογής σας
• Αποκαλύπτει την ένταση μεταξύ επίμονης αποθήκευσης και φρεσκάδας δεδομένων

Η Πρόκληση της Παλαιότητας Δεδομένων:

Πρόβλημα	Αιτία	Επίπτωση στον Χρήστη
Παλαιά Δεδομένα	Το localStorage δεν λήγει αυτόματα	Οι χρήστες βλέπουν ξεπερασμένες πληροφορίες
Αλλαγές στον Διακομιστή	Άλλες εφαρμογές/χρήστες τροποποιούν τα ίδια δεδομένα	Ασυνεπείς προβολές μεταξύ πλατφορμών
Cache vs. Πραγματικότητα	Η τοπική cache δεν ταιριάζει με την κατάσταση του διακομιστή	Κακή εμπειρία χρήστη και σύγχυση

Στρατηγική Λύσης:

Θα υλοποιήσουμε ένα μοτίβο "ανανέωσης κατά τη φόρτωση" που ισορροπεί τα οφέλη της επίμονης αποθήκευσης με την ανάγκη για φρέσκα δεδομένα. Αυτή η προσέγγιση διατηρεί την ομαλή εμπειρία χρήστη ενώ εξασφαλίζει την ακρίβεια των δεδομένων.

Εργασία: Υλοποίηση Συστήματος Ανανέωσης Δεδομένων

Θα δημιουργήσουμε ένα σύστημα που αυτόματα ανακτά φρέσκα δεδομένα από τον διακομιστή ενώ διατηρεί τα οφέλη της επίμονης διαχείρισης κατάστασης.

Βήμα 1: Δημιουργία Ενημερωτή Δεδομένων Λογαριασμού

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

Κατανόηση της λογικής αυτής της συνάρτησης:

• Ελέγχει αν ένας χρήστης είναι συνδεδεμένος (state.account υπάρχει)
• Ανακατευθύνει στην αποσύνδεση αν δεν βρεθεί έγκυρη συνεδρία
• Ανακτά φρέσκα δεδομένα λογαριασμού από τον διακομιστή χρησιμοποιώντας τη συνάρτηση getAccount()
• Χειρίζεται σφάλματα διακομιστή με χάρη αποσυνδέοντας μη έγκυρες συνεδρίες
• Ενημερώνει την κατάσταση με φρέσκα δεδομένα χρησιμοποιώντας το ελεγχόμενο σύστημα ενημέρωσης
• Ενεργοποιεί αυτόματα την επίμονη αποθήκευση μέσω της συνάρτησης updateState()

Βήμα 2: Δημιουργία Χειριστή Ανανέωσης Πίνακα Ελέγχου

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

Τι επιτυγχάνει αυτή η συνάρτηση ανανέωσης:

• Συντονίζει τη διαδικασία ανανέωσης δεδομένων και ενημέρωσης UI
• Περιμένει να φορτωθούν φρέσκα δεδομένα πριν ενημερώσει την προβολή
• Εξασφαλίζει ότι ο πίνακας ελέγχου δείχνει τις πιο πρόσφατες πληροφορίες
• Διατηρεί έναν καθαρό διαχωρισμό μεταξύ διαχείρισης δεδομένων και ενημερώσεων UI

Βήμα 3: Ενσωμάτωση με το Σύστημα Διαδρομών

Ενημερώστε τη διαμόρφωση διαδρομών σας ώστε να ενεργοποιεί την ανανέωση αυτόματα:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

Πώς λειτουργεί αυτή η ενσωμάτωση:

• Εκτελεί τη συνάρτηση ανανέωσης κάθε φορά που φορτώνεται η διαδρομή του πίνακα ελέγχου
• Εξασφαλίζει ότι φρέσκα δεδομένα εμφανίζονται πάντα όταν οι χρήστες πλοηγούνται στον πίνακα ελέγχου
• Διατηρεί την υπάρχουσα δομή διαδρομών ενώ προσθέτει φρεσκάδα δεδομένων
• Παρέχει ένα συνεπές μοτίβο για αρχικοποίηση συγκεκριμένης διαδρομής

Δοκιμή του Συστήματος Ανανέωσης Δεδομένων:

1. Συνδεθείτε στην εφαρμογή τραπεζικής σας
2. Εκτελέστε την εντολή curl από νωρίτερα για να δημιουργήσετε μια νέα συναλλαγή
3. Ανανεώστε τη σελίδα του πίνακα ελέγχου ή πλοηγηθείτε μακριά και πίσω
4. Επαληθεύστε ότι η νέα συναλλαγή εμφανίζεται αμέσως

🎉 Ιδανική Ισορροπία Επιτεύχθηκε: Η εφαρμογή σας τώρα συνδυάζει την ομαλή εμπειρία της επίμονης κατάστασης με την ακρίβεια των φρέσκων δεδομένων από τον διακομιστή!

Πρόκληση GitHub Copilot Agent 🚀

Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:

Περιγραφή: Υλοποιήστε ένα ολοκληρωμένο σύστημα διαχείρισης κατάστασης με λειτουργικότητα undo/redo για την τραπεζική εφαρμογή. Αυτή η πρόκληση θα σας βοηθήσει να εξασκήσετε προηγμένες έννοιες διαχείρισης κατάστασης, συμπεριλαμβανομένης της παρακολούθησης ιστορικού κατάστασης, των αμετάβλητων ενημερώσεων και του συγχρονισμού διεπαφής χρήστη.

Προτροπή: Δημιουργήστε ένα ενισχυμένο σύστημα διαχείρισης κατάστασης που περιλαμβάνει: 1) Ένα array ιστορικού κατάστασης που παρακολουθεί όλες τις προηγούμενες καταστάσεις, 2) Λειτουργίες undo και redo που μπορούν να επαναφέρουν προηγούμενες καταστάσεις, 3) Κουμπιά UI για λειτουργίες undo/redo στον πίνακα ελέγχου, 4) Ένα μέγιστο όριο ιστορικού 10 καταστάσεων για την αποφυγή προβλημάτων μνήμης, και 5) Κατάλληλο καθαρισμό του ιστορικού όταν ο χρήστης αποσυνδέεται. Εξασφαλίστε ότι η λειτουργικότητα undo/redo λειτουργεί με αλλαγές στο υπόλοιπο λογαριασμού και παραμένει επίμονη μεταξύ ανανεώσεων του προγράμματος περιήγησης.

Μάθετε περισσότερα για τη λειτουργία agent εδώ.

🚀 Πρόκληση: Βελτιστοποίηση Αποθήκευσης

Η υλοποίησή σας τώρα χειρίζεται αποτελεσματικά τις συνεδρίες χρηστών, την ανανέωση δεδομένων και τη διαχείριση κατάστασης. Ωστόσο, εξετάστε αν η τρέχουσα προσέγγιση ισορροπεί βέλτιστα την αποδοτικότητα αποθήκευσης με τη λειτουργικότητα.

Όπως οι σκακιστές που διακρίνουν μεταξύ βασικών κομματιών και αναλώσιμων πιονιών, η αποτελεσματική διαχείριση κατάστασης απαιτεί τον εντοπισμό των δεδομένων που πρέπει να παραμένουν επίμονα έναντι αυτών που πρέπει να είναι πάντα φρέσκα από τον διακομιστή.

Ανάλυση Βελτιστοποίησης:

Αξιολογήστε την τρέχουσα υλοποίηση του localStorage και εξετάστε αυτές τις στρατηγικές ερωτήσεις:

• Ποια είναι η ελάχιστη πληροφορία που απαιτείται για τη διατήρηση της ταυτοποίησης του χρήστη;
• Ποια δεδομένα αλλάζουν αρκετά συχνά ώστε η τοπική προσωρινή αποθήκευση να παρέχει μικρό όφελος;
• Πώς μπορεί η βελτιστοποίηση αποθήκευσης να βελτιώσει την απόδοση χωρίς να υποβαθμίσει την εμπειρία χρήστη;

Στρατηγική Υλοποίησης:

• Εντοπίστε τα βασικά δεδομένα που πρέπει να παραμένουν επίμονα (πιθανώς μόνο η ταυτοποίηση χρήστη)
• Τροποποιήστε την υλοποίηση του localStorage ώστε να αποθηκεύει μόνο κρίσιμα δεδομένα συνεδρίας
• Εξασφαλίστε ότι φρέσκα δεδομένα φορτώνονται πάντα από τον διακομιστή κατά τις επισκέψεις στον πίνακα ελέγχου
• Δοκιμάστε ότι η βελτιστοποιημένη προσέγγιση διατηρεί την ίδια εμπειρία χρήστη

Προχωρημένη Εξέταση:

• Συγκρίνετε τα πλεονεκτήματα και τα μειονεκτήματα μεταξύ της αποθήκευσης πλήρων δεδομένων λογαριασμού και μόνο των tokens ταυτοποίησης
• Τεκμηριώστε τις αποφάσεις και τη συλλογιστική σας για μελλοντικά μέλη της ομάδας

Αυτή η πρόκληση θα σας βοηθήσει να σκέφτεστε σαν επαγγελματίας προγραμματιστής που λαμβάνει υπόψη τόσο την εμπειρία χρήστη όσο και την αποδοτικότητα της εφαρμογής. Πάρτε τον χρόνο σας για να πειραματιστείτε με διαφορετικές προσεγγίσεις!

Τεστ μετά το μάθημα

Τεστ μετά το μάθημα

Εργασία

Υλοποίηση διαλόγου "Προσθήκη συναλλαγής"

Ακολουθεί ένα παράδειγμα αποτελέσματος μετά την ολοκλήρωση της εργασίας:

---

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.