หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Finder เนื้อเพลงโดย Heather Olcot

บทสรุป - เพื่อสร้างแอปพลิเคชันหน้าเดียวที่อาศัย API หนึ่งรายการขึ้นไป

API ที่ฉันเลือกใช้คือแคตตาล็อกเพลง MusixMatch ของเนื้อเพลงซึ่งตั้งอยู่ที่ https://www.musixmatch.com/

ผู้ใช้ที่ต้องการค้นหาเนื้อเพลงของเพลงที่เฉพาะเจาะจงสามารถทำได้โดยใช้ Lyric Finder

ผู้ใช้สามารถค้นหาโดยศิลปินหรือเพลงและจะส่งคืนรายการผลลัพธ์ที่พวกเขาสามารถนำทางเพื่อค้นหาเนื้อเพลงของเพลงที่พวกเขากำลังมองหา

หน้านี้อยู่ที่ https://hfolcot.github.io/lyrics-finder//hfolcot.github.io/lyrics-finder/

โปรดทราบว่าเนื้อเพลงไม่ได้พิมพ์เต็มเนื่องจากการออกใบอนุญาต

ฟังก์ชั่น / เทคโนโลยี

ทั่วไป

หน้าใช้ Bootstrap 4.0.0 และใช้ประโยชน์จากระบบกริดและสไตล์อื่น ๆ

หน้าใช้ฟอนต์ Nunito Sans และ Corben จาก Google Fonts และไอคอนจาก Fontawesome

สไตล์ของฉันเองได้ดำเนินการภายในสินทรัพย์/CSS/main.css

สคริปต์ใช้ประโยชน์จาก jQuery 3.3.1

API ที่ใช้คือ https://api.musixmatch.com/ws/1.1 ข้อมูลที่ส่งคืนอยู่ในรูปแบบ JSONP ดังนั้นจึงจำเป็นต้องมีคำขอ jQuery Ajax เพื่อรับข้อมูล

ตรรกะ

เหล่านี้คือแต่ละขั้นตอนที่แอปสามารถอยู่ที่ - ตัวเลขต่อไปนี้จะถูกใช้เพื่ออธิบายว่า [ขั้นตอน] แต่ละฟังก์ชั่นถูกใช้และขั้นตอนที่นำไปสู่

นอกจากนี้ยังมีฟังก์ชันการทำงานภายในแต่ละขั้นตอนเพื่อย้ายกลับไปที่หน้าก่อนหน้าผ่านปุ่มผลลัพธ์ที่ชัดเจนหรือปุ่มกลับไป

  1. หลัก
  2. หลัก> ผลลัพธ์เพลง
  3. หลัก> ผลลัพธ์เพลง> ผลลัพธ์บทกวี
  4. หลัก> ผลลัพธ์ของศิลปิน
  5. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม
  6. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง
  7. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ผลลัพธ์บทกวี

มีเจ็ดฟังก์ชั่นหลักที่ใช้ใน Lyric Finder:

checkRadio () [1]

ฟังก์ชั่นนี้จะถูกเรียกใช้ทันทีที่ผู้ใช้คลิกปุ่มค้นหา ตรวจสอบว่ามีการตรวจสอบปุ่มตัวเลือกใดและเรียกใช้ฟังก์ชั่นที่เกี่ยวข้องตามนี้

RESETPAGE () [2, 3, 4, 5, 6, 7]

ฟังก์ชั่นนี้จะถูกเรียกใช้ที่จุดเริ่มต้นของฟังก์ชั่นต่อไปนี้ทั้งหมดเพื่อล้างข้อมูลใด ๆ ที่อาจอยู่ในคอนเทนเนอร์ผลลัพธ์

getTrack () [1> 2]

ฟังก์ชั่นนี้จะถูกเรียกใช้โดย CheckRadio () หากมีการตรวจสอบปุ่มตัวเลือกเพลงเมื่อผู้ใช้ค้นหา ฟังก์ชั่นนี้ทำคำขอ $ .ajax ไปที่ https://api.musixmatch.com/ws/1.1/track.search ด้วยค่าที่ผู้ใช้ป้อนลงในช่องค้นหาเป็นพารามิเตอร์ q_track หากคำขอสำเร็จจะมีการสร้างตัวแปร trackresults ซึ่งมีรายการแทร็กที่ส่งคืน สิ่งเหล่านี้ถูกจัดเรียงตามความนิยมของศิลปินตามระบบการจัดอันดับของ MusixMatch จากนั้นสำหรับแต่ละรายการของรายการนี้ชื่อและศิลปินจะถูกป้อนลงในคอนเทนเนอร์ผลลัพธ์ใน index.html พร้อมกับปุ่มซึ่งทำให้ผู้ใช้มีตัวเลือกในการดูเนื้อเพลงของเพลงที่เลือก สิ่งนี้ใช้งานได้โดยผ่าน track_id เป็นพารามิเตอร์ลงในฟังก์ชัน getlyrics () ซึ่งถูกเรียกใช้เมื่อคลิก

