Информация о документе

Цена 10000UZS
Размер 879.2KB
Покупки 0
Дата загрузки 06 Ноябрь 2026
Расширение pdf
Раздел Курсовые работы
Предмет Педагогика

Продавец

Bohodir Jalolov

Foydalanuvchi shaharni kiritib, ob-havo ma’lumotlarini ko‘rsatadigan ilova haqida ma‘lumot

Купить
O ’ZBEKISTON RESPUBLIKASI OLIY VA O ’RTA MAXSUS TA ’LIM VAZIRLIGI SHAROF RASHIDOV NOMIDAGI SAMARQAND DAVLAT UNIVERSITETI INTELLEKTUAL TIZIMLAR VA KOMPYUTER TEXNOLOGIYALARI FAKULTETI 60610700 - SUN ’IY INTELLEKT YO ’NALISHI 201 -guruh talabasi Qo ’shimbetov Bexzod Xusniddin o ’g’li Web ilovalar yaratish fanidan KURS ISHI Mavzu: Weather app yaratish HTML, CSS, va JavaScript yordamida. Loyiha: Foydalanuvchi shaharni kiritib, ob -havo ma ’lumotlarini ko ‘rsatadigan ilova. Kurs ishi rahbari: ass. Xamidov.M Talaba : Qo ’shimbetov B. Samarqand – 2025 REJA: 1.Mavzuni bo’yicha o’rganish 2.Web ilova strukturasi (User) 3.User – vazifalari (Algoritmlari) 4. Foydalanilgan dasturlash tillari, ularning versiyalari va ma’lumotlar modeli 5.Dastur skrinshotlari 6.Xulosa (dasturning foydali tamonlari) 1. Mavzu bo‘yicha o‘rganish Bu loyiha nima qiladi? Bu loyiha foydalanuvchiga shahar nomini kiritish imkonini beradi, va JavaScript orqali internetdan (aniqrog‘i OpenWeatherMap API’dan) shu shaharning ob -havo ma’lumotlarini olib, ekranga chiqaradi. Ushbu loyihada ishlatiladigan texnologiyalar: HTML Sahifada input oynasi, tugma va natijani ko‘rsatadigan joyni yaratish CSS Sahifaning ko‘rinishini chiroyli qilish (ranglar, joylashuv, uslublar) JavaScript Shahar nomini olib, internetdan ob -havo ma’lumotini so‘rash, va sahifaga chiqarish OpenWeatherMap API Ob -havo ma’lumotlarini internet orqali taqdim etadigan xizmat Ilova qanday ishlaydi? (Ishlash tartibi) Quyidagi bosqichlar orqali: 1. Foydalanuvchi shahar nomini kiritadi (masalan, "Toshkent"). 2. "Ko‘rsatish" tugmasi bosiladi. 3. JavaScript shahar nomini olib, OpenWeatherMap API ga so‘rov yuboradi. 4. API qaytaradi: harorat, namlik, shamol tezligi, ob -hav o tavsifi (quyoshli, yomg‘irli, va hokazo). 5. Bu ma’lumotlar HTML sahifaga chiqariladi va foydalanuvchi ko‘radi. OpenWeatherMap API haqida Bu saytda butun dunyo shaharlari uchun ob -havo ma’lumotlari mavjud. U bilan ishlash uchun sizga API kalit (API key ) kerak bo‘ladi. API kalitni olish uchun https://openweathermap.org/api saytidan bepul ro‘yxatdan o‘tasiz. Misol uchun, biz API'ga quyidagi tarzda so‘rov yuboramiz: https://ap i.openweathermap.org/data/2.5/weather?q=Toshkent&appid=SIZ NING_API_KALITINGIZ&units=metric Bu link Toshkent shahrining ob -havo ma’lumotlarini qaytaradi. Loyiha nimani o‘rgatadi? Ushbu loyiha orqali siz quyidagilarni o‘rganasiz: JavaScriptda fetch() funksiyasi orqali API bilan ishlash. API’dan kelgan JSON ma’lumotni o‘qish va ishlatish. HTMLda forma yaratish (input, button). CSS yordamida chiroyli interfeys yasash. Foydalanuvchi xatolik qilganda (masalan, shahar topilmasa) xato xabar chiqarish. Kengay tirish imkoniyatlari Siz bu dasturni bundan ham kuchliroq qilishingiz mumkin: Fon rasmi ob -havoga qarab o‘zgarishi: (quyoshli, bulutli, yomg‘irli). Ob -havo ikonkalari qo‘shish. Soat, sana yoki manzil bo‘yicha aniqlash. Foydalanuvchi joylashuvini avtomatik aniqlash (GPS yordamida). Bir nechta kunlik prognoz qo‘shish (5 kunlik ob -havo). Foydalanuvchi interfeysini mobil qurilmalarga moslashtirish. 2 Web ilova strukturasi (foydalanuvchi nuqtai nazaridan) Ob -havo ilovasining tuzilmasi (foydalanuvchi ko‘zidan) Foydalanuvchi veb -ilovaga kirganda quyidagi asosiy bo‘limlar va funksiyalarni ko‘radi: Bosh sarlavha (Header) Ko‘rinishi: “Ob -havo ilovasi”, “Bugungi ob -havo”, “Weather App” va shunga o‘xshash sarlavha. Vazifasi: Sayt nima haqida ekanini bildiradi. Shahar nomi kiritish maydoni (Input Field) Ko‘rinishi: Matnli katakcha – "Shahar nomini kiriting". Vazifasi: Foydalanuvchi o‘zi yashayotgan yoki boshqa biror shaharning ob - havosini bilmoqchi bo‘lsa, shu yerga shahar nomini yozadi. Ob -havoni ko‘rsatish tugmasi (Se arch / Show Button) Ko‘rinishi: “Ko‘rsatish”, “Qidirish”, yoki “Search” tugmasi. Vazifasi: Foydalanuvchi tugmani bosganda, ilova internetdagi ob -havo ma’lumotlarini yuklab oladi va ekranga chiqaradi. Natijalar bo‘limi (Results Panel) Ko‘rinishi: Ekranda quyidagi ma’lumotlar chiqadi: Shahar nomi: masalan, “Toshkent” Harorat: 28 °C Ob -havo holati: Quyoshli / Bulutli / Yomg‘irli Shamol tezligi: 3 m/s Namlik darajasi: 45% Vazifasi: Ob -havo haqida asosiy ma’lumotlarni foydalanuvchiga ko‘rsatadi. Ob -havo ikonka lari (Weather Icons) – ixtiyoriy Ko‘rinishi: Quyosh rasmi, bulut, yomg‘ir tomchilari va h.k. Vazifasi: Ma’lumotni yanada tushunarli va vizual qilish. Xatolik xabarlari – ixtiyoriy Ko‘rinishi: “Shahar topilmadi”, “Internet ulanmagan” kabi ogohlantirishlar. Vazifasi: Foydalanuvchi noto‘g‘ri shahar kiritganda yoki tarmoqda muammo bo‘lsa, tushunarli javob berish. Ilova dizayni – umumiy ko‘rinish Fon: Ob -havo holatiga mos – masalan, quyoshli bo‘lsa, och rang fon. Tugmalar va inputlar: chiroyli, yumaloq chekka, z amonaviy uslubda. Animatsiyalar (ixtiyoriy): ma’lumot yuklanayotganda aylanayotgan belgilar (loader), tugmalar bosilganda jilvalanish. Ilova ishlash tartibi (foydalanuvchi nuqtai nazaridan) 1. Saytga kiradi 2. Shahar nomini yozadi 3. "Ko‘rsatish" tugmasin i bosadi 4. 1 -2 soniyadan keyin ob -havo natijalari chiqadi 5. Agar noto‘g‘ri yozsa, “Shahar topilmadi” degan ogohlantirish chiqadi 6. Agar internet yo‘q bo‘lsa, “Xatolik yuz berdi” degan xabar chiqadi 3. Foydalanuvchi vazifalari (Algoritmlar) Shahar nomini kiritish Vazifa: Foydalanuvchi istalgan shaharning ob -havo ma’lumotlarini ko‘rish uchun shahar nomini matn maydoniga yozadi. Ma’no: Bu orqali foydalanuvchi ilovaga qaysi joy haqidagi ma’lumotni olishni aytadi. "Ko‘rsatish" yoki "Qidirish" tugmasin i bosish Vazifa: Kiritilgan shahar nomi asosida ob -havo ma’lumotlarini qidirish uchun tugmani bosadi. Ma’no: Bu tugma ilovaga ish boshlash signalini beradi — JavaScript API orqali malumot olib keladi. Ob -havo natijalarini ko‘rish Vazifa: Ekranda chiqadig an natijalarni (harorat, ob -havo holati, shamol va h.k.) o‘qiydi. Ma’no: Foydalanuvchi kerakli ma’lumotni oladi: masalan, bugun yomg‘ir yog‘adimi yoki yo‘q. Xatolik xabarlarini tushunish Vazifa: Agar noto‘g‘ri shahar nomi kiritsa yoki internet ishlamasa — foydalanuvchi xatolik xabari ko‘radi ("Shahar topilmadi", "Xatolik yuz berdi"). Ma’no: Bu foydalanuvchiga nima xato bo‘lganini tushunishga yordam beradi. Yangi shahar kiritib, qayta qidirish Vazifa: Boshqa bir shahar ob -havosini ko‘rmoqchi bo‘lsa, yangi nomni yozib, qayta izlaydi. Ma’no: Ilova bir necha marta izlashga imkon beradi, foydalanuvchi ko‘p shaharlardan foydalanishi mumkin. Ob -havo belgilarini (ikonkalar) tushunish Vazifa: Quyosh rasmi, bulutlar, yomg‘ir belgisi orqali foydalanuvchi vizual tush uncha oladi. Ma’no: Vizual belgilar orqali matnsiz ham ob -havo holatini tushunish mumkin. Ilovani turli qurilmalarda ishlatish (responsive dizayn) Vazifa: Telefon, planshet yoki kompyuterda bemalol foydalanish. Ma’no: Ilova har qanday ekranda moslashuvchan bo‘lishi kerak. Qo‘shimcha foydalanuvchi funksiyalari (agar ilovaga qo‘shilsa) Avtomatik joylashuv asosida ob -havo ko‘rish (geolokatsiya orqali). So ‘nggi qidiruvlar tarixini ko ‘rish . Ilova fonini ob -havoga mos ravishda o‘zgarishini ko ‘rish . Prognoz (oldindan aytilgan ob -havo ) 5 –7 kunlikni ko ‘rish . 4. Foydalanilgan dasturlash tillari, ularning versiyalari va ma’lumotlar modeli 1. HTML (HyperText Markup Language) Vazifasi: Web sahifaning tuzilishini (strukturasi) yaratish. Versiyasi: HTML5 — hozirgi zamonaviy web ilovalarda aynan HTML5 ishlatiladi. Ishlatilishi: input maydon, tugmalar, div bloklar, sarlavhalar va matnlar joylashtirish uchun ishlatiladi. Misol: <input type="text" placeholder="Shahar nomini kiriting" /> <button>Qidirish</but ton> <div class="weather -result">Ob -havo bu yerda chiqadi</div> 2. CSS (Cascading Style Sheets) Vazifasi: Web sahifaning dizaynini, rangini, o‘lchamini, animatsiyasini belgilash. Versiyasi: CSS3 — HTML5 bilan mos, animatsiyalar va media query qo‘llab - quv vatlanadi. Ishlatilishi: fon ranglari, ikonlar, tugma uslublari, responsive dizayn va animatsiyalar uchun ishlatiladi. Misol: .weather -result { background -color: lightblue; padding: 20px; border -radius: 10px; font -size: 18px; } 3. JavaScript (JS ) Vazifasi: Ilovaga interaktivlik qo‘shish (masalan, foydalanuvchi tugmani bosganda ob -havo yuklansin). Versiyasi: ECMAScript 6 (ES6) yoki undan yuqori — let, const, arrow functions, fetch API ishlatiladi. Ishlatilishi: API orqali ob -havo ma’lumotini ol ish DOM orqali sahifadagi elementlarga javob berish Foydalanuvchi kiritgan shahar nomini qayta ishlash Misol: fetch( https://api.openweathermap.org/data/2.5/weather?q=${city }&appid=YOUR_API_KEY ) .then(response => response.json()) .then(data => { // Ob -havo ma’lumotlarini sahifada chiqarish }); API (Tashqi ma’lumot manbai) OpenWeatherMap API Vazifasi: Shahar nomi bo‘yicha ob -havo ma’lumotini olish. Ishlash usuli: GET so‘rov yuboriladi, javob JSON formatida qaytadi. Manzil: https://api.openweathermap.org Ro‘yxatdan o‘tish: API kalit olish uchun ro‘yxatdan o‘tiladi. JavaScript orqali bu ma’lumotlar: const temp = data.main.temp; const desc = data.weather [0].description; const speed = data.wind.speed; Tuziilishi HTML Sahifa strukturasi Dizayn CSS Ranglar, joylashuv, responsive Interaktivlik JavaScript ES6+ API bilan ishl ash, DOM, animatsiya Ma’lumotlar JSON JSON API’dan kelgan ob -havo ma’lumotlari Ma’lumot manbai OpenWeatherMap API REST API Ob -havoni olish uchun tashqi xizmat . 5.Dastur sklishotlari. HTML tuzilmasi haqida umumiy tushuncha Bu sahifa foydalanuvchidan shahar nomini kiritishni so‘raydi, keyin “Ob - havoni ko‘rsatish” tugmasi bosilganda, natijalar chiqadigan bo‘lim paydo bo‘ladi. Quyidagi qismlardan iborat: Bu HTML sahifada: | Qism | Vazifasi input | Foydalanuvchi shahar nomini kiritadi | | button | Ob -hav o olish uchun bosiladi | | div#weatherResult | Ma’lumotlar foydalanuvchiga ko‘rsatiladi | | script.js | Butun jarayonni boshqa ruvchi JavaScript kodi ulanishi. <link rel="stylesheet" href="styles.css" /> Sahifaga tashqi CSS faylini ulaydi, ya’ni dizayn va bezaklar shu faylda bo‘ladi. <script src="script.js"></script> Tashqi JavaScript faylni ulaydi. Bu fayl foydalanuvchidan shahar nomini olib, API orqali ob -havo ma’lumotlarini yuklab, weatherResult diviga chiqaradi. Ushbu CSS kodi: butun sahifaning orq a fonini sozlaydi, input maydon va tugmalarni chiroyli qiladi, ob -havo natijalarini markazga joylashtiradi, tugmaga bosilganda kattalashish animatsiyasi beradi, bloklarni yumaloq burchaklar bilan ko‘rsatadi. body Umumiy orqa fon, shrift va ranglar .contain er Ilovani o‘rab olgan markaziy blok input[type='text'] Shahar nomi kiritish oynasi button Ob -havo olish tugmasi, animatsiya bilan .result Ma’lumotlar chiqadigan joy .weather -icon Ob -havo belgisi uchun stil JavaScript kodi nimani qiladi? Bu kod foydala nuvchi shahar (yoki viloyat) nomini kiritgandan so‘ng: 1. OpenWeatherMap API orqali ob -havo ma’lumotlarini olib keladi, 2. Ularni ekranga chiqaradi, 3. Ob -havoga qarab emoji va fon rasmi o‘zgartiradi. API kaliti const apiKey = 'c7b4ee5396d4f4ddfcf77ad6b73fa655'; OpenWeatherMap saytida ro‘yxatdan o‘tganda beriladigan maxfiy kalit. Bu kalit yordamida siz API dan ma’lumot olishingiz mumkin. Bu JavaScript kodi: APIdan ob -havo ma’lumotlarini olib keladi, Foydalanuvchiga emoji va fon bilan chiroyli qilib ko‘rsatadi, Tugma bosilganda avtomatik ishlaydi, Ko‘p holatlarga tayyorlangan (quyosh, yomg‘ir, qor, chaqmoq va h.k.). 6.Xulosa (dasturning foydali tamonlari) “O'zbekiston Ob -Havo Ilovasi” – Bu loyiha foydalanuvchiga real vaqtda istalgan O‘zbekiston viloyati ob - havo ma’lumotlarini ko‘rsatadi. HTML Sahifa tuzilmasini yaratish (input, tugma, sarlavha, natija oynasi) CSS Sahifani bezash, fon rasmi, tugmalar animatsiyasi, adaptivlik JavaScript API bilan bog‘lanish, foydalanuvchi so‘ro vini qayta ishlash, natijani chiqarish OpenWeatherMap API Real vaqtli ob -havo ma’lumotlarini olish uchun tashqi servis . Bu dastur sizni nafaqat texnik bilimlar bilan boyitadi, balki foydalanuvchi uchun foydali ilovalarni ishlab chiqish tarafidan ham kuchli tayyorgarlik beradi. Ushbu veb -ilovalar odatda API (Application Programming Interface) yordamida meteorologik ma'lumotlarni olish imkonini beradi, bu esa dasturchilarga o'z loyihalarida ushbu ma'lumotlardan foydalanishga yordam beradi.

Foydalanuvchi shaharni kiritib, ob-havo ma’lumotlarini ko‘rsatadigan ilova haqida ma‘lumot

Купить