History

localizeflow[bot] ace08026dd chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago

README.md

Unescape Escape

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

journey
    title Vaše Putovanje Razvoja Bankarske Aplikacije
    section Osnove SPA
      Razumjeti jedinstvene aplikacije: 3: Student
      Naučiti koncepte predložaka: 4: Student
      Savladati manipulaciju DOM-om: 4: Student
    section Sustavi Ruteranja
      Implementirati klijentsko ruteranje: 4: Student
      Upravljati poviješću preglednika: 5: Student
      Kreirati navigacijske sustave: 5: Student
    section Profesionalni Obrasci
      Izgraditi modularnu arhitekturu: 5: Student
      Primijeniti najbolje prakse: 5: Student
      Kreirati korisnička iskustva: 5: Student

Kada je Apollo 11-ov sustav za upravljanje navigacijom 1969. godine usmjeravao prema Mjesecu, morao je prelaziti između različitih programa bez ponovnog pokretanja cijelog sustava. Moderna web aplikacija radi slično – mijenja ono što vidite bez ponovnog učitavanja svega iz 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 trebaju promjenu. Ovaj pristup, slično kao što kontrola misije mijenja prikaze dok održava stalnu komunikaciju, stvara to fluidno iskustvo na koje smo navikli.

Evo što čini razliku tako dramatičnom:

Tradicionalne višestranične aplikacije	Moderne jednostranične aplikacije
Navigacija	Potpuno ponovno učitavanje stranice za svaki zaslon
Performanse	Sporije zbog potpunog preuzimanja HTML-a
Korisničko iskustvo	Iznenadni treptaji stranica
Dijeljenje podataka	Teško između stranica
Razvoj	Više HTML datoteka za održavanje

Razumijevanje evolucije:

Tradicionalne aplikacije zahtijevaju zahtjeve serveru za svaku navigacijsku akciju
Moderne jednostranične aplikacije (SPA) se učitavaju jednom i dinamički ažuriraju sadržaj korištenjem JavaScripta
Očekivanja korisnika sada preferiraju trenutne i besprijekorne interakcije
Prednosti performansi uključuju smanjenje propusnosti i brže odzive

U ovoj lekciji ćemo izraditi bankarsku aplikaciju s više zaslona koja teče besprijekorno. 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 prikazivati prema potrebi.

Radit ćete s HTML predlošcima (višekratnim nacrtima za različite zaslone), JavaScript rutiranjem (sustav koji prebacuje zaslone) i povijesnim API-jem preglednika (koji omogućuje da gumb za povratak radi kako se očekuje). To su iste temeljne tehnike koje koriste okviri poput Reacta, Vuea i Angulara.

Na kraju ćete imati funkcionalnu bankarsku aplikaciju koja demonstrira profesionalne principe jednostraničnih aplikacija.

mindmap
  root((Single-Page Aplikacije))
    Architecture
      Template System
      Client-side Routing
      State Management
      Event Handling
    Templates
      Ponovno iskoristivi Komponenti
      Dinamički Sadržaj
      Manipulacija DOM-om
      Prebacivanje Sadržaja
    Routing
      Upravljanje URL-om
      Povijest API-ja
      Navigacijska Logika
      Integracija s Preglednikom
    User Experience
      Brza Navigacija
      Glatke Prijelaze
      Konzistentno Stanje
      Moderni Interakcije
    Performance
      Smanjeni Zahtjevi Serveru
      Brže Prijelaze Stranica
      Učinkovita Upotreba Resursa
      Bolja Odzivnost

Pred-predavanja kviz

Što će vam trebati

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

Priprema

Na vašem računalu kreirajte mapu nazvanu bank s datotekom pod nazivom index.html unutar nje. Počet ćemo od ovog HTML boilerplatea:

<!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>

Evo što ovaj boilerplate pruža:

Uspostavlja strukturu HTML5 dokumenta s ispravnom deklaracijom DOCTYPE-a
Konfigurira kodiranje znakova na UTF-8 za međunarodnu podršku teksta
Omogućava responzivni dizajn s meta oznakom za viewport za kompatibilnost s mobilnim uređajima
Postavlja opisni naslov koji se prikazuje na kartici preglednika
Kreira čisti body odjeljak gdje ćemo graditi 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 upravljanjem predlošcima

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

HTML predlošci

