6-bo'lim — chuqur tahlil

Bir bosilgan tugma — bazagacha bo'lgan yo'l

Endi barcha qismlarni (frontend, backend, baza) bilib oldik. Keling, foydalanuvchi saytda bitta amal bajarganda — masalan, "Turnirga yozilish" tugmasini bosganda — aniq nima sodir bo'lishini, qadam-baqadam ko'ramiz.

1Misol: "Turnirga yozilish" tugmasi bosilganda

  1. 1. Talaba tugmani bosadi
    Brauzerda (frontend, Next.js) "Ro'yxatdan o'tish" tugmasi bosiladi.
  2. 2. Frontend so'rov yuboradi
    Brauzer internet orqali backend'ga "so'rov" (so'rovnoma) jo'natadi: "shu talabani shu turnirga qo'sh". Bu so'rov API deb ataladigan "til" orqali yuboriladi.
  3. 3. Backend tekshiradi
    Django (backend) so'rovni qabul qiladi: talaba haqiqatan tizimga kirganmi, turnirda bo'sh joy bormi, u allaqachon yozilmaganmi — hammasini tekshiradi.
  4. 4. Baza yangilanadi
    Hammasi to'g'ri bo'lsa, Django ma'lumotlar bazasiga yangi qator qo'shadi: "bu talaba — shu turnir ishtirokchisi".
  5. 5. Backend javob qaytaradi
    "Muvaffaqiyatli!" degan javob frontend'ga qaytariladi.
  6. 6. Frontend ekranni yangilaydi
    Talaba ekranida darhol "Siz ro'yxatdan o'tdingiz" degan xabar va yangilangan holat ko'rinadi.

Bularning barchasi — bir soniyadan kamroq vaqtda sodir bo'ladi.

2"API" — ofitsiant, deb eslang

🧑‍🍳

API (Application Programming Interface) — frontend va backend'ning bir-biri bilan gaplashish usuli/tili. Xuddi restoran ofitsianti kabi: mijoz (frontend) menyudan biror narsa so'raydi, ofitsiant (API) buyurtmani oshxonaga (backend) yetkazadi, tayyor taomni qaytarib olib keladi. Mijoz oshxonada nima bo'layotganini bilishi shart emas — u faqat ofitsiant bilan gaplashadi.

3To'liq sxema

👤
Foydalanuvchibrauzerda tugma bosadi
→
🖥️
FrontendNext.js (dizayn, tugmalar)
↔
⚙️
BackendDjango (tekshiruv, mantiq)
↔
🗄️
BazaPostgreSQL (doimiy xotira)

4TOBB ETÜ Sport'da ikkalasi "bitta uyda"

Odatda frontend va backend ikki xil serverda, hatto ikki xil kompaniyada joylashishi mumkin. TOBB ETÜ Sport'da esa ikkalasi ham bitta Vercel loyihasida birga joylashtirilgan ("Multiple Services" usuli) — bu tezlikni oshiradi va boshqarishni osonlashtiradi, chunki bitta manzil (tobbsports.vercel.app) ostida ikkalasi ham ishlaydi:

Manzil qolipiKim javob beradi
tobbsports.vercel.app/, /sport, /turnirlar...Frontend (Next.js)
tobbsports.vercel.app/api/...Backend (Django)