History

softchris bde9da6dad 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

Izrada aplikacije za bankarstvo, dio 1: HTML predlošci i rute u web aplikaciji

Kada je Apollo 11-ov navigacijski računalni sustav 1969. godine vodio misiju na Mjesec, morao je prelaziti između različitih programa bez ponovnog pokretanja cijelog sustava. Moderne web aplikacije funkcioniraju na sličan način – mijenjaju ono što vidite bez ponovnog učitavanja svega od početka. To stvara glatko i responzivno iskustvo koje korisnici danas očekuju.

Za razliku od tradicionalnih web stranica koje ponovno učitavaju cijele stranice za svaku interakciju, moderne web aplikacije ažuriraju samo dijelove koji se trebaju promijeniti. Ovaj pristup, slično kao što kontrolni centar prebacuje između različitih prikaza dok održava stalnu komunikaciju, stvara fluidno iskustvo na koje smo navikli.

Evo što čini razliku tako dramatičnom:

Tradicionalne višestranične aplikacije	Moderne jednostranične aplikacije
Navigacija	Ponovno učitavanje cijele stranice za svaki ekran
Performanse	Sporije zbog preuzimanja cijelog HTML-a
Korisničko iskustvo	Nagli prijelazi stranica
Dijeljenje podataka	Teško između stranica
Razvoj	Održavanje više HTML datoteka

Razumijevanje evolucije:

Tradicionalne aplikacije zahtijevaju zahtjeve prema serveru za svaku navigacijsku akciju
Moderne SPA aplikacije učitavaju se jednom i dinamički ažuriraju sadržaj koristeći JavaScript
Očekivanja korisnika sada favoriziraju trenutne, besprijekorne interakcije
Prednosti performansi uključuju smanjenu potrošnju bandwidtha i brže odgovore

U ovoj lekciji izgradit ćemo aplikaciju za bankarstvo s više ekrana koji se međusobno glatko povezuju. Kao što znanstvenici koriste modularne instrumente koji se mogu rekonfigurirati za različite eksperimente, mi ćemo koristiti HTML predloške kao višekratne komponente koje se mogu prikazati po potrebi.

Radit ćete s HTML predlošcima (višekratni nacrti za različite ekrane), JavaScript rutiranjem (sustav koji prebacuje između ekrana) i povijesnim API-jem preglednika (koji omogućuje da gumb za povratak radi kako treba). Ovo su iste osnovne tehnike koje koriste okviri poput Reacta, Vuea i Angulara.

Na kraju, imat ćete funkcionalnu aplikaciju za bankarstvo koja demonstrira profesionalne principe jednostraničnih aplikacija.

Kviz prije predavanja

Pre-lecture quiz

Što će vam trebati

Trebat će nam lokalni web poslužitelj za testiranje naše aplikacije za bankarstvo – ne brinite, to je lakše nego što zvuči! Ako ga već nemate postavljenog, samo instalirajte Node.js i pokrenite npx lite-server iz mape vašeg projekta. Ova praktična naredba pokreće lokalni poslužitelj i automatski otvara vašu aplikaciju u pregledniku.

Priprema

Na svom računalu stvorite mapu pod nazivom bank s datotekom pod nazivom index.html unutar nje. Počet ćemo s ovim HTML boilerplateom:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

Što ovaj boilerplate pruža:

Postavlja HTML5 strukturu dokumenta s pravilnom DOCTYPE deklaracijom
Konfigurira kodiranje znakova kao UTF-8 za podršku međunarodnom tekstu
Omogućuje responzivni dizajn s meta oznakom za kompatibilnost s mobilnim uređajima
Postavlja opisni naslov koji se pojavljuje na kartici preglednika
Stvara čistu sekciju tijela gdje ćemo izgraditi našu aplikaciju

📁 Pregled strukture projekta

Na kraju ove lekcije, vaš projekt će sadržavati:
bank/
├── index.html      
├── app.js          
└── style.css       
Odgovornosti datoteka:

index.html: Sadrži sve predloške i pruža strukturu aplikacije

