5-dars: Claude Code bilan ishlash

Dars haqida

Davomiyligi: 90 daqiqa Maqsad: Talaba Claude Code'ning imkoniyatlarini va o'rnatish yo'llarini bilishi, o'qituvchi akkaunti yordamida birinchi loyihasi — shaxsiy saytni AI agentga yasatishi, iteratsiya bilan yaxshilashni hamda agent so'rovlarini o'qib tasdiqlash odatini o'rganishi kerak. Uyda mashq qilish uchun bepul muqobil — Gemini CLI bilan ham tanishadi.

1. Claude Code nima?

Claude Code — Anthropic kompaniyasining AI dasturchi agenti. O'tgan darsdagi formula bilan aytsak: miyasi — Claude modeli, qo'llari — fayl yaratish, tahrirlash va buyruq bajarish vositalari.

Oddiy Claude chati bilan farqi:

	Claude chati (claude.ai)	Claude Code
Qayerda	Brauzerda	Kompyuteringizda — terminalda yoki VS Code'da
Fayllaringizni ko'radimi	Faqat yuklaganingizni	Butun loyiha papkasini
Fayl yarata oladimi	Yo'q, matn beradi	Ha, to'g'ridan-to'g'ri papkangizda
Buyruq bajara oladimi	Yo'q	Ha, ruxsatingiz bilan
Nimaga mos	Savol-javob, matn	Loyiha yasash

Claude Code uch ko'rinishda ishlaydi:

Ko'rinish	Qayerda ochiladi	Kimga qulay
Terminal	claude buyrug'i bilan	Asosiy, eng to'liq ko'rinish
VS Code kengaytmasi	VS Code ichida	Muharrir bilan birga — biz shu yo'ldan boramiz
Desktop ilova	Alohida dastur sifatida	Terminalni yoqtirmaganlarga

2. Claude Code nima qila oladi?

Amaliy misollar — siz aytasiz, u qiladi:

Siz aytasiz	Claude Code nima qiladi
"Shaxsiy sayt yasab ber"	index.html yaratib, kod yozadi
"Ranglarni ko'kka o'zgartir"	Faylni o'zi topib, o'zi tahrirlaydi
"Bu papkada nima bor, tushuntir"	Fayllarni o'qib, xulosa qilib beradi
"Xato chiqyapti, tuzat"	Xatoni topadi, to'g'irlaydi, tekshiradi
"Yana bitta sahifa qo'sh"	Yangi fayl yaratib, eskilariga bog'laydi

Eng muhim qulaylik

Claude Code butun loyihani ko'radi. "style.css faylida fon rangini o'zgartir" desangiz — qaysi faylda nima borligini o'zi biladi. Chatga har faylni nusxalab berish davri tugadi.

3. O'rnatish — uch yo'l

Darsda hammasi tayyor

Dars kompyuterlarida hamma narsa oldindan o'rnatilgan. Quyidagi qadamlar — o'z kompyuteringizda takrorlash uchun qo'llanma.

1-yo'l: terminal orqali (asosiy)

Claude Code npm yordamida o'rnatiladi. npm — dasturchilar uchun dastur o'rnatuvchi vosita; u Node.js bilan birga keladi.

