Deploy va Taqdimot (Going Live)
Yaratgan loyihangiz kompyuteringizda qolib ketmasin. Uni butun dunyoga (Cloud) chiqaramiz va QR kod orqali telefonda ochamiz!
Nega Localhost yetarli emas?
Siz saytni brauzeringizda ochib ko'rdingiz (masalan: index.html yoki localhost). Lekin bu internetda emas!
- 1. Shaxsiy kompyuter qafasi: Bu manzilni faqat siz ko'ra olasiz. Do'stingizga bu havolani tashlasangiz, ochilmaydi.
- 2. Kompyuter o'chsa — sayt o'ladi: Haqiqiy loyihalar 24/7 ishlab turishi, har qanday qurilmadan ochilishi shart.
Deploy (Joylashtirish) nima?
Deploy — mahalliy kompyuterdagi kodni global serverga (Bulutga) yuklab, unga hamma kira oladigan doimiy havola (URL) berish jarayonidir.
1. Kod
HTML + CSS + JS
2. Cloud Build
Vercel / Netlify
3. Jonli URL
https://pomodoro.vercel.app
Zamonaviy Deploy Platformalari
▲ Vercel
Vibecoderlar va zamonaviy frontend dasturchilarning 1-raqamli tanlovi. Juda tez, bepul va qulay.
Netlify
Drag-and-drop (faylni shunchaki tashlash) orqali 5 soniyada saytni jonlantirish imkonini beradi.
GitHub Pages
Dasturchining portfoliolarini tekinga saqlash uchun klassik va ishonchli usul.
HTTPS va Yashil Qulf (SSL)
Nega brauzerda http:// emas, balki https:// bo'lishi shart?
- SSL Sertifikat (Shifrlash): Ma'lumotlar foydalanuvchi va server o'rtasida shifrlangan holda o'tadi.
- Ishonch belgisi: Agar SSL bo'lmasa, Chrome va Safari saytni "Xavfli / Not Secure" deb qizil bilan to'sib qo'yadi.
- Vercel va Netlify har bir loyihaga avtomatik ravishda bepul SSL sertifikat beradi!
Telefonda qanday ko'rinadi?
Dunyo trafigining 60% dan ko'pi mobil telefonlardan keladi. Kompyuterda zo'r ko'ringan sayt telefonda sinib ketmasligi shart!
Inspect Mode (F12)
Brauzerda Ctrl + Shift + M bosib, turli telefon modellarida (iPhone, Samsung) dizaynni sinab ko'ring.
Tugmalar o'lchami
Barmog'ingiz sichqoncha kabi ingichka emas. Tugmalar kamida 44px balandlikda bo'lishi lozim.
QR Kod orqali telefonga o'tkazish
Sayt Vercel ga chiqqanidan so'ng, uning havolasini klaviaturada terib o'tirmaymiz. Bepul QR generator yordamida kod yaratamiz!
- 1. Havolani nusxalash: Vercel bergan
.vercel.appmanzilini olasiz. - 2. QR skanerlash: Telefoningiz kamerasini ekranga tutasiz.
- 3. Natija: Siz yaratgan Pomodoro taymer endi sizning shaxsiy telefoningizda ishlab turibdi!
Mijozga Loyihani Qanday Topshiramiz?
Havaskor: "Mana sayt tayyor, pulimni bering." (Noprofessional)
Vibecoder Xati (Professional):
"Assalomu alaykum! PRD dagi barcha 4 ta talab to'liq bajarildi (Dark Blue fon, markazlashtirilgan oq card, Flexbox tugmalar). Shuningdek, so'ragan Dark Mode funksiyangiz ham muvaffaqiyatli ulandi. Jonli havola: [URL]. Iltimos tekshirib ko'ring!"
Demo Day: Loyihani Himoya Qilish
Har bir o'quvchi o'z loyihasini 1 daqiqa ichida sinf oldida namoyish etadi:
1. Dizayn (UI)
Kontrast, ranglar va tugmalar qanchalik toza joylashgan?
2. Mantiq (JS)
Start, Pause, Reset va Dark Mode xatosiz ishlayaptimi?
3. Jonli Havola
Vercel dagi havola telefonda ochilyaptimi?
10 Ballik Baholash Mezoni
- UI dizayn PRD dagi barcha shartlarga to'liq mosligi
- JavaScript mantiqining to'g'ri ishlashi va Dark Mode
- Vercel yoki Netlify orqali muvaffaqiyatli Deploy
- 1 daqiqalik professional taqdimot va nutq
Amaliy Vazifa: Dunyoga Chiqish
- Claude yoki v0 dagi tayyor HTML/CSS/JS faylni kompyuteringizga saqlang (yoki Vercel import qiling).
- Vercel.com yoki Netlify Drop sahifasiga loyihani yuklab, jonli havolani oling.
- Telefoningizda ochib, o'qituvchiga QR kodini ko'rsating!
1-Hafta Natijalari: Biz nimalarga erishdik?
- 1. Sun'iy intellekt va arxitektura: AI, Frontend, Backend va Cloud tizimlarini tushundik.
- 2. Kod anatomiyasi: HTML (skelet), CSS (kiyim), JS (miya) farqini amalda his qildik.
- 3. Birinchi Real Mahsulot: Biz shunchaki o'ynamadik — xalqaro talablar bo'yicha ishlaydigan dastur qurib, uni Cloud'ga chiqardik!
Kirish
0–2
1 / 14