app.js: Upravljanje rutiranjem, navigacijom i predlošcima

Predlošci: Definiraju korisničko sučelje za prijavu, nadzornu ploču i druge ekrane

HTML predlošci

Predlošci rješavaju temeljni problem u web razvoju. Kada je Gutenberg izumio pokretni tisak u 1440-ima, shvatio je da umjesto rezbarenja cijelih stranica može stvoriti višekratne blokove slova i rasporediti ih po potrebi. HTML predlošci funkcioniraju na istom principu – umjesto stvaranja zasebnih HTML datoteka za svaki ekran, definirate višekratne strukture koje se mogu prikazati po potrebi.

Razmislite o predlošcima kao nacrtima za različite dijelove vaše aplikacije. Kao što arhitekt stvara jedan nacrt i koristi ga više puta umjesto da ponovno crta identične prostorije, mi stvaramo predloške jednom i koristimo ih po potrebi. Preglednik drži te predloške skrivenima dok ih JavaScript ne aktivira.

Ako želite stvoriti više ekrana za web stranicu, jedno rješenje bilo bi stvoriti jednu HTML datoteku za svaki ekran koji želite prikazati. Međutim, ovo rješenje dolazi s nekim neugodnostima:

Morate ponovno učitati cijeli HTML prilikom prebacivanja ekrana, što može biti sporo.
Teško je dijeliti podatke između različitih ekrana.

Drugi pristup je imati samo jednu HTML datoteku i definirati više HTML predložaka koristeći element <template>. Predložak je višekratni HTML blok koji preglednik ne prikazuje, a treba ga instancirati u vrijeme izvođenja pomoću JavaScripta.

Izgradimo aplikaciju

Stvorit ćemo aplikaciju za bankarstvo s dva glavna ekrana: stranicom za prijavu i nadzornom pločom. Prvo, dodajmo element rezerviranog mjesta u tijelo našeg HTML-a – ovdje će se pojaviti svi naši različiti ekrani:

<div id="app">Loading...</div>

Razumijevanje ovog rezerviranog mjesta:

Stvara spremnik s ID-om "app" gdje će se prikazivati svi ekrani
Prikazuje poruku učitavanja dok JavaScript ne inicijalizira prvi ekran
Pruža jedinstvenu točku za montiranje našeg dinamičkog sadržaja
Omogućuje jednostavno ciljanje iz JavaScripta pomoću document.getElementById()

💡 Savjet: Budući da će sadržaj ovog elementa biti zamijenjen, možemo staviti poruku ili indikator učitavanja koji će se prikazivati dok se aplikacija učitava.

Zatim dodajmo ispod HTML predložak za stranicu za prijavu. Za sada ćemo samo dodati naslov i sekciju koja sadrži poveznicu koju ćemo koristiti za navigaciju.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

Razrada ovog predloška za prijavu:

Definira predložak s jedinstvenim identifikatorom "login" za ciljanje putem JavaScripta
Uključuje glavni naslov koji uspostavlja brendiranje aplikacije
Sadrži semantički element <section> za grupiranje povezanog sadržaja
Pruža navigacijsku poveznicu koja će usmjeriti korisnike na nadzornu ploču

Zatim ćemo dodati još jedan HTML predložak za stranicu nadzorne ploče. Ova stranica će sadržavati različite sekcije:

Zaglavlje s naslovom i poveznicom za odjavu
Trenutni saldo bankovnog računa
Popis transakcija, prikazan u tablici

<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

Razumijevanje svakog dijela ove nadzorne ploče:

Strukturira stranicu sa semantičkim elementom <header> koji sadrži navigaciju
Prikazuje naslov aplikacije dosljedno na svim ekranima radi brendiranja
Pruža poveznicu za odjavu koja vodi natrag na ekran za prijavu
Prikazuje trenutni saldo računa u namjenskoj sekciji
Organizira podatke o transakcijama koristeći pravilno strukturiranu HTML tablicu
Definira zaglavlja tablice za stupce Datum, Objekt i Iznos
Ostavlja tijelo tablice prazno za kasnije dinamičko umetanje sadržaja

