Web dasturlash — takrorlash va amaliy loyiha

Vazifalar ilovasi brauzer, xavfsiz server, ma'lumotlar bazasi va tekshiruvlar bilan bog'langan web tizim sifatida — Amaliy loyiha alohida ekranlar emas: brauzer, tarmoq, xavfsizlik, server, baza va tekshiruvlar bir tizim bo’lib ishlaydi.

Bu dars yangi atama bermaydi. Maqsad — bo’lim davomida o’rganilgan qismlarni bitta tizim sifatida ko’rish va mustaqil loyiha rejasiga aylantirish.

Bitta so’rovning to’liq yo’li

Foydalanuvchi himoyalangan vazifalar sahifasini ochdi, deb tasavvur qiling:

Brauzer URLni tahlil qiladi va DNS orqali kerakli xizmatni topadi.
TLS kelishuvi HTTPS kanalini o’rnatadi.
Brauzer cookie’dagi session identifikatori bilan HTTP so’rov yuboradi.
CDN yoki cache tayyor javob bera oladimi, tekshiriladi.
Ilova serveri sessionni tasdiqlaydi va foydalanuvchi ruxsatini tekshiradi.
Backend parametrli so’rov yoki ORM orqali bazadan vazifalarni oladi.
Server holat kodi, header va JSON yoki HTML javob qaytaradi.
Brauzer DOM va CSSOM qurib, layout va paint orqali sahifani chizadi.
JavaScript tugmalar, forma va keyingi API so’rovlarini boshqaradi.
Log, monitoring va testlar xato bo’lsa uni topishga yordam beradi.

Bu zanjirning har nuqtasida alohida muammo yuz berishi mumkin. Professional debugging “sahifa ishlamadi” degan umumiy holatni aniq qatlamga ajratadi.

Brauzerdan DNS va HTTPS orqali server hamda ma'lumotlar bazasiga boradigan, test va monitoring bilan kuzatiladigan web so'rov oqimi — Bir amal turli qatlamlardan o’tadi; shu sabab muammoni qatlam bo’yicha izlash tezroq va aniqroq natija beradi.

Amaliy loyiha: vazifalar ilovasi

Quyidagi funksiyalar bilan kichik web ilova rejalang:

foydalanuvchi ro’yxatdan o’tadi va login qiladi;
faqat o’z vazifalarini ko’radi;
vazifa qo’shadi, bajarildi deb belgilaydi va o’chiradi;
tarmoq yoki server xatosida tushunarli xabar ko’radi;
klaviatura bilan to’liq boshqariladi;
telefon va desktop ekraniga moslashadi;
production hostingga deploy qilinadi.

1. Ma’lumot modeli

Ikki relatsion jadval yetadi:

foydalanuvchilar(id, ism, email, parol_hash)
vazifalar(id, sarlavha, bajarildi, foydalanuvchi_id, yaratilgan_vaqt)

foydalanuvchi_id vazifani egasi bilan bog’laydi. Backend har bir o’qish va o’zgartirishda shu egalikni tekshiradi.

2. API reja

POST   /auth/login
POST   /auth/logout
GET    /api/vazifalar
POST   /api/vazifalar
PATCH  /api/vazifalar/:id
DELETE /api/vazifalar/:id

Har endpoint uchun muvaffaqiyat holati, noto’g’ri ma’lumot, login qilinmagan va ruxsat yo’q holatlarini yozib chiqing.

3. Frontend holatlari

Har ekranda faqat muvaffaqiyatli natijani emas, quyidagilarni rejalang:

yuklanmoqda;
natija bo’sh;
validatsiya xatosi;
server xatosi;
offline yoki sekin tarmoq;
amal muvaffaqiyatli tugadi.

Vazifalar ilovasining yuklanish, bo'sh ro'yxat, validatsiya ogohlantirishi, server xatosi va muvaffaqiyatli holatlari — Sifatli interfeys faqat odatiy holatni emas, yuklanish, bo’sh natija va xatoni ham foydalanuvchiga aniq tushuntiradi.

4. Sifat talablari

forma label’lari aniq va xato matni maydon bilan bog’langan;
fokus ko’rinadi va modal bo’lsa to’g’ri boshqariladi;
maxfiy kalit frontend yoki Git tarixida yo’q;
rasm o’lchami va lazy loading rejalangan;
login va CRUD oqimi test bilan qoplangan;
pull requestda check, test va production build o’tadi.

O’zingizni tekshiring

Quyidagi savollarga qarab bermasdan javob bera olsangiz, bo’limning asosiy modeli shakllangan:

Domen va URL o’rtasidagi farq nima?
DOM, CSSOM va render tree qanday bog’langan?
401, 403 va 404 qachon ishlatiladi?
Server dasturi va hosting o’rtasidagi farq nima?
Cookie va server sessioni qanday hamkorlik qiladi?
Autentifikatsiya va avtorizatsiya nimasi bilan farq qiladi?
Cache qaysi holatda xavf tug’dirishi mumkin?
CSR, SSR va SSG qachon HTML yaratadi?
Network paneli qanday uchta muammoni ajratishi mumkin?
Unit, integration va E2E test nimani tekshiradi?

Yakunida bo’lim testini ishlab ko’ring — javob izohlaridagi havolalar qaysi darsga qaytish kerakligini ko’rsatadi.