Vibecoding · 7-dars · 9-11 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 2Неделя: 2Week: 2

API va JSON: Jonli Ma'lumotlar

Statik saytlardan dinamik ilovalarga sakraymiz. Saytimizni dunyo ma'lumotlar oqimiga qanday ulashni o'rganamiz.

Muammo

Statik saytlarning cheklovi

Oldingi darsda qilgan Pomodoro taymeringiz faqat o'z ichida ishladi. Unda tashqi dunyo ma'lumotlari yo'q edi.

Statik: Agar siz HTML ichida "Dollar kursi: 12,800 so'm" deb yozib qo'ysangiz, ertaga kurs o'zgarsa sayt eskiradi!
Dinamik: Sayt har soniyada Markaziy Bankdan jonli kursni so'rab olishi kerak. Buning uchun API kerak!

Tushuncha

API nima? (Restoran Metaforasi)

API (Application Programming Interface) — ikkita dastur bir-biri bilan gaplashadigan ko'prikdir.

1. Siz (Mijoz)

Stolda o'tirasiz (Saytingiz / Brauzer). Taom xohlaysiz.

👤

2. Ofitsiant (API)

Buyurtmani oshxonaga olib boradi va taomni qaytarib keltiradi.

🤵

3. Oshxona (Server/DB)

Ma'lumotlar ombori. Taomni (ma'lumotni) pishirib beradi.

🍳

Universal Til

JSON formati: Dasturlar Tili

Ofitsiant (API) ma'lumotni qanday ko'rinishda olib keladi? Odamlar o'zbekcha gaplashadi, dasturlar esa JSONda!

    {

      "shahar": "Toshkent",

      "harorat": 24,

      "dollar_kursi": 12850.50,

      "ochiqmi": true

    }

Tuzilma

JSON anatomiyasi: Kalit va Qiymat

JSON juda oddiy qoidaga bo'ysunadi: "Key" : Value (Kalit : Qiymat).

Key (Kalit)

Doim qo'shtirnoq ichida yoziladi. Ma'lumotning nomi (masalan: "ism", "narx").

Value (Qiymat)

Matn ("Olma"), Raqam (15000), Mantiq (true/false) yoki Ro'yxat ([]) bo'lishi mumkin.

So'rov turlari

HTTP Metodlari: GET va POST

Brauzer serverdan ma'lumot so'raganda HTTP buyruqlaridan foydalanadi:

GET (Olish)

Faqat ma'lumotni o'qish uchun. Serverdagi narsani o'zgartirmaydi. (Masalan: Ob-havoni bilish, valyuta kursini ko'rish).

POST (Yuborish)

Yangi ma'lumot jo'natish. Serverda yangi yozuv yaratadi. (Masalan: Saytda ro'yxatdan o'tish, pul o'tkazish).

Server javobi

Status Kodlar: 200, 404, 500

Server har bir so'rovga 3 xonali raqam bilan javob beradi:

200 OK

Hamma narsa zo'r! Ma'lumot yetib keldi.

404 Not Found

Bunday manzil yoki sahifa mavjud emas.

500 Server Error

Serverning o'zi buzildi yoki yonib ketdi.

Dunyo Xazinasi

Bepul va Ochiq API lar

Internetda ro'yxatdan o'tmasdan ishlatish mumkin bo'lgan minglab bepul API lar mavjud:

CBU API (cbu.uz): O'zbekiston Markaziy Bankining rasmiy kunlik valyuta kurslari.
CoinGecko API: Bitcoin, Ethereum va 10,000 dan ortiq kriptovalyutalarning jonli narxi.
OpenWeather API: Dunyodagi har qanday shaharning ob-havosi.

Vibecoder Usuli

AI dan API integratsiyasini so'rash

Havaskor: "Menga dollar kursini ko'rsatadigan sayt qil." (AI eski yoki o'ylab topilgan raqam chiqaradi).

Vibecoder Prompti:

"JavaScript fetch() orqali quyidagi ochiq API manziliga GET so'rov yubor: [URL]. Undan kelgan JSON javobdagi 'rate' qiymatini olib, HTML dagi katta kartochkada jonli ko'rsat. Agar xatolik (error) yuz bersa, ekranga qizil ogohlantirish chiqar."

Eng mashhur to'siq

CORS Xatosi nima?

API bilan ishlaganda eng ko'p uchraydigan qizil yozuv: CORS Error (Cross-Origin Resource Sharing).

Nega sodir bo'ladi? Brauzer xavfsizlik yuzasidan boshqa saytning serveriga to'g'ridan-to'g'ri kirishni bloklashi mumkin.
Yechim: Ochiq (CORS ruxsat berilgan) API lardan foydalanish yoki AI ga "CORS proxy ishlat" deb buyruq berish.

Birinchi So'rov

Amaliy Vazifa: JSON ni Ekranga Chiqarish

Claude yoki v0 ni oching.
AI ga quyidagi vazifani bering: "Bitta tugma va karta yarat. Tugma bosilganda cbu.uz yoki ochiq valyuta API dan dollar kursini olib kartaga yozsin."
Brauzer DevTools (F12) ning Network bo'limini ochib, JSON javobini ko'ring!

Dars Yakuni

Bugun nimalarni o'zlashtirdik?

API: Dasturlar va serverlar o'rtasidagi ma'lumot ko'prigi (Ofitsiant).
JSON: Universal ma'lumot formati (Kalit va Qiymat).
Keyingi darsda ushbu bilimlarimiz asosida to'liq ishlaydigan Valyuta va Kripto Konverteri ilovasini noldan quramiz!