สร้าง API ง่ายๆ ด้วย Node.js และ Express

expressjs

ขอขอบคุณ Guest Post จากคุณ Chai Phonbopit
ติดตามผลงานเพิ่มเติมได้ที่ devahoy.com

บทความนี้เราจะมาพูดถึงการทำ RESTFul API ด้วย Node.js และ Express กันนะครับ โดยผมจะขอไม่พูดถึงรายละเอียดเชิงลึกหรือทฤษฎีอะไรมากมาย แต่จะขอเน้นไปที่การนำเสนอตัวอย่างและวิธีการทำจากประสบการณ์ที่ผมได้ทำมาเท่านั้น ซึ่งผมเองก็ยังเพิ่มเริ่มศึกษาอยู่ หากมีส่วนไหนผิดพลาด ก็ต้องขออภัยด้วยนะครับ

Step 1 : ติดตั้ง Node.js

อย่างแรกเลยให้เราติดตั้ง Node.js ก่อนครับ สำหรับวิธีการติดตั้ง Node.js และรายละเอียดอื่นๆ สามารถอ่านได้ตามด้านล่างนี้เลยนะครับ

Step 2 : ติดตั้ง Express

ก่อนอื่นให้เราสร้างไฟล์ package.json ขึ้นมาโดยใช้คำสั่ง npm init ให้เรากรอกรายละเอียดให้เรียบร้อย เราก็จะได้ไฟล์ package.json หน้าตาประมาณนี้

package.json เป็นเสมือนบัตรประจำตัวของโปรเจ็คนั้นๆ ที่จะระบุว่า โปรเจ็คนั้นชื่อว่าอะไร มีเวอร์ชันที่เท่าไหร่  ต้องใช้ Dependencies อะไรบ้าง รวมไปถึงรายละเอียดปลีกย่อยอื่นๆ

ต่อมาให้เราติดตั้ง Express ซึ่งเป็น framework สำหรับเขียน Node.js ด้วยคำสั่งด้านล่างนี้ครับ (หากติด permission ให้เติม sudo เข้าไปข้างหน้า)

--save คือการบอกว่านอกจากจะให้ติดตั้ง package นั้นแล้ว ก็ให้เซฟชื่อ package นั้นเอาไว้ใน package.json ด้วย เวลาที่เราย้ายโฟลเดอร์ เราก็จะสามารถติดตั้ง dependencies ทั้งหมดได้ง่ายๆ ด้วยคำสั่ง npm install จะได้ไม่ต้องมา npm install xxxx ไล่ไปทีละ package ให้ยุ่งยากและเสียเวลา

Step 3 : สร้างไฟล์ index.js

เมื่อติดตั้ง Express เสร็จเรียบร้อย ก็ให้เราสร้างไฟล์ index.js ขึ้นมา เพื่อใช้เป็นไฟล์หลักที่ใช้เขียนโค้ด โครงสร้างของโปรเจ็คก็จะหน้าตาประมาณนี้ครับ

ที่ไฟล์ index.js ให้เราลองเพิ่มโค้ดด้านล่างนี้ลงไปครับ

เสร็จแล้วให้เราลองสั่งให้ Node.js รันโค้ดนี้ ด้วยคำสั่ง node ชื่อไฟล์ แบบนี้

หากเรามีการแก้โค้ดใดๆ เราจะต้องรัน app ใหม่เสมอ ถึงจะเห็นการเปลี่ยนแปลง

ทีนี้ให้เราเปิด web browser ขึ้นมาสักอัน แล้วลองเข้า http://localhost:7777 และ http://localhost:7777/index ลองดูผลลัพธ์เทียบกันดูครับ

Step 4 : ลองทำ RESTFul API แบบง่ายๆ

จากตัวอย่างก่อนหน้านี้ เราสามารถเขียนโค้ดดัก url แล้วส่งผลลัพธ์กลับไปด้วยข้อความที่แตกต่างกันได้แล้ว ทีนี้เราจะลองมาทำ api ง่ายๆ กันดูบ้าง โดยความต้องการของ api มีดังนี้

  • GET localhost:7777/ให้แสดงข้อความต้อนรับ
  • GET localhost:7777/userให้แสดงรายชื่อ user ทั้งหมดในระบบ
  • GET localhost:7777/user/:idให้แสดงข้อมูลของ user ที่ระบุ โดย :id คือ id ของ user ที่ต้องการจะดูข้อมูล
  • POST localhost:7777/newuserให้เพิ่มข้อมูล user ตามข้อมูลที่ส่งไป

