Web-Dev-For-Beginners/translations/et/7-bank-project/3-data

Pangaäpi loomine 3. osa: andmete toomise ja kasutamise meetodid

Mõtle Star Treki Enterprise'i arvutile – kui kapten Picard küsib laeva olekut, ilmub info koheselt ilma kogu liidese sulgemise ja uuesti ülesehitamiseta. See sujuv infovoog ongi täpselt see, mida me siin dünaamilise andmete toomisega ehitame.

Praegu on su pangarakendus nagu trükitud ajaleht – informatiivne, aga staatiline. Muudame selle midagi NASA missioonikontrolli taolisele, kus andmed voolavad pidevalt ja uuenevad reaalajas, katkestamata kasutaja tööd.

Õpid suhtlema serveritega asünkroonselt, käsitlema andmeid, mis saabuvad erinevatel aegadel, ning muutma toored andmed millekski tähenduslikuks oma kasutajatele. See on vahe demo ja tootmiseks valmis tarkvara vahel.

⚡ Mida saad teha järgmise 5 minutiga

Kiire algus hõivatud arendajatele

flowchart LR
    A[⚡ 5 minutit] --> B[Seadista API server]
    B --> C[Testi päringut curliga]
    C --> D[Loo sisselogimise funktsioon]
    D --> E[Näe andmeid tegevuses]

• Minut 1-2: Käivita oma API server (cd api && npm start) ja testi ühendus
• Minut 3: Loo lihtne getAccount() funktsioon kasutades fetchi
• Minut 4: Seosta sisselogimisvorm action="javascript:login()" atribuudiga
• Minut 5: Testi sisselogimist ja jälgi kontode andmete ilmumist konsoolis

Kiired testikäsklused:

# Kontrolli, kas API töötab
curl http://localhost:5000/api

# Testkontoga andmete toomine
curl http://localhost:5000/api/accounts/test

Miks see oluline on: 5 minutiga näed asünkroonse andmete toomise maagiat, mis töötab iga kaasaegse veebirakenduse aluseks. See on vundament, mis paneb äppide tunduma kiire ja elusana.

🗺️ Sinu õpiteek andmepõhistesse veebirakendustesse

journey
    title Staatilistest lehtedest dünaamiliste rakendusteni
    section Arengu mõistmine
      Tavapärased lehe laadimised: 3: You
      AJAX/SPA eeliste avastamine: 5: You
      Fetch API mustrite valdamine: 7: You
    section Autentimise loomine
      Sisselogimisfunktsioonide loomine: 4: You
      Asünkroonsete toimingute käsitlemine: 6: You
      Kasutajasessioonide haldamine: 8: You
    section Dünaamilised UI uuendused
      DOM manipuleerimise õppimine: 5: You
      Tehingute kuvade ehitamine: 7: You
      Reageerivate juhtpaneelide loomine: 9: You
    section Professionaalsed mustrid
      Mallipõhine renderdamine: 6: You
      Veahaldusstrateegiad: 7: You
      Tõhususe optimeerimine: 8: You

Õpiteekonnal sihtpunkt: Selle loengu lõpuks saad aru, kuidas kaasaegsed veebirakendused toovad, töötlevad ja kuvavad andmeid dünaamiliselt, luues professionaalseid kasutajakogemusi, mida me ootame.

Eelloengu viktoriin

Eelloengu viktoriin

Eeldused

Enne andmete toomise algust veendu, et sul on valmis järgmised komponendid:

• Eelmine õppetükk: Lõpeta Sisselogimis- ja registreerimisvorm – ehitame selle peale
• Kohalik server: Paigalda Node.js ja käivita serveri API, et pakkuda kontode andmeid
• API ühendus: Testi oma serveri ühendust selle käsuga:

curl http://localhost:5000/api
# Oodatud vastus: "Panga API v1.0.0"

See kiire test tagab, et kõik komponendid suhtlevad korrektselt:

• Kontrollib, et Node.js töötab su süsteemis õigesti
• Kinnitub, et API server on aktiivne ja vastab
• Veendub, et sinu äpp saab serveriga ühendust (nagu raadioside kontroll enne missiooni)

🧠 Andmehaldussüsteemi ülevaade

mindmap
  root((Andmete Haldamine))
    Authentication Flow
      Login Process
        Vormi Kontrollimine
        Tunnuste Kinnitus
        Seansi Halduse
      User State
        Globaalne Konto Objekt
        Navigatsiooni Kaitse
        Veahaldus
    API Communication
      Fetch Patterns
        GET Päringud
        POST Päringud
        Veavastused
      Data Formats
        JSON Töötlemine
        URL Kodeerimine
        Vastuse Parseerimine
    Dynamic UI Updates
      DOM Manipulation
        Turvalised Teksti Uuendused
        Elemendi Loomine
        Malli Kloonimine
      User Experience
        Reaalaja Uuendused
        Veateated
        Laadimise Oleku
    Security Considerations
      XSS Prevention
        textContent Kasutus
        Sisendi Sanitiseerimine
        Turvalise HTML Loomine
      CORS Handling
        Rist-päritolu Päringud
        Päise Konfiguratsioon
        Arenduse Seadistamine

Põhiprintsiip: Kaasaegsed veebirakendused on andmete orkestreerimissüsteemid – nad koordineerivad kasutajaliideseid, serveri API-sid ja brauseri turvemudeleid, et luua sujuvaid ja reageerivaid kogemusi.

---

