Akhror Web
1.83K subscribers
376 photos
92 videos
27 files
502 links
- Front-End

- Youtube : https://www.youtube.com/@akhrorweb
Loyihalar: json-api.uz

Creator: Ahror Soliyev

Muhokama uchun guruh: @akhror_community
Download Telegram
Forwarded from Josh*Developer
Komiljon Xamidjonov degan xalqaro Senior dasturchi akamiz bor ekan.

Dasturlash sohasini ham "qabriston"ga aylantiryapti. Akalar, odamlarni hissiyoti bilan marketing qilib, ularga yolg'on umidlar berib kurs sotishni to'xtating.

Dasturlashda bozorni o'zingiz ko'rib turibsiz, 5-10+ minglab odamga sohani boylikka ulab yolg'on ma'lumot bermang.

Mayli o'sha sotgan minglagan odamlaringizdan 100 tasi dasturchi bo'lar, aldangan qolganini pulini sizga halollab bera oladimi? Yo'qmi? Unda yolg'onsiz ochiqcha marketing qiling, shunda sizni qarg'aydiganlar kamayadi.

Xalqni katta qismi sodda va ishonuvchan, dalada quyonlar bor ekan deb bo'riga aylanish shart emas, odam bo'lib qolaylik.
Alloh rizqimizni to'g'ri marketing qilib kurs sotsak ham beradi, ziyoda ham qiladi.

#munosabat

@JoshDeveloper
Bugun Skype rasmiy ravishda abadiy o‘chiriladi — uni o’rnini Microsoft Teams egallaydi

Muhim chatlar va mediafayllarni yuklab olishni unutmang — ehtimol, u yerda siz allaqachon unutgan qadrli suratlar qolgan bo‘lishi mumkin.

Arxivdan ma’lumotlaringizni eksport qilish uchun - Havola.

Telegram | Youtube
🔥 Frontend ishlab chiqayotgan, ammo backend yo‘qligidan qiynalayapsizmi?

Unda siz uchun mukammal yechim bor — Firebase + Firestore bilan real-time ma’lumotlar bazasi yaratishni o‘rganing! 💡

Bu kursda siz:
Firebase hisob ochishdan tortib, loyihaga ulashni
Firestore orqali collection & document tushunchalarini
Ma’lumotlarni qo‘shish, o‘chirish, yangilashni
Eng muhimi — real vaqt rejimida ishlashni o‘rganasiz! ⏱️

🎥 Har bir dars — amaliy, oson va hayotiy loyihalar uchun!

👥 Do‘stlaringizga ulashing, sizga ham foyda — ularga ham! 😉

001. Kirish

Telegram | Youtube
👨‍💻 “Firebase nima o‘zi, akam?” degan savolni yana-ya…na eshitayapman 🤓
Xo‘p, endi boshladik! Playlistimizning birinchi videosida o‘zaro salomlashib, kirish qildik. Endi esa asli gapga o‘tamiz!

🔥 Bu — 2-video
🎯 Mavzu: “React Vite loyihasiga Firebase qanday ulanadi?”

🔗 Videoni ko‘rmasangiz… Firebase sizdan ranjishi mumkin ❤️

002. Install Firebase

Telegram | Youtube
Please open Telegram to view this post
VIEW IN TELEGRAM
🧠👩‍💻Firebase ulanib bo‘ldi, endi nima qilamiz?” deyayotgan bo‘lsangiz…
Mana 3-video tayyor! Endi ishni Firestore bilan jiddiylashtiramiz 😎

Mavzu: Connect Firebase Firestore
Bu video — React loyihangizga real-time ma'lumotlar bazasini ulash bosqichi. Yani gap konkret backendga o‘tmoqda!

🚀 Nimalar qilamiz:
– Firestore ni yoqamiz
getFirestore, collection, addDoc bilan tanishamiz
– Bazaga yozamiz, o‘qiymiz, o‘chiramiz — lekin samimiylik bilan
– Real amaliy kodlar bilan tushunamiz

😌 Bu videoni ko‘rgan odam:
JSON’ga mehr qo‘yadi
Firestore’ni o‘zinikidek his qiladi
Va nihoyat: “Obbo, bu oson ekan-ku!” deydi.

⚠️Ogohlantirish: Bu videodan keyin sizda "backendni yaxshi ko‘rish" simptomlari paydo bo‘lishi mumkin 😅

003. Connect Firebase Firestore

Telegram | Youtube
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
— Hozirgi kundagi podcastlarni korsam...

Telegram | Youtube
Zo‘r! Endi navbat Firestore’dagi ma’lumotlarni UI ga chiqarish darsiga keldi — bu dars haqiqiy frontend kayfiyatini beradi. 😎

🎉“Firestore'dagi ma’lumotlar ekranga chiqmasayam chiqadigan qilib qo‘yamiz!”
🎬 Playlistimizning 4-qismi — eng kutgan bosqich:
👉 *“Firestore’dan ma’lumot olib, UI’da ko‘rsatish!”*

