43 KiB

Raw Blame History Unescape Escape

Изградња апликације за банкарство, део 3: Методе за преузимање и коришћење података

Замислите рачунар на Ентерпрајзу из Стар Трека - када капетан Пикард затражи статус брода, информације се појављују тренутно, без гашења целог интерфејса и његовог поновног учитавања. Управо тај беспрекорни ток информација је оно што овде градимо са динамичким преузимањем података.

Тренутно, ваша апликација за банкарство је као штампане новине - информативна, али статична. Претворићемо је у нешто налик контролном центру НАСА-е, где подаци континуирано теку и ажурирају се у реалном времену, без прекидања корисничког рада.

Научићете како да комуницирате са серверима асинхроно, како да обрађујете податке који стижу у различито време и како да трансформишете сирове информације у нешто значајно за ваше кориснике. Ово је разлика између демонстрације и софтвера спремног за употребу.

Квиз пре предавања

Предуслови

Пре него што се упустите у преузимање података, уверите се да имате следеће компоненте спремне:

Претходна лекција: Завршите Формулар за пријаву и регистрацију - наставићемо на основу овога
Локални сервер: Инсталирајте Node.js и покрените сервер API за пружање података о рачуну
API конекција: Тестирајте вашу серверску конекцију овом командом:

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

Овај брзи тест осигурава да сви делови комуницирају исправно:

Потврђује да Node.js исправно ради на вашем систему
Проверава да ли је ваш API сервер активан и одговара
Верификује да ваша апликација може да се повеже са сервером (као провера радио контакта пре мисије)

Разумевање преузимања података у модерним веб апликацијама

Начин на који веб апликације обрађују податке драматично се развио током последње две деценије. Разумевање ове еволуције помоћи ће вам да цените зашто су модерне технике као што су AJAX и Fetch API толико моћне и зашто су постале суштински алати за веб програмере.

Хајде да истражимо како су традиционални веб-сајтови функционисали у поређењу са динамичним, одзивним апликацијама које данас градимо.

Традиционалне апликације са више страница (MPA)

У раним данима веба, сваки клик је био као мењање канала на старом телевизору - екран би се угасио, а затим полако пребацио на нови садржај. То је била реалност раних веб апликација, где је свака интеракција значила потпуно поновно учитавање целе странице.

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)

Зашто је овај приступ био незграпан:

Сваки клик је значио поновно учитавање целе странице
Корисници су били прекидани у размишљању због тих досадних трептаја странице
Ваша интернет конекција је радила прековремено, преузимајући исти заглавље и подножје изнова и изнова
Апликације су више личиле на прелиставање фиоке него на коришћење софтвера

Модерне апликације са једном страницом (SPA)

AJAX (Асинхрони ЈаваСкрипт и XML) је потпуно променио овај парадигму. Као модуларни дизајн Међународне свемирске станице, где астронаути могу заменити појединачне компоненте без поновног изградње целе структуре, AJAX нам омогућава да ажурирамо одређене делове веб странице без поновног учитавања свега. Иако име помиње XML, данас углавном користимо JSON, али основни принцип остаје исти: ажурирајте само оно што треба да се промени.

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)

Зашто SPA апликације делују боље:

Ажурирају се само делови који су се стварно променили (паметно, зар не?)
Нема више неугодних прекида - ваши корисници остају у свом току
Мање података путује мрежом, што значи брже учитавање
Све делује брзо и одзивно, као апликације на вашем телефону

Еволуција ка модерном Fetch API

Модерни претраживачи пружају Fetch API, који замењује старији XMLHttpRequest. Као разлика између управљања телеграфом и коришћења е-поште, Fetch API користи промисе за чистији асинхрони код и природно обрађује JSON.

Карактеристика	XMLHttpRequest	Fetch API
Синтакса	Комплексна, заснована на повратним позивима	Чиста, заснована на промисама
Обрада JSON-а	Потребно ручно парсирање	Уграђена метода `.json()`
Обрада грешака	Ограничене информације о грешкама	Детаљне информације о грешкама
Модерна подршка	Компатибилност са старим верзијама	ES6+ промисе и async/await

