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

Izrada bankarske aplikacije - dio 3: Načini dohvaćanja i korištenja podataka

Razmislite o Enterpriseovom računalu u Star Treku - kada kapetan Picard zatraži status broda, informacije se pojavljuju odmah bez da se cijeli sučelje zaustavi i ponovno sastavi. Taj besprijekoran tijek informacija upravo gradimo ovdje s dinamičkim dohvaćanjem podataka.

Trenutno je vaša banka unutar aplikacije poput tiskanih novina - informativna, ali statična. Pretvorit ćemo je u nešto poput kontrolnog centra NASA-e, gdje podaci kontinuirano teku i ažuriraju se u stvarnom vremenu bez prekidanja korisničkog tijeka rada.

Naučit ćete kako asinkrono komunicirati sa serverima, rukovati podacima koji dolaze u različito vrijeme i pretvarati sirove informacije u nešto smisleno za vaše korisnike. Ovo je razlika između demonstracije i softvera spremnog za produkciju.

⚡ Što možete napraviti u sljedećih 5 minuta

Brzi put za zaposlene programere

flowchart LR
    A[⚡ 5 minuta] --> B[Postavi API poslužitelj]
    B --> C[Isprobaj dohvaćanje s curlom]
    C --> D[Izradi funkciju za prijavu]
    D --> E[Pogledaj podatke u akciji]

• Minuta 1-2: Pokrenite svoj API server (cd api && npm start) i testirajte vezu
• Minuta 3: Napravite osnovnu funkciju getAccount() koristeći fetch
• Minuta 4: Povežite login formu s action="javascript:login()"
• Minuta 5: Testirajte login i pratite pojavu podataka o računu u konzoli

Brze testne naredbe:

# Provjerite radi li API
curl http://localhost:5000/api

# Testirajte dohvaćanje podataka računa
curl http://localhost:5000/api/accounts/test

Zašto je ovo važno: U 5 minuta vidjet ćete magiju asinkronog dohvaćanja podataka koja pokreće svaku modernu web aplikaciju. Ovo je temelj koji aplikacijama daje osjećaj odzivnosti i živosti.

🗺️ Vaše putovanje kroz podatkovno vođene web aplikacije

journey
    title Od statičkih stranica do dinamičkih aplikacija
    section Razumijevanje evolucije
      Tradicionalna ponovna učitavanja stranica: 3: You
      Otkrijte prednosti AJAX/SPA: 5: You
      Savladajte obrasce Fetch API-ja: 7: You
    section Izgradnja autentifikacije
      Izradite funkcije prijave: 4: You
      Rukujte asinkronim operacijama: 6: You
      Upravljajte korisničkim sesijama: 8: You
    section Dinamičke ažuriranja UI-a
      Naučite manipulaciju DOM-om: 5: You
      Izradite prikaze transakcija: 7: You
      Izradite responzivne nadzorne ploče: 9: You
    section Profesionalni obrasci
      Renderiranje temeljeno na predlošcima: 6: You
      Strategije rukovanja greškama: 7: You
      Optimizacija performansi: 8: You

Cilj vašeg putovanja: Do kraja ove lekcije razumjet ćete kako moderne web aplikacije dohvaćaju, obrađuju i prikazuju podatke dinamički, stvarajući besprijekorna korisnička iskustva koja očekujemo od profesionalnih aplikacija.

Predpredavanje Kviza

Pre-lecture quiz

Preduvjeti

Prije nego što zaronite u dohvaćanje podataka, osigurajte da imate spremne ove komponente:

• Prethodna lekcija: Završite Login i registracijski obrazac - na tome ćemo graditi
• Lokalni server: Instalirajte Node.js i pokrenite API server za pružanje podataka o računu
• API veza: Testirajte vezu sa serverom ovom naredbom:

curl http://localhost:5000/api
# Očekivani odgovor: "Bank API v1.0.0"

Ovaj brzi test osigurava da svi dijelovi ispravno komuniciraju:

• Provjerava radi li Node.js ispravno na vašem sustavu
• Potvrđuje da je vaš API server aktivan i odgovara
• Validira da vaša aplikacija može doći do servera (kao provjera radio veze prije misije)

🧠 Pregled ekosustava za upravljanje podacima

mindmap
  root((Upravljanje podacima))
    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

Osnovni princip: Moderne web aplikacije su sustavi za orkestraciju podataka - koordiniraju između korisničkih sučelja, API servera i sigurnosnih modela preglednika kako bi stvorile besprijekorna, responzivna iskustva.

---

Razumijevanje dohvaćanja podataka u modernim web aplikacijama

Način na koji web aplikacije rukuju podacima dramatično se razvio tijekom posljednja dva desetljeća. Razumijevanje te evolucije pomoći će vam shvatiti zašto su moderne tehnike poput AJAX-a i Fetch API-ja toliko moćne i zašto su postale ključni alati web programera.

Istražimo kako su tradicionalne web-stranice funkcionirale u odnosu na dinamične, responzivne aplikacije koje danas gradimo.

Tradicionalne više-stranične aplikacije (MPA)

