Web-Dev-For-Beginners/translations/no/7-bank-project/3-data/README.md

Bygg en bankapp del 3: Metoder for henting og bruk av data

Tenk på Enterprise-datamaskinen i Star Trek – når kaptein Picard spør om skipets status, vises informasjonen umiddelbart uten at hele grensesnittet må lukkes og bygges opp på nytt. Den sømløse informasjonsflyten er akkurat det vi skal bygge her med dynamisk datahenting.

Akkurat nå er bankappen din som en trykt avis – informativ, men statisk. Vi skal forvandle den til noe mer som NASAs kontrollsenter, der data flyter kontinuerlig og oppdateres i sanntid uten å avbryte brukerens arbeidsflyt.

Du vil lære hvordan du kommuniserer med servere asynkront, håndterer data som ankommer til forskjellige tider, og transformerer rå informasjon til noe meningsfullt for brukerne dine. Dette er forskjellen mellom en demo og programvare som er klar for produksjon.

Quiz før forelesning

Quiz før forelesning

Forutsetninger

Før du dykker inn i datahenting, sørg for at du har disse komponentene klare:

• Forrige leksjon: Fullfør Innloggings- og registreringsskjemaet – vi bygger videre på dette grunnlaget
• Lokal server: Installer Node.js og kjør server-API for å levere kontodata
• API-tilkobling: Test servertilkoblingen din med denne kommandoen:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

Denne raske testen sikrer at alle komponenter kommuniserer riktig:

• Bekrefter at Node.js kjører som det skal på systemet ditt
• Bekrefter at API-serveren din er aktiv og svarer
• Validerer at appen din kan nå serveren (som å sjekke radiokontakt før en oppdrag)

---

Forstå datahenting i moderne webapplikasjoner

Måten webapplikasjoner håndterer data på har utviklet seg dramatisk de siste to tiårene. Å forstå denne utviklingen vil hjelpe deg å sette pris på hvorfor moderne teknikker som AJAX og Fetch API er så kraftige og hvorfor de har blitt essensielle verktøy for webutviklere.

La oss utforske hvordan tradisjonelle nettsteder fungerte sammenlignet med de dynamiske, responsive applikasjonene vi bygger i dag.

Tradisjonelle fler-sides applikasjoner (MPA)

I internettets tidlige dager var hvert klikk som å skifte kanal på en gammel TV – skjermen ble blank, og deretter kom det nye innholdet sakte frem. Dette var realiteten for tidlige webapplikasjoner, der hver interaksjon betydde at hele siden måtte bygges opp på nytt fra bunnen av.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Clicks link or submits form
    Browser->>Server: Requests new HTML page
    Note over Browser: Page goes blank
    Server->>Browser: Returns complete HTML page
    Browser->>User: Displays new page (flash/reload)

Hvorfor denne tilnærmingen føltes klønete:

• Hvert klikk betydde at hele siden måtte bygges opp på nytt
• Brukere ble avbrutt midt i tanken av irriterende sideblinker
• Internettforbindelsen din jobbet overtid med å laste ned den samme topp- og bunnteksten gjentatte ganger
• Apper føltes mer som å bla gjennom et arkivskap enn å bruke programvare

Moderne én-sides applikasjoner (SPA)

AJAX (Asynchronous JavaScript and XML) endret dette paradigmet fullstendig. Som den modulære designen til den internasjonale romstasjonen, der astronauter kan bytte ut individuelle komponenter uten å bygge hele strukturen på nytt, lar AJAX oss oppdatere spesifikke deler av en nettside uten å laste alt på nytt. Selv om navnet nevner XML, bruker vi stort sett JSON i dag, men hovedprinsippet er det samme: oppdater bare det som trenger å endres.

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Interacts with page
    Browser->>JavaScript: Triggers event handler
    JavaScript->>Server: Fetches only needed data
    Server->>JavaScript: Returns JSON data
    JavaScript->>Browser: Updates specific page elements
    Browser->>User: Shows updated content (no reload)

Hvorfor SPAs føles så mye bedre:

• Bare de delene som faktisk endres blir oppdatert (smart, ikke sant?)
• Ingen flere brå avbrytelser – brukerne dine holder seg i flyten
• Mindre data som sendes over nettet betyr raskere lasting
• Alt føles raskt og responsivt, som appene på telefonen din

Utviklingen til moderne Fetch API

