Web-Dev-For-Beginners/translations/hu/7-bank-project/1-template-route

Banking alkalmazás építése 1. rész: HTML sablonok és útvonalak egy webalkalmazásban

journey
    title A banki alkalmazásod fejlesztési útja
    section SPA alapok
      Ismerd meg az egylapos alkalmazásokat: 3: Student
      Tanulj a sablon fogalmakról: 4: Student
      Sajátítsd el a DOM manipulációt: 4: Student
    section Útválasztó rendszerek
      Valósítsd meg az ügyféloldali útválasztást: 4: Student
      Kezeld a böngésző előzményeit: 5: Student
      Hozz létre navigációs rendszereket: 5: Student
    section Professzionális minták
      Építs moduláris architektúrát: 5: Student
      Alkalmazd a legjobb gyakorlatokat: 5: Student
      Hozz létre felhasználói élményeket: 5: Student

Amikor az Apollo 11 navigációs számítógépe 1969-ben a Holdra irányított, képesnek kellett lennie különböző programok közötti váltásra anélkül, hogy az egész rendszert újraindította volna. A modern webalkalmazások hasonlóan működnek – megváltoztatják, amit látsz, anélkül, hogy mindent újratöltenének az elejétől. Ez teremti meg a mai, sima, reszponzív élményt, amit a felhasználók elvárnak.

A hagyományos weboldalakkal ellentétben, amelyek minden interakciónál az egész oldalt újratöltik, a modern webalkalmazások csak azokat a részeket frissítik, amelyekre szükség van. Ez a megközelítés, hasonlóan ahhoz, ahogy az irányítóközpont különböző kijelzők között vált, miközben folyamatos kommunikációt tart fenn, létrehozza azt a zökkenőmentes élményt, amit megszoktunk.

Ez teszi a különbséget annyira látványossá:

Hagyományos többoldalas alkalmazások	Modern egylapos alkalmazások
Navigáció	Teljes oldal újratöltése minden képernyőnél
Teljesítmény	Lassabb a teljes HTML letöltés miatt
Felhasználói élmény	Zavaró oldalvillanások
Adatmegosztás	Nehézkes oldalakon keresztül
Fejlesztés	Több HTML fájl karbantartása

Az evolúció megértése:

• Hagyományos alkalmazások minden navigációs lépésnél szerverlekérést igényelnek
• Modern SPA-k egyszer betöltődnek és dinamikusan, JavaScript segítségével frissítik a tartalmat
• A felhasználói elvárások azonnali, zökkenőmentes interakciókat preferálnak
• Teljesítményelőnyök csökkentett sávszélesség és gyorsabb válaszidő

Ebben az órában egy banki alkalmazást építünk több, zökkenőmentesen váltakozó képernyővel. Ahogy a tudósok moduláris, újrakonfigurálható eszközöket használnak különböző kísérletekhez, úgy mi is HTML sablonokat használunk újrahasznosítható komponensként, amelyek szükség szerint megjeleníthetők.

HTML sablonokkal dolgozol majd (újrahasznosítható tervek különböző képernyőkhöz), JavaScript útvonalkezeléssel (a rendszer, ami a képernyők között vált), és a böngésző történetkezelő API-jával (ami biztosítja a vissza gomb működését). Ezek az alapvető technikák használatosak olyan keretrendszerekben, mint a React, Vue és Angular.

A végére egy működő banki alkalmazásod lesz, ami bemutatja a professzionális egylapos alkalmazás elveit.

mindmap
  root((Egylapos alkalmazások))
    Architecture
      Template System
      Client-side Routing
      State Management
      Event Handling
    Templates
      Újrahasznosítható komponensek
      Dinamikus tartalom
      DOM manipuláció
      Tartalomváltás
    Routing
      URL kezelés
      History API
      Navigációs logika
      Böngésző integráció
    User Experience
      Gyors navigáció
      Zökkenőmentes átmenetek
      Konzisztens állapot
      Modern interakciók
    Performance
      Csökkentett szerver kérések
      Gyorsabb oldalváltások
      Hatékony erőforrás használat
      Jobb válaszidő

Bevezető Kvíz

Bevezető kvíz

Amire Szükséged Lesz

Szükségünk lesz egy helyi webszerverre, hogy kipróbáljuk banki alkalmazásunkat – ne aggódj, ez könnyebb, mint hangzik! Ha még nincs beállítva, csak telepítsd a Node.js-t, majd a projekted mappájában futtasd az npx lite-server parancsot. Ez a hasznos parancs elindítja a helyi szervert és automatikusan megnyitja az alkalmazást a böngészőben.

Előkészületek

A számítógépeden készíts egy bank nevű mappát, amiben legyen egy index.html nevű fájl. Innen indulunk ebben a HTML alapsablonból:

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

Ez az alapsablon a következőket tartalmazza:

• Létrehozza az HTML5 dokumentumszerkezetét a megfelelő DOCTYPE deklarációval
• Beállítja a karakterkódolást UTF-8-ra a nemzetközi szövegtámogatáshoz
• Engedélyezi a reszponzív tervezést a viewport meta tag segítségével a mobilkompatibilitáshoz
• Megad egy leíró címet, amely megjelenik a böngészőfülön
• Létrehoz egy tiszta body részt, ahol az alkalmazásunkat építjük

📁 Projekt struktúra előnézet

