בנו אפליקציית חיפוש מוזיקה עם React ו-Spotify API

Spotify שינתה לחלוטין את הדרך בה אנו זורמים מוזיקה עם קטלוג המכיל מיליוני שירים, אלבומים ורשימות השמעה.

באמצעות ה-API האינטרנטי שלו, אתה יכול להפוך את חוויות Spotify שלך למהנה עוד יותר על ידי בניית אפליקציית חיפוש מוזיקה משלך ב-React. ה-API מספק גישה למגוון של נתוני מוזיקה שבהם אתה יכול להשתמש כדי לבנות אפליקציית מוזיקה מותאמת אישית ולהתאים אותה לטעמך.

Spotify למפתחים

Spotify מציעה מגוון רחב של תכונות הזרמת מוזיקה כגון חיפוש, השמעה במצב לא מקוון והמלצות מותאמות אישית. פלטפורמת Spotify for Developers מספקת גישה לממשקי ה-API וה-SDK שמפעילים את התכונות הללו. במדריך זה, תחקור את ה-API של האינטרנט ותלמד כיצד לשלב אותו באפליקציית React שלך כדי לחפש שירים שאתה אוהב.

תירשם בשביל חשבון

כדי להתחיל, אתה צריך חשבון Spotify. אם עדיין אין לך אחד, בקר דף ההרשמה של Spotify. עם זאת, אם כבר יש לך אחד, היכנס ל- Spotify למפתחים לְנַחֵם.

רשום את הבקשה שלך

לאחר שתתחבר למסוף המפתחים, רשום את האפליקציה שלך כדי לקבל גישה ל-API האינטרנט. בדף לוח המחוונים, לחץ על

צור אפליקציה כפתור, מלא את השם והתיאור, ולבסוף, קבל את התנאים וההגבלות ליצירת האפליקציה.

לבסוף, לחץ על ערוך הגדרות לחצן כדי לשנות להגדרות כתובת האתר להפניה מחדש. מכיוון שהאפליקציה שלך עדיין במצב פיתוח, הוסף http://localhost: 3000 ככתובת האתר שלך להפניה מחדש. זוהי כתובת האתר שאליה ברצונך להפנות את המשתמש לאחר אימות באמצעות 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 = "אֲסִימוֹן"

אתה יכול למצוא את הקוד של יישום זה בה מאגר GitHub.

התקן את החבילות הנדרשות

התקן את Axios. אתה תשתמש בשיטות שלה כדי לשלוח בקשות HTTP ל-API האינטרנט של Spotify.

npm להתקין אקסיות

הוסף את תהליך האימות של Spotify

Spotify מציין שלכל הבקשות לכל נקודת קצה של Web API יש אסימון גישה חוקי בכותרת הבקשה. כדי לקבל את אסימון הגישה, האפליקציה שלך צריכה לעבור אימות תחילה עם Spotify.

Spotify תומך במספר אימות והרשאהשיטות כגון קוד הרשאה, אישורי לקוח או שיטות הענקה מרומזות.

הפשוטה ביותר ליישום היא שיטת ההענקה המרומזת הדורשת שאפליקציה תגיש בקשות לנקודת הקצה של האימות (הוספת זאת בקובץ ENV), תוך מעבר על מזהה הלקוח שלך. לאחר אימות מוצלח, Spotify תגיב על ידי מתן אסימון גישה שפג תוקפו במהלך תקופה מוגדרת.

