Hôm nay, chúng ta sẽ khám phá thế giới thú vị của Node.js, Express và React. Dù bạn là một lập trình viên dày dạn kinh nghiệm hay mới bắt đầu, bài viết trên blog này sẽ hướng dẫn bạn xây dựng một API mạnh mẽ bằng cách sử dụng những công nghệ phổ biến này. Chúng ta sẽ đề cập đến những điều cơ bản, đi qua cách thiết lập môi trường của bạn và khám phá cách thức các công cụ này hoạt động cùng nhau. Thêm vào đó, chúng tôi sẽ cho bạn thấy cách Apidog có thể giúp cuộc sống của bạn dễ dàng hơn. Vậy, hãy chuẩn bị món ăn nhẹ yêu thích của bạn khi lập trình, và hãy bắt đầu nào!
Tại sao chọn Node.js, Express và React?
Trước khi đi vào chi tiết, hãy nói về lý do tại sao bạn nên quan tâm đến Node.js, Express và React.
Node.js
Node.js là một môi trường chạy cho phép bạn chạy JavaScript ở phía máy chủ. Nó được xây dựng trên động cơ JavaScript V8 của Chrome, giúp nó nhanh và hiệu quả. Với Node.js, bạn có thể xây dựng các ứng dụng mạng có khả năng mở rộng, xử lý nhiều yêu cầu đồng thời và sử dụng một ngôn ngữ lập trình duy nhất (JavaScript) cho cả phát triển phía máy khách và máy chủ.
Express
Express là một khung ứng dụng web Node.js tối thiểu và linh hoạt. Nó cung cấp một tập hợp các tính năng mạnh mẽ để xây dựng các ứng dụng web và di động. Với Express, bạn có thể dễ dàng thiết lập một máy chủ, quản lý các tuyến đường và xử lý các yêu cầu và phản hồi HTTP. Nó là xương sống của nhiều ứng dụng Node.js và kết hợp hoàn hảo với React.
React
React là một thư viện JavaScript để xây dựng các giao diện người dùng. Nó được duy trì bởi Facebook và một cộng đồng các nhà phát triển và công ty độc lập. React cho phép bạn tạo ra các thành phần UI có thể tái sử dụng và quản lý trạng thái của ứng dụng của bạn một cách hiệu quả. Khi kết hợp với Node.js và Express, bạn có thể xây dựng các ứng dụng web động, phản hồi nhanh chóng một cách dễ dàng.
Thiết lập môi trường phát triển của bạn
Để bắt đầu, bạn sẽ cần thiết lập môi trường phát triển của mình. Dưới đây là hướng dẫn từng bước:
Cài đặt Node.js: Truy cập trang Node.js và tải xuống phiên bản mới nhất. Làm theo hướng dẫn cài đặt cho hệ điều hành của bạn.
Cài đặt npm: npm (Trình quản lý gói Node) đi kèm với Node.js. Bạn có thể kiểm tra xem nó đã được cài đặt hay chưa bằng cách chạy npm -v trong terminal của bạn.
Tạo một dự án mới: Tạo một thư mục mới cho dự án của bạn và điều hướng đến nó trong terminal của bạn. Khởi tạo một dự án Node.js mới bằng cách chạy npm init. Làm theo các nhắc để tạo một tệp package.json.
Cài đặt Express: Chạy npm install express để cài đặt Express.
Cài đặt React: Bạn sẽ sử dụng Create React App để thiết lập một dự án React mới. Chạy npx create-react-app client để tạo một ứng dụng React mới trong thư mục client.
Cài đặt Apidog: Để làm cho việc phát triển và kiểm tra API trở nên dễ dàng hơn, chúng ta sẽ sử dụng Apidog. Bạn có thể tải nó miễn phí từ trang Apidog.
Xây dựng API của bạn với Node.js và Express
Giờ đây, khi môi trường của bạn đã được thiết lập, hãy xây dựng một API đơn giản bằng Node.js và Express.
Bước 1: Thiết lập máy chủ Express
Tạo một tệp mới có tên server.js trong thư mục gốc của dự án bạn. Thêm mã sau để thiết lập một máy chủ Express cơ bản:
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}`);
});
Chạy node server.js trong terminal của bạn. Bạn sẽ thấy "Server running at http://localhost:3000". Mở trình duyệt của bạn và điều hướng đến http://localhost:3000 để xem "Hello World!".
Bước 2: Tạo các tuyến đường API
Bây giờ, hãy tạo một vài tuyến đường API. Trong tệp server.js của bạn, thêm mã sau để tạo một API đơn giản trả về danh sách người dùng:
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);
});
Bây giờ, khi bạn điều hướng đến http://localhost:3000/api/users, bạn sẽ thấy phản hồi JSON với danh sách người dùng.
Bước 3: Kết nối với cơ sở dữ liệu
Để làm cho API của chúng ta trở nên năng động hơn, hãy kết nối với một cơ sở dữ liệu. Chúng ta sẽ sử dụng MongoDB cho ví dụ này. Trước tiên, bạn cần cài đặt mongoose bằng cách chạy npm install mongoose.
Tạo một tệp mới có tên db.js và thêm mã sau để kết nối tới 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;
Trong tệp server.js của bạn, yêu cầu tệp db.js để kết nối với cơ sở dữ liệu:
const db = require('./db');
Bây giờ, hãy tạo một mô hình Mongoose cho người dùng của chúng ta. Tạo một tệp mới có tên user.js và thêm mã sau:
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
name: String
});
const User = mongoose.model('User', userSchema);
module.exports = User;
Trong tệp server.js của bạn, cập nhật tuyến đường /api/users để lấy người dùng từ cơ sở dữ liệu:
const User = require('./user');
app.get('/api/users', async (req, res) => {
const users = await User.find();
res.json(users);
});
Bạn có thể bây giờ thêm, cập nhật và xóa người dùng từ cơ sở dữ liệu MongoDB của bạn, và API của bạn sẽ phản ánh những thay đổi này một cách động.
Tích hợp React với Node.js và Express
Bây giờ chúng ta đã có API được thiết lập, hãy tích hợp nó với một giao diện React.
Bước 1: Thiết lập Proxy
Để thực hiện các yêu cầu đến API của chúng ta từ giao diện React, chúng ta sẽ thiết lập một proxy. Mở tệp client/package.json và thêm dòng sau:
"proxy": "http://localhost:3000"
Bước 2: Lấy dữ liệu từ API
Trong ứng dụng React của bạn, hãy tạo một thành phần lấy dữ liệu từ API và hiển thị nó. Mở tệp client/src/App.js và thay thế nội dung của nó bằng mã sau:
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>Người dùng</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;
Chạy npm start trong thư mục client để khởi động máy chủ phát triển React. Bạn sẽ thấy danh sách người dùng được lấy từ API hiển thị trên trang.
Kiểm tra API của bạn với Apidog
Bây giờ bạn đã có một API hoạt động và một giao diện React, đã đến lúc kiểm tra API của bạn. Apidog là một công cụ tuyệt vời cho điều này.
Bước 1: Mở Apidog và tạo một yêu cầu mới.
Bước 2: Trong trình soạn thảo kiểm tra, nhập URL của điểm cuối API của bạn, chọn phương thức HTTP và thêm bất kỳ tiêu đề, tham số hoặc dữ liệu cơ thể nào bạn cần. Ví dụ, bạn có thể kiểm tra tuyến đường trả về một thông điệp đơn giản mà chúng ta đã tạo trước đó:
Bước 3: Nhấn nút Gửi và xem kết quả kiểm tra của bạn. Bạn sẽ thấy mã trạng thái, thời gian phản hồi và nội dung phản hồi của API của bạn. Ví dụ, bạn sẽ thấy điều gì đó như thế này:
Apidog là một công cụ tuyệt vời cho việc kiểm tra các API của bạn, vì nó giúp bạn đảm bảo chất lượng, độ tin cậy và hiệu suất của các dịch vụ web. Nó cũng tiết kiệm thời gian và công sức của bạn, vì bạn không cần phải viết mã hoặc cài đặt phần mềm nào để kiểm tra API. Bạn chỉ cần sử dụng trình duyệt của mình và tận hưởng giao diện thân thiện với người dùng và các tính năng của Apidog.
Kết luận
Chúc mừng! Bạn đã thành công trong việc xây dựng một API mạnh mẽ bằng Node.js, Express và React. Bạn đã học cách thiết lập môi trường phát triển của mình, tạo các tuyến đường API, kết nối với cơ sở dữ liệu và tích hợp React với backend của bạn. Thêm vào đó, bạn đã phát hiện ra cách Apidog có thể đơn giản hóa việc kiểm tra API của bạn.
Hãy nhớ, đây chỉ là sự khởi đầu. Có vô số cách để mở rộng và cải thiện ứng dụng của bạn. Bạn có thể thêm xác thực, triển khai các tuyến đường phức tạp hơn, và nâng cao giao diện frontend của mình với các tính năng bổ sung.