1. nodejs.org saytidan LTS versiyani yuklab o'rnating: Next → Next → Install
2. Terminalni yopib, qaytadan oching (yangi o'rnatilgan dasturni tanishi uchun)
3. Terminalga yozing:

npm install -g @anthropic-ai/claude-code

4. O'rnatilgach, istalgan papkada shu buyruq bilan ochiladi:

claude

2-yo'l: VS Code kengaytmasi

1. VS Code'ni oching → chap paneldagi Extensions belgisi
2. Qidiruv maydoniga yozing: Claude Code
3. Anthropic chiqargan kengaytmani tanlab Install bosing
4. Yon panelda Claude belgisi paydo bo'ladi — bosib ishga tushirasiz

3-yo'l: desktop ilova

Terminal umuman ochilmaydigan ko'rinish — Claude'ning desktop ilovasi. claude.ai/download sahifasidan yuklab o'rnatiladi, ichida Claude Code rejimi bor: papka tanlaysiz va yozishmani boshlaysiz.

4. Akkaunt va narx masalasi

Claude Code ishlashi uchun Claude akkaunt kerak:

Yo'l	Narxi	Izoh
Claude Pro obuna	$20/oy	Claude Code'dan to'liq foydalanish
API kalit	Ishlatilgan hajmga qarab	Dasturchilar yo'li, biz uchun hozir emas
Darsda	—	O'qituvchi akkaunti bilan ishlaymiz
Uyda	Bepul	Gemini CLI — quyida, xuddi shu tamoyillar

Halol gap

Claude Code — pulli xizmat, $20/oy talaba uchun katta pul. Shuning uchun rejamiz shunday: darsda o'qituvchi akkaunti bilan to'liq amaliyot qilamiz, uyda esa bepul Gemini CLI bilan xuddi shu ko'nikmalarni mashq qilasiz. O'rgangan hamma narsangiz ikkalasida ham ishlaydi.

5. Uy uchun bepul muqobil: Gemini CLI

Gemini CLI — Google'ning terminal agenti. Kuchi Claude Code'ga yaqin, lekin bepul — Google akkauntingiz bilan kirasiz, har kuni bepul so'rovlar limiti olasiz (talaba mashqi uchun bemalol yetadi).

O'rnatish (Node.js allaqachon o'rnatilgan bo'lsa):

npm install -g @google/gemini-cli

Ishga tushirish:

gemini

Birinchi ochilishda brauzer orqali Google akkauntga kirishni so'raydi — kirasiz, tayyor.

	Claude Code	Gemini CLI
Narxi	Pro obuna $20/oy	Bepul, kunlik limit
Ochish buyrug'i	claude	gemini
Prompt yozish uslubi	Bir xil	Bir xil
Fayl yaratish, tahrirlash	Bor	Bor
Ruxsat so'rovlari	Bor	Bor

Bilim to'liq ko'chadi

Bugun Claude Code bilan o'rganadigan hamma narsa — prompt yozish, iteratsiya, ruxsatlarni o'qish — Gemini CLI'da xuddi shunday ishlaydi. Vosita boshqa, ko'nikma bitta.

6. Amaliyot: birinchi loyiha — shaxsiy sayt

Endi darsning asosiy qismi. Hamma qadamni birga bajaramiz.

1-qadam: ish papkasi yarating

Har loyihaga — alohida papka. Desktop'da yangi papka yarating: mening-saytim

Keyin VS Code'da oching: File → Open Folder → mening-saytim → Open.

Muhim odat

Agentni doim alohida, yangi papkada ishlating — hujjatlaringiz, rasmlaringiz turgan papkada emas. Agent faqat ochilgan papka ichida ishlaydi — shunda xato bo'lsa ham, faqat shu papkaga ta'sir qiladi.

2-qadam: Claude Code'ni oching

VS Code'da: Terminal → New Terminal → terminalga yozing:

claude

Birinchi ochilishda akkauntga kirish so'raladi — darsda bu bosqichni o'qituvchi bajaradi. Keyin shunday oyna ko'rasiz:

╭────────────────────────────────╮
│  Welcome to Claude Code!       │
╰────────────────────────────────╯

> _

> belgisi — sizning prompt yozadigan joyingiz.

3-qadam: birinchi promptni yozing

O'z ma'lumotlaringiz bilan (misoldagi ism o'rniga o'zingiznikini):

Men haqimda oddiy shaxsiy sayt yasab ber.
Bitta index.html fayl bo'lsin, CSS ham shu faylning ichida.
Ismim: Aziza Karimova. 16 yoshdaman, Toshkentdanman.
Qiziqishlarim: rasm chizish, ingliz tili, shaxmat.
Maqsadim: dasturchi bo'lish.
Bo'limlar: men haqimda, qiziqishlarim, aloqa.
Dizayn: zamonaviy, toza, och ranglarda.
Barcha matnlar o'zbek tilida bo'lsin.

Enter bosing — Claude Code ishlay boshlaydi: rejasini aytadi, keyin fayl yaratishga o'tadi.

4-qadam: ruxsat so'rovini o'qib tasdiqlang

Claude Code fayl yaratishdan oldin so'raydi — masalan: "Create index.html?" degan so'rov chiqadi. Nomini o'qing, keyin Yes deb tasdiqlang.

5-qadam: natijani brauzerda oching

1. VS Code'ning chap panelida (Explorer) index.html paydo bo'lganini ko'rasiz
2. Papkani oching: Windows'da File Explorer, Mac'da Finder orqali Desktop → mening-saytim
3. index.html ustiga ikki marta bosing — sayt brauzerda ochiladi

Tabriklaymiz — birinchi saytingiz tayyor! Bir qator ham kod yozmadingiz, lekin sayt sizniki: g'oya, matn, talab — hammasi sizdan chiqdi.

6-qadam: yakunlash va qayta ochish

Ishni tugatganda Claude Code'dan chiqish uchun terminalga yozing:

exit

Keyinroq davom etmoqchi bo'lsangiz, xuddi shu papkada:

Buyruq	Nima qiladi
claude	Yangi suhbat boshlaydi
claude --continue	Oxirgi suhbatni davom ettiradi — agent avvalgi ishlarni eslaydi

7. Iteratsiya — saytni bosqichma-bosqich yaxshilash

Birinchi natija hech qachon yakuniy emas. AI rasm darsida qanday bo'lsa, bu yerda ham shunday: ko'r → ayt → yaxshila. Har bir o'zgarishni alohida prompt bilan so'raymiz:

Ranglarni ko'k-oq qil, hozirgisi juda och ko'rinyapti.

Sahifaning yuqorisiga dumaloq rasm joyi qo'sh —
keyin o'z suratimni qo'yaman.

Telefonda ham chiroyli ko'rinadigan qil — kichik ekranda
matnlar mayda bo'lib ketmasin.

Portfolio bo'limi qo'sh: 3 ta ish namunasi uchun kartochka
bo'lsin, har birida nom, qisqa tavsif va tugma.

Eng pastga footer qo'sh: ismim, yil va "AI yordamida
yasalgan" degan yozuv bo'lsin.

Har o'zgarishdan keyin: brauzerga o'ting va sahifani yangilang (F5 yoki yangilash tugmasi) — natija darhol ko'rinadi.

Bitta so'rov — bitta o'zgarish

"Ranglarni o'zgartir, rasm qo'sh, portfolio qil, musiqa ham qo'shsang zo'r bo'lardi" — hammasini bitta promptga tiqmang. Kichik qadamlar bilan boring: natija aniq bo'ladi, xato chiqsa qayerdan chiqqanini bilasiz.

8. Claude Code savol berganda nima qilish

Agent ishlash davomida sizdan turli narsalarni so'raydi. Bu — kamchilik emas, xavfsizlik: muhim amallar sizning ruxsatingizsiz bajarilmaydi.

So'rov turi	Misol	Nima qilish
Fayl yaratish	"Create index.html?"	Fayl nomini ko'rib — Yes
Fayl tahrirlash	"Edit index.html?"	Qaysi fayl ekanini ko'rib — Yes
Buyruq bajarish	"Run this command?"	Buyruqni o'qing; tushunarsiz bo'lsa avval "bu buyruq nima qiladi?" deb so'rang
Fayl o'chirish	"Delete eski-sahifa.html?"	To'xtang. Rostdan kerak emasligini o'ylab, keyin javob bering
Aniqlashtirish	"Qaysi rangni xohlaysiz — och yoki to'q?"	Oddiy javob yozing

"Hammasiga ha" rejimiga shoshilmang

Claude Code'da har safar so'rayvermaydigan rejimlar ham bor. Boshlovchi paytingizda ularni yoqmang: har so'rovni o'qish — agent nima qilayotganini tushunishning eng yaxshi usuli va eng to'g'ri professional odat.

9. Yaxshi prompt berish qoidalari

2-oydagi prompt qoidalari agentda ham ishlaydi, ustiga agentga xos qo'shimchalar:

Qoida	Yomon	Yaxshi
Aniq talab	"Sayt qil"	"Shaxsiy sayt: 3 bo'lim, och dizayn, matnlar o'zbekcha"
Bitta vazifa — bitta so'rov	"Sayt qil, o'yin ham qil"	Avval sayt. Tugagach — o'yin
Natijani tasvirlab bering	"Chiroyliroq qil"	"Sarlavhani kattaroq qil, ranglarni ko'k-oq qil"
Tekshirib boring	Ko'rmasdan davom etish	Har qadamdan keyin brauzerda F5
Kontekst bering	"Rasm qo'sh"	"Yuqoridagi ism ustiga dumaloq rasm joyi qo'sh"

Va yana bitta kuchli usul — natija bilan gaplashing:

Sayt yaxshi chiqdi, lekin telefonda ochganimda menyu
ikki qatorga bo'linib ketyapti. Shuni tuzat.

Ko'rgan muammoyingizni oddiy so'zlar bilan aytsangiz yetadi — kod atamalarini bilish shart emas.

10. CLAUDE.md — loyiha qoidalari fayli

Loyiha papkasida CLAUDE.md nomli fayl yaratsangiz, Claude Code uni har ishga kirishganda o'qiydi va qoidalaringizga amal qiladi.

Misol — mening-saytim papkasidagi CLAUDE.md:

# Loyiha qoidalari

- Barcha matnlar o'zbek tilida yozilsin
- Ranglar: faqat ko'k va oq
- Har o'zgarishdan keyin nima qilganingni
  1-2 gapda oddiy tilda tushuntir
- Fayllarni mendan so'ramasdan o'chirma

Endi har promptda bularni takrorlash shart emas — agent o'zi eslab qoladi. Bu 2-oyda o'rgangan Custom Instructions'ning loyihadagi ekvivalenti.

Faylni ham Claude'ga yozdiring

CLAUDE.md'ni qo'lda yozish shart emas: "Shu loyiha uchun CLAUDE.md fayl yarat, ichiga quyidagi qoidalarni yoz: ..." desangiz — o'zi yaratib beradi.

11. Nimalarga ehtiyot bo'lish kerak

1. Alohida papkada ishlang. Muhim hujjatlar turgan papkani agentga ochib bermang
2. O'chirish so'rovlarini ikki marta o'qing. "Yes" tugmasi tez bosiladi, o'chgan fayl qiyin qaytadi
3. Katta o'zgarishdan oldin nusxa oling. Loyiha papkasini oddiy copy-paste qilib qo'yish — eng sodda himoya
4. Limit tugashi mumkin. Pro obunada ham soatlik/kunlik ish hajmi chegarasi bor — tugasa biroz kutiladi
5. Internet doim kerak. Claude Code modeli internetda ishlaydi; aloqa uzilsa agent to'xtaydi
6. Tushunmagan buyruqqa ruxsat bermang. Avval "bu nima qiladi?" deb so'rang — javobidan keyin qaror qiling

12. Tez-tez uchraydigan muammolar

Birinchi marta ishlatganda chiqadigan holatlar va yechimlari:

Muammo	Sababi	Yechim
claude buyrug'i topilmadi	Terminal yangi o'rnatilgan dasturni hali tanimayapti	Terminalni yopib, qaytadan oching
npm ishlamayapti	Node.js o'rnatilmagan	Terminalda node --version yozib tekshiring; chiqmasa nodejs.org'dan qayta o'rnating
Akkauntga kirish oynasi ochilmadi	Brauzer bloklagan	Terminalda chiqqan havolani nusxalab, brauzerga qo'lda qo'ying
"Limit reached" xabari	Soatlik ish hajmi tugadi	Ko'rsatilgan vaqtgacha kutasiz — darsda o'qituvchi boshqa akkauntga o'tadi
Saytda o'zgarish ko'rinmayapti	Brauzer eski versiyani ko'rsatyapti	F5 bosing; bo'lmasa Ctrl + F5 — to'liq yangilash
Agent boshqa papkada ishlayapti	claude noto'g'ri papkada ochilgan	Terminalda pwd bilan tekshiring, kerakli papkaga cd bilan o'ting
Yozayotgan promptim yuborilib ketdi	Enter yangi qator emas, yuborish tugmasi	Uzun promptni avval bloknotda yozib, keyin qo'ying

Muammo — darsning bir qismi

Dasturchilarning kunlik ishi ham aynan shunday: nimadir ishlamaydi — sababini topasiz — tuzatasiz. Yuqoridagi jadval bilan muammolarning 90 foizi hal bo'ladi. Qolganini rasmga olib, guruhda so'rang.

13. Claude Code bilan yana nimalar qilish mumkin?

Sayt — faqat boshlanish. Xuddi shu usulda:

G'oya	Prompt boshlanishi
Tabrik sahifasi	"Onamning tug'ilgan kuniga chiroyli tabrik sahifasi yasab ber..."
Test o'yini	"10 savollik viktorina sahifasi: har savolda 4 variant..."
To-do ro'yxat	"Kunlik ishlar ro'yxati sahifasi: qo'shish, belgilash, o'chirish..."
Lug'at kartochkalari	"Inglizcha so'z yodlash kartochkalari: bosganda tarjimasi ochilsin..."
Sinf jadvali	"Haftalik dars jadvali sahifasi, chiroyli jadval ko'rinishida..."

Bularning har biri — bitta HTML fayl, hech qanday server yoki murakkab narsa kerak emas. Brauzerda ochasiz — ishlaydi.

Darsdagi topshiriqlar

Topshiriq 1 — Vizitka-sayt yasang

Darsdagi amaliyotni mustaqil takrorlang, lekin o'z ma'lumotlaringiz bilan:

1. Desktop'da vizitka nomli yangi papka yarating
2. VS Code'da oching, terminalda claude ishga tushiring (darsda — o'qituvchi akkaunti)
3. O'zingiz haqingizda vizitka-sayt so'rang: ism, 2-3 qiziqish, maqsad, aloqa bo'limi
4. Natijani brauzerda oching va guruhga ko'rsating

Topshiriq 2 — 3 marta iteratsiya

Vizitka-saytingizni ketma-ket 3 ta alohida prompt bilan yaxshilang. Majburiy shartlar:

1. Birinchi prompt — ranglar haqida
2. Ikkinchi prompt — yangi bo'lim yoki element qo'shish
3. Uchinchi prompt — telefonda ko'rinishi haqida

Har promptdan keyin brauzerda F5 bosib natijani tekshiring.

Topshiriq 3 — Promptlar jurnali

Bugundan boshlab promptlar jurnali yuriting. Daftarda jadval:

Prompt	Kutgan natijam	Chiqqan natija	Baho 1-10

Bugungi barcha promptlaringizni yozing — kamida 4 qator. Oxirida tahlil: qaysi prompt eng yaxshi ishladi va nega? Bu jurnal kelasi darsda ham kerak bo'ladi.

Topshiriq 4 — Kodni tushuntirtiring

Claude Code'dan so'rang:

index.html faylida nima yozilgan? Menga oddiy o'zbek
tilida, dasturlashni bilmaydigan odamga tushuntirganday
tushuntirib ber: qaysi qism nima uchun kerak?

Javobdan 3 ta yangi narsa daftaringizga yozing. Masalan: sarlavha qayerda yozilishi, ranglar qayerda berilishi.

Topshiriq 5 — CLAUDE.md yarating

Loyihangiz uchun CLAUDE.md fayli yarating — Claude'ning o'ziga yozdiring. Ichida kamida 3 qoida bo'lsin:

1. Til qoidasi (masalan: matnlar o'zbekcha)
2. Dizayn qoidasi (masalan: ranglar)
3. Xavfsizlik qoidasi (masalan: so'ramasdan fayl o'chirmaslik)

Keyin tekshiring: "menga yana bitta bo'lim qo'sh" deb so'rang — agent qoidalarga amal qildimi?

Topshiriq 6 — Uy vazifasi: Gemini CLI

Uyda kompyuteringizga o'rnating:

1. nodejs.org → LTS versiya → o'rnatish
2. Terminal: npm install -g @google/gemini-cli
3. Yangi papka yaratib, terminalda gemini ishga tushiring, Google akkaunt bilan kiring
4. Darsdagi vizitka-sayt amaliyotini Gemini CLI bilan takrorlang
5. Promptlar jurnaliga yozing: Claude Code va Gemini CLI javoblarida qanday farq sezdingiz?

Muammo chiqsa — skrinshot olib keling, kelasi darsda birga hal qilamiz.

Asosiy tushunchalar (lug'at)

Termin	Qisqacha izoh
Claude Code	Anthropic'ning AI dasturchi agenti
Terminal ko'rinishi	claude buyrug'i bilan ochiladigan asosiy rejim
VS Code kengaytmasi	Claude Code'ning muharrir ichidagi ko'rinishi
npm	Dastur o'rnatuvchi vosita, Node.js bilan keladi
Node.js	npm ishlashi uchun kerak bo'lgan dastur platformasi
LTS	Long Term Support — dasturning barqaror versiyasi
Prompt	Agentga beriladigan topshiriq matni
Iteratsiya	Natijani bosqichma-bosqich yaxshilab borish
Ruxsat so'rovi	Agent muhim amaldan oldin so'raydigan tasdiq
index.html	Saytning asosiy sahifa fayli
HTML	Sahifa tuzilishini yozadigan til
CSS	Sahifa dizaynini beradigan til
CLAUDE.md	Loyiha qoidalari yoziladigan maxsus fayl
Gemini CLI	Google'ning bepul terminal agenti — uy mashqi uchun
F5	Brauzerda sahifani yangilash tugmasi

Keyingi dars

6-dars: Codex va boshqa AI vositalar →