Arusaamine andmete toomisest kaasaegsetes veebirakendustes

Veebirakenduste viis andmeid käsitleda on viimase kahekümne aastaga oluliselt arenenud. Selle arenguga arusaamine aitab mõista, miks tänapäevased tehnikad nagu AJAX ja Fetch API on nii võimsad ja miks need on saanud veebiarendajate jaoks asendamatuks tööriistaks.

Uurime, kuidas traditsioonilised veebilehed töötasid võrreldes dünaamiliste reageerivate rakendustega, mida täna ehitame.

Traditsioonilised mitmelehelised rakendused (MPA)

Veebi algusaegadel oli iga klikkimine nagu telekanalite vahetamine vanas teleris – ekraan läks mustaks ja tihkus aeglaselt uue sisuga täituma. Selline oli varajaste veebirakenduste reaalsus, kus iga tegevus tähendas terve lehe nullist uuesti ülesehitamist.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Klikib linki või esitab vormi
    Browser->>Server: Nõuab uut HTML lehte
    Note over Browser: Leht muutub tühjaks
    Server->>Browser: Tagastab täieliku HTML lehe
    Browser->>User: Kuvab uue lehe (vilgub/laeb uuesti)

Miks see tundus kohmakas:

• Iga klikiga tuli terve leht nullist ehitada
• Kasutajate mõtlemine katkestati nende tüütute lehevilkumistega
• Su internetiühendus töötas ülekoormatud, laadides ikka ja jälle sama päist ja jalust
• Rakendused tundusid pigem kausta sirvimisena kui tarkvara kasutamisena

Kaasaegsed ühelehelised rakendused (SPA)

AJAX (asünkroonne JavaScript ja XML) muutis selle paradigma täielikult. Nagu Rahvusvahelise Kosmosejaama modulaarne ehitus, kus astronaudid saavad vahetada üksikuid komponente ilma kogu struktuuri uuesti ehitmata, võimaldab AJAX meil uuendada veebilehe kindlaid osi ilma kogu lehte uuesti laadimata. Kuigi nimetus sisaldab XML-i, kasutame enamasti JSON-i, aga põhimõte on sama: uuendame ainult seda, mis vajab muutmist.

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Suhelda lehega
    Browser->>JavaScript: Käivitab sündmusekäsitleja
    JavaScript->>Server: Hangib ainult vajalikke andmeid
    Server->>JavaScript: Tagastab JSON-andmed
    JavaScript->>Browser: Uuendab kindlaid lehe elemente
    Browser->>User: Kuvab uuendatud sisu (ilma taaskäivitamiseta)

Miks SPA-d tunduvad nii palju sujuvamad:

• Uuendatakse ainult neid osi, mis tegelikult muutusid (nutikas, eks?)
• Pole enam ebameeldivaid katkestusi – kasutajad jäävad oma voogu
• Vähem andmeid liigub üle võrgu, seepärast laadimine on kiirem
• Kõik tundub kiirem ja reageerivam, nagu telefoniäpid

Areng kaasaegse Fetch API-sse

Kaasaegsed brauserid pakuvad Fetch API-d, mis asendab vanema XMLHttpRequest. Nagu mürale kirjutamise ja e-kirja saatmise vahe – Fetch API kasutab lubadusi (promises) puhtama asünkroonse koodi jaoks ning töötab loomulikult JSON-iga.

Omadus	XMLHttpRequest	Fetch API
Süntaks	Komplitseeritud tagasikutsumisega	Puhtalt lubadustel põhinev
JSON käsitlemine	Vajab käsitsi parsimist	Sisseehitatud .json() meetod
Veahaldus	Piiratud veateave	Ulatuslikud veateated
Kaasaegne tugi	Pärandkompatibliilsus	ES6+ lubadused ja async/await

💡 Brauseri ühildumine: Hea uudis – Fetch API töötab kõigis kaasaegsetes brauserites! Kui huvitab konkreetne versioon, on täielik ühilduvusloetelu caniuse.com.

Põhitõde:

• Töötab suurepäraselt Chrome, Firefox, Safari ja Edge brauserites (läbi keerulisuse kõikjal, kus su kasutajad on)
• Ainult Internet Explorer vajab lisaabi (ja ausalt öeldes on aeg IE-st loobuda)
• Valmistab sind hästi ette sujuvaks async/await mustrite kasutamiseks, mida hiljem kasutame

Kasutaja sisselogimise ja andmete pärimise rakendamine

Rakendame nüüd sisselogimissüsteemi, mis muudab su pangarakenduse staatilisest kuvarist funktsionaalseks äpiks. Nagu turvameetmed sõjaväebaaside autentimisel, kontrollime kasutaja volitusi ja seejärel võimaldame ligipääsu nende andmetele.

Ehitame selle sammhaaval, alustades põhilisest autentimisest ja seejärel lisades andmete toomise.

Samm 1: Loo sisselogimisfunktsiooni alus

Ava oma app.js fail ja lisa uus login funktsioon, mis haldab kasutaja autentimist:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
}

Läheme selle läbi:

• See async märksõna? See ütleb JavaScriptile: "see funktsioon võib vajada ootamist"
• Saame oma vormi lehelt (midagi erilist, leiame selle lihtsalt ID kaudu)
• Seejärel võtame välja, mida kasutaja kasutajanime lahtrisse kirjutas
• Nüüd üks nipp: igale vormi sisendile pääseb ligi selle name atribuudi kaudu – pole vaja keerulist getElementById kutsumist!