U ranim danima weba, svaki klik bio je poput promjene kanala na starom televizoru - zaslon bi potamnio, zatim se polako napunio novim sadržajem. Tako je bilo u ranim web aplikacijama, gdje je svaka interakcija značila potpuno ponovno građenje cijele stranice ispočetka.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Klikne na vezu ili pošalje obrazac
    Browser->>Server: Zahtijeva novu HTML stranicu
    Note over Browser: Stranica postaje prazna
    Server->>Browser: Vraća kompletnu HTML stranicu
    Browser->>User: Prikazuje novu stranicu (kašalj/ponovno učitavanje)

Zašto je taj pristup djelovao nezgrapno:

• Svaki klik značio je potpuno ponovno građenje stranice od nule
• Korisnici su bili prekidani usred misli onim dosadnim bljeskovima stranice
• Vaša internetska veza je prekomjerno preuzimala isti zaglavlje i podnožje više puta
• Aplikacije su više djelovale kao klikanje kroz arhivski ormar nego korištenje softvera

Moderne jedno-stranične aplikacije (SPA)

AJAX (Asinhroni JavaScript i XML) potpuno je promijenio ovaj paradigmu. Kao modularni dizajn Međunarodne svemirske postaje, gdje astronauti mogu zamijeniti pojedine dijelove bez hitnog rekonstrukcije sustava, AJAX omogućuje da ažuriramo specifične dijelove web stranice bez ponovnog učitavanja svega. Iako naziv spominje XML, danas najviše koristimo JSON, ali osnovni princip ostaje isti: mijenjamo samo ono što treba.

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Interagira sa stranicom
    Browser->>JavaScript: Okida rukovatelj događaja
    JavaScript->>Server: Dohvaća samo potrebne podatke
    Server->>JavaScript: Vraća JSON podatke
    JavaScript->>Browser: Ažurira određene elemente stranice
    Browser->>User: Prikazuje ažurirani sadržaj (bez ponovnog učitavanja)

Zašto SPA aplikacije djeluju puno bolje:

• Ažuriraju samo dijelove koji su stvarno promijenjeni (pametno, zar ne?)
• Nema više bolnih prekida - korisnici ostaju u svom tijeku rada
• Manje podataka putuje mrežom, što znači brže učitavanje
• Sve djeluje brzo i responzivno, kao aplikacije na vašem telefonu

Evolucija do modernog Fetch API-ja

Moderni preglednici pružaju Fetch API, koji zamjenjuje stariji XMLHttpRequest. Kao razlika između rada s telegrafom i korištenja elektroničke pošte, Fetch API koristi promiseove za čišći asinhroni kod i prirodno rukuje JSON-om.

Značajka	XMLHttpRequest	Fetch API
Sintaksa	Složene povratne funkcije	Čist kod baziran na promisevima
Rukovanje JSON-om	Ručna obrada potrebna	Ugrađena .json() metoda
Rukovanje greškama	Ograničene informacije	Sveobuhvatni detalji o pogreškama
Moderna podrška	Kompatibilnost sa starijim verzijama	ES6+ promise i async/await

💡 Kompatibilnost preglednika: Dobre vijesti - Fetch API radi u svim modernim preglednicima! Ako vas zanimaju specifične verzije, caniuse.com ima kompletnu priču o kompatibilnosti.

Zaključak:

• Odlično radi u Chromeu, Firefoxu, Safariu i Edgeu (prakticno svugdje gdje su vaši korisnici)
• Samo Internet Explorer treba dodatnu pomoć (i iskreno, vrijeme je da ga pustimo)
• Savršeno vas priprema za elegantne async/await obrasce koje ćemo koristiti kasnije

Implementacija korisničkog prijavljivanja i dohvaćanja podataka

Sad ćemo implementirati sustav za prijavu koji vašu bankarsku aplikaciju pretvara iz statičnog prikaza u funkcionalnu aplikaciju. Kao autentični protokoli u sigurnim vojnim objektima, provjerit ćemo korisničke vjerodajnice i zatim pružiti pristup njihovim specifičnim podacima.

Gradit ćemo to inkrementalno, počevši s osnovnim ovjeravanjem, a zatim dodajući mogućnosti dohvaćanja podataka.

Korak 1: Izradite osnovu funkcije login

Otvorite svoj app.js fajl i dodajte novu funkciju login. Ova će upravljati procesom autentifikacije korisnika:

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

Objasnimo ovo:

• Ta async riječ? Govori JavaScriptu "hej, ova funkcija možda će morati pričekati nešto"
• Hvatamo naš obrazac s stranice (nema ništa posebno, samo ga pronalazimo po njegovom ID-u)
• Izvlačimo što god je korisnik upisao kao korisničko ime
• Evo zgodnog trika: možete pristupiti bilo kojem elementu forme po njegovom name atributu - nema potrebe za dodatnim pozivima getElementById!

💡 Obrazac pristupa: Svakom kontrolnom elementu obrasca može se pristupiti po imenu (postavljeno u HTML-u koristeći atribut name) kao svojstvu forme. Ovo pruža čist i čitljiv način dohvaćanja podataka iz forme.

Korak 2: Izradite funkciju za dohvaćanje podataka o računu

Zatim ćemo napraviti posebnu funkciju za dohvaćanje podataka o računu sa servera. Ovo slijedi isti obrazac kao i vaša funkcija registracije, ali fokusira se na dohvaćanje podataka:

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

Evo što ovaj kod radi:

