# Δημιουργία εφαρμογής τραπεζικής Μέρος 3: Μέθοδοι ανάκτησης και χρήσης δεδομένων
Σκεφτείτε τον υπολογιστή του Enterprise στο Star Trek - όταν ο Καπετάνιος Πικάρντ ζητά την κατάσταση του πλοίου, οι πληροφορίες εμφανίζονται αμέσως χωρίς ολόκληρο το περιβάλλον να κλείνει και να ξαναχτίζεται. Αυτή η αδιάλειπτη ροή πληροφοριών είναι ακριβώς αυτό που χτίζουμε εδώ με τη δυναμική ανάκτηση δεδομένων.
Προς το παρόν, η τραπεζική σας εφαρμογή μοιάζει με μια τυπωμένη εφημερίδα - ενημερωτική αλλά στατική. Θα την μετατρέψουμε σε κάτι περισσότερο σαν τον έλεγχο αποστολών της NASA, όπου τα δεδομένα ρέουν συνεχώς και ενημερώνονται σε πραγματικό χρόνο χωρίς να διακόπτουν τη ροή εργασίας του χρήστη.
Θα μάθετε πώς να επικοινωνείτε με διακομιστές ασύγχρονα, να χειρίζεστε δεδομένα που φτάνουν σε διαφορετικές στιγμές και να μετασχηματίζετε τις ακατέργαστες πληροφορίες σε κάτι ουσιαστικό για τους χρήστες σας. Αυτή είναι η διαφορά μεταξύ ενός demo και ενός λογισμικού έτοιμου για παραγωγή.
## ⚡ Τι μπορείτε να κάνετε στα επόμενα 5 λεπτά
**Γρήγορη Διαδρομή Εκκίνησης για Απασχολημένους Προγραμματιστές**
```mermaid
flowchart LR
A[⚡ 5 λεπτά] --> B[Ρύθμιση διακομιστή API]
B --> C[Δοκιμή ανάκτησης με curl]
C --> D[Δημιουργία λειτουργίας σύνδεσης]
D --> E[Δείτε τα δεδομένα σε δράση]
```
- **Λεπτό 1-2**: Ξεκινήστε τον API διακομιστή σας (`cd api && npm start`) και δοκιμάστε τη σύνδεση
- **Λεπτό 3**: Δημιουργήστε μια βασική συνάρτηση `getAccount()` χρησιμοποιώντας fetch
- **Λεπτό 4**: Συνδέστε τη φόρμα σύνδεσης με `action="javascript:login()"`
- **Λεπτό 5**: Δοκιμάστε τη σύνδεση και δείτε τα δεδομένα του λογαριασμού να εμφανίζονται στην κονσόλα
**Γρήγορες Δοκιμαστικές Εντολές**:
```bash
# Επαλήθευση ότι το API λειτουργεί
curl http://localhost:5000/api
# Δοκιμή ανάκτησης δεδομένων λογαριασμού
curl http://localhost:5000/api/accounts/test
```
**Γιατί είναι σημαντικό**: Σε 5 λεπτά θα δείτε τη μαγεία της ασύγχρονης ανάκτησης δεδομένων που τροφοδοτεί κάθε σύγχρονη διαδικτυακή εφαρμογή. Αυτή είναι η βάση που κάνει τις εφαρμογές να φαίνονται γρήγορες και ζωντανές.
## 🗺️ Το ταξίδι μάθησής σας στις διαδικτυακές εφαρμογές που βασίζονται σε δεδομένα
```mermaid
journey
title Από Στατικές Σελίδες σε Δυναμικές Εφαρμογές
section Κατανόηση της Εξέλιξης
Παραδοσιακός επαναφόρτωση σελίδας: 3: You
Ανακάλυψη πλεονεκτημάτων AJAX/SPA: 5: You
Εξοικείωση με πρότυπα Fetch API: 7: You
section Κατασκευή Αυθεντικοποίησης
Δημιουργία λειτουργιών σύνδεσης: 4: You
Διαχείριση ασύγχρονων λειτουργιών: 6: You
Διαχείριση συνεδριών χρήστη: 8: You
section Δυναμικές Ενημερώσεις UI
Μάθε χειρισμό DOM: 5: You
Δημιουργία οθονών συναλλαγών: 7: You
Δημιουργία ανταποκρινόμενων πίνακες εργαλείων: 9: You
section Επαγγελματικά Πρότυπα
Απόδοση βασισμένη σε πρότυπα: 6: You
Στρατηγικές διαχείρισης σφαλμάτων: 7: You
Βελτιστοποίηση απόδοσης: 8: You
```
**Προορισμός του ταξιδιού σας**: Μέχρι το τέλος αυτού του μαθήματος, θα κατανοείτε πώς οι σύγχρονες διαδικτυακές εφαρμογές ανακτούν, επεξεργάζονται και εμφανίζουν δεδομένα δυναμικά, δημιουργώντας τις αδιάλειπτες εμπειρίες χρήστη που περιμένουμε από επαγγελματικές εφαρμογές.
## Προ-διάλεξη Quiz
[Quiz προ-διάλεξης](https://ff-quizzes.netlify.app/web/quiz/45)
### Προαπαιτούμενα
Πριν βουτήξετε στην ανάκτηση δεδομένων, βεβαιωθείτε ότι έχετε έτοιμα τα εξής:
- **Προηγούμενο μάθημα**: Ολοκληρώστε τη [φόρμα σύνδεσης και εγγραφής](../2-forms/README.md) - θα χτίσουμε πάνω σε αυτή τη βάση
- **Τοπικός διακομιστής**: Εγκαταστήστε το [Node.js](https://nodejs.org) και [τρέξτε τον API διακομιστή](../api/README.md) για να παρέχεται δεδομένα λογαριασμού
- **Σύνδεση API**: Δοκιμάστε τη σύνδεση του διακομιστή σας με αυτή την εντολή:
```bash
curl http://localhost:5000/api
# Αναμενόμενη απάντηση: "Τράπεζα API v1.0.0"
```
Αυτή η γρήγορη δοκιμή διασφαλίζει ότι όλα τα μέρη επικοινωνούν σωστά:
- Επαληθεύει ότι το Node.js λειτουργεί σωστά στο σύστημά σας
- Επιβεβαιώνει ότι ο API διακομιστής είναι ενεργός και ανταποκρίνεται
- Βεβαιώνει ότι η εφαρμογή σας μπορεί να φτάσει τον διακομιστή (σαν να ελέγχετε το ραδιόφωνο πριν από μια αποστολή)
## 🧠 Επισκόπηση οικοσυστήματος διαχείρισης δεδομένων
```mermaid
mindmap
root((Διαχείριση Δεδομένων))
Authentication Flow
Login Process
Form Validation
Credential Verification
Session Management
User State
Global Account Object
Navigation Guards
Error Handling
API Communication
Fetch Patterns
GET Requests
POST Requests
Error Responses
Data Formats
JSON Processing
URL Encoding
Response Parsing
Dynamic UI Updates
DOM Manipulation
Safe Text Updates
Element Creation
Template Cloning
User Experience
Real-time Updates
Error Messages
Loading States
Security Considerations
XSS Prevention
textContent Usage
Input Sanitization
Safe HTML Creation
CORS Handling
Cross-Origin Requests
Header Configuration
Development Setup
```
**Βασική Αρχή**: Οι σύγχρονες διαδικτυακές εφαρμογές είναι συστήματα ορχήστρωσης δεδομένων - συντονίζουν μεταξύ διεπαφών χρήστη, API διακομιστών και προγραμμάτων προστασίας του προγράμματος περιήγησης για να δημιουργήσουν αδιάλειπτες, ανταποκρινόμενες εμπειρίες.
---
## Κατανόηση της Ανάκτησης Δεδομένων στις Σύγχρονες Εφαρμογές Web
Ο τρόπος που οι διαδικτυακές εφαρμογές διαχειρίζονται τα δεδομένα έχει εξελιχθεί δραστικά τα τελευταία είκοσι χρόνια. Η κατανόηση αυτής της εξέλιξης θα σας βοηθήσει να εκτιμήσετε γιατί οι σύγχρονες τεχνικές όπως το AJAX και το Fetch API είναι τόσο ισχυρές και γιατί έχουν γίνει απαραίτητα εργαλεία για τους web προγραμματιστές.
Ας εξερευνήσουμε πώς λειτουργούσαν οι παραδοσιακές ιστοσελίδες σε σύγκριση με τις δυναμικές, ανταποκρινόμενες εφαρμογές που δημιουργούμε σήμερα.
### Παραδοσιακές Πολυσελίδες Εφαρμογές (MPA)
Στις πρώτες μέρες του διαδικτύου, κάθε κλικ ήταν σαν να αλλάζετε κανάλι σε μια παλιά τηλεόραση - η οθόνη έσβηνε, και μετά σιγά-σιγά φορτωνόταν το νέο περιεχόμενο. Αυτή ήταν η πραγματικότητα των πρώτων διαδικτυακών εφαρμογών, όπου κάθε αλληλεπίδραση σήμαινε πλήρη ανανέωση της σελίδας από την αρχή.
```mermaid
sequenceDiagram
participant User
participant Browser
participant Server
User->>Browser: Κλικάρει σύνδεσμο ή υποβάλλει φόρμα
Browser->>Server: Ζητά νέα σελίδα HTML
Note over Browser: Η σελίδα γίνεται λευκή
Server->>Browser: Επιστρέφει πλήρη σελίδα HTML
Browser->>User: Εμφανίζει νέα σελίδα (αστραπή/επανεκκίνηση)
```
**Γιατί αυτή η προσέγγιση φαινόταν αδέξια:**
- Κάθε κλικ σήμαινε ανακατασκευή ολόκληρης της σελίδας από την αρχή
- Οι χρήστες διακόπτονταν στη σκέψη τους από αυτά τα ενοχλητικά αναβοσβήματα
- Η σύνδεση στο ίντερνετ δούλευε υπερωρίες κατεβάζοντας το ίδιο header και footer ξανά και ξανά
- Οι εφαρμογές έμοιαζαν περισσότερο με το να κάνεις κλικ σε μια κασέτα αρχείων παρά με τη χρήση λογισμικού
### Σύγχρονες Μονές Σελίδες Εφαρμογές (SPA)
Το AJAX (Asynchronous JavaScript and XML) άλλαξε αυτό το μοντέλο ριζικά. Όπως ο αρθρωτός σχεδιασμός του Διεθνούς Διαστημικού Σταθμού, όπου οι αστροναύτες μπορούν να αντικαταστήσουν μεμονωμένα εξαρτήματα χωρίς να ξαναφτιάξουν ολόκληρη τη δομή, το AJAX μας επιτρέπει να ενημερώνουμε συγκεκριμένα μέρη μιας ιστοσελίδας χωρίς να φορτώνουμε τα πάντα. Παρόλο που το όνομα αναφέρεται σε XML, σήμερα χρησιμοποιούμε κατά κύριο λόγο JSON, αλλά η βασική αρχή παραμένει: ενημερώνουμε μόνο ό,τι πρέπει να αλλάξει.
```mermaid
sequenceDiagram
participant User
participant Browser
participant JavaScript
participant Server
User->>Browser: Αλληλεπιδρά με τη σελίδα
Browser->>JavaScript: Ενεργοποιεί τον χειριστή συμβάντων
JavaScript->>Server: Λαμβάνει μόνο τα απαραίτητα δεδομένα
Server->>JavaScript: Επιστρέφει δεδομένα JSON
JavaScript->>Browser: Ενημερώνει συγκεκριμένα στοιχεία σελίδας
Browser->>User: Εμφανίζει ενημερωμένο περιεχόμενο (χωρίς ανανέωση)
```
**Γιατί οι SPA φαίνονται πολύ καλύτερες:**
- Ενημερώνει μόνο τα μέρη που πραγματικά άλλαξαν (έξυπνο, έτσι;)
- Δεν υπάρχουν πια διακοπές που ενοχλούν - οι χρήστες παραμένουν στη ροή τους
- Λιγότερα δεδομένα ταξιδεύουν στο δίκτυο, άρα γρηγορότερο φόρτωμα
- Όλα φαίνονται γρήγορα και ανταποκρινόμενα, όπως οι εφαρμογές στο τηλέφωνό σας
### Η Εξέλιξη στο Σύγχρονο Fetch API
Τα σύγχρονα προγράμματα περιήγησης παρέχουν το [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), που αντικαθιστά το παλιότερο [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Όπως η διαφορά μεταξύ τηλεγράφου και ηλεκτρονικού ταχυδρομείου, το Fetch API χρησιμοποιεί υποσχέσεις για καθαρότερο ασύγχρονο κώδικα και διαχειρίζεται το JSON με φυσικό τρόπο.
| Feature | XMLHttpRequest | Fetch API |
|---------|----------------|----------|
| **Σύνταξη** | Πολύπλοκη, βασισμένη σε callbacks | Καθαρή, βασισμένη σε promises |
| **Διαχείριση JSON** | Χρειάζεται χειροκίνητη ανάλυση | Ενσωματωμένη μέθοδος `.json()` |
| **Διαχείριση Σφαλμάτων** | Περιορισμένες πληροφορίες σφάλματος | Αναλυτικές λεπτομέρειες σφαλμάτων |
| **Σύγχρονη Υποστήριξη** | Συμβατότητα με legacy | Υποστηρίζει ES6+ promises και async/await |
> 💡 **Συμβατότητα με φυλλομετρητές**: Καλά νέα - το Fetch API δουλεύει σε όλα τα σύγχρονα προγράμματα περιήγησης! Αν ενδιαφέρεστε για συγκεκριμένες εκδόσεις, το [caniuse.com](https://caniuse.com/fetch) έχει την πλήρη ιστορία συμβατότητας.
>
**Συμπέρασμα:**
- Λειτουργεί άψογα σε Chrome, Firefox, Safari και Edge (βασικά όπου είναι οι χρήστες σας)
- Μόνο ο Internet Explorer χρειάζεται επιπλέον υποστήριξη (και ειλικρινά, έχει έρθει η ώρα να τον αφήσουμε)
- Σας προετοιμάζει τέλεια για τα κομψά μοτίβα async/await που θα χρησιμοποιήσουμε αργότερα
### Υλοποίηση Συστήματος Σύνδεσης Χρήστη και Ανάκτησης Δεδομένων
Τώρα ας υλοποιήσουμε το σύστημα σύνδεσης που μετατρέπει την τραπεζική εφαρμογή σας από μια στατική εμφάνιση σε μια λειτουργική εφαρμογή. Όπως τα πρωτόκολλα αυθεντικοποίησης που χρησιμοποιούνται σε ασφαλείς στρατιωτικές εγκαταστάσεις, θα επαληθεύσουμε τα διαπιστευτήρια του χρήστη και μετά θα δώσουμε πρόσβαση σε συγκεκριμένα δεδομένα του.
Θα το χτίσουμε σταδιακά, ξεκινώντας με την βασική αυθεντικοποίηση και μετά προσθέτοντας τις δυνατότητες ανάκτησης δεδομένων.
#### Βήμα 1: Δημιουργία του Θεμελίου της Συνάρτησης Σύνδεσης
Ανοίξτε το αρχείο `app.js` και προσθέστε μια καινούρια συνάρτηση `login`. Αυτή θα χειρίζεται τη διαδικασία αυθεντικοποίησης χρήστη:
```javascript
async function login() {
const loginForm = document.getElementById('loginForm');
const user = loginForm.user.value;
}
```
**Ας το αναλύσουμε:**
- Η λέξη-κλειδί `async`; Λέει στον JavaScript "ε, αυτή η συνάρτηση ίσως χρειαστεί να περιμένει"
- Παίρνουμε τη φόρμα από τη σελίδα (τίποτα ιδιαίτερο, απλά την βρίσκουμε με το ID της)
- Μετά παίρνουμε το όνομα χρήστη που έγραψε ο χρήστης
- Ένα ωραίο κόλπο: μπορείς να προσπελάσεις οποιοδήποτε πεδίο φόρμας με το `name` του - χωρίς επιπλέον κλήσεις getElementById!
> 💡 **Πρότυπο πρόσβασης φόρμας**: Κάθε στοιχείο φόρμας είναι προσβάσιμο με το `name` του (ορίζεται στο HTML με το attribute `name`) ως ιδιότητα του στοιχείου φόρμας. Αυτό παρέχει έναν καθαρό, ευανάγνωστο τρόπο να πάρεις δεδομένα από τη φόρμα.
#### Βήμα 2: Δημιουργία της Συνάρτησης Ανάκτησης Δεδομένων Λογαριασμού
Στη συνέχεια, θα δημιουργήσουμε μια ξεχωριστή συνάρτηση για να ανακτούμε δεδομένα λογαριασμού από τον διακομιστή. Ακολουθεί το ίδιο μοτίβο με τη συνάρτηση εγγραφής αλλά επικεντρώνεται στην ανάκτηση δεδομένων:
```javascript
async function getAccount(user) {
try {
const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
return await response.json();
} catch (error) {
return { error: error.message || 'Unknown error' };
}
}
```
**Τι πετυχαίνει αυτός ο κώδικας:**
- **Χρησιμοποιεί** το σύγχρονο API `fetch` για ασύγχρονη ανάκτηση δεδομένων
- **Κατασκευάζει** ένα URL αιτήματος GET με παράμετρο το όνομα χρήστη
- **Εφαρμόζει** το `encodeURIComponent()` για ασφαλή διαχείριση ειδικών χαρακτήρων στα URLs
- **Μετατρέπει** την απόκριση σε μορφή JSON για εύκολη διαχείριση δεδομένων
- **Χειρίζεται** ευγενικά τα σφάλματα επιστρέφοντας ένα αντικείμενο λάθους αντί να καταρρεύσει
> ⚠️ **Σημείωση Ασφαλείας**: Η λειτουργία `encodeURIComponent()` διαχειρίζεται ειδικούς χαρακτήρες στα URLs. Όπως τα συστήματα κωδικοποίησης στις ναυτικές επικοινωνίες, διασφαλίζει ότι το μήνυμά σας φτάνει ακριβώς όπως πρέπει, αποτρέποντας παρερμηνείες χαρακτήρων όπως το "#" ή "&".
>
**Γιατί αυτό είναι σημαντικό:**
- Αποτρέπει τους ειδικούς χαρακτήρες από το να σπάσουν το URL
- Προστατεύει από επιθέσεις χειρισμού URL
- Εξασφαλίζει ότι ο διακομιστής λαμβάνει τα σωστά δεδομένα
- Ακολουθεί πρακτικές ασφαλούς κώδικα
#### Κατανόηση των HTTP GET Αιτήσεων
Κάτι που ίσως σας εκπλήξει: όταν χρησιμοποιείτε `fetch` χωρίς επιπλέον επιλογές, αυτόματα δημιουργεί μια αίτηση [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET). Αυτό είναι τέλειο για αυτό που κάνουμε - ζητώντας από τον διακομιστή "με ενημερώνεις για τα δεδομένα λογαριασμού αυτού του χρήστη;"
Να σκεφτείτε τις αιτήσεις GET σαν να ζητάτε ευγενικά να δανειστείτε ένα βιβλίο από τη βιβλιοθήκη - ζητάτε να δείτε κάτι που ήδη υπάρχει. Οι αιτήσεις POST (που χρησιμοποιήσαμε στην εγγραφή) είναι περισσότερο σαν να προσθέτετε ένα νέο βιβλίο στη συλλογή.
| Αίτηση GET | Αίτηση POST |
|-------------|-------------|
| **Σκοπός** | Ανάκτηση υπαρχόντων δεδομένων | Αποστολή νέων δεδομένων στον διακομιστή |
| **Παράμετροι** | Στο URL / query string | Στο σώμα του αιτήματος |
| **Caching** | Μπορεί να αποθηκεύεται στην προσωρινή μνήμη | Σπάνια αποθηκεύεται |
| **Ασφάλεια** | Ορατό στο URL / logs | Κρυμμένο στο σώμα του αιτήματος |
```mermaid
sequenceDiagram
participant B as Browser
participant S as Server
Note over B,S: Αίτημα GET (Ανάκτηση Δεδομένων)
B->>S: GET /api/accounts/test
S-->>B: 200 OK + Δεδομένα Λογαριασμού
Note over B,S: Αίτημα POST (Υποβολή Δεδομένων)
B->>S: POST /api/accounts + Νέα Δεδομένα Λογαριασμού
S-->>B: 201 Created + Επιβεβαίωση
Note over B,S: Διαχείριση Σφαλμάτων
B->>S: GET /api/accounts/nonexistent
S-->>B: 404 Not Found + Μήνυμα Σφάλματος
```
#### Βήμα 3: Ενσωμάτωση Όλων Μαζί
Τώρα στο πιο ικανοποιητικό σημείο - ας συνδέσουμε τη συνάρτηση ανάκτησης λογαριασμού με τη διαδικασία σύνδεσης. Εδώ όλα ενώνονται:
```javascript
async function login() {
const loginForm = document.getElementById('loginForm');
const user = loginForm.user.value;
const data = await getAccount(user);
if (data.error) {
return console.log('loginError', data.error);
}
account = data;
navigate('/dashboard');
}
```
Αυτή η συνάρτηση ακολουθεί μια ξεκάθαρη αλληλουχία:
- Βγάζει το όνομα χρήστη από την εισαγωγή της φόρμας
- Ζητάει τα δεδομένα λογαριασμού από τον διακομιστή
- Διαχειρίζεται τυχόν σφάλματα που προκύπτουν στη διαδικασία
- Αποθηκεύει τα δεδομένα του λογαριασμού και μεταβαίνει στον πίνακα ελέγχου μετά από επιτυχία
> 🎯 **Μοτίβο Async/Await**: Επειδή η `getAccount` είναι ασύγχρονη, χρησιμοποιούμε το `await` για να σταματήσει η εκτέλεση μέχρι να απαντήσει ο διακομιστής. Αυτό αποτρέπει την εκτέλεση κώδικα με ασαφή δεδομένα.
#### Βήμα 4: Δημιουργώντας Χώρο για τα Δεδομένα σας
Η εφαρμογή σας χρειάζεται έναν χώρο για να θυμάται τα δεδομένα του λογαριασμού μόλις φορτωθούν. Σκεφτείτε το σαν τη βραχυπρόθεσμη μνήμη της εφαρμογής - ένα μέρος για να κρατάτε τα δεδομένα του τρέχοντος χρήστη στη διάθεση σας. Προσθέστε αυτή τη γραμμή στην αρχή του αρχείου `app.js`:
```javascript
// Αυτή περιέχει τα δεδομένα λογαριασμού του τρέχοντος χρήστη
let account = null;
```
**Γιατί το χρειαζόμαστε:**
- Κρατά τα δεδομένα του λογαριασμού προσβάσιμα από οπουδήποτε στην εφαρμογή
- Το ξεκίνημα με `null` σημαίνει "κανείς δεν έχει συνδεθεί ακόμα"
- Ενημερώνεται όταν κάποιος συνδεθεί ή εγγραφεί επιτυχώς
- Λειτουργεί σαν μια μεμονωμένη πηγή αλήθειας - χωρίς σύγχυση για το ποιος είναι συνδεδεμένος
#### Βήμα 5: Συνδέστε τη Φόρμα σας
Τώρα ας συνδέσουμε τη νέα σας συνάρτηση σύνδεσης με τη φόρμα HTML. Ενημερώστε το tag της φόρμας έτσι:
```html
```
**Τι κάνει αυτή η μικρή αλλαγή:**
- Σταματάει τη φόρμα να κάνει την προεπιλεγμένη συμπεριφορά της "επαναφόρτωσης ολόκληρης της σελίδας"
- Καλεί τη δική σας συνάρτηση JavaScript αντί γι’ αυτό
- Κρατά όλα ομαλά και μοιάζει με εφαρμογή μονής σελίδας
- Σας δίνει πλήρη έλεγχο για το τι συμβαίνει όταν ο χρήστης πατά "Σύνδεση"
#### Βήμα 6: Ενισχύστε τη Συνάρτηση Εγγραφής σας
Για συνέπεια, ενημερώστε τη συνάρτηση `register` ώστε να αποθηκεύει επίσης τα δεδομένα λογαριασμού και να οδηγεί στον πίνακα ελέγχου:
```javascript
// Προσθέστε αυτές τις γραμμές στο τέλος της συνάρτησής σας εγγραφής
account = result;
navigate('/dashboard');
```
**Αυτή η βελτίωση παρέχει:**
- **Αδιάλειπτη** μετάβαση από την εγγραφή στον πίνακα ελέγχου
- **Συνεπή** εμπειρία χρήστη ανάμεσα στις ροές σύνδεσης και εγγραφής
- **Άμεση** πρόσβαση στα δεδομένα λογαριασμού μετά την επιτυχή εγγραφή
#### Δοκιμάστε την Υλοποίησή σας
```mermaid
flowchart TD
A[Ο χρήστης εισάγει τα διαπιστευτήρια] --> B[Η συνάρτηση σύνδεσης καλείται]
B --> C[Ανάκτηση δεδομένων λογαριασμού από τον διακομιστή]
C --> D{Τα δεδομένα ελήφθησαν επιτυχώς;}
D -->|Ναι| E[Αποθήκευση δεδομένων λογαριασμού παγκοσμίως]
D -->|Όχι| F[Εμφάνιση μηνύματος σφάλματος]
E --> G[Πλοήγηση στον πίνακα ελέγχου]
F --> H[Ο χρήστης παραμένει στη σελίδα σύνδεσης]
```
**Ώρα να τη δοκιμάσετε:**
1. Δημιουργήστε έναν καινούριο λογαριασμό για να βεβαιωθείτε ότι όλα δουλεύουν
2. Προσπαθήστε να συνδεθείτε με τα ίδια στοιχεία
3. Ρίξτε μια ματιά στην κονσόλα του προγράμματος περιήγησής σας (F12) αν κάτι φαίνεται περίεργο
4. Βεβαιωθείτε ότι προσγειώνεστε στον πίνακα ελέγχου μετά από επιτυχή σύνδεση
Αν κάτι δεν δουλεύει, μην πανικοβάλλεστε! Οι περισσότερες δυσλειτουργίες είναι απλά λάθη πληκτρολόγησης ή παράλειψη εκκίνησης του API διακομιστή.
#### Μια Σύντομη Λέξη για το Μαγικό Cross-Origin
Μπορεί να αναρωτιέστε: "Πώς μιλάει η web εφαρμογή μου με αυτόν τον API διακομιστή όταν τρέχουν σε διαφορετικές θύρες;" Καλή ερώτηση! Αυτό είναι κάτι που όλοι οι web προγραμματιστές συναντούν αργά ή γρήγορα.
> 🔒 **Security Cross-Origin**: Τα προγράμματα περιήγησης επιβάλλουν μια "πολιτική ίδιας προέλευσης" για να αποτρέψουν μη εξουσιοδοτημένη επικοινωνία ανάμεσα σε διαφορετικά domains. Όπως το σύστημα ελέγχου στο Πεντάγωνο, ελέγχουν αν η επικοινωνία είναι εξουσιοδοτημένη πριν επιτρέψουν τη μεταφορά δεδομένων.
>
**Στη διάταξή μας:**
- Η web εφαρμογή σου τρέχει στο `localhost:3000` (διακομιστής ανάπτυξης)
- Ο API διακομιστής τρέχει στο `localhost:5000` (διακομιστής backend)
- Ο API διακομιστής περιλαμβάνει [CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS) που ρητά επιτρέπουν την επικοινωνία από την web εφαρμογή σου
Αυτή η ρύθμιση μιμείται την πραγματική ανάπτυξη όπου frontend και backend εφαρμογές τυπικά τρέχουν σε ξεχωριστούς διακομιστές.
> 📚 **Μάθε περισσότερα**: Εμβαθύνετε στις APIs και την ανάκτηση δεδομένων με αυτό το αναλυτικό [Microsoft Learn module για APIs](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon).
## Ζωντανεύοντας τα Δεδομένα σας στο HTML
Τώρα θα κάνουμε τα δεδομένα που ανακτήθηκαν ορατά στους χρήστες μέσω χειρισμού του DOM. Όπως η διαδικασία εμφάνισης φωτογραφιών σε ένα σκοτεινό θάλαμο, παίρνουμε αόρατα δεδομένα και τα αποδίδουμε σε κάτι που οι χρήστες μπορούν να δουν και να αλληλεπιδράσουν.
Η διαχείριση του DOM είναι η τεχνική που μετατρέπει τις στατικές ιστοσελίδες σε δυναμικές εφαρμογές που ενημερώνουν το περιεχόμενό τους βάσει των αλληλεπιδράσεων των χρηστών και των απαντήσεων του διακομιστή.
### Επιλογή του Κατάλληλου Εργαλείου για τη Δουλειά
Όταν πρόκειται να ενημερώσετε το HTML σας με JavaScript, έχετε πολλές επιλογές. Σκεφτείτε αυτές σαν διαφορετικά εργαλεία σε ένα κιτ εργαλείων - το καθένα ιδανικό για συγκεκριμένες δουλειές:
| Μέθοδος | Για τι είναι εξαιρετική | Πότε να τη χρησιμοποιήσετε | Επίπεδο ασφάλειας |
|--------|------------------------|----------------------------|-------------------|
| `textContent` | Εμφάνιση δεδομένων χρήστη με ασφάλεια | Οποιαδήποτε στιγμή προβάλλετε κείμενο | ✅ Ακλόνητη |
| `createElement()` + `append()` | Δημιουργία σύνθετων διατάξεων | Δημιουργία νέων τμημάτων/λίστες | ✅ Αλεξίσφαιρη |
| `innerHTML` | Ορισμός περιεχομένου HTML | ⚠️ Προσπαθήστε να το αποφεύγετε | ❌ Επικίνδυνη |
#### Ο Ασφαλής Τρόπος για Εμφάνιση Κειμένου: textContent
Η ιδιότητα [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) είναι ο καλύτερός σας φίλος όταν εμφανίζετε δεδομένα χρήστη. Είναι σαν να έχετε έναν θυρωρό για την ιστοσελίδα σας - τίποτα επιβλαβές δεν περνάει:
```javascript
// Ο ασφαλής, αξιόπιστος τρόπος για να ενημερώνετε κείμενο
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;
```
**Οφέλη του textContent:**
- Αντιμετωπίζει τα πάντα ως απλό κείμενο (αποτρέπει την εκτέλεση σκριπτ)
- Καθαρίζει αυτόματα το υπάρχον περιεχόμενο
- Αποτελεσματικό για απλές ενημερώσεις κειμένου
- Παρέχει ενσωματωμένη ασφάλεια ενάντια σε κακόβουλο περιεχόμενο
#### Δημιουργία Δυναμικών Στοιχείων HTML
Για πιο σύνθετο περιεχόμενο, συνδυάστε τη μέθοδο [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) με τη μέθοδο [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append):
```javascript
// Ασφαλής τρόπος για τη δημιουργία νέων στοιχείων
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);
```
**Κατανόηση αυτής της προσέγγισης:**
- **Δημιουργεί** νέα στοιχεία DOM προγραμματιστικά
- **Διατηρεί** πλήρη έλεγχο στα χαρακτηριστικά και περιεχόμενο των στοιχείων
- **Επιτρέπει** σύνθετες, εμφωλευμένες δομές στοιχείων
- **Διατηρεί** την ασφάλεια αποχωρίζοντας τη δομή από το περιεχόμενο
> ⚠️ **Ασφαλιστική σκέψη**: Παρόλο που το [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) εμφανίζεται σε πολλά tutorials, μπορεί να εκτελέσει ενσωματωμένα σκριπτ. Όπως τα πρωτόκολλα ασφαλείας στο CERN που αποτρέπουν μη εξουσιοδοτημένη εκτέλεση κώδικα, η χρήση των `textContent` και `createElement` παρέχει πιο ασφαλείς εναλλακτικές.
>
**Κίνδυνοι του innerHTML:**
- Εκτελεί κάθε `