💡 Компатибилност претраживача: Добра вест - Fetch API ради у свим модерним претраживачима! Ако сте радознали о специфичним верзијама, caniuse.com има комплетну причу о компатибилности.

Суштина:

Одлично ради у Chrome, Firefox, Safari и Edge (у основи свуда где су ваши корисници)
Само Internet Explorer захтева додатну помоћ (и искрено, време је да се опростимо од IE)
Савршено вас припрема за елегантне async/await шаблоне које ћемо касније користити

Имплементација пријаве корисника и преузимања података

Сада ћемо имплементирати систем пријаве који трансформише вашу апликацију за банкарство из статичног приказа у функционалну апликацију. Као протоколи за аутентификацију који се користе у сигурним војним објектима, проверићемо корисничке акредитиве и затим омогућити приступ њиховим специфичним подацима.

Градићемо ово постепено, почевши од основне аутентификације, а затим додајући могућности преузимања података.

Корак 1: Креирање основе функције за пријаву

Отворите ваш app.js фајл и додајте нову функцију login. Ова функција ће обрађивати процес аутентификације корисника:

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

Разложимо ово:

Та кључна реч async? Она говори ЈаваСкрипту "хеј, ова функција можда треба да сачека неке ствари"
Проналазимо наш формулар на страници (ништа посебно, само га проналазимо по његовом ID-у)
Затим извлачимо оно што је корисник укуцао као своје корисничко име
Ево једног лепог трика: можете приступити било којем уносу формулара преко његовог name атрибута - нема потребе за додатним позивима getElementById!

💡 Шаблон за приступ формулару: Сваком контролном елементу формулара може се приступити преко његовог имена (постављеног у HTML-у помоћу атрибута name) као својству елемента формулара. Ово пружа чист и читљив начин за добијање података из формулара.

Корак 2: Креирање функције за преузимање података о рачуну

Затим ћемо креирати посебну функцију за преузимање података о рачуну са сервера. Ово следи исти шаблон као ваша функција за регистрацију, али се фокусира на преузимање података:

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

Шта овај код постиже:

Користи модерни fetch API за асинхроно захтевање података
Конструише URL GET захтева са параметром корисничког имена
Примењује encodeURIComponent() за сигурно руковање специјалним карактерима у URL-овима
Претвара одговор у JSON формат за лаку манипулацију подацима
Обрађује грешке на елегантан начин, враћајући објекат грешке уместо да се апликација сруши

⚠️ Напомена о безбедности: Функција encodeURIComponent() обрађује специјалне карактере у URL-овима. Као системи кодирања који се користе у поморским комуникацијама, она осигурава да ваша порука стигне тачно онако како је намењена, спречавајући да се карактери попут "#" или "&" погрешно интерпретирају.

Зашто је ово важно:

Спречава да специјални карактери прекину URL-ове
Штити од напада манипулације URL-овима
Осигурава да ваш сервер добије намењене податке
Практикује сигурно кодирање

Разумевање HTTP GET захтева

Ево нечега што вас може изненадити: када користите fetch без додатних опција, он аутоматски креира GET захтев. Ово је савршено за оно што радимо - питамо сервер "хеј, могу ли да видим податке о рачуну овог корисника?"

Размислите о GET захтевима као о љубазном тражењу позајмљивања књиге из библиотеке - тражите да видите нешто што већ постоји. POST захтеви (које смо користили за регистрацију) су више као подношење нове књиге да се дода у колекцију.

GET захтев	POST захтев
Сврха	Преузимање постојећих података
Параметри	У URL путањи/низу упита
Кеширање	Може бити кеширано од стране претраживача
Безбедност	Видљиво у URL-у/логовима

Корак 3: Спајање свега

Сада долазимо до задовољавајућег дела - повежимо вашу функцију за преузимање података о рачуну са процесом пријаве. Овде се све уклапа:

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

Ова функција следи јасан низ:

Извлачи корисничко име из уноса формулара
Захтева податке о рачуну корисника са сервера
Обрађује све грешке које се јаве током процеса
Чува податке о рачуну и прелази на контролни панел након успешне пријаве

🎯 Шаблон async/await: Пошто је getAccount асинхрона функција, користимо кључну реч await да паузирамо извршење док сервер не одговори. Ово спречава да код настави са неодређеним подацима.

