lyrics finder
1.0.0
موجز - لإنشاء تطبيق صفحة واحدة يعتمد بشكل كبير على واجهات برمجة التطبيقات أو أكثر.
واجهة برمجة التطبيقات التي اخترتها لاستخدامها هي كتالوج Musixmatch لكلمات الأغاني ، الموجودة في https://www.musixmatch.com/
يمكن للمستخدمين الذين يرغبون في البحث عن كلمات أغنية معينة القيام بذلك باستخدام Finder Lyric.
يمكن للمستخدم البحث من قبل الفنان أو عن طريق الأغنية ويتم إرجاع قائمة النتائج التي يمكن من خلالها التنقل للعثور على كلمات الأغنية التي يبحثون عنها.
تعمل الصفحة الآن على https://hfolcot.github.io/lyrics-finder/
يرجى ملاحظة أن كلمات الأغاني غير مطبوعة بالكامل بسبب الترخيص
تستخدم الصفحة bootstrap 4.0.0 واستفادة من نظام الشبكة والتصميم الآخر.
تستخدم الصفحة خطوط Nunito Sans و Corben من Fonts Google ، وأيضًا الرموز من Fontawesome.
تم إجراء مزيد من التصميم الخاص بي داخل الأصول/CSS/Main.css
تستخدم البرمجة النصية jQuery 3.3.1.
API المستخدمة هي https://api.musixmatch.com/ws/1.1. البيانات التي تم إرجاعها بتنسيق JSONP ، وبالتالي كان هناك حاجة إلى طلب jQuery Ajax للحصول على البيانات.
هذه هي كل مراحل يمكن أن يكون التطبيق في - سيتم استخدام الأرقام التالية لوصف [المرحلة] التي يتم استخدام كل وظيفة وإلى أي مرحلة تقودها.
هناك أيضًا وظائف في كل مرحلة للعودة إلى الصفحة السابقة ، عبر زر نتائج Clear أو زر العودة.
هناك سبع وظائف رئيسية تستخدم في مكتشف غنائي:
يتم استدعاء هذه الوظيفة بمجرد النقر على المستخدم على زر البحث. يتحقق من قيمة زر الراديو التي يتم فحصها وتشغيل الوظيفة ذات الصلة بناءً على هذا.
يتم استدعاء هذه الوظيفة في بداية جميع الوظائف التالية من أجل مسح أي بيانات قد تكون بالفعل في حاوية النتائج.
يتم استدعاء هذه الوظيفة بواسطة CheckRadio () إذا تم التحقق من زر راديو الأغنية عند تفتيش المستخدم. تقدم الوظيفة طلب $ .ajax إلى https://api.musixmatch.com/ws/1.1/track.search مع القيمة التي أدخلها المستخدم في مربع البحث كمعلمة q_track. إذا كان الطلب ناجحًا ، يتم إنشاء متغيرات TrackResults التي تحتوي على قائمة المسارات التي تم إرجاعها. يتم فرزها من خلال شعبية الفنان على أساس نظام تصنيف Musixmatch. ثم لكل عنصر من عناصر هذه القائمة ، يتم إدخال الاسم والفنان في حاوية النتائج في index.html ، إلى جانب زر يمنح المستخدم خيارًا لعرض كلمات الأغنية المحددة. هذا يعمل عن طريق تمرير track_id كمعلمة في وظيفة getLyrics () التي يتم تشغيلها عند النقر.
يتم استدعاء هذه الوظيفة بواسطة CheckRadio () إذا تم التحقق من زر راديو الفنان عند تفتيش المستخدم. تقدم الوظيفة طلب $ .ajax إلى https://api.musixmatch.com/ws/1.1/artist.search مع القيمة التي أدخلها المستخدم في مربع البحث كمعلمة لـ q_artist.
إذا كان الطلب ناجحًا ، يتم إنشاء فني متغير يحتوي على قائمة الفنانين التي تم إرجاعها. يتم فرزها عن طريق الشعبية بناءً على نظام تصنيف Musixmatch. ثم لكل عنصر من عناصر هذه القائمة ، يتم إدخال الفنان في حاوية النتائج في index.html ، إلى جانب زر يمنح المستخدم خيارًا لعرض الألبومات من قبل الفنان المحدد. يعمل هذا عن طريق تمرير Artist_id كمعلمة في وظيفة getAlbumList () التي يتم تشغيلها عند النقر.
تعمل هذه الوظيفة بشكل مشابه للوظيفة السابقة. يتم تمرير Artist_id إليها من وظيفة getArtist () ويستخدم هذا للحصول على بيانات الألبوم لهذا الفنان. ثم يتم طباعتها على عنصر الحاوية كقائمة تحتوي على اسم كل ألبوم وزر يوفر خيار عرض قائمة المسارات لهذا الألبوم. سيتم تشغيل هذا getTrackList () على النقر وسيقوم بتمرير الألبوم _id كمعلمة في هذه الوظيفة.
يتم تمرير الألبوم _id إلى هذه الوظيفة ويستخدم لتقديم طلب إلى https://api.musixmatch.com/ws/1.1/album.tracks.get لقائمة المسارات في هذا الألبوم. سيؤدي ذلك بعد ذلك إلى إرجاع قائمة المسارات مع خيار عرض الأغاني ، مرة أخرى باستخدام زر كما في GetTrack ().
يتم استدعاء هذه الوظيفة عند النقر على أي زر داخل قائمة الأغاني. يتم تمرير معرف المسار للأغنية المحددة من الوظيفة السابقة. تستخدم الوظيفة اثنين من مكالمات AJAX منفصلة. يتم استخدام الأول للحصول على بيانات من المسار. get في واجهة برمجة التطبيقات (API) وينفصل اسم المسار من هذا بحيث يمكن عرضه كعنوان. ثم يتم إجراء مكالمة ثانية إلى matcher.lyrics.get لإعادة كلمات أنفسهم. إذا لم تكن هناك كلمات للعودة ، فسيتم عرض رسالة خطأ مخصصة داخل عنصر الحاوية.
تم الحفاظ على تخطيط الصفحة أساسيًا للغاية للحفاظ على الأساليب واضحة وبسيطة. تم استخدام صورة الخلفية المظلمة التي هي لطيفة على العين ولا تجذب انتباه المستخدم. يحاول نظام الألوان مطابقة هذه الصورة قدر الإمكان وتم إنشاؤه باستخدام Coolors.co. يتم إرجاع البيانات في جدول برؤوس مناسبة.
تم تشغيل رمز JavaScript على JShint ولم يتم إرجاع أي أخطاء. تم تشغيل HTML على مصادقة Markup W3C وعاد أي أخطاء. تم تشغيل CSS على مصادقة W3C CSS وعاد أي أخطاء.
أثناء اختبار المستخدم ، لوحظ أنه ليس كل الأغاني في قاعدة بيانات MusixMatch تحتوي على كلمات ، وبالتالي تمت إضافة خطأ مخصص لأولئك الذين ليس لديهم مفتاح Lyrads_body ضمن النتيجة.
تم إنشاء وتشغيل الأصول/JS/spec.js من أجل التحقق من وظائف ResetPage () ؛ كان هذا الاختبار ناجحًا. من أجل ضمان صحة البرنامج النصي للاختبار ، تم تحرير الوظيفة لتضمين النص ضمن حاوية النتائج ، وعندها فشل الاختبار.
أثناء الاختبار ، كانت هناك مشكلة مثيرة للاهتمام حيث لم يتم إرجاع أي كلمات لأي أغنية تحتوي على علامات اقتباس مزدوجة أو واحدة. عند التحقيق ، يبدو أن المشكلة ناجمة عن الوظيفة التي تحاول نقل اسم أغنية إلى وظيفة جديدة (GetLyrics ، التي تم إعادة تسميتها خلال هذه العملية إلى العائدات) ، ولكن عندما كانت الاقتباسات موجودة في اسم الأغنية ، كانت تقرأ هذا على أنها النهاية من المعلمة والخطأ لأنه لم يكن هناك قوسين إغلاق. تم حل هذا عن طريق تحرير GetLyrics بحيث استرجع اسم الأغنية نفسه في مكالمة منفصلة بدلاً من تمريرها من الوظيفة السابقة.
تم إعادة عرض كل مرحلة من مراحل الاختبار بعد أي تغييرات وظيفية جديدة.
ليتم اختباره:
(X = العمل كما هو متوقع) (O = لا تعمل كما هو متوقع)
فيما يلي اختبار ما إذا كان الرمز يعمل كما هو متوقع.
| متصفح/اختبار | الأوبرا | Firefox | الكروم | حافة | سفاري |
|---|---|---|---|---|---|
| 1 | x | x | x | x | x |
| 2 | x | x | x | x | x |
| 3 | x | x | x | x | x |
| 4 | x | x | x | x | x |
| 5 | x | x | x | x | x |
| 6 | x | x | x | x | x |
| 7 | x | x | x | x | x |
| 8 | x | x | x | x | x |
| 9 | x | x | x | x | x |
| 10 | x | x | x | x | x |
| 11 | x | x | x | x | x |
| 12 | x | x | x | x | x |
| 13 | x | x | x | x | x |
| 14 | x | x | x | x | x |
| 15 | x | x | x | x | x |
| 16 | x | x | x | x | x |
| 17 | x | x | x | x | x |
فيما يلي اختبار ما إذا كانت الشاشة تعمل كما هو متوقع.
| متصفح/اختبار | الأوبرا | Firefox | الكروم | حافة | سفاري |
|---|---|---|---|---|---|
| 1 | x | x | x | x | x |
| 2 | x | x | x | x | x |
| 3 | x | x | x | x | x |
| 4 | x | x | x | x | x |
| 6 | x | x | x | x | x |
| 7 | x | x | x | x | x |
| 8 | x | x | x | x | x |
| 9 | x | x | x | x | x |
| 11 | x | x | x | x | x |
| 12 | x | x | x | x | x |
| 14 | x | x | x | x | x |
| 15 | x | x | x | x | x |
| 17 | x | x | x | x | x |
ولوحظ مشكلة على Microsoft Edge حيث لم يتم عرض صورة الخلفية بشكل صحيح. كان هذا بسبب موضع عنصر البرنامج النصي داخل رمز HTML. بمجرد نقله إلى نهاية الجسم بدلاً من الرأس ، يتم عرض صورة الخلفية بشكل صحيح.
تم العثور على مشكلة أخرى على iPhone حيث لم تكن صورة الخلفية ثابتة ولن يتم التمرير مع الصفحة ، مما يؤدي إلى "نفاد" الصفحة من الخلفية عند التمرير لأسفل كمية كبيرة من البيانات التي تم إرجاعها. أظهرت الأبحاث أن هذه قضية معروفة مع iOS. تم حل هذا باستخدام استعلام وسائط لتعيين الخلفية لتكرار الشاشات الأصغر.
استخدام أدوات مطور Google Chrome لاختبار كيفية عرض كل مرحلة من مراحل التطبيق في عرض شاشة مختلف.
x = عرض كما هو متوقع
| عرض الشاشة/عرض الصفحة | Galaxy S5 | بكسل 2 | بكسل 2XL | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X. | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | x | x | x | x | x | x | x | x | x |
| 2 | x | x | x | x | x | x | x | x | x |
| 3 | x | x | x | x | x | x | x | x | x |
| 4 | x | x | x | x | x | x | x | x | x |
| 6 | x | x | x | x | x | x | x | x | x |
| 7 | x | x | x | x | x | x | x | x | x |
| 8 | x | x | x | x | x | x | x | x | x |
| 9 | x | x | x | x | x | x | x | x | x |
| 11 | x | x | x | x | x | x | x | x | x |
| 12 | x | x | x | x | x | x | x | x | x |
| 14 | x | x | x | x | x | x | x | x | x |
| 15 | x | x | x | x | x | x | x | x | x |
| 17 | x | x | x | x | x | x | x | x | x |
تم بناء هذا المشروع في Cloud9 ودفع إلى Github حيث تم نشره بعد ذلك على صفحات Github على https://hfolcot.github.io/lyrics-finder/
