🔄 API Development o‘rganishda asosiy mavzular

Bugungi dasturlash olamida API deyarli hamma joyda ishlatiladi: web ilova, mobil ilova yoki hatto aqlli qurilma bo‘lsin. Shuning uchun API development — har bir dasturchi uchun zarur ko‘nikma.

Keling, bosqichma-bosqich mavzular xaritasini tuzib chiqamiz:

🔹 1. API Fundamentals (Asoslar)
• API nima va qanday ishlashini tushunish.
• Turlari:

• REST (eng mashhur, HTTP metodlarga asoslangan)
• SOAP (XML-based, eski tizimlarda ishlatiladi)
• GraphQL (faqat kerakli ma’lumotni olish imkoniyati)
• gRPC (Google’dan yuqori unumdor API framework)

• API vs SDK farqini bilib olish.

🔹 2. Requests va Responses (So‘rovlar va Javoblar)
• HTTP metodlari: GET, POST, PUT, DELETE, PATCH.
• Status kodlari:

200 OK → Muvaffaqiyatli
201 Created → Yaratildi
400 Bad Request → Noto‘g‘ri so‘rov
401 Unauthorized → Ruxsat yo‘q
404 Not Found → Topilmadi
500 Internal Server Error → Server xatosi

• Headers: Content-Type, Authentication token va h.k.

🔹 3. Authentication va Security (Xavfsizlik)
• API kalitlari (API Keys)
• Basic Auth (oddiy, lekin xavfsiz emas)
• OAuth 2.0 (Google bilan sign-in)
• JWT (stateless session tokenlari)
Qo‘shimcha: HTTPS, CORS, Rate limiting, Input validation.

🔹 4. API Design & Development
• RESTful prinsiplari:

• /users/123/orders kabi resursga asoslangan URL
• To‘g‘ri HTTP metodlar
• Stateless requestlar
• Versioning (/v1/users)
• Pagination (?page=2&limit=50)

• Asboblar:

• OpenAPI (Swagger) – hujjatlashtirish
• Postman, Insomnia – test va eksploratsiya

🔹 5. API Testing
• Postman, cURL, SoapUI, Newman kabi vositalar.
• Test qilish: status kodlar, ma’lumot aniqligi, auth flow, xato ishlov berish, performance.

🔹 6. Deployment & Integration
• API’ni AWS, Azure, Heroku kabi platformalarda deploy qilish.
• API Gateway’lar (routing, auth, caching, rate limiting):

• AWS API Gateway, Kong, Apigee

• API iste’mol qilishni turli tillarda mashq qilish:

• JS (fetch, Axios)
• Python (requests)
• Java (Retrofit, RestTemplate)

• Mashhur public API’lar bilan amaliyot: Google Maps, Stripe, Spotify, OpenWeather.

💬 Xulosa: Agar API developmentni shunday bosqichma-bosqich o‘rgansangiz, nafaqat API yozishni, balki uni sinash, xavfsiz qilish, deploy qilish va real ilovalarga integratsiya qilishni ham puxta egallaysiz.

Telegram | YouTube

🟡 10ta Eng Foydali Frontend UI & Animation Kutubxonalar

Bugungi frontend rivojlanishida vaqtni tejash va professional dizayn qilish uchun quyidagi kutubxonalar juda qo‘l keladi ⬇️

🎨 Design & Component Libraries

Tailark – Shadcn UI asosida tayyor marketing bloklari (hero, pricing, testimonials). Tez landing page qilish uchun ideal.
Shadcn.io – 200+ bepul React komponentlari (TypeScript + Tailwind + Radix UI). CLI orqali tez integratsiya.
SVGL – Eng katta SVG logotiplar kolleksiyasi. Demo, portfolio va client loyihalarda kerak bo‘ladi.
Skiper UI – Tailwind + Framer Motion asosidagi animatsiyali komponentlar (AI input, card carousel). Zamonaviy va “pop” effektlar.
Shadcn Extension – Shadcn UI uchun qo‘shimcha maxsus komponentlar.

🎬 Animation & Motion

Motion Primitives – Professional animatsiyali UI komponentlar. Ishonchli UX uchun juda yaxshi.
Animate UI – Shadcn bilan integratsiyalashgan animatsiyali komponentlar (dynamic background, animated text).

⛏ Specialized Tools

ReactBits.dev – React uchun komponentlar va resurslar hub’i.
Kibo UI – Enterprise darajadagi kengaytmalar: Gantt chart, Kanban, color picker, roadmap vizualizatsiya.
Magic UI – 150+ animatsiyali React komponentlar. ⭐️ (18k+ GitHub stars). Landing page uchun top tanlov.

❔ Nima uchun kerak?

Vaqt tejash – tayyor komponentlar
Sifat – accessibility va performance yuqori
Consistency – UI bir xil uslubda bo‘ladi
Zamonaviy standartlar – TypeScript, Tailwind, Motion
Community support – muntazam yangilanib boradi

