أنشئ تطبيق بحث عن الموسيقى باستخدام React و Spotify API

غيّر Spotify تمامًا طريقة دفق الموسيقى من خلال كتالوج يحتوي على ملايين الأغاني والألبومات وقوائم التشغيل.

باستخدام واجهة برمجة تطبيقات الويب الخاصة به ، يمكنك جعل تجارب Spotify الخاصة بك أكثر متعة من خلال إنشاء تطبيق البحث عن الموسيقى React الخاص بك. توفر واجهة برمجة التطبيقات الوصول إلى مجموعة من بيانات الموسيقى التي يمكنك استخدامها لإنشاء تطبيق موسيقى مخصص وتخصيصه حسب ذوقك.

Spotify للمطورين

يقدم Spotify مجموعة واسعة من ميزات دفق الموسيقى مثل البحث والتشغيل في وضع عدم الاتصال والتوصيات المخصصة. يوفر النظام الأساسي Spotify for Developers الوصول إلى واجهات برمجة التطبيقات ومجموعات تطوير البرامج (SDK) التي تشغل هذه الميزات. في هذا الدليل ، ستستكشف واجهة برمجة تطبيقات الويب وتتعلم كيفية دمجها في تطبيق React الخاص بك للبحث عن الأغاني التي تعجبك.

التسجيل للحصول على حساب

للبدء ، يجب أن يكون لديك حساب Spotify. إذا لم يكن لديك واحد بالفعل ، قم بزيارة صفحة الاشتراك في Spotify. ومع ذلك ، إذا كان لديك بالفعل واحدًا ، فقم بتسجيل الدخول إلى Spotify للمطورين وحدة التحكم.

سجل طلبك

بمجرد تسجيل الدخول إلى وحدة تحكم المطور ، قم بتسجيل التطبيق الخاص بك للوصول إلى واجهة برمجة تطبيقات الويب. في صفحة لوحة المعلومات ، انقر فوق أنشئ تطبيقًا قم بملء الاسم والوصف ، وأخيرًا ، وافق على الشروط والأحكام لإنشاء التطبيق.

أخيرًا ، انقر فوق تحرير الإعدادات زر للتغيير إلى إعدادات عنوان URL لإعادة التوجيه. نظرًا لأن تطبيقك لا يزال في وضع التطوير ، أضف http://localhost: 3000 كعنوان URL لإعادة التوجيه. هذا هو عنوان URL الذي تريد إعادة توجيه المستخدم إليه بعد المصادقة مع Spotify.

بعد تسجيل التطبيق الخاص بك ، ستوفر Spotify معرف العميل الفريد الخاص بك وأسرار العميل التي يمكنك استخدامها من أجل:

• أضف تدفق مصادقة Spotify ، لتسجيل الدخول باستخدام بيانات اعتماد Spotify في تطبيق React الخاص بك.
• احصل على رمز الوصول الفريد الخاص بك ، لتقديم طلبات إلى نقاط نهاية مختلفة لواجهة برمجة تطبيقات الويب ، بما في ذلك البحث عن البيانات مثل المسارات أو الألبومات.

قم بإعداد عميل React

أنشئ تطبيق 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 إلى واجهة برمجة تطبيقات الويب الخاصة بـ Spotify.

npm تثبيت أكسيوس

أضف سير عمل مصادقة Spotify

يحدد Spotify أن جميع الطلبات إلى أي نقطة نهاية لواجهة برمجة تطبيقات الويب لها رمز وصول صالح في رأس الطلب. للحصول على رمز الوصول ، يحتاج تطبيقك أولاً إلى المصادقة مع Spotify.

يدعم Spotify العديد من ملفات المصادقة والتخويلأساليب مثل رمز التفويض أو بيانات اعتماد العميل أو طرق المنح الضمنية.

أبسط طريقة للتنفيذ هي طريقة المنح الضمنية التي تتطلب أن يقوم التطبيق بتقديم طلبات إلى نقطة نهاية المصادقة (لقد أضفتها في ملف ENV) ، مروراً بمعرف العميل الخاص بك. عند المصادقة الناجحة ، ستستجيب Spotify من خلال توفير رمز وصول تنتهي صلاحيته خلال فترة محددة.

افتح ملف src / App.js الخاص بك ، واحذف كود boilerplate React ، وأضف الكود أدناه:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد باحث من"./components/Searcher";
وظيفةبرنامج() {
مقدار ثابت 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 ("رمز");

لو (تجزئة علامة تجزئة) {
 الرمز المميز = hash.substring (1).ينقسم("&").يجد(إليم => يبدأ مع ("رمز وصول")).ينقسم("=")[1];
نافذة او شباك.location.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 لتقديم طلبات إلى واجهة برمجة تطبيقات الويب الخاصة بـ 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", {
 الرؤوس: {
'نوع المحتوى': "التطبيق / json",
'تفويض': `` حامل $ {access_token}`
 },
 المعلمات: {
 q: مفتاح البحث ،
 يكتب: "فنان"
 }
 })

فار معرف الفنان = data.artists.items [0].بطاقة تعريف
فار الفنانة = انتظر 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 الذي يعينه على خاصية الرمز الذي تم تمريره كعنصر خاص. يقوم لاحقًا بتمرير هذا الرمز المميز في رأس طلب واجهة برمجة التطبيقات إلى نقطة نهاية واجهة برمجة تطبيقات البحث الخاصة بـ Spotify.
• حدد حالتين: مفتاح البحث والمسارات. تحتفظ حالة مفتاح البحث بالقيمة الحالية لإدخال البحث. تحتوي حالة المسارات على مجموعة من أفضل 10 مسارات للفنان سيعود بها بحث Spotify.
• تقدم وظيفة searchArtist طلب GET إلى Spotify API للبحث عن بيانات الفنانين بناءً على قيمة searchKey.
• ثم يستخرج معرف الفنان من بيانات الاستجابة ويقدم طلب GET آخر لاسترداد أفضل المقاطع الصوتية لهذا الفنان. من بيانات الاستجابة ، يستخرج أفضل 10 مسارات ويضبط متغير المسارات.
• يقوم المكون بإرجاع حقل إدخال وزر بحث. عندما ينقر المستخدم على زر البحث ، فإنه يستدعي وظيفة searchArtist لجلب وعرض أفضل المسارات لفنان معين. أخيرًا ، تستخدم وظيفة الخريطة لعرض أهم خمسة مسارات في صفيف المسارات كقائمة.

قم بتشغيل خادم التطوير لتحديث التغييرات ، ثم توجه إلى http://localhost: 3000 في متصفحك لعرض النتائج.

قم بتخصيص تطبيقك باستخدام ميزات Spotify

سلط هذا الدليل الضوء على الخطوات المطلوبة لتقديم طلبات إلى واجهة برمجة تطبيقات الويب الخاصة بـ Spotify للبحث عن بيانات الموسيقى الخاصة بالفنانين. ومع ذلك ، يمكنك فعل المزيد باستخدام ميزات Spotify التي توفرها SDKs و APIs مثل دمج مشغل تشغيل الويب الخاص به بنفس الشكل والمظهر كما هو الحال في Spotify.

تتمثل ميزة SDKs و APIs الخاصة بـ Spotify في أنها غنية بالميزات ويمكنك دمجها بسهولة في أي تطبيق ويب أو جوال.