• Koristi moderni fetch API za asinhroni zahtjev podataka
• Gradi URL za GET zahtjev s parametrima korisničkog imena
• Primjenjuje encodeURIComponent() za sigurno rukovanje posebnim znakovima u URL-ovima
• Pretvara odgovor u JSON za jednostavnu obradu podataka
• Rukuje greškama na elegantan način vraćajući objekt s greškom umjesto pada

⚠️ Sigurnosna napomena: Funkcija encodeURIComponent() rukuje posebnim znakovima u URL-ovima. Kao kodovi u pomorskoj komunikaciji, osigurava da vaša poruka stigne točno onako kako treba, sprečavajući da znakovi poput "#" ili "&" budu pogrešno protumačeni.

Zašto je ovo važno:

• Sprečava da posebni znakovi slome URL
• Štiti od napada manipulacije URL-om
• Osigurava da server dobije točne podatke
• Prati sigurne prakse kodiranja

Razumijevanje HTTP GET zahtjeva

Evo nečega što bi vas moglo iznenaditi: kada koristite fetch bez dodatnih opcija, on automatski stvara GET zahtjev. To je savršeno za ono što radimo - pitamo server "hej, mogu li vidjeti podatke ovog korisničkog računa?"

Razmislite o GET zahtjevima kao ljubaznom traženju posudbe knjige u knjižnici - tražite nešto što već postoji. POST zahtjevi (koje smo koristili za registraciju) su poput slanja nove knjige da se doda u zbirku.

GET Zahtjev	POST Zahtjev
Svrha	Dohvaćanje postojećih podataka
Parametri	U URL putanji/upitu
Keširanje	Može biti keširano od strane preglednika
Sigurnost	Vidljivo u URL-u/zapisima

sequenceDiagram
    participant B as Preglednik
    participant S as Poslužitelj
    
    Note over B,S: GET Zahtjev (Preuzimanje Podataka)
    B->>S: GET /api/accounts/test
    S-->>B: 200 OK + Podaci Računa
    
    Note over B,S: POST Zahtjev (Slanje Podataka)
    B->>S: POST /api/accounts + Novi Podaci Računa
    S-->>B: 201 Stvoreno + Potvrda
    
    Note over B,S: Obrada Pogrešaka
    B->>S: GET /api/accounts/nepostojeći
    S-->>B: 404 Nije Pronađeno + Poruka o Pogrešci

Korak 3: Sve povezujemo zajedno

Sad onaj zadovoljavajući dio - povežimo vašu funkciju dohvaćanja računa s procesom prijave. Ovo je trenutak gdje sve dolazi na svoje mjesto:

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

Ova funkcija slijedi jasan slijed:

• Izvlači korisničko ime iz obrasca
• Traži podatke korisničkog računa sa servera
• Rukuje bilo kakvim greškama tijekom procesa
• Spremi podatke računa i preusmjeri na nadzornu ploču ako je uspješno

🎯 Async/Await obrazac: Budući da je getAccount asinhrona funkcija, koristimo ključnu riječ await da pauziramo izvršenje dok server ne odgovori. Time sprječavamo da kod nastavi raditi s nepoznatim podacima.

Korak 4: Stvaranje mjesta za vaše podatke

Vašoj aplikaciji treba mjesto za pamćenje podataka o računu nakon što su učitani. Pomislite na to kao kratkoročnu memoriju vaše aplikacije - mjesto za pohranu podataka trenutnog korisnika pod rukom. Dodajte ovaj redak na vrh datoteke app.js:

// Ovo sadrži podatke trenutnog korisničkog računa
let account = null;

Zašto nam treba ovo:

• Čuva dostupne podatke o računu s bilo kojeg mjesta u aplikaciji
• Početna vrijednost null znači "nitko još nije prijavljen"
• Ažurira se kad se netko uspješno prijavi ili registrira
• Djeluje kao jedini izvor istine - nema zbunjenosti tko je prijavljen

Korak 5: Povežite vaš obrazac

Sada povežimo vašu novu login funkciju s HTML formom. Ažurirajte svoj tag forme ovako:

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

Što ova mala promjena radi:

• Sprječava da forma radi svoju zadanu akciju "ponovno učitavanje cijele stranice"
• Poziva vašu prilagođenu JavaScript funkciju umjesto toga
• Održava sve glatkim i slično SPA aplikacijama
• Daje vam potpunu kontrolu nad onim što se događa kad korisnici kliknu "Login"

Korak 6: Poboljšajte funkciju registracije

Radi dosljednosti, ažurirajte vašu funkciju register da također sprema podatke o računu i preusmjerava na nadzornu ploču:

// Dodajte ove retke na kraj vaše funkcije register
account = result;
navigate('/dashboard');

Ovo poboljšanje pruža:

• Neprekidan prijelaz od registracije do nadzorne ploče
• Dosljedan korisnički dojam između prijave i registracije
• Trenutni pristup podacima računa nakon uspješne registracije

Testiranje vaše implementacije

flowchart TD
    A[Korisnik unosi vjerodajnice] --> B[Pozvana funkcija prijave]
    B --> C[Dohvati podatke računa sa servera]
    C --> D{Podaci su uspješno primljeni?}
    D -->|Da| E[Spremi podatke računa globalno]
    D -->|Ne| F[Prikaži poruku o pogrešci]
    E --> G[Navigiraj na nadzornu ploču]
    F --> H[Korisnik ostaje na stranici prijave]

Vrijeme je za testiranje:

1. Kreirajte novi račun da se uvjerite da sve radi
2. Pokušajte se prijaviti s istim vjerodajnicama
3. Pogledajte konzolu preglednika (F12) ako nešto izgleda čudno
4. Provjerite da li ste preusmjereni na nadzornu ploču nakon uspješne prijave

Ako nešto ne radi, ne paničarite! Većina problema su male greške poput tipfelera ili zaborava pokretanja API servera.

Kratka riječ o magiji Cross-Origin

Možda se pitate: "Kako moja web aplikacija komunicira s ovim API serverom ako rade na različitim portovima?" Odlično pitanje! Ovo je nešto što svaki web developer prije ili kasnije susretne.

🔒 Cross-Origin sigurnost: Preglednici primjenjuju "pravilo iste domene" da spriječe neovlaštenu komunikaciju između različitih domena. Kao kontrolni punkt u Pentagonskoj zgradi, oni provjeravaju je li komunikacija odobrena prije omogućavanja prijenosa podataka.

U našem slučaju:

• Vaša web aplikacija radi na localhost:3000 (razvojni server)
• Vaš API server radi na localhost:5000 (backend server)
• API server uključuje CORS zaglavlja koja izričito dopuštaju komunikaciju s vaše web aplikacije

Ovo je česta konfiguracija u razvoju gdje frontend i backend obično rade na različitim serverima.

📚 Saznajte više: Dublje istražite API-je i dohvaćanje podataka u ovom opsežnom Microsoft Learn modulu o API-jima.

Oživljavanje vaših podataka u HTML-u

Sad ćemo učiniti dohvaćene podatke vidljivima korisnicima kroz manipulaciju DOM-om. Kao proces razvijanja fotografija u mračnoj komori, uzimamo nevidljive podatke i prikazujemo ih u nečemu što korisnici mogu vidjeti i s čim mogu komunicirati. Manipulacija DOM-om je tehnika koja pretvara statične web stranice u dinamičke aplikacije koje ažuriraju svoj sadržaj na temelju korisničkih interakcija i odgovora poslužitelja.

Odabir Pravog Alata za Posao

Kad je riječ o ažuriranju vašeg HTML-a s JavaScriptom, imate nekoliko opcija. Zamislite ih kao različite alate u kutiji s alatima - svaki savršen za određene zadatke:

Metoda	Za što je izvrsna	Kada je koristiti	Razina sigurnosti
textContent	Sigurno prikazivanje korisničkih podataka	Kad god prikazujete tekst	✅ Čvrsto kao stijena
createElement() + append()	Izrada složenih rasporeda	Kreiranje novih sekcija/lista	✅ Neprobojno
innerHTML	Postavljanje HTML sadržaja	⚠️ Pokušajte ovo izbjegavati	❌ Rizično poslovanje

Siguran Način za Prikaz Teksta: textContent

Svojstvo textContent je vaš najbolji prijatelj kad prikazujete korisničke podatke. Kao da imate portira na svojoj web stranici - ništa štetno ne prolazi:

// Siguran, pouzdan način za ažuriranje teksta
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

Prednosti textContent:

• Sve tretira kao običan tekst (sprječava izvršavanje skripti)
• Automatski briše postojeći sadržaj
• Učinkovit za jednostavna ažuriranja teksta
• Pruža ugrađenu sigurnost protiv zlonamjernog sadržaja

Izrada Dinamičkih HTML Elemenata

Za složeniji sadržaj, kombinirajte document.createElement() s metodom append():

// Siguran način za stvaranje novih elemenata
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

Razumijevanje ovog pristupa:

• Stvara nove DOM elemente programatski
• Održava punu kontrolu nad atributima i sadržajem elemenata
• Omogućuje složene, ugniježdene strukture elemenata
• Čuva sigurnost odvajanjem strukture od sadržaja

⚠️ Sigurnosna Napomena: Iako se innerHTML često pojavljuje u tutorijalima, može izvršavati ugrađene skripte. Kao što sigurnosni protokoli u CERN-u sprječavaju neovlašteno izvršavanje koda, korištenje textContent i createElement nudi sigurnije alternative.

Rizici innerHTML:

• Izvršava sve <script> oznake u korisničkim podacima
• Podložan napadima injektiranja koda
• Stvara potencijalne sigurnosne propuste
• Sigurnije alternative koje koristimo daju ekvivalentnu funkcionalnost

Pravljenje Prijateljskih Poruka o Pogreškama

Trenutno se pogreške kod prijave prikazuju samo u preglednikovoj konzoli, što je korisnicima nevidljivo. Kao razlika između pilotske interne dijagnostike i sustava za informacije putnicima, moramo komunicirati važne informacije kroz odgovarajući kanal.

Implementacija vidljivih poruka o pogreškama omogućuje korisnicima odmah povratnu informaciju o tome što je pošlo po zlu i kako nastaviti.

Korak 1: Dodajte Mjesto za Poruke o Pogreškama

Prvo, dajmo porukama o pogreškama mjesto u vašem HTML-u. Dodajte ovo točno prije gumba za prijavu kako bi korisnici prirodno to vidjeli:

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

Što se ovdje događa:

• Kreiramo prazan kontejner koji ostaje nevidljiv dok nije potreban
• Pozicioniran je tamo gdje korisnici prirodno pogledaju nakon klika na "Prijava"
• Taj role="alert" je odlična stvar za čitače ekrana - govori asistivnoj tehnologiji "hej, ovo je važno!"
• Jedinstveni id daje JavaScriptu jednostavan cilj

Korak 2: Napravite Pomoćnu Funkciju

Neka napravimo malu pomoćnu funkciju koja može ažurirati bilo koji tekst u elementu. Ovo je jedna od onih "napiši jednom, koristi svugdje" funkcija koje će vam uštedjeti vrijeme:

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

Prednosti funkcije:

• Jednostavno sučelje koje zahtjeva samo ID elementa i tekst
• Sigurno pronalazi i ažurira DOM elemente
• Reupotrebljiv obrazac koji smanjuje dupliciranje koda
• Održava dosljedno ponašanje ažuriranja kroz aplikaciju

Korak 3: Prikažite Pogreške Gdje ih Korisnici Mogu Vidjeti

Sada zamijenimo skrivenu poruku u konzoli s nečim što korisnici zaista mogu vidjeti. Ažurirajte vašu funkciju prijave:

// Umjesto samo zapisivanja u konzolu, pokažite korisniku što nije u redu
if (data.error) {
  return updateElement('loginError', data.error);
}

Ova mala promjena donosi veliku razliku:

• Poruke o pogreškama pojavljuju se točno tamo gdje korisnici gledaju
• Nema više misterioznih tihih neuspjeha
• Korisnici dobivaju trenutnu, korisnu povratnu informaciju
• Vaša aplikacija počinje djelovati profesionalno i promišljeno

Sada, kad testirate s nevažećim računom, vidjet ćete korisnu poruku o pogrešci direktno na stranici!

Korak 4: Biti Uključiv s Pristupačnošću

Evo nešto kul o tom role="alert" koji smo ranije dodali - nije samo dekoracija! Ovaj mali atribut stvara ono što se zove Živa Regija (Live Region) koja odmah objavljuje promjene čitačima ekrana:

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

Zašto je ovo važno:

• Korisnici čitača ekrana čuju poruku o pogrešci čim se pojavi
• Svi dobivaju iste važne informacije, bez obzira na način navigacije
• Jednostavan način da vaša aplikacija radi za više ljudi
• Pokazuje da vam je stalo do stvaranja uključivog iskustva

Male sitnice poput ove razdvajaju dobre programere od izvrsnih!

🎯 Pedagoška Provjera: Obrasci Autentikacije

Stani i Promisli: Upravo ste implementirali kompletan tijek autentikacije. Ovo je osnovni obrazac u web razvoju.

Brza Samoprocjena:

• Možete li objasniti zašto koristimo async/await za pozive API-ja?
• Što bi se dogodilo da zaboravimo funkciju encodeURIComponent()?
• Kako naše rukovanje pogreškama poboljšava korisničko iskustvo?

Poveznica s Praktikom: Obrasci koje ste ovdje naučili (asinkrono dohvaćanje podataka, rukovanje pogreškama, korisnička povratna informacija) koriste se u svakoj većoj web aplikaciji od društvenih mreža do e-trgovina. Gradite vještine spremne za proizvodnju!

Izazovno Pitanje: Kako biste mogli modificirati ovaj sustav autentikacije da podrži više korisničkih uloga (kupac, administrator, blagajnik)? Razmislite o strukturi podataka i potrebnim promjenama u korisničkom sučelju.

Korak 5: Primijenite Isti Obrazac na Registraciju

Za konzistentnost, implementirajte identično rukovanje pogreškama u formi za registraciju:

1. Dodajte element za prikaz pogrešaka u vaš registracijski HTML:

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

2. Ažurirajte vašu funkciju registracije da koristi isti obrazac prikaza pogrešaka:

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

Prednosti konzistentnog rukovanja pogreškama:

• Osigurava ujednačeno korisničko iskustvo kroz sve forme
• Smanjuje kognitivno opterećenje korištenjem poznatih obrazaca
• Pojednostavljuje održavanje s reupotrebljivim kodom
• Jamči da se standardi pristupačnosti poštuju u cijeloj aplikaciji

Izrada Vaše Dinamične Kontrolne Ploče

Sada ćemo vaš statični dashboard transformirati u dinamičko sučelje koje prikazuje stvarne podatke računa. Kao razlika između tiskanog rasporeda leta i živih tablo na aerodromima, prelazimo sa statičnih informacija na prikaze u stvarnom vremenu.

Koristeći tehnike manipulacije DOM-om koje ste naučili, izradit ćemo dashboard koji se automatski ažurira sa trenutnim informacijama o računu.

Upoznavanje s Vašim Podacima

Prije nego što počnemo graditi, zavirimo kakve podatke vaš poslužitelj vraća. Kad se netko uspješno prijavi, evo kakvo blago informacija dobijete:

{
  "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 }
  ]
}

Ova struktura podataka pruža:

• user: Savršeno za personaliziranje iskustva ("Dobro došla nazad, Sarah!")
• currency: Osigurava ispravan prikaz novčanih iznosa
• description: Prijateljski naziv računa
• balance: Vrlo važan trenutačni saldo
• transactions: Cjelovitu povijest transakcija sa svim detaljima