A tanóra végére a projekted a következőket tartalmazza:

bank/
├── index.html      <!-- Main HTML with templates -->
├── app.js          <!-- Routing and navigation logic -->
└── style.css       <!-- (Optional for future lessons) -->

Fájlok felelőssége:

• index.html: Tartalmazza az összes sablont és biztosítja az alkalmazás szerkezetét
• app.js: Kezeli az útvonalakat, navigációt és a sablonokat
• Sablonok: Meghatározzák a bejelentkező képernyő, műszerfal és más oldal kinézetét

---

HTML Sablonok

A sablonok megoldják az egyik alapvető problémát a webfejlesztésben. Amikor Gutenberg az 1440-es években feltalálta a mozgatható betűs nyomtatást, rájött, hogy ahelyett, hogy egész oldalakat faragna, újrahasznosítható betűblokkokat készíthet és azokat szükség szerint rendezheti. Az HTML sablonok ugyanazon az elven alapulnak – ahelyett, hogy minden képernyőhöz külön HTML fájlt hoznál létre, újrahasznosítható szerkezeteket definiálsz, amelyeket szükség esetén megjeleníthetsz.

flowchart TD
    A["📋 Sablon meghatározása"] --> B["💬 Elrejtve a DOM-ban"]
    B --> C["🔍 A JavaScript megtalálja a sablont"]
    C --> D["📋 Klónozza a sablon tartalmát"]
    D --> E["🔗 Csatlakoztatás a látható DOM-hoz"]
    E --> F["👁️ A felhasználó látja a tartalmat"]
    
    G["Bejelentkezési sablon"] --> A
    H["Irányítópult sablon"] --> A
    I["Jövőbeli sablonok"] --> A
    
    style A fill:#e3f2fd
    style D fill:#e8f5e8
    style F fill:#fff3e0
    style B fill:#f3e5f5

Gondolj a sablonokra, mint az alkalmazás különböző részeinek tervrajzaira. Ahogy egy építész egy tervrajzot készít, és azt többször használja újra ahelyett, hogy azonos szobákat újradolgozna, mi egyszer megalkotjuk a sablonokat és szükség szerint megjelenítjük őket. A böngésző ezeket a sablonokat rejtve tartja, amíg a JavaScript aktiválja őket.

Ha több képernyőt akarsz létrehozni egy weboldalon, egy megoldás lehet, hogy minden képernyőhöz külön HTML fájlt készítesz. Ennek azonban van néhány kényelmetlensége:

• A képernyőváltáskor az egész HTML-t újra le kell tölteni, ami lassú lehet.
• Nehéz adatokat megosztani a különböző képernyők között.

Egy másik megközelítés, hogy csak egyetlen HTML fájl van, és több HTML sablont definiálsz a <template> elem segítségével. A sablon egy újrahasznosítható HTML blokk, amelyet a böngésző nem jelenít meg, és futásidőben JavaScript használatával kell példányosítani.

Építsük Meg

Egy banki alkalmazást fogunk létrehozni két fő képernyővel: egy bejelentkező oldallal és egy műszerfallal. Először tegyünk a HTML body-ba egy helyfoglaló elemet – ide fognak megjelenni a különböző képernyők:

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

A helyfoglaló megértése:

• Létrehoz egy "app" azonosítójú konténert, ahol megjelennek a képernyők
• Megjelenít egy betöltési üzenetet, amíg a JavaScript el nem indítja az első képernyőt
• Biztosít egy egyetlen rögzítési pontot a dinamikus tartalomnak
• Lehetővé teszi a könnyű elérést JavaScriptből a document.getElementById() segítségével

💡 Pró tipp: Mivel ennek az elemnek a tartalma cserélődni fog, tehetünk bele betöltési üzenetet vagy indikátort, amit az alkalmazás betöltése közben mutatunk.

Ezután tegyük be a HTML sablont a bejelentkező oldal számára a következő részbe. Egyelőre csak egy címet és egy navigációs linket helyezünk el, amelyet majd a navigációhoz fogunk használni.

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

A bejelentkező sablon felbontása:

• Definiál egy "login" azonosítójú sablont a JavaScript eléréshez
• Tartalmaz egy főcímet, amely meghatározza az alkalmazás arculatát
• Belefoglal egy szemantikus <section> elemet a kapcsolódó tartalom csoportosítására
• Biztosít egy navigációs linket, amely a műszerfalra vezet

Ezután hozzáadunk egy másik HTML sablont a műszerfal oldalnak. Ez az oldal különböző részeket tartalmaz:

• Egy fejlécet címmel és kijelentkezési linkkel
• A bankszámla aktuális egyenlegét
• Egy tranzakciós listát, táblázatban megjelenítve

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

Értsük meg a műszerfal egyes részeit:

• Felépíti az oldalt egy szemantikus <header> elemmel, amely navigációt tartalmaz
• Megjeleníti az alkalmazás címét következetesen az összes képernyőn az arculatért
• Biztosít egy kijelentkezési linket, ami visszavisz a bejelentkező képernyőre
• Mutatja az aktuális egyenleget egy dedikált szekcióban
• Rendezi a tranzakció adatokat egy megfelelően strukturált HTML táblázatban
• Definiálja a táblázat fejléceit: Dátum, Tárgy, és Összeg oszlopokban
• Üresen hagyja a táblázat törzsét a dinamikus tartalom későbbi beillesztéséhez