Moderne nettlesere tilbyr Fetch API, som erstatter den eldre XMLHttpRequest. Som forskjellen mellom å bruke en telegraf og e-post, bruker Fetch API løfter for renere asynkron kode og håndterer JSON naturlig.

Funksjon	XMLHttpRequest	Fetch API
Syntaks	Kompleks callback-basert	Ren promise-basert
JSON-håndtering	Krever manuell parsing	Innebygd .json()-metode
Feilhåndtering	Begrenset feilinformasjons	Omfattende feildetaljer
Moderne støtte	Kompatibilitet med eldre systemer	ES6+ løfter og async/await

💡 Nettleserkompatibilitet: Gode nyheter – Fetch API fungerer i alle moderne nettlesere! Hvis du er nysgjerrig på spesifikke versjoner, har caniuse.com hele kompatibilitetshistorien.

Konklusjon:

• Fungerer utmerket i Chrome, Firefox, Safari og Edge (i utgangspunktet overalt hvor brukerne dine er)
• Bare Internet Explorer trenger ekstra hjelp (og ærlig talt, det er på tide å gi slipp på IE)
• Setter deg perfekt opp for de elegante async/await-mønstrene vi skal bruke senere

Implementering av brukerinnlogging og datahenting

La oss nå implementere innloggingssystemet som forvandler bankappen din fra en statisk visning til en funksjonell applikasjon. Som autentiseringsprotokollene som brukes i sikre militæranlegg, vil vi verifisere brukerens legitimasjon og deretter gi tilgang til deres spesifikke data.

Vi bygger dette trinnvis, med start i grunnleggende autentisering og deretter legge til datahentingsfunksjoner.

Trinn 1: Lag grunnlaget for innloggingsfunksjonen

Åpne app.js-filen din og legg til en ny login-funksjon. Denne vil håndtere brukerens autentiseringsprosess:

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

La oss bryte dette ned:

• Det async nøkkelordet? Det forteller JavaScript "hei, denne funksjonen kan trenge å vente på ting"
• Vi henter skjemaet vårt fra siden (ikke noe fancy, bare finner det ved hjelp av ID-en)
• Deretter henter vi det brukeren har skrevet inn som brukernavn
• Her er et smart triks: du kan få tilgang til alle skjemaelementer via name-attributtet – ingen grunn til å bruke ekstra getElementById-kall!

💡 Mønster for skjema-tilgang: Hvert skjemaelement kan nås via navnet (satt i HTML med name-attributtet) som en egenskap av skjemaelementet. Dette gir en ren og lesbar måte å hente skjema-data på.

Trinn 2: Lag en funksjon for henting av kontodata

Neste steg er å lage en dedikert funksjon for å hente kontodata fra serveren. Dette følger samme mønster som registreringsfunksjonen din, men fokuserer på datahenting:

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

Dette oppnår koden:

• Bruker det moderne fetch API for å be om data asynkront
• Konstruerer en GET-forespørsel med brukernavnparameter
• Bruker encodeURIComponent() for å håndtere spesialtegn i URL-er på en sikker måte
• Konverterer responsen til JSON-format for enkel datamanipulasjon
• Håndterer feil på en ryddig måte ved å returnere et feilobjekt i stedet for å krasje

⚠️ Sikkerhetsnotat: encodeURIComponent()-funksjonen håndterer spesialtegn i URL-er. Som kodingssystemene som brukes i militær kommunikasjon, sikrer den at meldingen din kommer frem akkurat som den skal, og hindrer tegn som "#" eller "&" fra å bli feiltolket.

Hvorfor dette er viktig:

• Hindrer spesialtegn fra å ødelegge URL-er
• Beskytter mot angrep som manipulerer URL-er
• Sikrer at serveren mottar de tiltenkte dataene
• Følger sikre kodingspraksiser

Forstå HTTP GET-forespørsler

Her er noe som kanskje overrasker deg: når du bruker fetch uten ekstra alternativer, oppretter den automatisk en GET-forespørsel. Dette er perfekt for det vi gjør – spør serveren "hei, kan jeg se denne brukerens kontodata?"

Tenk på GET-forespørsler som å høflig be om å låne en bok fra biblioteket – du ber om å se noe som allerede eksisterer. POST-forespørsler (som vi brukte for registrering) er mer som å sende inn en ny bok for å bli lagt til i samlingen.