Sve što vam treba da izgradite profesionalan bankarski dashboard!

flowchart TD
    A[Korisnička prijava] --> B[Dohvati podatke računa]
    B --> C{Podaci valjani?}
    C -->|Da| D[Spremi u globalnu varijablu]
    C -->|Ne| E[Prikaži poruku o grešci]
    D --> F[Navigiraj na nadzornu ploču]
    F --> G[Ažuriraj UI elemente]
    G --> H[Prikaži stanje]
    G --> I[Prikaži opis]
    G --> J[Prikaz transakcija]
    J --> K[Napravi redove tablice]
    K --> L[Formatiraj valutu]
    L --> M[Korisnik vidi aktualne podatke]

💡 Savjet za Profesionalce: Želite odmah vidjeti vaš dashboard u akciji? Koristite korisničko ime test kada se prijavljujete - već dolazi s unaprijed učitanim primjerima podataka pa možete odmah vidjeti sve bez potrebe da prvo kreirate transakcije.

Zašto je testni račun koristan:

• Dolazi s realističnim primjerima podataka već učitanim
• Savršen je za gledanje kako se transakcije prikazuju
• Odličan za testiranje značajki vašeg dashboarda
• Štedi vam trud ručnog unosa lažnih podataka

Izrada Elemenata za Prikaz Dashboarda

Gradimo sučelje vaše kontrolne ploče korak po korak, počevši sa sažetkom računa, a zatim prelazimo na složenije značajke poput lista transakcija.

Korak 1: Ažurirajte Vašu HTML Strukturu

Prvo, zamijenite statičan odjeljak "Saldo" dinamičnim placeholder elementima koje vaš JavaScript može popuniti:

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

Zatim dodajte sekciju za opis računa. Budući da ovo djeluje kao naslov za sadržaj dashboarda, koristite semantički HTML:

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

Razumijevanje HTML strukture:

• Koristi zasebne <span> elemente za saldo i valutu radi pojedinačne kontrole
• Primjenjuje jedinstvene ID-jeve na svaki element za ciljanje iz JavaScripta
• Prati semantički HTML koristeći <h2> za opis računa
• Stvara logičku hijerarhiju za čitače ekrana i SEO

✅ Pristupačnost na Umu: Opis računa funkcionira kao naslov za sadržaj dashboarda, stoga je označen semantički kao zaglavlje. Više o utjecaju strukture zaglavlja na pristupačnost. Možete li identificirati druge elemente na svojoj stranici koji bi mogli imati koristi od zaglavlja?

Korak 2: Napravite Funkciju za Ažuriranje Dashboarda

Sada napravite funkciju koja ispunjava dashboard stvarnim podacima računa:

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

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

Korak po korak, evo što ova funkcija radi:

• Provjerava da li podaci o računu postoje prije nastavka
• Preusmjerava neautentificirane korisnike natrag na stranicu prijave
• Ažurira opis računa koristeći ponovo upotrebljivu funkciju updateElement
• Formatira saldo da uvijek prikazuje dvije decimale
• Prikazuje odgovarajući simbol valute

💰 Formatiranje Novca: Ta metoda toFixed(2) je spasitelj! Osigurava da vaš saldo uvijek izgleda kao pravi novac - "75.00" umjesto samo "75". Vaši korisnici će cijeniti poznati prikaz valute.

Korak 3: Osigurajte Da Se Vaš Dashboard Ažurira

Kako bismo bili sigurni da se vaš dashboard osvježava s trenutnim podacima svaki put kad netko posjeti, trebamo se uhvatiti vašeg navigacijskog sustava. Ako ste odradili zadanu vježbu iz lekcije 1, ovo bi vam trebalo biti poznato. Ako ne, ne brinite - evo što vam treba:

Dodajte ovo na kraj vaše funkcije updateRoute():

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

Zatim ažurirajte vaše rute da uključe inicijalizaciju dashboarda:

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

Što ova pametna postavka radi:

• Provjerava ako ruta ima poseban inicijalizacijski kod
• Automatski pokreće taj kod kad se ruta učita
• Osigurava da vaš dashboard uvijek prikazuje svježe, aktualne podatke
• Drži vašu logiku rutanja čistom i organiziranom

Testiranje Vašeg Dashboarda

Nakon implementacije ovih promjena, testirajte vaš dashboard:

1. Prijavite se s testnim računom
2. Provjerite jeste li preusmjereni na dashboard
3. Pogledajte jesu li opis računa, saldo i valuta ispravno prikazani
4. Pokušajte se odjaviti i ponovo prijaviti kako biste bili sigurni da se podaci pravilno osvježavaju

Vaš dashboard sada treba prikazivati dinamične podatke računa koji se ažuriraju na temelju podataka prijavljenog korisnika!

Izrada Pametnih Lista Transakcija pomoću Predložaka

Umjesto da ručno kreiramo HTML za svaku transakciju, koristit ćemo predloške za automatsko generiranje ujednačenog formata. Kao standardizirani dijelovi u proizvodnji svemirskih letjelica, predlošci osiguravaju da svaki redak transakcije slijedi istu strukturu i izgled.

Ova tehnika učinkovito skalira od nekoliko transakcija do tisuća, održavajući dosljedne performanse i prezentaciju.

