Web App—Simple News Headline Website [HTML, CSS and JavaScript]

วันหยุดสุดสัปดาห์ยาวๆ แบบนี้แล้วไม่ได้เดินทางไปเที่ยวที่ไหน เพราะยังต้องมานั่งเฝ้าออฟฟิสอยู่เช่นเดิม 😂 มันก็ต้องหาทำ 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