💡 Pró tipp: HTML sablon létrehozásakor, ha látni akarod, milyen lesz az eredmény, kikommentelheted a <template> és </template> sorokat <!-- --> közé zárva.

🔄 Pedagógiai ellenőrzés

Sablonrendszer megértése: Mielőtt hozzákezdenél JavaScripttel, győződj meg róla, hogy érted:

• ✅ Miben különböznek a sablonok a normál HTML elemekről
• ✅ Miért maradnak a sablonok rejtve, amíg a JavaScript aktiválja őket
• ✅ A szemantikus HTML szerkezet fontossága a sablonokban
• ✅ Hogyan teszik lehetővé a sablonok az újrahasznosítható UI komponenseket

Gyors önellenőrzés: Mi történik, ha eltávolítod a <template> tageket az HTML körül? Válasz: A tartalom azonnal láthatóvá válik, és elveszíti a sablonfunkcionalitást

Az architektúra előnyei: A sablonok biztosítják:

• Újrahasznosíthatóság: Egy definíció, több példány
• Teljesítmény: Nincs fölösleges HTML elemzés
• Karbantarthatóság: Központosított UI struktúra
• Rugalmasság: Dinamikus tartalomváltás

✅ Miért gondolod, hogy az id attribútumokat használjuk a sablonokon? Használhatnánk helyette valami mást, például osztályokat?

A sablonok életre keltése JavaScript-tel

Most funkcionálissá kell tennünk a sablonokat. Ahogy egy 3D nyomtató digitális tervrajzból fizikai tárgyat hoz létre, úgy a JavaScript a rejtett sablonjainkból látható, interaktív elemeket készít, amelyeket a felhasználók láthatnak és használhatnak.

A folyamat három egységes lépést követ, amelyek a modern webfejlesztés alapját képezik. Ha ezt a mintázatot megérted, sok keretrendszerben és könyvtárban felismered majd.

Ha a jelenlegi HTML fájlodat kipróbálod egy böngészőben, azt fogod látni, hogy csak a Loading... üzenet jelenik meg. Ez azért van, mert még hozzá kell adnunk némi JavaScript kódot a HTML sablonok példányosításához és megjelenítéséhez.

Egy sablon példányosítása általában három lépésből áll:

1. Lekérjük a sablon elemet a DOM-ból, például a document.getElementById segítségével.
2. Klónozzuk a sablon elemet a cloneNode metódussal.
3. Hozzácsatoljuk a klónt a DOM-hoz egy látható elem alá, például az appendChild használatával.

flowchart TD
    A[🔍 1. lépés: Sablon keresése] --> B[📋 2. lépés: Sablon klónozása]
    B --> C[🔗 3. lépés: Csatlakoztatás a DOM-hoz]
    
    A1["document.getElementById('login')"] --> A
    B1["template.content.cloneNode(true)"] --> B  
    C1["app.appendChild(view)"] --> C
    
    C --> D[👁️ A felhasználó számára látható sablon]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0

A folyamat vizuális bontása:

• 1. lépés megtalálja a rejtett sablont a DOM szerkezetben
• 2. lépés létrehoz egy működő másolatot, amit biztonságosan módosíthatunk
• 3. lépés beilleszti a másolatot a látható oldal területére
• Eredmény egy funkcionális képernyő, amivel a felhasználók interakcióba léphetnek

✅ Miért van szükségünk a sablon klónozására, mielőtt azt a DOM-hoz csatoljuk? Mi történhet, ha ezt a lépést kihagyjuk?

Feladat

Hozz létre egy új fájlt app.js néven a projekted mappájában, és importáld be ezt a fájlt a HTML <head> szakaszába:

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

Egy script importálásának megértése:

• Összekapcsolja a JavaScript fájlt az HTML dokumentummal
• Használja a defer attribútumot, hogy a script csak a HTML feldolgozása után fusson le
• Lehetővé teszi a DOM elemek elérését, mivel a script futása csak a dokumentum betöltése után kezdődik
• Követi a modern legjobb gyakorlatokat a script betöltés és teljesítmény tekintetében

Most az app.js-ben hozz létre egy új updateRoute nevű függvényt:

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

Lépésről lépésre, mi történik itt:

• Megkeresi a sablon elemet az egyedi azonosítója alapján
• Készít egy mélymásolatot a sablon tartalmáról a cloneNode(true) segítségével
• Megkeresi az app konténert, ahol a tartalom megjelenik
• Kitörli a konténer jelenlegi tartalmát
• Beszúrja a klónozott sablon tartalmát a látható DOM-ba

Most hívd meg ezt a függvényt az egyik sablon ID-jával és nézd meg az eredményt.

updateRoute('login');

Ennek a függvényhívásnak a hatása:

• Aktiválja a bejelentkező sablont az ID átadásával paraméterként
• Bemutatja, hogyan válthatunk programozottan az alkalmazás különböző képernyői között
• Megjeleníti a bejelentkező képernyőt az „Loading...” üzenet helyett

✅ Mi a célja ennek a kódnak: app.innerHTML = '';? Mi történik nélküle?

Útvonalak létrehozása