Корак 4: Креирање места за ваше податке

Вашој апликацији је потребно место где ће памтити информације о рачуну након што их учита. Размислите о овоме као о краткорочној меморији ваше апликације - месту где се чувају подаци тренутног корисника. Додајте ову линију на врх вашег app.js фајла:

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

Зашто нам је ово потребно:

Чува податке о рачуну доступним са било ког места у вашој апликацији
Почетак са null значи "нико још није пријављен"
Ажурира се када се неко успешно пријави или региструје
Делује као један извор истине - нема конфузије око тога ко је пријављен

Корак 5: Повезивање вашег формулара

Сада повежимо вашу нову функцију за пријаву са вашим HTML формуларом. Ажурирајте ваш формулар овако:

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

Шта ова мала промена ради:

Спречава формулар да ради своје подразумевано "поново учитај целу страницу" понашање
Позива вашу прилагођену ЈаваСкрипт функцију уместо тога
Одржава све глатко и у стилу апликације са једном страницом
Даје вам потпуну контролу над оним што се дешава када корисници притисну "Пријави се"

Корак 6: Унапређење функције за регистрацију

Ради доследности, ажурирајте вашу функцију register тако да такође чува податке о рачуну и прелази на контролни панел:

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

Ово унапређење пружа:

Беспрекорну транзицију од регистрације до контролне табле
Доследно корисничко искуство између процеса пријаве и регистрације
Тренутни приступ подацима о рачуну након успешне регистрације

Тестирање ваше имплементације

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]

Време је да испробате:

Креирајте нови налог да бисте се уверили да све функционише
Покушајте да се пријавите са истим акредитивима
Погледајте конзолу вашег претраживача (F12) ако нешто изгледа погрешно
Уверите се да сте стигли на контролни панел након успешне пријаве

Ако нешто не функционише, не паничите! Већина проблема се лако решава, као што су правописне грешке или заборављање да се покрене API сервер.

Брза реч о магији прекограничне комуникације

Можда се питате: "Како моја веб апликација комуницира са овим API сервером када раде на различитим портовима?" Одлично питање! Ово се односи на нешто са чиме се сваки веб програмер пре или касније сусретне.

🔒 Безбедност прекограничне комуникације: Претраживачи примењују "политику истог порекла" како би спречили неовлашћену комуникацију између различитих домена. Као систем контроле приступа у Пентагону, они проверавају да ли је комуникација овлашћена пре него што дозволе пренос података.

У нашем подешавању:

Ваша веб апликација ради на localhost:3000 (развојни сервер)
Ваш API сервер ради на localhost Za složeniji sadržaj, kombinujte [document.createElement()](https://developer.mozilla.org/docs/Web/API/Document/createElement) sa metodom [append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/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);

Razumevanje ovog pristupa:

Kreira nove DOM elemente programatski
Omogućava potpunu kontrolu nad atributima i sadržajem elemenata
Dozvoljava složene, ugnježdene strukture elemenata
Čuva sigurnost razdvajanjem strukture od sadržaja

⚠️ Bezbednosni aspekt: Iako se innerHTML često pojavljuje u tutorijalima, može izvršavati ugrađene skripte. Kao što bezbednosni protokoli u CERN-u sprečavaju neovlašćeno izvršavanje koda, korišćenje textContent i createElement pruža sigurnije alternative.

Rizici korišćenja innerHTML:

Izvršava sve <script> tagove u korisničkim podacima
Podložan napadima ubrizgavanja koda
Stvara potencijalne bezbednosne ranjivosti
Sigurnije alternative koje koristimo pružaju ekvivalentnu funkcionalnost

Pravljenje grešaka korisnicima razumljivim

Trenutno se greške pri prijavi pojavljuju samo u konzoli pretraživača, što je nevidljivo korisnicima. Kao razlika između unutrašnje dijagnostike pilota i sistema informisanja putnika, potrebno je da važne informacije komuniciramo kroz odgovarajući kanal.

Implementacija vidljivih poruka o greškama pruža korisnicima trenutne povratne informacije o tome šta je pošlo naopako i kako da nastave dalje.

Korak 1: Dodajte mesto za poruke o greškama

Prvo, dodajte mesto za poruke o greškama u vaš HTML. Dodajte ovo odmah pre dugmeta za prijavu kako bi korisnici to prirodno videli:

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

Šta se ovde dešava:

Kreiramo prazan kontejner koji ostaje nevidljiv dok ne bude potreban
Postavljen je tamo gde korisnici prirodno gledaju nakon klika na "Prijavi se"
Taj role="alert" je lep dodatak za čitače ekrana - govori asistivnoj tehnologiji "hej, ovo je važno!"
Jedinstveni id omogućava jednostavno ciljanje našeg JavaScripta

Korak 2: Kreirajte korisnu pomoćnu funkciju

Napravimo malu pomoćnu funkciju koja može ažurirati tekst bilo kog elementa. Ovo je jedna od onih funkcija "napiši jednom, koristi svuda" koje će vam uštedeti vreme:

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

Prednosti funkcije:

Jednostavan interfejs koji zahteva samo ID elementa i tekstualni sadržaj
Sigurno pronalazi i ažurira DOM elemente
Ponovno upotrebljiv obrazac koji smanjuje dupliranje koda
Održava dosledno ponašanje ažuriranja u aplikaciji

Korak 3: Prikazivanje grešaka tamo gde ih korisnici mogu videti

Sada zamenimo tu skrivenu poruku u konzoli nečim što korisnici zaista mogu videti. Ažurirajte vašu funkciju za prijavu:

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

Ova mala promena pravi veliku razliku:

Poruke o greškama se pojavljuju tačno tamo gde korisnici gledaju
Nema više misterioznih tihih grešaka
Korisnici dobijaju trenutne, korisne povratne informacije
Vaša aplikacija počinje da deluje profesionalno i promišljeno

Sada, kada testirate sa nevažećim nalogom, videćete korisnu poruku o grešci direktno na stranici!

Korak 4: Biti inkluzivan sa pristupačnošću

Evo nečeg zanimljivog u vezi sa role="alert" koji smo ranije dodali - to nije samo dekoracija! Ovaj mali atribut stvara ono što se zove Live Region koji odmah najavljuje promene čitačima ekrana:

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

Zašto je ovo važno:

Korisnici čitača ekrana čuju poruku o grešci čim se pojavi
Svi dobijaju iste važne informacije, bez obzira na način navigacije
Jednostavan način da vaša aplikacija funkcioniše za više ljudi
Pokazuje da vam je stalo do stvaranja inkluzivnih iskustava

Male stvari poput ove razlikuju dobre programere od sjajnih!

Korak 5: Primena istog obrasca na registraciju

Radi doslednosti, implementirajte identično rukovanje greškama u vašem obrascu za registraciju:

Dodajte element za prikaz grešaka u vaš HTML za registraciju:

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

Ažurirajte vašu funkciju za registraciju da koristi isti obrazac za prikaz grešaka:

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

Prednosti doslednog rukovanja greškama:

Pruža uniformno korisničko iskustvo na svim obrascima
Smanjuje kognitivno opterećenje korišćenjem poznatih obrazaca
Pojednostavljuje održavanje sa ponovo upotrebljivim kodom
Osigurava da se standardi pristupačnosti poštuju u celoj aplikaciji

Kreiranje dinamičke kontrolne table

Sada ćemo transformisati vašu statičku kontrolnu tablu u dinamički interfejs koji prikazuje stvarne podatke o nalogu. Kao razlika između štampanog rasporeda letova i živih tabli sa polascima na aerodromima, prelazimo sa statičnih informacija na prikaze u realnom vremenu.

Koristeći tehnike manipulacije DOM-om koje ste naučili, kreiraćemo kontrolnu tablu koja se automatski ažurira sa trenutnim informacijama o nalogu.

Upoznavanje sa vašim podacima

Pre nego što počnemo sa izradom, zavirimo u vrstu podataka koje vaš server šalje nazad. Kada se neko uspešno prijavi, evo blaga informacija sa kojima možete raditi:

{
  "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 }
  ]
}

Ova struktura podataka pruža:

user: Savršeno za personalizaciju iskustva ("Dobrodošli nazad, Sara!")
currency: Osigurava da pravilno prikazujemo iznose novca
description: Prijateljski naziv za nalog
balance: Veoma važan trenutni saldo
transactions: Kompletna istorija transakcija sa svim detaljima

Sve što vam je potrebno za izradu profesionalne kontrolne table za bankarstvo!

💡 Profesionalni savet: Želite li odmah videti vašu kontrolnu tablu u akciji? Koristite korisničko ime test kada se prijavljujete - dolazi unapred učitano sa uzorcima podataka kako biste mogli videti kako sve funkcioniše bez potrebe da prvo kreirate transakcije.

Zašto je test nalog koristan:

Dolazi sa realističnim uzorcima podataka koji su već učitani
Savršen za pregled kako se transakcije prikazuju
Odličan za testiranje funkcija vaše kontrolne table
Štedi vas od ručnog kreiranja lažnih podataka

Kreiranje elemenata za prikaz na kontrolnoj tabli

Izgradimo interfejs vaše kontrolne table korak po korak, počevši od informacija o sažetku naloga, a zatim prelazeći na složenije funkcije poput lista transakcija.

Korak 1: Ažurirajte strukturu vašeg HTML-a

Prvo, zamenite statički odeljak "Saldo" dinamičkim elementima rezervisanim za popunjavanje od strane vašeg JavaScripta:

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

Zatim dodajte odeljak za opis naloga. Pošto ovo funkcioniše kao naslov za sadržaj kontrolne table, koristite semantički HTML:

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

Razumevanje HTML strukture:

Koristi odvojene <span> elemente za saldo i valutu radi pojedinačne kontrole
Primjenjuje jedinstvene ID-ove na svaki element radi ciljanja JavaScripta
Prati semantički HTML koristeći <h2> za opis naloga
Stvara logičnu hijerarhiju za čitače ekrana i SEO

✅ Uvid u pristupačnost: Opis naloga funkcioniše kao naslov za sadržaj kontrolne table, pa je označen semantički kao zaglavlje. Saznajte više o tome kako struktura zaglavlja utiče na pristupačnost. Možete li identifikovati druge elemente na vašoj stranici koji bi mogli imati koristi od oznaka zaglavlja?

Korak 2: Kreirajte funkciju za ažuriranje kontrolne table

Sada kreirajte funkciju koja popunjava vašu kontrolnu tablu stvarnim podacima o nalogu:

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

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

Korak po korak, evo šta ova funkcija radi:

Proverava da li podaci o nalogu postoje pre nego što nastavi
Preusmerava neautentifikovane korisnike nazad na stranicu za prijavu
Ažurira opis naloga koristeći ponovo upotrebljivu funkciju updateElement
Formatira saldo tako da uvek prikazuje dve decimale
Prikazuje odgovarajući simbol valute

💰 Formatiranje novca: Taj metod toFixed(2) je spas! Osigurava da vaš saldo uvek izgleda kao pravi novac - "75.00" umesto samo "75". Vaši korisnici će ceniti što vide poznato formatiranje valute.

Korak 3: Osigurajte da se vaša kontrolna tabla ažurira

Da biste osigurali da se vaša kontrolna tabla osvežava sa trenutnim podacima svaki put kada je neko poseti, potrebno je da se povežete sa vašim navigacionim sistemom. Ako ste završili zadatak iz lekcije 1, ovo bi trebalo da vam bude poznato. Ako ne, ne brinite - evo šta vam je potrebno:

Dodajte ovo na kraj vaše funkcije updateRoute():

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

Zatim ažurirajte vaše rute da uključuju inicijalizaciju kontrolne table:

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

Šta ovaj pametan pristup radi:

Proverava da li ruta ima specijalni kod za inicijalizaciju
Automatski pokreće taj kod kada se ruta učita
Osigurava da vaša kontrolna tabla uvek prikazuje sveže, trenutne podatke
Održava logiku rutiranja čistom i organizovanom

Testiranje vaše kontrolne table

Nakon implementacije ovih promena, testirajte vašu kontrolnu tablu:

Prijavite se sa test nalogom
Proverite da ste preusmereni na kontrolnu tablu
Proverite da se opis naloga, saldo i valuta pravilno prikazuju
Pokušajte da se odjavite i ponovo prijavite kako biste osigurali da se podaci pravilno osvežavaju