💡 Vormile ligipääsu muster: Iga vormikontrolli saab kätte tema nime järgi (HTML-is määratud name atribuudi kaudu) kui vormi omaduse – see annab puhta ja loetava võimaluse vormiandmete saamiseks.

Samm 2: Loo kontoandmete toomise funktsioon

Edasi loome pühendatud funktsiooni, mis toob serverist kontoandmeid. See järgib sama mustrit nagu su registreerimisfunktsioon, aga keskendub andmete pärimisele:

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' };
  }
}

See kood teeb järgmist:

• Kasutab kaasaegset fetch API-d asünkroonseks andmete pärimiseks
• Ehitatakse GET päringu URL koos kasutajanime parameetriga
• Rakendab encodeURIComponent() funktsiooni, et turvaliselt töödelda erisümboleid URL-is
• Muutab vastuse JSON-formaati, et hõlpsalt andmeid töödelda
• Haldab vigu graatsiliselt, tagastades vea objekti, mitte äpi kokkujooksmise

⚠️ Turvapähekanne: encodeURIComponent() tagab, et erisümbolid URL-ides ei muutu valeks - nagu sõjalaevade sidekodeeringud, tagab see sõnumi õige kohalejõudmise ja väldib näiteks "#" või "&" vale mõistmist.

Miks see oluline on:

• Väldib erisümbolitega URL-i rikkeid
• Kaitseb URL manipuleerimise rünnakute eest
• Tagab, et server saab õige päringu
• Järgib turvalise kodeerimise tavasid

HTTP GET päringute mõistmine

Siin on üllatav fakt: kui kasutad fetch ilma lisavalikuteta, teeb ta automaatselt GET päringu. See sobib meie eesmärgiks – küsida serverilt "palun näita selle kasutaja kontoandmeid".

GET päring on nagu viisakas raamatukogust raamatu laenamine – sa palud midagi vaadata, mis juba olemas on. POST päringud (mida kasutasime registreerimisel) on pigem nagu uue raamatu esitlemine kogusse.

GET päring	POST päring
Eesmärk	Oleva andme vaatamine
Parameetrid	URL teel/küsimustestringis
Vahemällu salvestus	Brauserid võivad vahemällu salvestada
Turvalisus	Nähtav URL-is ja logides

sequenceDiagram
    participant B as Brauser
    participant S as Server
    
    Note over B,S: GET-päring (andmete päring)
    B->>S: GET /api/accounts/test
    S-->>B: 200 OK + kontoandmed
    
    Note over B,S: POST-päring (andmete saatmine)
    B->>S: POST /api/accounts + uued kontoandmed
    S-->>B: 201 Created + kinnitus
    
    Note over B,S: Vea käsitlemine
    B->>S: GET /api/accounts/nonexistent
    S-->>B: 404 Not Found + veateade

Samm 3: Kõike kokku toomine

Selleks rahuldustpakkuvaks osaks ühenda oma kontoandmete pärimise funktsioon sisselogimise protsessiga. Siin kõik omavahel klapib:

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');
}

See funktsioon järgib selget järjestust:

• Võtab kasutajanime vormi sisendist
• Pärib kasutaja kontoandmed serverist
• Haldab tekkivaid vigu
• Salvestab kontoandmed ja liigub edukal sisselogimisel armatuurlauale

🎯 Async/Await muster: Kuna getAccount on asünkroonne, kasutame await märksõna, et peatada kood serveri vastuseni ootama. See hoiab ära koodi jooksu määratlemata andmetega.

Samm 4: Andmete hoidla loomine

Su äpil peab olema koht, kuhu kontoandmeid pärast laadimist salvestada – kujutle seda kui äpi lühimälu, kus hoitakse käesoleva kasutaja andmeid. Lisa see rida oma app.js faili ülaossa:

// See hoiab käesoleva kasutaja kontoandmeid
let account = null;

Miks seda vaja on:

• Hoiab kontoandmed kättesaadavana igast rakenduse osast
• Algväärtus null tähendab "keegi pole veel sisse logitud"
• Uuendub, kui keegi edukalt sisse logib või registreerub
• Toimib tõe ühtse allikana – pole segadust, kes on sisse logitud

Samm 5: Vormiga ühenduse loomine

Ühenda oma äsja loodud sisselogimisfunktsioon HTML vormiga. Uuenda oma vormi sildi nii:

<form id="loginForm" action="javascript:login()">
  <!-- Your existing form inputs -->
</form>

Milleks see väike muudatus:

• Takistab vormil oma vaikekäitumist, mis oleks kogu lehe uuesti laadimine
• Kutsutakse selle asemel sinu loodud JavaScripti funktsioon
• Tagab sujuva ühelehelise rakenduse kogemuse
• Annab täieliku kontrolli selle üle, mis juhtub, kui kasutaja klikib "Login"

Samm 6: Paranda registreerimisfunktsiooni

Ühtlustamiseks uuenda ka oma register funktsiooni nii, et salvestatakse kontodata ja liigutakse armatuurlauale:

// Lisage need read oma registreerimisfunktsiooni lõppu
account = result;
navigate('/dashboard');

See täiendus annab:

• Sujuva ülemineku registreerimisest armatuurlauale
• Ühtse kasutajakogemuse nii sisselogimise kui registreerimise protsessides
• Vahetu ligipääsu kontoandmetele edukal registreerimisel

Oma koodi testimine

