Spotify ve Netlify Fonksiyonları ile Ne Dinliyorum Aracı Oluşturma
yazıldı
•
2 dakika okuma süresi
Son zamanlarda bazı blogları gezerken insanların sitelerine Spotify’da o an ne dinlediklerini gösteren bir araç eklemeye başladıklarını gördüm. Bu sitelerin çoğu React ile yapıldığı için kendi 11ty siteme eklemeye kalktığımda ortalık biraz kirlenmeye başlıyordu. Haliyle kendi çözümümü aramaya başladım. İnternet'ten bulduğum bir kaç örneği birleştirip aşağıdaki gibi bir şey yaptım.
Başlamadan önce aşağıdaki komut ile sitemizde kullanacağımız npm paketlerini ekliyoruz. Ben paket yöneticisi olarak yarn kullanıyorum, siz dilerseniz npm ile yüklersiniz.
Üç adet dosya oluşturacağız. Birincisi Netlify Fonksiyonu için:
Bu dosyayı projemizin kök klasörünün içerisinde .netlify/functions
klasöründe tutmamız gerekiyor, örneğin .netlify/functions/now-playing/now-playing.js
gibi. Bu kodun çalışabilmesi için Netlify üzerinden Graph kısmına girip Config‘e girerek API Authentication bölümünden Spotify girişini yapmanız gerekiyor. Fonksiyon çalıştığında bize cevap olarak çalan şarkını linkini (href), adını (name), sanatçısını (artist) ve albüm kapağını (cover) verecek. Daha fazlasını eklemek isterseniz currentTrack.body.item
ile gelen JSON kodunu inceleyip istediğiniz kısımlarını ekleyebilirsiniz.
Daha sonrasında bu fonksiyondan gelen cevabı işleyip kullanacağımız scripti ekliyoruz. Bu dosyayı sitemizin içerisinden çağıracağımız için kendi düzeninize göre bir yere kaydedin. Ben tüm stilleri, scriptleri ve yazı tiplerini assets diye bir klasörde sakladığım için src/assets/js/now-playing.js
olarak kaydediyorum. Gelelim scriptimize;
Burada eğer fonksiyon yanıt verirse gelen sonucu sitemizdeki #now-playing-title
, #now-playing-artist
ve #now-playing-cover
kimliğine sahip kısımlara ekliyor. Tabi sitemizde bu alanların olması gerekiyor. Bunun için de hazırlayacağımız son dosyaya geliyoruz. Bunun için ayrı bir dosya da hazırlayıp çağırabilirsiniz, direkt hazır olan şablonunuzda göstereceğiniz kısma da ekleyebilirsiniz, size kalmış.
Ben bunu src/_includes/partials/nowplaying.njk
olarak kaydettim ve src/_includes/layouts/home.njk
üzerinden çağırıyorum sadece anasayfamda gösterdiğim için.
Hepsi bu kadar.