Vaša kontrolna tabla sada treba da prikazuje dinamične informacije o nalogu koje se ažuriraju na osnovu podataka prijavljenog korisnika!

Kreiranje pametnih lista transakcija pomoću šablona

Umesto ručnog kreiranja HTML-a za svaku transakciju, koristićemo šablone za automatsko generisanje doslednog formatiranja. Kao standardizovane komponente koje se koriste u proizvodnji svemirskih letelica, šabloni osiguravaju da svaki red transakcije prati istu strukturu i izgled.

Ova tehnika efikasno se skalira od nekoliko transakcija do hiljada, održavajući dosledne performanse i prezentaciju.

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]

Korak 1: Kreirajte šablon za transakcije

Prvo, dodajte ponovo upotrebljiv šablon za redove transakcija u vaš HTML <body>:

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

Razumevanje HTML šablona:

Definiše strukturu za jedan red tabele
Ostaje nevidljiv dok se ne klonira i popuni pomoću JavaScripta
Sadrži tri ćelije za datum, opis i iznos
Pruža ponovo upotrebljiv obrazac za dosledno formatiranje

Korak 2: Pripremite vašu tabelu za dinamički sadržaj

Zatim dodajte id telu vaše tabele kako bi JavaScript mogao lako da ga cilja:

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

Šta ovo postiže:

Stvara jasan cilj za umetanje redova transakcija
Razdvaja strukturu tabele od dinamičkog sadržaja
Omogućava lako čišćenje i ponovno popunjavanje podataka o transakcijama

Korak 3: Napravite funkciju za kreiranje redova transakcija

Sada kreirajte funkciju koja transformiše podatke o transakcijama u HTML elemente:

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

Razlaganje ove funkcije:

Preuzima element šablona po njegovom ID-u
Kloni sadržaj šablona za sigurno manipulisanje
Odabire red tabele unutar kloniranog sadržaja
Popunjava svaku ćeliju podacima o transakcijama
Formatira iznos tako da prikazuje odgovarajuće decimale
Vraća kompletan red spreman za umetanje

Korak 4: Efikasno generisanje više redova transakcija

Dodajte ovaj kod u vašu funkciju updateDashboard() kako biste prikazali sve transakcije:

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

Razumevanje ovog efikasnog pristupa:

Kreira fragment dokumenta za grupne operacije na DOM-u
Iterira kroz sve transakcije u podacima o nalogu
Generiše red za svaku transakciju koristeći funkciju za kreiranje redova
Sakuplja sve redove u fragment pre dodavanja u DOM
Izvršava jedno ažuriranje DOM-a umesto više pojedinačnih umetanja

⚡ Optimizacija performansi: document.createDocumentFragment() funkcioniše kao proces montaže u Boingu - komponente se pripremaju van glavne linije, a zatim se instaliraju kao kompletna jedinica. Ovaj pristup grupisanja minimizira ponovne tokove DOM-a izvršavanjem jednog umetanja umesto više pojedinačnih operacija.

Korak 5: Poboljšajte funkciju za ažuriranje za mešoviti sadržaj

Vaša funkcija updateElement() trenutno obrađuje samo tekstualni sadržaj. Ažurirajte je da radi i sa tekstom i sa DOM čvorovima:

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

Ključna poboljšanja u ovom ažuriranju:

Čisti postojeći sadržaj pre dodavanja novog
Prihvata ili tekstualne stringove ili DOM čvorove kao parametre
Koristi metodu append() za fleksibilnost
Održava kompatibilnost unazad sa postojećom upotrebom zasnovanom na tekstu

Testiranje vaše kontrolne table

Vreme je za trenutak istine! Pogledajmo vašu dinamičku kontrolnu tablu u akciji:

Prijavite se koristeći nalog test (ima uzorke podataka spremne za upotrebu)
Navigirajte do vaše kontrolne table
Proverite da se redovi transakcija pojavljuju sa pravilnim formatiranjem
Uverite se da datumi, opisi i iznosi izgledaju dobro

Ako sve funkcioniše, trebalo bi da vidite potpuno funkcionalnu listu transakcija na vašoj kontrolnoj tabli! 🎉

Šta ste postigli:

Izgradili ste kontrolnu tablu koja se skalira sa bilo kojom količinom podataka
Kreirali ste ponovo upotrebljive šablone za dosledno formatiranje
Implementirali ste efikasne tehnike manipulacije DOM-om
Razvili ste funkcionalnost uporedivu sa aplikacijama za bankarstvo u produkciji

Uspešno ste transformisali statičnu veb stranicu u dinamičku veb aplikaciju.

Izazov za

Подстицај: Направите функционалност претраге за апликацију за банкарство која укључује: 1) Формулар за претрагу са пољима за унос опсега датума (од/до), минималног/максималног износа и кључних речи за опис трансакције, 2) Функцију filterTransactions() која филтрира низ account.transactions на основу критеријума претраге, 3) Ажурирајте функцију updateDashboard() да приказује филтриране резултате, и 4) Додајте дугме "Очисти филтере" за ресетовање приказа. Користите савремене JavaScript методе за низове као што је filter() и обрадите граничне случајеве за празне критеријуме претраге.

Сазнајте више о режиму агента овде.

🚀 Изазов

Спремни да подигнете вашу апликацију за банкарство на виши ниво? Хајде да је учинимо привлачном и функционалном. Ево неких идеја које могу да вас инспиришу:

Учини је лепом: Додајте CSS стилове да трансформишете ваш функционални контролни панел у нешто визуелно привлачно. Размислите о чистим линијама, добром размаку и можда чак и суптилним анимацијама.

Учини је прилагодљивом: Покушајте да користите медијске упите за креирање прилагодљивог дизајна који одлично функционише на телефонима, таблетима и десктоп рачунарима. Ваши корисници ће вам бити захвални!

Додајте мало шарма: Размислите о бојама за трансакције (зелена за приходе, црвена за трошкове), додавању икона или креирању ефеката приликом преласка мишем који чине интерфејс интерактивним.

Ево како би изгледао један углађен контролни панел:

Не морате да га копирате тачно - користите га као инспирацију и направите нешто своје!

Квиз након предавања

Задатак

Рефакторишите и коментаришите ваш код

Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

43 KiB Raw Blame History Unescape Escape

Изградња апликације за банкарство, део 3: Методе за преузимање и коришћење података

Квиз пре предавања

Предуслови

Разумевање преузимања података у модерним веб апликацијама

Традиционалне апликације са више страница (MPA)

Модерне апликације са једном страницом (SPA)

Еволуција ка модерном Fetch API

Имплементација пријаве корисника и преузимања података

Корак 1: Креирање основе функције за пријаву

Корак 2: Креирање функције за преузимање података о рачуну

Разумевање HTTP GET захтева

Корак 3: Спајање свега

Корак 4: Креирање места за ваше податке

Корак 5: Повезивање вашег формулара

Корак 6: Унапређење функције за регистрацију

Тестирање ваше имплементације

Брза реч о магији прекограничне комуникације

Pravljenje grešaka korisnicima razumljivim

Korak 1: Dodajte mesto za poruke o greškama

Korak 2: Kreirajte korisnu pomoćnu funkciju

Korak 3: Prikazivanje grešaka tamo gde ih korisnici mogu videti

Korak 4: Biti inkluzivan sa pristupačnošću

Korak 5: Primena istog obrasca na registraciju

Kreiranje dinamičke kontrolne table

Upoznavanje sa vašim podacima

Kreiranje elemenata za prikaz na kontrolnoj tabli

Korak 1: Ažurirajte strukturu vašeg HTML-a

Korak 2: Kreirajte funkciju za ažuriranje kontrolne table

Korak 3: Osigurajte da se vaša kontrolna tabla ažurira

Testiranje vaše kontrolne table

Kreiranje pametnih lista transakcija pomoću šablona

Korak 1: Kreirajte šablon za transakcije

Korak 2: Pripremite vašu tabelu za dinamički sadržaj

Korak 3: Napravite funkciju za kreiranje redova transakcija

Korak 4: Efikasno generisanje više redova transakcija

Korak 5: Poboljšajte funkciju za ažuriranje za mešoviti sadržaj

Testiranje vaše kontrolne table

Izazov za

🚀 Изазов

Квиз након предавања

Задатак

43 KiB

Raw Blame History Unescape Escape