โปรเจ็กต์นี้ใช้ในการฝึกฝน และเรียนรู้พื้นฐานของ React โดยมีเป้าหมายเพื่อทำความเข้าใจเกี่ยวกับคำศัพท์ 3 คำ ประกอบไปด้วย Components, State, และ Props
Components คือส่วนประกอบต่าง ๆ ของโปรเจ็กต์
State คือค่าข้อมูลที่เก็บอยู่ใน components
Props ย่อมาจาก Properties เราใช้มันในการสื่อสารระหว่าง components
ในโปรเจ็กต์นี้ส่วนของ Front-end เราจะใช้ React ในการพัฒนา และใช้ไลบรารี่ Axios เพื่อเรียก API ของ Youtube มาแสดงผลตาม keyword ที่ส่งไป
ตัวอย่างโปรเจ็กต์ : Heroku
โปรเจ็กต์โค้ด: GitHub
หน้าตาโปรเจ็กต์
โปรเจ็กต์แบ่งออกเป็น 3 ส่วนหลัก ๆ คือ
ส่วนที่ 1: Search Bar
เป็นส่วนที่ใช้ในการกรอกคำค้น (keyword) ที่ต้องการ เช่นกรอกคำว่า Fear TWD และกดปุ่ม Enter จะได้ผลลัพธ์ดังภาพด้านล่าง
ส่วนที่ 2: Video List
ส่วนนี้ใช้แสดงรายการวีดีโอ จำนวน 5 รายการ โดยการแสดงผลลัพธ์จะสัมพันธ์กับคำที่เราใช้ค้นหา เมื่อวีดีโอในส่วนนี้ถูกคลิก ก็จะไปแสดงผลที่ส่วนที่ 3
ส่วนที่ 3: Video Detail
ส่วนนี้ใช้แสดงรายละเอียดของวีดีโอ ที่ถูกคลิกมาจากรายการวีดีโอฝั่งขวามือ สามารถคลิกเล่นวีดีโอได้เหมือนกับเว็บไซต์ Youtube.com
วิธีการใช้งาน
1. เมื่อเว็บไซต์ถูกเปิดขึ้นมาครั้งแรก จะแสดงรายการวีดีโอตามคำค้น ซึ่งเป็นค่า default ที่ set ไว้ในระบบ จากตัวอย่างคือคำว่า “Buildings”
2. กรอกคำค้นหาวีดีโอตามต้องการ เช่น “Scars To Your Beautiful” และคลิกที่ปุ่ม Enter จะได้ผลลัพธ์ดังภาพด้านล่าง
3. ลองคลิกที่ปุ่ม Play เพื่อเล่นวีดีโอ
4. เมื่อคลิกที่รายการวีดีโอต่าง ๆ ฝั่งขวามือ รายการที่ถูกคลิกจะมาแสดงผลที่ส่วนของรายละเอียดวีดีโอ
ตอนนี้เราก็เห็นภาพรวมของโปรเจ็กต์แล้ว ในตอนต่อไปเราจะออกแบบส่วนประกอบ (component) ของโปรเจ็กต์กันค่ะ
Sources