flowchart TD
    A[Kasutaja sisestab mandaadid] --> B[Sisselogimisfunktsioon kutsutud]
    B --> C[Kontode andmete pärimine serverist]
    C --> D{Andmed edukalt kätte saadud?}
    D -->|Jah| E[Kontode andmete globaalne salvestamine]
    D -->|Ei| F[Vea teate kuvamine]
    E --> G[Liigu juhtpaneelile]
    F --> H[Kasutaja jääb sisselogimislehele]

Nüüd aeg proovida:

1. Loo uus konto, et veenduda, et kõik töötab
2. Proovi nendega sisse logida
3. Kui midagi tundub paigast, vaata brauseri konsooli (F12)
4. Veendu, et pärast edukat sisselogimist jõuad armatuurlauale

Kui midagi ei tööta, ära paanitse! Enamik probleeme on lihtsad vead, nagu trükivead või API serveri mittetöölepanemine.

Kiire märkuse arengutevahelise nõidusest (Cross-Origin)

Võib-olla küsid: "Kuidas mu veebirakendus suhtleb API serveriga, kui nad töötavad erinevatel portidel?" Väga hea küsimus! See puudutab midagi, millega iga veebiarendaja kunagi kokku puutub.

🔒 Cross-Origin turvalisus: Brauserid rakendavad "same-origin policy" ehk samu-juurte reeglit, et takistada volitamata side loomist erinevate domeenide vahel. Nagu Pentagoni turvafilter, kontrollitakse sideõigust enne andmete edastamist.

Meie konfiguratsioonis:

• Sinu veebirakendus jookseb localhost:3000 (arendusserver)
• Sinu API server töötab localhost:5000 (tagaruumiserver)
• API server lisab CORS pealkirjad, mis lubavad su veebirakendusel temaga suhelda

See peegeldab reaalse maailma arendust, kus frontend- ja backend-rakendused tavaliselt jooksevad eraldiseisvatel serveritel.

📚 Lisaks lugemiseks: Süvene API-de ja andmete toomise teemadesse selle põhjaliku Microsoft Learn mooduli kaudu.

Andmete elustamine HTML-is

Nüüd teeme toodu andmed kasutajatele nähtavaks DOM-i manipuleerimisega. Nagu fotode ilmutamine pimedas ruumis, muudame nähtamatud andmed millekski, mida kasutajad näevad ja millega saavad suhelda. DOM-manipulatsioon on tehnika, mis muudab staatilisi veebilehti dünaamilisteks rakendusteks, mis uuendavad oma sisu kasutaja interaktsioonide ja serveri vastuste põhjal.

Õige tööriista valimine

Kui on vaja HTML-i JavaScripti abil uuendada, on sul mitu võimalust. Mõtle neile kui erinevatele tööriistadele tööriistakastis – igaüks sobib kindlateks töödeks:

Meetod	Milleks see hea on	Millal kasutada	Turvalisuse tase
textContent	Kasutaja andmete turvaline kuvamine	Igal ajal, kui näitad teksti	✅ Kindel
createElement() + append()	Komplekssed paigutused	Uute sektsioonide/loendite loomine	✅ Tõestatud
innerHTML	HTML sisu määramine	⚠️ Väldi seda võimalust	❌ Riskantne

Turvaline tekstikuvamise viis: textContent

textContent omadus on parim sõber kasutajaandmete kuvamisel. See on nagu turvatöötaja sinu veebilehel – midagi kahjulikku läbi ei saa:

// Turvaline ja usaldusväärne viis teksti uuendamiseks
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

textContent eelised:

• Töötleb kõike kui tavalist teksti (takistab skriptide täitmist)
• Eemaldab automaatselt olemasoleva sisu
• Efektiivne lihtsate tekstiuuenduste jaoks
• Pakub sisse ehitatud turvalisust pahatahtliku sisu vastu

Dünaamiliste HTML-elementide loomine

Rohkem keerukama sisu jaoks kombineeri document.createElement() meetodit koos append() funktsiooniga:

// Ohutu viis uute elementide loomiseks
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

Selle lähenemise mõistmine:

• Loob DOM-elemente programmiliselt
• Hoiab täielikku kontrolli elementide atribuutide ja sisu üle
• Võimaldab keerukaid, pesastatud elementide struktuure
• Säilitab turvalisuse, eraldades struktuuri sisust

⚠️ Turvaküsimus: Kuigi innerHTML on paljudes juhendites, võib see täita leitud skripte. Nagu CERN-i turvaprotokollid keelavad volitamata koodide käivitamise, pakuvad textContent ja createElement turvalisemaid alternatiive.

innerHTML riskid:

• Täidab kasutajaandmetes olevad <script> märgistused
• On haavatav koodi süstimise rünnakutele
• Loob potentsiaalseid turvaauke
• Turvalised alternatiivid pakuvad sama funktsionaalsust

Veateadete kasutajasõbralikumaks muutmine

Praegu kuvatakse sisselogimise vead ainult brauseri konsoolis, mis kasutajale nähtamatu on. Nagu piloodi sise diagnostika ja reisija info süsteemi erinevus, peame saadetama olulist infot õiges kanalil.

Veateadete nähtavaks muutmine annab kasutajale kohe tagasisidet, mis läks valesti ja kuidas edasi tegutseda.

Samm 1: Lisa koht veateadete kuvamiseks

Alustuseks loo oma HTML-is koht veateadetele. Lisa see otse enne sisselogimisnuppu, nii et kasutajad näevad seda loomulikult:

<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>

Mis siin toimub:

• Loome tühja konteineri, mis jääb nähtamatuks seni kuni seda vajatakse
• Asetub sinna, kuhu kasutajad loomulikult vaatavad pärast "Logi sisse" vajutamist
• role="alert" on hea lisand ekraanilogejatele – ütleb abi tehnoloogiale "tõsi, see on oluline!"
• Unikaalne id annab JavaScriptile lihtsa sihtmärgi

Samm 2: Loo abistav funktsioon

Teeme väikese abifunktsiooni, mis uuendab mis tahes elemendi teksti. See on üks neist "kirjuta üks kord, kasuta kõikjal" funktsioonidest, mis säästab aega:

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

Funktsiooni eelised:

• Lihtne liides, mis vajab ainult elemendi ID-d ja teksti
• Turvaliselt leiab ja uuendab DOM-elemente
• Taaskasutatav, vähendab koodi dubleerimist
• Säilitab rakenduses järjekindla uuenduskäitumise

Samm 3: Näita veateateid nähtavalt

Asendame varjatud konsoolisõnumi millegagi, mida kasutaja näeb. Uuenda oma sisselogimise funktsiooni:

// Selle asemel, et lihtsalt konsooli logida, näita kasutajale, mis on valesti
if (data.error) {
  return updateElement('loginError', data.error);
}

See väike muudatus teeb suure vahe:

• Veateated ilmuvad kohe sinna, kuhu kasutaja vaatab
• Pole enam salapäraseid vaikivaid ebaõnnestumisi
• Kasutajad saavad kohese ja käegakatsutava tagasiside
• Sinu rakendus hakkab tunduma professionaalsem ja läbimõeldum

Nüüd, kui testid valede andmetega, näed abistavat veateadet otse lehel!

Samm 4: Kaasa arvutustel puudega kasutajad

Selle role="alert" omaduse juures on midagi ägedat – see pole lihtsalt dekoratsioon! See atribuut loob Live Region'i, mis teatab muudatustest ekraanilugejatele koheselt:

<div id="loginError" role="alert"></div>

Miks see oluline on:

• Ekraanilugeja kasutajad kuulevad veateadet kohe, kui see ilmub
• Kõik saavad sama olulise info sõltumata navigeerimisviisist
• Lihtne viis muuta rakendus ligipääsetavamaks rohkematele inimestele
• Näitab, et hoolid kaasavatest kogemustest

Sellised väiksed nüansid eristavad häid arendajaid suurepärastest!

🎯 Pedagoogiline peatükk: autentimise mustrid

Peatu ja mõtle: Sa just rakendasid täieliku autentimiskäigu. See on veebiarenduse fundamentaalse mustri näide.

Kiire ise-hindamine:

• Kas suudad seletada, miks kasutame API kõnede puhul async/await?
• Mis juhtuks, kui unustaksime encodeURIComponent() funktsiooni?
• Kuidas parandab meie veahaldus kasutajakogemust?

Tegeliku maailma seos: Mustreid, mida õppisid (asünkroonne andmete pärimine, veahaldus, kasutajate tagasiside), kasutatakse igas suuremas veebirakenduses alates sotsiaalmeediast kuni e-kaubanduseni. Sa ehitad tööstustasemel oskusi!

Väljakutse küsimus: Kuidas muuta autentimissüsteemi, et hallata mitut kasutajate rolli (klient, admin, teller)? Mõtle andmestruktuurile ja kasutajaliidese muutustele.

Samm 5: Rakenda sama mustrit registreerimisel

Järjepidevuse huvides rakenda identsed veahaldusmeetodid oma registreerimisvormis:

1. Lisa veateate kuvamise element oma registreerimise HTML-i:

<div id="registerError" role="alert"></div>

2. Uuenda oma registreerimisfunktsiooni sama veateate näitamise mustri järgi:

if (data.error) {
  return updateElement('registerError', data.error);
}

Järjepideva veahalduse eelised:

• Tagab ühtlase kasutajakogemuse kõikides vormides
• Vähendab kognitiivset koormust tuntud mustrite kasutamisega
• Lihtsustab hooldust taaskasutatava koodiga
• Tagab juurdepääsetavuse standardite järgimise rakenduses

Dünaamilise juhtpaneeli loomine

Nüüd muudame sinu staatilise juhtpaneeli dünaamiliseks liideseks, mis kuvab reaalajas kontode andmeid. Nagu vahe trükitud lennugraafiku ja lennujaama reaalajas väljumistöötahvlite vahel – nihkuda staatilisest info kuvamisest otseajaga reageerivale kuvamisele.

Kasutades DOM-manipulatsiooni tehnikaid, mida oled õppinud, loome juhtpaneeli, mis uuendab automaatselt jooksvaid kontoandmeid.

Tutvu oma andmetega

Enne ehitama asumist piilume, millist tüüpi andmed su server tagastab. Kui keegi edukalt sisse logib, saad kasutada järgmist informatsiooni:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

See andmestruktuur annab:

• user: sobib isikupärastamiseks ("Tere tulemast tagasi, Sarah!")
• currency: tagab rahasummade õige kuvamise
• description: sõbralik konto nimi
• balance: oluline jooksva saldona
• transactions: kogu tehingute ajalugu koos detailidega

Kõik, mida vajad professionaalse pangajuhtepaneeli loomiseks!

flowchart TD
    A[Kasutaja sisselogimine] --> B[Kontoteabe toomine]
    B --> C{Andmed kehtivad?}
    C -->|Jah| D[Salvesta globaalsesse muutujasse]
    C -->|Ei| E[Näita veateadet]
    D --> F[Liigu armatuurlauale]
    F --> G[Uuenda kasutajaliidese elemente]
    G --> H[Kuva saldo]
    G --> I[Näita kirjeldust]
    G --> J[Renderda tehingud]
    J --> K[Loo tabeli read]
    K --> L[Formateeri valuuta]
    L --> M[Kasutaja näeb reaalajas andmeid]

💡 Nipp: Soovid oma juhtpaneeli kohe näha? Kasuta sisselogimisel kasutajanime test – see on eelnevalt täidetud näidisandmetega, et saaksid ilma tehinguid loomata näha kõike toimimas.

Testkonto eelis:

• Tuleb realistlike näidisandmetega
• Hea näha, kuidas tehingud kuvatakse
• Väga sobilik juhtpaneeli funktsioonide testimiseks
• Säästab sind kasutu andme loomise tegemisest käsitsi

Juhtpaneeli kuvamise elementide loomine

Ehita juhmelemendid samm-sammult, alustades konto kokkuvõtte infoga ja seejärel keerulisemate funktsioonide nagu tehingute loendid juurde liikumisega.

Samm 1: Uuenda oma HTML struktuuri

Asenda staatiline "Saldo" sektsioon dünaamiliste kohatäiteks, mida saab JavaScript täita:

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

Seejärel lisa sektsioon konto kirjelduse jaoks. Kuna see toimib juhtelemendi tiitli funktsioonina, kasuta semantilist HTML-i:

<h2 id="description"></h2>

HTML struktuuri mõistmine:

• Kasuta eraldi <span> elemente saldole ja valuutale, et neid eraldi kontrollida
• Lisa igale elemendile unikaalne ID JavaScripti sihtimiseks
• Kasuta semantilist märgistust <h2> konto kirjelduse jaoks
• Loo loogiline hierarhia ekraanilugejate ja SEO jaoks

✅ Juurdepääsetavuse märkus: Konto kirjeldus töötab juhtelemendi tiitli funktsioonina, seega on see semantiliselt päisega märgistatud. Loe rohkem selle kohta, kuidas pealkirjastruktuur mõjutab juurdepääsetavust. Kas suudad leida teisi elemente oma lehel, mis võiksid kasu saada päise märgistusest?

Samm 2: Loo juhtpaneeli uuendamise funktsioon

Kirjuta funktsioon, mis täidab juhtpaneeli reaalse kontoandmetega:

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

Samm-sammult, mida see funktsioon teeb:

• Kontrollib, kas konto andmed on olemas
• Suunab sisselogimata kasutajad tagasi sisselogimislehele
• Uuendab konto kirjelduse kasutades taaskasutatavat updateElement funktsiooni
• Formaat saldole, et näidata alati 2 koma järel kohta
• Kuvab sobiva valuutamärgi

💰 Raha vormindamine: See toFixed(2) meetod on päästja! See tagab, et saldo näeb alati välja nagu päris raha – "75.00" mitte lihtsalt "75". Kasutajad hindavad tuttavat valuutavormingut.

Samm 3: Veendu, et juhtpaneel uuenduks

Selleks, et juhtpaneel laeks uuesti iga kord, kui kasutaja sinna satub, peame lisama selle oma navigeerimissüsteemi. Kui tegid 1. tunni ülesande, siis peaks see olema tuttav. Kui mitte, siis siin on, mida vajad:

Lisa oma updateRoute() funktsiooni lõppu:

if (typeof route.init === 'function') {
  route.init();
}

Seejärel muuda oma marsruute, et lisada juhtpaneeli initsialiseerimine:

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

Mis see nutikas seadistus teeb:

• Kontrollib, kas marsruudil on spetsiaalne initsialiseerimiskood
• Käivitab selle koodi automaatselt, kui marsruut laaditakse
• Tagab, et juhtpaneel kuvab alati värskeid andmeid
• Hoiab sinu marsruutimise loogika puhtana ja organiseerituna

Juhtpaneeli testimine

Kui oled need muudatused teinud, testi juhtpaneeli:

1. Logi sisse testkontoga
2. Veendu, et suunatakse juhtpaneelile
3. Kontrolli, et konto kirjeldus, saldo ja valuuta kuvatakse korrektselt
4. Proovi välja logida ja uuesti sisse logida, et veenduda andmete värskendamises

Sinu juhtpaneel peaks nüüd kuvama dünaamiliselt uuenevat kontoinfot, mis põhineb sisselogitud kasutaja andmetel!

Tarkade tehingunimekirjade loomine mallide abil

Selle asemel, et iga tehingu HTML-i käsitsi luua, kasutame malle, mis genereerivad järjepideva vormingu automaatselt. Nagu kosmoselaeva tootmisel kasutatavad standardkomponendid, tagavad mallid iga tehingurida järjepideva struktuuri ja välimuse.

See tehnika skaleerub tõhusalt mõnest tehingust tuhandeteni, säilitades järjepideva jõudluse ja esitluse.

graph LR
    A[HTML mall] --> B[JavaScript kloon]
    B --> C[Andmetega täitmine]
    C --> D[Lisa fragmenti]
    D --> E[Massiline lisamine DOM-i]
    
    subgraph "Jõudluse eelised"
        F[Üksik DOM uuendus]
        G[Järjekindel vormindus]
        H[Taaskasutatav muster]
    end
    
    E --> F
    E --> G
    E --> H

