yeni bir yol, API ve incelikleri
Selam, nasılsın? Bugün seninle API kavramını daha detaylı inceleyeceğiz. başlıca ne olduğunu ve ne işe yaradığını önceki yazımda anlattım.(bkz: yeni bir yol, api nedir?)
Başlarken kullanacağımız tür olarak REST kategorisini seçiyorum. Günümüzde popüler, kullanımı kolay(bence) ve karşılacağın sorunlar için fazlasıyla dökümantasyona sahip. Ana sayfamın en altında bulunan “şu an … dinliyorum” yazısı hiç dikkatini çekti mi?
Şimdi onu nasıl kendin için tasarlayacağını öğreteceğim. Bu API Spotify hesabını kaynak alarak o an ne dinlediğini güncel olarak gösterir, her 3 saniyede bir kendini yenileyerek sen sayfayı yenilemeden benim dinlediğim şarkılar anlık olarak oradan geçer.
REST kullanımı için en kolay yollardan birisi, JavaScript kütüphanelerini kullanmaktır. senin için basit bir HTML sayfası oluşturdum.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
</body>
</html>
Öncelikle kullanacağın kütüphaneyi seçmelisin. Ben kullanım kolaylığı açısından JQuery kullanacağım.(alternatif olarak angularJS ya da react.js tercih edilebilir)
Şimdi JQuery’i HTML sayfana yerleştirmek için sana bir CDN (content delivery network yani içerik dağıtım ağı) adresi gerekiyor. Bunun için Clouflare’in cdnjs servisini seçtim. Jquery olarak terimi arat ve ilk seçeneğe git.
Ardından “jquery.min.js” isimli dosyayı seç. min, minified Demektir sunucunda daha az yer kaplar ve daha hızlı çalışır.(kod dizilimini öğrenmek istersen jquery.js seçeneğini kullan)
Artık kütüphaneyi HTML sayfasına yerleştirebilirsin. Elinde şöyle bir kod olması gerekiyor.(aşağıdaki kod benim tarafımdan kısaltıldı, kanımca böyle kullanmak daha mantıklı)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
Ardından bu kodu sayfandaki iki “body” etiketinin arasına bırak. sonuç aşağıdaki gibi olmalı.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
</body>
</html>
Artık sayfanda JQuery’den yararlanabilirsin. Kullanacağımız 3. parti API Aiden Wallis’in Spotify’ı. öncelikle şu adrese gir. “Login With Spotify” butonunu kullanarak giriş yapıp, gerekli izinleri ver. Elinde şuan şöyle bir URL olmalı:
https://spotify.aidenwallis.co.uk/u/xxxxxxxxxxxxxxxxxxxxxxxx
Denemek adına bir parça açıp sayfayı yenile, herhangi bir şey dinlemediğin zamanlarda “User is currently not playing any music on Spotify.” ibaresi görünüyor olmalı.
Şimdi bu URL’yi JQuery ile birleştirip HTML sayfanda kullan. Herhangi bir kaynak URL’den içerik alabilmek için “fetch” ve bu içeriği sürekli yenilemek için “setInterval” methodlarını kullandım.
Senin için hazırladığım kod hemen aşağıda onu kendi URL’ni kullanarak değiştir ve burada test et.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<center><p>şu an <span id=sp-wg></span> dinliyorum.</p></center>
<script>
setInterval(function(){
fetch('https://spotify.aidenwallis.co.uk/u/xxxxxxxxxxxxxxxxxxxxxxxx')
.then(res => res.text())
.then((textResponse) => {
document.querySelector('#sp-wg').textContent = textResponse.replace('User is currently not playing any music on Spotify.', 'kendimi');
});
}, 3000);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
</body>
</html>
Zor veya karışık gelebilir. İnan bana “girince alışıyorsun” terimi yazılım için en doğru terimlerden biri. Hırsını kaybetme, seni bekliyor olacağım.
Başka bir yazıda tekrar görüşmek üzere.
kendine iyi bak, iyi şanslar.