GET-forespørsel	POST-forespørsel
Formål	Hente eksisterende data
Parametere	I URL-sti/spørringsstreng
Caching	Kan caches av nettlesere
Sikkerhet	Synlig i URL/logg

Trinn 3: Sette alt sammen

Nå til den tilfredsstillende delen – la oss koble kontohentingsfunksjonen din til innloggingsprosessen. Dette er der alt faller på plass:

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

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}

Denne funksjonen følger en klar sekvens:

• Henter brukernavnet fra skjemaets input
• Ber om brukerens kontodata fra serveren
• Håndterer eventuelle feil som oppstår under prosessen
• Lagrer kontodataene og navigerer til dashbordet ved suksess

🎯 Async/Await-mønster: Siden getAccount er en asynkron funksjon, bruker vi nøkkelordet await for å pause utførelsen til serveren svarer. Dette hindrer koden fra å fortsette med udefinerte data.

Trinn 4: Lag et sted for dataene dine

Appen din trenger et sted å huske kontoinformasjonen når den er lastet. Tenk på dette som appens korttidsminne – et sted å holde den nåværende brukerens data tilgjengelig. Legg til denne linjen øverst i app.js-filen din:

// This holds the current user's account data
let account = null;

Hvorfor vi trenger dette:

• Holder kontodataene tilgjengelige fra hvor som helst i appen din
• Å starte med null betyr "ingen er logget inn ennå"
• Oppdateres når noen logger inn eller registrerer seg
• Fungerer som en enkelt sannhetskilde – ingen forvirring om hvem som er logget inn

Trinn 5: Koble skjemaet ditt

La oss nå koble den nye innloggingsfunksjonen din til HTML-skjemaet. Oppdater skjema-taggen din slik:

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

Hva denne lille endringen gjør:

• Stopper skjemaet fra å gjøre sin standard "last hele siden på nytt"-oppførsel
• Kaller din tilpassede JavaScript-funksjon i stedet
• Holder alt jevnt og én-sides-app-lignende
• Gir deg full kontroll over hva som skjer når brukere trykker på "Logg inn"

Trinn 6: Forbedre registreringsfunksjonen din

For konsistens, oppdater register-funksjonen din til også å lagre kontodata og navigere til dashbordet:

// Add these lines at the end of your register function
account = result;
navigate('/dashboard');

Denne forbedringen gir:

• Sømløs overgang fra registrering til dashbord
• Konsekvent brukeropplevelse mellom innlogging og registreringsflyt
• Umiddelbar tilgang til kontodata etter vellykket registrering

Testing av implementeringen

flowchart TD
    A[User enters credentials] --> B[Login function called]
    B --> C[Fetch account data from server]
    C --> D{Data received successfully?}
    D -->|Yes| E[Store account data globally]
    D -->|No| F[Display error message]
    E --> G[Navigate to dashboard]
    F --> H[User stays on login page]

Tid for å teste:

1. Opprett en ny konto for å sikre at alt fungerer
2. Prøv å logge inn med de samme legitimasjonene
3. Sjekk nettleserens konsoll (F12) hvis noe virker galt
4. Sørg for at du lander på dashbordet etter en vellykket innlogging

Hvis noe ikke fungerer, ikke få panikk! De fleste problemer er enkle å fikse, som skrivefeil eller å glemme å starte API-serveren.

Et raskt ord om Cross-Origin magi

Du lurer kanskje: "Hvordan snakker webappen min med denne API-serveren når de kjører på forskjellige porter?" Godt spørsmål! Dette berører noe som enhver webutvikler før eller siden møter.

🔒 Cross-Origin Security: Nettlesere håndhever en "same-origin policy" for å forhindre uautorisert kommunikasjon mellom forskjellige domener. Som kontrollsystemet ved Pentagon, verifiserer de at kommunikasjonen er autorisert før dataoverføring tillates.

I vår oppsett:

• Webappen din kjører på localhost:3000 (utviklingsserver)
• API-serveren din kjører på localhost:5000 (backend-server)
• API-serveren inkluderer CORS-headere som eksplisitt autoriserer kommunikasjon fra webappen din

Denne konfigurasjonen speiler virkelige utviklingsmiljøer der frontend- og backend-applikasjoner vanligvis kjører på separate servere.

📚 Lær mer: Utforsk API-er og datahenting mer inngående med dette omfattende Microsoft Learn-modulet om API-er.

