✦ Razvoj veb aplikacija uz Django Kako delovi aplikacije sarađuju

L3 · Koncept 06 · Osnove veba

Jedna stranica projekta.
Nekoliko važnih uloga.

Tvoj Project Hub može izgledati potpuno uz HTML i CSS. Sada isprati jedan zahtev za <code>/projects/</code> da vidiš zašto dinamičkoj aplikaciji trebaju backend logika i sačuvani podaci.

Cilj učenjaObjasni šta rade frontend, backend i baza podataka; isprati zahtev za /projects/; i objasni zašto HTML i CSS nisu dovoljni kada se podaci projekta menjaju.

01 Upoznaj uloge02 Prati tok podataka03 Proveri razumevanje

Prati jednu stvarnu ideju

Prati Project Hub od klika do kartica projekata

Čitaj svaki korak redom. Zahtev putuje ka backendu; podaci se mogu vratiti iz baze podataka; odgovor putuje nazad do pregledača.

1KorisnikKlikne na link Projects.
2Pregledač / frontendŠalje zahtev za /projects/.
3BackendPrima zahtev.
4BackendOdlučuje da su mu potrebni sačuvani podaci projekta.
5Baza podatakaVraća sačuvane podatke projekta koje je backend zatražio.
6BackendKoristi te podatke da pripremi odgovor.
7Pregledač / frontendPrima odgovor.
8Pregledač / frontendPrikazuje kartice projekata iz odgovora.
9KorisnikVidi kartice projekata na stranici.

Smer je važan: zahtev ide od pregledača ka backendu. Backend po potrebi dobija podatke iz baze podataka. Odgovor zatim ide od backenda nazad do pregledača.

Podaci mogu putovati i u drugom smeru

Kada korisnik pravi novi projekat, isti tim ima drugačiji zadatak. Ovo je konceptualni tok; o formularima ćeš učiti kasnije.

Unesi podatkeKorisnik unosi podatke o projektu u frontend.
Pošalji i proveriBackend prima podatke i proverava šta treba da se dogodi.
SačuvajBackend traži od baze podataka da sačuva projekat.
Prikaži rezultatOdgovor se vraća, a pregledač prikazuje rezultat.

Ko je odgovoran za šta?

Pokušaj da razvrstaš posao pre nego što pročitaš odgovor. Cilj je da razmišljaš o odgovornosti, a ne da pamtiš oznake.

Učini karticu projekta plavom.

Frontend / CSSCSS kontroliše kako stranica izgleda.

Odluči koje projekte ovaj korisnik sme da vidi.

BackendAplikaciona logika donosi ovu odluku.

Zapamti naslov projekta za sutra.

Baza podatakaTrajno skladište čuva podatke aplikacije.

Prikaži vraćeni naslov projekta na stranici.

FrontendPregledač prikazuje odgovor korisniku.

Primi <code>/projects/</code> i odluči koji su podaci potrebni.

BackendObrađuje zahtev i usklađuje sledeći posao.

Sačuvaj 500 zapisa o projektima.

Baza podatakaČuva i organizuje sačuvane zapise.

01 Upoznaj uloge

Dinamična stranica je razgovor između uloga

U konceptima 04 i 05 napisao si HTML i CSS za My Project Hub. Pregledač može prikazati taj rad i omogućiti posetiocu da klikne na link. Ali kada stranica mora da prikaže projekte koji se mogu napraviti, menjati ili zapamtiti za kasnije, više delova mora da sarađuje.

User clicks Projects
        ↓
Browser requests /projects/
        ↓
Backend gets saved project data
        ↓
Browser displays project cards

Frontend je deo veb aplikacije koji osoba direktno vidi i koristi u pregledaču. HTML mu daje strukturu, CSS izgled, a pregledač tumači te fajlove da prikaže navigaciju, naslove, kartice projekata i linkove. Pregledač je alat koji pokreće frontend kod; nije isto što i frontend.

Statična stranica je i dalje korisna. Ako tri kartice projekta ručno upišeš u HTML fajl, one se prikazuju zato što si ih ti tamo napisao. Ali zamisli 5, 50 ili 5.000 projekata — ili korisnike koji prave nove projekte. Ne bi želeo da ručno menjaš HTML fajl svaki put kada se podaci aplikacije promene.

↳

Pitanje koje menja dizajn: Odakle treba da dolaze promenljivi podaci aplikacije? Dinamičkoj aplikaciji trebaju programska logika koja odlučuje šta će prikazati i mesto koje može da sačuva podatke dostupne i kasnije.

Tri dela, tri odgovornosti

Frontend   → shows and receives interaction
Backend    → handles requests and application decisions
Database   → stores organized application data

