بحث سبوتيفي
الهدف: إنشاء تطبيق بحث عن الموسيقى باستخدام jQuery وAJAX وSpotify API. ستستخدم نقطة نهاية بحث Spotify للبحث عن المقطوعات (الأغاني).
الحد الأدنى من المتطلبات
- يجب أن يحتوي تطبيقك على نموذج للبحث عن المقطوعات (الأغاني). يحتاج هذا النموذج إلى حقل إدخال لكلمة البحث الأساسية.
- عندما يرسل المستخدم النموذج، استخدم jQuery للحصول على الكلمة الأساسية للبحث من إدخال النموذج.
- استخدم AJAX للاتصال بنقطة نهاية البحث الخاصة بـ Spotify باستخدام الكلمة الأساسية للبحث من النموذج.
- عند نجاح استدعاء AJAX، قم بعرض نتائج البحث على الصفحة. يجب عليك تضمين اسم المسار واسم الفنان على الأقل لكل نتيجة.
- في كل مرة يرسل فيها المستخدم النموذج، قم بمسح أي نتائج بحث سابقة من طريقة العرض.
أفكار المكافأة
اختياريًا، تحدي نفسك للمضي بالمشروع إلى أبعد من ذلك!
- اعرض العمل الفني لألبوم المسار بجوار كل نتيجة بحث في العرض. تلميح: ستلاحظ أنه إذا حاولت الوصول إلى العمل الفني للألبوم ولكن لم يكن هناك أي شيء متاح، فسوف يتعطل تطبيقك. منع حدوث ذلك من خلال التحقق لمعرفة ما إذا كان هناك أي عمل فني متاح أولاً.
- يمنحنا Spotify
preview_url لكل مسار. قم بإنشاء زر تشغيل لكل مسار في طريقة العرض الخاصة بك والذي يفتح preview_url في علامة تبويب جديدة (سيبدأ تشغيل الأغنية!). - سيكون من الجيد إخبار المستخدم بحدوث شيء ما في المللي ثانية القليلة بين إرسال النموذج والحصول على البيانات على الصفحة. قم بإظهار
loading.gif (الموجود في دليل images ) عند إرسال النموذج، وإخفائه عند استعادة البيانات من Spotify. - تعامل مع الحالة التي لا تعود فيها أي بيانات من Spotify. ستحتاج إلى إعلام المستخدم بعدم وجود نتائج، بدلاً من عرض صفحة فارغة فقط.
- تعامل مع الحالة التي يرسل فيها المستخدم البحث بكلمة رئيسية فارغة. تحقق من الخطأ في وحدة التحكم عند إرسال هذا النموذج فارغًا؛ يعتبر Spotify هذا "طلبًا سيئًا!" إذا حاول المستخدم إرسال نموذج فارغ، فلا تبحث عنه وبدلاً من ذلك قم بتذكيره بإدخال كلمة رئيسية.
ابدء
- تفرع هذا الريبو، واستنساخه في جهاز الكمبيوتر الخاص بك.
- باستخدام الرمز المميز الذي حصلت عليه في الفصل الدراسي في رأس طلب AJAX الخاص بك، تدرب على الاستعلام عن نقطة نهاية بحث Spotify باستخدام Postman أو
curl بعض كلمات البحث الرئيسية المختلفة. ستحتاج إلى تعيين type=track في عنوان URL للطلب الخاص بك. انظر إلى بيانات الاستجابة، واكتشف كيفية الوصول إلى اسم المسار واسم الفنان لمسار معين (سيتضمن ذلك الوصول إلى القيم من JSON مع الكائنات والمصفوفات المتداخلة).
ملحوظة ! تنتهي صلاحية الرمز المميز الخاص بك كل ساعة! نعم، هذا مزعج للغاية. تأكد من تحديث الرمز المميز الخاص بك باستخدام منشئ الرمز المميز هذا أثناء عملك. - بمجرد أن تشعر بالارتياح تجاه بنية بيانات الاستجابة، اعمل على استخدام AJAX لإجراء استدعاء API إلى Spotify عندما يرسل المستخدم النموذج.
- ابدأ بـ
console.log - في بيانات الاستجابة. بمجرد الانتهاء من ذلك، قم بالوصول إلى البيانات التي تريد عرضها (اسم المسار واسم الفنان). - إذا كنت تعرف كيفية الوصول إلى البيانات من النتائج، فاستخدم jQuery
append بالصفحة. تلميح: ستحتاج إلى استخدام Array#forEach للتكرار عبر جميع المسارات التي يعرضها Spotify في بيانات الاستجابة.
استسلام
- أثناء إجراء تغييرات على التعليمات البرمجية، قم بالالتزام بشكل متكرر والدفع إلى شوكة GitHub الخاصة بك.
- بمجرد الانتهاء من المهمة ودفع عملك إلى GitHub، قم بتقديم طلب سحب من مفترقك إلى الريبو الأصلي.
موارد
- مسج.اجاكس ()
- سبوتيفي بحث نقطة النهاية