Gjør dataene dine levende i HTML

Nå skal vi gjøre de hentede dataene synlige for brukerne gjennom DOM-manipulasjon. Som prosessen med å fremkalle fotografier i et mørkerom, tar vi usynlige data og gjengir dem til noe brukerne kan se og samhandle med.

DOM-manipulasjon er teknikken som forvandler statiske nettsider til dynamiske applikasjoner som oppdaterer innholdet basert på brukerinteraksjoner og serverresponser.

Velge riktig verktøy for jobben

Når det gjelder å oppdatere HTML med JavaScript, har du flere alternativer. Tenk på disse som forskjellige verktøy i en verktøykasse – hver av dem er perfekt for spesifikke oppgaver:

Metode	Hva den er bra for	Når du skal bruke den	Sikkerhetsnivå
textContent	Vise brukerdata på en sikker måte	Når du viser tekst	✅ Svært sikker
createElement() + append()	Bygge komplekse oppsett	Lage nye seksjoner/lister	✅ Svært sikker
innerHTML	Sette HTML-innhold	⚠️ Prøv å unngå denne	❌ Risikabelt

Den sikre måten å vise tekst: textContent

textContent-egenskapen er din beste venn når du viser brukerdata. Det er som å ha en dørvakt for nettsiden din – ingenting skadelig slipper gjennom:

// The safe, reliable way to update text
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

Fordeler med textContent:

• Behandler alt som ren tekst (hindrer skriptutførelse)
• Tømmer automatisk eksisterende innhold
• Effektiv for enkle tekstoppdateringer
• Gir innebygd sikkerhet mot skadelig innhold

Lage dynamiske HTML-elementer

For mer kompleks innhold, kombiner document.createElement() med metoden append():

// Safe way to create new elements
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

Forstå denne tilnærmingen:

• Oppretter nye DOM-elementer programmatisk
• Gir full kontroll over elementattributter og innhold
• Tillater komplekse, nestede elementstrukturer
• Bevarer sikkerheten ved å skille struktur fra innhold

⚠️ Sikkerhetsbetraktning: Selv om innerHTML ofte vises i mange opplæringsguider, kan det utføre innebygde skript. Akkurat som sikkerhetsprotokollene på CERN som forhindrer uautorisert kodeutførelse, gir bruk av textContent og createElement sikrere alternativer.

Risiko ved innerHTML:

• Utfører eventuelle <script>-tagger i brukerdata
• Sårbar for kodeinjeksjonsangrep
• Skaper potensielle sikkerhetsproblemer
• De sikrere alternativene vi bruker gir tilsvarende funksjonalitet

Gjøre feil brukervennlige

For øyeblikket vises innloggingsfeil bare i nettleserkonsollen, som er usynlig for brukerne. Som forskjellen mellom en pilots interne diagnostikk og passasjerinformasjonssystemet, må vi kommunisere viktig informasjon gjennom riktig kanal.

Implementering av synlige feilmeldinger gir brukerne umiddelbar tilbakemelding om hva som gikk galt og hvordan de kan gå videre.

Steg 1: Legg til et sted for feilmeldinger

La oss først gi feilmeldingene et hjem i HTML-en din. Legg til dette rett før innloggingsknappen, slik at brukerne ser det naturlig:

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

Hva som skjer her:

• Vi oppretter en tom beholder som forblir usynlig til den trengs
• Den er plassert der brukerne naturlig ser etter å ha klikket "Logg inn"
• role="alert" er en fin detalj for skjermlesere - det forteller hjelpemiddelsteknologi "hei, dette er viktig!"
• Den unike id gir JavaScript et enkelt mål

Steg 2: Lag en praktisk hjelpefunksjon

La oss lage en liten hjelpefunksjon som kan oppdatere teksten til et hvilket som helst element. Dette er en av de "skriv én gang, bruk overalt"-funksjonene som sparer deg for tid:

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

Fordeler med funksjonen:

• Enkel grensesnitt som bare krever et element-ID og tekstinnhold
• Trygt finner og oppdaterer DOM-elementer
• Gjenbrukbart mønster som reduserer kode duplisering
• Opprettholder konsistent oppdateringsadferd i hele applikasjonen

Steg 3: Vis feil der brukerne kan se dem

La oss nå erstatte den skjulte konsollmeldingen med noe brukerne faktisk kan se. Oppdater innloggingsfunksjonen din:

// Instead of just logging to console, show the user what's wrong
if (data.error) {
  return updateElement('loginError', data.error);
}

Denne lille endringen gjør en stor forskjell:

• Feilmeldinger vises der brukerne ser
• Ingen flere mystiske, stille feil
• Brukerne får umiddelbar, handlingsbar tilbakemelding
• Appen din begynner å føles profesjonell og gjennomtenkt

Nå, når du tester med en ugyldig konto, vil du se en nyttig feilmelding rett på siden!

Steg 4: Vær inkluderende med tilgjengelighet

Her er noe kult med den role="alert" vi la til tidligere - det er ikke bare dekorasjon! Denne lille attributten skaper det som kalles en Live Region som umiddelbart kunngjør endringer til skjermlesere:

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

Hvorfor dette er viktig:

• Skjermleserbrukere hører feilmeldingen så snart den vises
• Alle får den samme viktige informasjonen, uavhengig av hvordan de navigerer
• Det er en enkel måte å få appen din til å fungere for flere mennesker
• Viser at du bryr deg om å skape inkluderende opplevelser

Små detaljer som dette skiller gode utviklere fra de virkelig dyktige!

Steg 5: Bruk samme mønster på registrering

For konsistens, implementer identisk feilbehandling i registreringsskjemaet ditt:

1. Legg til et element for feilmeldinger i HTML-en for registrering:

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

2. Oppdater registreringsfunksjonen din til å bruke det samme mønsteret for feilmeldinger:

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

Fordeler med konsistent feilbehandling:

• Gir en enhetlig brukeropplevelse på alle skjemaer
• Reduserer kognitiv belastning ved å bruke kjente mønstre
• Forenkler vedlikehold med gjenbrukbar kode
• Sikrer at tilgjengelighetsstandarder oppfylles i hele appen

Lage ditt dynamiske dashbord

Nå skal vi forvandle det statiske dashbordet ditt til et dynamisk grensesnitt som viser ekte kontoinformasjon. Som forskjellen mellom en trykt flyplan og de levende avgangstavlene på flyplasser, går vi fra statisk informasjon til sanntids, responsive visninger.

Ved å bruke DOM-manipulasjonsteknikkene du har lært, skal vi lage et dashbord som oppdateres automatisk med gjeldende kontoinformasjon.

Bli kjent med dataene dine

Før vi begynner å bygge, la oss ta en titt på hva slags data serveren din sender tilbake. Når noen logger inn med suksess, her er skatten av informasjon du får tilgang til:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

Denne datastrukturen gir:

• user: Perfekt for å personliggjøre opplevelsen ("Velkommen tilbake, Sarah!")
• currency: Sørger for at vi viser pengebeløp riktig
• description: Et vennlig navn for kontoen
• balance: Den viktige nåværende saldoen
• transactions: Den komplette transaksjonshistorikken med alle detaljer

Alt du trenger for å bygge et profesjonelt utseende bankdashbord!

💡 Profftips: Vil du se dashbordet ditt i aksjon med en gang? Bruk brukernavnet test når du logger inn - det kommer forhåndslastet med eksempeldata, slik at du kan se alt fungere uten å måtte opprette transaksjoner først.

Hvorfor testkontoen er praktisk:

• Kommer med realistiske eksempeldata allerede lastet
• Perfekt for å se hvordan transaksjoner vises
• Flott for å teste dashbordfunksjonene dine
• Sparer deg fra å måtte lage dummydata manuelt

Lage dashbordets visningselementer

La oss bygge dashbordgrensesnittet ditt trinn for trinn, med start på kontosammendraget og deretter gå videre til mer komplekse funksjoner som transaksjonslister.

Steg 1: Oppdater HTML-strukturen din

Først, erstatt den statiske "Saldo"-seksjonen med dynamiske plassholderelementer som JavaScript kan fylle ut:

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

Deretter, legg til en seksjon for kontobeskrivelsen. Siden dette fungerer som en tittel for dashbordinnholdet, bruk semantisk HTML:

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

Forstå HTML-strukturen:

• Bruker separate <span>-elementer for saldo og valuta for individuell kontroll
• Tildeler unike ID-er til hvert element for JavaScript-målretting
• Følger semantisk HTML ved å bruke <h2> for kontobeskrivelsen
• Skaper en logisk hierarki for skjermlesere og SEO