graph LR
    A[HTML Predložak] --> B[JavaScript Klon]
    B --> C[Popuni s Podacima]
    C --> D[Dodaj u Fragment]
    D --> E[Skupno Umetni u DOM]
    
    subgraph "Prednosti Učinkovitosti"
        F[Jednokratna DOM Ažuriranja]
        G[Ujednačeno Formatiranje]
        H[Ponovno Iskoristiv Uzorak]
    end
    
    E --> F
    E --> G
    E --> H

flowchart LR
    A[Podaci o transakciji] --> B[HTML predložak]
    B --> C[Kloniraj predložak]
    C --> D[Popuni podacima]
    D --> E[Dodaj u DOM]
    E --> F[Ponovi za svaku transakciju]

Korak 1: Kreirajte Predložak za Transakciju

Prvo, dodajte reupotrebljivi predložak za retke transakcija unutar vašeg <body> HTML-a:

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

Razumijevanje HTML predložaka:

• Definira strukturu za jedan redak tablice
• Ostaje nevidljiv dok se ne klonira i ne popuni JavaScriptom
• Uključuje tri ćelije za datum, opis i iznos
• Pruža reupotrebljiv obrazac za dosljedan format

Korak 2: Pripremite Tablicu za Dinamički Sadržaj

Zatim, dodajte id vašem tijelu tablice kako bi JavaScript mogao lako ciljati:

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

Što ovo omogućuje:

• Stvara jasan cilj za umetanje redaka transakcija
• Odvaja strukturu tablice od dinamičkog sadržaja
• Omogućuje jednostavno brisanje i ponovno punjenje podataka transakcija

Korak 3: Izgradite Tvornicu Redaka Transakcija

Sada napravite funkciju koja pretvara podatke transakcija u HTML elemente:

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

Raskrinkavanje ove tvornice funkcija:

• Dohvaća element predloška po njegovom ID-ju
• Klonira sadržaj predloška za sigurnu manipulaciju
• Odabire red tablice unutar kloniranog sadržaja
• Popunjava svaku ćeliju podacima transakcije
• Formatira iznos da pokaže ispravne decimale
• Vraća kompletan red spreman za umetanje

Korak 4: Učinkovito Generirajte Više Redova Transakcija

Dodajte ovaj kod u vašu funkciju updateDashboard() za prikaz svih transakcija:

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

Razumijevanje ovoga učinkovitog pristupa:

• Stvara fragment dokumenta za grupiranje DOM operacija
• Iterira kroz sve transakcije u podacima računa
• Generira redak za svaku transakciju pomoću tvornice funkcija
• Prikuplja sve retke u fragment prije dodavanja u DOM
• Izvršava jedno ažuriranje DOM-a umjesto više pojedinačnih umetanja

⚡ Optimizacija performansi: document.createDocumentFragment() radi poput procesa sklapanja u Boeingu – komponente se pripremaju izvan glavne linije, a zatim se instaliraju kao cjelovita jedinica. Ovaj pristup grupiranju minimizira ponovne izračune DOM-a izvođenjem jedinstvene umetnute radnje umjesto više pojedinačnih operacija.

Korak 5: Poboljšajte funkciju ažuriranja za mješoviti sadržaj

Vaša funkcija updateElement() trenutno obrađuje samo tekstualni sadržaj. Ažurirajte je da radi i s tekstom i s DOM čvorovima:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // Removes all children
  element.append(textOrNode);
}

Ključna poboljšanja u ovom ažuriranju:

• Briše postojeći sadržaj prije dodavanja novog sadržaja
• Prihvaća ili tekstualne nizove ili DOM čvorove kao parametre
• Koristi metodu append() za veću fleksibilnost
• Održava kompatibilnost unatrag s postojećim načinom rada temeljenim na tekstu

Vozite svoj kontrolni panel na test

Vrijeme je za trenutak istine! Pogledajmo vaš dinamični kontrolni panel u akciji:

1. Prijavite se koristeći račun test (već sadrži primjerni sadržaj)
2. Navigirajte do svog kontrolnog panela
3. Provjerite pojavljuju li se redovi transakcija s ispravnim oblikovanjem
4. Provjerite jesu li datum, opisi i iznosi ispravno prikazani

Ako sve radi, trebali biste vidjeti potpuno funkcionalnu listu transakcija na svom kontrolnom panelu! 🎉

Što ste postigli:

• Izgradili ste kontrolni panel koji se prilagođava bilo kojoj količini podataka
• Kreirali ste ponovo upotrebljive predloške za dosljedno oblikovanje
• Proveli ste učinkovite tehnike manipulacije DOM-om
• Razvili ste funkcionalnost usporedivu s proizvodnim bankarskim aplikacijama

Uspješno ste transformirali statičnu web stranicu u dinamičku web aplikaciju.

🎯 Pedagoški pregled: Generiranje dinamičkog sadržaja

Razumijevanje arhitekture: Implementirali ste sofisticirani podatkovni tok prema korisničkom sučelju koji odražava obrasce korištene u okvirima poput React, Vue i Angular.

Glavne usvojene koncepte:

• Renderiranje temeljeno na predlošcima: Izrada ponovo upotrebljivih UI komponenti
• Dokument fragmenti: Optimizacija performansi DOM-a
• Sigurna manipulacija DOM-om: Sprječavanje sigurnosnih ranjivosti
• Transformacija podataka: Pretvaranje serverskih podataka u korisnička sučelja