Predlošci rješavaju temeljni problem u web razvoju. Kad je Gutenberg izumio pomični tip tiskanja 1440-ih, shvatio je da umjesto izrezivanja cijelih stranica, može stvoriti višekratne blokove slova i slagati ih po potrebi. HTML predlošci funkcioniraju po istom principu – umjesto stvaranja zasebnih HTML datoteka za svaki zaslon, definirate višekratne strukture koje se prikazuju prema potrebi.

flowchart TD
    A["📋 Definicija Predloška"] --> B["💬 Skriven u DOM-u"]
    B --> C["🔍 JavaScript Pronalazi Predložak"]
    C --> D["📋 Kloniraj Sadržaj Predloška"]
    D --> E["🔗 Priključi na Vidljivi DOM"]
    E --> F["👁️ Korisnik Vidi Sadržaj"]
    
    G["Predložak za Prijavu"] --> A
    H["Predložak Nadzorne Ploče"] --> A
    I["Budući Predlošci"] --> A
    
    style A fill:#e3f2fd
    style D fill:#e8f5e8
    style F fill:#fff3e0
    style B fill:#f3e5f5

Zamislite predloške kao nacrte za različite dijelove vaše aplikacije. Baš kao što arhitekt stvara jedan nacrt i koristi ga više puta umjesto da ponovno crta identične sobe, mi stvaramo predloške jednom i instanciramo ih kad zatrebaju. Preglednik drži te predloške skrivene dok ih JavaScript ne aktivira.

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

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

Drugi pristup je imati samo jednu HTML datoteku i definirati više HTML predložaka korištenjem elementa <template>. Predložak je višekratni HTML blok koji preglednik ne prikazuje i koji treba biti instanciran u runtime-u putem JavaScripta.

Izgradimo to

Izradit ćemo bankarsku aplikaciju s dva glavna zaslona: stranicu za prijavu i nadzornu ploču. Prvo dodajmo element rezerviranog mjesta u body našeg HTML-a – ovdje će se pojavljivati svi naši različiti zasloni:

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

Razumijevanje ovog rezerviranog mjesta:

Kreira spremnik s ID-em "app" u kojem će se prikazivati svi zasloni
Prikazuje poruku učitavanja dok JavaScript ne inicijalizira prvi zaslon
Pruža jednu točku montiranja za naš dinamični sadržaj
Omogućava jednostavno ciljanje iz JavaScripta korištenjem document.getElementById()

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

Sljedeće, dodajmo ispod HTML predložak za stranicu prijave. Za sada ćemo tamo staviti samo 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>

Razlaganje ovog predloška za prijavu:

Definira predložak s jedinstvenim identifikatorom "login" za ciljanje JavaScriptom
Uključuje glavni naslov koji uspostavlja brendiranje aplikacije
Sadrži semantički <section> element za grupiranje povezanog sadržaja
Pruža navigacijsku poveznicu koja će preusmjeravati 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>

Razumimo svaki dio ove nadzorne ploče:

Strukturira stranicu korištenjem semantičkog elementa <header> koji sadrži navigaciju
Prikazuje naslov aplikacije dosljedno na svim zaslonima radi brendiranja
Pruža poveznicu za odjavu koja vodi natrag na zaslon prijave
Prikazuje trenutni saldo računa u namjenskoj sekciji
Organizira podatke o transakcijama koristeći ispravno strukturiranu HTML tablicu
Definira zaglavlja tablice za stupce Datum, Opis i Iznos
Ostavlja tijelo tablice prazno za dinamičko umetanje sadržaja kasnije

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

🔄 Pedagoška provjera

Razumijevanje sustava predložaka: Prije implementacije JavaScripta, osigurajte da razumijete:

✅ Kako se predlošci razlikuju od običnih HTML elemenata
✅ Zašto predlošci ostaju skriveni dok ih JavaScript ne aktivira
✅ Važnost semantičke HTML strukture u predlošcima
✅ Kako predlošci omogućuju višekratne UI komponente

Brzi samoprovjerni test: Što se događa ako uklonite <template> oznake oko vašeg HTML-a? Odgovor: Sadržaj odmah postaje vidljiv i gubi funkcionalnost predloška

Prednosti arhitekture: Predlošci pružaju:

Višekratnost: Jedna definicija, više instanci
Performanse: Bez suvišnog parsiranja HTML-a
Održavanje: Centralizirana UI struktura
Fleksibilnost: Dinamično mijenjanje sadržaja

✅ Zašto mislite da koristimo id atribute na predlošcima? Mogu li se umjesto njih koristiti klase?

