เริ่มต้นใช้งาน Node.js, Express และ React: การสร้าง API ที่ทรงพลัง

วันนี้ เราจะเจาะลึกสู่โลกอันน่าตื่นเต้นของ Node.js, Express และ React ไม่ว่าคุณจะเป็นโปรแกรมเมอร์มากประสบการณ์หรือเพิ่งเริ่มต้น โพสต์บล็อกนี้จะแนะนำคุณในการสร้าง API ที่ทรงพลังโดยใช้เทคโนโลยีที่เป็นที่นิยมเหล่านี้ เราจะครอบคลุมพื้นฐาน เดินผ่านการตั้งค่าสภาพแวดล้อมของคุณ และสำรวจว่าเครื่องมือเหล่านี้ทำงานร่วมกันอย่างไร นอกจากนี้ เราจะแสดงให้คุณเห็นว่า Apidog สามารถทำให้ชีวิตของคุณง่ายขึ้นได้อย่างไร ดังนั้น เตรียมขนมสำหรับเขียนโค้ดที่คุณโปรดปราน แล้วมาเริ่มกันเลย!

ทำไมต้อง Node.js, Express และ React?

ก่อนที่เราจะเจาะลึกรายละเอียด มาพูดถึงเหตุผลที่คุณควรใส่ใจ Node.js, Express และ React กัน

Node.js

Node.js คือสภาพแวดล้อมรันไทม์ที่ช่วยให้คุณสามารถรัน JavaScript บนฝั่งเซิร์ฟเวอร์ได้ สร้างขึ้นบน Chrome's V8 JavaScript engine ทำให้รวดเร็วและมีประสิทธิภาพ ด้วย Node.js คุณสามารถสร้างแอปพลิเคชันเครือข่ายที่ปรับขนาดได้ จัดการคำขอหลายรายการพร้อมกัน และใช้ภาษาโปรแกรมเดียว (JavaScript) สำหรับการพัฒนาทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์

Express

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

React

React คือไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ ได้รับการดูแลโดย Facebook และชุมชนนักพัฒนาและบริษัทต่างๆ React ช่วยให้คุณสร้างคอมโพเนนต์ UI ที่นำกลับมาใช้ใหม่ได้ และจัดการสถานะของแอปพลิเคชันของคุณได้อย่างมีประสิทธิภาพ เมื่อรวมกับ Node.js และ Express คุณสามารถสร้างแอปพลิเคชันเว็บแบบไดนามิกและตอบสนองได้อย่างง่ายดาย

การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

ในการเริ่มต้น คุณจะต้องตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ นี่คือคำแนะนำทีละขั้นตอน:

ติดตั้ง Node.js: ไปที่ เว็บไซต์ Node.js และดาวน์โหลดเวอร์ชันล่าสุด ทำตามคำแนะนำในการติดตั้งสำหรับระบบปฏิบัติการของคุณ

ติดตั้ง npm: npm (Node Package Manager) มาพร้อมกับ Node.js คุณสามารถตรวจสอบว่าติดตั้งแล้วหรือไม่โดยรัน npm -v ในเทอร์มินัลของคุณ

ตั้งค่าโปรเจกต์ใหม่: สร้างไดเรกทอรีใหม่สำหรับโปรเจกต์ของคุณและนำทางไปยังไดเรกทอรีนั้นในเทอร์มินัลของคุณ เริ่มต้นโปรเจกต์ Node.js ใหม่โดยรัน npm init ทำตามพร้อมท์เพื่อสร้างไฟล์ package.json

ติดตั้ง Express: รัน npm install express เพื่อติดตั้ง Express

ติดตั้ง React: คุณจะใช้ Create React App เพื่อตั้งค่าโปรเจกต์ React ใหม่ รัน npx create-react-app client เพื่อสร้างแอป React ใหม่ในไดเรกทอรี client

ติดตั้ง Apidog: เพื่อให้การพัฒนาและการทดสอบ API ง่ายขึ้น เราจะใช้ Apidog คุณสามารถดาวน์โหลดได้ฟรีจาก เว็บไซต์ Apidog

การสร้าง API ของคุณด้วย Node.js และ Express

ตอนนี้สภาพแวดล้อมของคุณถูกตั้งค่าแล้ว มาสร้าง API อย่างง่ายโดยใช้ Node.js และ Express กัน

ขั้นตอนที่ 1: ตั้งค่า Express Server

สร้างไฟล์ใหม่ชื่อ server.js ในไดเรกทอรีรูทของโปรเจกต์ของคุณ เพิ่มโค้ดต่อไปนี้เพื่อตั้งค่า Express server พื้นฐาน:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

รัน node server.js ในเทอร์มินัลของคุณ คุณควรเห็น "Server running at http://localhost:3000" เปิดเบราว์เซอร์ของคุณและนำทางไปยัง http://localhost:3000 เพื่อดู "Hello World!"

ขั้นตอนที่ 2: สร้างเส้นทาง API

