Vibecoding · 8-dars · 9-11 sinflar
Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 2Неделя: 2Week: 2

Loyiha: Jonli Valyuta Konverteri

Haqiqiy moliya ilovasini quramiz. Real vaqtda Markaziy Bank kurslarini tortib keluvchi, hisob-kitob qiluvchi to'liq tizim.

Buyurtma

Mijozning PRD Talablari

Mijoz bizga quyidagi qat'iy talablar bilan valyuta konverteri buyurtmasini berdi:

  1. Miqdor maydoni: Raqam kiritiladigan toza input maydoni.
  2. Valyutalar: USD, EUR, RUB, va UZS o'rtasida tanlash imkoniyati (Select).
  3. O'zaro almashtirish (Swap): Valyutalar o'rnini bir bosishda almashtiruvchi tugma (⇄).
  4. Jonli hisoblash: Hech qanday sahifa yangilanmasdan natija bir zumda chiqishi shart.
Vizual Loyihalash

UI Tuzilishi: Eskiz (Wireframe)

Kod yozishdan oldin komponentlar joylashuvini aniqlaymiz:

[ 100 ] -> [ Input Box ]
[ USD ▼ ]
⇄
[ UZS ▼ ]
= 1,285,000 UZS
Jonli Bog'lanish

API Manbasi va Ma'lumot formati

Biz foydalanadigan ochiq valyuta API manzili:

https://open.er-api.com/v6/latest/USD
  • Ushbu manzilga fetch() orqali so'rov yuboramiz.
  • Server bizga rates: { "UZS": 12850, "EUR": 0.92, "RUB": 91.5 } shaklidagi JSON qaytaradi.
  • Biz kiritilgan miqdorni ushbu kursga ko'paytiramiz yoki bo'lamiz!
Kutish San'ati

Asinxron Kod: Async va Await

Internet orqali so'rov yuborish 0.2 soniya vaqt oladi. Kompyuter javob kelguncha "muzlab" qolmasligi uchun async/await ishlatiladi.

async function

Funksiyaga "Bu funksiya ichida internetdan ma'lumot kutish bor" deb xabar beradi.

await fetch()

"Server javob berguncha sabr qil, keyin keyingi qatorga o't" degan buyruq.

Foydalanuvchi Tajribasi

Spinner va Skeleton Loader

Ma'lumot yuklanayotgan 0.3 soniya ichida foydalanuvchiga nima ko'rsatamiz? Bo'sh oq sahifami? YO'Q!

  • Spinner (Aylanuvchi doira): Foydalanuvchiga tizim uxlamayotganini, hisoblayotganini bildiradi.
  • Skeleton (Xira qolip): Matn paydo bo'ladigan joyda xira kulrang fon turadi. Bu zamonaviy ilovalar (YouTube, Instagram) standarti.
Chidamlilik

Internet Uzilsa nima bo'ladi? (Try/Catch)

Haqiqiy muhandislar har doim favqulodda holatlarni hisobga olishadi:

try { ... }

API ga so'rov yuborishga urinib ko'r. Hammasi yaxshi bo'lsa, natijani ko'rsat.

catch (error) { ... }

Agar internet uzilsa yoki server javob bermasa, dastur sinib qolmasin. Foydalanuvchiga "Internet aloqasini tekshiring" deb chiroyli xabar chiqarsin.

Interaktivlik

Swap (O'rin Almashtirish) Mantig'i

Foydalanuvchi "USD -> UZS" dan "UZS -> USD" ga o'tmoqchi bo'lsa, har ikkala select menyuni qaytadan bosib o'tirmasligi kerak!

  • Vaqtinchalik xotira (Temp variable): 1-valyutani ushlab turamiz, 2-valyutani 1-ga, ushlab turilganini 2-ga yozamiz.
  • Bitta tugma foydalanuvchiga 5 soniya vaqtini tejaydi. Bu UX (User Experience) madaniyatidir.
Master Prompt

Vibecoder Master Prompti

"Zamonaviy, toza moliya kartochkasi dizaynini (HTML/CSS) yarat.
Markazda: Miqdor inputi, USD/EUR/RUB/UZS select menyulari va Swap (⇄) tugmasi bo'lsin.
JavaScript qismi: https://open.er-api.com/v6/latest/USD ochiq API dan async/await va fetch orqali jonli kurslarni olsin.
Yuklanayotganda spinner ko'rsat. Internet uzilsa try/catch orqali xatoni bildir."

Kengaytirish

Bonus: Kriptovalyuta Kursini Qo'shish

Mijozlar ko'pincha loyiha tayyor bo'lgach: "Bunga Bitcoin narxini ham qo'sha olasizmi?" deb so'rashadi.

  • CoinGecko ochiq API orqali pastki qismga bitta chiroyli Bitcoin / Ethereum ticker panelini ulaymiz.
  • Bu sizning dasturingizni oddiy maktab loyihasidan professional Fintech darajasiga ko'taradi!
Qurish Vaqti

Amaliy Vazifa: Konverterni Qurish

  • 1. UI qismini (Input, Select, Swap tugma, Natija kartasi) toza yig'ish
  • 2. Jonli API dan real kurslarni muvaffaqiyatli tortib kelish
  • 3. Swap (⇄) tugmasini bosganda hisob teskarisiga to'g'ri ishlashi
10 ballik mezon
UI qismini (Input, Select, Swap tugma, Natija kartasi) toza yig'ish3
Jonli API dan real kurslarni muvaffaqiyatli tortib kelish4
Swap (⇄) tugmasini bosganda hisob teskarisiga to'g'ri ishlashi3
Jami10
Dars Yakuni

Dars Xulosasi: Fintech Asoslari

  • Dinamik Ma'lumot: Bizning saytimiz endi mustaqil emas, jahon moliya tizimi bilan jonli bog'langan.
  • Async/Await & UX: Kutish jarayoni va xatolarni boshqarish dasturni professional ko'rsatadi.
  • Keyingi muammo: Saytni refresh (F5) qilsak, kiritilgan raqamlar o'chib ketyapti! Keyingi darsda buni LocalStorage orqali doimiy xotirada saqlashni o'rganamiz!
Target International SchoolTarget International School Kirish 0–2
1 / 14