Industrijska povezanost: Ove tehnike čine temelj modernih frontend okvira. Reactov virtualni DOM, Vue sustav predložaka i Angularova komponentna arhitektura svi se oslanjaju na ove osnovne koncepte.

Pitanje za razmišljanje: Kako biste proširili ovaj sustav da podrži ažuriranja u stvarnom vremenu (npr., da nove transakcije automatski budu vidljive)? Razmotrite WebSockets ili Server-Sent Events.

---

📈 Vaš vremenski tijek ovladavanja upravljanjem podacima

timeline
    title Putovanje razvoja vođenog podacima
    
    section Izgradnja temelja
        API postavljanje i testiranje
            : Razumjeti komunikaciju klijent-poslužitelj
            : Ovladati ciklusom HTTP zahtjev/odgovor
            : Naučiti tehnike otklanjanja pogrešaka
    
    section Ovladavanje autentifikacijom
        Uzorci asinhronih funkcija
            : Pisati čist async/await kod
            : Učinkovito rukovati obećanjima
            : Implementirati granice za pogreške
        Upravljanje korisničkom sesijom
            : Kreirati uzorke globalnog stanja
            : Izgraditi zaštite za navigaciju
            : Dizajnirati sustave povratnih informacija korisnika
    
    section Razvoj dinamičkog UI-a
        Sigurna manipulacija DOM-om
            : Spriječiti XSS ranjivosti
            : Koristiti textContent umjesto innerHTML
            : Kreirati sučelja prilagođena pristupačnosti
        Sustavi predložaka
            : Izgraditi ponovno upotrebljive UI komponente
            : Optimizirati performanse s fragmentima
            : Skalirati za rukovanje velikim skupovima podataka
    
    section Profesionalni uzorci
        Kod spreman za produkciju
            : Implementirati sveobuhvatno upravljanje pogreškama
            : Pridržavati se sigurnosnih najboljih praksi
            : Kreirati održive arhitekture
        Moderni web standardi
            : Ovladati Fetch API uzorcima
            : Razumjeti CORS konfiguracije
            : Izgraditi responzivne, pristupačne UI-e

🎓 Prekretnica diplomiranja: Uspješno ste izgradili cjelovitu web aplikaciju vođenu podacima koristeći moderne JavaScript uzorke. Ove vještine direktno se prenose na rad s okvirima poput React, Vue ili Angular.

🔄 Sposobnosti sljedeće razine:

• Spremni za istraživanje frontend okvira koji nadograđuju ove koncepte
• Pripremljeni za implementaciju značajki u stvarnom vremenu s WebSockets
• Opremljeni za izgradnju progresivnih web aplikacija s offline mogućnostima
• Postavljeni temelji za učenje naprednih obrazaca upravljanja stanjem

Izazov GitHub Copilot agenta 🚀

Upotrijebite način rada Agent za dovršetak sljedećeg izazova:

Opis: Poboljšajte bankarsku aplikaciju implementiranjem funkcije pretraživanja i filtriranja transakcija koja korisnicima omogućava pronalazak specifičnih transakcija prema rasponu datuma, iznosu ili opisu.

Naredba: Izradite funkcionalnost pretraživanja za bankarsku aplikaciju koja uključuje: 1) Obrazac za pretraživanje s poljima za unos raspona datuma (od/do), minimalnog/maksimalnog iznosa, i ključnih riječi u opisu transakcije, 2) Funkciju filterTransactions() koja filtrira niz account.transactions na temelju kriterija pretraživanja, 3) Ažurirajte funkciju updateDashboard() da prikazuje filtrirane rezultate, i 4) Dodajte gumb "Obriši filtre" za resetiranje prikaza. Koristite moderne JavaScript metode nizova poput filter() i obradite rubne slučajeve za prazne kriterije pretraživanja.

Saznajte više o načinu rada agente ovdje.

🚀 Izazov

Spremni da podignete svoju bankarsku aplikaciju na sljedeću razinu? Učinite da izgleda i osjeća se kao nešto što biste zapravo željeli koristiti. Evo nekoliko ideja za poticanje vaše kreativnosti:

Uljepšajte je: Dodajte CSS stilove kako biste svoj funkcionalni kontrolni panel pretvorili u nešto vizualno privlačno. Razmislite o čistim linijama, dobrom razmaku i možda čak nekoliko suptilnih animacija.

Učinite je responsivnom: Probajte koristiti media queries za stvaranje responsivnog dizajna koji savršeno radi na telefonima, tabletima i računalima. Vaši korisnici će vam biti zahvalni!

Dodajte malo štiha: Razmislite o kodiranju boja za transakcije (zeleno za prihod, crveno za rashode), dodavanju ikona ili kreiranju efekata pri prelasku mišem koje čine sučelje interaktivnim.

Evo kako bi mogao izgledati dotjerani kontrolni panel:

Nemojte osjećati potrebu da točno replicirate – upotrijebite ga kao inspiraciju i prilagodite po svom ukusu!

Kviz nakon predavanja

Kviz nakon predavanja

Zadatak

Refaktorirajte i komentirajte svoj kod

---

Odricanje od odgovornosti: Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili kriva tumačenja nastala korištenjem ovog prijevoda.