✅ Tilgjengelighetsinnsikt: Kontobeskrivelsen fungerer som en tittel for dashbordinnholdet, så den er markert semantisk som en overskrift. Lær mer om hvordan overskriftsstruktur påvirker tilgjengelighet. Kan du identifisere andre elementer på siden din som kan dra nytte av overskriftstagger?

Steg 2: Lag dashbordets oppdateringsfunksjon

Lag nå en funksjon som fyller dashbordet med ekte kontodata:

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

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

Steg for steg, her er hva denne funksjonen gjør:

• Validerer at kontodata eksisterer før den fortsetter
• Omdirigerer uautentiserte brukere tilbake til innloggingssiden
• Oppdaterer kontobeskrivelsen ved hjelp av den gjenbrukbare updateElement-funksjonen
• Formaterer saldoen til alltid å vise to desimaler
• Viser riktig valutasymbol

💰 Pengeformatering: Den toFixed(2)-metoden er en livredder! Den sørger for at saldoen alltid ser ut som ekte penger - "75.00" i stedet for bare "75". Brukerne dine vil sette pris på å se kjent valutaformatering.

Steg 3: Sørg for at dashbordet oppdateres

For å sikre at dashbordet ditt oppdateres med gjeldende data hver gang noen besøker det, må vi koble det til navigasjonssystemet ditt. Hvis du fullførte leksjon 1-oppgaven, bør dette føles kjent. Hvis ikke, ingen bekymringer - her er hva du trenger:

Legg til dette på slutten av updateRoute()-funksjonen din:

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

Oppdater deretter rutene dine for å inkludere initialisering av dashbordet:

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

Hva denne smarte oppsettet gjør:

• Sjekker om en rute har spesialinitialiseringskode
• Kjører den koden automatisk når ruten lastes
• Sørger for at dashbordet alltid viser ferske, oppdaterte data
• Holder logikken for ruting ren og organisert

Teste dashbordet ditt

Etter å ha implementert disse endringene, test dashbordet ditt:

1. Logg inn med en testkonto
2. Bekreft at du blir omdirigert til dashbordet
3. Sjekk at kontobeskrivelsen, saldoen og valutaen vises riktig
4. Prøv å logge ut og inn igjen for å sikre at dataene oppdateres riktig

Dashbordet ditt skal nå vise dynamisk kontoinformasjon som oppdateres basert på dataene til den innloggede brukeren!

Bygge smarte transaksjonslister med maler

I stedet for å manuelt lage HTML for hver transaksjon, skal vi bruke maler for å generere konsistent formatering automatisk. Som de standardiserte komponentene som brukes i romfartsproduksjon, sikrer maler at hver transaksjonsrad følger samme struktur og utseende.

Denne teknikken skalerer effektivt fra noen få transaksjoner til tusenvis, og opprettholder konsistent ytelse og presentasjon.

flowchart LR
    A[Transaction Data] --> B[HTML Template]
    B --> C[Clone Template]
    C --> D[Populate with Data]
    D --> E[Add to DOM]
    E --> F[Repeat for Each Transaction]

Steg 1: Lag transaksjonsmalen

Legg først til en gjenbrukbar mal for transaksjonsrader i HTML-ens <body>:

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

Forstå HTML-maler:

• Definerer strukturen for en enkelt tabellrad
• Forblir usynlig til den klones og fylles ut med JavaScript
• Inkluderer tre celler for dato, beskrivelse og beløp
• Gir et gjenbrukbart mønster for konsistent formatering

Steg 2: Forbered tabellen din for dynamisk innhold

Legg deretter til en id til tabellkroppen, slik at JavaScript enkelt kan målrette den:

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

Hva dette oppnår:

• Skaper et klart mål for å sette inn transaksjonsrader
• Skiller tabellstrukturen fra det dynamiske innholdet
• Muliggjør enkel fjerning og gjeninnsetting av transaksjonsdata

Steg 3: Bygg fabrikkfunksjonen for transaksjonsrader

Lag nå en funksjon som transformerer transaksjonsdata til HTML-elementer:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

Bryter ned denne fabrikkfunksjonen:

• Henter mal-elementet ved hjelp av ID-en
• Kloner malinnholdet for sikker manipulering
• Velger tabellraden innenfor det klonede innholdet
• Fyller hver celle med transaksjonsdata
• Formaterer beløpet til å vise riktige desimaler
• Returnerer den ferdige raden klar for innsetting