ถัดไป มาสร้างเส้นทาง API กัน ในไฟล์ server.js ของคุณ เพิ่มโค้ดต่อไปนี้เพื่อสร้าง API อย่างง่ายที่ส่งคืนรายการผู้ใช้:

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
  { id: 3, name: 'Sam Smith' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

ตอนนี้ เมื่อคุณนำทางไปยัง http://localhost:3000/api/users คุณจะเห็นการตอบสนอง JSON พร้อมรายการผู้ใช้

ขั้นตอนที่ 3: เชื่อมต่อกับฐานข้อมูล

เพื่อให้ API ของเรามีพลวัตมากขึ้น มาเชื่อมต่อกับฐานข้อมูลกัน เราจะใช้ MongoDB สำหรับตัวอย่างนี้ ก่อนอื่น คุณจะต้องติดตั้ง mongoose โดยรัน npm install mongoose

สร้างไฟล์ใหม่ชื่อ db.js และเพิ่มโค้ดต่อไปนี้เพื่อเชื่อมต่อกับ MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

ในไฟล์ server.js ของคุณ ให้เรียกใช้ไฟล์ db.js เพื่อเชื่อมต่อกับฐานข้อมูล:

const db = require('./db');

ตอนนี้ มาสร้างโมเดล Mongoose สำหรับผู้ใช้ของเรา สร้างไฟล์ใหม่ชื่อ user.js และเพิ่มโค้ดต่อไปนี้:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

ในไฟล์ server.js ของคุณ ให้อัปเดตเส้นทาง /api/users เพื่อดึงผู้ใช้จากฐานข้อมูล:

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

ตอนนี้ คุณสามารถเพิ่ม อัปเดต และลบผู้ใช้จากฐานข้อมูล MongoDB ของคุณได้ และ API ของคุณจะสะท้อนการเปลี่ยนแปลงเหล่านี้แบบไดนามิก

การรวม React กับ Node.js และ Express

ตอนนี้เราได้ตั้งค่า API ของเราแล้ว มาผสานรวมกับ React frontend กัน

ขั้นตอนที่ 1: ตั้งค่า Proxy

ในการส่งคำขอไปยัง API ของเราจาก React frontend เราจะตั้งค่าพร็อกซี เปิดไฟล์ client/package.json และเพิ่มบรรทัดต่อไปนี้:

"proxy": "http://localhost:3000"

ขั้นตอนที่ 2: ดึงข้อมูลจาก API

ในแอป React ของคุณ มาสร้างคอมโพเนนต์ที่ดึงข้อมูลจาก API และแสดงผล เปิดไฟล์ client/src/App.js และแทนที่เนื้อหาด้วยโค้ดต่อไปนี้:

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

รัน npm start ในไดเรกทอรี client เพื่อเริ่มเซิร์ฟเวอร์พัฒนา React คุณควรเห็นรายการผู้ใช้ที่ดึงมาจาก API ของคุณแสดงบนหน้า

การทดสอบ API ของคุณด้วย Apidog

ตอนนี้คุณมี API ที่ใช้งานได้และ React frontend แล้ว ถึงเวลาทดสอบ API ของคุณ Apidog เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสิ่งนี้

ขั้นตอนที่ 1: เปิด Apidog และสร้าง request ใหม่

ขั้นตอนที่ 2: ในตัวแก้ไขการทดสอบ ป้อน URL ของ endpoint API ของคุณ เลือกเมธอด HTTP และเพิ่มส่วนหัว พารามิเตอร์ หรือข้อมูลเนื้อหาที่คุณต้องการ ตัวอย่างเช่น คุณสามารถทดสอบเส้นทางที่ส่งคืนข้อความง่ายๆ ที่เราสร้างขึ้นก่อนหน้านี้:

ขั้นตอนที่ 3: คลิกที่ปุ่ม Send และดูผลลัพธ์ของการทดสอบของคุณ คุณควรเห็นรหัสสถานะ เวลาตอบสนอง และเนื้อหาการตอบสนองของ API ของคุณ ตัวอย่างเช่น คุณควรเห็นสิ่งนี้:

Apidog เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการทดสอบ API ของคุณ เนื่องจากช่วยให้คุณมั่นใจในคุณภาพ ความน่าเชื่อถือ และประสิทธิภาพของบริการเว็บของคุณ นอกจากนี้ยังช่วยประหยัดเวลาและความพยายาม เนื่องจากคุณไม่จำเป็นต้องเขียนโค้ดหรือติดตั้งซอฟต์แวร์ใดๆ เพื่อทดสอบ API ของคุณ คุณสามารถใช้เบราว์เซอร์ของคุณและเพลิดเพลินกับอินเทอร์เฟซและคุณสมบัติที่เป็นมิตรต่อผู้ใช้ของ Apidog ได้

บทสรุป

ขอแสดงความยินดี! คุณได้สร้าง API ที่ทรงพลังโดยใช้ Node.js, Express และ React สำเร็จแล้ว คุณได้เรียนรู้วิธีตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ สร้างเส้นทาง API เชื่อมต่อกับฐานข้อมูล และรวม React กับแบ็กเอนด์ของคุณ นอกจากนี้ คุณยังได้ค้นพบว่า Apidog สามารถทำให้การทดสอบ API ของคุณง่ายขึ้นได้อย่างไร

โปรดจำไว้ว่า นี่เป็นเพียงจุดเริ่มต้น มีวิธีนับไม่ถ้วนในการขยายและปรับปรุงแอปพลิเคชันของคุณ คุณสามารถเพิ่มการตรวจสอบสิทธิ์ ใช้เส้นทางที่ซับซ้อนมากขึ้น และปรับปรุงฟรอนต์เอนด์ของคุณด้วยคุณสมบัติเพิ่มเติม