Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Makro Beyin kanalında yayınlanan bir JavaScript eğitim serisinin devamıdır. Eğitmen, izleyicilere adım adım kodlama sürecini göstermektedir.
- Video, JavaScript ile hava durumu uygulaması geliştirme sürecini kapsamaktadır. İçerikte API seçimi ve kullanımı, ücretsiz API'lerin nasıl bulunacağı, API key'lerinin nasıl oluşturulacağı ve API dökümantasyonlarının nasıl okunacağı anlatılmaktadır. Ayrıca fetch fonksiyonu kullanarak API'ye veri çekme, şehir adı girişi ve buton tıklaması olaylarını yakalama işlemleri gösterilmektedir.
- Eğitim, şehir adı girildiğinde (Adana, Ankara, Londra, Antalya, Mersin) hava durumu bilgilerinin (sıcaklık, hissedilen sıcaklık, hava durumu) nasıl ekrana yazdırılacağını detaylı şekilde açıklamaktadır. Video sonunda eğitmen, bu projenin React versiyonunun da geleceğini belirtmektedir.
- 00:00JavaScript Hava Durumu Projesi Tanıtımı
- JavaScript eğitim serisi bittikten sonra iki-üç doğum projesi yapılacak ve sonrasında read ve note projelere odaklanılacak.
- İlk JavaScript projesi hava durumu uygulaması olacak ve bu uygulamada hava durumu verileri internetten API aracılığıyla çekilecek.
- Proje, kullanıcıdan şehir adı alıp, bu verileri internet ortamına yollayıp, çekilen verileri ekrana bastıracak.
- 01:00Projenin Yapısı
- Hava durumu uygulamasında kullanıcıdan şehir adı girilecek ve veriler getirildiğinde işlemler değişmeye başlayacak.
- API kısmı henüz çekilmemiş çünkü yerlerini hazırlamamış ve kullanıcıların API nereden bulacağını ve dökümantasyonu nasıl okuyacağını bilmediği için.
- Proje sıfırdan yapılacak ve ücretsiz API'ler yerine ücretli API'ler kullanılacak.
- 01:46Ücretsiz API Seçimi
- Ücretsiz API'ler için "free" kısmına tıklanmalı ve "weather" kısmına gidilmeli.
- "Out" kısmı "no" yazan API'ler üyelik almadan kullanılabilir ancak eski veriler veya kapatılmış olabilir.
- "No" yazan API'ler genellikle sınırlı kullanım hakkı sunar ve bu hakkı geçtikten sonra para istenir.
- 03:21Ücretli API Kullanımı
- Ücretli API'ler için "open" kısmına tıklanmalı ve üyelik oluşturulmalı.
- Üyelik oluşturulduktan sonra "My API Keys" kısmından API key'i alınabilir.
- API key'i aktif edilmeli, aksi takdirde API çalıştırılamaz.
- 04:43API Dökümantasyonu
- API dökümantasyonunda güncel hava durumu için "Cent Weather Data" seçeneği bulunuyor.
- Dökümantasyonda saatlik, son dört günlük, on altı günlük gibi farklı veri seçenekleri mevcut.
- Şehir adı ile hava durumu çekmek için "city name" parametresi kullanılacak.
- 06:36JavaScript Kodlama
- İlk olarak input alanına erişim sağlanıyor: `console.log(cityInput);` ile input'a erişildiği kontrol ediliyor.
- Butona click olayı ekleniyor: `btn.addEventListener('click', function() { console.log('btn tıklandı'); });`
- Butona tıklandığında input'taki değer alınıyor: `cityInput.value;` ile input'taki şehir adı ekrana bastırılıyor.
- 09:34Input Tıklama Olayı ve Veri Alma
- Input click olayına tepki olarak city input'taki value'yu almak için "const city = cityInput.value" kodu kullanılıyor.
- Fetch işlemi için "getData" adında bir fonksiyon oluşturuluyor ve içine "cityName" parametresi geçiriliyor.
- Fetch işlemi için URL'de cityName ve API key'i kullanmak için "const baseUrl" adında bir değişken oluşturuluyor.
- 12:49API Verilerini Çekme
- Fetch işlemi yapıldıktan sonra gelen veriler konsola yazdırılıyor ve şehir adı ile ilgili koordinatlar, weather bilgileri ve sıcaklık değerleri görüntüleniyor.
- Sıcaklık değerleri Kelvin cinsinden geldiği için "units: 'metric'" query parametresi ile Celsius cinsine çevriliyor.
- Dil bilgisi için "lang: 'tr'" query parametresi kullanılarak Türkçe dil desteği sağlanıyor.
- 14:28Verileri Kullanma ve Fetch İşlemi
- Çekilen verilerden şehir ve ülke adı, sıcaklık değerleri ve hava durumu bilgileri alınıyor.
- Fetch işlemi promise yapısı döndürdüğü için "then" ve "catch" blokları kullanılarak veriler yakalanıyor.
- Fetch işleminden gelen verileri JSON formatına dönüştürmek için "data.json()" kullanılıyor ve veriler ekrana yazdırılıyor.
- 19:04API Verilerini Çekme ve İşleme
- Önceki derste API dökümantasyonunu okuma, API'yi alma, API'leri bulma, input'tan veri çekme ve fetch kullanarak ekrana yazdırma işlemleri gösterildi.
- Şimdi API'den gelen verileri alıp işleyeceğiz.
- API'den gelen veriler bir obje olarak dönüyor ve bu obje içerisinde kendi objeler bulunuyor.
- 20:08API Verilerine Erişim
- API'den gelen verileri almak için obje ile yakalama işlemi yapılıyor.
- Nemi, country, temp, feels like ve weather description gibi veriler alınıyor.
- Weather description kısmı bir dizi olduğu için dizinin içerisindeki objeye erişerek alınıyor.
- 23:52Verileri HTML'e Yazdırma
- Alınan verileri HTML'deki ilgili id'li elemanlara yazdırmak için document.querySelector kullanılıyor.
- City, temperature, weather description ve feels like id'li elemanlara erişiliyor.
- Alınan veriler (nem, sıcaklık, hava durumu ve hissedilen) HTML elemanlarının text content'ine atanıyor.
- 28:55Projenin Tamamlanması
- Proje otuz dakikada tamamlanıyor.
- Fetch, inputtan veri çekme, fetch'ten gelen verileri ekrana bastırma ve iç verileri değiştirme işlemleri kullanılıyor.
- Bu proje için React versiyonu da gelecek ve React'ta to app de yapılacak.