สร้าง Dashboard ข้อมูลจริง COVID-19 ง่าย ๆ ด้วย React, Material-UI, Recharts, Axios

http://karnyong.github.io/ เป็นตัวอย่าง React App ผลลัพธ์ของ blog นี้นะครับ อัพเดทข้อมูลตาม API ของเว็บโซต์ covid19.th-stat กรบควบคุมโรค กระทรวงสาธารณสุข

แปะ clip ครับ สามารถทำตามได้ทั้งจากใน clip และบทความนะครับ

Software Installation

สำหรับมือใหม่เลยนะครับ เริ่มต้นให้ติดตั้ง software ที่จำเป็นก่อนดังนี้ครับ

• IDE ดี ๆ ซักตัว เช่น VS Code https://code.visualstudio.com/
• Node.js เป็น Javascript Engine ที่ใช้ในการ compile code และ run React นะครับ ดาวน์โหลดและติดตั้งได้จาก https://nodejs.org
• NPM (Node Package Manager) เครื่องมือในการจัดการกับ package ของ Node.js โดยจะติดตั้งมาพร้อมกับ Node.js อยู่แล้วครับ
• Yarn เป็นเครื่องมือจัดการกับ package อีกตัวหนึ่งของ Node.js ครับ ดาวน์โหลดและติดตั้งได้จาก https://classic.yarnpkg.com/en/docs/install
• create-react-app เป็นเครื่องมือที่ทำให้สามารถสร้างโปรเจ็ค React ได้ง่าย ๆ ด้วยการพิมพ์คำสั่งบรรทัดเดียว โดยสามารถติดตั้งได้โดยใช้คำสั่ง NPM

npm install -g create-react-app

Create React App

ใช้คำสั่ง create-react-app สร้างโปรเจ็ค React โดยตั้งชื่อว่า simple-dashboard เมื่อเสร็จแล้วให้เข้าไปที่โฟลเดอร์ simple-dashboard ที่ถูกสร้างขึ้น

create-react-app simple-dashboard
cd simple-dashboard

ติดตั้ง packages เพิ่มเติมเข้าไปในโปรเจ็ค simple-dashboard โดยใช้คำสั่ง yarn

yarn add @material-ui/core recharts axios

โดยมีรายละเอียดแต่ละ package ดังนี้

• material-ui/core ใช้ในการจัดวาง Layout และ Component ต่าง ๆ บนหน้าจอ UI
• recharts ใช้ในการสร้างแผนภูมิหรือ chart ต่าง ๆ
• axios ใช้ในการเรียก API สำหรับข้อมูล COVID-19 จาก URL https://covid19.th-stat.com/json/covid19v2/getTimeline.json

ทดสอบการทำงานของ React โดยการ Start App ขึ้นมาโดยคำสั่ง

yarn start

จากนั้นเข้าไปที่ web browser ดัวย URL http://localhost:3000 จะเห็นหน้า Web ดังภาพ เป็นอันสำเร็จการสร้างโปรเจ็ค App ของเราครับ

App.js

สำหรับส่วนนี้จะเป็นการเพิ่มเติมเรื่องของ Dashboard ลงไปใน App ot8iy[

ขอออกตัวก่อนนะครับว่าจะไม่ได้อธิบายละเอียด โดยในส่วนนี้หลัก ๆ คือต้องรู้โครงสร้างการทำงานและ life cycle ของ React ก่อนนะครับ โดยสามารถศึกษาเพิ่มเติมได้จาก

• https://reactjs.org/tutorial/tutorial.html
• https://www.w3schools.com/REACT/default.asp
• React life cycle มันคืออะไร ??? โดยคุณ Like

วิธีการใช้ axios เพื่อเรียก API

• https://github.com/axios/axios

วิธีการใช้ material-ui เพื่อจัดวาง Layout และใช้ Component ต่าง ๆ จาก

• https://material-ui.com/getting-started/usage/

และวิธีการสร้างแผนภูมิหรือ Chart รูปแบบต่าง ๆ ของ recharts

• https://recharts.org/en-US/examples

กลับมาที่ code ของเรานะครับ ให้ทำการแก้ไข App.js โดยสามารถลบ code ทั้งหมดในไฟล์ทิ้ง แล้วเพิ่มส่วนของการอ้างอิง module จาก package ต่าง ๆ

เพิ่มเติมส่วนของการแก้ไข css ของ material-ui

สร้าง class App ที่จะทำหน้าที่เป็น React Component โดยภายใน class

• สร้าง constructor เพื่อระบุ state ต่าง ๆ ที่มีสำหรับใช้เก็บค่าจากการเรียกใช้ API โดยจะมีการนำค่าของ state ต่าง ๆ ดังกล่าวมาแสดงผลบนหน้า App ต่อไป
• สร้าง function componentDidMount เพื่อให้ App ทำการเรียก function callAPI หลักจากที่ render หน้าจอต่าง ๆ เสร็จเรียบร้อยแล้ว
• สร้าง function callAPI โดยมีการใช้ axios เพื่อเรียก API ดึงข้อมูลต่าง ๆ จาก https://covid19.th-stat.com/json/covid19v2/getTimeline.json มาเก็บไว้ใน state

เพิ่ม function render เข้าไปใน class App โดยในส่วนนี้จะมีการใช้ material-ui ในการวาง layout และเรียกใช้ Component ต่าง ๆ และใช้ recharts ในการสร้างแผนภูมิ โดยจะมีการนำค่าต่าง ๆ จาก state นำมาแสดงผลบนหน้าจอในส่วนนี้

เข้าหน้า URL http://localhost:3000 อีกครั้งจะได้ผลลัพธ์ดังภาพ

หวังว่าจะมีประโยชน์ไม่มากก็น้อยนะครับ 5555

บทความนี้อาจจะอธิบายไม่ได้ไม่ละเอียดมากนะครับ ถ้ามีติดปัญหาตรงส่วนใหนสามารถ comment สอบถามได้ครับ โดย source code ทั้งหมด สามารถดาวน์โหลดได้จาก Github ด้านล่างเลยนะครับ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต

KarnYong/react-material-ui-dashboard-covid-19