Steg 4: Generer flere transaksjonsrader effektivt

Legg til denne koden i updateDashboard()-funksjonen din for å vise alle transaksjoner:

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

Forstå denne effektive tilnærmingen:

• Oppretter et dokumentfragment for å samle DOM-operasjoner
• Itererer gjennom alle transaksjoner i kontodataene
• Genererer en rad for hver transaksjon ved hjelp av fabrikkfunksjonen
• Samler alle rader i fragmentet før de legges til i DOM-en
• Utfører en enkelt DOM-oppdatering i stedet for flere individuelle innsettinger

⚡ Ytelsesoptimalisering: document.createDocumentFragment() fungerer som monteringsprosessen hos Boeing - komponenter forberedes utenfor hovedlinjen, og installeres deretter som en komplett enhet. Denne batch-tilnærmingen minimerer DOM-omforminger ved å utføre en enkelt innsetting i stedet for flere individuelle operasjoner.

Steg 5: Forbedre oppdateringsfunksjonen for blandet innhold

Din updateElement()-funksjon håndterer for øyeblikket bare tekstinnhold. Oppdater den til å fungere med både tekst og DOM-noder:

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

Viktige forbedringer i denne oppdateringen:

• Fjerner eksisterende innhold før nytt innhold legges til
• Godtar enten tekststrenger eller DOM-noder som parametere
• Bruker metoden append() for fleksibilitet
• Opprettholder bakoverkompatibilitet med eksisterende tekstbasert bruk

Teste dashbordet ditt

Tid for sannhetens øyeblikk! La oss se det dynamiske dashbordet ditt i aksjon:

1. Logg inn med testkontoen (den har eksempeldata klare til bruk)
2. Naviger til dashbordet ditt
3. Sjekk at transaksjonsradene vises med riktig formatering
4. Sørg for at datoer, beskrivelser og beløp ser bra ut

Hvis alt fungerer, bør du se en fullt funksjonell transaksjonsliste på dashbordet ditt! 🎉

Hva du har oppnådd:

• Bygget et dashbord som skalerer med hvilken som helst mengde data
• Laget gjenbrukbare maler for konsistent formatering
• Implementert effektive DOM-manipulasjonsteknikker
• Utviklet funksjonalitet som kan sammenlignes med produksjonsbankapplikasjoner

Du har med suksess forvandlet en statisk nettside til en dynamisk webapplikasjon.

---

GitHub Copilot Agent Challenge 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Forbedre bankappen ved å implementere en søke- og filtreringsfunksjon for transaksjoner som lar brukere finne spesifikke transaksjoner basert på datointervall, beløp eller beskrivelse. Prompt: Lag en søkefunksjon for bankappen som inkluderer: 1) Et søkeskjema med inputfelt for datointervall (fra/til), minimum/maksimum beløp og nøkkelord for transaksjonsbeskrivelse, 2) En filterTransactions()-funksjon som filtrerer account.transactions-arrayet basert på søkekriteriene, 3) Oppdater updateDashboard()-funksjonen for å vise filtrerte resultater, og 4) Legg til en "Tøm filtre"-knapp for å tilbakestille visningen. Bruk moderne JavaScript-arraymetoder som filter() og håndter spesialtilfeller for tomme søkekriterier.

Lær mer om agent mode her.

🚀 Utfordring

Klar for å ta bankappen din til neste nivå? La oss gjøre den til noe du faktisk har lyst til å bruke. Her er noen ideer for å inspirere kreativiteten din:

Gjør den vakker: Legg til CSS-styling for å forvandle det funksjonelle dashbordet til noe visuelt tiltalende. Tenk rene linjer, god avstand og kanskje til og med noen subtile animasjoner.

Gjør den responsiv: Prøv å bruke media queries for å lage et responsivt design som fungerer bra på telefoner, nettbrett og datamaskiner. Brukerne dine vil takke deg!

Legg til litt stil: Vurder å fargekode transaksjoner (grønn for inntekt, rød for utgifter), legge til ikoner eller lage hover-effekter som gjør grensesnittet mer interaktivt.

Slik kan et polert dashbord se ut:

Du trenger ikke å matche dette nøyaktig - bruk det som inspirasjon og gjør det til ditt eget!

Quiz etter forelesning

Quiz etter forelesning

Oppgave

Refaktorer og kommenter koden din

---

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.