flowchart LR
    A[Tehinguandmed] --> B[HTML-mall]
    B --> C[Malli kloonimine]
    C --> D[Andmetega täitmine]
    D --> E[DOM-i lisamine]
    E --> F[Korda iga tehingu korral]

Samm 1: Loo tehingu mall

Alustuseks lisa oma HTML kehasse taaskasutatav mall tehinguridade jaoks:

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

HTML mallide mõistmine:

• Määratleb ühe tabelirea struktuuri
• Jääb nähtamatuks kuni kloonitakse ja JavaScriptiga täidetakse
• Sisaldab kolme lahtrit kuupäeva, kirjelduse ja summa jaoks
• Pakku taaskasutatavat mustrit järjepideva vormingu saavutamiseks

Samm 2: Valmista oma tabel dünaamiliseks sisuks ette

Lisa tabeli keha elemendile id, et JavaScript saaks seda hõlpsalt sihtida:

<tbody id="transactions"></tbody>

Mida see saavutab:

• Loomine selgelt määratletud sihtmärgiks tehinguridade lisamiseks
• Eraldab tabeli staatilise struktuuri dünaamilisest sisust
• Võimaldab hõlpsat tehingute tühjendamist ja uuesti täitmist

Samm 3: Kirjuta tehinguridade tehasefunktsioon

Loo funktsioon, mis teisendab tehinguandmed HTML-elementideks:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

Selle tehasefunktsiooni lahtimurdmine:

• Leiab malli elemendi ID alusel
• Kloonib malli sisu turvaliseks manipuleerimiseks
• Valib kloonitud sisu seest tabelirea
• Täidab iga lahtri tehinguandmetega
• Formaat arve, et näidata korrektseid komakohti
• Tagastab lõppläbi valmis rea lisamiseks

Samm 4: Genereeri mitu tehingurida tõhusalt

Lisa see kood oma updateDashboard() funktsiooni, et kuvada kõik tehingud:

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

Selles tõhusas lähenemises:

• Loomine dokumendifragmendi abil rühmitatud DOM-operatsioonid
• Iga tehingu läbimine konto andmetes
• Moodustab rea iga tehingu jaoks tehasefunktsiooni abil
• Kogub kõik read fragmendisse enne DOM-i lisamist
• Teeb ühe DOM uuenduse mitme eraldi asemel

⚡ Jõudluse optimeerimine: document.createDocumentFragment() töötab nagu Boeing'i kokkupaneku protsess – komponendid valmistatakse põhijoonest eemal ette ja seejärel paigaldatakse tervikuna. See partiina töötamise meetod vähendab DOM-i ümberjoonistamisi, tehes ühe sisestuse mitme üksiku toimingu asemel.

Samm 5: Täienda uuendamisfunktsiooni mitmesisuga sisu jaoks

Sinu updateElement() funktsioon käsitleb hetkel ainult tekstisisu. Täienda seda nii, et see töötaks nii teksti kui ka DOM-sõlmedega:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // Eemaldab kõik lapsed
  element.append(textOrNode);
}

Peamised parandused selles uuenduses:

• Kustutab olemasoleva sisu enne uue lisamist
• Võtab vastu kas tekstistringe või DOM-sõlmi parameetritena
• Kasutab append() meetodit paindlikkuse tagamiseks
• Hoidab tagurpidi ühilduvust olemasoleva tekstipõhise kasutusega

Sinu juhtpaneeli testimine

Tuleb tõehetk! Vaatame, kuidas sinu dünaamiline juhtpaneel töötab:

1. Logi sisse kasutades test kontot (seal on valmis proovandmed)
2. Liigu oma juhtpaneelile
3. Kontrolli, et tehinguridade kuvamine toimib ja on korralikult vormindatud
4. Veendu, et kuupäevad, kirjelduse ja summad on korrektsed

Kui kõik töötab, näed oma juhtpaneelil täielikult funktsioneerivat tehingute nimekirja! 🎉

Mida sa saavutasid:

• Ehitasid juhtpaneeli, mis skaleerub ükskõik kui palju andmeid käsitledes
• Loodud taaskasutatavad mallid järjepidevaks vormindamiseks
• Rakendasid tõhusaid DOM-manipulatsiooni tehnikaid
• Arendasid funktsionaalsust, mis on võrreldav tootmispangandusrakendustega

Sa muutsid edukalt staatilise veebilehe dünaamiliseks veebirakenduseks.

🎯 Pedagoogiline kontrollpunkt: dünaamiline sisu genereerimine

Arhitektuuri mõistmine: Sa oled rakendanud keeruka andmetest UI-sse voogude süsteemi, mis peegeldab raamistikusid nagu React, Vue ja Angular kasutatavaid mustreid.

Peamised omandatud kontseptsioonid:

• Mallipõhine renderdamine: taaskasutatavate UI komponentide loomine
• Dokumendifragmendid: DOM-i jõudluse optimeerimine
• Turvaline DOM-manipulatsioon: turvahaavatavuste vältimine
• Andmete teisendamine: serveri andmete muutmine kasutajaliideseks

Tööstuse seos: Need tehnikad on kaasaegsete esipaneeliraamistike aluseks. Reacti virtuaalne DOM, Vue mallisüsteem ja Angulari komponendiarhitektuur põhinevad kõigil nende põhikontseptsioonide peal.

