เขียน API สำหรับ CRUD ข้อมูล ด้วย Express.js และ MongoDB

Karn Yongsiriwit
5 min readJun 25, 2021

--

บทความนี้เป็นพื้นฐานแบบเรียกได้ว่าจับมือทำนะครับ 555 สำหรับการพัฒนา API โดยใช้ Node.js, Express.js และฐานข้อมูลเป็น MongoDB โดยเป็น API สำหรับให้บริการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ครับ

แปะ clip ครับ ดูตาม clip หรืออ่านตามบทความได้ก็ได้ครับ 😃

โดยผลลัพธ์ที่ได้จากคล้ายๆ กับ API บน mecallapi.com ที่ผมเขียนขึ้นมาเพื่อจำลองการ CRUD ข้อมูลนะครับ ถ้าอยากดูรายละเอียดก็เข้าไปดูได้เลยครับ และบทความนี้ในช่วงสุดท้ายจะนำ API ที่เขียนได้จะนำไปใช้กับหน้าเว็บ CRUD ข้อมูลอีกทีเพื่อให้ได้ผลลัพธ์แบบใน mecallapi.com/crud/

mecallapi.com/crud/

Software Installation

ซอฟต์แวร์และเครื่องมือที่ใช้นะครับ

สร้าง User ใน MongoDB

เริ่มจากการสร้าง User สำหรับใช้ในการเชื่อมต่อ MongoDB นะครับ เปิด MongoDB Compass ขึ้นมา (โปรแกรมจะมาพร้อมกับการติดตั้ง MongoDB Community)

เลือก New Connection > Fill in connection Fields individually

สังเกตว่า Hostname จะเป็น localhost นั้นก็คือการเชื่อมต่อกับ MongoDB ในเครื่องของเราเอง ให้กดปุ่ม Connect

การสร้าง User สามารถทำได้โดยการพิมพ์คำสั่งผ่าน shell ของ MongoDB ให้กดเลือก MONGOSH ด้านล่าง

พิมพ์คำสั่ง use admin เพื่อระบุว่าจะใช้ database ชื่อว่า admin

use admin

สร้าง user: myUserAdmin โดยมี password: myUserAdmin และให้สิทธิในการอ่านและเขียน Database ด้วยคำสั่งด้านล่าง

db.createUser({user: "myUserAdmin", pwd: "myUserAdmin", roles: [{role: "userAdminAnyDatabase", db: "admin"}, "readWriteAnyDatabase"]})

ลอง Connect เข้า MongoDB ใหม่ โดยการใส่ Username, Password และ Authentication Database ตามด้านล่าง

สร้าง API ด้วย Express.js

ก่อนอื่นสร้าง folder สำหรับเก็บโปรเจคของเราก่อนนะครับ ตัวอย่างคำสั่งด้านล่างจะเป็นการใช้ Command Prompt/Console เพื่อตั้งชื่อ folder ว่า express-mongodb-api และเข้าไปใน folder ดังกล่าว

mkdir express-mongodb-api
cd express-mongodb-api

เมื่อเข้าไปที่ folder แล้วให้ใช้คำสั่งด้านล่างเพื่อตั้งต้นโปรเจค Node.js ของเราด้วยคำสั่ง npm init และติดตั้งโมดูล Express.js และ cors ลงในโปรเจคของเราด้วยคำสั่ง npm install (Express.js ใช้ในการสร้าง web application สำหรับเป็น API และ cors จะเป็นตัวช่วยให้สามารถเรียกใช้ API ข้าม domain ได้)

npm init
npm install express cors --save

สร้างไฟล์ index.js และใส่ code ตามด้านล่าง

รัน API ของเราขึ้นมาด้วยคำสั่งด้านล่าง

node index.js

ทดลองเข้า http://localhost:3000 ผ่าน web browser จะเห็นผลลัพธ์ตามรูป

ใช้ CTRL+C เพื่อปิด API ก่อน แล้วติดตั้ง module เพิ่มเติมตามด้านล่าง

  • nodemon จะเป็นตัว run API ของเราแทนคำสั่ง node ซึ่งจะช่วยให้เมื่อเราแก้ไข code จะมีการ refresh ตัว API แบบอัตโนมัติ
  • mongodb ใช้ในการเชื่อมต่อ mongodb
npm install -g nodemon
npm install mongodb --save

จากนั้นใช้คำสั่ง nodemon เพื่อ start API ของเราขึ้นมาใหม่

nodemon index.js

Create API

เริ่มต้นสร้าง API เส้นสำหรับการ Create ข้อมูล (ขอเรียก API หน่วยเป็นเส้นนะครับ 555) โดย

  • ประกาศ uri สำหรับเชื่อมต่อกับ MongoDB โดยระบบ username และ password ในบรรทัดที่ 2
  • app.post(…) เป็นการระบุว่าเส้น API เส้นนี้จะเป็น HTTP method POST และภายในฟังก์ชันจะมีการเชื่อมต่อกับ collection users ใน ฐานข้อมูล mydb เพื่อสร้างข้อมูลเข้าไป

สำหรับการทดสอบ API เราจะใช้ POSTMAN กัน โดย API เส้น Create จะมีรายละเอียดที่ใช้ทดสอบใน POSTMAN ดังนี้

HTTP Method: POST
URL: http://localhost:3000/users/create
ตัวอย่าง Body (raw - JSON):

{
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png"
}

*การแนบข้อมูลเข้าไปใน Body จะเป็นรูปแบบของ JSON ซึ่งเป็นข้อมูลที่มี key และ value ซึ่งเปรียบเสมือนกับ field ของข้อมูล สามารถดูรายละเอียดเพิ่มเติมได้จาก w3school

สร้าง Request ด้วยรายละเอียดตามด้านบน จากนั้นกดปุ่ม Send จะได้ผลลัพธ์ (Response) ตอบกลับมาดังรูป

ตัวอย่าง Response:

{
"status": "ok",
"message": "User with ID = 1 is created",
"user": {
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png",
"_id": "60d426e38c036327886e7fd1"
}
}

กลับไปดูที่ MongoDB Compass (กด refresh ด้วย) จากนั้นเลือก collection users ที่อยู่ภายใต้ฐานข้อมูล mydb จะเห็นข้อมูลที่ถูกสร้างขึ้นดังภาพ (การเก็บข้อมูลใน MongoDB จะเป็นลักษณะของเอกสารในรูปแบบ JSON)

ลองสร้างข้อมูลเพิ่มเติมด้วย POSTMAN ได้นะครับ โดยใช้ข้อมูลด้านล่างแนบใน Body

{
"id": 2,
"fname": "Ivy",
"lname": "Cal",
"username": "ivy.cal@mecallapi.com",
"email": "ivy.cal@mecallapi.com",
"avatar": "https://www.mecallapi.com/users/2.png"
}

มาดูใน MongoDB Compass จะเห็นข้อมูลเพิ่มขึ้นมา (กด REFRESH ด้วย)

Read All API

ถัดมาจะเป็น API สำหรับการ Read ข้อมูลทั้งหมด

  • app.get(…) เป็นการระบุว่าเส้น API เส้นนี้จะเป็น HTTP method GET

ทดสอบด้วย POSTMAN

HTTP Method: GET
URL: https://localhost:3000/users

ตัวอย่าง Response:

[
{
"_id": "60d5cfd7469c0403e492e1dc",
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png"
},
{
"_id": "60d5cfe2469c0403e492e1dd",
"id": 2,
"fname": "Ivy",
"lname": "Cal",
"username": "ivy.cal@mecallapi.com",
"email": "ivy.cal@mecallapi.com",
"avatar": "https://www.mecallapi.com/users/2.png"
}
]

Read by id API

เพิ่ม API เส้นสำหรับการอ่านข้อมูล 1 ข้อมูลโดยการระบุ id

ทดสอบด้วย POSTMAN

HTTP Method: GET
URL: http://localhost:3000/users/1
*เลข 1 ที่อยู่ท้าย URL เป็นการระบุค่าของ id ซึ่งสามารถเปลี่ยนได้

ตัวอย่าง Response:

{
"status": "ok",
"user": {
"_id": "60d5cfd7469c0403e492e1dc",
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png"
}
}

Update API

API เส้นนี้จะเป็นการแก้ไขข้อมูลที่มีอยู่แล้ว โดยอ้างอิงจาก id

  • app.put(…) เป็นการระบุว่าเส้น API เส้นนี้จะเป็น HTTP method PUT

ทดสอบด้วย POSTMAN

HTTP Method: PUT
URL: http://localhost:3000/users/update
ตัวอย่าง Body (raw — JSON):

{
"id": 1,
"fname": "Cat",
"lname": "Chat",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png"
}

ตัวอย่าง Response:

{
"status": "ok",
"message": "User with ID = 1 is updated",
"user": {
"id": 1,
"fname": "Cat",
"lname": "Chat",
"username": "karn.yong@mecallapi.com",
"email": "karn.yong@mecallapi.com",
"avatar": "https://mecallapi.com/users/1.png"
}
}

Delete API

API เส้นสุดท้ายนี้เป็นการลบข้อมูล โดยอ้างอิงจาก id

  • app.delete(…) เป็นการระบุว่าเส้น API เส้นนี้จะเป็น HTTP method DELETE

ทดสอบด้วย POSTMAN

HTTP Method: DELETE
URL: http://localhost:3000/users/delete
ตัวอย่าง Body (raw — JSON):

{
"id": 1
}

*สามารถเปลี่ยนค่าของ id ที่เป็น 1 อยู่ให้เป็นค่าอื่นได้

ตัวอย่าง Response:

{
"status": "ok",
"message": "User with ID = 1 is deleted"
}

ทดลอง API กับหน้าเว็บ

หลังจากที่ API เสร็จแล้ว ปกติจะส่งให้ผู้พัฒนาในฝั่งของหน้าบ้าน (Front-End) หรือฝั่งที่พัฒนาส่วนติดต่อผู้ใช้ (User interface) มาเรียกใช้ API ของเรา เพื่อให้เห็นภาพนะครับ ผมเตรียมส่วนของหน้าบ้านไว้ให้ สามารถดาวน์โหลดได้จาก Github ด้านล่างนี้นะครับ โดย code ที่เรียก API ทั้งหมดจะอยู่ที่ index.js

ดาวน์โหลดมาไว้คนละที่กับ API ของเรานะครับ (เดี๋ยวไฟล์จะทับกัน 555) จากนั้นลองเปิด index.html ด้วย Web browser แล้วทำการลอง CRUD ข้อมูลได้เลยครับ

ลองสร้างข้อมูลเพิ่มได้

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

--

--

Karn Yongsiriwit
Karn Yongsiriwit

Written by Karn Yongsiriwit

Lecturer at Digital Innovation Technology, Rangsit University

No responses yet