Δημιουργήστε μια εφαρμογή αναζήτησης μουσικής με το React και το Spotify API

Το Spotify άλλαξε εντελώς τον τρόπο μετάδοσης μουσικής με έναν κατάλογο που περιέχει εκατομμύρια τραγούδια, άλμπουμ και λίστες αναπαραγωγής.

Χρησιμοποιώντας το web API του, μπορείτε να κάνετε τις εμπειρίες σας στο Spotify ακόμα πιο διασκεδαστικές δημιουργώντας τη δική σας εφαρμογή αναζήτησης μουσικής React. Το API παρέχει πρόσβαση σε μια σειρά δεδομένων μουσικής που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε μια προσαρμοσμένη εφαρμογή μουσικής και να την εξατομικεύσετε στα γούστα σας.

Spotify για προγραμματιστές

Το Spotify προσφέρει ένα ευρύ φάσμα δυνατοτήτων ροής μουσικής, όπως αναζήτηση, αναπαραγωγή εκτός σύνδεσης και εξατομικευμένες προτάσεις. Η πλατφόρμα Spotify for Developers παρέχει πρόσβαση στα API και τα SDK που τροφοδοτούν αυτές τις δυνατότητες. Σε αυτόν τον οδηγό, θα εξερευνήσετε το web API και θα μάθετε πώς να το ενσωματώσετε στην εφαρμογή React για να αναζητήσετε τραγούδια που σας αρέσουν.

Εγγραφείτε για λογαριασμό

Για να ξεκινήσετε, πρέπει να έχετε λογαριασμό Spotify. Εάν δεν έχετε ήδη ένα, επισκεφθείτε τη σελίδα εγγραφής στο Spotify. Ωστόσο, εάν έχετε ήδη ένα, συνδεθείτε στο Spotify για προγραμματιστές κονσόλα.

Καταχωρήστε την Αίτησή σας

Αφού συνδεθείτε στην κονσόλα προγραμματιστή, καταχωρήστε την αίτησή σας για να αποκτήσετε πρόσβαση στο web API. Στη σελίδα του πίνακα ελέγχου, κάντε κλικ στο Δημιουργήστε μια εφαρμογή κουμπί, συμπληρώστε το όνομα και την περιγραφή και, τέλος, αποδεχτείτε τους όρους και τις προϋποθέσεις για τη δημιουργία της εφαρμογής.

Τέλος, κάντε κλικ στο Επεξεργασία ρυθμίσεων κουμπί για αλλαγή στις ρυθμίσεις διεύθυνσης URL ανακατεύθυνσης. Εφόσον η εφαρμογή σας βρίσκεται ακόμα σε λειτουργία ανάπτυξης, προσθέστε http://localhost: 3000 ως URL ανακατεύθυνσής σας. Αυτή είναι η διεύθυνση URL στην οποία θέλετε να ανακατευθύνετε τον χρήστη μετά τον έλεγχο ταυτότητας με το Spotify.

Μετά την εγγραφή της αίτησής σας, το Spotify θα παράσχει το μοναδικό αναγνωριστικό πελάτη και τα μυστικά πελάτη που μπορείτε να χρησιμοποιήσετε για:

• Προσθέστε τη ροή ελέγχου ταυτότητας Spotify, για να συνδεθείτε με τα διαπιστευτήριά σας Spotify στην εφαρμογή React.
• Αποκτήστε το μοναδικό διακριτικό πρόσβασής σας, για να υποβάλετε αιτήματα σε διαφορετικά σημεία λήξης API ιστού, συμπεριλαμβανομένης της αναζήτησης δεδομένων όπως κομμάτια ή άλμπουμ.

Ρυθμίστε το React Client

Δημιουργήστε μια εφαρμογή React και πλοηγηθείτε στον ριζικό κατάλογο και δημιουργήστε ένα νέο αρχείο, .env, για να ορίσετε ορισμένες μεταβλητές περιβάλλοντος. Μπορείτε να λάβετε το αναγνωριστικό πελάτη σας από τον πίνακα ελέγχου προγραμματιστών του Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "το αναγνωριστικό πελάτη σας"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "ένδειξη"

Εγκαταστήστε τα απαιτούμενα πακέτα

Εγκαταστήστε το Axios. Θα χρησιμοποιήσετε τις μεθόδους του για να υποβάλετε αιτήματα HTTP στο web API του Spotify.

npm εγκατάσταση axios

Προσθέστε τη ροή εργασιών ελέγχου ταυτότητας του Spotify

