React10: Web Application - Smart Parking

หลายคนเวลาไปห้างคงจะเคยลำบากต้องวนหาที่จอดรถ แม้ว่าหลาย ๆ ห้างจะมีเซนเซอร์แสดงไฟสีเขียวบอกว่าช่องไหนว่างอยู่แต่จะดีกว่าไหมถ้าดึงเอาข้อมูลจากเซนเซอร์ที่ติดอยู่ทั้งหมดมาแสดงผ่านหน้าจอว่าช่องไหนว่างอยู่บ้าง ดังนั้นในบทความนี้ เราจะมาลองทำ Web application สำหรับแสดงที่จอดรถแบบ Real-time กันครับ แต่เนื่องจากเราใช้ React ทำเฉพาะฝั่ง Front-end ดังนั้นเราจะจำลองข้อมูลสถานะของช่องจอดรถทุกช่อง แล้วหน่วงเวลาเพื่อดึงข้อมูลเหล่านั้นมาแสดงแทนการเชื่อมต่อกับเซนเซอร์จริง

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

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

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

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

• สร้างไฟล์ชื่อ ParkingSlot.js สำหรับเป็น Component ช่องจอดรถ

Design

Code Part 

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

• ส่วน state จำลองข้อมูลสถานะของช่องจอดรถทุกช่องซึ่งเก็บเป็นอาร์เรย์ขนาด 20 ช่อง เรียงจากช่อง A1 … D5 โดยให้ค่า 1 แทนสถานะที่ช่องจอดรถไม่ว่าง และค่า 0 แทนสถานะที่ช่องจอดรถว่างสามารถจอดได้
• ไฟล์ ParkingSlot.js เป็น Component ช่องจอดรถ ถ้าว่างให้แสดงสีพื้นหลังเป็นสีเขียว ถ้าไม่ว่างให้แสดงสีแดง
• ส่วนแสดงสถานะของช่องจอดรถทุกช่อง โดยจะหน่วงเวลาเพื่ออัปเดตค่าทุก ๆ 2 วินาที 

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

import React from 'react';

const ParkingSlot = (props) => {

    let slotName = "";
    if (props.position <= 5) slotName = "A";
    else if (props.position <= 10) slotName = "B";
    else if (props.position <= 15) slotName = "C";
    else if (props.position <= 20) slotName = "D";

    if (props.position % 5 === 0) slotName = slotName + "5";
    else slotName = slotName + (props.position % 5);

    let thisStyle = {};
    if (props.status === 1) thisStyle = {width: 100, background: 'red'};
    else thisStyle = {width: 100, background: 'green'};

    return(
        <div className="card" style={thisStyle}>
            <div className="card-body text-center">
                <h5 class="card-title">{slotName}</h5>
            </div>
        </div>
    );
}
export default ParkingSlot;

import React, {useState, useEffect} from 'react';
import ParkingSlot from "./ParkingSlot";
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
    const testSample = [
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [1,0,0,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0],
        [1,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0,1,0,1,0],
        [0,1,1,1,1,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0],
        [0,1,1,1,1,0,0,0,1,1,0,1,0,1,0,0,0,0,0,0],
        [0,1,1,0,1,0,0,1,0,0,0,1,0,0,0,0,1,1,1,1],
        [0,0,0,0,0,1,1,0,0,0,1,0,1,1,0,0,0,1,1,1],
        [0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0]
    ];
    const [count, setCount] = useState(0);
    const [status, setStatus] = useState(
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);

    // update every 2 seconds then repeat
    useEffect(() => {
        const intervalID = setTimeout(() =>  {
            setStatus(testSample[count]);
            if(count === testSample.length - 1) setCount(0);
            else setCount(count + 1);
        }, 2000);

        return () => clearInterval(intervalID);
    }, [count]);

    let thisStyle = {width: 100};

    const showParkingSlot = () => {
        const row = [];
        for (var i = 0; i < 5; i++) {

            row.push(
                <div className="row">
                    <div style={thisStyle}>
                        <ParkingSlot position={i + 1} status={status[i]} />
                    </div>
                    <div style={thisStyle}></div>
                    <div style={thisStyle}>
                        <ParkingSlot position={i + 6} status={status[i + 5]} />
                    </div>
                    <div style={thisStyle}>
                        <ParkingSlot position={i + 11} status={status[i + 10]} />
                    </div>
                    <div style={thisStyle}></div>
                    <div style={thisStyle}>
                        <ParkingSlot position={i + 16} status={status[i + 15]} />
                    </div>
                </div>
            );
        }
        return row;
    };

    return (
        <div className="container-fluid m-2">
            <h1>Parking Slot Status</h1>
            {showParkingSlot()}
        </div>
    );
}
export default App;

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

แล้วพบกันใหม่บทความหน้านะครับ