פתח את קובץ src/App.js שלך, מחק את קוד ה-boilerplate React והוסף את הקוד למטה:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא מחפש מ'./components/Searcher';
פוּנקצִיָהאפליקציה() {
const CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
const AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
const RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE
const [token, setToken] = useState("");
 useEffect(() => { 
const hash = חַלוֹן.location.hash;
לתת אסימון = חַלוֹן.localStorage.getItem("אֲסִימוֹן");

אם (hash && hash) {
 token = hash.substring(1).לְפַצֵל("&").למצוא(עלם => elem.startsWith("אסימון גישה")).לְפַצֵל("=")[1];
חַלוֹן.location.hash = "";
חַלוֹן.localStorage.setItem("אֲסִימוֹן", אסימון);
 }
 setToken (אסימון)
 }, [])
const התנתק = () => {
 setToken("");
חַלוֹן.localStorage.removeItem("אֲסִימוֹן");
 }
לַחֲזוֹר (

"אפליקציה">
"כותרת אפליקציה">
"SearchContainer">
בחיפוש </h2>
 {!אֲסִימוֹן? 


`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
 התחבר לספוטיפיי
 </a>
 </div> 
 :



"להתנתק"onClick={logout}>יציאה</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בוא נפרק את זה:

• רכיב זה מעבד באופן מותנה את רכיב החיפוש ואת לחצן היציאה, אם אסימון הגישה קיים אחרת, הוא מציג div עם קישור שמפנה את המשתמש להרשאת Spotify עמוד. הקישור מכיל פרמטרים של שאילתה המציינים את ערכי CLIENT_ID, REDIRECT_URI ו-RESPONSE_TYPE.
• לאחר אימות משתמש, קרא ל-useEffect hook כדי להפעיל בלוק קוד כאשר הרכיב נטען. בלוק קוד זה מאחזר את אסימון הגישה מה-hash של כתובת האתר ומגדיר אותו כערך החדש של משתנה מצב האסימון. זה גם מאחסן את האסימון באחסון מקומי כדי להתמיד במצב האימות.
• כאשר אסימון הגישה מאוחסן במצב, הוא מועבר כעזר לרכיב Searcher להגשת בקשות ל-API האינטרנט של Spotify.
• כדי להתנתק, הקוד פשוט מסיר את אסימון הגישה מהאחסון המקומי ומגדיר את מצב האסימון למחרוזת ריקה.

יישם את פונקציונליות החיפוש ועיבוד תוצאות

בספריית /src, צור תיקיה חדשה ושם לה, רכיבים. בתוך תיקיה זו, צור קובץ חדש: Searcher.js, והוסף את הקוד למטה.

יְבוּא תגובה, {useState, useEffect} מ'לְהָגִיב'
יְבוּא אקסיוס מ'אקסיות';
פוּנקצִיָהמחפש(אביזרים) {
const [SearchKey, setSearchKey] = useState("")
const [tracks, setTracks] = useState([])

const access_token = props.token

const searchArtist = אסינכרון () => {
const {נתונים} = לְהַמתִין axios.get(" https://api.spotify.com/v1/search", {
 כותרות: {
'סוג תוכן': "application/json",
'הרשאה': `נושא ${access_token}`
 },
 פרמטרים: {
 ש: מפתח חיפוש,
 סוּג: "אמן"
 }
 })

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);
 }
לַחֲזוֹר (
 <>

"טופס חיפוש">
 className ="שֵׁם"
 סוג="טֶקסט"
 מציין מיקום="חפש לפי שם האמן..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />
חפש </button> 
 </div>
 {
 tracks.slice(0, 5).מַפָּה(מַסלוּל => (




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


יְצוּאבְּרִירַת מֶחדָל מחפש

בוא נפרק את זה:

• הרכיב מגדיר את קבוע access_token אותו הוא מגדיר למאפיין האסימון המועבר כ-prop. מאוחר יותר הוא מעביר את האסימון הזה בכותרת של בקשת ה-API לנקודת הקצה של חיפוש API של Spotify.
• הגדר שני מצבים: מפתח החיפוש ומסלולים. מצב החיפוש מפתח מחזיק את הערך הנוכחי של קלט החיפוש. מצב הרצועות מכיל מערך של 10 הרצועות המובילות עבור האמן שחיפוש Spotify יחזיר.
• פונקציית searchArtist מבצעת בקשת GET לממשק API של Spotify כדי לחפש נתונים של אמנים על סמך ערך searchKey.
• לאחר מכן הוא מחלץ את המזהה של האמן מנתוני התגובה ומבצע בקשת GET נוספת כדי לאחזר את הרצועות המובילות עבור אותו אמן. מנתוני התגובה, הוא מחלץ את 10 המסלולים המובילים ומגדיר את משתנה המסלולים.
• הרכיב מחזיר שדה קלט וכפתור חיפוש. כאשר משתמש לוחץ על כפתור החיפוש, הוא קורא לפונקציית searchArtist כדי להביא ולהציג את הרצועות המובילות של אמן מסוים. לבסוף, הוא משתמש בפונקציית המפה כדי להציג את חמשת המסלולים המובילים במערך המסלולים כרשימה.

הפעל את שרת הפיתוח שלך כדי לעדכן את השינויים, ולאחר מכן עבור אל http://localhost: 3000 בדפדפן שלך כדי לראות את התוצאות.

התאם אישית את האפליקציה שלך עם התכונות של Spotify

מדריך זה הדגיש את השלבים הנדרשים להגשת בקשות ל-API האינטרנט של Spotify לחיפוש נתוני מוזיקה של אמנים. עם זאת, אתה יכול לעשות יותר עם התכונות של Spotify המסופקות על ידי ה-SDKs וממשקי ה-API שלה, כגון שילוב נגן השמעת האינטרנט שלה באותו מראה ותחושה כמו ב-Spotify.

היתרון של SDK ו-API של Spotify הוא שהם עשירים בתכונות וניתן לשלב אותם בקלות בכל יישום אינטרנט או נייד.