Web-Dev-For-Beginners/translations/hr/7-bank-project/4-state-management/README.md

Izrada aplikacije za bankarstvo, dio 4: Koncepti upravljanja stanjem

Kviz prije predavanja

Pre-predavački kviz

Uvod

Upravljanje stanjem u aplikaciji je poput navigacijskog sustava na svemirskoj letjelici Voyager – kada sve radi glatko, jedva primijetite da postoji. Ali kad nešto pođe po zlu, postaje razlika između dolaska u međuzvjezdani prostor i lutanja izgubljenog u kozmičkom bespuću. U web razvoju, stanje predstavlja sve što vaša aplikacija treba zapamtiti: status prijave korisnika, podatke iz obrazaca, povijest navigacije i privremena stanja sučelja.

Kako se vaša aplikacija za bankarstvo razvijala od jednostavnog obrasca za prijavu do sofisticiranije aplikacije, vjerojatno ste se susreli s nekim uobičajenim izazovima. Osvježite stranicu i korisnici se neočekivano odjavljuju. Zatvorite preglednik i sav napredak nestaje. Pokušavate otkloniti problem i tragate kroz više funkcija koje sve mijenjaju iste podatke na različite načine.

To nisu znakovi lošeg kodiranja – to su prirodne poteškoće koje se javljaju kada aplikacije dosegnu određeni prag složenosti. Svaki se programer suočava s tim izazovima dok njihove aplikacije prelaze iz "dokaza koncepta" u "proizvod spreman za upotrebu".

U ovoj lekciji implementirat ćemo centralizirani sustav upravljanja stanjem koji vašu aplikaciju za bankarstvo pretvara u pouzdanu, profesionalnu aplikaciju. Naučit ćete upravljati tokovima podataka predvidljivo, pravilno čuvati korisničke sesije i stvoriti glatko korisničko iskustvo koje moderne web aplikacije zahtijevaju.

Preduvjeti

Prije nego što zaronite u koncepte upravljanja stanjem, trebate pravilno postaviti razvojno okruženje i imati temelj svoje aplikacije za bankarstvo. Ova lekcija izravno se nadovezuje na koncepte i kod iz prethodnih dijelova ove serije.

Provjerite imate li sljedeće komponente spremne prije nego što nastavite:

Potrebna postavka:

• Završite lekciju o dohvaćanju podataka - vaša aplikacija treba uspješno učitati i prikazati podatke o računu
• Instalirajte Node.js na vaš sustav za pokretanje pozadinskog API-ja
• Pokrenite server API lokalno za rukovanje operacijama s podacima o računu

Testiranje vašeg okruženja:

Provjerite radi li vaš API server ispravno izvršavanjem ove naredbe u terminalu:

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

Što ova naredba radi:

• Šalje GET zahtjev vašem lokalnom API serveru
• Testira vezu i provjerava odgovara li server
• Vraća informacije o verziji API-ja ako sve radi ispravno

---

Dijagnosticiranje trenutnih problema sa stanjem

Kao Sherlock Holmes koji istražuje mjesto zločina, moramo razumjeti što se točno događa u našoj trenutnoj implementaciji prije nego što riješimo misterij nestanka korisničkih sesija.

Provedimo jednostavan eksperiment koji otkriva temeljne izazove upravljanja stanjem:

🧪 Isprobajte ovaj dijagnostički test:

1. Prijavite se u svoju aplikaciju za bankarstvo i idite na nadzornu ploču
2. Osvježite stranicu preglednika
3. Promatrajte što se događa s vašim statusom prijave

Ako ste preusmjereni natrag na zaslon za prijavu, otkrili ste klasičan problem s postojanošću stanja. Ovo ponašanje se događa jer naša trenutna implementacija pohranjuje korisničke podatke u JavaScript varijable koje se resetiraju pri svakom učitavanju stranice.

Problemi trenutne implementacije:

Jednostavna varijabla account iz naše prethodne lekcije stvara tri značajna problema koja utječu i na korisničko iskustvo i na održivost koda:

Problem	Tehnički uzrok	Utjecaj na korisnika
Gubitak sesije	Osvježavanje stranice briše JavaScript varijable	Korisnici se moraju često ponovno prijavljivati
Raspršene promjene	Više funkcija izravno mijenja stanje	Otklanjanje grešaka postaje sve teže
Nepotpuno čišćenje	Odjava ne briše sve reference stanja	Potencijalni sigurnosni i privatni problemi

Arhitektonski izazov:

Kao što je dizajn Titanica s odvojenim odjeljcima izgledao robusno dok se više odjeljaka nije istovremeno napunilo vodom, rješavanje ovih problema pojedinačno neće riješiti temeljni arhitektonski problem. Potrebno nam je sveobuhvatno rješenje za upravljanje stanjem.

💡 Što zapravo pokušavamo postići ovdje?

Upravljanje stanjem zapravo se svodi na rješavanje dviju temeljnih zagonetki:

1. Gdje su moji podaci?: Praćenje koje informacije imamo i odakle dolaze
2. Jesu li svi na istoj stranici?: Osiguravanje da ono što korisnici vide odgovara onome što se zapravo događa

Naš plan igre:

Umjesto da se vrtimo u krug, stvorit ćemo centralizirani sustav upravljanja stanjem. Zamislite to kao da imate jednu stvarno organiziranu osobu koja je zadužena za sve važne stvari:

Razumijevanje ovog toka podataka:

• Centralizira sve podatke aplikacije na jednom mjestu
• Usmjerava sve promjene stanja kroz kontrolirane funkcije
• Osigurava da sučelje ostane sinkronizirano s trenutnim stanjem
• Pruža jasan, predvidljiv obrazac za upravljanje podacima

💡 Profesionalni uvid: Ova lekcija fokusira se na temeljne koncepte. Za složene aplikacije, biblioteke poput Redux nude naprednije značajke upravljanja stanjem. Razumijevanje ovih osnovnih principa pomoći će vam da savladate bilo koju biblioteku za upravljanje stanjem.

⚠️ Napredna tema: Nećemo pokrivati automatska ažuriranja sučelja koja se pokreću promjenama stanja, jer to uključuje koncepte reaktivnog programiranja. Smatrajte ovo izvrsnim sljedećim korakom za vaš proces učenja!

Zadatak: Centralizacija strukture stanja

Započnimo transformaciju našeg raspršenog upravljanja stanjem u centralizirani sustav. Ovaj prvi korak postavlja temelj za sve nadolazeće poboljšanja.

Korak 1: Kreirajte centralizirani objekt stanja

Zamijenite jednostavnu deklaraciju account:

let account = null;

Strukturiranim objektom stanja:

let state = {
  account: null
};

Zašto je ova promjena važna:

• Centralizira sve podatke aplikacije na jednom mjestu
• Priprema strukturu za dodavanje više svojstava stanja kasnije
• Stvara jasnu granicu između stanja i drugih varijabli
• Postavlja obrazac koji se skalira kako vaša aplikacija raste

Korak 2: Ažurirajte obrasce pristupa stanju

Ažurirajte svoje funkcije kako bi koristile novu strukturu stanja:

U funkcijama register() i login(), zamijenite:

account = ...

S:

state.account = ...

U funkciji updateDashboard(), dodajte ovu liniju na vrh:

const account = state.account;

Što ove promjene postižu:

• Održavaju postojeću funkcionalnost uz poboljšanje strukture
• Pripremaju vaš kod za sofisticiranije upravljanje stanjem
• Stvaraju dosljedne obrasce za pristup podacima stanja
• Postavljaju temelj za centralizirana ažuriranja stanja

💡 Napomena: Ovo preuređenje ne rješava odmah naše probleme, ali stvara ključni temelj za moćna poboljšanja koja slijede!

Implementacija kontroliranih ažuriranja stanja

S našim stanjem centraliziranim, sljedeći korak uključuje uspostavljanje kontroliranih mehanizama za izmjene podataka. Ovaj pristup osigurava predvidljive promjene stanja i olakšava otklanjanje grešaka.

Osnovni princip nalikuje kontroli zračnog prometa: umjesto da se dopušta više funkcija da neovisno mijenjaju stanje, sve promjene ćemo kanalizirati kroz jednu kontroliranu funkciju. Ovaj obrazac pruža jasan pregled kada i kako dolazi do promjena podataka.