getartist () [1> 4]

ฟังก์ชั่นนี้จะถูกเรียกใช้โดย CheckRadio () หากมีการตรวจสอบปุ่มตัวเลือกศิลปินเมื่อผู้ใช้ค้นหา ฟังก์ชั่นนี้ทำคำขอ $ .ajax ไปที่ https://api.musixmatch.com/ws/1.1/artist.search ด้วยค่าที่ผู้ใช้ป้อนลงในช่องค้นหาเป็นพารามิเตอร์สำหรับ q_artist
หากคำขอประสบความสำเร็จจะมีการสร้างตัวแปร ArtistResults ซึ่งมีรายชื่อศิลปินที่ส่งคืน สิ่งเหล่านี้ถูกจัดเรียงตามความนิยมตามระบบการจัดอันดับของ MusixMatch จากนั้นสำหรับแต่ละรายการของรายการนี้ศิลปินจะถูกป้อนลงในคอนเทนเนอร์ผลลัพธ์ใน index.html พร้อมกับปุ่มซึ่งทำให้ผู้ใช้มีตัวเลือกในการดูอัลบั้มโดยศิลปินที่เลือก สิ่งนี้ใช้งานได้โดยส่งผ่าน artist_id เป็นพารามิเตอร์ในฟังก์ชัน getalbumlist () ซึ่งถูกเรียกใช้เมื่อคลิก

getalbumlist () [4> 5]

ฟังก์ชั่นนี้ทำงานคล้ายกับสองฟังก์ชั่นก่อนหน้า artist_id ถูกส่งผ่านจากฟังก์ชั่น getartist () และสิ่งนี้ใช้เพื่อรับข้อมูลอัลบั้มสำหรับศิลปินคนนั้น จากนั้นจะถูกพิมพ์ไปยังองค์ประกอบคอนเทนเนอร์เป็นรายการที่มีชื่อของแต่ละอัลบั้มและปุ่มให้ตัวเลือกในการดูรายการแทร็กสำหรับอัลบั้มนั้น สิ่งนี้จะเรียกใช้ getTrackList () เมื่อคลิกและจะผ่านอัลบั้ม _id เป็นพารามิเตอร์ในฟังก์ชันนั้น

getTrackList () [5> 6]

อัลบั้ม _id ถูกส่งผ่านไปยังฟังก์ชั่นนี้และใช้เพื่อขอ https://api.musixmatch.com/ws/1.1/album.tracks.get สำหรับรายการแทร็กในอัลบั้มนั้น สิ่งนี้จะส่งคืนรายการแทร็กด้วยตัวเลือกเพื่อดูเนื้อเพลงอีกครั้งด้วยปุ่มเช่นเดียวกับใน getTrack ()

ReturnlyRics () [2> 3 และ 6> 7]

ฟังก์ชั่นนี้จะถูกเรียกใช้เมื่อมีการคลิกปุ่มใด ๆ ภายในรายการเพลง รหัสแทร็กของเพลงที่เลือกจะถูกส่งผ่านจากฟังก์ชั่นก่อนหน้า ฟังก์ชั่นใช้การโทร AJAX สองสายแยกกัน ครั้งแรกใช้เพื่อรับข้อมูลจาก track.get ใน API และดึงชื่อแทร็กจากสิ่งนี้เพื่อให้สามารถแสดงเป็นชื่อ การโทรครั้งที่สองจะถูกสร้างขึ้นเพื่อ matcher.lyrics.get เพื่อส่งคืนเนื้อเพลงด้วยตัวเอง หากไม่มีเนื้อเพลงที่จะส่งคืนข้อความแสดงข้อผิดพลาดที่กำหนดเองจะปรากฏขึ้นภายในองค์ประกอบคอนเทนเนอร์