Ovi delovi sarađuju, ali nisu sinonimi. Backend može od baze podataka da zatraži podatke, pripremi odgovor i pošalje ga nazad. Baza podataka čuva i upravlja podacima; ona ne odlučuje o celokupnom toku aplikacije.

Šta radi backend

GET /projects/
        ↓
backend receives request
        ↓
decides it needs project data
        ↓
prepares a response

Backend je programski kod koji radi van pregledača posetioca, obično na serveru. Server je računar ili okruženje koje može da primi veb zahteve i pokrene taj backend kod. Server i backend su povezani, ali nisu isto: server je mesto gde kod može da radi, a backend je aplikaciona logika koja radi na tom mestu.

Šta radi baza podataka

Project
  title: "Project Hub"
  description: "Plan and track projects"
  status: "draft"

Python promenljiva kao što je projects = [...] postoji u memoriji dok program radi. Baza podataka je organizovano, trajno skladište podataka aplikacije: može da zadrži naslov, opis i status projekta dostupnim i kasnije. Backend odlučuje šta će raditi s tim podacima i komunicira sa bazom; baza podataka nije backend.

Zašto su HTML i CSS i dalje važni

saved project data
        ↓
backend prepares response
        ↓
HTML and CSS help the browser show it

HTML i CSS u ovom mentalnom modelu nisu trajna baza podataka aplikacije. Oni pomažu frontendu da prikaže rezultat. Kada se podaci promene, backend logika može da zatraži trenutne podatke i pripremi novi odgovor koji pregledač prikazuje.

↳

Sledeće: Upoznaj Django Sada znaš za šta je backend kod odgovoran: prima zahteve, donosi aplikacione odluke, po potrebi radi sa sačuvanim podacima i vraća odgovore. Sledeće upoznaj Django i vidi kako Python može pomoći u izgradnji tog backenda.

Pouzdan način da ispratiš veb aplikaciju

Počni od radnje korisnikaImenuj šta je posetilac kliknuo ili uneo. To govori šta pregledač treba da zatraži.
Prati zahtev do backendaPregledač šalje zahtev. Backend kod ga prima i odlučuje šta aplikaciji sledeće treba.
Zapitaj se gde podaci živeAko aplikaciji trebaju sačuvani podaci projekta, backend može da ih zatraži od baze podataka.
Prati odgovor nazadBackend priprema odgovor, a pregledač/frontend ga koristi da korisniku prikaže rezultat.

Neka ove razlike budu jasne

Pregledač je backendPregledač pokreće frontend kod za posetioca. Backend kod radi van tog pregledača i obrađuje zahteve aplikacije.
Backend je baza podatakaBackend donosi aplikacione odluke i komunicira sa skladištem podataka. Baza podataka čuva i upravlja podacima.
Server i backend znače potpuno istoServer je mesto koje može primati zahteve i pokretati backend kod. Backend je sam aplikacioni kod i logika.
HTML i CSS pamte projekte koji se menjajuHTML i CSS opisuju i stilizuju stranicu. Dinamičkoj aplikaciji treba izvor podataka koji može sačuvane zapise učiniti dostupnim i kasnije.
Baza podataka odlučuje o celom tokuBackend odlučuje šta aplikacija treba da uradi, uključujući i kada treba da zatraži podatke od baze.
Zahtev i odgovor putuju u istom smeruU ovom osnovnom modelu zahtev putuje ka backendu, a odgovor se vraća do pregledača.

02 Prati tok podataka

Python radni prostor

Učitavanje Python okruženja…

Ovo je mala <strong>odluka nad podacima nalik backendu</strong>, a ne pravi veb server niti veza sa bazom podataka. Pokreni primer, promeni jedan status i pogledaj koji bi se nazivi projekata pripremili za listu projekata.

IzlazČeka se Python

Okruženje pregledača se učitava. I dalje možeš da menjaš primer koda.

Pyodide pokreće Python u Web Worker-u pregledača. Zaustavlja se i ponovo pokreće ako se kod predugo izvršava. Izvršavanje u pregledaču nije potpuna bezbednosna granica; ne unosi tajne i ne oslanjaj se na njega za izolaciju nepouzdanog koda.

03 Proveri razumevanje

Korisnik otvara <code>/projects/</code>. Backend prima zahtev i potrebni su mu sačuvani podaci projekta. Šta treba da se dogodi sledeće?

Izaberi sledeću odgovornost u toku Project Hub-a.

GET /projects/

backend needs saved project data

Tvoj mentor za učenje

Napravite besplatan nalog ili se prijavite za AI smernice tokom učenja.

Napravite besplatan nalog Prijavi se

04 Provera razumevanja

Napravite besplatan nalog ili se prijavite da biste dobili AI povratnu informaciju i sačuvali napredak u učenju.