Oživljavanje predložaka uz JavaScript

Sada trebamo 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. Kad jednom shvatite ovaj uzorak, prepoznat ćete ga u mnogim framework-ovima i bibliotekama.

Ako pokušate otvoriti vaš trenutni HTML u pregledniku, vidjet ćete da ostaje zaglavljen na prikazu Loading.... To je zato što trebamo dodati dio JavaScripta koji instancira i prikazuje HTML predloške.

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

Dohvatite element predloška u DOM-u, na primjer pomoću document.getElementById.
Klonirajte element predloška pomoću cloneNode.
Pridružite ga DOM-u ispod vidljivog elementa, na primjer pomoću appendChild.

flowchart TD
    A[🔍 Korak 1: Pronađi Predložak] --> B[📋 Korak 2: Kloniraj Predložak]
    B --> C[🔗 Korak 3: Priloži DOM-u]
    
    A1["document.getElementById('login')"] --> A
    B1["template.content.cloneNode(true)"] --> B  
    C1["app.appendChild(view)"] --> C
    
    C --> D[👁️ Predložak Vidljiv Korisniku]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0

Vizualno razlaganje procesa:

Korak 1 pronalazi skriveni predložak u DOM strukturi
Korak 2 stvara radnu kopiju koju je sigurno modificirati
Korak 3 umeće kopiju u vidljivo područje stranice
Rezultat je funkcionalan zaslon s kojim korisnici mogu komunicirati

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

Zadatak

Kreirajte novu datoteku nazvanu app.js u vašem projekt folderu i uvezite tu datoteku u <head> odjeljku vašeg HTML-a:

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

Razumijevanje ove skripte:

Povezuje JavaScript datoteku s našim HTML dokumentom
Koristi atribut defer kako bi osigurao da se skripta izvršava nakon završetka parsiranja HTML-a
Omogućava pristup svim DOM elementima budući da su u potpunosti učitani prije pokretanja skripte
Slede modernu praksu učitavanja skripti za bolje performanse

Sada u app.js kreirat ć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 korištenjem njegovog jedinstvenog ID-a
Stvaranje duboke kopije sadržaja predloška korištenjem cloneNode(true)
Pronalaženje glavnog spremnika aplikacije u kojem će se sadržaj prikazati
Brisanje postojećeg sadržaja iz spremnika
Umetanje kloniranog sadržaja predloška u vidljivi DOM

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

updateRoute('login');

Što ovaj poziv funkcije postiže:

Aktivira predložak prijave prosljeđivanjem njegovog ID-a kao parametra
Prikazuje kako programatski prebacivati između različitih zaslona aplikacije
Prikazuje zaslon prijave umjesto poruke "Loading..."

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

Izrada ruta

Rutiranje je u biti povezivanje URL-ova s odgovarajućim sadržajem. Razmislite kako su rani telefonski operateri koristili kontrolne ploče za povezivanje poziva – primali su ulazni zahtjev i povezivali ga s ispravnim odredištem. Web rutiranje radi slično, uzima URL zahtjev i određuje koji sadržaj prikazati.

