Dasturlash nima: full-stack dasturchi kim va zamonaviy veb qanday ishlaydi

Qisqacha: Dasturlash — kompyuterga nima qilishni aniq, qadamma-qadam aytish. Har bir sayt yoki ilova ikki qismdan iborat: siz ko'radigan qism (frontend) va ko'rinmaydigan ishchi qism (backend va ma'lumotlar bazasi). Full-stack dasturchi ikkala qismni ham yarata oladigan dasturchi.

Bu darsda

• Dastur va kod nima ekanini hayotiy misol bilan tushunasiz.
• Sayt yoki ilova qaysi qismlardan iborat ekanini (frontend, backend, baza, API, deploy) bilib olasiz.
• Full-stack dasturchi kimligini va bu kasb qayerda kerakligini ko'rasiz.
• Kurs qanday tuzilgani va taxminan qancha vaqt olishini bilasiz.
• Birinchi kodingizni shu sahifaning o'zida ishga tushirasiz.

Oldin bilishingiz kerak: Hech narsa, noldan boshlaymiz.

1. Nega bu kerak?

Har kuni ertalab telefoningizni qo'lga olasiz. Telegram'da xabar yozasiz, Click yoki Payme orqali yo'lkira to'laysiz, YouTube'da video ko'rasiz.

Bu ilovalar qanday ishlaydi? Ularning ortida sehr emas, oddiy odamlar yozgan kod turadi. Shu odamlar ham bir paytlar xuddi siz kabi noldan boshlagan.

Keling, bitta tanish joyni olaylik — choyxona. Siz kirib palov buyurtma qildingiz. Shu paytda nimalar bo'ladi?

• Siz dasturxon atrofida o'tiribsiz, qo'lingizda menyu bor.
• Buyurtmani ofitsiantga aytasiz, u oshxonaga yetkazadi.
• Oshxonada oshpaz palov damlaydi.
• Go'sht, guruch va sabzi ombordan olinadi.
• Choyxonaning o'zi hamma topa oladigan manzilda turibdi va eshigi ochiq.

Har qanday sayt yoki ilova ham xuddi shunday besh qismdan iborat. Dasturchilar har bir qismga alohida nom bergan. Bu nomlarni hozir eslab qolish shart emas — 3-bo'limda har birini bittadan, sekin ko'rib chiqamiz.

Hozircha bitta fikrni eslang: faqat zalni bezashni bilsangiz, palov pishirolmaysiz. Faqat oshpazlikni bilsangiz, mijozni kutib ololmaysiz. Full-stack dasturchi — zalni ham, oshxonani ham biladigan dasturchi. Bu kurs sizni aynan shunday dasturchi qilib tayyorlaydi.

2. Dasturlash va kod nima?

Dastur (program) — kompyuter bajarishi kerak bo'lgan aniq va tartibli ko'rsatmalar to'plami. Xuddi shkaf yig'ish yo'riqnomasi kabi: "1-taxtani oling, 2-vintni burang".

Kod (code) — shu ko'rsatmalarning maxsus tilda yozilgan matni. Bu maxsus til dasturlash tili deyiladi.

Kompyuter juda tez, lekin o'zi o'ylay olmaydi. U "menga choy damlab ber" degan gapni tushunmaydi. Unga har bir qadamni mayda qilib aytish kerak:

1. Choynakka 1 litr suv quying.
2. Gazni yoqing va suvni qaynating.
3. Choynakka 1 choy qoshiq quruq choy soling.
4. Qaynoq suvni quying va 5 daqiqa kuting.

Birorta qadamni tushirib qoldirsangiz, kompyuter to'xtab qoladi yoki noto'g'ri ishlaydi. Dasturchining asosiy ishi — katta vazifani mana shunday mayda qadamlarga bo'lish.

2.1 Nega oddiy o'zbek tilida buyruq bermaymiz?

Inson gapi ko'p ma'noli bo'ladi. "Choyni olib kel" deysiz. Qaysi choyni? Qora choymi, ko'kmi? Qayerga olib kelish kerak? Odam buni vaziyatdan o'zi tushunadi.

Kompyuter esa vaziyatni tushunmaydi. Unga har bir buyruq faqat bitta ma'noli bo'lishi kerak. Dasturlash tillari aynan shu uchun yaratilgan: ularda har bir so'z va belgi aniq bir narsani bildiradi.

Tekshirib ko'ring: "Do'konga borib non olib kel" — bu gapda kompyuter uchun nimalar noaniq? Kamida ikkitasini toping.

2.2 Birinchi kodingiz — hoziroq

Gapni qo'yib, bir marta ishlatib ko'ramiz. Quyida bir qator kod bor. Uning ostidagi "Ishga tushir" tugmasini bosing — telefonda ham ishlaydi:

console.log("Salom! Men dasturlashni o'rganyapman.");

Konsolda:

Salom! Men dasturlashni o'rganyapman.

console.log(...) — "qavs ichidagi matnni ekranga yoz" degan buyruq. Tugmani bossangiz, qavs ichidagi gap ostida chiqadi.

Endi qo'shtirnoq ichidagi gapni o'zgartirib, masalan ismingizni yozib, yana bosib ko'ring. Tabriklaymiz — siz kompyuterga birinchi buyrug'ingizni berdingiz.

Maslahat: Bu qator hozircha "sehr" bo'lib tursin. console.log ni birinchi dastur darsida batafsil o'rganamiz. Hozir uni tushunish shart emas.

2.3 Nega aynan JavaScript va TypeScript?

Dunyoda yuzlab dasturlash tillari bor: Python, Java, Go, PHP va boshqalar. Nega bu kursda JavaScript ni o'rganamiz? Hozir yozgan kodingiz ham JavaScript edi.

Sabab oddiy: JavaScript — brauzer tushunadigan yagona dasturlash tili. Brauzer (browser) — saytlarni ochadigan dastur: Chrome, Safari, Firefox. Har bir brauzer ichida JavaScript kodini o'qib bajaradigan qism bor. Boshqa tillar brauzerda to'g'ridan-to'g'ri ishlamaydi.

2009-yilda Node.js paydo bo'ldi. Bu — JavaScript'ni brauzersiz, kompyuterning o'zida ishlatadigan dastur. Shundan beri bitta til bilan ko'p narsa qilish mumkin:

• saytning ko'rinadigan qismi;
• saytning ko'rinmaydigan, ishchi qismi;
• telefon ilovalari va Telegram botlar.

TypeScript — JavaScript'ning "qat'iyroq akasi". U kod yozayotganingizdayoq ko'p xatolarni oldindan ko'rsatadi. Avval JavaScript'ni mustahkam o'rganasiz, keyin TypeScript'ga o'tish oson bo'ladi.

Maslahat: Node.js va TypeScript'ga kursda alohida qismlar bor. Hozir faqat nomini eshitib qo'ysangiz yetarli.

Tekshirib ko'ring: Nega sayt yaratmoqchi bo'lgan odam JavaScript'ni chetlab o'ta olmaydi?

3. Sayt qanday qismlardan iborat?

Endi choyxonaga qaytamiz va har bir qismga dasturchilar qo'ygan nomni bittadan ko'ramiz. Har bo'limda faqat bitta yangi so'z.

3.1 Frontend — siz ko'radigan qism

Frontend (frontend) — sayt yoki ilovaning siz ko'radigan va bosadigan qismi: tugmalar, matnlar, rasmlar. Choyxonada bu — dasturxon va menyu.

Frontend uchta til bilan yasaladi. Ularni hozircha oddiy o'xshatish bilan eslab qoling:

• HTML — sahifaning skeleti: sarlavha, matn, rasm qayerda turadi.
• CSS — sahifaning kiyimi: ranglar, shriftlar, joylashuv.
• JavaScript — sahifaning harakati: tugma bosilganda oyna ochilishi.

Uchalasini kursda noldan, alohida qismlarda o'rganamiz.

3.2 Backend — ko'rinmaydigan oshxona

Avval bitta so'z. Server (server) — kechayu kunduz yoqiq turadigan va boshqa kompyuterlarga xizmat qiladigan kompyuter. U odatda maxsus binolarda turadi.

Backend (backend) — serverda ishlaydigan, foydalanuvchi ko'rmaydigan ishchi qism. Choyxonada bu — oshxona va oshpaz.

Misol: siz Payme orqali do'stingizga 50 000 so'm o'tkazyapsiz. Ekranda faqat "Yuborish" tugmasi bor — bu frontend.

Lekin hisobingizda haqiqatan 50 000 so'm bormi? Pulni sizdan yechib, do'stingizga qo'shish kerak. Bu hisob-kitobni backend bajaradi.

3.3 Ma'lumotlar bazasi — ombor

Ma'lumotlar bazasi (database) — ma'lumotlar tartibli saqlanadigan ombor. Qisqacha "baza" deymiz. Choyxonada bu — go'sht va guruch turadigan ombor.

Foydalanuvchilar ro'yxati, telefon raqamlari, tovarlar narxi, yozishmalar tarixi — hammasi bazada saqlanadi. Baza bo'lmasa, server o'chib-yonganda hamma ma'lumot yo'qolardi.

Maslahat: Yaxshi yozilgan dastur parolingizning o'zini bazada saqlamaydi. U parolning shifrlangan izini saqlaydi — undan parolni qayta tiklab bo'lmaydi. Shuning uchun Payme xodimi ham parolingizni ko'ra olmaydi. Buni kursning xavfsizlik darslarida o'rganamiz.

3.4 API — ofitsiant

API (Application Programming Interface) — frontend va backend bir-biri bilan gaplashadigan yo'l. Choyxonada bu — ofitsiant va u bilan gaplashish qoidalari: nimani so'rash mumkin va qanday javob keladi.

Ofitsiantdan "palov" so'rasangiz, palov keladi. Menyuda yo'q narsani so'rasangiz, "bizda yo'q" degan javob keladi. API ham shunday: frontend "Alining balansini ber" deb so'raydi. Backend bazadan ma'lumotni oladi va javobni xuddi shu yo'l bilan qaytaradi.

3.5 Deploy — choyxona eshigini ochish

Kodni o'z kompyuteringizda yozsangiz, uni faqat o'zingiz ko'rasiz. Boshqalar ham ishlatishi uchun deploy qilish kerak.

Deploy (joylashtirish) — tayyor kodni serverga joylash va unga hamma yoza oladigan manzil (masalan, example.com) ulash. Choyxonada bu — binoni topsa bo'ladigan manzilda qurib, eshigini ochish.

3.6 Hammasi birga: bitta rasmda

Endi beshala qismni bitta zanjirga yig'amiz:

flowchart LR
    S["Siz: telefon yoki kompyuter"] --> F["Frontend: menyu"]
    F -->|"so'rov"| A["API: ofitsiant"]
    A --> B["Backend: oshxona"]
    B --> D["Baza: ombor"]
    D --> B
    B -->|"javob"| A
    A --> F

Bularning hammasi serverda deploy qilingan holda ishlaydi — xuddi choyxona binosi kabi.

Har bir qism uchun kursda o'rganadigan vositalar ham bor. Quyidagi nomlarni hozir bilish shart emas — har biriga kursda alohida darslar bor. Ular faqat yo'l xaritasi sifatida turibdi:

Tekshirib ko'ring: Saytda tugmani bosdingiz, lekin hech narsa chiqmadi. Muammo zanjirning qaysi qismlarida bo'lishi mumkin?

4. Full-stack dasturchi kim?

IT sohasida dasturchilar odatda uch yo'nalishga bo'linadi:

• Frontend dasturchi — faqat foydalanuvchi ko'radigan qismni yaratadi.
• Backend dasturchi — faqat server, hisob-kitob va baza bilan ishlaydi.
• Full-stack dasturchi — butun zanjirni tushunadi va hammasini yarata oladi.

Full-stack bo'lishning afzalligi nimada? Kichik g'oyangizni boshidan oxirigacha o'zingiz qura olasiz. Masalan, mahallangizdagi do'kon uchun sayt kerak bo'lsa, alohida frontendchi va backendchi qidirib yurmaysiz.

Jamoada ishlaganda ham foyda bor: boshqa hamkasblaringiz nima qilayotganini tushunasiz va ular bilan oson kelishasiz.

4.1 Kurs qanday tuzilgan?

Kurs sizni qadamma-qadam olib boradi. Har bosqich oldingisiga tayanadi:

1. Poydevor: ish joyini tayyorlash va qanday o'rganish kerak darslaridan keyin kompyuter, fayllar, terminal va internet qanday ishlashini o'rganasiz.
2. HTML va CSS: birinchi sahifalaringizni yasaysiz va ularni chiroyli qilasiz.
3. Git: kodingizni saqlash va boshqalar bilan ishlashni o'rganasiz.
4. JavaScript: dasturlash mantiqini va masala yechishni o'rganasiz.
5. Backend va baza: o'z serveringizni va bazangizni qurasiz.
6. React va Next.js: zamonaviy, katta ilovalar yasaysiz.
7. Deploy va xavfsizlik: loyihalaringizni internetga chiqarasiz va himoyalaysiz.

4.2 Bu qancha vaqt oladi?

Halol javob beramiz. Kursda 1 600 dan ortiq qisqa dars bor. Har bir dars 15–30 daqiqalik.

Kuniga 1 soat (taxminan 2–3 dars) o'qisangiz, taxminiy hisob shunday:

Kuniga 2 soat o'qisangiz, bu muddatlar taxminan ikki barobar qisqaradi. Bu — taxmin, poyga emas. Kimdir tezroq, kimdir sekinroq yuradi, va ikkalasi ham normal.

Yana bir yaxshi xabar: ish qidirishni butun kurs tugashini kutmasdan boshlash mumkin. Buni kursning oxiridagi "Karyera" qismida batafsil ko'ramiz.

5. Ko'p uchraydigan xatolar va noto'g'ri tasavvurlar

Yangi boshlaganlar ko'pincha shu fikrlar tufayli to'xtab qoladi.

5.1 "Dasturlash uchun kuchli matematika kerak"

Eng keng tarqalgan noto'g'ri fikr. Sayt yaratishda har kuni ishlatiladigan narsa — oliy matematika emas. Kerakligi — mantiqiy fikrlash va tartib: qo'shish, ayirish, taqqoslash, "agar ... bo'lsa, unda ...".

Kundalik hayotda sabab va oqibatni ajrata olsangiz, dasturlashni o'rgana olasiz.

5.2 Hammasini yodlashga urinish

Dasturlash — yodlash emas. Tajribali dasturchilar ham har kuni qidiruv tizimi va qo'llanmalarga qaraydi. Muhimi — narsa qanday ishlashini tushunish va muammoni yechish yo'lini bilish.

5.3 "Men inglizchani bilmayman, demak bo'lmaydi"

Halol aytamiz: dasturlashda ko'p so'z inglizcha (console.log ham shunday). Lekin bu kursni boshlash uchun ingliz tili shart emas. Har bir atamani birinchi uchraganda o'zbekcha tushuntiramiz.

Vaqt o'tib, xalqaro ish yoki inglizcha qo'llanmalar uchun ingliz tili kerak bo'ladi. Buning uchun kursda dasturchi ingliz tili darsi bor. Xohlasangiz, IlmHamroh'dagi ingliz tili kursini ham parallel boshlashingiz mumkin.

5.4 Faqat bitta qismga yopishib olish

Ba'zilar "menga faqat chiroyli ranglar yoqadi, server kerak emas" deydi. Lekin server qanday ishlashini bilmagan frontendchi ko'p joyda qoqiladi. Butun zanjirni tushunish sizga har doim ustunlik beradi.

6. Mashqlar

1-mashq (oson): Ilova qismlarini ajratish

Telegram'ni oling. Quyidagi 3 ta holat zanjirning qaysi qismiga tegishli?

1. Ekranda do'stingizning rasmi va xabarlar ro'yxati ko'rinib turibdi.
2. Xabar yozib, "Yuborish" tugmasini bosdingiz — xabar do'stingizga yetib bordi.
3. Bir yil oldingi yozishmalaringiz o'chib ketmasdan saqlanib turibdi.

Ishora: 3-bo'limdagi choyxona jadvaliga qarang — har bir holatni choyxonadagi biror narsaga o'xshatib ko'ring.

2-mashq (o'rta): Zanjirni tuzish

Jasur onlayn do'kondan kitob sotib olyapti. U "To'lash" tugmasini bosdi.

Frontend, API, backend va baza qanday tartibda ishlaydi? 4 qadamda yozing. Ishora: 3.6-bo'limdagi rasmga qarang — strelkalar bo'ylab yuring.

3-mashq (qiyin): Loyihani rejalash

Tasavvur qiling: kichik shaharchadagi dorixona uchun "Dori qidirish" sayti kerak. Mijoz dori nomini yozadi. Sayt esa dori bor-yo'qligini va narxini ko'rsatadi.

Full-stack dasturchi sifatida nimalarni tayyorlaysiz? Har bir qism uchun (frontend, backend, baza, deploy) bittadan vazifa yozing.

7. Real ishda

Siz har kuni ishlatadigan Click, Payme, Telegram kabi xizmatlar ham xuddi shu zanjir asosida ishlaydi: frontend, API, backend, baza va server.

JavaScript va TypeScript dasturchilariga talab bormi? Buni o'zingiz tekshirib ko'ring. hh.uz saytiga yoki Telegram'dagi IT vakansiya kanallariga kiring va "JavaScript" deb qidiring. Bugun qancha e'lon borligini va ularda qanday talablar yozilganini o'z ko'zingiz bilan ko'rasiz.

Ish suhbatlarida (intervyularda) faqat kod yozishni emas, butun tizim qanday ishlashini ham so'rashadi. Siz bugun ko'rgan choyxona zanjiri — aynan shu savolning boshlang'ich javobi.

Xulosa

• Dasturlash — kompyuterga aniq, bir ma'noli qadamlarni yozib berish.
• Har bir sayt besh qismdan iborat: frontend (menyu), API (ofitsiant), backend (oshxona), baza (ombor) va deploy (ochiq eshik).
• JavaScript — brauzer tushunadigan yagona dasturlash tili; Node.js bilan u serverda ham ishlaydi.
• Full-stack dasturchi butun zanjirni tushunadi va hammasini yarata oladi.
• Kuniga 1 soat o'qib, taxminan 4–5 oyda birinchi saytingizni yasaysiz; matematika va ingliz tili boshlash uchun shart emas.

Keyingi dars: Ish joyini tayyorlash va raqamli gigiyena — kompyuter (yoki u bo'lmasa nima qilish), brauzer, hisoblar va xavfsizlik odatlari.