10-dars. Amaliy loyiha: Veb ilova (CRUD) yaratish
CRUD (Create, Read, Update, Delete) — har bir veb ilovaning asosi. Bu darsda siz to'liq ishlaydigan ilova yaratasiz: foydalanuvchilar ro'yxatini ko'rish, yangi qo'shish, tahrirlash va o'chirish. Frontend + Backend + Database — barchasi AI bilan.
Mavzu izohi
CRUD — bu deyarli barcha veb ilovalarning asosiy operatsiyalari: Create (yaratish), Read (o'qish), Update (yangilash), Delete (o'chirish). Masalan: Instagram da post yaratish (Create), ko'rish (Read), tahrirlash (Update), o'chirish (Delete). Bu pattern ni bilib olsangiz — istalgan ilovani qura olasiz.
Bu darsda biz 'Kontaktlar ro'yxati' ilovasi yaratamiz: yangi kontakt qo'shish, barcha kontaktlarni ko'rish, ma'lumotni tahrirlash va kontaktni o'chirish. Bu oddiy, lekin barcha asosiy tushunchalarni o'z ichiga oladi.
Texnologiya stack: React (frontend — foydalanuvchi ko'radigan qism), Express.js (backend — server logikasi), va JSON fayl yoki SQLite (database — ma'lumotlar saqlanishi). AI barcha qismlarni yaratadi va birga ishlashini ta'minlaydi.
Muhim tushuncha: frontend va backend alohida ishlaydi. Frontend brauzerda, backend serverda. Ular orasida API (HTTP so'rovlar) orqali muloqot bo'ladi. AI bu arxitekturani biladi va to'g'ri tuzilmada yaratadi.
Bu darsdan nima olasiz
- CRUD operatsiyalari tushunchasini amaliy darajada egallaysiz
- React bilan dinamik UI (foydalanuvchi interfeysi) yarata olasiz
- Express.js bilan oddiy API server yoza olasiz
- Frontend va Backend integratsiyasini tushunasiz
- Ma'lumotlarni saqlash va qayta olish (persistence) ni o'rganasiz
- To'liq ishlaydigan veb ilovani yaratasiz va sinab ko'rasiz
Chuqurroq tushuntirish
CRUD pattern deyarli barcha tijorat ilovalarning asosi: CRM tizimlar (mijozlarni boshqarish), inventar tizimlar (mahsulotlar), blog platformalar (maqolalar), e-commerce (buyurtmalar) — barchasi CRUD. Siz bu pattern ni bir marta o'rganib, istalgan sohaga qo'llashingiz mumkin.
Frontend-Backend arxitekturasi: Frontend (React) — foydalanuvchi ko'radigan va bosadigan qism. U API ga HTTP so'rov yuboradi (fetch yoki axios bilan). Backend (Express) — so'rovni qabul qiladi, database bilan ishlaydi va javob qaytaradi. Bu ajratilgan arxitektura (separation of concerns) deyiladi va real loyihalarda standart.
Database tanlash: Bu darsda JSON fayl ishlatamiz (eng oddiy, o'rganish uchun). Real loyihalar uchun: SQLite (bepul, lokal), PostgreSQL (masshtabli, ishonchli), MongoDB (hujjat asosli). AI barchasini biladi — prompt da qaysi database kerakligini ko'rsatsangiz, u shunga mos kod yaratadi.
Keyingi qadam: bu CRUD ilova asosida siz auth (login/register), role-based access (admin/user), file upload, pagination, va search qo'shishingiz mumkin. Har bir yangi funksiya uchun AI ga alohida prompt yozing. Shunday qilib, oddiy CRUD dan to'liq SaaS platformaga o'sib borasiz.
Tayyor prompt shabloni
Ko'chirib moslashtiringTo'liq CRUD veb ilova yarat. Mavzu: Kontaktlar boshqaruvi. Stack: React + TypeScript (frontend), Express.js (backend), JSON fayl (database). Funksionallik: 1) Barcha kontaktlarni ko'rish (jadval), 2) Yangi kontakt qo'shish (forma: ism, telefon, email), 3) Kontaktni tahrirlash (modal), 4) O'chirish (tasdiqlash bilan). API endpointlar: GET /api/contacts, POST /api/contacts, PUT /api/contacts/:id, DELETE /api/contacts/:id. Loyiha tuzilmasi: /client (React), /server (Express). npm scripts: dev (ikkalasini birga ishga tushirish).
Nega ishlaydi
Stack: 'React + TypeScript + Express.js + JSON' — to'liq texnologiya belgilangan
Funksionallik: 4 ta CRUD operatsiya aniq ko'rsatilgan
API dizayn: 'GET, POST, PUT, DELETE' — REST API standartiga mos
Tuzilma: '/client, /server' — alohida papkalarda frontend va backend
DX: 'npm scripts: dev' — ishga tushirish osonligi
Amaliy mashq
- Yangi papka: 'contacts-app' yarating va Cursor da oching
- Agent mode da yuqoridagi promptni kiriting
- Agent yaratgan barcha fayllarni ko'rib chiqing
- Terminal da: npm install (ikkala papkada) va npm run dev
- Brauzerda localhost:3000 oching — ilovani sinab ko'ring
- Yangi kontakt qo'shing, tahrirlang va o'chiring
- Chat da: 'Qidiruv funksiyasi qo'sh — ism bo'yicha filtrlash' deb so'rang
- Natijani sinab ko'ring va ishlashini tasdiqlang
Ko'p uchraydigan xatolar
- Frontend va backend portlarini bir xil qilish — odatda frontend :3000, backend :4000
- CORS sozlamasini unutish — backend Express da cors() middleware qo'shish kerak
- Ma'lumot validatsiyasini tashlab ketish — bo'sh ism yoki noto'g'ri email tekshirilishi kerak
- Error holatlarini ko'rsatmaslik — yuklanish, xato va bo'sh holat uchun UI bo'lishi kerak
- API ni tekshirmaslik — Postman yoki curl bilan API alohida sinab ko'ring
Dars bo'yicha savol-javob
JSON fayl database sifatida ishonchli mi?
O'rganish va kichik loyihalar uchun yetarli. 100+ foydalanuvchi yoki tez-tez yozish kerak bo'lsa — SQLite yoki PostgreSQL ga o'ting. AI bu migratsiyani ham qila oladi.
React o'rniga boshqa framework ishlatish mumkinmi?
Ha. Vue, Svelte yoki hatto vanilla JavaScript bilan ham CRUD yaratish mumkin. AI barchasini biladi — promptda framework ni ko'rsating.
Bu ilovani internetda joylashtirish mumkinmi?
Ha. Frontend — Vercel/Netlify ga, Backend — Railway/Render ga deploy qilish mumkin. Barchasini bepul rejada. Keyingi darsda deploy ni batafsil o'rganamiz.