flowchart LR
    A["🌐 URL Putanja<br/>/dashboard"] --> B["🗺️ Objekt Ruta<br/>Pretraga"]
    B --> C["🎯 ID Predloška<br/>'dashboard'"]
    C --> D["📌 Pronađi Predložak<br/>getElementById"]
    D --> E["👁️ Prikaži Ekran<br/>Kloniraj & Dodaj"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nije Pronađeno"]
    I --> J["🔄 Preusmjeri na /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

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

flowchart LR
    A["🌐 URL Putanja<br/>/dashboard"] --> B["🗺️ Objekt Rute<br/>Pretraživanje"]
    B --> C["🎯 ID Predloška<br/>'dashboard'"]
    C --> D["📄 Pronađi Predložak<br/>getElementById"]
    D --> E["👁️ Prikaži Ekran<br/>Kloniraj i Dodaj"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nije Pronađeno"]
    I --> J["🔄 Preusmjeri na /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Razumijevanje tijeka rutiranja:

Promjene URL-a pokreću pretraživanje u našoj konfiguraciji ruta
Ispravne rute mapiraju na određene predloške za prikaz
Neispravne rute pokreću rezervno ponašanje kako bi spriječile neispravna stanja
Prikaz predloška slijedi postupak u tri koraka koji smo ranije naučili

Kada govorimo o web aplikaciji, rutiranjem nazivamo namjeru mapiranja URL-ova na određene zaslone koji se trebaju prikazati. Na web stranici s više HTML datoteka to se radi automatski jer se putanje datoteka odražavaju u URL-u. Na primjer, s ovim datotekama u vašem projektnom folderu:

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

Ako kreirate web server 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 zaslone, pa nam ovo zadano ponašanje neće pomoći. Moramo ručno izraditi ovu mapu i pomoću JavaScripta ažurirati prikazani predložak.

Zadatak

Koristit ćemo jednostavan objekt za implementaciju karte između URL putanja i naših predložaka. Dodajte ovaj objekt na vrh vaše 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ćava jednostavno pretraživanje koji se predložak prikazuje za određeni URL
Pruža skalabilnu strukturu za dodavanje novih ruta u budućnosti Sada malo izmijenimo funkciju updateRoute. Umjesto da direktno prosljeđujemo templateId kao argument, želimo ga dohvatiti prvo gledajući trenutni URL, a zatim koristiti našu mapu za dobivanje odgovarajuće vrijednosti ID-a predloška. Možemo koristiti window.location.pathname da dobijemo samo odjeljak puta 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);
}

Razlaganje onoga što se ovdje događa:

Izdvaja trenutni put iz URL-a preglednika koristeći window.location.pathname
Traži odgovarajuću konfiguraciju rute u našem routes objektu
Dohvaća ID predloška iz konfiguracije rute
Slijedi isti proces renderiranja predloška kao i prije
Stvara dinamički sustav koji reagira na promjene URL-a

Ovdje smo preslikali rute koje smo deklarirali na odgovarajući predložak. Možete isprobati da li radi ispravno tako da ručno promijenite URL u svom pregledniku.

✅ Što se događa ako unesete nepoznati put u URL? Kako bismo to mogli riješiti?

Dodavanje Navigacije

S uspostavljenim usmjeravanjem, korisnici trebaju način za navigaciju kroz aplikaciju. Tradicionalne web stranice ponovo učitavaju cijele stranice klikom na linkove, no želimo ažurirati i URL i sadržaj bez osvježavanja stranice. To stvara glađe korisničko iskustvo slično tome kako desktop aplikacije prelaze između različitih prikaza.

Moramo uskladiti dvije stvari: ažuriranje URL-a preglednika kako bi korisnici mogli dodavati stranice u favorite i dijeliti poveznice, te prikazivanje odgovarajućeg sadržaja. Kada je pravilno implementirano, to stvara besprijekornu navigaciju koju korisnici očekuju od modernih aplikacija.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Klikne na "Prijava" poveznicu
    Browser->>App: onclick događaj pokrenut
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL se osvježava na /dashboard
    App->>App: updateRoute() pozvan
    App->>Template: Pronađi i kloniraj predložak nadzorne ploče
    Template->>App: Vrati klonirani sadržaj
    App->>Browser: Zamijeni sadržaj aplikacije s predloškom
    Browser->>User: Prikaži zaslon nadzorne ploče
    
    Note over User,Template: Korisnik klikne gumb za povratak u pregledniku
    
    User->>Browser: Klikne gumb za povratak
    Browser->>Browser: Povijest se vraća na /login
    Browser->>App: popstate događaj pokrenut
    App->>App: updateRoute() automatski pozvan
    App->>Template: Pronađi i kloniraj predložak za prijavu
    Template->>App: Vrati klonirani sadržaj
    App->>Browser: Zamijeni sadržaj aplikacije s predloškom
    Browser->>User: Prikaži zaslon prijave

🔄 Pedagoški pregled

Arhitektura Jednostraničnih aplikacija (SPA): Provjerite svoje razumijevanje potpunog sustava:

✅ Kako se klijentsko usmjeravanje razlikuje od tradicionalnog usmjeravanja na strani servera?
✅ Zašto je History API bitan za pravilnu navigaciju u SPA?
✅ Kako predlošci omogućuju dinamički sadržaj bez ponovnog učitavanja stranice?
✅ Koju ulogu ima upravljanje događajima u presretanju navigacije?

Integracija sustava: Vaša SPA demonstrira:

Upravljanje predlošcima: Ponovno iskoristivi UI elementi s dinamičkim sadržajem
Klijentsko usmjeravanje: Upravljanje URL-om bez zahtjeva prema serveru
Arhitekturu pokrenutu događajima: Reaktivna navigacija i korisničke interakcije
Integraciju preglednika: Ispravan rad s poviješću i gumbima naprijed/natrag
Optimizaciju performansi: Brzi prijelazi i smanjeno opterećenje servera

Profesionalni obrasci: Implementirali ste:

Odvajanje modela i prikaza: Predlošci odvojeni od logike aplikacije
Upravljanje stanjem: Sinkronizacija stanja URL-a sa prikazanim sadržajem
Postupno poboljšanje: JavaScript unapređuje osnovnu HTML funkcionalnost
Korisničko iskustvo: Glatka, aplikaciji slična navigacija bez osvježavanja stranice

<EFBFBD> Uvid u arhitekturu: Komponente navigacijskog sustava

Što gradite:

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

📋 Sustav predložaka: Dinamička zamjena sadržaja ovisno o trenutnoj ruti

📚 Integracija povijesti: Održava funkcionalnost gumba za naprijed/natrag

🛡️ Rukovanje pogreškama: Lijepe zamjene za neispravne ili nedostajuće rute

Kako komponente međusobno djeluju:

Osluškuje događaje navigacije (klikove, promjene povijesti)

Ažurira URL koristeći History API

Renderira odgovarajući predložak za novu rutu

Održava besprijekorno korisničko iskustvo kroz cijelo vrijeme

Sljedeći korak za našu aplikaciju je omogućiti navigaciju između stranica bez potrebe za ručnim mijenjanjem URL-a. To podrazumijeva dvije stvari:

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

Drugi dio smo već riješili funkcijom updateRoute, pa sada moramo smisliti kako ažurirati trenutni URL.

Morat ćemo koristiti JavaScript, a točnije 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: Dok se HTML element sidra <a href> može samostalno koristiti za stvaranje hiperveza na različite URL-ove, on će po defaultu uzrokovati ponovo učitavanje HTML-a. Potrebno je spriječiti ovo ponašanje prilikom rukovanja usmjeravanjem u prilagođenom JavaScriptu koristeći funkciju preventDefault() na događaju klika.

Zadatak

Napravi novu funkciju koju ćemo koristiti za navigaciju u našoj aplikaciji:

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

Razumijevanje ove funkcije za navigaciju:

Ažurira URL preglednika na novi put koristeći history.pushState
Dodaje novi unos u povijest preglednika za ispravnu podršku gumba natrag/naprijed
Poziva funkciju updateRoute() za prikaz odgovarajućeg predloška
Održava iskustvo jednostranične aplikacije bez ponovnog učitavanja stranice

Ova metoda najprije ažurira trenutni URL na temelju danog puta, zatim ažurira predložak. Svojstvo window.location.origin vraća korijen URL-a, omogućujući nam rekonstrukciju potpunog URL-a iz danog puta.

Sada kada imamo ovu funkciju, možemo riješiti problem koji se javi ako put ne odgovara nijednoj definiranoj ruti. Izmijenit ćemo funkciju updateRoute dodavanjem rezervne opcije na neku od postojećih ruta ako nema podudaranja.

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 trenutni put
Preusmjerava na stranicu za prijavu kad se pristupi neispravnoj ruti
Nudi rezervni mehanizam koji sprječava neispravnu navigaciju
Osigurava da korisnici uvijek vide valjani ekran, čak i s pogrešnim URL-ovima

Ako ruta ne može biti pronađena, sada ćemo preusmjeriti na stranicu login.

Sada napravimo funkciju koja dohvaća URL klikom na link i sprječava zadano ponašanje preglednika:

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

Razlaganje ovog rukovatelja klikom:

Sprječava zadano ponašanje linka preglednika koristeći preventDefault()
Dohvaća odredišni URL iz elementa koji je kliknut
Poziva našu prilagođenu funkciju navigate umjesto ponovnog učitavanja stranice
Održava glatko iskustvo jednostranične aplikacije

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

Što ova veza za onclick ostvaruje:

Povezuje svaki link s našim prilagođenim navigacijskim sustavom
Prosljeđuje događaj klika našoj funkciji onLinkClick za daljnju obradu
Omogućuje glatku navigaciju bez ponovnog učitavanja stranice
Održava ispravan URL koji korisnici mogu dodavati u favorite ili dijeliti

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

Isprobajte klikom na ove linkove, 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 razvijate web aplikaciju za starije preglednike, postoji trik koji možete koristiti umjesto ovog API-ja: korištenjem hash (#) prije puta možete implementirati usmjeravanje koje radi s običnim navigacijama sidrom i ne učitava stranicu, jer je njegova svrha bila stvaranje internih poveznica unutar stranice.

Omogućavanje rada tipki Natrag i Naprijed

Tipke natrag i naprijed su temeljne za web pregledavanje, slično kao što NASA-ini kontrolori misije mogu pregledavati prethodna stanja sustava tijekom svemirskih misija. Korisnici očekuju da te tipke rade, a kada ne rade, narušava se očekivano iskustvo pregledavanja.

Naša jednostranična aplikacija treba dodatnu konfiguraciju za podršku ovog funkcionalnosti. Preglednik održava stog povijesti (koji smo dosad punili s history.pushState), ali kada se korisnici kreću kroz ovu povijest, naša aplikacija treba reagirati ažuriranjem prikazanog sadržaja sukladno tome.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Klikne na poveznicu "Prijava"
    Browser->>App: onclick događaj pokrenut
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL ažuriran na /dashboard
    App->>App: updateRoute() pozvan
    App->>Template: Pronađi i kloniraj predložak nadzorne ploče
    Template->>App: Vraća klonirani sadržaj
    App->>Browser: Zamijeni sadržaj aplikacije predloškom
    Browser->>User: Prikaži zaslon nadzorne ploče
    
    Note over User,Template: Korisnik klikne gumb za povratak u pregledniku
    
    User->>Browser: Klikne gumb za povratak
    Browser->>Browser: Povijest se vraća na /login
    Browser->>App: popstate događaj pokrenut
    App->>App: updateRoute() automatski pozvan
    App->>Template: Pronađi i kloniraj predložak prijave
    Template->>App: Vraća klonirani sadržaj
    App->>Browser: Zamijeni sadržaj aplikacije predloškom
    Browser->>User: Prikaži zaslon prijave

Ključne točke interakcije:

Korisničke akcije pokreću navigaciju klikovima ili gumbima preglednika
Aplikacija presreće klikove na linkove 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 odgovara na sve vrste navigacija

Korištenjem history.pushState stvaraju se novi unosi u povijest preglednika. To možete provjeriti držanjem tipke za povratak u pregledniku, trebala bi se prikazati povijest poput ovoga:

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

To je zato što aplikacija ne zna da trebamo pozvati updateRoute() svaki put kada se povijest promijeni. Ako pogledate dokumentaciju za history.pushState, vidjet ćete da se prilikom promjene stanja - što znači prelazak na drugi URL - pokreće događaj popstate. Iskoristit ćemo to za popravak tog problema.

Zadatak

Kako bismo osigurali da se prikazani predložak ažurira kada se povijest preglednika promijeni, pripojit ćemo novu funkciju koja poziva updateRoute(). To ćemo ubaciti na dno naše datoteke app.js:

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

Razumijevanje ove integracije s poviješću:

Osluškuje popstate događaje koji nastaju kada korisnici navigiraju pomoću gumba preglednika
Koristi arrow funkciju radi sažetosti koda rukovatelja događaja
Automatski poziva updateRoute() kad god se stanje povijesti promijeni
Inicijalizira aplikaciju pozivom updateRoute() kada se stranica prvi put učita
Osigurava ispravan prikaz predloška bez obzira na način navigacije korisnika

💡 Savjet za profesionalce: Ovdje smo koristili arrow funkciju za deklariranje rukovatelja popstate događaja zbog sažetosti, ali obična funkcija bi isto tako radila.

Evo podsjetnika na arrow funkcije:

🎥 Kliknite sliku iznad za video o arrow funkcijama.

Sada pokušajte koristiti gumbe za natrag i naprijed u pregledniku i provjerite da je prikazana ruta ovoga puta ispravno ažurirana.

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

Testirajte navigaciju svoje bankarske aplikacije koristeći gumbe za natrag/naprijed u pregledniku
Pokušajte ručno upisati različite URL-ove u adresnu traku i testirati usmjeravanje
Otvorite DevTools i pregledajte kako se predlošci kloniraju u DOM
Eksperimentirajte dodavanjem console.log izjava za praćenje toka usmjeravanja

🎯 Što možete postići u ovom satu

Završiti kviz poslije lekcije i razumjeti koncepte SPA arhitekture
Dodati CSS stilizaciju kako bi vaši predlošci bankarske aplikacije izgledali profesionalno
Implementirati 404 stranicu s ispravnim rukovanjem greškama
Kreirati stranicu s zaslugama i dodatnom funkcionalnošću usmjeravanja
Dodati učitavajuća stanja i prijelaze između promjena predložaka

📅 Vaš jednodnevni razvojni put SPA

Završiti kompletnu bankarsku aplikaciju s obrascima, upravljanjem podacima i trajnošću
Dodati napredne značajke usmjeravanja poput parametara rute i ugniježđenih ruta
Implementirati navigacijske zaštite i usmjeravanje bazirano na autentikaciji
Kreirati ponovo iskoristive komponente predložaka i knjižnicu komponenti
Dodati animacije i prijelaze za uglađenije iskustvo korisnika
Postaviti SPA na hosting platformu i pravilno konfigurirati usmjeravanje

🌟 Vaša mjesečna vladavina frontend arhitekturom

Izgraditi složene SPA koristeći moderne okvire poput React, Vue ili Angular
Naučiti napredne obrasce upravljanja stanjem i knjižnice
Ovladati alatima za izgradnju i razvojnim radnim tokovima za SPA
Implementirati značajke progresivnih web aplikacija i offline funkcionalnost
Istražiti tehnike optimizacije performansi za velike SPA projekte
Doprinijeti open-source SPA projektima i podijeliti svoje znanje

🎯 Vaš vremenski okvir za ovladavanje jednostaničnom aplikacijom

timeline
    title Napredak učenja SPA razvoja i moderne web arhitekture
    
    section Osnove (20 minuta)
        Sustavi predložaka: HTML elementi predložaka
                         : Manipulacija DOM-om
                         : Kloniranje sadržaja
                         : Dinamičko prikazivanje
        
    section Osnove usmjeravanja (30 minuta)
        Navigacija na strani klijenta: Upravljanje URL-om
                                   : History API
                                   : Mapiranje ruta
                                   : Obrada događaja
        
    section Korisničko iskustvo (40 minuta)
        Usavršavanje navigacije: Integracija preglednika
                               : Podrška za tipku za povratak
                               : Obrada pogrešaka
                               : Glatki prijelazi
        
    section Obrasci arhitekture (50 minuta)
        Profesionalni SPA-i: Sustavi komponenti
                          : Upravljanje stanjem
                          : Optimizacija performansi
                          : Granice pogrešaka
        
    section Napredne tehnike (1 tjedan)
        Integracija okvira: React Router
                         : Vue Router
                         : Angular Router
                         : Biblioteke stanja
        
    section Vještine za produkciju (1 mjesec)
        Razvoj za poduzeća: Sustavi izgradnje
                          : Strategije testiranja
                          : Sustavi postavljanja
                          : Praćenje performansi

🛠️ Sažetak vašeg alata za razvoj SPA

Nakon završetka ove lekcije, sada ste usavršili:

Arhitekturu predložaka: Ponovno upotrebljivi HTML elementi s dinamičkim prikazom sadržaja
Klijentsko usmjeravanje: Upravljanje URL-om i navigacija bez ponovnog učitavanja stranice
Integraciju preglednika: Korištenje History API-a i podrška gumba naprijed/natrag
Sustave pokrenute događajima: Upravljanje navigacijom i korisničkim interakcijama
Manipulaciju DOM-om: Kloniranje predložaka, izmjene sadržaja i upravljanje elementima
Rukovanje pogreškama: Lijepe zamjene za neispravne rute i nedostajući sadržaj
Obrasce za performanse: Učinkovito učitavanje i prikazivanje sadržaja

Primjene u stvarnom svijetu: Vaše vještine razvoja SPA izravno se primjenjuju na:

Moderne web aplikacije: React, Vue, Angular i razvoj u ostalim okvirima
Progresivne web aplikacije: Aplikacije koje rade offline i imaju iskustvo slično aplikacijama
Enterprise nadzorne ploče: Kompleksne poslovne aplikacije s više prikaza
E-trgovinu: Katalozi proizvoda, košarice i proces kupnje
Upravljanje sadržajem: Dinamičko stvaranje i uređivanje sadržaja
Mobilni razvoj: Hibridne aplikacije koristeći web tehnologije

Profesionalne vještine koje ste stekli: Sada možete:

Dizajnirajte jednostranične aplikacije s pravilnom podjelom odgovornosti
Implementirajte sustave usmjeravanja na strani klijenta koji skaliraju s kompleksnošću aplikacije
Otklonite pogreške u složenim navigacijskim tokovima koristeći alate za razvojne programere u pregledniku
Optimizirajte izvedbu aplikacije kroz učinkovito upravljanje predlošcima
Dizajnirajte korisnička iskustva koja se osjećaju domaće i responzivno

Ovladali ste konceptima frontend razvoja:

Arhitektura komponenti: Ponovno upotrebljivi UI obrasci i sustavi predložaka
Sinkronizacija stanja: Upravljanje stanjem URL-a i povijesti preglednika
Programiranje vođeno događajima: Obrada korisničkih interakcija i navigacije
Optimizacija performansi: Učinkovita manipulacija DOM-om i učitavanje sadržaja
Dizajn korisničkog iskustva: Glatki prijelazi i intuitivna navigacija

Sljedeća razina: Spremni ste istražiti moderne frontend okvire, napredno upravljanje stanjem ili izgraditi složene enterprise aplikacije!

🌟 Postignuće otključano: Izgradili ste profesionalnu osnovu jednostanične aplikacije s modernim obrascima web arhitekture!

Izazov GitHub Copilot Agenta 🚀

Koristite Agent mod da dovršite sljedeći izazov:

Opis: Poboljšajte bankarsku aplikaciju implementacijom obrade pogrešaka i predloška stranice 404 za nevažeće rute, poboljšavajući korisničko iskustvo pri navigaciji na nepostojeće stranice.

Zadatak: Kreirajte novi HTML predložak s id-om "not-found" koji prikazuje korisnički prijateljsku 404 stranicu s pogreškom uz stilizaciju. Zatim modificirajte JavaScript logiku usmjeravanja da prikaže ovaj predložak kada korisnici pristupaju nevažećim URL-ovima, i dodajte gumb "Idi na početnu" koji vraća na stranicu za prijavu.

Više o agent modu potražite 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 sadržajnom strukturom
Dodajte novu rutu u konfiguracijski objekt ruta
Uključite navigacijske poveznice do i s stranice zasluga
Testirajte da sva navigacija ispravno funkcionira s poviješću preglednika

Kviz poslije predavanja

Pregled i samostalno učenje

Usmjeravanje je jedan od neočekivano složenih dijelova web razvoja, posebno kako web prelazi s ponašanja osvježavanja stranica na osvježavanja stranica u Jednostaničnoj aplikaciji (SPA). Pročitajte malo o kako Azure Static Web App servis rukuje usmjeravanjem. Možete li objasniti zašto su neke od odluka opisane u tom dokumentu nužne?

Dodatni resursi za učenje:

Istražite kako popularni okviri poput React Routera i Vue Routera implementiraju usmjeravanje na strani klijenta
Istražite razlike između usmjeravanja temeljenog na hash-u i usmjeravanja putem history API-ja
Naučite o server-side renderiranju (SSR) i kako utječe na strategije usmjeravanja
Istražite kako Progressive Web Apps (PWA) upravljaju usmjeravanjem i navigacijom

Zadatak

Unaprijedite usmjeravanje

Odricanje od odgovornosti: Ovaj dokument je preveden korištenjem AI servisa za prijevod Co-op Translator. Iako se trudimo postići točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati autentičnim i službenim izvorom. Za važne informacije preporučuje se stručno ljudsko prevođenje. Nismo odgovorni za bilo kakve nesporazume ili kriva tumačenja nastala uporabom ovog prijevoda.

README.md Unescape Escape

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

Pred-predavanja kviz

Što će vam trebati

Priprema

HTML predlošci

Izgradimo to

🔄 Pedagoška provjera

Oživljavanje predložaka uz JavaScript

Zadatak

Izrada ruta

Zadatak

Dodavanje Navigacije

🔄 Pedagoški pregled

Zadatak

Omogućavanje rada tipki Natrag i Naprijed

Zadatak

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

🎯 Što možete postići u ovom satu

📅 Vaš jednodnevni razvojni put SPA

🌟 Vaša mjesečna vladavina frontend arhitekturom

🎯 Vaš vremenski okvir za ovladavanje jednostaničnom aplikacijom

🛠️ Sažetak vašeg alata za razvoj SPA

Izazov GitHub Copilot Agenta 🚀

🚀 Izazov

Kviz poslije predavanja

Pregled i samostalno učenje

Zadatak

README.md

Unescape Escape