To'liq web mini-loyiha rejasi

Takrorlash darsi tizim qismlarini tanishtirdi. Bu dars esa uni amalda qurish tartibini beradi.

Maqsad: foydalanuvchi ro’yxatdan o’tib, faqat o’z vazifalarini boshqaradigan sodda ilova. Bu vazifa ataylab kichik tanlangan — u yerda web dasturlashning deyarli barcha asosiy tushunchasi uchraydi, lekin oylab vaqt olmaydi. Katta g’oya bilan boshlangan birinchi loyiha ko’pincha yarim yo’lda qoladi; kichik, lekin oxiriga yetkazilgan ish esa ancha ko’p narsa o’rgatadi.

Avval talabni yozing

Kod yozishdan oldin bir varaqda javob bering: ilova kim uchun, u qanday muammoni hal qiladi va “tayyor” degani nima?

Birinchi versiya uchun minimal talab shunday bo’lishi mumkin:

• Foydalanuvchi ro’yxatdan o’tadi va tizimga kiradi.
• Vazifa qo’shadi, uni bajarilgan deb belgilaydi va o’chiradi.
• Faqat o’zining vazifalarini ko’radi.
• Bo’sh ro’yxat, xato va yuklanish holatlari tushunarli ko’rsatiladi.

Bu ro’yxatga kirmagan hamma narsa — kategoriya, muddat, izoh, hamkorlik — alohida ro’yxatga yoziladi va birinchi versiyani to’xtatmaydi. Bu odat loyihani oxiriga yetkazishning eng muhim sharti.

Loyihani qurish

Bosqichlar

Bosqich	Natija	Tekshiruv
1. HTML/CSS	Semantik, responsive vazifalar ekrani	Klaviatura, fokus, mobil ekran
2. JavaScript	Forma holati, loading va xato xabari	Bo’sh va noto’g’ri kiritish
3. API	GET, POST, PATCH, DELETE endpointlar	Networkdagi status, JSON, xato kontrakti
4. Baza	Foydalanuvchi va vazifa modeli	Egasi bilan bog’lanish, validatsiya
5. Auth	Login hamda ruxsat tekshiruvi	Boshqaning vazifasi o’zgarmaydi
6. Sifat	Unit/integration/E2E asoslari	Asosiy foydalanuvchi oqimi
7. Deploy	Production release	Smoke test, log, monitoring

Tartib muhim: har bosqich oldingisiga tayanadi. Auth’ni bazadan oldin yozish yoki testni deploydan keyin qoldirish ishni murakkablashtiradi.

Ma’lumot modeli

Ikki jadval yetarli. Eng muhim qism — ular orasidagi bog’lanish:

Jadval	Maydonlar
users	id, email, parol_xesh, yaratilgan_vaqt
tasks	id, user_id, matn, bajarildi, yaratilgan_vaqt

tasks.user_id — butun xavfsizlik modelining tayanchi. Har so’rovda server “bu vazifa shu foydalanuvchinikimi?” degan savolga javob berishi kerak.

API shartnomasi

GET    /api/vazifalar
POST   /api/vazifalar
PATCH  /api/vazifalar/:id
DELETE /api/vazifalar/:id

Har endpoint uchun muvaffaqiyatli natija bilan birga xato holatlarini ham oldindan belgilang:

Kod	Qachon	Javob
200 / 201	Amal bajarildi	Vazifa yoki ro’yxat
400	Matn bo’sh yoki juda uzun	Qaysi maydon xato ekani
401	Login qilinmagan	Umumiy xabar
403	Begona vazifa	Umumiy xabar
404	Bunday vazifa yo’q	Umumiy xabar

Xato javobining shakli ham bir xil bo’lsin — masalan, doim { "xato": "..." }. Shunda frontend har endpoint uchun alohida mantiq yozmaydi.

Texnologiya tanlash

Bu loyihani deyarli har qanday backend tili bilan qurish mumkin. Tanlovda uchta savol yordam beradi: qaysi tilda o’zingizni erkin his qilasiz, uning hujjatlari va misollari yetarlimi, va bepul hostingda ishga tushirish osonmi?

Boshlovchi uchun keng tarqalgan uch yo’l bor. Python bilan dastur mantig’i sodda va o’qilishi oson. JavaScript frontend bilan bir tilda ishlash imkonini beradi. PHP esa arzon hostingda tez ishga tushadi.

Ma’lumotlar bazasida ham murakkablik qidirmang. Kichik loyiha uchun SQLite yetarli: alohida server talab qilmaydi, bitta fayl sifatida saqlanadi va keyinchalik PostgreSQL’ga o’tish qiyin emas, chunki SQL tili asosan bir xil qoladi.

Muhimi — texnologiya tanlashga bir haftadan ko’p vaqt sarflamaslik. Ishlaydigan loyiha “eng to’g’ri” texnologiyadan ko’ra ko’proq narsa o’rgatadi.

Frontend holatlarini unutmang

Interfeys faqat muvaffaqiyatni ko’rsatsa, u tayyor emas. Kamida to’rt holat kerak:

• Yuklanmoqda — so’rov ketdi, javob kutilmoqda.
• Bo’sh — ro’yxat bo’sh; “hali vazifa yo’q, birinchisini qo’shing”.
• Xato — nima bo’ldi va endi nima qilish kerak.
• Muvaffaqiyat — ma’lumot ko’rsatildi.

Bo’sh holat ayniqsa muhim: yangi foydalanuvchi ilovani birinchi marta aynan shunday ko’radi.

Yana bir tafsilot — amal bajarilgandan keyin javob berish. Foydalanuvchi “qo’shish” tugmasini bosgach, natijani darhol ko’rishi kerak. Server javobini kutib turgan bo’sh ekran ilova qotib qolgandek taassurot qoldiradi. Eng sodda yechim: tugmani vaqtincha o’chirib qo’yish va “qo’shilmoqda…” yozuvini ko’rsatish.

Ishni kichik qismlarga bo’ling

Loyihani ettita kichik sessiyaga bo’lish mumkin. Har sessiya oxirida ishlaydigan natija bo’lsin:

1. Statik HTML/CSS ekrani, ma’lumot qo’lda yozilgan.
2. JavaScript bilan vazifa qo’shish (hozircha faqat brauzer xotirasida).
3. GET va POST endpointlari, baza bilan ulash.
4. PATCH va DELETE, xato holatlari.
5. Ro’yxatdan o’tish va login.
6. Ruxsat tekshiruvi va asosiy testlar.
7. Deploy, smoke test va log.

Bu tartibning afzalligi — har kuni ko’rinadigan natija olasiz. Bir kunda butun tizimni yozishga urinish odatda yarim tayyor loyiha bilan tugaydi.

Testni qayerdan boshlash

To’liq test qamrovi bu loyihaning maqsadi emas. Lekin bir nechta test o’zgarish kiritganingizda ishonch beradi.

Uch darajadan bittadan boshlang. Unit test eng kichik mantiqni tekshiradi: masalan, vazifa matni bo’sh yoki juda uzun bo’lsa validatsiya rad etadimi. Integration test API va bazani birga sinaydi: POST yuborilganda yozuv haqiqatan qo’shildimi va u to’g’ri foydalanuvchiga bog’landimi. E2E test esa brauzerda asosiy yo’lni bosib o’tadi: login, vazifa qo’shish, belgilash, chiqish.

Eng qimmatli birinchi test — ruxsat tekshiruvi. Ikkinchi foydalanuvchi begona vazifani o’zgartira olmasligini avtomatik sinang. Bu xato eng xavflisi va uni qo’lda har safar tekshirish oson unutiladi.

Batafsil yondashuv web testing darsida.

Yakunlash

Tayyorlik mezoni

Loyihani yakunlashdan oldin quyidagilarni o’zingiz tekshiring:

• Faqat klaviatura bilan vazifa qo’shib, belgilab va o’chira olasizmi?
• Ikkinchi foydalanuvchi yaratib, birinchisining vazifasini ko’ra olmasligiga ishonch hosil qildingizmi?
• Internetni uzib, ilova qanday xabar berishini ko’rdingizmi?
• Juda uzun matn va bo’sh matn kiritganda nima bo’ladi?
• Sahifani yangilaganda holat saqlanadimi?

Loyihani ko’rsatishga tayyorlash

Bu loyiha portfolio uchun ham foydali. Buning uchun kodning o’zi yetarli emas — uni boshqa odam tushunishi kerak.

Omborga qisqa README qo’shing va unda to’rt savolga javob bering: ilova qanday muammoni hal qiladi, qanday ishga tushiriladi, qaysi texnologiyalar tanlangan va nega, hamda qaysi chekka holatlar tekshirilgan. Bir-ikki skrinshot yoki qisqa yozuv ham qiymatni tez ko’rsatadi.

Commit tarixi ham hikoya qiladi. Bitta ulkan “loyiha qo’shildi” commit’i o’rniga bosqichma-bosqich, izohli commitlar ish uslubingizni ko’rsatadi. .env faylini esa hech qachon omborga qo’shmang — buni Git workflow darsida ko’rgan edik.

Keyingi qadam

Birinchi versiya ishlagach, ro’yxatga yozib qo’ygan g’oyalardan bittasini tanlang: kategoriya, muddat yoki qidiruv. Uni ham talab, API shartnomasi va test bilan birga qo’shing — xuddi birinchi versiyadagidek tartibda.

Bu loyihani tanlangan backend tili bilan qurishingiz mumkin. Frontendga yangi bo’lsangiz avval HTML/CSS, dastur mantig’i uchun esa Python bilan mustahkam poydevor yarating.

Qisqacha xulosa

• Avval talabni bir varaqda yozing; qolgan g’oyalar alohida ro’yxatga.
• tasks.user_id — butun xavfsizlik modelining tayanchi.
• Har endpoint uchun xato holatlarini oldindan belgilang.
• Interfeys to’rt holatni ko’rsatsin: yuklanmoqda, bo’sh, xato, muvaffaqiyat.
• Ettita kichik sessiya — har birida ishlaydigan natija.
• “Tayyor” degani ko’rinishi emas: test, ruxsat va smoke testdan o’tgani.

Keyingi darsda web yo’nalishlari — barcha tushunchalarni kasbiy yo’nalishlar va o’rganish tartibi bilan bog’laymiz.