Az útvonalkezelés alapvetően arról szól, hogy a URL-eket a megfelelő tartalomhoz kössük. Gondolj arra, ahogy a korai telefonközpontosok kapcsolótáblákkal kötöttek össze hívásokat – megérkezett egy kérés, és azt a megfelelő célállomásra irányították. A webes útvonalkezelés hasonlóan működik, egy URL-kérést fogad és eldönti, melyik tartalmat jelenítse meg.

flowchart LR
    A["🌐 URL Útvonal<br/>/dashboard"] --> B["🗺️ Útvonalak Objektum<br/>Lekérdezés"]
    B --> C["🎯 Sablon ID<br/>'dashboard'"]
    C --> D["📌 Sablon Megkeresése<br/>getElementById"]
    D --> E["👁️ Képernyő Megjelenítése<br/>Klónozás & Hozzáfűzés"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nem talált"]
    I --> J["🔄 Átirányítás /login-re"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Hagyományosan a webszerverek különböző HTML fájlokat szolgáltattak különböző URL-ekhez. Mivel mi egy egylapos alkalmazást építünk, ezt az útvonalkezelést nekünk kell JavaScripttel megoldani. Ez a megközelítés nagyobb irányítást ad a felhasználói élmény és a teljesítmény felett.

flowchart LR
    A["🌐 URL útvonal<br/>/dashboard"] --> B["🗺️ Útvonal objektum<br/>Lekérdezés"]
    B --> C["🎯 Sablon ID<br/>'dashboard'"]
    C --> D["📄 Sablon keresése<br/>getElementById"]
    D --> E["👁️ Képernyő megjelenítése<br/>Klonozás & Hozzáfűzés"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /ismeretlen"] --> I["❌ Nem található"]
    I --> J["🔄 Átirányítás /login-re"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Az útvonalkezelés menete:

• Az URL változás kivált egy keresést az útvonalakon
• Érvényes útvonalak bizonyos sablonazonosítókhoz vannak rendelve a megjelenítéshez
• Érvénytelen útvonalak visszafallaback viselkedést váltanak ki, hogy elkerüljék a hibás állapotot
• A sablon megjelenítése a korábbi három lépésből álló folyamat szerint történik

A webalkalmazás esetén útvonalkezelésnek hívjuk annak a szándékát, hogy URL-eket rendelünk hozzá olyan képernyőkhöz, amelyeket meg kell jeleníteni. Egy többlapos weboldalon ez automatikusan történik, mivel a fájl elérési útjai megjelennek az URL-ben. Például, ha ezek a fájlok vannak a projekted mappájában:

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

Ha egy webszervert hozol létre mywebsite gyökérrel, az URL leképezése így nézne ki:

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

Azonban mivel mi egyetlen HTML fájlt használunk, amely az összes képernyőt tartalmazza, ez az alapértelmezett viselkedés nem segít nekünk. Kézzel kell létrehoznunk ezt a leképezést és JavaScripttel frissítenünk a megjelenített sablont.

Feladat

Egy egyszerű objektumot használunk leképezés implementálására az URL útvonalak és a sablonjaink között. Add hozzá ezt az objektumot az app.js fájlod tetejére.

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

Az útvonal konfiguráció megértése:

• Leképezi az URL útvonalakat a sablonazonosítókra
• Használja az objektum szintaxisát, ahol a kulcsok útvonalak, az értékek a sablon információk
• Lehetővé teszi az egyszerű keresést, hogy adott URL-hez melyik sablont jelenítsük meg
• Skálázható struktúrát biztosít új útvonalak könnyű hozzáadásához a jövőben Most módosítsuk egy kicsit az updateRoute függvényt. Ahelyett, hogy közvetlenül átadnánk a templateId-t argumentumként, szeretnénk azt úgy lekérni, hogy először megnézzük az aktuális URL-t, majd a térképünket használva megszerezzük a hozzá tartozó sablonazonosító értéket. Használhatjuk a window.location.pathname metódust az URL-ből csak az útvonal lekérésére.

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

Részletezve, mi történik itt:

• Kinyeri a böngésző URL-jéből az aktuális útvonalat a window.location.pathname használatával
• Megkeresi a hozzá tartozó útvonal konfigurációt az útvonalak objektumunkban
• Lekéri a sablonazonosítót az útvonal-konfigurációból
• Követi ugyanazt a sablon megjelenítési folyamatot, mint korábban
• Létrehoz egy dinamikus rendszert, amely reagál az URL változásaira

Itt összekapcsoltuk a deklarált útvonalakat a hozzájuk tartozó sablonokkal. Kipróbálhatod, hogy helyesen működik-e, ha kézzel módosítod az URL-t a böngésződben.

✅ Mi történik, ha ismeretlen útvonalat írsz be az URL-be? Hogyan tudnánk ezt megoldani?

Navigáció hozzáadása

A routing beállítása után a felhasználóknak szükségük van egy módra az alkalmazáson belüli navigációra. A hagyományos weboldalak egész oldalakat töltenek újra linkekre kattintáskor, de mi azt szeretnénk, hogy egyszerre frissüljön az URL és a tartalom, anélkül, hogy az oldal újratöltődne. Ez simább élményt teremt, hasonlóan ahhoz, ahogyan az asztali alkalmazások váltanak különböző nézetek között.

Két dolgot kell összehangolnunk: frissíteni a böngésző URL-jét, hogy a felhasználók könyvjelzőket készíthessenek és linkeket megoszthassanak, valamint megjeleníteni a megfelelő tartalmat. Ha ezt helyesen valósítjuk meg, az a gördülékeny navigációt biztosítja, amit a modern alkalmazásoktól elvárnak a felhasználók.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Rákattint a "Bejelentkezés" hivatkozásra
    Browser->>App: onclick esemény kiváltva
    App->>App: preventDefault() & navigálás('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL frissül /dashboard-ra
    App->>App: updateRoute() meghívva
    App->>Template: Megkeresi és klónozza a dashboard sablont
    Template->>App: Visszaadja a klónozott tartalmat
    App->>Browser: Lecseréli az app tartalmát a sablonra
    Browser->>User: Megjeleníti a dashboard képernyőt
    
    Note over User,Template: A felhasználó rákattint a böngésző vissza gombjára
    
    User->>Browser: Rákattint a vissza gombra
    Browser->>Browser: Történet visszalép /login-re
    Browser->>App: popstate esemény kiváltva
    App->>App: updateRoute() automatikusan meghívódik
    App->>Template: Megkeresi és klónozza a bejelentkezés sablont
    Template->>App: Visszaadja a klónozott tartalmat
    App->>Browser: Lecseréli az app tartalmát a sablonra
    Browser->>User: Megjeleníti a bejelentkezés képernyőt

🔄 Pedagógiai ellenőrzés

Egylapos alkalmazás architektúrája: Ellenőrizd a rendszer teljes megértését:

• ✅ Miben különbözik a kliensoldali routing a hagyományos szerveroldali routingtól?
• ✅ Miért elengedhetetlen a History API az SPA helyes navigációjához?
• ✅ Hogyan teszik lehetővé a sablonok a dinamikus tartalmat oldalfrissítés nélkül?
• ✅ Milyen szerepe van az eseménykezelésnek a navigáció elfogásában?

Rendszerintegráció: Az SPA-d bemutatja:

• Sablonkezelés: Újrafelhasználható UI komponensek dinamikus tartalommal
• Kliensoldali routing: URL-kezelés szerverlekérések nélkül
• Eseményvezérelt architektúra: Reagáló navigáció és felhasználói interakciók
• Böngésző integráció: History és vissza/előre gombok megfelelő támogatása
• Teljesítmény optimalizálás: Gyors váltások és csökkentett szerverterhelés

Professzionális minták: Megvalósítottad:

• Modell-Nézet szétválasztás: Sablonok elkülönítve az alkalmazás logikától
• Állapotkezelés: URL állapot szinkronban a megjelenített tartalommal
• Progresszív fejlesztés: JavaScript kiegészíti az alap HTML funkcionalitást
• Felhasználói élmény: Simább, alkalmazásszerű navigáció oldalfrissítés nélkül

<EFBFBD> Architektúra betekintés: Navigációs rendszer összetevői

Amit építesz:

• 🔄 URL kezelése: A böngésző címsorának frissítése oldalfrissítés nélkül
• 📋 Sablonrendszer: Tartalom dinamikus cseréje az aktuális útvonal alapján
• 📚 Történetkezelés: Böngésző vissza/előre gomb támogatás fenntartása
• 🛡️ Hibakezelés: Elegáns visszaesés érvénytelen vagy hiányzó útvonal esetén

Hogyan működnek együtt a komponensek:

• Figyeli a navigációs eseményeket (kattintások, történetváltozások)
• Frissíti az URL-t a History API segítségével
• Megjeleníti a megfelelő sablont az új útvonalhoz
• Fenntartja a gördülékeny felhasználói élményt egész idő alatt

A következő lépés az alkalmazásunkban, hogy lehetővé tegyük a navigációt az oldalak között anélkül, hogy kézzel kellene az URL-t változtatni. Ez két dolgot jelent:

1. Az aktuális URL frissítése
2. A megjelenített sablon frissítése az új URL alapján

A második rész már megvan az updateRoute függvény által, így azt kell kitalálnunk, hogyan frissítsük az aktuális URL-t.

JavaScriptet kell használnunk, pontosabban a history.pushState metódust, amely lehetővé teszi az URL frissítését és új bejegyzés létrehozását a böngésző előzménytárában, anélkül, hogy újratöltenénk a HTML-t.

⚠️ Fontos megjegyzés: Bár a HTML horgonyelem <a href> önmagában is használható linkek létrehozására különböző URL-ekre, alapértelmezésben a böngésző újratölti az oldalt. Ezt a viselkedést meg kell akadályozni saját JavaScript routing kezeléskor, a preventDefault() függvény használatával a kattintási eseményen.

Feladat

Készítsünk egy új függvényt, amelyet navigációra használhatunk az alkalmazásunkban:

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

Ennek a navigációs függvénynek az értelmezése:

• Frissíti a böngésző URL-jét az új útvonalnak megfelelően a history.pushState segítségével
• Új bejegyzést ad a böngésző előzménytárához, hogy a vissza/előre gombok megfelelően működjenek
• Meghívja az updateRoute() függvényt, hogy megjelenítse a megfelelő sablont
• Fenntartja az egylapos alkalmazás élményt oldalfrissítés nélkül

Ez a módszer először frissíti a jelenlegi URL-t az adott útvonal alapján, majd frissíti a megjelenített sablont. A window.location.origin tulajdonság a webhely gyökér URL-jét adja vissza, így adott útvonalból újra össze tudjuk állítani a teljes URL-t.

Most, hogy megvan ez a függvény, foglalkozzunk azzal a problémával, hogy mi történik, ha egy útvonal nem egyezik meg egyetlen definiált útvonallal sem. Az updateRoute függvényt módosítjuk úgy, hogy adunk egy visszaesési megoldást egy létező útvonalra, ha nem találunk egyezést.

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

Fontos pontok:

• Ellenőrzi, hogy létezik-e útvonal az aktuális útvonalhoz
• Átirányít a bejelentkezési oldalra, ha érvénytelen útvonalat érünk el
• Biztosít egy visszazuhanó mechanizmust, hogy megakadályozza a törött navigációt
• Garantálja, hogy a felhasználók mindig érvényes képernyőt lássanak, még helytelen URL esetén is

Ha nem találunk útvonalat, mostantól átirányítjuk a login oldalra.

Most hozzunk létre egy függvényt, amely a kattintáskor lekéri az URL-t, és megakadályozza a böngésző alapértelmezett link viselkedését:

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

Ez a kattintáskezelő lépésenként:

• Megakadályozza a böngésző alapértelmezett link viselkedését a preventDefault() használatával
• Kinyeri a cél URL-t a kattintott horgony elemből
• Kihívja a saját navigációs függvényünket oldal újratöltése helyett
• Fenntartja a gördülékeny egylapú alkalmazás élményt

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

Mit tesz ez az onclick kötés:

• Összekapcsolja az egyes linkeket a saját navigációs rendszerünkkel
• Átadja a kattintás eseményt az onLinkClick függvényünknek feldolgozásra
• Lehetővé teszi a gördülékeny navigációt oldalfrissítés nélkül
• Fenntartja az URL helyes szerkezetét, amelyet a felhasználók könyvjelzőzhetnek vagy megoszthatnak

Az onclick attribútum a click eseményt köti JavaScript kódra, itt a navigate() függvény hívására.

Próbáld meg rákattintani ezekre a linkekre, most már képesnek kell lenned navigálni az alkalmazásod különböző képernyői között.

✅ A history.pushState metódus az HTML5 szabvány része, és minden modern böngésző támogatja. Ha régebbi böngészőkre építesz webalkalmazást, van egy trükk, amit használhatsz helyette: egy hash (#) használatával az útvonal előtt megvalósítható olyan routing, amely hagyományos horgonylap navigációként működik, és nem tölti újra az oldalt, hiszen arra tervezték, hogy belső linkeket hozzon létre egy adott oldalon belül.

A Vissza és Előre gombok működésbe hozatala

A vissza és előre gombok alapvetőek a webes böngészésben, ahogy a NASA küldetésvezérlői is képesek visszanézni korábbi rendszerállapotokat az űrmissziók során. A felhasználók elvárják, hogy ezek a gombok működjenek, és ha nem így van, akkor megszakad a várt böngészési élmény.

Az egylapos alkalmazásunknak további konfigurációra van szüksége ennek támogatásához. A böngésző fenntart egy előzménytárat (amelyhez mi a history.pushState használatával adtunk elem(eke)t), de amikor a felhasználók előzmények között navigálnak, az alkalmazásnak reagálnia kell azzal, hogy frissíti a megjelenített tartalmat.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Rákattint a "Bejelentkezés" hivatkozásra
    Browser->>App: onclick esemény kiváltva
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL frissítése /dashboard-ra
    App->>App: updateRoute() meghívva
    App->>Template: Megkeresi és klónozza az irányítópult sablonját
    Template->>App: Visszaadja a klónozott tartalmat
    App->>Browser: Kicseréli az alkalmazás tartalmát a sablonra
    Browser->>User: Megjeleníti az irányítópult képernyőt
    
    Note over User,Template: A felhasználó a böngésző vissza gombjára kattint
    
    User->>Browser: Rákattint a vissza gombra
    Browser->>Browser: Előzmény visszalépés /login-re
    Browser->>App: popstate esemény kiváltva
    App->>App: updateRoute() automatikusan meghívva
    App->>Template: Megkeresi és klónozza a bejelentkezés sablonját
    Template->>App: Visszaadja a klónozott tartalmat
    App->>Browser: Kicseréli az alkalmazás tartalmát a sablonra
    Browser->>User: Megjeleníti a bejelentkezési képernyőt

Fontos interakciós pontok:

• Felhasználói műveletek navigációt indítanak kattintással vagy böngésző gombokkal
• Az alkalmazás elfogja a linkkattintásokat, hogy megakadályozza az oldal újratöltődését
• History API kezeli az URL-változásokat és a böngésző előzménytárat
• Sablonok biztosítják az egyes képernyők tartalmi szerkezetét
• Eseményfigyelők garantálják, hogy az alkalmazás minden navigációs típust kezel

A history.pushState új bejegyzéseket hoz létre a böngésző navigációs előzményeiben. Ezt ellenőrizheted úgy, hogy lenyomod a böngésződ vissza gombját, ilyesmit fogsz látni:

Ha néhányszor megnyomod a vissza gombot, látni fogod, hogy a jelenlegi URL változik és az előzmények frissülnek, de ugyanaz a sablon jelenik meg továbbra is.

Ez azért van, mert az alkalmazás nem tudja, hogy a updateRoute()-ot meg kell hívni minden alkalommal, amikor az előzmény megváltozik. Ha megnézed a history.pushState dokumentációját, láthatod, hogy az állapot változásakor – azt jelenti, hogy más URL-re léptünk –, a popstate esemény aktiválódik. Ezt fogjuk használni a probléma megoldására.

Feladat

Annak érdekében, hogy a megjelenített sablon frissüljön, amikor a böngésző előzményai változnak, kapcsoljunk egy új függvényt, amely meghívja az updateRoute()-ot. Ezt az app.js fájl alján tegyük meg:

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

Ennek a történetkezelő integrációnak a megértése:

• Figyel a popstate eseményekre, amelyek akkor lépnek fel, amikor a felhasználók a böngésző gombjaival navigálnak
• Használ egy nyílfüggvényt a tömör eseménykezelő szintaxisért
• Automatikusan meghívja az updateRoute()-ot, amikor az állapotváltozás megtörténik
• Inicializálja az alkalmazást az updateRoute() hívásával az oldal betöltődésekor
• Biztosítja, hogy a helyes sablon legyen megjelenítve, függetlenül attól, hogyan navigálnak a felhasználók

💡 Pro Tipp: Itt egy nyílfüggvényt használtunk a popstate eseménykezelő deklarálására a tömörség kedvéért, de egy hagyományos függvény is ugyanolyan jól működne.

Itt egy frissítő videó a nyílfüggvényekről:

🎥 Kattints a fenti képre egy videó megtekintéséhez a nyílfüggvényekről.

Most próbáld ki a böngésződ vissza és előre gombjait, és ellenőrizd, hogy a megjelenített útvonal most helyesen frissül-e.

⚡ Mit tehetsz a következő 5 percben

• Teszteld a banki alkalmazásod navigációját a böngésző vissza/előre gombjaival
• Próbálj meg kézzel beírni különböző URL-eket a címsorba az útvonal teszteléséhez
• Nyisd meg a böngésző fejlesztői eszközeit, és nézd meg, hogyan klónozódnak a sablonok a DOM-ba
• Kísérletezz console.log állítások hozzáadásával az útvonal követésére

🎯 Mit érhetsz el ezen az órán

• Teljesítsd az óra végén a kvízt, és értsd meg az SPA architektúra fogalmait
• Adj hozzá CSS stílusokat, hogy a banki alkalmazásod sablonjai professzionálisak legyenek
• Valósítsd meg a 404-es hibaoldal kihívást megfelelő hibakezeléssel
• Készítsd el a köszönet oldal kihívást további routing funkciókkal
• Adj hozzá betöltő állapotokat és átmeneteket a sablonváltások között

📅 Hét napos SPA fejlesztési utad

• Készítsd el a teljes banki appot űrlapokkal, adatkezeléssel és tartósítással
• Adj hozzá fejlett routing funkciókat, mint útvonal paraméterek és beágyazott útvonalak
• Valósíts meg navigációs őröket és hitelesítés alapú routingot
• Készíts újrafelhasználható sablon komponenseket és egy komponens könyvtárat
• Adj hozzá animációkat és átmeneteket a simább felhasználói élményért
• Telepítsd az SPA-t egy hosztplatformra és konfiguráld helyesen az útvonalakat

🌟 Hónapos frontend architektúra mesterkurzusod

• Építs komplex SPA-kat modern keretrendszerekkel, mint React, Vue vagy Angular
• Tanulj meg fejlett állapotkezelési mintákat és könyvtárakat
• Sajátítsd el az építő eszközöket és fejlesztési munkafolyamatokat SPA fejlesztéshez
• Valósítsd meg a progresszív webalkalmazás funkciókat és offline működést
• Tanulmányozd a teljesítmény-optimalizálási technikákat nagy méretű SPA-k esetén
• Vegyél részt nyílt forráskódú SPA projektek fejlesztésében és oszd meg ismereteidet

🎯 Egylapos alkalmazás mesterkurzusod idővonala

timeline
    title SPA Fejlesztés & Modern Web Architektúra Tanulási Folyamat
    
    section Alapok (20 perc)
        Sablon Rendszerek: HTML sablon elemek
                        : DOM manipuláció
                        : Tartalom klónozás
                        : Dinamikus megjelenítés
        
    section Routing Alapok (30 perc)
        Kliens Oldali Navigáció: URL kezelés
                              : History API
                              : Útvonal leképezés
                              : Eseménykezelés
        
    section Felhasználói Élmény (40 perc)
        Navigáció Csomagolás: Böngésző integráció
                         : Vissza gomb támogatás
                         : Hiba kezelés
                         : Zökkenőmentes átmenetek
        
    section Architektúra Minták (50 perc)
        Profi SPA-k: Komponens rendszerek
                         : Állapotkezelés
                         : Teljesítmény optimalizálás
                         : Hibahatárok
        
    section Haladó Technikák (1 hét)
        Keretrendszer Integráció: React Router
                             : Vue Router
                             : Angular Router
                             : Állapot könyvtárak
        
    section Gyártási Készségek (1 hónap)
        Vállalati Fejlesztés: Build rendszerek
                              : Tesztelési stratégiák
                              : Telepítési folyamatok
                              : Teljesítményfigyelés

🛠️ SPA fejlesztési eszköztárad összefoglalója

A lecke elvégzése után most már magabiztos vagy:

• Sablon architektúrában: Újrafelhasználható HTML komponensek dinamikus tartalom megjelenítéssel
• Kliensoldali routingban: URL-kezelés és navigáció oldalfrissítés nélkül
• Böngésző integrációban: History API használata és vissza/előre gomb támogatás
• Eseményvezérelt rendszerekben: Navigációs kezelés és felhasználói interakciók menedzselése
• DOM manipulációban: Sablon klónozás, tartalomváltás és elem kezelés
• Hibakezelésben: Elegáns visszaesés hibás útvonal vagy hiányzó tartalom esetén
• Teljesítménymintákban: Hatékony tartalom betöltés és megjelenítési stratégiák

Valós alkalmazásokban: Az SPA fejlesztési tudásod közvetlenül alkalmazható:

• Modern webalkalmazásokban: React, Vue, Angular, és egyéb keretrendszer fejlesztés
• Progresszív webalkalmazásokban: Offline-képes appok alkalmazásszerű élménnyel
• Vállalati irányítópultokban: Összetett üzleti alkalmazások több nézettel
• E-kereskedelmi platformokon: Termékkatalógusok, kosár és pénztár folyamatok
• Tartalomkezelésben: Dinamikus tartalomkészítő és szerkesztő felületek
• Mobil fejlesztésben: Hibridek alkalmazások webes technológiával

Megszerezhető szakmai készségek: Most már képes vagy:

• Tervezze meg az egylapos alkalmazásokat a megfelelő felelősségszétválasztással
• Valósítson meg kliensoldali útválasztó rendszereket, amelyek skálázódnak az alkalmazás összetettségével
• Hibakeresés bonyolult navigációs folyamatok böngészőfejlesztői eszközökkel
• Optimalizálja az alkalmazás teljesítményét hatékony sablonkezeléssel
• Tervezzen natív és reszponzív felhasználói élményeket

Elsajátított frontend fejlesztési koncepciók:

• Komponens architektúra: Újrahasználható UI minták és sablonrendszerek
• Állapotszinkronizáció: URL állapotkezelés és böngészőtörténet
• Eseményvezérelt programozás: Felhasználói interakciókezelés és navigáció
• Teljesítményoptimalizálás: Hatékony DOM manipuláció és tartalombetöltés
• Felhasználói élmény tervezés: Zökkenőmentes átmenetek és intuitív navigáció

Következő szint: Készen állsz, hogy felfedezd a modern frontend keretrendszereket, fejlett állapotkezelést, vagy összetett vállalati alkalmazásokat építs!

🌟 Eredmény elérve: Felépítettél egy professzionális egylapos alkalmazás alapot modern webes architektúra mintákkal!

---

GitHub Copilot Agent kihívás 🚀

Használd az Agent módot a következő kihívás teljesítéséhez:

Leírás: Fejleszd a banki alkalmazást hibakezelés és egy 404-es oldal sablon bevezetésével érvénytelen útvonalak esetén, javítva a felhasználói élményt, ha nem létező oldalra navigálnak.

Kérés: Hozz létre egy új HTML sablont "not-found" azonosítóval, amely felhasználóbarát 404-es hibát mutat stílusos megjelenéssel. Ezután módosítsd a JavaScript útválasztó logikáját, hogy ezt a sablont jelenítse meg, amikor a felhasználók érvénytelen URL-re navigálnak, és adj hozzá egy "Vissza a főoldalra" gombot, amely a bejelentkezési oldalra visz vissza.

További információ az agent módról.

🚀 Kihívás

Adj hozzá egy új sablont és útvonalat egy harmadik oldalhoz, amely az alkalmazás készítőihez kapcsolódó kredit információkat mutatja.

A kihívás céljai:

• Hozz létre egy új HTML sablont megfelelő tartalmi felépítéssel
• Add hozzá az új útvonalat az útvonal konfigurációs objektumodhoz
• Tartsd fenn a navigációs linkeket az kredit oldalra és vissza
• Teszteld, hogy az összes navigáció helyesen működik a böngészőtörténettel

Óra utáni kvíz

Óra utáni kvíz

Áttekintés és önálló tanulás

Az útválasztás meglepően bonyolult része a webfejlesztésnek, különösen ahogy a web a lapfrissítéses viselkedéstől az egylapos alkalmazásos lapfrissítések felé mozdul el. Olvass egy kicsit arról, hogyan kezeli az Azure Static Web App szolgáltatás az útválasztást. Ki tudnád fejteni, hogy miért szükségesek a dokumentumban leírt döntések?

További tanulási források:

• Fedezd fel, hogyan valósítják meg a népszerű keretrendszerek, mint a React Router és Vue Router a kliensoldali útválasztást
• Kutatd meg a hash-alapú és a history API-alapú útválasztás közötti különbségeket
• Tanulj a szerveroldali renderelésről (SSR) és arról, hogyan befolyásolja az útválasztási stratégiákat
• Vizsgáld meg, hogyan kezelik a Progresszív Webalkalmazások (PWA-k) az útválasztást és navigációt

Feladat

Fejleszd az útválasztást

---

Felelősség kizárása:
Ez a dokumentum az AI fordító szolgáltatás, a Co-op Translator segítségével készült. Bár pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti nyelvű dokumentum tekintendő hiteles forrásnak. Fontos információk esetén javasolt szakképzett emberi fordító igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy félreértelmezésekért.