Spotify'da son dinlediğiniz müzikleri websitenize/profilinize ekleyin. Vercel tarafından desteklenmektedir.
Aşağıdaki "Yetkilendir" düğmesine tıklayarak Spotify hesabınızı bağlayın. Bu, son dinlediğiniz müziklere erişmek için gereklidir.
Uygulamayı yetkilendirerek, Spotify kullanıcı adınız, erişim tokeniniz ve yenileme tokeninizin güvenli bir şekilde Google Firebase veritabanında saklanmasına izin veriyorsunuz. Bu, yalnızca bir kez yetkilendirme yapmanızı ve uygulamanın otomatik olarak erişim tokeninizin yenilemesini sağlar.
Uygulamanın verinize erişimini https://www.spotify.com/account/apps adresinden iptal edebilirsiniz.
Yetkilendirdikten sonra, aşağıdaki kodu websitenize/profilinize ekleyin ve ?user=xxxxx parametresindeki xxxxx kısmına Spotify kullanıcı adınızı yazın.
<img src="https://spotify.mdusova.com/api?user=xxxxx" alt="Spotify Son Dinlenen Müzikler by madtethys" />Listede bulunacak müzik sayısını ayarlamak için API URL'sine &count=x ekleyebilirsiniz. xin alabileceği değerler:
Varsayılan:
5
Minimum:1
Maksimum:10
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
<img src="https://spotify.mdusova.com/api?user=31e4wu2ua42rf5qvqaukgjwgz7tu&count=3" alt="Spotify Son Dinlenen Müzikler by madtethys" />Listenin genişliğini ayarlamak için API URL'sine &width=xxx ekleyebilirsiniz. xxxin alabileceği değerler:
Varsayılan:
400
Minimum:300
Maksimum:1000
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
<img src="https://spotify.mdusova.com/api?user=31e4wu2ua42rf5qvqaukgjwgz7tu&width=600" alt="Spotify Son Dinlenen Müzikler by madtethys" />Listede tekrar dinlenen müzikleri göstermek için API URL'sine &unique=true ekleyebilirsiniz.
Varsayılan olarak URL'ye eklenmemiş haldedir. Yani listede tekrar dinlediğiniz müzikler gösterilmeyecektir. API URL'sine
&unique=trueeklediğinizde listede tekrar dinlediğiniz müzikleri görebilirsiniz.
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
ℹ️ ?user= parametresini kendi kullanıcı adınıza göre düzenlemeyi unutmayın!
<img src="https://spotify.mdusova.com/api?user=31e4wu2ua42rf5qvqaukgjwgz7tu&unique=true" alt="Spotify Son Dinlenen Müzikler by madtethys" />• BÖLÜM 2.3: Kullanıcı dostu arayüz ile ayarlar sekmesini kullanarak liste genişliğini, gösterilecek müzik sayısını ve parça benzersizliğini ayarlama
Yeni kullanıcı dostu arayüz ile ayarlar sekmesini kullanarak liste genişliğini, gösterilecek müzik saysını ve tekrar oynatılan müzikleri URL'ye herhangi bir değer vermeden kolayca düzenleyebilirsiniz.
Kendi uygulamanızı oluşturmak için yukarıdaki bağlantıyı kullanın. Sonra, aşağıdaki ortam değişkenlerini(environment/env) ayarlayın:
| Değer | Açıklama |
|---|---|
NEXT_PUBLIC_REDIRECT_URI |
Spotify callback URI'si http://alanadiniz.com/api/callback |
NEXT_PUBLIC_BASE_URL |
Projenin URL'si |
NEXT_PUBLIC_CLIENT_ID |
Spotify uygulaması istemci kimliği |
CLIENT_SECRET |
Spotify uygulaması istemci gizli anahtarı |
FIREBASE_PROJECT_ID |
Firebase proje kimliği(ID) |
FIREBASE_PRIVATE_KEY_B64 |
Firebase sistem kullanıcısı özel anahtarının base64 encode edilmiş hali |
FIREBASE_CLIENT_EMAIL |
Firebase sistem kullanıcı e-postası |
FIREBASE_DATABASE_URL |
Firebase veritabanı URL'si |
Son olarak, utils/Constants.ts dosyasını düzenleyin ve ClientId, BaseUrl, RedirectUri değerlerini ayarlayın.
- Git ile projeyi klonlayın:
$ git clone https://github.com/madtethys/spotify-son-dinlenenler.git
- Node modüllerini yükleyin:
$ npm install
- Gerekli ortam değişkenlerini içeren
.envdosyasını oluşturun:NEXT_PUBLIC_REDIRECT_URI=<Spotify callback URI'si http://localhost:3000/api/callback> NEXT_PUBLIC_BASE_URL=<Projenin URL'si yerelde çalıştırmak için (http://localhost:3000)> NEXT_PUBLIC_CLIENT_ID=<Spotify uygulaması istemci kimliği> CLIENT_SECRET=<Spotify uygulaması istemci gizli anahtarı> FIREBASE_PROJECT_ID=<Firebase proje kimliği(ID)> FIREBASE_PRIVATE_KEY_B64=<Firebase sistem kullanıcısı özel anahtarının base64 encode edilmiş hali> FIREBASE_CLIENT_EMAIL=<Firebase sistem kullanıcı e-postası> FIREBASE_DATABASE_URL=<Firebase veritabanı URL'si>
utils/Constants.tsdosyasını düzenleyin veClientId,BaseUrl,RedirectUrideğerlerini ayarlayın.- Projeyi başlatın:
$ npm run dev
📍 Uygulamanız http://localhost:3000 başlamış olacaktır.
✔️ Bazen GitHub'da widget yüklenmiyor ve camo.githubusercontent.com'dan 502 yanıt alıyor olabilirsiniz. Bu, GitHub'nın resimleri proxy etmesi ve uzun süreli isteklerin zaman aşımına uğraması nedeniyle oluyor. Uzun istek süreleri genellikle Firebase veritabanı sunucu uzaklığı nedeniyle oluyor, bu da birkaç saniye sürebiliyor. Eğer sayfayı yenilediğinizde halen daha görüntü yüklenmiyorsa Firebase projenizi başka bir Google hesabıyla tekrardan oluşturabilirsiniz.
ℹ️ Bu, kesin bir çözüm olmayabilir ve sorunu %100 ortadan kaldırmayabilir. Daha iyi çözümleriniz varsa veya genel optimizasyonlarınız varsa, bana iletebilirsiniz!
✔️ Spotify uygulaması istemci kimliği, Spotify'da oluşturduğunuz uygulamanın kimliğidir. Bu kimlik, Spotify'da uygulamanızı tanımlamak için kullanılır ve NEXT_PUBLIC_CLIENT_ID ortam değişkeninde ayarlanmalıdır.
✔️ Spotify uygulaması istemci gizli anahtarı, Spotify'da oluşturduğunuz uygulamanın gizli anahtarıdır. Bu anahtar, Spotify'da uygulamanızı tanımlamak için kullanılır ve CLIENT_SECRET ortam değişkeninde ayarlanmalıdır.
✔️ Firebase proje kimliği(ID), Firebase'da oluşturduğunuz projenin kimliğidir. Bu kimlik, Firebase'da projenizi tanımlamak için kullanılır ve FIREBASE_PROJECT_ID ortam değişkeninde ayarlanmalıdır.
✔️ Firebase sistem kullanıcısı özel anahtarının base64 encode edilmiş hali, Firebase'da oluşturduğunuz projenin özel anahtarının base64 şeklinde encode edilmiş halidir. Bu anahtar, Firebase'da projenizi tanımlamak için kullanılır ve FIREBASE_PRIVATE_KEY_B64 ortam değişkeninde ayarlanmalıdır.
✔️ Firebase sistem kullanıcı e-postası, Firebase'da oluşturduğunuz projenin sistem kullanıcısının e-postasıdır. Bu e-posta, Firebase'da projenizi tanımlamak için kullanılır ve FIREBASE_CLIENT_EMAIL ortam değişkeninde ayarlanmalıdır.
✔️ Firebase veritabanı URL'si, Firebase'da oluşturduğunuz projenin veritabanı URL'sidir. Bu URL, Firebase'da projenizi tanımlamak için kullanılır ve FIREBASE_DATABASE_URL ortam değişkeninde ayarlanmalıdır.
Kullanıcı deneyimini daha da iyileştirmek amacıyla karanlık tema desteği ekledik! Gece kullanımı için daha uygun bir arayüz sunarak göz yorgunluğunu azaltmayı hedefliyoruz. Koyu mod, kullanıcıların daha rahat bir deneyim yaşamasına yardımcı olacak.
API'nin URL'siyle uğraşmanıza gerek kalmadan, artık ayarlar sekmesinden kolayca ayarlamalar yapabileceksiniz. Bu yeni özellik sayesinde, URL’yi daha basit ve hızlı bir şekilde temin edebilir, tüm yapılandırmaları tek bir yerden yönetebilirsiniz. Kullanıcı dostu arayüzümüzle, istediğiniz ayarları kolayca yapılandırarak API deneyiminizi kişiselleştirin. Tüm ayarlarınızı tek bir tıkla güncelleyerek zamandan tasarruf edin!
API'den aldığımız görüntüyü Instagram hikayesinde paylaşma özelliği eklendi! Artık son dinlediğiniz müzikleri kolayca hikayenizde paylaşabilirsiniz. Üstelik, paylaşım yaparken görselin arka planını değiştirebilme seçeneğiniz de var. Böylece müziklerinizi daha özgün bir şekilde sunabilir, kendi tarzınıza uygun bir estetik yaratabilirsiniz.
Projemiz artık tamamen Türk sunucularına taşınmış durumda! Bu sayede %100 anlık veri çekme kapasitesine ulaştık. Önceki gecikme sorunları, projenin Vercel'in Europe-West1 (İrlanda) ve Firebase Veritabanı'nın Europe-West1 (Belçika) sunucularında bulunmasından kaynaklanıyordu.
Şimdi anlık veri çekme performansımız önemli ölçüde iyileşti ve kullanıcı deneyiminizi daha da geliştirmek için çalışmalara devam ediyoruz.
Gizlilik politikasını buradan okuyabilirsiniz.
Bu proje Apache License 2.0 altında lisanslanmıştır. Daha fazla bilgi için lisans dosyasına bakınız.