💡 Savjet: Kada stvarate HTML predloške, ako želite vidjeti kako će izgledati, možete komentirati linije <template> i </template> koristeći .

✅ Zašto mislite da koristimo id atribute na predlošcima? Možemo li koristiti nešto drugo, poput klasa?

Oživljavanje predložaka pomoću JavaScripta

Sada moramo učiniti naše predloške funkcionalnima. Kao što 3D printer uzima digitalni nacrt i stvara fizički objekt, JavaScript uzima naše skrivene predloške i stvara vidljive, interaktivne elemente koje korisnici mogu vidjeti i koristiti.

Proces slijedi tri dosljedna koraka koji čine temelj modernog web razvoja. Kada shvatite ovaj obrazac, prepoznat ćete ga u mnogim okvirima i bibliotekama.

Ako pokušate svoju trenutnu HTML datoteku u pregledniku, vidjet ćete da ostaje prikazana poruka Loading.... To je zato što moramo dodati neki JavaScript kod kako bismo instancirali i prikazali HTML predloške.

Instanciranje predloška obično se obavlja u 3 koraka:

Dohvatite element predloška u DOM-u, na primjer koristeći document.getElementById.
Klonirajte element predloška, koristeći cloneNode.
Priključite ga na DOM ispod vidljivog elementa, na primjer koristeći appendChild.

flowchart TD
    A[🔍 Step 1: Find Template] --> B[📋 Step 2: Clone Template]
    B --> C[🔗 Step 3: Attach to DOM]
    
    A1["document.getElementById('login')"] --> A
    B1["template.content.cloneNode(true)"] --> B  
    C1["app.appendChild(view)"] --> C
    
    C --> D[👁️ Template Visible to User]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0

Vizualni prikaz procesa:

Korak 1 pronalazi skriveni predložak u strukturi DOM-a
Korak 2 stvara radnu kopiju koja se može sigurno mijenjati
Korak 3 umeće kopiju u vidljivo područje stranice
Rezultat je funkcionalni ekran s kojim korisnici mogu interagirati

✅ Zašto trebamo klonirati predložak prije nego ga priključimo na DOM? Što mislite da bi se dogodilo da preskočimo ovaj korak?

Zadatak

Stvorite novu datoteku pod nazivom app.js u svojoj projektnoj mapi i uvezite tu datoteku u <head> sekciju vašeg HTML-a:

<script src="app.js" defer></script>

Razumijevanje ovog uvoza skripte:

Povezuje JavaScript datoteku s našim HTML dokumentom
Koristi atribut defer kako bi osigurao da se skripta pokrene nakon što se HTML parsira
Omogućuje pristup svim DOM elementima jer su potpuno učitani prije izvođenja skripte
Slijedi moderne najbolje prakse za učitavanje skripti i performanse

Sada u app.js stvorit ćemo novu funkciju updateRoute:

function updateRoute(templateId) {
  const template = document.getElementById(templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Korak po korak, evo što se događa:

Pronalaženje elementa predloška pomoću njegovog jedinstvenog ID-a
Stvaranje duboke kopije sadržaja predloška koristeći cloneNode(true)
Pronalaženje spremnika aplikacije gdje će se sadržaj prikazati
Čišćenje postojećeg sadržaja iz spremnika aplikacije
Umetanje kloniranog sadržaja predloška u vidljivi DOM

Sada pozovite ovu funkciju s jednim od predložaka i pogledajte rezultat.

updateRoute('login');

Što ova funkcija postiže:

Aktivira predložak za prijavu prosljeđivanjem njegovog ID-a kao parametra
Pokazuje kako programatski prebacivati između različitih ekrana aplikacije
Prikazuje ekran za prijavu umjesto poruke "Loading..."

✅ Koja je svrha ovog koda app.innerHTML = '';? Što se događa bez njega?

Stvaranje ruta

Rutiranje se u osnovi odnosi na povezivanje URL-ova s odgovarajućim sadržajem. Zamislite kako su rani telefonski operateri koristili razvodne ploče za povezivanje poziva – primili bi dolazni zahtjev i usmjerili ga na ispravnu destinaciju. Web rutiranje funkcionira na sličan način, uzimajući zahtjev za URL i određujući koji sadržaj prikazati.

Tradicionalno, web poslužitelji su to radili posluživanjem različitih HTML datoteka za različite URL-ove. Budući da gradimo jednostraničnu aplikaciju, moramo sami upravljati ovim rutiranjem pomoću JavaScripta. Ovaj pristup nam daje veću kontrolu nad korisničkim iskustvom i performansama.

flowchart LR
    A["🌐 URL Path<br/>/dashboard"] --> B["🗺️ Routes Object<br/>Lookup"]
    B --> C["🎯 Template ID<br/>'dashboard'"]
    C --> D["📄 Find Template<br/>getElementById"]
    D --> E["👁️ Display Screen<br/>Clone & Append"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Not Found"]
    I --> J["🔄 Redirect to /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Razumijevanje toka rutiranja:

Promjene URL-a pokreću pretraživanje u našoj konfiguraciji ruta
Valjane rute mapiraju se na specifične ID-ove predložaka za prikaz
Nevaljane rute pokreću rezervno ponašanje kako bi se spriječila neispravna stanja
Prikaz predloška slijedi trostupanjski proces koji smo naučili ranije

Kada govorimo o web aplikaciji, nazivamo Rutiranje namjerom mapiranja URL-ova na specifične ekrane koji bi trebali biti prikazani. Na web stranici s više HTML datoteka, to se automatski obavlja jer se putanje datoteka odražavaju na URL-u. Na primjer, s ovim datotekama u vašoj projektnoj mapi:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

Ako stvorite web poslužitelj s mywebsite kao korijenom, mapiranje URL-a bit će:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

Međutim, za našu web aplikaciju koristimo jednu HTML datoteku koja sadrži sve ekrane pa nam ovo zadano ponašanje neće pomoći. Moramo ručno stvoriti ovu mapu i ažurirati prikazani predložak pomoću JavaScripta.

Zadatak

Koristit ćemo jednostavan objekt za implementaciju mape između URL putanja i naših predložaka. Dodajte ovaj objekt na vrh svoje app.js datoteke.

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

Razumijevanje ove konfiguracije ruta:

Definira mapiranje između URL putanja i identifikatora predložaka
Koristi sintaksu objekta gdje su ključevi URL putanje, a vrijednosti sadrže informacije o predlošku
Omogućuje jednostavno pretraživanje koji predložak prikazati za bilo koji dani URL
Pruža skalabilnu strukturu za dodavanje novih ruta u budućnosti

Sada malo izmijenimo funkciju updateRoute. Umjesto da izravno prosljeđujemo templateId kao argument, želimo ga dohvatiti prvo gledajući trenutni URL, a zatim koristiti našu mapu za dobivanje odgovarajuće vrijednosti identifikatora predloška. Možemo koristiti window.location.pathname za dobivanje samo dijela putanje iz URL-a.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Razrada onoga što se ovdje događa:

Ekstrahira trenutnu putanju iz URL-a preglednika koristeći window.location.pathname
Pretražuje odgovarajuću konfiguraciju ruta u našem objektu ruta
Dohvaća identifikator predloška iz konfiguracije ruta
Slijedi isti proces prikaza predloška kao i prije
Stvara dinamički sustav koji reagira na promjene URL-a

Ovdje smo mapirali rute koje smo deklarirali na odgovarajući predložak. Možete provjeriti radi li ispravno tako da ručno promijenite URL u svom pregledniku. ✅ Što se događa ako unesete nepoznatu putanju u URL? Kako bismo to mogli riješiti?

Dodavanje navigacije

S uspostavljenim rutiranjem, korisnici trebaju način za navigaciju kroz aplikaciju. Tradicionalne web stranice ponovno učitavaju cijele stranice prilikom klikanja na poveznice, ali mi želimo ažurirati i URL i sadržaj bez osvježavanja stranice. To stvara ugodnije iskustvo slično načinu na koji desktop aplikacije prelaze između različitih prikaza.

Moramo koordinirati dvije stvari: ažuriranje URL-a preglednika kako bi korisnici mogli spremiti stranice u oznake i dijeliti poveznice te prikazivanje odgovarajućeg sadržaja. Kada se to pravilno implementira, stvara se besprijekorna navigacija koju korisnici očekuju od modernih aplikacija.

🏗️ Uvid u arhitekturu: Komponente navigacijskog sustava

Što gradite:

🔄 Upravljanje URL-om: Ažurira adresnu traku preglednika bez ponovnog učitavanja stranice

📋 Sustav predložaka: Dinamički mijenja sadržaj na temelju trenutne rute

📚 Integracija povijesti: Održava funkcionalnost gumba za povratak/naprijed u pregledniku

🛡️ Rukovanje greškama: Elegantni načini za nevažeće ili nedostajuće rute

Kako komponente rade zajedno:

Prati događaje navigacije (klikovi, promjene povijesti)

Ažurira URL koristeći History API

Prikazuje odgovarajući predložak za novu rutu

Održava besprijekorno korisničko iskustvo tijekom navigacije

Sljedeći korak za našu aplikaciju je dodavanje mogućnosti navigacije između stranica bez ručnog mijenjanja URL-a. To podrazumijeva dvije stvari:

Ažuriranje trenutnog URL-a
Ažuriranje prikazanog predloška na temelju novog URL-a

Već smo se pobrinuli za drugi dio s funkcijom updateRoute, pa moramo smisliti kako ažurirati trenutni URL.

Morat ćemo koristiti JavaScript, a posebno history.pushState koji omogućuje ažuriranje URL-a i stvaranje novog unosa u povijesti pregledavanja, bez ponovnog učitavanja HTML-a.

⚠️ Važna napomena: Iako se HTML element sidra <a href> može koristiti samostalno za stvaranje hiperveza na različite URL-ove, on će po zadanom uzrokovati ponovno učitavanje HTML-a. Potrebno je spriječiti ovo ponašanje prilikom rukovanja rutiranjem pomoću prilagođenog JavaScripta, koristeći funkciju preventDefault() na događaju klika.

Zadatak

Napravimo novu funkciju koju možemo koristiti za navigaciju u našoj aplikaciji:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

Razumijevanje ove navigacijske funkcije:

Ažurira URL preglednika na novu putanju koristeći history.pushState
Dodaje novi unos u povijest preglednika za pravilnu podršku gumba za povratak/naprijed
Pokreće funkciju updateRoute() za prikaz odgovarajućeg predloška
Održava iskustvo aplikacije s jednom stranicom bez ponovnog učitavanja stranice

Ova metoda prvo ažurira trenutni URL na temelju zadane putanje, a zatim ažurira predložak. Svojstvo window.location.origin vraća korijen URL-a, omogućujući nam da rekonstruiramo potpuni URL iz zadane putanje.

Sada kada imamo ovu funkciju, možemo se pobrinuti za problem koji imamo ako putanja ne odgovara nijednoj definiranoj ruti. Modificirat ćemo funkciju updateRoute dodavanjem rezervne opcije za jednu od postojećih ruta ako ne možemo pronaći podudaranje.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Ključne točke za zapamtiti:

Provjerava postoji li ruta za trenutnu putanju
Preusmjerava na stranicu za prijavu kada se pristupi nevažećoj ruti
Pruža rezervni mehanizam koji sprječava neispravnu navigaciju
Osigurava da korisnici uvijek vide valjanu stranicu, čak i s netočnim URL-ovima

Ako se ruta ne može pronaći, sada ćemo preusmjeriti na stranicu login.

Sada kreirajmo funkciju za dobivanje URL-a kada se klikne na poveznicu i za sprječavanje zadane funkcije preglednika za ponašanje poveznica:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

Razrada ovog rukovatelja klikova:

Sprječava zadano ponašanje poveznica preglednika koristeći preventDefault()
Izvlači odredišni URL iz elementa poveznice na koji se kliknulo
Poziva našu prilagođenu funkciju navigate umjesto ponovnog učitavanja stranice
Održava glatko iskustvo aplikacije s jednom stranicom

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

Što postiže ovo povezivanje onclick događaja:

Povezuje svaku poveznicu s našim prilagođenim navigacijskim sustavom
Prosljeđuje događaj klika našoj funkciji onLinkClick za obradu
Omogućuje glatku navigaciju bez ponovnog učitavanja stranice
Održava pravilnu strukturu URL-a koju korisnici mogu spremiti u oznake ili dijeliti

Atribut onclick povezuje događaj click s JavaScript kodom, ovdje pozivom funkcije navigate().

Pokušajte kliknuti na ove poveznice, sada biste trebali moći navigirati između različitih ekrana vaše aplikacije.

✅ Metoda history.pushState dio je HTML5 standarda i implementirana je u svim modernim preglednicima. Ako gradite web aplikaciju za starije preglednike, postoji trik koji možete koristiti umjesto ovog API-ja: korištenjem hasha (#) prije putanje možete implementirati rutiranje koje funkcionira s redovnom navigacijom sidra i ne ponovno učitava stranicu, jer je njegova svrha bila stvaranje unutarnjih poveznica unutar stranice.

Omogućavanje rada gumba za povratak i naprijed

Gumbi za povratak i naprijed temeljni su za web pregledavanje, slično kao što kontrolori misija NASA-e mogu pregledavati prethodna stanja sustava tijekom svemirskih misija. Korisnici očekuju da ti gumbi rade, a kada ne rade, to narušava očekivano iskustvo pregledavanja.

Naša aplikacija s jednom stranicom treba dodatnu konfiguraciju za podršku ovih gumba. Preglednik održava povijesni stog (koji smo dodavali s history.pushState), ali kada korisnici navigiraju kroz ovu povijest, naša aplikacija mora reagirati ažuriranjem prikazanog sadržaja.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Clicks "Login" link
    Browser->>App: onclick event triggered
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL updates to /dashboard
    App->>App: updateRoute() called
    App->>Template: Find & clone dashboard template
    Template->>App: Return cloned content
    App->>Browser: Replace app content with template
    Browser->>User: Display dashboard screen
    
    Note over User,Template: User clicks browser back button
    
    User->>Browser: Clicks back button
    Browser->>Browser: History moves back to /login
    Browser->>App: popstate event fired
    App->>App: updateRoute() called automatically
    App->>Template: Find & clone login template
    Template->>App: Return cloned content
    App->>Browser: Replace app content with template
    Browser->>User: Display login screen

Ključne točke interakcije:

Korisničke akcije pokreću navigaciju putem klikova ili gumba preglednika
Aplikacija presreće klikove na poveznice kako bi spriječila ponovno učitavanje stranice
History API upravlja promjenama URL-a i stogom povijesti preglednika
Predlošci pružaju strukturu sadržaja za svaki ekran
Slušatelji događaja osiguravaju da aplikacija reagira na sve vrste navigacije

Korištenje history.pushState stvara nove unose u povijesti navigacije preglednika. To možete provjeriti držeći gumb za povratak vašeg preglednika, trebao bi prikazati nešto poput ovoga:

Ako pokušate kliknuti na gumb za povratak nekoliko puta, vidjet ćete da se trenutni URL mijenja i povijest se ažurira, ali isti predložak ostaje prikazan.

To je zato što aplikacija ne zna da trebamo pozvati updateRoute() svaki put kada se povijest promijeni. Ako pogledate dokumentaciju za history.pushState, možete vidjeti da ako se stanje promijeni - što znači da smo se pomaknuli na drugi URL - događaj popstate se pokreće. Iskoristit ćemo to za rješavanje ovog problema.

Zadatak

Kako bismo osigurali da se prikazani predložak ažurira kada se povijest preglednika promijeni, povezat ćemo novu funkciju koja poziva updateRoute(). To ćemo učiniti na dnu našeg app.js datoteke:

window.onpopstate = () => updateRoute();
updateRoute();

Razumijevanje ove integracije povijesti:

Prati događaje popstate koji se događaju kada korisnici navigiraju pomoću gumba preglednika
Koristi streličnu funkciju za sažet sintaksu rukovatelja događaja
Automatski poziva updateRoute() svaki put kada se stanje povijesti promijeni
Inicijalizira aplikaciju pozivanjem updateRoute() kada se stranica prvi put učita
Osigurava da se ispravan predložak prikazuje bez obzira na način navigacije korisnika

💡 Savjet: Koristili smo streličnu funkciju za deklariranje našeg rukovatelja događaja popstate radi sažetosti, ali obična funkcija bi također radila.

Evo video vodiča o streličnim funkcijama:

🎥 Kliknite na sliku iznad za video o streličnim funkcijama.

Sada pokušajte koristiti gumbe za povratak i naprijed u vašem pregledniku i provjerite je li prikazana ruta ispravno ažurirana ovaj put.

Izazov GitHub Copilot Agent 🚀

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

Opis: Poboljšajte aplikaciju za bankarstvo implementacijom rukovanja greškama i predloška za 404 stranicu za nevažeće rute, poboljšavajući korisničko iskustvo prilikom navigacije na nepostojeće stranice.

Zadatak: Kreirajte novi HTML predložak s ID-om "not-found" koji prikazuje korisnički prilagođenu 404 stranicu s dizajnom. Zatim modificirajte logiku rutiranja u JavaScriptu kako biste prikazali ovaj predložak kada korisnici navigiraju na nevažeće URL-ove i dodajte gumb "Idi na početnu stranicu" koji vodi natrag na stranicu za prijavu.

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

🚀 Izazov

Dodajte novi predložak i rutu za treću stranicu koja prikazuje zasluge za ovu aplikaciju.

Ciljevi izazova:

Kreirajte novi HTML predložak s odgovarajućom strukturom sadržaja
Dodajte novu rutu u vaš objekt konfiguracije ruta
Uključite navigacijske poveznice prema i od stranice sa zaslugama
Testirajte da sva navigacija ispravno funkcionira s poviješću preglednika

Kviz nakon predavanja

Pregled i samostalno učenje

Rutiranje je jedan od iznenađujuće složenih dijelova web razvoja, posebno kako se web kreće od ponašanja osvježavanja stranica prema aplikacijama s jednom stranicom. Pročitajte malo o načinu na koji Azure Static Web App usluga rukuje rutiranjem. Možete li objasniti zašto su neke od odluka opisanih u tom dokumentu nužne?

Dodatni resursi za učenje:

Istražite kako popularni okviri poput React Routera i Vue Routera implementiraju rutiranje na strani klijenta
Istražite razlike između rutiranja temeljenog na hashu i rutiranja putem History API-ja
Naučite o renderiranju na strani poslužitelja (SSR) i kako ono utječe na strategije rutiranja
Istražite kako progresivne web aplikacije (PWAs) rukovode rutiranjem i navigacijom

Zadatak

Poboljšajte rutiranje

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 čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.

README.md Unescape Escape

Izrada aplikacije za bankarstvo, dio 1: HTML predlošci i rute u web aplikaciji

Kviz prije predavanja

Što će vam trebati

Priprema

HTML predlošci

Izgradimo aplikaciju

Oživljavanje predložaka pomoću JavaScripta

Zadatak

Stvaranje ruta

Zadatak

Dodavanje navigacije

Zadatak

Omogućavanje rada gumba za povratak i naprijed

Zadatak

Izazov GitHub Copilot Agent 🚀

🚀 Izazov

Kviz nakon predavanja

Pregled i samostalno učenje

Zadatak

README.md

Unescape Escape