👀 Hozirgacha nima qildik?
– Firebase loyihasini yaratdik
– Ulanishni uddaladik
– Firestore bilan “aloqa”ni yo‘lga qo‘ydik
Endi esa... ekranga chiqaramiz!

🛠 Bu videoda:
Firestore’dan getDocs bilan ma’lumotlarni olish
useEffect yordamida yuklab olish
map() orqali UI’da chiqarish (esingdan chiqmasin: har bir elementga key bersang yaxshi bo‘ladi 😉)
Yuklanish jarayonini boshqarish — loader bilanmi yoki skelet bilanmi, o‘zing hal qiling.

Bu darsni ko‘rganlar:
– Frontend bu oddiy narsa emas ekan deb faxrlanadi
– Ma’lumotlarni API’dan o‘qib, UI’ga chiqarishni tushunadi
– Shunaqa qilib to‘liq real CRUD yo‘liga bir qadam yaqinlashadi!

004. Ma'lumotlarni UIga chiqarish.

Video ostida kommentariya yozishni unutmang, Firestore sizga raxmat aytadi. 😇

Telegram | Youtube
Please open Telegram to view this post
VIEW IN TELEGRAM
Do‘stlar, Assalomu alaykum ! 👋

YouTube’da geymerlarni ko‘rib turib, bir fikrga bordim:
odamlar o‘yin tomosha qilib zavqlanishadi va shu zavq uchun ularga donate qilishadi. To‘g‘ri, bu juda yaxshi — kimnidir mehnati qadrlanyapti.

Shunda o‘ylab qoldim:
nega bizning auditoriya ham shunday qilmasligi kerak?
Axir bu yerda ham mehnat bor, vaqt bor, eng muhimi — bilim ulashish bor.

Men Frontend dasturlash bo‘yicha bepul, ochiq darslar ulashib kelyapman. Qilgan mehnatim sizga foyda berayotganidan chin dildan xursandman.
Kelajakda yanada sifatliroq, interaktiv va zamonaviy darslar tayyorlashni istayman.

Buning uchun ba’zi texnik vositalar kerak bo'ladi ko'pincha.

Albatta, bu narsalarsiz ham davom etaman — to‘xtab qolmayman. Lekin sizning kichik yordamingiz bilan bu jarayon ancha tezlashadi va sizning o‘zingiz uchun ham foydaliroq bo‘ladi.

🎯 Streamerlarga odamlar kulgu va o‘yin zavqi uchun donate qiladi.
💡 Bu yerda esa siz bilim, ko‘nikma, kasb, va ehtimolki kelajagingizni topyapsiz.

Shu bois, agar darslarim sizga foyda beryapti va bu loyihaning davom etishini istasangiz, quyidagi havola orqali ixtiyoriy tarzda qo‘llab-quvvatlashingiz mumkin:

Bu yerga o'ting: https://t.me/akhror_donate

Bu majburiy emas, bu — hurmat, qadrlash va birga rivojlanish belgisi.
Oldindan har biringizga rahmat!
Keling, birga o‘rganamiz, birga o‘samiz! 🚀

Telegram | Youtube
Please open Telegram to view this post
VIEW IN TELEGRAM
🧪 "Ma’lumotlarni o‘qiyapmiz, endi yozmasak uyat bo‘ladi...".
Playlistdagi 5-video tayyor:
— “Firestore ga addDoc() yordamida qanday qilib ma’lumot qo‘shiladi?”

👨‍🔬 Bu darsda frontenddan Firestore’ga to‘g‘ridan-to‘g‘ri “Yozdim!” deb yuboramiz:
— Formani to‘ldiramiz
— Submit bosamiz
👩‍💻 Firestore bazasida yangi hujjat paydo bo‘ladi
💥 Va bularning hammasi real va sodda kod bilan tushuntiriladi!

🛠 Video ichida:
— addDoc() ning ishlash mantig‘i
— Form yozish va inputlar orqali state boshqarish
— Submit vaqtida ma’lumotni yuborish
— Qo‘shimcha: Yuborilgandan keyin formani tozalash yoki loader chiqarish

😂 Bu darsni ko‘rganlar:
– “Firestore bu oddiy Google Sheets emas ekan-ku” deb hayron qoladi
– CRUD’ning C harfini bajonidil bajaradi
– Har bir console.log() dan zavqlanadi

005. addDoc() ma'lumotlar qo'shish
👩‍💻 Har bir qo‘shilgan ma’lumot — sizning dasturchilik yo‘lingizda qo‘yilgan yangi g‘isht!

Telegram | Youtube
Please open Telegram to view this post
VIEW IN TELEGRAM
Akhror Web pinned a photo
“Ma’lumotlar o‘zgaryapti… lekin biz sahifani yangilamayapmiz 😎
Playlistdagi 6-video endi onSnapshot() bilan ish boshlaydi.
Bu dars: Real Time Updates haqida.

Endi siz:
• Firestore’dagi har qanday o‘zgarishni jonli kuzatishni o‘rganasiz
• Sahifa yangilanmasa ham, UI yangilanadigan “sehrli” holatga guvoh bo‘lasiz
• onSnapshot() orqali ma’lumotlarni real vaqt rejimida olib borasiz