Upravljanje nepromjenjivim stanjem:

Naš objekt state tretirat ćemo kao nepromjenjiv, što znači da ga nikada nećemo izravno mijenjati. Umjesto toga, svaka promjena stvara novi objekt stanja s ažuriranim podacima.

Iako se ovaj pristup u početku može činiti neučinkovitim u usporedbi s izravnim izmjenama, pruža značajne prednosti za otklanjanje grešaka, testiranje i održavanje predvidljivosti aplikacije.

Prednosti upravljanja nepromjenjivim stanjem:

Prednost	Opis	Utjecaj
Predvidljivost	Promjene se događaju samo kroz kontrolirane funkcije	Lakše za otklanjanje grešaka i testiranje
Praćenje povijesti	Svaka promjena stanja stvara novi objekt	Omogućuje funkcionalnost poništavanja/ponovnog izvršavanja
Prevencija nuspojava	Nema slučajnih izmjena	Sprječava misteriozne greške
Optimizacija performansi	Lako je otkriti kada se stanje stvarno promijenilo	Omogućuje učinkovita ažuriranja sučelja

Nepromjenjivost u JavaScriptu s Object.freeze():

JavaScript pruža Object.freeze() za sprječavanje izmjena objekata:

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

Razlaganje onoga što se ovdje događa:

• Sprječava izravna dodjeljivanja ili brisanja svojstava
• Izbacuje iznimke ako se pokušaju izvršiti izmjene
• Osigurava da promjene stanja moraju proći kroz kontrolirane funkcije
• Stvara jasan ugovor o tome kako se stanje može ažurirati

💡 Dubinsko istraživanje: Saznajte razliku između plitkih i dubokih nepromjenjivih objekata u MDN dokumentaciji. Razumijevanje ove razlike ključno je za složene strukture stanja.

Zadatak

Kreirajmo novu funkciju updateState():

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

U ovoj funkciji stvaramo novi objekt stanja i kopiramo podatke iz prethodnog stanja koristeći operator širenja (...). Zatim nadjačavamo određeno svojstvo objekta stanja novim podacima koristeći notaciju zagrada [property] za dodjelu. Na kraju, zaključavamo objekt kako bismo spriječili izmjene koristeći Object.freeze(). Trenutno imamo samo svojstvo account pohranjeno u stanju, ali s ovim pristupom možete dodati koliko god želite svojstava u stanje.

Također ćemo ažurirati inicijalizaciju state kako bismo osigurali da je početno stanje također zaključano:

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

Nakon toga, ažurirajte funkciju register zamjenom dodjele state.account = result; s:

updateState('account', result);

Učinite isto s funkcijom login, zamjenjujući state.account = data; s:

updateState('account', data);

Sada ćemo iskoristiti priliku da riješimo problem nečišćenja podataka o računu kada korisnik klikne na Odjava.

Kreirajte novu funkciju logout():

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

U updateDashboard(), zamijenite preusmjeravanje return navigate('/login'); s return logout();;

Pokušajte registrirati novi račun, odjaviti se i ponovno prijaviti kako biste provjerili radi li sve ispravno.

Savjet: možete pogledati sve promjene stanja dodavanjem console.log(state) na dno updateState() i otvaranjem konzole u alatima za razvoj vašeg preglednika.

Implementacija postojanosti podataka

Problem gubitka sesije koji smo ranije identificirali zahtijeva rješenje za postojanost koje održava korisničko stanje tijekom sesija preglednika. Ovo transformira našu aplikaciju iz privremenog iskustva u pouzdan, profesionalni alat.

Razmislite o tome kako atomski satovi održavaju precizno vrijeme čak i tijekom prekida napajanja pohranjujući ključne podatke u nehlapljivu memoriju. Slično tome, web aplikacijama su potrebni mehanizmi za trajnu pohranu kako bi sačuvale bitne korisničke podatke tijekom sesija preglednika i osvježavanja stranica.

Strateška pitanja za postojanost podataka:

Prije implementacije postojanosti, razmotrite ove ključne čimbenike:

Pitanje	Kontekst aplikacije za bankarstvo	Utjecaj odluke
Jesu li podaci osjetljivi?	Stanje računa, povijest transakcija	Odabir sigurnih metoda pohrane
Koliko dugo bi trebali trajati?	Stanje prijave naspram privremenih postavki sučelja	Odabir odgovarajućeg trajanja pohrane
Treba li ih server?	Tokeni za autentifikaciju naspram postavki sučelja	Određivanje zahtjeva za dijeljenje

Opcije pohrane u pregledniku:

Moderni preglednici pružaju nekoliko mehanizama za pohranu, svaki dizajniran za različite slučajeve upotrebe:

Primarni API-ji za pohranu:

1. localStorage: Trajna Key/Value pohrana

   • Traje podatke kroz sesije preglednika neograničeno
   • Preživljava ponovno pokretanje preglednika i računala
   • Ograničen na specifičnu domenu web stranice
   • Savršen za korisničke postavke i stanja prijave

2. sessionStorage: Privremena pohrana sesije

   • Funkcionira identično kao localStorage tijekom aktivnih sesija
   • Briše se automatski kada se zatvori kartica preglednika
   • Idealno za privremene podatke koji ne bi trebali trajati

3. HTTP kolačići: Pohrana dijeljena sa serverom

   • Automatski se šalje sa svakim zahtjevom serveru
   • Savršeno za autentifikacijske tokene
   • Ograničeno veličinom i može utjecati na performanse

Zahtjev za serijalizacijom podataka:

I localStorage i sessionStorage pohranjuju samo stringove:

// Convert objects to JSON strings for storage
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// Parse JSON strings back to objects when retrieving
const savedAccount = JSON.parse(localStorage.getItem('account'));

Razumijevanje serijalizacije:

• Pretvara JavaScript objekte u JSON stringove koristeći JSON.stringify()
• Rekonstruira objekte iz JSON-a koristeći [JSON.parse()](

💡 Napredna opcija: Za složene offline aplikacije s velikim skupovima podataka, razmotrite IndexedDB API. Pruža punu bazu podataka na strani klijenta, ali zahtijeva složeniju implementaciju.

Zadatak: Implementacija lokalne pohrane (localStorage) za trajnost podataka

Implementirajmo trajnu pohranu kako bi korisnici ostali prijavljeni dok se eksplicitno ne odjave. Koristit ćemo localStorage za pohranu podataka o računu između sesija preglednika.

Korak 1: Definirajte konfiguraciju pohrane

const storageKey = 'savedAccount';

Što ova konstanta omogućuje:

• Stvara dosljedan identifikator za naše pohranjene podatke
• Sprječava tipografske pogreške u referencama ključeva pohrane
• Olakšava promjenu ključa pohrane ako je potrebno
• Prati najbolje prakse za održavanje koda

Korak 2: Dodajte automatsku trajnost

Dodajte ovu liniju na kraj funkcije updateState():

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

Razlaganje onoga što se ovdje događa:

• Pretvara objekt računa u JSON string za pohranu
• Spremanje podataka koristeći naš dosljedan ključ pohrane
• Izvršava se automatski kad god dođe do promjena stanja
• Osigurava da su pohranjeni podaci uvijek sinkronizirani s trenutnim stanjem

💡 Prednost arhitekture: Budući da smo centralizirali sva ažuriranja stanja kroz updateState(), dodavanje trajnosti zahtijevalo je samo jednu liniju koda. Ovo pokazuje snagu dobrih arhitektonskih odluka!

Korak 3: Vratite stanje pri učitavanju aplikacije

Kreirajte funkciju za inicijalizaciju kako biste vratili spremljene podatke:

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

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

init();

Razumijevanje procesa inicijalizacije:

• Dohvaća prethodno spremljene podatke o računu iz localStorage
• Parsira JSON string natrag u JavaScript objekt
• Ažurira stanje koristeći našu kontroliranu funkciju ažuriranja
• Vraća korisničku sesiju automatski pri učitavanju stranice
• Izvršava se prije ažuriranja ruta kako bi osigurao dostupnost stanja

Korak 4: Optimizirajte zadanu rutu

Ažurirajte zadanu rutu kako biste iskoristili trajnost:

U updateRoute(), zamijenite:

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

Zašto ova promjena ima smisla:

• Iskorištava naš novi sustav trajnosti učinkovito
• Omogućuje da dashboard provjerava autentifikaciju
• Automatski preusmjerava na prijavu ako ne postoji spremljena sesija
• Stvara besprijekorno korisničko iskustvo

Testiranje vaše implementacije:

1. Prijavite se u svoju aplikaciju za bankarstvo
2. Osvježite stranicu preglednika
3. Provjerite ostajete li prijavljeni i na dashboardu
4. Zatvorite i ponovno otvorite preglednik
5. Vratite se u aplikaciju i potvrdite da ste još uvijek prijavljeni

🎉 Postignuće otključano: Uspješno ste implementirali upravljanje trajnim stanjem! Vaša aplikacija sada se ponaša kao profesionalna web aplikacija.

Balansiranje trajnosti s svježinom podataka

Naš sustav trajnosti uspješno održava korisničke sesije, ali uvodi novi izazov: zastarjelost podataka. Kada više korisnika ili aplikacija mijenja iste podatke na serveru, lokalno spremljene informacije postaju zastarjele.

Ova situacija podsjeća na vikinške navigatore koji su se oslanjali na pohranjene karte zvijezda i trenutna opažanja nebeskih tijela. Karte su pružale dosljednost, ali navigatori su trebali svježa opažanja kako bi uzeli u obzir promjenjive uvjete. Slično tome, naša aplikacija treba i trajno korisničko stanje i svježe podatke sa servera.

🧪 Otkrivanje problema zastarjelosti podataka:

1. Prijavite se na dashboard koristeći račun test
2. Pokrenite ovu naredbu u terminalu kako biste simulirali transakciju iz drugog izvora:

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

3. Osvježite stranicu dashboarda u pregledniku
4. Promatrajte prikazuje li se nova transakcija

Što ovaj test pokazuje:

• Pokazuje kako localStorage može postati "zastario" (zastarjeli podaci)
• Simulira scenarije iz stvarnog svijeta gdje se podaci mijenjaju izvan vaše aplikacije
• Otkriva napetost između trajnosti i svježine podataka

Izazov zastarjelosti podataka:

Problem	Uzrok	Utjecaj na korisnika
Zastarjeli podaci	localStorage se nikada automatski ne ažurira	Korisnici vide zastarjele informacije
Promjene na serveru	Druge aplikacije/korisnici mijenjaju iste podatke	Nekonzistentni prikazi na različitim platformama
Cache vs. stvarnost	Lokalna pohrana ne odgovara stanju na serveru	Loše korisničko iskustvo i zbunjenost

Strategija rješenja:

Implementirat ćemo uzorak "osvježavanja pri učitavanju" koji balansira prednosti trajnosti s potrebom za svježim podacima. Ovaj pristup održava glatko korisničko iskustvo uz osiguranje točnosti podataka.

Zadatak: Implementacija sustava za osvježavanje podataka

Kreirat ćemo sustav koji automatski dohvaća svježe podatke sa servera dok zadržava prednosti našeg sustava trajnog stanja.

Korak 1: Kreirajte funkciju za ažuriranje podataka o računu

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

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

  updateState('account', data);
}

Razumijevanje logike ove funkcije:

• Provjerava je li korisnik trenutno prijavljen (postoji state.account)
• Preusmjerava na odjavu ako ne postoji valjana sesija
• Dohvaća svježe podatke o računu sa servera koristeći postojeću funkciju getAccount()
• Rukuje greškama servera graciozno odjavljujući nevaljane sesije
• Ažurira stanje svježim podacima koristeći naš kontrolirani sustav ažuriranja
• Pokreće automatsku trajnost localStorage putem funkcije updateState()

Korak 2: Kreirajte funkciju za osvježavanje dashboarda

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

Što ova funkcija osvježavanja postiže:

• Koordinira proces osvježavanja podataka i ažuriranja korisničkog sučelja
• Čeka da se učitaju svježi podaci prije ažuriranja prikaza
• Osigurava da dashboard prikazuje najnovije informacije
• Održava čistu razliku između upravljanja podacima i ažuriranja korisničkog sučelja

Korak 3: Integracija s sustavom ruta

Ažurirajte konfiguraciju ruta kako biste automatski pokrenuli osvježavanje:

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