เริ่มแรกให้เราสร้างไฟล์ users.js ขึ้นมาก่อน โดยไฟล์นี้ผมจะเอาไว้สำหรับเป็นข้อมูลของ user (ในส่วนนี้ผมขอกำหนดขึ้นมาเองแบบมั่วๆ ซึ่งจริงๆ แล้วเราจะต้องดึงข้อมูลมาจากฐานข้อมูล)

จะเห็นว่าทั้ง 2 ฟังก์ชันนั้นต่างก็เป็น method ของ exports ซึ่งเป็นความสามารถของ Node.js ที่จะทำให้เราสามารถนำฟังก์ชันเหล่านั้นไปใช้กับไฟล์อื่นได้ครับ

ต่อมาให้เราเปิดไฟล์ index.js ขึ้นมา แล้วเพิ่ม require('./users') เข้าไป เพื่อให้ index.js สามารถเรียกใช้ฟังก์ชันที่อยู่ใน users.js ได้ ให้เราใส่เอาไว้บนสุดของไฟล์เลย แบบนี้

จะเห็นว่าเราไม่จำเป็นต้องใส่ นามสกุลของไฟล์ เช่น .js ลงไปด้วย เพียงแค่ระบุชื่อไฟล์และ path ให้ถูก Node.js มันฉลาดพอที่จะรู้ว่าเรา require ไฟล์ไหน

ต่อมาให้เราลองเพิ่ม route แต่ละอันเข้าไป

