ค้นหา Spotify
วัตถุประสงค์: สร้างแอปค้นหาเพลงโดยใช้ jQuery, AJAX และ Spotify API คุณจะใช้จุดสิ้นสุดการค้นหาของ Spotify เพื่อค้นหาแทร็ก (เพลง)
ข้อกำหนดขั้นต่ำ
- แอปของคุณต้องมีแบบฟอร์มในการค้นหาแทร็ก (เพลง) แบบฟอร์มนี้ต้องการช่องป้อนข้อมูลสำหรับคำสำคัญในการค้นหา
- เมื่อผู้ใช้ส่งแบบฟอร์มให้ใช้ jQuery เพื่อรับคำค้นหาจากการป้อนแบบฟอร์ม
- ใช้ AJAX เพื่อเรียกจุดสิ้นสุดการค้นหาของ Spotify ด้วยคำค้นหาจากแบบฟอร์ม
- เมื่อการโทร AJAX สำเร็จ ให้แสดงผลการค้นหาบนเพจ อย่างน้อยคุณควรระบุชื่อแทร็กและชื่อศิลปินสำหรับผลลัพธ์แต่ละรายการ
- แต่ละครั้งที่ผู้ใช้ส่งแบบฟอร์ม ให้ล้างผลการค้นหาก่อนหน้าออกจากมุมมอง
ไอเดียโบนัส
ทางเลือกท้าทายตัวเองเพื่อพัฒนาโครงการให้ไกลยิ่งขึ้น!
- แสดงปกอัลบั้มของแทร็กถัดจากผลการค้นหาแต่ละรายการในมุมมอง คำแนะนำ: คุณจะสังเกตเห็นว่าหากคุณพยายามเข้าถึงปกอัลบั้มแต่ไม่มีให้ใช้งาน แอปของคุณจะใช้งานไม่ได้ ป้องกันสิ่งนี้ไม่ให้เกิดขึ้นด้วยการตรวจสอบเพื่อดูว่ามีงานศิลปะใดบ้างก่อน
- Spotify ให้
preview_url สำหรับแต่ละแทร็กแก่เรา สร้างปุ่มเล่นสำหรับแต่ละแทร็กในมุมมองของคุณซึ่งจะเปิด preview_url ในแท็บใหม่ (ปุ่มจะเริ่มเล่นเพลง!) - เป็นการดีที่จะแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างเกิดขึ้นภายในไม่กี่มิลลิวินาทีระหว่างการส่งแบบฟอร์มและรับข้อมูลบนเพจ แสดง
loading.gif (ระบุไว้ในไดเร็กทอรี images ) เมื่อแบบฟอร์มส่ง และซ่อนไว้เมื่อคุณได้รับข้อมูลจาก Spotify - จัดการกรณีที่ไม่มีข้อมูลกลับมาจาก Spotify คุณจะต้องแจ้งให้ผู้ใช้ทราบว่าไม่มีผลลัพธ์ แทนที่จะแสดงเพียงหน้าว่าง
- จัดการกรณีที่ผู้ใช้ส่งการค้นหาด้วยคำสำคัญที่ว่างเปล่า ตรวจสอบข้อผิดพลาดในคอนโซลเมื่อส่งแบบฟอร์มนี้ว่างเปล่า Spotify ถือว่านี่เป็น "คำขอที่ไม่ถูกต้อง!" หากผู้ใช้พยายามส่งแบบฟอร์มเปล่า ไม่ต้องค้นหา แต่เตือนให้ป้อนคำสำคัญแทน
เริ่มต้นใช้งาน
- แยก repo นี้และโคลนลงในคอมพิวเตอร์ของคุณ
- การใช้โทเค็นที่คุณได้รับในชั้นเรียนในส่วนหัวของคำขอ AJAX ของคุณ ฝึกค้นหาจุดสิ้นสุดการค้นหาของ Spotify โดยใช้บุรุษไปรษณีย์ หรือ
curl ด้วยคำค้นหาที่แตกต่างกันสองสามคำ คุณจะต้องตั้ง type=track ใน URL คำขอของคุณ ดูข้อมูลการตอบกลับ และพิจารณาว่าคุณจะเข้าถึงชื่อแทร็กและชื่อศิลปินสำหรับแทร็กใดแทร็กหนึ่งได้อย่างไร (ซึ่งจะเกี่ยวข้องกับการเข้าถึงค่าจาก JSON ด้วยออบเจ็กต์และอาร์เรย์ที่ซ้อนกัน)
บันทึก ! โทเค็นของคุณจะหมดอายุทุกชั่วโมง! ใช่ มันน่ารำคาญมาก ตรวจสอบให้แน่ใจว่าคุณอัปเดตโทเค็นของคุณโดยใช้ตัวสร้างโทเค็นนี้ในขณะที่คุณทำงาน - เมื่อคุณรู้สึกพอใจกับโครงสร้างของข้อมูลตอบกลับแล้ว ให้ใช้งาน AJAX เพื่อทำการเรียก API ไปที่ Spotify เมื่อผู้ใช้ส่งแบบฟอร์ม
- เริ่มต้นด้วย
console.log - ข้อมูลการตอบกลับ เมื่อคุณดำเนินการดังกล่าวแล้ว ให้เข้าถึงข้อมูลที่คุณต้องการแสดง (ชื่อแทร็กและชื่อศิลปิน) - เมื่อคุณรู้วิธีเข้าถึงข้อมูลจากผลลัพธ์ ให้ใช้ jQuery เพื่อ
append ข้อมูลเข้ากับเพจ คำแนะนำ: คุณจะต้องใช้ Array#forEach เพื่อวนซ้ำแทร็กทั้งหมดที่ Spotify ส่งคืนในข้อมูลตอบกลับ
การส่ง
- เมื่อคุณทำการเปลี่ยนแปลงโค้ด ให้คอมมิตและพุชไปที่ทางแยก GitHub ของคุณบ่อยครั้ง
- เมื่อคุณทำงานมอบหมายเสร็จแล้วและผลักดันงานของคุณไปที่ GitHub ให้ทำการดึงคำขอจากทางแยกของคุณไปยัง repo ดั้งเดิม
ทรัพยากร
- jQuery.ajax()
- จุดสิ้นสุดการค้นหา Spotify