Kako ova integracija funkcionira:

• Izvršava funkciju osvježavanja svaki put kad se učita ruta dashboarda
• Osigurava da se svježi podaci uvijek prikazuju kad korisnici pristupe dashboardu
• Održava postojeću strukturu ruta uz dodavanje svježine podataka
• Pruža dosljedan uzorak za inicijalizaciju specifičnu za rute

Testiranje vašeg sustava za osvježavanje podataka:

1. Prijavite se u svoju aplikaciju za bankarstvo
2. Pokrenite curl naredbu od ranije kako biste kreirali novu transakciju
3. Osvježite stranicu dashboarda ili se prebacite na drugu stranicu pa se vratite
4. Provjerite prikazuje li se nova transakcija odmah

🎉 Postignut savršen balans: Vaša aplikacija sada kombinira glatko iskustvo trajnog stanja s točnošću svježih podataka sa servera!

Izazov za GitHub Copilot agenta 🚀

Koristite Agent način rada za dovršavanje sljedećeg izazova:

Opis: Implementirajte sveobuhvatan sustav upravljanja stanjem s funkcionalnošću poništavanja/ponovnog izvršavanja za aplikaciju za bankarstvo. Ovaj izazov pomoći će vam da vježbate napredne koncepte upravljanja stanjem, uključujući praćenje povijesti stanja, nepromjenjiva ažuriranja i sinkronizaciju korisničkog sučelja.

Zadatak: Kreirajte poboljšani sustav upravljanja stanjem koji uključuje: 1) Niz povijesti stanja koji prati sva prethodna stanja, 2) Funkcije za poništavanje i ponovno izvršavanje koje mogu vratiti prethodna stanja, 3) UI gumbe za operacije poništavanja/ponovnog izvršavanja na dashboardu, 4) Maksimalni limit povijesti od 10 stanja kako bi se spriječili problemi s memorijom, i 5) Pravilno čišćenje povijesti kada se korisnik odjavi. Osigurajte da funkcionalnost poništavanja/ponovnog izvršavanja radi s promjenama stanja računa i da se trajno pohranjuje između osvježavanja preglednika.

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

🚀 Izazov: Optimizacija pohrane

Vaša implementacija sada učinkovito upravlja korisničkim sesijama, osvježavanjem podataka i stanjem. Međutim, razmislite je li naš trenutni pristup optimalno balansiran između učinkovitosti pohrane i funkcionalnosti.

Poput šahovskih majstora koji razlikuju ključne figure od onih koje se mogu žrtvovati, učinkovito upravljanje stanjem zahtijeva prepoznavanje podataka koji moraju biti trajno pohranjeni naspram onih koji bi uvijek trebali biti svježi sa servera.

Analiza optimizacije:

Procijenite svoju trenutnu implementaciju localStorage i razmotrite ova strateška pitanja:

• Koje su minimalne informacije potrebne za održavanje autentifikacije korisnika?
• Koji se podaci mijenjaju dovoljno često da lokalno predmemoriranje pruža malo koristi?
• Kako optimizacija pohrane može poboljšati performanse bez narušavanja korisničkog iskustva?

Strategija implementacije:

• Identificirajte ključne podatke koji moraju biti trajno pohranjeni (vjerojatno samo identifikacija korisnika)
• Modificirajte svoju implementaciju localStorage kako biste pohranjivali samo kritične podatke sesije
• Osigurajte da se svježi podaci uvijek učitavaju sa servera prilikom posjeta dashboardu
• Testirajte da vaš optimizirani pristup održava isto korisničko iskustvo

Napredna razmatranja:

• Usporedite kompromise između pohrane punih podataka o računu i samo autentifikacijskih tokena
• Dokumentirajte svoje odluke i razloge za buduće članove tima

Ovaj izazov pomoći će vam da razmišljate kao profesionalni programer koji uzima u obzir i korisničko iskustvo i učinkovitost aplikacije. Uzmite si vremena za eksperimentiranje s različitim pristupima!

Kviz nakon predavanja

Kviz nakon predavanja

Zadatak

Implementirajte dijalog "Dodaj transakciju"

Evo primjera rezultata nakon dovršetka zadatka:

---

Izjava o odricanju 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 autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.