💬 Qanday boshlash kerak?

Tez prototip → Magic UI / Shadcn.io
Marketing sayti → Tailark + Motion Primitives
Murakkab ilova → Kibo UI + Shadcn
Animatsiya → Motion Primitives / Animate UI

💡 Xulosa: Bu kutubxonalar nafaqat trendy, balki real muammolarni hal qiladigan vositalar. To‘g‘ri kombinatsiya qilsangiz, professional va zamonaviy web loyihalarni tez va samarali yaratishingiz mumkin. 🚀

Telegram | YouTube

#JS

👩‍💻 JavaScriptga kirish: Nima va qayerda ishlatiladi? ✦

JavaScript — bu dasturlash tili bo‘lib, asosan veb-sahifalarga interaktivlik qo‘shish uchun ishlatiladi.
Agar HTML sahifamiz tana bo‘lsa, CSS uning kiyimi, JavaScript esa unga jon baxsh etadigan miya 🧠 hisoblanadi.

⚙️ JavaScript nima qiladi?
🔸 Tugma bosilganda animatsiya yoki hodisa chiqaradi
🔸 Formadagi ma’lumotlarni tekshiradi
🔸 Veb-sahifaga dinamik o‘zgarishlar kiritadi (masalan, yangilanayotgan vaqt, slayder, modal oynalar)
🔸 Server bilan ma’lumot almashadi (chat dasturlari, onlayn xarid savatchasi)
🔸 Ma’lumotlar bilan hisob-kitob va manipulyatsiya qiladi

🌐 Qayerda ishlatiladi?

Frontend (React, Vue, Angular kabi frameworklarda)
Backend (Node.js orqali server dasturlarida)
Mobil ilovalar (React Native orqali)
Desktop dasturlar (Electron orqali, masalan, VS Code)
O‘yinlar 🎮 (Phaser.js kabi kutubxonalar yordamida)
Sun’iy intellekt 🤖 (TensorFlow.js orqali)
IoT qurilmalari (masalan, Arduino bilan JS orqali boshqarish)

❔ JavaScript nega muhim?
1. Hamma brauzerlar uni qo‘llab-quvvatlaydi
2. Juda kuchli ekotizim (minglab kutubxonalar va frameworklar mavjud)
3. Oson o‘rganiladi va yangi boshlovchilar uchun mos
4. Dunyoda eng ko‘p ishlatiladigan dasturlash tillaridan biri

🟡 Xulosa: JavaScript — bu eng mashhur va kuchli dasturlash tili bo‘lib, uni bilgan dasturchi frontenddan backendgacha, mobil ilovadan o‘yinga qadar turli loyihalarni yaratishi mumkin.🚀

Telegram | YouTube

#JS

👩‍💻 DevTools bilan tanishish: Console va Inspector

Dasturchi uchun brauzer — oddiy internet ko‘ruvchi emas, balki qudratli laboratoriya!
Shu laboratoriyaning eng muhim asboblaridan biri — DevTools.

⛏ DevTools nima?
DevTools — bu brauzer ichida yashiringan maxsus dasturchi asboblari bo‘lib, ular orqali:

Sahifangiz qanday ishlayotganini tekshirishingiz,
Koddagi xatolarni aniqlashingiz,
Dizaynni real vaqtda o‘zgartirishingiz mumkin.

🔍 Inspector (Tekshiruvchi)
Inspector orqali siz:

HTML va CSS kodini to‘g‘ridan-to‘g‘ri sahifada ko‘rasiz
Matn, rang yoki dizaynni real vaqtda o‘zgartirasiz
Responsive rejimda turli qurilmalarda sayt qanday ko‘rinishini tekshirasiz

Masalan: fon rangini o‘zgartirib, “demo” qilishingiz mumkin — ammo bu faqat sizning brauzeringizda amal qiladi

💻 Console (Konsol)
Console esa dasturchining “sirli daftariga” o‘xshaydi:

Kod yozib sinab ko‘rishingiz mumkin
Xatoliklar (error, warning) ko‘rinadi ⚠️
console.log() yordamida ma’lumotlarni chiqarib, kuzatib borasiz

Masalan:

console.log("Salom, DevTools!");

degan kodni yozsangiz, natija konsolda chiqadi. ✨

🟡 Xulosa
Inspector — ko‘rish va dizayn o‘zgartirish uchun,
Console — sinash va xatoliklarni topish uchun.

DevTools — bu dasturchining birinchi yordam qutisi . Uni o‘zlashtirsangiz, dasturlash jarayoni ancha tez va qiziqarli bo‘ladi! 🚀

❔ Siz ko‘proq Inspectordan foydalanasizmi yoki Consoledan?

Telegram | YouTube

#JS

👩‍💻 JavaScript’da O‘zgaruvchilar: var, let, const

JavaScript’da ma’lumotlarni saqlash uchun o‘zgaruvchilardan foydalanamiz. Ularni e’lon qilishning 3 usuli bor:

1️⃣ var — eski usul
- ES6 (2015) gacha faqat var ishlatilgan
- Function scope ga ega (faqat funksiyada cheklangan)
- Qayta e’lon qilish ham, qiymatini o‘zgartirish ham mumkin 🔄
- Kamchilik: xotiraga “yopishib” qoladi, chalkashlik keltirib chiqarishi mumkin

📌 Misol:

var ism = "Ali";
var ism = "Vali"; // qayta e’lon qilish mumkin

2️⃣ let — zamonaviy va xavfsizroq
- Block scope ga ega ({} ichida ishlaydi)
- Qiymatini o‘zgartirish mumkin, lekin qayta e’lon qilib bo‘lmaydi 🚫
- Amaliyotda ko‘p ishlatiladi

📌 Misol:

let yosh = 20;
yosh = 21; // qiymatini o‘zgartirish mumkin

3️⃣ const — o‘zgarmas qiymat
- Block scope ga ega
- Qiymati bir marta beriladi va o‘zgartirib bo‘lmaydi ❌
- Odatda doimiy qiymatlar uchun ishlatiladi (masalan, PI, API_URL)

📌 Misol:

const PI = 3.14;

🟡 Xulosa
- var — eski, hozir ishlatish tavsiya etilmaydi ❌
- let — o‘zgaruvchan qiymatlar uchun eng ko‘p ishlatiladigan usul 🔄
- const — o‘zgarmas qiymatlar uchun doimiy tanlov 🔐

💡 Oddiy qoida:
Avval const dan foydalaning, agar qiymat o‘zgarishi kerak bo‘lsa, let ga o‘ting.

Siz odatda ko‘proq let dan foydalansizmi yoki const dan? 🤔

Telegram | YouTube

#JS

👩‍💻 JavaScript’dagi Primitive turlar

JavaScript’da ma’lumotlar ikki turga bo‘linadi:
➡️ Primitive (asosiy)
➡️ Non-primitive (murakkab)

Bugun primitive turlar haqida gaplashamiz 👇

1️⃣ number — raqamli qiymatlar
Matematik hisob-kitoblar uchun ishlatiladi.
📘 Misol:

let yosh = 20;
let narx = 15.5;

💬 Har ikkalasi ham number turi hisoblanadi (butun yoki o‘nlik farqi yo‘q).

2️⃣ string — matnli qiymatlar
Qo‘shtirnoq yoki backtick (`) ichida yoziladi.
📘 Misol:

let ism = "John";
let salom = 'Salom, dunyo!';
let xabar = `Bugun ${new Date().getFullYear()}-yil`;

💬 String’lar bilan ishlashda + orqali birlashtirish yoki template literal (${}) ko‘p ishlatiladi.

3️⃣ boolean — mantiqiy qiymat
Faqat ikkita qiymat oladi:
✅ true — ha
❌ false — yo‘q
📘 Misol:

let kattaYosh = true;
let kichikYosh = false;

💬 Ko‘pincha shartlarda ishlatiladi (if, while va hokazo).

4️⃣ null — bo‘sh qiymat
Ma’lumot yo‘qligini atayin ko‘rsatadi.
📘 Misol:

let natija = null; // hozircha qiymat yo‘q

💬 Bu “bo‘sh joyni” anglatadi, lekin o‘zi mavjud.

5️⃣ undefined — belgilanmagan qiymat
O‘zgaruvchi e’lon qilingan, lekin qiymat berilmagan.
📘 Misol:

let ism;
console.log(ism); // undefined

💬 Ko‘pincha “hali qiymat berilmagan” degani.

6️⃣ symbol — noyob qiymat
Har bir symbol o‘ziga xos va takrorlanmas qiymatga ega 🔑
📘 Misol:

let id = Symbol("id");
let id2 = Symbol("id");
console.log(id === id2); // false

💬 Symbol’lar maxfiy identifikatorlar yaratishda ishlatiladi (masalan, object ichida).

7️⃣ bigint — juda katta sonlar uchun
🔢 number 2⁵³−1 gacha sonlarni saqlaydi, undan kattaroq qiymatlar uchun bigint ishlatiladi.
📘 Misol:

let kattaSon = 123456789012345678901234567890n;

💬 E’tibor bering: oxirida n qo‘shiladi.
Bu sonlarni aniqlikni yo‘qotmasdan saqlashga yordam beradi.

⚙️ Xulosa
🧠 Primitive turlar — 7 ta:

number
bigint
string
boolean
null
undefined
symbol

Ular o‘zgarmas (immutable) bo‘ladi va JavaScript’ning eng asosiy ma’lumot turlaridir.

💬 Siz undefined bilan null ni aralashtirib yuborgansizmi hech? 😅

Telegram | YouTube

***

🥳 Yilni nima bilan yakunlaymiz, albatta branch bilan :)👏

Happy Coding 🎆

Telegram | YouTube