จาก route ด้านบน จะได้ว่า

  • /แสดงข้อความว่า “Hello Node.js”
  • /userเรียกใช้ฟังก์ชัน users.findAll() แล้วส่งผลลัพธ์กลับไปในรูปแบบของ JSON
  • /user/:idเรียกใช้ฟังก์ชัน users.findById(id) โดยค่าของ id นั้นจะดึงมาจาก url ผ่าน req.params.id เมื่อได้ผลลัพธ์แล้วก็ส่งกลับไปในรูปแบบของ JSON
  • /newuserรับ req.body ซึ่งเราจะ POST ค่าเป็น JSON ไป แล้วนำค่านั้นมาแสดงผล (โดยปกติแล้ว เราก็จะนำค่าที่ POST มา ไปเซฟลงในฐานข้อมูล แต่สำหรับบทความนี้ผมขอแค่เอาค่านั้นมาแสดงบนหน้าเว็บเท่านั้นครับ

เราสามารถดึง :id ใน route ได้จาก req.params.id

ทีนี้ให้เราลองทดสอบ GET ผ่านหน้าเว็บดูได้เลยครับ แต่ในส่วนของ POST เราจะต้องทดสอบผ่าน cURL หรือว่าจะใช้ Chrome Plugin ที่ชื่อว่า Postman ก็ได้ครับ

Step 5 : ทดสอบ POST ด้วย Postman

ให้เราติดตั้ง Postman จากลิงค์นี้เลย Postman – REST Client

postman

จากนั้นให้เราเปิด Postman แล้วลองทดสอบการ POST โดยการเลือก method ให้เป็น POST จากนั้นก็เลือกข้อมูลเป็นแบบ raw แล้วลองใส่ค่าของ user ที่เราต้องการจะเพิ่มเข้าไปในรูปแบบของ JSON เช่น

จากนั้นลองกด Send ดู

RESTFul_without_body_parser

เราจะพบว่ามันขึ้น Error แบบนี้ครับ

ทั้งนี้เป็นเพราะว่ามันไม่สามารถอ่านค่าจาก body ได้ วิธีแก้คือให้เราติดตั้ง body-parser เข้ามาอีกตัว

จากนั้นให้เราตั้งค่า Body Parser ในไฟล์ index.js แบบนี้ เราก็จะสามารถอ่านค่า JSON ได้แล้ว

ให้เรารัน app ใหม่ แล้วลองทดสอบดูอีกครั้ง

RESTFul_with_body_parser

เรียบร้อย! ได้ผลลัพธ์ตามที่ต้องการ จะเห็นว่าในบทความนี้ ผมจะเน้นเรื่องการใช้งาน Node.js และ Express เบื้องต้นซะมากกว่าครับ ให้รู้ว่ามันใช้งาน Route ยังไง มี GET, POST รับส่ง request, response แบบฉบับย่อๆ ไม่ได้ลงรายละเอียดมากนัก รวมถึงยังไม่ได้พูดถึงการเชื่อมต่อกับฐานข้อมูลเลย แต่ใช้การจำลองข้อมูลแบบเกรียนๆ นี้แหละ สุดท้ายนี้ก็หวังว่าบทความนี้จะมีประโยชน์กับเพื่อนๆ ไม่มากก็น้อยนะครับ

Source Code : RESTFul API with Node.js and Express

(Visited 35,488 times, 56 visits today)

24 Responses to “สร้าง API ง่ายๆ ด้วย Node.js และ Express”

  1. ขอบคุณครับ

  2. Puy Fai says:

    มีประโยชน์มากๆ ค่ะ

  3. ขอบคุณมากครับ

  4. ขอบคุณค่ะ

  5. ขอบคุณมากๆ ครับ

  6. Thank you so much!!!

  7. Ohm Tarit says:

    เป็นประโยชน์มาก ขอบคุณมากครับ มีแก้ไข code นิดนึงครับ
    "name", "Monkey D. Luffy", เป็น "name": "Monkey D. Luffy",

  8. โอว ขอบคุณมากครับ แก้ไขแล้วครับผม ^0^

  9. ผมแน่ะนำ advanced rest client ครับ สามารถ อัพโหลดไฟล์ได้ด้วย ไม่รู้ Postman ทำได้เลยไหม

    https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo

  10. ผมอยากเขียนแบบแยกไฟล์ ทีนี้ลองเขียนดู และใช้ app.use(require('./example'));
    มัน run ไม่ผ่านครับ
    example.js อยู่ใน direc เดียวกันกับ app

  11. ผมขอดูโค้ดในไฟล์ example.js ทีฮะ น่าจะผิดตรงนั้น

  12. ผมขอดูโค้ดในไฟล์ example.js ทีฮะ น่าจะผิดตรงนั้น

  13. Suranart Niamcome app.js
    var express =require('express');
    var path = require('path');
    var http = require('http');
    var bodyParser = require('body-parser');

    var app = express();

    var port = process.env.PORT || 1337; // Set Port http port or localhost port

    // Configure app
    app.set('view engine','ejs');
    app.set('views',path.join(__dirname,'views'));

    // Use midleware
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
    extended:true
    }));

    app.use(express.static(path.join(__dirname,'node_modules/bower_components')));
    app.locals._ = require('underscore');

    app.use(require('./todos')); <— จุดที่มีปัญหา มันขึ้น Error ไม่สามารถเรียกใช้งานได้ ทั้งๆที่อยู๋ใน root เดียวกัน

    // Start the router
    app.listen(port,function(){
    console.log('ready on port '+port);
    });

  14. todos.js
    var express = require('express');
    var router = express.Router();
    router.route('/');

    var todoItems = [
    {id:1,desc:'foo'},
    {id:2,desc:'bar'},
    {id:3,desc:'etc'}
    ];

    router.get('/',function(req,res){
    res.render('index',{
    title: 'My App',
    items: todoItems
    });
    });

    router.post('/add',function(req,res){
    var newItem = req.body.newItem;

    todoItems.push({
    id: todoItems.length+1,
    desc: newItem
    });

    res.redirect('/');
    });

    return router;
    module.export = router;

  15. ภิญญู เช้าตรู่ โทตบุตร ลองแก้ module.export => module.exports ดูอะครับ

  16. ทำได้ครับ

  17. ทำได้ครับ

  18. มีประโยชน์มากครับ

  19. โอ หาอ่านมานาน ดีมากๆ ขอบคุณครับ

  20. ขอบคุณครับ สำหรับความรู้ดี
    ผมขอถามนิดหนึ่งผมเป็นสายที่พัฒนาบน LAMP stack แต่ผมอยากหาอะไรที่มันใหม่จึงมาเจอกับ MEAN Stack ที่จัดการตั้งแต่ต้นทางไปจนจบ stack เป็น javascript ทั้งหมด แล้วมีคนเอา code เราไปใช้มันจะมีวิธีไหนที่จะปิดบัง cede มั้ย
    เพราะผมสามารถ view code ผ่าน Browser ได้

  21. ใช้ Uglify ช่วยได้ระดับนึงครับ
    https://github.com/mishoo/UglifyJS

Leave a Reply to Suranart Niamcome