ใช้ React และ API ทำเว็บสำหรับ CRUD ข้อมูล แบบพื้นๆ

บทความนี้จะเป็นพื้นฐานในการสร้างหน้า Web โดยใช้ React เพื่อทำการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ข้อมูล ผ่านการเรียกใช้ API ตัวจำลอง ที่ให้บริการอยู่บนเว็บ MeCallAPI.com (เว็บผมเองครับ 5555)

แปะ clip นะครับ ทำตาม clip ได้เช่นเดียวกัน

ถ้าอยากลองใช้ API สำหรับจำลองการทำ CRUD หรือ Authentication ก็เข้าไปดูรายละเอียดได้ที่ MeCallAPI.com เลยครับ

ส่วนผลลัพธ์ของบทความนี้ มีตัวอย่างให้ลองทดสอบได้ที่ https://www.mecallapi.com/crud/

Software Installation

• Node.js https://nodejs.org

เริ่มต้นเขียน React

สร้างโปรเจค

npx create-react-app react-crud
cd react-crud

ติดตั้ง package เพิ่มเติม

• Material UI สำหรับใช้แสดงส่วนประกอบต่าง ๆ บนหน้าจอ (เช่น กล่องข้อความ ปุ่ม เป็นต้น)
• react-router-dom สำหรับจัดการ Route หรือเส้นทางภายใน app ของเรา

npm install @material-ui/core @material-ui/icons react-router-dom

รัน app ได้เลย

npm start

เข้า URL http://localhost:3000 ด้วย web browser เห็นผลลัพธ์ดังภาพ

สร้างหน้า Read User และ Delete User

แก้ไขไฟล์ App.js โดยใส่ Router จาก react-router-dom เข้าไป โดยใส่ component Navbar และ Users ที่จะสร้างต่อจากนี้

สร้างไฟล์ Navbar.js สำหรับเป็น Component ส่วนของแถบด้านบน โดยใช้ Material UI App bar.

สร้างไฟล์ Users.js สำหรับเป็น Component ส่วนของหน้าแสดงรายการ User โดยในหน้านี้ Code จะค่อนข้างเยอะนะครับ เพราะต้องการความสวยงามของ Material UI นิดนึงครับ 555

หน้านี้จะใช้ API สำหรับข้อมูลรายการ User ตามด้านล่าง (Read)
API URL: https://www.mecallapi.com/api/users
Method: GET

และ API สำหรับการลบข้อมูล (Delete) *API นี้ลบได้เฉพาะข้อมูลที่สร้างใหม่เท่านั้น
API URL: https://www.mecallapi.com/api/users/delete
Method: DELETE
ตัวอย่าง Body (JSON):

{
    "id": 11
}

อธิบาย Code ซักหน่อยนะครับ 555

• useStyles (บรรทัดที่ 18–35 และ 38) เป็นส่วนของการกำหนด CSS ที่ใช้ร่วมกับ Material UI
• กำหนด State (บรรทัดที่ 40) ชื่อว่า users และฟังก์ชัน setUsers สำหรับแก้ไขค่า users
• กำหนดฟังก์ชัน useEffect (บรรทัดที่ 41–43) เป็นวิธีการของ React ที่เรียกว่า Effect Hook สำหรับการให้เรียกฟังก์ชัน useEffect หลังจากมีการโหลดหน้าเว็บขึ้นมา และในทุกครั้งที่มีการอัพเดทของค่าของ State ตัวใดก็ตาม เพื่อให้ข้อมูลที่แสดงอยู่บนหน้าเว็บมีการเปลี่ยนแปลงอยาก dynamic (ไม่ต้อง refresh หน้าใหม่)
• กำหนดฟังก์ชัน UsersGet (บรรทัดที่ 45–53) เพื่อเรียก API เส้น https://www.mecallapi.com/api/users เพื่อนำค่าที่เป็นรายการของ users มาเก็บอยู่ใน State users
• บรรทัดที่ 55–80 เป็นส่วนของการเรียก API เส้นที่ใช้สำหรับลบ user
• บรรทัดที่ 113–131 เป็นการนำ State users มาแสดงทีละรายการเป็นแถวในตารางโดยการใช้ loop (map)

ผลลัพธ์ที่ได้จะเป็นหน้ารายการ User ดังภาพ

สร้างหน้าสำหรับ Create User

สร้างไฟล์ UserCreate.js เพื่อเป็น Component สำหรับหน้าสร้างข้อมูล User

แก้ไขไฟล์ App.js โดยเพิ่มหน้า UserCreate เข้าไปใน Router

ทดสอบหน้าสร้างข้อมูล

สร้างหน้าสำหรับ Update User

สร้างไฟล์ UserUpdate.js เพื่อเป็น Component สำหรับหน้าแก้ไขข้อมูล User โดย code จะแทบเหมือนกับหน้า Create User มีแก้ API จากเส้น create เป็น update

API สำหรับการแก้ไขข้อมูล User (Update)
API URL: https://www.mecallapi.com/api/users/update
Method: PUT
ตัวอย่าง Body (JSON):

{
    "id": 11,
    "fname": "Cat",
    "lname": "Gato",
    "username": "cat.gato@mecallapi.com",
    "email": "cat.gato@mecallapi.com",
    "avatar": "https://www.mecallapi.com/users/cat.png"
}

และ API สำหรับการเรียกดูข้อมูล User โดยอ้างอิงจาก id (Read)
API URL: https://www.mecallapi.com/api/users/1
Method: GET
*เลขที่อยู่ท้าย URL จะใช้เป็น id ในการอ้างอิงเพื่อแสดงข้อมูล User

• กำหนดฟังก์ชัน useEffect (บรรทัดที่ 34–46) เพื่อให้หลังจากมีการโหลดหน้าเว็บขึ้นมา และในทุกครั้งที่มีการอัพเดทของค่าของ State ตัวใดก็ตาม และรวมถึง Props ด้วย (ยกเว้น id เป็นตัวยกเว้น ที่ใส่ใว้ในวงเล็บเหลี่ยม [ ] ท้ายฟังก์ชัน) เพื่อให้ข้อมูลที่แสดงอยู่บนหน้าเว็บมีการเปลี่ยนแปลงทันที

แก้ไขไฟล์ App.js โดยเพิ่มหน้า UserUpdate เข้าไปใน Router

ทดสอบการแก้ไขข้อมูล

ทดสอบการลบข้อมูลด้วยครับ

เรียบร้อยแล้วครับ ไว้ว่างๆ จะมาเพิ่มรายละเอียดในบทความนะครับ

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