12.4K 154 1.0K

Đã đăng vào khoảng 7 giờ trước 6 phút đọc

# Bài 01 — Chuẩn bị môi trường

⬅️ Bài trước | Mục lục | Bài tiếp theo ➡️

🎯 Mục tiêu

Cài đủ 4 công cụ và xác nhận từng cái chạy được trước khi viết dòng code đầu tiên.

Đừng bỏ qua phần kiểm tra. 90% người mới bị kẹt ở bài 05 là vì MongoDB chưa chạy mà không biết.

📋 Danh sách cần cài

#	Công cụ	Dùng để làm gì	Bắt buộc
1	Node.js (v18 trở lên)	Chạy JavaScript ngoài trình duyệt — nền tảng của cả backend lẫn Next.js	✅
2	MongoDB Community Server	Cơ sở dữ liệu	✅
3	MongoDB Compass	Giao diện đồ họa để xem/sửa dữ liệu	✅
4	Visual Studio Code	Trình soạn thảo code	✅
5	Postman hoặc Thunder Client	Thử API mà không cần frontend	👍 Rất nên
6	Git	Quản lý phiên bản code	👍 Nên

1️⃣ Cài Node.js

Tải và cài

Vào https://nodejs.org
Tải bản LTS (Long Term Support — bản ổn định), ví dụ 20.x.x LTS
Chạy file cài đặt, bấm Next liên tục, giữ nguyên mọi tùy chọn mặc định
Quan trọng: trong quá trình cài, đảm bảo mục "Add to PATH" được tick (mặc định đã tick)

✅ Kiểm tra

Mở PowerShell (Windows) hoặc Terminal (Mac/Linux) rồi gõ:

node -v
npm -v

Kết quả mong đợi:

v20.11.1
10.2.4

❌ Nếu báo 'node' is not recognized... → Node chưa vào PATH. Cách sửa: đóng hết cửa sổ terminal, mở lại. Vẫn lỗi thì gỡ và cài lại Node.

npm là gì?

npm (Node Package Manager) đi kèm Node.js. Nó dùng để tải các "thư viện" người khác đã viết sẵn. Ví dụ khi bạn gõ npm install express, npm sẽ tải Express về thư mục node_modules/.

Ba lệnh npm bạn sẽ dùng nhiều nhất:

npm install              # Cài tất cả thư viện ghi trong package.json
npm install <tên-gói>    # Cài thêm một thư viện mới
npm run <tên-script>     # Chạy một lệnh định nghĩa trong package.json

2️⃣ Cài MongoDB Community Server

Windows

Vào https://www.mongodb.com/try/download/community
Chọn: Version mới nhất → Platform: Windows → Package: msi → Download
Chạy file .msi:
- Chọn Complete (không phải Custom)
- ✅ Tick "Install MongoDB as a Service" ← rất quan trọng, để MongoDB tự khởi động cùng Windows
- ✅ Tick "Install MongoDB Compass" ← cài luôn công cụ xem dữ liệu

macOS

brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

Ubuntu/Linux

Làm theo hướng dẫn chính thức: https://www.mongodb.com/docs/manual/administration/install-on-linux/

✅ Kiểm tra MongoDB có đang chạy không

Cách 1 — Kiểm tra service (Windows):

Get-Service MongoDB

Kết quả mong đợi:

Status   Name      DisplayName
------   ----      -----------
Running  MongoDB   MongoDB Server (MongoDB)

Nếu Status là Stopped, bật lên bằng:

Start-Service MongoDB

Cách 2 — Kiểm tra bằng cổng:

Test-NetConnection -ComputerName localhost -Port 27017

Dòng TcpTestSucceeded : True nghĩa là MongoDB đang chạy.

Trên macOS/Linux:

brew services list          # macOS
sudo systemctl status mongod # Linux

💡 27017 là cổng mặc định của MongoDB, giống như 80 là cổng mặc định của web. Bạn sẽ thấy con số này trong model/db.js: mongodb://localhost:27017.

3️⃣ Cài MongoDB Compass

Nếu bạn đã tick ở bước 2 thì Compass đã có sẵn. Nếu chưa: tải tại https://www.mongodb.com/try/download/compass

✅ Kiểm tra kết nối

Mở MongoDB Compass
Ở ô URI, giữ nguyên giá trị mặc định:
```
mongodb://localhost:27017
```
Bấm Connect

Nếu vào được và thấy danh sách database bên trái (admin, config, local) → 🎉 thành công.

❌ Nếu báo connect ECONNREFUSED 127.0.0.1:27017 → MongoDB chưa chạy. Quay lại bước 2.

4️⃣ Cài Visual Studio Code

Tải tại https://code.visualstudio.com
Cài đặt bình thường

Các extension nên cài

Mở VS Code → bấm biểu tượng Extensions ở thanh bên trái (hoặc Ctrl+Shift+X) → tìm và cài:

Extension	Công dụng
ES7+ React/Redux/React-Native snippets	Gõ `rafce` → tự sinh khung component React
Prettier - Code formatter	Tự canh lề, format code cho đẹp
Thunder Client	Thử API ngay trong VS Code, không cần Postman
MongoDB for VS Code	Xem database ngay trong VS Code
Auto Rename Tag	Sửa thẻ mở → thẻ đóng tự đổi theo
Vietnamese Language Pack	Giao diện tiếng Việt (tùy chọn)

Bật auto-format khi lưu

Ctrl + , → tìm format on save → tick vào ô Editor: Format On Save.

5️⃣ Cài Postman (tùy chọn nhưng rất nên)

Postman giúp bạn thử API mà chưa cần viết frontend. Ví dụ ở bài 05, bạn muốn biết GET /categories trả về gì — chỉ cần gõ URL vào Postman và bấm Send.

Tải tại https://www.postman.com/downloads/

💡 Nếu ngại cài thêm phần mềm, dùng Thunder Client trong VS Code là đủ.

6️⃣ Cài Git (nên có)

Tải tại https://git-scm.com/downloads
Cài với các tùy chọn mặc định

✅ Kiểm tra

git --version

Cấu hình lần đầu

git config --global user.name "Tên của bạn"
git config --global user.email "email@cua-ban.com"

🗂️ Tạo thư mục dự án

Chọn một nơi dễ nhớ (đừng để trong thư mục có dấu tiếng Việt hoặc khoảng trắng):

# Windows PowerShell
New-Item -ItemType Directory -Path "D:\lith-perfume"
Set-Location "D:\lith-perfume"

# macOS / Linux
mkdir ~/lith-perfume && cd ~/lith-perfume

Cấu trúc bạn sẽ tạo dần qua các bài:

lith-perfume/
├── backend/      ← tạo ở bài 04
├── frontend/     ← tạo ở bài 10
├── categories.json   ← dữ liệu mẫu, cần cho bài 03
└── products.txt      ← dữ liệu mẫu, cần cho bài 03

Chuẩn bị 2 file dữ liệu mẫu

Copy 2 file categories.json và products.txt từ dự án gốc vào thư mục lith-perfume/. Nếu bạn không có, bài 03 sẽ hướng dẫn tự tạo dữ liệu.

✅ Bảng kiểm tra cuối bài

Chạy lần lượt các lệnh sau. Cả 4 đều phải chạy được thì mới sang bài tiếp theo.

node -v          # → v18.x.x trở lên
npm -v           # → 9.x.x trở lên
git --version    # → git version 2.x.x

# Windows
Get-Service MongoDB    # → Status: Running

Và mở MongoDB Compass, connect vào mongodb://localhost:27017 thành công.

🆘 Xử lý sự cố thường gặp

<details> <summary>"'node' is not recognized as an internal or external command"</summary>

Node chưa được thêm vào biến môi trường PATH.

Bước 1: Đóng hoàn toàn PowerShell/CMD/VS Code rồi mở lại. Thường là đủ.
Bước 2: Nếu vẫn lỗi, gỡ Node và cài lại, nhớ tick "Add to PATH".
Bước 3: Thêm thủ công: Win + R → sysdm.cpl → Advanced → Environment Variables → tìm Path trong System variables → Edit → New → thêm C:\Program Files\nodejs\

</details> <details> <summary>MongoDB service không khởi động được</summary>

Chạy PowerShell với quyền Administrator rồi:

Start-Service MongoDB

Nếu vẫn lỗi, thư mục dữ liệu có thể chưa tồn tại:

New-Item -ItemType Directory -Force -Path "C:\data\db"
Start-Service MongoDB

Xem log lỗi tại C:\Program Files\MongoDB\Server\<version>\log\mongod.log.

</details> <details> <summary>Compass báo "connect ECONNREFUSED 127.0.0.1:27017"</summary>

MongoDB chưa chạy. Đây là lỗi phổ biến nhất.

Kiểm tra: Get-Service MongoDB
Nếu Stopped → Start-Service MongoDB
Nếu không có service nào tên MongoDB → bạn đã cài mà không tick "Install as a Service". Cách chạy thủ công:
```
& "C:\Program Files\MongoDB\Server\7.0\bin\mongod.exe" --dbpath "C:\data\db"
```
(giữ cửa sổ này mở suốt quá trình làm việc)

</details> <details> <summary>npm install rất chậm hoặc lỗi mạng</summary>

Đổi sang registry gần hơn:

npm config set registry https://registry.npmjs.org/

Hoặc xóa cache rồi thử lại:

npm cache clean --force
npm install

</details>

📝 Bài tập

Chạy node trong terminal để vào chế độ tương tác, gõ 1 + 1 rồi Enter. Thoát bằng .exit.
Trong MongoDB Compass, tự tạo một database tên test_db với collection test_col, thêm thủ công 1 document { "name": "hello" }, rồi xóa cả database đi. → Làm quen giao diện Compass trước khi vào bài 03.
Chạy npm view express version để xem phiên bản Express mới nhất hiện tại.

⬅️ Bài trước | Mục lục | Bài tiếp theo: JavaScript cần thiết ➡️

Backend