App Workshop 2 : ทดลองเรียกใช้ API จากฐานข้อมูล
เว็บแอปพลิเคชัน กับการเรียกใช้ข้อมูลจาก API (Application Programming Interface) ร่วมกับฐานข้อมูล เพื่อให้ได้ข้อมูล หรือฟังก์ชันการทำงานที่ต้องการ โดยทั่วไปแล้วจะเกี่ยวข้องกับการส่งคำขอ HTTP ไปยัง URL ที่กำหนด และรับข้อมูลที่ตอบกลับมาในรูปแบบที่กำหนดไว้ เช่น JSON หรือ XML
1. สร้าง Project เพื่อทดลองทำตัว API ให้บริการข้อมูล
1.1 เปิด Command Prompt สร้างโฟลเดอร์ชื่อ node-express-crud พิมพ์ mkdir node-express-crud กด enter
(Capture หน้าจอ)
1.2 เปิด VS code ขึ้นมา และ Open Folder เลือกโฟลเดอร์ที่สร้างไว้
1.3 แหล่งอ้างอิง code express ที่ใช้ติดตั้ง สามารถดูได้จาก link นี้ค่ะ
1.4 เริ่มการติดตั้ง express ที่ Terminal VS code พิมพ์ npm i express กด enter
(Capture หน้าจอ)
1.5 แหล่งอ้างอิง express cor ที่ใช้ติดตั้ง สามารถดูได้จาก link นี้ค่ะ
1.6 เริ่มการติดตั้ง express cors ที่ Terminal VS code พิมพ์ npm install cors กด enter
(Capture หน้าจอ)
1.7 ที่ VS code สร้าง file ชื่อ server.js
(Capture หน้าจอ)
1.8 copy code ตัวอย่างจากเว็บ express cors นำไปวางที่ไฟล์ server.js
(Capture หน้าจอ)
1.9 แก้ไข port line 11 และ 12 จาก 80 เป็นรหัสนักศึกษาของคุณ โดยเริ่มต้น 2 ตัวแรกคือ 67 และ 2 ตัวท้ายคือรหัสนักศึกษาสองตัวท้ายค่ะ (ตัวอย่างนี้ใช้ port 8888)
(Capture หน้าจอ)
1.10 ติดตั้ง nodemon เป็นตัวสั่งให้ server รีเฟรช แหล่งอ้างอิง nodemon ที่ใช้ติดตั้ง สามารถดูได้จาก link นี้ค่ะ
1.12 เริ่มการติดตั้ง nodemon ที่ Terminal VS code พิมพ์ npm install -g nodemon กด enter
(Capture หน้าจอ)
1.13 เรียกใช้งาน nodemon พิมพ์ nodemon server.js
(Capture หน้าจอ)
1.14 ลองเรียกใช้ข้อมูล โดยไปที่ browser พิมพ์ localhost:8888/products/1 (ข้อความ line 8 ที่ file ชื่อ server.js จะปรากฎ) นั่นหมายถึง เราสามารถเรียกใช้งาน API สำเร็จ
(Capture หน้าจอ)
2. ทดลองสร้าง API ดึงข้อมูลมาแสดงด้วยคำสั่ง SELECT (Read)
2.1 แหล่งอ้างอิง mysql2 ที่ใช้ติดตั้งแพคเกตเสริม ใช้เชื่อมต่อฐานข้อมูล สามารถดูได้จาก link นี้ค่ะ
2.2 ติดตั้ง mysql2 เปิด Terminal ที่ VS code อีกตัว พิมพ์ npm i mysql2 กด enter
(Capture หน้าจอ)
2.3 copy code ตัวอย่างจากเว็บ node mysql2 (First Query --> Callback) //Get the client นำไปวางที่ไฟล์ server.js (line 4)
(Capture หน้าจอ)
2.4 copy code ตัวอย่างจากเว็บ node mysql2 (First Query --> Callback) //Create the connection to database นำไปวางที่ไฟล์ server.js (line 5) และ line 8 เปลี่ยนเป็นชื่อ database ของคุณ (ตัวอย่างนี้ใช้ database ชื่อ waraporn)
(Capture หน้าจอ)
2.5 copy code app.get ดังรูป จากนั้นแก้ไขชื่อตาราง ตัวอย่างนี้ใช้ตารางชื่อ user เพื่อดึงข้อมูลในตารางมาแสดง
(Capture หน้าจอ)
2.6 copy code ตัวอย่างจากเว็บ node mysql2 (First Query --> Callback) // A simple SELECT query นำไปวางที่ไฟล์ server.js พร้อมแก้ไขชื่อตาราง (line 15-21)
(Capture หน้าจอ)
2.7 เพิ่ม code เรียกใช้ json (line 18)
(Capture หน้าจอ)
2.8 ลองเรียกใช้ข้อมูล โดยไปที่ browser พิมพ์ localhost:8888/user ข้อมูลที่อยู่ในตารางชื่อ user จะปรากฎ นั่นแปลว่าเราสามารถเชื่อมต่อฐานข้อมูลได้แล้ว จะได้ข้อมูลออกมาเป็น json รูปแบบของ Array
(Capture หน้าจอ)
(ทุกครั้งที่จะเรียกใช้งานหลังจากสร้าง Project นี้แล้ว ต้องทำ 1. เปิดใช้งาน XAMPP 2. เรียกใช้งาน nodemon server.js)