Vibecoding · 19-dars · 9-sinf (Backend & API Track)

Fan: Vibecoding · Server Muhandisligi Kohorta: 9-sinf Junior Vibecoder Format: Amaliyot (40 daqiqa)

Backend Asoslari: Node.js, Express va REST API

Brauzer faqat fasadni (UI) ko'rsatadi. IT tizimlarining haqiqiy kuchi — biznes mantiq, maxfiy kalitlar va ma'lumotlar bazasi — Serverda yashaydi. Bugungi darsda biz Node.js va Express yordamida birinchi serverimizni yozamiz, HTTP (GET, POST, PUT, DELETE) siklini o'rganamiz, SQL bazani API ga ulaymiz va interaktiv studiyada jonli sinovdan o'tkazamiz.

Tizim Arxitekturasi

Nega Bazaga Brauzerdan To'g'ridan-To'g'ri Ulanib Bo'lmaydi?

❌ Xavf: Brauzer (Client-Side)

Kod ochiq: DevTools (F12) orqali har qanday odam parollar, tokenlar va kodni ko'ra oladi.
Mijoz alday oladi: Haker brauzerda balance = 9999999 deb kodni o'zgartirib yuborishi mumkin.
Baza paroli fosh bo'ladi: Brauzerga baza ulanish paroli berilsa, uni darhol o'g'irlab ketishadi.

🛡️ Yechim: Server (Backend Qatlami)

Yopiq hudud: Server kodi va .env fayli faqat serverda ishlaydi, mijoz ularni ko'ra olmaydi.
Qat'iy tekshiruv: Server har bir amalni tekshiradi: foydalanuvchi kim, balansi yetarlimi, narxi to'g'rimi.
Baza bilan yagona aloqa: Faqat server bazaga so'rov (SQL) yuborish huquqiga ega.

HTTP Tarmoq Protokoli

HTTP Anatomiyasi: Methodlar, Marshrutlar va Status Kodlar

1 · HTTP Methodlari (CRUD)

GET: O'qish (Read). Body yo'q. Qidiruv va ko'rish uchun.
POST: Yaratish (Create). Yangi ma'lumot req.body da yuboriladi.
PUT / PATCH: Mavjud ma'lumotni tahrirlash (Update).
DELETE: Resursni o'chirib tashlash (Delete).

2 · Server Status Kodlari

200 OK: So'rov muvaffaqiyatli bajarildi.
201 Created: Yangi yozuv muvaffaqiyatli yaratildi.
400 Bad Request: Mijoz kiritgan ma'lumot xato.
404 Not Found: Bunday ID ga ega ma'lumot topilmadi.
500 Server Error: Serverda kutilmagan ichki xatolik.

3 · JSON Ma'lumot Formati

Dunyo tili: JavaScript Object Notation — barcha platformalar tushunadigan format.
Sarlavha: Content-Type: application/json
Server javobi: res.json({ success: true, data: [...] })

Node.js va Express Dvigateli

Node.js: JavaScript Brauzerdan Serverga Qadam Qo'yadi

Avvallari JavaScript faqat brauzer ichida yashardi. 2009-yilda Ryan Dahl Google V8 dvigatelini olib, Node.js muhitini yaratdi. Endi bitta tilda (JS) ham brauzer interfeysini, ham quvvatli serverni yozish mumkin!

Nega Node.js Shunchalik Tez?

Event Loop: Bloklanmaydigan asinxron tsikl 10,000+ so'rovni navbatda tezkor ishlaydi.
npm xazinasi: 2 milliondan ortiq tayyor paketlar (Express, SQLite, JWT).

// 1. Kutubxonani yuklash
const express = require('express');
const app = express();

// 2. JSON tahlil qiluvchi Middleware
app.use(express.json());

// 3. Birinchi GET marshrut
app.get('/api/ping', (req, res) => {
  res.json({ message: 'pong 🏓', time: Date.now() });
});

// 4. Serverni 3000-portda tinglash
app.listen(3000, () => {
  console.log('🚀 Server http://localhost:3000 da ishga tushdi!');
});

REST API Marshrutlash

Marshrut Anatomiyasi: URL Params va Query Parametrlar

1 · URL Parametrlar (`:id`)

Aniq bitta obyektni Primary Key bo'yicha olish uchun ishlatiladi:

app.get('/api/products/:id', (req, res) => {
  const productId = req.params.id;
  // Masalan: /api/products/42 => productId = "42"
  res.json({ id: productId, status: 'Topildi' });
});

2 · Qidiruv va Filtr (`req.query`)

Ro'yxatlarni qidirish, saralash va sahifalash uchun ishlatiladi:

app.get('/api/products', (req, res) => {
  const category = req.query.cat;
  const limit = req.query.limit || 10;
  // Masalan: /api/products?cat=laptops&limit=5
  res.json({ category, limit });
});

POST So'rovlarini Qabul Qilish

req.body Qanday Ishlaydi va Nega express.json() Kerak?

⚠️ Ko'p uchraydigan tuzoq: req.body === undefined

Standart holatda Express tarmoqdan kelayotgan JSONni xom baytlar oqimi deb biladi. Agar app.use(express.json()) yozilmasa, req.body bo'sh qoladi!

Validatsiya va 400 Bad Request qoidasi

Mijoz yuborgan har bir maydon tekshirilishi shart. Noto'g'ri bo'lsa darhol 400 Bad Request qaytaramiz:

app.post('/api/products', (req, res) => {
  const { name, price, stock } = req.body;

  // 1. Validatsiya tekshiruvi
  if (!name || !price || price <= 0) {
    return res.status(400).json({
      error: "Nom va musbat narx kiritilishi shart!"
    });
  }

  // 2. Muvaffaqiyatli yaratish (201 Created)
  const newProduct = { id: Date.now(), name, price, stock: stock || 0 };
  res.status(201).json(newProduct);
});

API ni SQL Bazaga Bog'lash

Express + SQLite: 18-darsdagi Bazani Jonlantiramiz

18-darsda biz konsolda SQL so'rovlar yozgan edik. Endi o'sha so'rovlar Express marshrutlari ichida yashaydi! Server so'rovni qabul qiladi, SQL yordamida bazadan oladi va JSON qilib brauzerga uzatadi.

🛡️ API Ichida SQL Injectiondan Himoya

Hech qachon satrlarni ulab yozmang! Doimo parametrli qoliplardan (?) foydalaning.

// Barcha mijozlarni bazadan olish
app.get('/api/users', (req, res) => {
  const rows = db.query('SELECT id, full_name, email, balance FROM users');
  res.json(rows);
});

// ID bo'yicha bitta mijozni xavfsiz qidirish
app.get('/api/users/:id', (req, res) => {
  const user = db.queryOne(
    'SELECT * FROM users WHERE id = ?', 
    [req.params.id]
  );
  if (!user) {
    return res.status(404).json({ error: 'Mijoz topilmadi' });
  }
  res.json(user);
});

So'rovning To'liq Sayohati

Sichqoncha Bosilishidan Baza Diskiga Yozilgungacha

1

Mijoz (Brauzer)

Foydalanuvchi tugmani bosadi: brauzer POST /api/orders so'rovini yuboradi.

2

Express Marshrut

Express method va URL ni tekshiradi, JSONni req.body obyektiga aylantiradi.

3

SQL Dvigateli

Server tekshiruvdan so'ng xavfsiz INSERT INTO orders so'rovini bajaradi.

4

JSON Javob

Server 201 Created kodi va chek ma'lumoti bilan javob qaytaradi.

Interaktiv Sinov Muhiti

Laboratoriya: Express API Studio & HTTP Mijoz

🎯 Bugungi amaliy vazifalar:

1. API Serverni yoqing: GET, POST va DELETE marshrutlarini yozing.
2. Ichki HTTP Mijoz: Postman-ga o'xshash interfeysda so'rovlar yuborib javobni tekshiring.
3. SQLite bazani ulang: shop.db jadvallaridan ma'lumot oling va yangi yozuv qo'shing.
4. 6 ta Kvest (10 Ball): Har bir endpointni avtomatik test qiluvchi tizim.

🚀 API Studiyani Ochish →

📋 10 Ballik Baholash Mezoni

Kvest 1–2 4 ball GET ro'yxat olish

Kvest 3–4 4 ball POST va Parametr

Kvest 5–6 2 ball DELETE va Himoya

Jami 10 Ball To'liq baho

Amaliyot Vaqti

12 Daqiqa: REST API Yaratish va Sinovdan O'tkazish

12:00

Dasturchi Nazorat Ro'yxati

[ ] API Konsol tabini oching va boshlang'ich marshrutlarni ko'ring
[ ] Ichki HTTP mijoz orqali GET /api/products so'rovini yuboring
[ ] POST /api/products orqali yangi mahsulot qo'shing (201)
[ ] 🎯 6 Kvest bo'limida barcha vazifalarni 10 ballga yetkazing!

Tipik Xatolar Tahlili

Junior Backend Dasturchining Top-3 Xatosi

1 · Qotib Qolgan So'rov

Alomati: Brauzer aylanaveradi va timeout xatosi beradi.
Sababi: res.json() yoki res.send() yozish unutilgan! Mijoz javobni kutib qotib qoladi.

2 · Javob Ikki Marta Berildi

Alomati: Konsolda ERR_HTTP_HEADERS_SENT xatosi.
Sababi: Bitta marshrutda returnsiz 2 marta res.json() chaqirildi! Yechim: doimo return res.json(...) yozing.

3 · URL dagi Tip Xatosi

Alomati: req.params.id === 1 doimo false beradi!
Sababi: URL parametrlari matn ('1') bo'lib keladi. Yechim: parseInt(req.params.id, 10) orqali songa o'giring.

Dars Xulosasi va Uy Vazifasi

Biz Nimalarni O'rgandik va 20-dars (Full-Stack Deploy)ga Ko'prik

✅ Bugungi Xulosalar:

1. Server — tizimning miyasi va seyfi: Baza va sirlar faqat serverda saqlanadi.
2. REST API — xalqaro aloqa tili: GET/POST/PUT/DELETE marshrutlari orqali har qanday ilova bog'lanadi.
3. 20-darsga ko'prik: Bizda SQL baza ham (18-dars), Express Backend ham (19-dars) tayyor. 20-darsda butun tizimni Docker Compose orqali serverga deploy qilamiz!

🏠 Uyga Vazifa (10 Ballik Mezon)

1. Laboratoriyani yakunlash (4 ball): lab/index.html dagi barcha 6 kvestni bajaring.
2. Qidiruv marshruti (4 ball): Mahsulotlarni nomi bo'yicha qidiruvchi GET /api/search?q=... yozing.
3. Ishchi varaqa (2 ball): Dars varaqasidagi topshiriq va tushunchalarni to'ldiring.