React05: Web Application - Dictionary

หลังจากที่ได้ลองสร้าง React Application แบบง่าย ๆ กันไปใน React02: Create and Run React Application และ React03: Simple Web Application - People Counter ก่อนหน้านี้แล้ว ในบทความนี้ เราจะมาทดลองทำ Web application Dictionary หรือก็คือพจนานุกรมอังกฤษ – อังกฤษ โดยเมื่อผู้ใช้งานใส่คำที่ต้องการค้นหาเข้ามา เราจะทำการกรองคำศัพท์จากไฟล์ Dictionary ซึ่งประกอบด้วยคำและความหมายในรูปแบบ JSON จากนั้นจะแสดงคำศัพท์พร้อมความหมายของคำนั้น ๆ 20 คำศัพท์แรกที่มีส่วนขึ้นต้นตรงกับที่ผู้ใช้งานใส่เข้ามา ทั้งนี้ผลลัพธ์ของข้อมูลจะอยู่ในรูปแบบอาร์เรย์ซึ่งเราสามารถแปลงอาร์เรย์ให้อยู่ในรูปของ JSX ได้ด้วยฟังก์ชัน map 

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

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

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

3. ดาวน์โหลดไฟล์ dictionary.json จากที่นี่

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

• นำไฟล์ dictionary.json ที่ดาวน์โหลดในขั้นตอนที่ 3 มาใส่ในโฟลเดอร์นี้
• สร้างไฟล์ชื่อ SearchDict.js สำหรับค้นหาคำศัพท์จากไฟล์ dictionary.json
• สร้างไฟล์ชื่อ SearchResult.js สำหรับแสดงผลคำศัพท์และความหมายที่ตรงกับที่ผู้ใช้งานต้องการ

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

Design

Code Part

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

• ไฟล์ SearchDict.js: ทำการ filter ชุดของคำศัพท์และความหมายจากไฟล์ dictionary.json
• ไฟล์ SearchResult.js: รับผลลัพธ์จากการค้นหาผ่าน props dictData ซึ่งอยู่ในรูปแบบอาร์เรย์ แล้วใช้ฟังก์ชัน map เพื่อแปลงอาร์เรย์ให้อยู่ในรูป JSX สำหรับแสดงผลแต่ละคู่คำศัพท์ให้อยู่ในกรอบเดียวกัน
• ไฟล์ App.js: รับ input จากผู้ใช้งานแล้วค้นหาคำศัพท์ที่มีคำขึ้นต้นตรงกับค่า input ด้วยฟังก์ชัน SearchDict จำนวน 20 คำแรกแล้วผ่านค่าไปยัง SearchResult component เพื่อแสดงผลลัพธ์ทั้งหมด

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

import dictList from "./dictionary.json";

export default function searchDict(searchText, maxResults) {
    return dictList.filter(function (text) {
        return (text.word.toLowerCase().startsWith(searchText.toLowerCase()));
    })
    .slice(0, maxResults);
}

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

import React, { Component } from "react";

class SearchResult extends Component {
    render() {
        return (
            <div>
            {this.props.dictData.map(data => (
                <div className="card mt-1">
                <p><b>{data.word}</b></p>
                <span>{data.meaning}</span>
                </div>
            ))}
            </div>
        );
    }
}
export default SearchResult;

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

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

function App() {
    const [dataState, setDataState] = useState(
        {
            dictList: []
        }
    );

    const inputRef = React.createRef();
    const inputChange = () => {
        setDataState({
            dictList: SearchDict(inputRef.current.value, 20)
        });
    };

    return (
        <div className="container-fluid">
            <h3>Please input keyword:</h3>
            <input type="text" name="key" className="form-control"
            ref={inputRef} onChange={inputChange} />
            <hr />
            <h3>Search Results:</h3>
            <SearchResult dictData={dataState.dictList} />
        </div>
    );
}
export default App;

4. หลังจากบันทึกไฟล์เรียบร้อยแล้ว หากปิด Server ไปแล้วให้พิมพ์คำสั่ง npm start เพื่อทดสอบการทำงานของแอปที่สร้าง แล้วไปที่หน้าเว็บ http://localhost:3000 จากนั้นทดลองพิมพ์คำศัพท์ที่ต้องการค้นหา จะเห็นว่าที่ด้านล่างจะแสดงผลลัพธ์ตามคำที่พิมพ์

เสร็จแล้วครับ เว็บพจนานุกรมแบบง่าย ๆ

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

• เพิ่มช่อง input ให้ผู้ใช้งานสามารถกำหนดได้ว่าต้องการให้แสดงผลการค้นหาสูงสุดกี่คำ
• ตรงส่วน input keyword เพื่อค้นหา ให้เพิ่ม Radio button เพื่อกำหนดเงื่อนไขในการค้นหาคำศัพท์ดังต่อไปนี้

  Radio button value	ผลลัพธ์จากการค้นหาที่ควรได้ออกมา	ตัวอย่าง input	ตัวอย่างผลลัพธ์
  StartWith	คำศัพท์ที่มีส่วนขึ้นต้นตรงกับ input	cat	cat, category
  Contain	คำศัพท์ที่มีส่วนใดส่วนหนึ่งตรงกับ input	cat	category, abdicate
  Meaning	คำศัพท์ที่ความหมายมีส่วนใดส่วนหนึ่งตรงกับ input	cat	ABACTION - Stealing cattle on a large scale. [Obs.]

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

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