สร้างโปรเจ็คเริ่มต้นแบบง่ายๆ ด้วย Koa Node.js Framework | Getting started

ถ้าพูดถึง Node.js Framework หลายๆ คนน่าจะรู้จัก Express ซึ่งเป็น Framework ที่ง่ายต่อการเรียนรู้ ง่ายต่อการใช้งาน และมี Community ที่เข้มแข็ง (เนื่องจากโด่งดังในยุคบุกเบิกของ Node.js เลย) แต่วันนี้เราจะพูดถึง Express เพียงเท่านี้ เพราะเราจะพูดถึง Koa Node.js Framework ซึ่งมาจากผู้พัฒนาเดียวกันกับ Express

Koa คืออะไร ทำไมต้อง Koa

Koa คือ Node.js webframework ที่มีขนาดเล็ก มีประสิทธิภาพสูง และรองรับ Async Function โดย Concept ของ Koa คือการปรับปรุง และแทนที่ฟังก์ชั่นของ Node.js ให้ทำงานได้ดีขึ้น และไม่มีการเตรียม Packges ต่างๆให้เรา (เช่น Router, View Engine) ซึ่งจะแตกต่างจาก Concept ของ Express ที่จะปรับปรุง เพิ่มเติมความสามารถของ Node.js และตระเตรียม Packages ต่างๆ มาให้เราพร้อมใช้งาน (เช่น Router, View Engine) ซึ่งผู้พัฒนาได้บอกไว้ว่า Koa ไม่ได้ออกมาแทนที่ Express แต่ออกมาเป็นทางเลือกให้กับเรา ดังนั้นถ้าถามว่าใช้อันไหนดีก็ขอสรุปสั้นๆ ว่าทั้งสอง Framework ต่างมีข้อดี และข้อเสีย เพราะฉะนั้นเลือกใช้ให้เหมาะสมกับเรา เพื่อนร่วมทีม และงานที่เราพัฒนาจะดีที่สุด 🤩

Directory structure

เขาบอกว่ารากฐานที่ดีเริ่มจากการออกแบบที่ดี 🤔 เพราะฉะนั้นการออกแบบที่ดีตั้งแต่ Directory structure ก็จะส่งผลดีต่อโปรเจ็คเราเช่นนั้นแล เพราะจะทำให้ดูแล ปรับปรุง รักษา ได้ง่ายขึ้น เป็นระเบียบมากขึ้น

/configs
/libs
/models
/routes
/public
/tests
index.js
package.json

/configs สำหรับเก็บการตั้งค่าต่างๆ ของ Application
/libs สำหรับเก็บ Class Functions หรือ Modules ต่างๆ ที่เราเขียนขึ้นมา
/models สำหรับเก็บ ORM models
/routes สำหรับเก็บเส้นทางต่างๆ ของ Application (โค้ดส่วนที่ทำหน้าที่เป็น Controller ใน MVC)
/public สำหรับเก็บ Static Files ต่างๆ
/tests สำหรับเก็บ Unittest ต่างๆ
index.js คือไฟล์ที่เปรียบเหมือนจุดเริ่มต้นของเซิร์ฟเวอร์ ใช้สำหรับรันเพื่อสร้างเซิร์ฟเวอร์ขึ้นมา
package.json คือไฟล์สำหรับเก็บข้อมูล การตั้งค่า และ Dependencies ของ Application

ติดตั้ง Dependencies ที่จำเป็น

ในบทความนี้จะใช้ Yarn สำหรับการติดตั้ง dependencies ถ้าใครจะใช้ NPM ก็ได้ไม่ผิดได้เหมือนกัน

ทำการเริ่มโปรเจ็คด้วยคำสั่งๆ

yarn init

หลังจากกรอกข้อมูลต่างๆเรียบร้อย ขั้นตอนต่อไปก็เริ่มติดตั้ง Dependencies กันเล้ย

yarn add koa koa-bodyparser koa-router

koa ก็ไม่ต้องพูดไรมาก ก็คือ Koa framework 😆
koa-bodyparser ช่วยให้สามารถอ่านข้อมูล Body ของ Request ได้
koa-router ใช้สำหรับกำหนดเส้นทางต่างๆ ของ Application ด้วย HTTP Methods

สำหรับใครที่ขี้เกียจรีสตาร์ทเซิร์ฟเวอร์บ่อยๆเมื่อมีการเปลี่ยนแปลงก็อย่าลืมติดตั้งเพื่อนยากคนนี้ด้วย

yarn add --dev nodemon

nodemon ช่วยสอดส่อง เมื่อไฟล์ในเซิร์ฟเวอร์มีการเปลี่ยนแปลงก็จะทำการรีสตาร์ทเซิร์ฟเวอร์ให้ทันที

เริ่มเขียนโค้ดกันดีกว่าา

สร้างไฟล์ app.js ที่ /config เพื่อกำหนดการตั้งค่าของเซิร์ฟเวอร์

module.exports = {
   NODE_PORT: '3333'
};

จากนั้นสร้างเส้นทาง (Route) แรกของเซิร์ฟเวอร์เรา สร้างไฟล์ index.js ที่ /routes โดยเมื่อเข้าถึง Root Path (‘/’) เมื่อมี Request มาจะทำการส่ง Response กลับไป โดยประกอบไปด้วย HTTP status 200 และ JSON ไปกับ Body

const Router = require('koa-router');
const router = new Router();
router.get('/', (ctx, next) => {
   ctx.status = 200;
   ctx.body = { msg: 'Hello World' };
});
module.exports = router;

จากนั้นก็สร้างไฟล์ index.js ที่ Root path (‘/’) เพื่อใช้สำหรับเปิดเซิร์ฟเวอร์

const bodyParser = require('koa-bodyparser');
const Koa = require('koa');
const appConfig = require('./configs/app');
const indexRoute = require('./routes/index');
const app = new Koa();
app.use(bodyParser());
app.use(indexRoute.routes());
const server = app.listen(appConfig.NODE_PORT).on('error', err => {
   console.log(err);
});
module.exports = server;

อ่าาาาอีกนิดใกล้เสร็จแล้ววว ทำการแก้ไขไฟล์ package.json ที่ Root path (‘/’) เพื่อเพิ่ม Script สำหรับรันเซิร์ฟเวอร์

...
"scripts": {
   "serve": "node ./index.js",
   "start": "nodemon node ./index.js",
}
...

Script ‘serve’ ใช้สำหรับรันเซิร์ฟเวอร์
Script ‘start’ ใช้สำหรับรันเซิร์ฟเวอร์โดยใช้ nodemon สำหรับการรีสตาร์ทเซิร์ฟเวอร์เมื่อมีการแก้ไขไฟล์

รันเซิร์ฟเวอร์ 🚀

ไม่ต้องพิมพ์พร่ำทำเพลง จัดการรันคำสั่งเล้ยยย

yarn start

จากนั้นเข้า http://localhost:3333/ ถ้าไม่มีอะไรผิดพลาดก็จะได้ JSON กลับมาาา เย้ ~

Success 🎉

สรุป

บทความนี้เป็นเพียงก้าวแรกที่ทำให้เรารู้จักกับ Koa ก็หวังว่าจะสามารถนำความรู้ไปต่อยอดเพื่อที่จะได้รู้จัก และเรียนรู้กับ Koa ให้มากขึ้น :)

Source Code : Sample Koa Application

สร้างโปรเจ็คเริ่มต้นแบบง่ายๆ ด้วย Koa Node.js Framework | Getting started

สร้างโปรเจ็คเริ่มต้นแบบง่ายๆ ด้วย Koa Node.js Framework | Unittest