Mõtiskluse küsimus: Kuidas laiendaksid seda süsteemi reaalajas uuenduste käsitlemiseks (nt uued tehingud ilmuvad automaatselt)? Mõtle WebSocketite või serveripoolse sündmuste edastuse peale.

---

📈 Sinu andmehalduse meistriklassi ajakava

timeline
    title Andmepõhine Arendusreis
    
    section Vundamendi Loomine
        API Seadistus & Testimine
            : Mõista kliendi- ja serveri vahelise suhtluse toimimist
            : Valdada HTTP päringu/vastuse tsüklit
            : Õppida silumisvõtteid
    
    section Autentimise Valdamine
        Asünkroonsed Funktsioonimustrid
            : Kirjutada puhast async/await koodi
            : Töötada lubadustega tõhusalt
            : Rakendada veapiiranguid
        Kasutaja Seansi Halduse
            : Luuakse globaalsed olekumulustrid
            : Ehita navigeerimise kaitsjad
            : Kujunda kasutajate tagasiside süsteemid
    
    section Dünaamiline Kasutajaliidese Arendus
        Turvaline DOM Manipulatsioon
            : Ennetada XSS haavatavusi
            : Kasuta textContent-i innerHTML asemel
            : Loo ligipääsetavuse sõbralikud liidesed
        Mallisüsteemid
            : Ehita taaskasutatavaid UI komponente
            : Optimeeri jõudlust fragmentidega
            : Skaala suurte andmekogumite käsitlemiseks
    
    section Professionaalsed Mustrid
        Tootmisvalmis Kood
            : Rakendada kõikehõlmavat veahaldust
            : Järgida turvalisuse parimaid tavasid
            : Luua hooldatavaid arhitektuure
        Moodne Veebi Standardid
            : Valdada Fetch API mustreid
            : Mõista CORS konfiguratsioone
            : Ehita reageerivaid, ligipääsetavaid kasutajaliideseid

🎓 Lõputunnistus: Sa oled edukalt loonud täieliku andmepõhise veebirakenduse, kasutades kaasaegseid JavaScripti mustreid. Need oskused kantakse üle otse Reacti, Vue või Angulari raamistikuga töötamiseks.

🔄 Järgmise taseme võimed:

• Valmis uurima esipaneeliraamistikke, mis neid kontseptsioone kasutavad
• Valmis rakendama reaalajas funktsioone WebSocketitega
• Võimeline looma progressiivseid veebirakendusi, mis töötavad ka võrguühenduseta
• Alus edasijõudnud olekuhalduse mustrite õppimiseks on olemas

GitHub Copilot Agendi väljakutse 🚀

Kasuta Agent režiimi, et lõpetada järgmine ülesanne:

Kirjeldus: Täienda pangarakendust, lisades tehingute otsingu ja filtreerimise funktsiooni, mis võimaldab kasutajatel leida tehinguid kuupäevavahemiku, summa või kirjelduse alusel.

Juhis: Loo pangarakendusele otsingufunktsionaalsus, mis sisaldab: 1) otsinguvormi sisendväljadega kuupäevavahemiku (alates/kuni), minimaal- ja maksimaal summa ning tehingu kirjelduse märksõnade jaoks, 2) filterTransactions() funktsioon, mis filtreerib account.transactions massiivi otsingukriteeriumide põhjal, 3) Uuenda updateDashboard() funktsiooni, et näidata filtreeritud tulemusi ja 4) Lisa "Tühjenda filtrid" nupp vaate lähtestamiseks. Kasuta kaasaegseid JavaScripti massiivimeetodeid nagu filter() ning käsitle otsingukriteeriumide tühjuse erandeid.

Õpi rohkem agent režiimi kohta siit.

🚀 Väljakutse

Valmis viima oma pangarakenduse järgmisele tasemele? Muudame selle väljanägemise ja kasutajakogemuse nii heaks, et soovid seda päriselt kasutadagi. Siin on mõned ideed loomingulisuse süütamiseks:

Muuda ilusaks: Lisa CSS stiilid, et muuta sinu funktsionaalne juhtpaneel visuaalselt atraktiivseks. Mõtle puhastele joontele, heale vahele ja võib-olla ka peenetele animatsioonidele.

Tee responsiivseks: Proovi kasutades meedia päringuid luua responsiivne disain, mis töötab suurepäraselt telefonidel, tahvelarvutitel ja lauaarvutitel. Sinu kasutajad tänavad sind!

Lisa natuke sära: Mõtle tehingute värvikoodimisele (roheline sissetuleku jaoks, punane kulude jaoks), ikoonide lisamisele või sellele, et liikumisel hiirega tekiksid efekti, mis muudavad liidese interaktiivseks.

Siin on, kuidas võib välja näha lihvitud juhtpaneel:

Sa ei pea seda täpselt kopeerima – kasuta seda inspiratsioonina ja loo oma stiil!

Lõpuloengu viktoriin

Lõpuloengu viktoriin

Kodutöö

Kodeeri ümber ja kommenteeri oma kood

---

Vastutusest loobumine:
See dokument on tõlgitud kasutades tehisintellekti tõlketeenust Co-op Translator. Kuigi me pingutame täpsuse nimel, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles on tunnustatud ja usaldusväärne allikas. Oluline info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti mõistmise eest, mis võib tuleneda selle tõlke kasutamisest.