Sıfırdan ileriye Javascript'in yeni bir konusuna hoş geldiniz. 21.konu itibariyle Javascript konuları bitti. Bu konudan itibaren Javascriptte başlangıç ve orta seviye projelerle ilerleyeceğiz. Bu kısım da muhtemelen 4 bölümden oluşacak ve serimizi sona erecek. Çok lafı gevelemeden bugün yapacağımı uygulama hakkında konuşalım.
Basit bir html ve css ile tasarımı yaptıktan sonra API yardımı ile görsel bulma uygulaması yapacağız. Input alanına "Car" yazınca araba ile alakalı 5-10 tane (sayı size kalmış) fotoğrafı ekrana yazdıracağız. İyi okumalar
İlk olarak çalışacağımız api Beautiful Free Images & Pictures | Unsplash ile olacaktır. Burada bir tane hesabınız olması gerekir. Size api kullanmak için key verecektir. Kayıt olduktan sonra Your Apps bölümüne gidip yeni bir uygulama açın title ve description sallayabilirsiniz önemi yok. Yaptıktan sonra keys kısmını gördüyseniz hazırız demektir. Önce html ve css daha sonra Javascript kodlarını yazacağız. Ek olarak konunun en altına kaynak kodlarını rar olarak paylaşacağım. Şimdi projeye başlayalım.
Basit bir html ve css ile tasarımı yaptıktan sonra API yardımı ile görsel bulma uygulaması yapacağız. Input alanına "Car" yazınca araba ile alakalı 5-10 tane (sayı size kalmış) fotoğrafı ekrana yazdıracağız. İyi okumalar
İlk olarak çalışacağımız api Beautiful Free Images & Pictures | Unsplash ile olacaktır. Burada bir tane hesabınız olması gerekir. Size api kullanmak için key verecektir. Kayıt olduktan sonra Your Apps bölümüne gidip yeni bir uygulama açın title ve description sallayabilirsiniz önemi yok. Yaptıktan sonra keys kısmını gördüyseniz hazırız demektir. Önce html ve css daha sonra Javascript kodlarını yazacağız. Ek olarak konunun en altına kaynak kodlarını rar olarak paylaşacağım. Şimdi projeye başlayalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Resim Bulma Uygulaması</title>
</head>
<body>
<div class="genel">
<div class="input-alan">
<input type="text" id="input" placeholder="Arama Yapınız...">
<button id="buton">Resimleri Göster</button>
</div>
<div class="resimler"></div>
</div>
<script src="index.js"></script>
</body>
</html>
İlk olarak genel bir div içine input-alan ve resimler divleri tanımladık. input-alan içinde bir adet arama inputu ve buton mevcut. Resimler classında ise resimler gelecek şimdilik boş dursun.
An itibariyle site böyle gözüküyor. Biraz css ekleyelim o halde.
CSS:
.genel {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.input-alan {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
width: 100%;
}
input {
width: 300px;
height: 25px;
border: none;
border-radius: 5px;
outline: none;
border-bottom: 3px solid rgb(211, 211, 211);
}
#buton {
width: 120px;
height: 30px;
border: none;
border-radius: 5px;
outline: none;
border-bottom: 3px solid rgb(211, 211, 211);
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
font-size: 13px;
margin-left: 10px;
cursor: pointer;
transition: 0.2s;
}
#buton:hover {
width: 125px;
height: 32px;
}
.resimler {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
margin-top: 70px;
margin-left: 50px;
}
CSS özelliklerini kendiniz inceleyebilirsiniz. Burada teker teker anlatırsam konu bitmez o zaman uygulamanın son görümüne bakalım.
Tasarım çok da fena değil dilerseniz siz daha uğraşıp güzel yapabilirsiniz. Bu tasarım benim işimi görür. Şimdi Javascripte geçelim.
Öncelikle input alanı, buton ve resimler divlerini alalım.
JavaScript:
let inputAlan = document.querySelector("#input")
let buton = document.querySelector("#buton")
let resimler = document.querySelector(".resimler")querySelector kullanırken alacağımız element yapısını belirtmek zorundayız. Resimler class olduğu için nokta ile tanımlarken buton ve input id değerini aldığımız için "#" ile belirttik.
Şimdi bu dom yapısı çalışıyor mu diye test edelim. Butona basınca input alanındaki değeri konsola yazacağız.
JavaScript:
buton.addEventListener("click", () => {
let inputVeriAl = inputAlan.value
console.log(inputVeriAl)
})
Butona tıklayınca inputtaki verileri alabiliyoruz güzel. Şimdi ise api kullanmaya başlayalım. Önce url adlı değişken oluşturup buna sitenin genel linkini yazıyoruz daha sonra key gibi değerleri gireceğiz.
JavaScript:
let inputAlan = document.querySelector("#input")
let buton = document.querySelector("#buton")
let resimler = document.querySelector(".resimler")
buton.addEventListener("click", () => {
let inputVeriAl = inputAlan.value
const url = `https://api.unsplash.com/search/photos?query=${inputVeriAl}&client_id=AVkzYG2PzTwBjDWjQFPG8AnGSddi6yuOVzsfdojIF2A`
fetch(url)
.then(yanit => yanit.json())
.then(veri => {
console.log(veri)
})
})
İlk olarak url değişkenine sitenin ana linkini ve veriyi almak için kullanacağımız linkleri birleştirdik. (Bu kısımlar dokümantasyonda yazmaktadır. Ezber yapmayın) Daha sonra query yani sorgu kısmına input alanına yazdığımız değeri getirmesini istiyoruz. Böylece kullanıcı araba yazdığında query kısmına araba gelecek ve api bu yönde arama yapacaktır. En sonda ise client_id kısmı var burası ise bize verilen keydir. Direkt kopyala yapıştır yaparak keyi yazın.
Api tanımladık sıra bunu kullanmakta fetch ile url aldıktan sonra then ile önce gelen yanıtları json formatından diziye çevirmesini istedik. Bu sayede veriler dizi şeklinde konsolda göreceğiz. En sonda ise veri adlı değişkeni konsola yazıyoruz ve konsolda 10 adet sorgu çıkıyor. Bu diziye tıkladığımızda bir sürü özellik çıkıyor. Bize sadece resimler yeterli olacağı için veri.urls kullanacağız çünkü burada fotoğrafın linkini görüyorum. Dilerseniz araba adını almak için veri.description gibi şeyleri de kullanabilirsiniz.
Güzel veriyi aldık şimdi yazdıracağız. Yazdırmadan önce birden fazla arama yapabiliriz yani araba aradım sonra çiçek aramak istedim bu durumda araba fotoğrafları gitmesi lazım bunun için innerHtml boş tanımlıyoruz.
JavaScript:
resimler.innerHTML = ""Bu sayede uygulamayı her başlattığımızda önceki veriler silenecektir.
Aldığımız veri türü dizi. Biz 10 içeriğin 10'unu da alabilmek için bu dizi içinde döngü kullanarak tek tek hepsini almayalız. Ben forEach tercih ediyorum siz for veyea map de kullanabilirsiniz.
JavaScript:
buton.addEventListener("click", () => {
let inputVeriAl = inputAlan.value
const url = `https://api.unsplash.com/search/photos?query=${inputVeriAl}&client_id=AVkzYG2PzTwBjDWjQFPG8AnGSddi6yuOVzsfdojIF2A`
fetch(url)
.then(yanit => yanit.json())
.then(veri => {
resimler.innerHTML = ""
veri.results.forEach(sonucAl => {
let foto = document.createElement("img")
foto.src = sonucAl.urls.small
foto.style.width = "300px"
foto.style.height = "200px"
foto.style.margin = "20px"
resimler.appendChild(foto)
})
})
})
veri.results değerini forEach ile döngüyle döndürüyoruz. Böylece dizi içindeki tüm değerleri teker teker alıyoruz. Daha sonra foto değişkenine img elementi oluştur diyoruz. (Resim için)
Foto.src ile birnevi img elementini alacağı linki/yolu gösteriyoruz. Normalde img elementini kullanırken de photos/img.jpg tarzı bir yol belirtiyorduk mantık aynı yine.
Fotoğraflar için yolu belirttikten sonra tamamen css özellikleriyle oynayıp en sonda ise resimler divinin içinde foto elemanlarını göster diyoruz.
Artık projemiz kullanıma hazır. Bir de biz deneyelim.
Görüldüğü üzere gayet iyi çalışıyor. Burada dikkatinizi urls.small, veri.results gibi değerler nereden geldi diyorsanız bu apinin bize verdiği parametreler. Bunu ben uydurmadım veya başkası. Dokümantasyonda sen eğer diziye ulaşmak istiyorsan değişken.results yaz ulaş diziye veya resimler için değişken.urls.small parametresini yaz ulaş resimlere tarzı bilgilendiriyor. Biz bu sayede ulaşıyoruz resimlere ve dizilere zaten.
Başka da anlatılacak bir şey yok gibi kaynak kodlarını aşağıdaki linkten ulaşabilirsiniz. Her kodun altına açıklama satırı ekledim bu sayede nerde ne yapılmış anlayabilirsiniz. Başka bir konuda görüşmek üzere okuduğunuz için teşekkürler.
Başka da anlatılacak bir şey yok gibi kaynak kodlarını aşağıdaki linkten ulaşabilirsiniz. Her kodun altına açıklama satırı ekledim bu sayede nerde ne yapılmış anlayabilirsiniz. Başka bir konuda görüşmek üzere okuduğunuz için teşekkürler.