Nimalar bor videoda:
• onSnapshot() va unsubscribe tushunchasi
• Firestore’dagi har bir o‘zgarishga darhol UI javob berishi
• useEffect bilan toza (clean) kuzatuv funksiyasi

💡 Bu darsni ko‘rgan:
– Sahifani yangilash tugmasini unutadi
– “Shunaqa narsalar ham bo‘lar ekan-a” deb bosh chayqaydi
– Real-time loyihalar yaratishga qadam qo‘yadi

006. onSnapshot() Real Time Updates

Jonli bog‘lanish — bu oddiy ko‘rinsa-da, ilovalarning yuragi.

Telegram | Youtube
“Qo‘shgan ma’lumotni o‘chiradigan vaqt ham keladi...”
Playlistimizning 7-qismi:
deleteDoc() orqali Firestore’dagi ma’lumotlarni qanday o‘chiramiz?

Bu dars sizga:
• Har bir kartochkaga "o‘chirish" tugmasi qo‘shishni
• Bosilganida deleteDoc() orqali bazadan olib tashlashni
• UI’ni jonli (real-time) tarzda yangilanishini ko‘rsatadi

🎯 Asosiy tushunchalar:
– doc() bilan hujjatga yo‘l ko‘rsatish
– deleteDoc() funksiyasi bilan bazadan o‘chirish
– Tugmani bosganda aniqlik, hatto tasdiqlash (confirm) qo‘shish haqida tavsiyalar

Bu darsni ko‘rgan:
• CRUD'ni to‘liq his qiladi
• Firestore’ni qo‘ltiqlab ishlata boshlaydi
• Endi “O‘chirish” deganda qo‘rqmaydi

007. deleteDoc() Ma'lumotlarni o'chirish.

O‘chirish — bu yakun emas. Bu tartib demak.

Telegram | Youtube
“Manual snapshotdan charchadingizmi? useCollection siz uchun!”
Playlistdagi yangi video:
`useCollection()` bilan Firestore’dan ma’lumotlarni olishni yanada yengillashtiramiz.

Endi:
onSnapshot() yozib o‘tirmaysiz
• Har bir update’ni o‘zingiz kuzatmay qo‘yasiz
useCollection() siz uchun kuzatadi, beradi, yangilaydi — *hammasi avtomatik*

🎯 Bu videoda:
useCollection() dan qanday foydalaniladi
– Qanday qilib query bilan ma’lumotlar saralanadi
– Ma’lumotlar loading, error holatlari bilan qanday ishlanadi
– Real-time data olish – endi bir qatorda

008. useCollection()


Telegram | Youtube
“Qo‘shdik, ko‘rdik, o‘chirdik… endi tahrirlash vaqti keldi!”
Playlistimizdagi navbatdagi video — updateDoc() bilan Firestore’dagi ma’lumotlarni o‘zgartirish darsi.

Bu safar:
• Har bir kartochkaga Tahrirlash (Edit) tugmasi qo‘shamiz
• Ma’lumotni formaga chiqaramiz
• updateDoc() bilan Firestore’da real-time o‘zgarishni ko‘ramiz

🎯 Darsda ko‘rishingiz mumkin:
– doc() orqali kerakli hujjatga yo‘l olish
– updateDoc() orqali istalgan qatorni o‘zgartirish
– UI’da real-time yangilanish
– Formani edit modega tushirish g‘oyalari

💡 Ushbu videoni ko‘rgan:
• CRUD’ni to‘liq anglab yetadi
• "Update" degan tugma ortida qanday jiddiy hayot yashirin ekanini tushunadi
• Loyihasiga tahrirlash imkonini qo‘shib, "pro" darajaga chiqadi

009. updateDoc() Ma'lumotlarni o'zgartirish

updateDoc() — bu o‘zgarishlarga tayyor bo‘lishni bildiradi 😉

Telegram | Youtube
💸 Yangi loyiha, yangi pul: myMoney loyihasi boshlandi!
Bu — yangi playlist, va bu uning 1-qismi.
Bu safar biz:
→ Moliyani boshqaruvchi real-time ilova qilamiz
→ Har bir “tiyin”ga nazorat o‘rnatamiz
→ Firebase + React + Firestore bilan ishlaymiz

🎬 Ushbu videoda:
Vite + React asosida yangi loyiha ochamiz
• Firebase, React Router — hammasini joy-joyiga qo‘yamiz
• Fayl strukturani silliq, kelajakka tayyor holga keltiramiz
• Kod boshlanishi, lekin yondashuv — professional!

💡 Bu darsni ko‘rgan:
– “Project boshlash” qo‘rquvini yengadi
– Har bir install’ga ma’no bera boshlaydi
– “Bu safar to‘liq tugataman!” deb o‘ziga va’da beradi

010. myMoney Amaliyot 1-qism

Yodingda bo‘lsin:

> Har katta moliyaviy tizim — kichik bir npm create vite@latest bilan boshlanadi 😉

Telegram | Youtube
🇺🇿
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM