วันหยุดสุดสัปดาห์ยาวๆ แบบนี้แล้วไม่ได้เดินทางไปเที่ยวที่ไหน เพราะยังต้องมานั่งเฝ้าออฟฟิสอยู่เช่นเดิม 😂 มันก็ต้องหาทำ Mini project เล่นแก้เหงาซะหน่อย วันนี้ก็เลยจะมานำเสนอ Mini project สำหรับติดตามข่าวสารบ้านเมือง นั่นคือ Website สำหรับติดตามข่าวสารที่มาจากสำนักข่าวต่างๆ โดยใช้ข้อมูลข่าวสารจาก newsapi.org สรุปแล้วได้ออกมาประมาณนี้ครับ
Outline
Part 1 : HTML, CSS (materializecss)
Part 2 : JavaScript
Part 3 : Problems
Part 1 : HTML, CSS (materializecss)
1.1 เริ่มจากสร้างไฟล์ index.html พร้อมทำการติดตั้ง materializecss เพื่อใช้งานกันก่อนครับ จะได้ไฟล์ออกมาดังนี้
— Navbar ใช้เป็นการเลือกหมวดข่าวที่สนใจในการไปดึงข่าวจาก newsapi มาแสดงในส่วน Contents
— Card Contents แสดงผลเนื้อหาข่าวอกเป็นรูปแบบ card
— Loading แสดงสถานะระหว่างรอขอ้มูลจาก newsapi
1.2 ต่อด้วยการสร้างไฟล์ style.css โดยใช้งาน google font และกำหนดการแสดงผลของส่วน Loading จะได้ไฟล์ออกมาดังนี้
Part 2 : JavaScript
2.1 มาเขียน code javascript กำหนดส่วนต่างๆ ให้แสดงผลตามที่ต้องการ โดยในการเรียกข้อมูลจะใช้ Fetch API ในการเรียกข้อมูลด้วยการกำหนด parameter ต่างๆ ที่ต้องการลงใน url โดย url ที่ใช้จะเป็นแบบนี้
http://newsapi.org/v2/top-headlines?country=th&category=category&pageSize=100&apiKey=apiKeyโดยกำหนด country=th , category = ตัวแปร category ที่จะเปลี่ยนตามเมนูที่เลือก , pageSize = จำนวน 100 หัวข้อข่าว และสุดท้ายตามด้วย apiKey ที่ได้จากการสมัครใช้งานแบบฟรีของ newsapi เราก็จะได้ code ออกมาหน้าตาประมาณนี้
อธิบายการทำงานของฟังก์ชั่นต่างๆ แต่ละอันได้ดังนี้
getNews — จะเรียกข้อมูลข่าวจาก newsapi โดยจะขึ้นกับค่าตัวแปร category ที่จะเปลี่ยนไปตามเมนูที่เลือก และทำการสร้างหัวข้อข่าวตาม template ที่กำหนดไว้ด้วยฟังก์ชั่น addDataToDom ตามจำนวนหัวข้อข่าวที่ได้มา
สำหรับในส่วนการแสดงผลของเมนูกำหนดว่าหากมีการคลิ๊กเลือกเมนูไหนก็จะกำหนดเพิ่มให้แสดงผลตาม class=”active” พร้อมเรียกใช้งานฟังก์ชั่น getNews และทำการสร้างหัวข้อข่าวตาม template ที่กำหนดไว้ด้วยฟังก์ชั่น addDataToDom ตามจำนวนหัวข้อข่าวที่ได้มาจากการกำหนด category ที่กำหนดไว้ให้ในแต่ละเมนู
อีกส่วนหนึ่งคือให้คลิ๊กกลับไปด้านบนสุดเมื่อมีการเลื่อนอ่านข่าวมาลงมาเยอะๆ โดยสร้างฟังก์ชั่น goToTop สำหรับให้เลื่อนกลับด้านบนสุดเมืื่อคลิ๊กที่ปุ่มที่กำหนดไว้ และปุ่มนี้จะแสดงออกมาก็ต่อเมื่อมีการเลื่อนหน้าจอลงมามากพอตามที่กำหนดตามฟังก์ชั่น showGoToTopBtn
Part 3 : Problems
มาดูปัญหาสำหรับการใช้งาน newsapi กันก่อนครับ สำหรับการใช้งานฟรี developer plan นั้น จะกำหนดให้เราใช้งานผ่าน localhost ได้เท่านั้น ผมลองอัพโหลดขึ้น Netlify แล้วพบว่าไม่สามารถใช้งานได้ บังคับให้ upgrade plan ซึ่งมาราคาตามนี้ แพงเวอร์ 🤣🤣🤣
พอพัฒนาบน localhost พบว่า url ที่ใช้ได้เป็น http ธรรมดา ส่งผลให้เราเจอ error นี้
ทุกปัญหานั้นย่อมมีทางออกด้วย google.com และ stackoverflow.com จนได้คำตอบว่าต้องทำการติดตั้ง chrome extension ชื่อ Moesif Origin & CORS Changer ซึ่งจะมาช่วยให้ปัญหานี้หายไปในทันที สามารถอ่านเพิ่มเติมเรื่อง CORS ได้ที่ Cross-Origin Resource Sharing (CORS) เป็นสิ่งที่ Web Developer ต้องควรรู้
ท้ายสุด สำหรับเพื่อนๆ ที่อยาก copy ก็ไป download ได้ที่ https://github.com/ChaiyachetU/simple-news-headline เอาไปใช้ได้เลย สำหรับงานนี้ก็เป็น Mini project ที่ดูไม่น่าจะมีอะไร แต่กลับพบปัญหาจากการใช้งาน newsapi พอสมควรและได้เรียนรู้เกี่ยวกับการพัฒนา website ขึ้นไปอีกจากปัญหาที่เจอ ถึงแม้จะเป็น project เล็กๆ แต่กลับทำให้เราได้เรียนรู้และพัฒนาตัวเองมากขึ้น มันก็คุ้มค่าแล้วที่จะทำ…Happy learning and Happy coding 😊😊😊
ฝากร้านหนังสือมือสองของผมด้วยครับ เป็นหนังสือซื้อมาอ่านเอง แล้วต้องการขายต่อในราคาที่เป็นกันเอง เพื่อนที่สนใจสามารถติดตามหนังสือที่ขาย และสั่งซื้อได้ที่ https://shop.line.me/@921ijoic
โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
https://bit.ly/3c4tlmV
Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
http://bit.ly/36q8A12