React09: Web Application - SpO2 Tracker

ในบทความ React04: Simple Web Application - People Counter 2 ก่อนหน้านี้ เราได้ทำเว็บนับจำนวนลูกค้าสำหรับร้านค้ากันไปแล้ว สำหรับในบทความนี้เราจะมาทำเว็บเพื่อตรวจสอบสุขภาพของตัวเราในช่วงที่มีการแพร่ระบาดของเชื้อโควิดกันบ้าง

จากสถานการณ์โควิด-19 ที่ผ่านมา นักวิจัยพบว่าผู้ป่วยโควิดหลายรายไม่มีอาการผิดปกติใดเลย แต่หากวัดค่าออกซิเจนในเลือด กลับพบว่ามีค่าต่ำผิดปกติมาก และเมื่อเวลาผ่านไปสักระยะผู้ป่วยเหล่านั้นกลับมีอาการเหนื่อยหอบรุนแรง และระบบหายใจล้มเหลวอย่างรวดเร็ว หลายคนถึงขั้นเสียชีวิตหลังจากแสดงอาการไม่นาน ดังนั้นในบทความนี้ เราจะมาทดลองทำ Web application สำหรับติดตามค่าระดับออกซิเจนในเลือด (SpO2) โดยจะพล็อตกราฟแบบ Real-time ทันทีที่ได้รับข้อมูลเข้ามา สำหรับการพล็อตกราฟนั้นเราจะใช้ package ชื่อ react-chartjs-2 เข้ามาช่วย ส่วนการเก็บข้อมูลค่า SpO2 ของคนไข้นั้นจะเก็บใน LocalStorage ซึ่งเป็นการเก็บข้อมูลใน browser ของผู้ใช้งานแทนการเก็บใน Database ทำให้เราสามารถเก็บข้อมูลได้โดยที่ไม่ต้องทำฝั่ง back-end เพราะถึงแม้เราจะปิดหน้าเว็บแล้วเปิดใหม่ข้อมูลก็ยังคงอยู่ครับ

เตรียมตัวก่อนเริ่มทำ

1. เปิดโปรแกรม Command Prompt หรือ Terminal แล้วสร้าง React application ด้วยคำสั่ง

2. พิมพ์คำสั่งต่อไปนี้เพื่อเข้าไปที่โฟลเดอร์แอปพลิเคชันที่สร้าง ติดตั้ง bootstrap, uuid และ react-chartjs-2 แล้วทำการจำลองเครื่องให้เป็น server เพื่อทดสอบการทำงานของแอปที่สร้าง

3. เปิดโฟลเดอร์ src ของแอปพลิเคชันขึ้นมา เช่นในตัวอย่างนี้คือ D:\w721\re_ws_15\src 

• สร้างไฟล์ชื่อ Graph.js สำหรับเป็น Component วาดกราฟ
• สร้างไฟล์ชื่อ LocalStorage.js สำหรับเก็บฟังก์ชันที่เกี่ยวกับ LocalStorage

ดังนั้นโครงสร้างไฟล์ทั้งหมดในโฟลเดอร์นี้จะเป็นดังภาพ

Design

Code Part 

ในการเขียนโค้ดนั้นจะแบ่งออกเป็น 3 ส่วนหลัก ๆ คือ 

• ส่วนรับ input ค่า SpO2 เข้ามาเก็บใน LocalStorage และอัปเดต state
• ส่วนพล็อตกราฟโดยจะพล็อตกราฟค่า SpO2 ในแกน Y กับวันเวลาในแกน X ทันทีที่ได้รับ input จากผู้ใช้งาน 
• ส่วนแสดงประวัติของข้อมูลทั้งหมดที่ผู้ใช้งานใส่ค่าเข้ามา 

1. ในไฟล์ Graph.js ให้เขียนโค้ดดังนี้

import React from 'react';
import { Line } from 'react-chartjs-2';

const Graph = ({ xData, yData }) => {
    const data = canvas => {
        return {
            labels: xData,
            datasets: [
                {
                    label: 'SpO2',
                    data: yData,
                    borderColor: '#0020D0',
                    pointRadius: 6,
                    pointHoverRadius: 8
                }
            ]
        };
    };
    const options = {};

    return (
        <div>
            <Line data={data} options={options} />
        </div>
    );
};
export default Graph;

2. ในไฟล์ LocalStorage.js ให้เขียนโค้ดดังนี้

export const getData = (key) => {
    if (!localStorage) return;
    return JSON.parse(localStorage.getItem(key));
};

export const storeData = (key, item) => {
    localStorage.setItem(key, JSON.stringify(item));
};

export const deleteAllData = () => {
    localStorage.clear();
};

3. แก้โค้ดในไฟล์ App.js เป็นดังนี้

import React, {useState, useEffect} from 'react';
import {v1 as uuid} from 'uuid';
import Graph from "./Graph";
import {getData, storeData, deleteAllData} from './LocalStorage';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
    const initialState = () => getData('data') || [];
    const [state, setState] = useState(initialState);
    const [data, setData] = useState({});

    // input SpO2 value
    const inputRef = React.createRef();
    const submitHandler = () => {
        let o2value = inputRef.current.value;
        if(o2value > 0) {
            let id = uuid();
            let date = new Date().toLocaleString();
            let inputData = {id: id , date: date, value: o2value};
            let newState = [...state, inputData];
            setState(newState);
        }
    };

    // plot graph
    useEffect(() => {
        storeData('data', state);
        const date = state.map(obj => obj.date);
        const value = state.map(obj => obj.value);
        let newData = { date, value };
        setData(newData);
    }, [state]);

    // delete all store data
    const deleteHandler = () => {
        deleteAllData();
        setState([]);
    };

    return (
        <div className="container-fluid m-2">
            <h1>SpO2 Tracker</h1>
            <br />
            Please input SpO2:
            <div className="input-group">
                <input type='number' className='form-control' name='o2value'
                placeholder='95' ref={inputRef} />
                <button className="btn btn-success" type='submit'
                onClick={submitHandler} >Submit</button>
            </div>
            <hr />

            <Graph xData={data.date} yData={data.value} />
            <hr />

            <h3>History:</h3>
            <button className="btn btn-danger" onClick={deleteHandler} >
            Delete all store data</button>
            <div className="card mt-2">
                <div className="row">
                    <div className="col-6"><b>Datetime</b></div>
                    <div className="col-6"><b>SpO2</b></div>
                </div>
                {state.length > 0 ? (
                    <div>{state.map(d => (
                        <div className="row">
                        <div className="col-6">{d.date}</div>
                        <div className="col-6">{d.value}</div>
                        </div>
                    ))}
                    </div>
                    ) : (<p>No data</p>)
                }
            </div>
        </div>
    );
}
export default App;

เสร็จแล้วครับ เว็บ SpO2 Tracker แบบง่าย ๆ หากลอง Refresh หน้าเว็บดูจะเห็นได้ว่าข้อมูลทั้งหมดจะยังคงอยู่เหมือนเดิม แต่หากกดปุ่ม Delete all store data ข้อมูลที่เก็บไว้จะถูกลบทิ้งทั้งหมด

Challenge สำหรับผู้เรียนที่อยากทำอะไรเพิ่มเติม 

• สร้างไฟล์ HistoryItem.js เพื่อเป็น Component ของข้อมูลใน History แต่ละแถว แล้วเปลี่ยนการแสดงข้อมูลในไฟล์ App.js ให้แสดงผ่าน HistoryItem component แทน
• เพิ่มปุ่ม Delete ให้ HistoryItem component ซึ่งเมื่อกดแล้วจะลบ HistoryItem id นั้น ๆ ออกจาก LocalStorage
• เพิ่มให้รับค่า เก็บค่า และพล็อตกราฟข้อมูลอัตราการเต้นหัวใจ

ถ้าใครสนใจอยากเรียนเรื่อง React ให้ลึกซึ้งยิ่งขึ้นก็ขอแนะนำ คอร์สเรียนเขียนโปรแกรม React ฉบับไม่โหด (W721) แต่ถ้าผู้อ่านยังไม่มีพื้นฐานการทำเว็บมากก่อน ก็ขอแนะนำคอร์ส Web Programming ของทาง EPT ซึ่งจะสอนตั้งแต่พื้นฐานครับ สามารถคลิกที่นี่เพื่อดูรายละเอียดคอร์ส Web Programming หรือติดต่อได้ที่ 085-350-7540

ในบทความต่อไป เราจะมาลองทำเว็บที่จอดรถอัจฉริยะกัน แล้วพบกันใหม่บทความหน้านะครับ