ออกแบบ

เค้าโครงของหน้านั้นได้รับการเก็บรักษาพื้นฐานมากเพื่อให้วิธีการที่ชัดเจนและเรียบง่าย มีการใช้อิมเมจพื้นหลังสีเข้มซึ่งอ่อนโยนต่อตาและไม่ดึงดูดความสนใจของผู้ใช้ โทนสีพยายามที่จะจับคู่ภาพนี้ให้มากที่สุดและถูกสร้างขึ้นด้วย coolers.co ข้อมูลจะถูกส่งคืนในตารางที่มีส่วนหัวที่เหมาะสม

การทดสอบ

รหัส JavaScript ทำงานบน JShint และส่งคืนไม่มีข้อผิดพลาด HTML ทำงานบนตัวตรวจสอบมาร์กอัป W3C และส่งคืนไม่มีข้อผิดพลาด CSS ทำงานบนตัวตรวจสอบ W3C CSS และส่งคืนไม่มีข้อผิดพลาด

ในระหว่างการทดสอบผู้ใช้มีการระบุว่าไม่ใช่เพลงทั้งหมดในฐานข้อมูล MusixMatch มีเนื้อเพลงและมีการเพิ่มข้อผิดพลาดที่กำหนดเองสำหรับเพลงที่ไม่มีคีย์เนื้อเพลง _Body ภายในผลลัพธ์

สินทรัพย์/js/spec.js ถูกสร้างและเรียกใช้เพื่อตรวจสอบการทำงานของ RESETPAGE (); การทดสอบนี้ประสบความสำเร็จ เพื่อให้แน่ใจว่าสคริปต์ทดสอบถูกต้องฟังก์ชั่นได้รับการแก้ไขเพื่อรวมข้อความไว้ในคอนเทนเนอร์ผลลัพธ์ซึ่งจุดทดสอบล้มเหลว

ในขณะที่การทดสอบมีปัญหาที่น่าสนใจที่พบว่าไม่มีเนื้อเพลงใดถูกส่งคืนสำหรับเพลงใด ๆ ที่มีเครื่องหมายคำพูดสองครั้งหรือเดียว จากการสอบสวนปรากฏว่าปัญหาเกิดจากฟังก์ชั่นที่พยายามส่งชื่อเพลงไปยังฟังก์ชั่นใหม่ (getlyrics, เปลี่ยนชื่อในระหว่างกระบวนการนี้เป็น returnlyrics) แต่เมื่อมีคำพูดอยู่ในชื่อเพลงมันกำลังอ่านสิ่งนี้เมื่อสิ้นสุด ของพารามิเตอร์และข้อผิดพลาดเนื่องจากไม่มีวงเล็บปิด สิ่งนี้ได้รับการแก้ไขโดยการแก้ไข getlyrics เพื่อให้ดึงชื่อเพลงตัวเองในการโทรแยกต่างหากแทนที่จะส่งผ่านจากฟังก์ชั่นก่อนหน้า

แต่ละขั้นตอนของการทดสอบนั้นทำซ้ำหลังจากการเปลี่ยนแปลงฟังก์ชันใหม่ใด ๆ

ที่จะทดสอบ:

  1. หลัก
  2. หลัก> ผลลัพธ์เพลง
  3. หลัก> ผลลัพธ์เพลง> ผลลัพธ์ที่ชัดเจน
  4. หลัก> ผลลัพธ์เพลง> ผลลัพธ์บทกวี
  5. หลัก> ผลลัพธ์เพลง> ผลลัพธ์บทกวี> ย้อนกลับไป
  6. หลัก> ผลลัพธ์เพลง> ผลลัพธ์บทกวี> ผลลัพธ์ที่ชัดเจน
  7. หลัก> ผลลัพธ์ของศิลปิน
  8. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์ที่ชัดเจน
  9. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม
  10. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ย้อนกลับไป
  11. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์ที่ชัดเจน
  12. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง
  13. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ย้อนกลับไป
  14. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ผลลัพธ์ที่ชัดเจน
  15. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ผลลัพธ์บทกวี
  16. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ผลลัพธ์บทกวี> ย้อนกลับไป
  17. หลัก> ผลลัพธ์ของศิลปิน> ผลลัพธ์อัลบั้ม> ผลลัพธ์เพลง> ผลลัพธ์บทกวี> ผลลัพธ์ที่ชัดเจน

(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/

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด