Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Spotify, milyonlarca şarkı, albüm ve çalma listesi içeren bir katalogla müzik akışı yapma şeklimizi tamamen değiştirdi.

Web API'sini kullanarak kendi React müzik arama uygulamanızı oluşturarak Spotify deneyimlerinizi daha da eğlenceli hale getirebilirsiniz. API, özel bir müzik uygulaması oluşturmak ve zevkinize göre kişiselleştirmek için kullanabileceğiniz bir dizi müzik verisine erişim sağlar.

Geliştiriciler için Spotify

Spotify, arama, çevrimdışı oynatma ve kişiselleştirilmiş öneriler gibi çok çeşitli müzik akışı özellikleri sunar. Geliştiriciler için Spotify platformu, bu özellikleri destekleyen API'lere ve SDK'lara erişim sağlar. Bu kılavuzda, web API'sini keşfedecek ve beğendiğiniz şarkıları aramak için onu React uygulamanıza nasıl entegre edeceğinizi öğreneceksiniz.

Bir Hesap İçin Kaydolun

Başlamak için bir Spotify hesabınızın olması gerekir. Henüz sahip değilseniz, ziyaret edin

instagram viewer
Spotify kayıt sayfası. Ancak, zaten bir hesabınız varsa, şu adreste oturum açın: Geliştiriciler için Spotify konsol.

Başvurunuzu Kaydedin

Geliştirici konsolunda oturum açtıktan sonra, web API'sine erişim elde etmek için uygulamanızı kaydedin. Pano sayfasında, Bir Uygulama Oluşturun düğmesini tıklayın, adı ve açıklamayı girin ve son olarak, uygulamayı oluşturmak için hüküm ve koşulları kabul edin.

Son olarak, tıklayın Ayarları Düzenle Yönlendirme URL'si ayarlarına geçmek için düğmesine basın. Uygulamanız hala geliştirme modunda olduğundan, ekleyin http://localhost: 3000, yönlendirme URL'niz olarak. Bu, kullanıcıyı Spotify ile doğruladıktan sonra yönlendirmek istediğiniz URL'dir.

Başvurunuzu kaydettikten sonra Spotify, benzersiz müşteri kimliğinizi ve aşağıdakileri yapmak için kullanabileceğiniz müşteri sırlarını sağlayacaktır:

  • React uygulamanızda Spotify kimlik bilgilerinizle oturum açmak için Spotify kimlik doğrulama akışını ekleyin.
  • Parçalar veya albümler gibi verileri aramak da dahil olmak üzere farklı web API uç noktalarına istekte bulunmak için benzersiz erişim belirtecinizi alın.

React Client'ı Kurun

Bir React uygulaması oluşturun ve kök dizine gidin ve yeni bir dosya oluşturun, .env, bazı ortam değişkenlerini ayarlamak için. İstemci kimliğinizi Spotify'ın geliştirici kontrol panelinden alabilirsiniz.

REACT_APP_SPOTIFY_CLIENT_ID = "müşteri kimliğiniz"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "jeton"

Bu uygulamanın kodunu kendi içinde bulabilirsiniz. GitHub deposu.

Gerekli Paketleri Kurun

Axios'u kurun. Yöntemlerini Spotify'ın web API'sine HTTP istekleri yapmak için kullanacaksınız.

npm kurulum eksenleri

Spotify'ın Kimlik Doğrulama İş Akışını Ekleyin

Spotify, herhangi bir Web API uç noktasına yönelik tüm isteklerin, istek başlığında geçerli bir erişim belirtecine sahip olduğunu belirtir. Erişim belirtecini almak için uygulamanızın önce Spotify ile kimlik doğrulaması yapması gerekir.

Spotify birkaç tane destekler Kimlik doğrulama ve yetkilendirmeyetkilendirme kodu, müşteri kimlik bilgileri veya örtük izin verme yöntemleri gibi yöntemler.

Uygulanması en basit yöntem, bir uygulamanın kimlik doğrulama uç noktasına istekte bulunmasını (bunu ENV dosyasına eklediniz) istemci kimliğinizi üzerinden geçirmesini gerektiren örtük hibe yöntemidir. Başarılı bir kimlik doğrulamanın ardından Spotify, belirli bir süre boyunca süresi dolan bir erişim belirteci sağlayarak yanıt verecektir.

