Konu Başlıkları Gizle
Merhaba,
Yakın bir zamanda @uintptr, Spotify'da Latin alfabesi dışındaki alfabelerden harf içeren şarkı başlıklarını kopyalamak için güzel bir site paylaşmıştı: Çözüm: Spotify'da şarkı başlığı nasıl kopyalanır?
Siteye buradan da ulaşabilmeniz için bağlantısını burada da paylaşayım: Copy Spotify song name.
Siteyi proje olarak çok beğendim. NextJS ile geliştirilmiş, yeterince küçük ve pratik bir proje. Bunun üstüne ben de sitenin bir klonunu geliştirmeye karar verdim ve şu an paylaşmaya hazır olmam mutlu ediyor.
Hazırladığım klon siteye buradan ulaşabilirsiniz: Spotify Viewer.
Klonunun aslına göre öne çıkan özelliklerinden biri Türkçe bağlantılar için de çalışabiliyor olması yani bağlantıda
Tam bir kaos, değil mi? İşte, bir şekilde inceleme yapmak gerekiyor. Ben yaptım ve dediğim gibi ihtiyaç duyulan tüm bilgilerin
Site, Sosyal'de paylaşılmış olan harika bir şarkı için aşağıdaki şekilde görünüyor:
Anlatımı olabildiğince kısa tutmaya çalıştım, yalnızca bazı kritik noktaları nasıl hallettiğimin üzerinde durdum. Aklınıza takılan herhangi bir yer olursa lütfen sormaktan asla çekinmeyin, tavsiyede bulunmak isterseniz tabii ki buyurun.
Bu arada projenin GitHub reposunu da paylaşayım: GitHub - spotifyviewer/spotify-viewer
Umarım beğenebileceğiniz bir içerik olmuştur. Okuduğunuz için teşekkürler ve...
Yakın bir zamanda @uintptr, Spotify'da Latin alfabesi dışındaki alfabelerden harf içeren şarkı başlıklarını kopyalamak için güzel bir site paylaşmıştı: Çözüm: Spotify'da şarkı başlığı nasıl kopyalanır?
Siteye buradan da ulaşabilmeniz için bağlantısını burada da paylaşayım: Copy Spotify song name.
Siteyi proje olarak çok beğendim. NextJS ile geliştirilmiş, yeterince küçük ve pratik bir proje. Bunun üstüne ben de sitenin bir klonunu geliştirmeye karar verdim ve şu an paylaşmaya hazır olmam mutlu ediyor.
Hazırladığım klon siteye buradan ulaşabilirsiniz: Spotify Viewer.
Klonunun aslına göre öne çıkan özelliklerinden biri Türkçe bağlantılar için de çalışabiliyor olması yani bağlantıda
/intl-tr/ segmenti varsa bile çalışıyor. Diğer diller için de çalışıyor olmalı. Sanırım asıl sitede bunun kontrolünü bağlantının https://open.spotify.com/track/ ile başlayıp başlamadığına bakarak sağlamışlar, denemelerim sonucunda bulunduğum bir tahmin. Ben bağlantıya istek atma sonrası herhangi bir hata olursa ona göre bir şeyler yapıyorum, bağlantı formatına karışmıyorum.Kullandığım teknolojiler
- Öncelikle, T3 Stack'i kullandım. Dil olarak TypeScript kullandım.
- NextJS (App Router): React'i temel alan, projenin ana frameworkü bu.
- tRPC: API sistemini pratik bir şekilde kurabiliyorsunuz.
- Tailwind CSS: Kapsamlı bir CSS kütüphanesi.
- Zod: Validation kütüphanesi. Neredeyse hiç kullanmadım aslında.
- React Spring: Animasyon kütüphanesi. Temel düzeyde, geçişlerde şeffaflığı ayarlamada kullandım.
- Cheerio: NodeJS için bir HTML parser/scraper kütüphanesi. Spotify şarkı bağlantısına
GETisteği attıktan sonra cevap olarak şarkı sayfasının HTML dokümanı bir string hâlinde geliyor, sonrasını Cheerio hallediyor. - React Icons: 2-3 adet ikon kullandım bu kütüphaneden: yüklenme, kopyalama ve tik ikonları.
Nasıl çalışıyor bu site?
Bir şarkı bağlantısını ele alalım, örneğin tam şu an dinlediğiminki:https://open.spotify.com/intl-tr/track/7yzFUknHiad4kRBfHq2ki1. Bu bağlantıya bir GET isteği attığınızda yukarıda da söylediğim gibi cevap olarak size sayfanın HTML dokümanı geliyor. İşin harika tarafı, ihtiyaç duyduğumuz tüm bilgilerin <head> kısmında, <meta> etiketleriyle sağlanıyor olması. Bu durum, scraping yani HTML dokümanından anlamlı veri çekme aşamasını acayip kolaylaştırdı. Bunu, bağlantıya tarayıcınızdan girip sayfanın kaynağını inceleyerek de görebilirsiniz. Sayfada sağ tıklayınca tarayıcı menüsü açılmadığı için bunu örneğin Chrome'da Ctrl + U ile yapabilirsiniz:
Tam bir kaos, değil mi? İşte, bir şekilde inceleme yapmak gerekiyor. Ben yaptım ve dediğim gibi ihtiyaç duyulan tüm bilgilerin
<meta>'larda tutuluyor olduğunu gözlemledim:<meta name="music:duration" content="287"/>: Şarkının saniye cinsinden süresi. Bunu sitede kullanmıyor olduğumu fark ettim. API'ım aslında front-ende gönderiyor ama kullanmıyorum. Neyse, sonra bir şekilde kullanırım belki, çok önemli bir bilgi değil.<meta name="music:album" content="https://open.spotify.com/album/0ApKaazNHf0gzjAYZauexq"/>: Albüm bağlantısı. Albüme yönlendirmek için kullanıyorum.<meta name="music:album:track" content="6"/>: Şarkının albümdeki sırası. Kullanmadığım bir bilgi.<meta name="music:release_date" content="2014-10-15"/>: Şarkının yayın tarihi.al:vetwitter:ön ekli bilgiler de var fakat hiç kullanma ihtiyacı duymadım.<meta name="music:musician" content="https://open.spotify.com/artist/05fG473iIaoy82BF1aGhL8"/>: Sanatçı bağlantısı. Kaç sanatçı varsa aynıname'e sahip o kadar<meta>oluyor. Bu şarkıda tek sanatçı olduğu için bir tane var.<meta name="music:musician_description" content="Slipknot"/>: Sanatçı ismi. Birden fazla sanatçı varsa bile tek etikette, virgüllerle ayrılmış hâlde oluyor.<meta property="og:title" content="Skeptic"/>: Şarkı ismi. Site, tam olarak bunu kopyalayabilmemizi sağlıyor.<meta property="og:description" content="Slipknot · Song · 2014"/>: Şarkı açıklaması. Öylesine, güzel bir bilgi olarak kullandım.<meta property="og:url" content="https://open.spotify.com/track/7yzFUknHiad4kRBfHq2ki1"/>: Şarkı bağlantısı.- Arada bir sürü
og:restrictions:country:allowed'lular var. Bir sonraki için bunları geçmek gerekiyor. <meta property="og:image" content="https://i.scdn.co/image/ab67616d0000b273eed722040c6810f7a7da93ea"/>: Şarkı kapak resminin bağlantısı.
<head> kısmını aldım ve ardından ilgili name/property bilgisine sahip <meta>'ları aldım ve bunların content bilgilerini çektim, bu kadar. Bu işleri sunucuda yapıyor ve istemciye JSON formatında yolluyorum.Site, Sosyal'de paylaşılmış olan harika bir şarkı için aşağıdaki şekilde görünüyor:
Anlatımı olabildiğince kısa tutmaya çalıştım, yalnızca bazı kritik noktaları nasıl hallettiğimin üzerinde durdum. Aklınıza takılan herhangi bir yer olursa lütfen sormaktan asla çekinmeyin, tavsiyede bulunmak isterseniz tabii ki buyurun.
Bu arada projenin GitHub reposunu da paylaşayım: GitHub - spotifyviewer/spotify-viewer
Umarım beğenebileceğiniz bir içerik olmuştur. Okuduğunuz için teşekkürler ve...
İyi Sosyal'ler!
Son düzenleyen: Moderatör:
Uygulamadan kopyalanmıyor ya sanırım, o noktada işe yarıyor site. Ne var ki Spotify web sayfasından kopyalanabiliyormuş, sizin mesajınızdan sonra denedim. 
Hani bir avantajı şu ki siteden "tek tıkla" kopyalanabiliyor.
Çok haklısınız.