Το Spotify καθορίζει ότι όλα τα αιτήματα σε οποιοδήποτε τελικό σημείο API Web έχουν ένα έγκυρο διακριτικό πρόσβασης στην κεφαλίδα αιτήματος. Για να αποκτήσετε το διακριτικό πρόσβασης, η εφαρμογή σας πρέπει πρώτα να πραγματοποιήσει έλεγχο ταυτότητας με το Spotify.

Το Spotify υποστηρίζει πολλά έλεγχο ταυτότητας και εξουσιοδότησημεθόδους όπως ένας κωδικός εξουσιοδότησης, διαπιστευτήρια πελάτη ή σιωπηρές μέθοδοι χορήγησης.

Η απλούστερη στην εφαρμογή είναι η σιωπηρή μέθοδος επιχορήγησης που απαιτεί μια εφαρμογή να υποβάλλει αιτήματα στο τελικό σημείο εξουσιοδότησης (το προσθέσατε στο αρχείο ENV), περνώντας από το αναγνωριστικό πελάτη σας. Μετά τον επιτυχή έλεγχο ταυτότητας, το Spotify θα απαντήσει παρέχοντας ένα διακριτικό πρόσβασης που λήγει σε μια καθορισμένη περίοδο.

Ανοίξτε το αρχείο src/App.js, διαγράψτε τον κωδικό React του boilerplate και προσθέστε τον παρακάτω κώδικα:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή Ερευνητής από'./components/Searcher';
λειτουργίαApp() {
συνθ CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
συνθ REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
συνθ AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
συνθ RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
συνθ [token, setToken] = useState("");
 useEffect(() => { 
συνθ κατακερματισμός = παράθυρο.location.hash;
αφήνω μάρκα = παράθυρο.localStorage.getItem("ένδειξη");

αν (κατακερματισμός && κατακερματισμός) {
 token = hash.substring(1).διαίρεση("&").εύρημα(στοιχ => elem.startsWith("διακριτικό πρόσβασης")).διαίρεση("=")[1];
παράθυρο.τοποθεσία.hash = "";
παράθυρο.localStorage.setItem("ένδειξη", διακριτικό);
 }
 setToken (κουπόνι)
 }, [])
συνθ αποσύνδεση = () => {
 setToken("");
παράθυρο.localStorage.removeItem("ένδειξη");
 }
ΕΠΙΣΤΡΟΦΗ (

"Εφαρμογή">
"Επικεφαλίδα εφαρμογής">
"SearchContainer">
Ερευνητικά</h2>
 {!ένδειξη? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 Συνδεθείτε στο Spotify
 </a>
 </div> 
 :



"Αποσύνδεση"onClick={logout}>Αποσύνδεση</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ας το αναλύσουμε:

• Αυτό το στοιχείο αποδίδει υπό όρους το στοιχείο αναζήτησης και το κουμπί αποσύνδεσης, εάν το διακριτικό πρόσβασης υπάρχει διαφορετικά, αποδίδει ένα div με έναν σύνδεσμο που κατευθύνει τον χρήστη στην εξουσιοδότηση Spotify σελίδα. Ο σύνδεσμος περιέχει παραμέτρους ερωτήματος που καθορίζουν τις τιμές CLIENT_ID, REDIRECT_URI και RESPONSE_TYPE.
• Αφού ελέγξετε την ταυτότητα ενός χρήστη, καλέστε το άγκιστρο useEffect για να εκτελέσετε ένα μπλοκ κώδικα κατά την προσάρτηση του στοιχείου. Αυτό το μπλοκ κώδικα ανακτά το διακριτικό πρόσβασης από τον κατακερματισμό του URL και το ορίζει ως τη νέα τιμή της μεταβλητής κατάστασης διακριτικού. Αποθηκεύει επίσης το διακριτικό σε τοπικό χώρο αποθήκευσης για να διατηρηθεί η κατάσταση ελέγχου ταυτότητας.
• Με το διακριτικό πρόσβασης αποθηκευμένο σε κατάσταση, μεταβιβάζεται ως βάση στο στοιχείο Searcher για την υποβολή αιτημάτων στο web API του Spotify.
• Για να αποσυνδεθείτε, ο κωδικός απλώς αφαιρεί το διακριτικό πρόσβασης από τον τοπικό χώρο αποθήκευσης και ορίζει την κατάσταση του διακριτικού σε μια κενή συμβολοσειρά.

Εφαρμόστε τη λειτουργία αναζήτησης και απόδοση των αποτελεσμάτων

Στον κατάλογο /src, δημιουργήστε έναν νέο φάκελο και ονομάστε τον, στοιχεία. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο: Searcher.js και προσθέστε τον παρακάτω κώδικα.

εισαγωγή React, {useState, useEffect} από'αντιδρώ'
εισαγωγή αξιος από'αξιος';
λειτουργίαΕρευνητής(στηρίγματα) {
συνθ [SearchKey, setSearchKey] = useState("")
συνθ [κομμάτια, setTracks] = useState([])

συνθ access_token = props.token

συνθ searchArtist = ασυγχρονισμός () => {
συνθ {δεδομένα} = αναμένω axios.get(" https://api.spotify.com/v1/search", {
 κεφαλίδες: {
'Τύπος περιεχομένου': "application/json",
'Εξουσιοδότηση': `Φορέας ${access_token}`
 },
 παράμετροι: {
 q: SearchKey,
 τύπος: "καλλιτέχνης"
 }
 })

var artistID = data.artists.items[0].ταυτότητα
var artistTracks = αναμένω axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 κεφαλίδες: {
 Εξουσιοδότηση: `Φορέας ${access_token}`
 },
 παράμετροι: {
 όριο: 10,
 αγορά: 'ΜΑΣ'
 }
 })
 setTracks (artistTracks.data.tracks);
 }
ΕΠΙΣΤΡΟΦΗ (
 <>

"Φόρμα αναζήτησης">
 Όνομα κλάσης ="Ονομα"
 τύπος="κείμενο"
 placeholder="Αναζήτηση κατά όνομα καλλιτέχνη ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
Αναζήτηση</button> 
 </div>
 {
 tracks.slice(0, 5).χάρτης(πίστα => (




 {track.name}</li>
 </ul>
 </div>
 ))
 }
 </> 
 )
}


εξαγωγήΠροκαθορισμένο Ερευνητής

Ας το αναλύσουμε:

• Το στοιχείο ορίζει τη σταθερά access_token την οποία ορίζει στην ιδιότητα token που μεταβιβάζεται ως υποστήριγμα. Αργότερα μεταβιβάζει αυτό το διακριτικό στην κεφαλίδα του αιτήματος API στο τελικό σημείο API αναζήτησης του Spotify.
• Ορίστε δύο καταστάσεις: το SearchKey και τα κομμάτια. Η κατάσταση SearchKey κρατά την τρέχουσα τιμή της εισόδου αναζήτησης. Η κατάσταση κομματιών περιέχει μια σειρά από τα 10 κορυφαία κομμάτια για τον καλλιτέχνη που θα επιστρέψει η αναζήτηση Spotify.
• Η συνάρτηση searchArtist κάνει ένα αίτημα GET στο Spotify API για αναζήτηση δεδομένων καλλιτεχνών με βάση την τιμή searchKey.
• Στη συνέχεια εξάγει το αναγνωριστικό του καλλιτέχνη από τα δεδομένα απόκρισης και κάνει ένα άλλο αίτημα GET για να ανακτήσει τα κορυφαία κομμάτια για αυτόν τον καλλιτέχνη. Από τα δεδομένα απόκρισης, εξάγει τα 10 κορυφαία κομμάτια και ορίζει τις μεταβλητές των κομματιών.
• Το στοιχείο επιστρέφει ένα πεδίο εισαγωγής και ένα κουμπί αναζήτησης. Όταν ένας χρήστης κάνει κλικ στο κουμπί αναζήτησης, καλεί τη λειτουργία searchArtist για να ανακτήσει και να εμφανίσει τα κορυφαία κομμάτια για έναν συγκεκριμένο καλλιτέχνη. Τέλος, χρησιμοποιεί τη συνάρτηση χάρτη για να αποδώσει τα πέντε κορυφαία κομμάτια στη διάταξη κομματιών ως λίστα.

Εκτελέστε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές και, στη συνέχεια, μεταβείτε στον http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε τα αποτελέσματα.

Προσαρμόστε την εφαρμογή σας με τις δυνατότητες του Spotify

Αυτός ο οδηγός τόνισε τα βήματα που απαιτούνται για την υποβολή αιτημάτων στο web API του Spotify για αναζήτηση δεδομένων μουσικής καλλιτεχνών. Ωστόσο, μπορείτε να κάνετε περισσότερα με τις δυνατότητες του Spotify που παρέχονται από τα SDK και τα API του, όπως η ενσωμάτωση του προγράμματος αναπαραγωγής αναπαραγωγής ιστού με την ίδια εμφάνιση και αίσθηση όπως στο Spotify.

Το πλεονέκτημα των SDK και API του Spotify είναι ότι είναι πλούσια σε δυνατότητες και μπορείτε εύκολα να τα ενσωματώσετε σε οποιαδήποτε εφαρμογή ιστού ή για κινητά.