src/App.js dosyanızı açın, standart React kodunu silin ve aşağıdaki kodu ekleyin:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak arayıcı itibaren'./bileşenler/Arayıcı';
işlevUygulama() {
sabit CLIENT_ID=işlem.env. REACT_APP_SPOTIFY_CLIENT_ID
sabit REDIRECT_URI =işlem.env. REACT_APP_SPOTIFY_REDIRECT_URI 
sabit AUTH_ENDPOINT =işlem.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
sabit RESPONSE_TYPE = işlem.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


sabit [belirteç, setToken] = kullanımDevlet("");


 useEffect(() => { 
sabit karma = pencere.konum.karma;
izin vermek jeton = pencere.localStorage.getItem("jeton");

eğer (karma && karma) {
 belirteç = hash.substring(1).bölmek("&").bulmak(elem => elem.startsWith("erişim belirteci")).bölmek("=")[1];
pencere.konum.karma = "";
pencere.localStorage.setItem("jeton", jeton);
 }


 setToken (belirteç)
 }, [])


sabit çıkış = () => {
 setToken("");
pencere.localStorage.removeItem("jeton");
 }


geri dönmek (


ihracatvarsayılan Uygulama;

Hadi parçalayalım:

  • Bu bileşen, erişim belirteci varsa, arama bileşenini ve oturum kapatma düğmesini koşullu olarak işler. aksi takdirde kullanıcıyı Spotify yetkilendirmesine yönlendiren bir bağlantı içeren bir div oluşturur. sayfa. Bağlantı, CLIENT_ID, REDIRECT_URI ve RESPONSE_TYPE değerlerini belirten sorgu parametreleri içerir.
  • Bir kullanıcının kimliğini doğruladıktan sonra, bileşen takıldığında bir kod bloğu çalıştırmak için useEffect kancasını çağırın. Bu kod bloğu, erişim belirtecini URL karmasından alır ve bunu belirteç durumu değişkeninin yeni değeri olarak ayarlar. Ayrıca, kimlik doğrulama durumunu sürdürmek için belirteci yerel depolamada saklar.
  • Durumda saklanan erişim belirteci ile, Spotify'ın web API'sine istekte bulunmak için Searcher bileşenine bir destek olarak iletilir.
  • Oturumu kapatmak için kod, erişim belirtecini yerel depolamadan kaldırır ve belirteç durumunu boş bir dizeye ayarlar.

Arama İşlevini Uygulama ve Sonuçları Oluşturma

/src dizininde yeni bir klasör oluşturun ve onu component olarak adlandırın. Bu klasörün içinde yeni bir dosya oluşturun: Searcher.js ve aşağıdaki kodu ekleyin.

içe aktarmak Tepki, {useState, useEffect} itibaren'tepki'
içe aktarmak eksenler itibaren"eksen";
işlevarayıcı(sahne) {
sabit [searchKey, setSearchKey] = useState("")
sabit [izler, setTracks] = useState([])

sabit erişim_token = props.token

sabit arama Sanatçısı = zaman uyumsuz () => {
sabit {veri} = beklemek eksenler.get(" https://api.spotify.com/v1/search", {
 başlıklar: {
'İçerik türü': "uygulama/json",
'Yetki': Taşıyıcı ${access_token}`
 },
 parametreler: {
 q: aramaAnahtarı,
 tip: "sanatçı"
 }
 })

var artistID = data.artists.items[0].İD


var sanatçıParçaları = beklemek eksenler.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 başlıklar: {
 Yetki: Taşıyıcı ${access_token}`
 },
 parametreler: {
 sınır: 10,
 pazar: 'BİZ'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


geri dönmek (
 <>


"Arama Formu">
 sınıfAdı ="İsim"
 tür="metin"
 yer tutucu="Sanatçı Adına Göre Ara..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


ihracatvarsayılan arayıcı

Hadi parçalayalım:

  • Bileşen, prop olarak iletilen token özelliğine ayarladığı access_token sabitini tanımlar. Daha sonra API isteğinin başlığındaki bu belirteci Spotify'ın arama API uç noktasına iletir.
  • İki durumu tanımlayın: searchKey ve track. searchKey durumu, arama girişinin geçerli değerini tutar. Parça durumu, Spotify aramasının döndüreceği sanatçı için en iyi 10 parçanın bir dizisini tutar.
  • searchArtist işlevi, searchKey değerine dayalı olarak sanatçıların verilerini aramak için Spotify API'ye bir GET isteği gönderir.
  • Ardından yanıt verilerinden sanatçının kimliğini çıkarır ve o sanatçının en iyi parçalarını almak için başka bir GET isteğinde bulunur. Yanıt verilerinden ilk 10 parçayı çıkarır ve parça değişkenini ayarlar.
  • Bileşen, bir giriş alanı ve bir arama düğmesi döndürür. Bir kullanıcı arama düğmesine tıkladığında, belirli bir sanatçının en iyi parçalarını getirmek ve görüntülemek için searchArtist işlevini çağırır. Son olarak, track dizisindeki ilk beş parçayı bir liste olarak işlemek için harita işlevini kullanır.

Değişiklikleri güncellemek için geliştirme sunucunuzu çalıştırın, ardından http://localhost: Sonuçları görüntülemek için tarayıcınızda 3000.

Uygulamanızı Spotify'ın Özellikleriyle Özelleştirin

Bu kılavuz, sanatçıların müzik verilerini aramak için Spotify'ın web API'sine istekte bulunmak için gereken adımları vurguladı. Ancak, Spotify'ın SDK'ları ve API'leri tarafından sağlanan özellikleriyle, örneğin web oynatma oynatıcısını Spotify'dakiyle aynı görünüm ve hisle entegre etmek gibi daha fazlasını yapabilirsiniz.

Spotify'ın SDK'larının ve API'lerinin avantajı, zengin özelliklere sahip olmaları ve bunları herhangi bir web veya mobil uygulamaya kolayca entegre edebilmenizdir.