Bỏ qua

Hành Trang Cần Chuẩn Bị 🎒

Hướng dẫn (guide) này sẽ không dạy bạn lập trình lại từ con số 0. Để theo kịp nhịp độ, bạn nên làm quen trước với những kiến thức dưới đây. Nếu thấy phần nào còn lạ lẫm — đừng lo lắng, chỉ cần mở thêm một tab để tra cứu nhanh là đủ, không cần phải cày cuốc quá sâu ngay từ đầu đâu nhé!


Bắt Buộc Phải Biết 🛑

JavaScript Hiện Đại (ES2020+)

Bạn cần quen với các cú pháp viết code gọn gàng của JS đời mới:

// Viết hàm ngắn gọn (Arrow function), tách biến (destructuring), gộp object (spread)
const sum = (a, b) => a + b;
const { name, age } = user;
const merged = { ...obj1, ...obj2 };

// Xử lý bất đồng bộ (đợi data về rồi mới chạy tiếp)
async function getUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// Kiểm tra null an toàn (Optional chaining) & fallback giá trị (nullish coalescing)
const city = user?.address?.city ?? 'Unknown';

// Nối chuỗi tiện lợi không cần dấu cộng (Template literals)
const greeting = `Hello, ${name}!`;

Nếu bạn chưa quen mấy món này, hãy lướt qua trang JavaScript.info — đọc phần "JavaScript Fundamentals" và "Promises, async/await" là tự tin chiến được.

Giao Tiếp HTTP Cơ Bản

Cách trình duyệt nói chuyện với server:

  • Hành động (Methods): GET (xin dữ liệu), POST (gửi dữ liệu mới), PUT/PATCH (cập nhật), DELETE (xóa).
  • Mã trạng thái (Status codes): 200 Mọi thứ ô-kê, 201 Đã tạo thành công, 400 Gửi sai thông tin, 401 Chưa đăng nhập, 403 Đăng nhập rồi nhưng không có quyền, 404 Không tìm thấy, 500 Lỗi do server.
  • Tiêu đề (Headers): Các thông tin kẹp theo như Authorization (chứng minh bạn là ai), Content-Type (định dạng dữ liệu), Cookie.
  • Nơi chứa dữ liệu: body (thường nằm trong POST/PUT) và query string (nằm ngay trên thanh địa chỉ kiểu ?key=value dùng cho GET).

Quản Lý Thư Viện với npm / package.json

Các lệnh cơ bản để gọi và cài đặt thư viện ngoài:

npm init -y                  # Khởi tạo nhanh file package.json
npm install <package>        # Tải một thư viện về dùng
npm install -D <package>     # Tải thư viện chỉ dùng trong lúc code (dev)
npm run <script>             # Chạy các lệnh tự định nghĩa trong package.json

Git Cơ Bản

Biết cách lưu lại lịch sử code và đồng bộ lên mạng:

git init / clone / status / add / commit / push / pull

Dùng Terminal (Cửa Sổ Lệnh) Căn Bản

Biết gõ mấy lệnh này để sinh tồn: cd (đổi thư mục), ls (xem danh sách file), mkdir (tạo thư mục), cat (xem nội dung file), mv (di chuyển/đổi tên), rm (xóa file). Biết cách đặt biến môi trường (export FOO=bar), nối lệnh (|), và ghi kết quả ra file (>, >>).


Biết Thì Tốt (Vừa Đọc Vừa Học Cũng Được) 💡

TypeScript

Đừng sợ hãi, bạn không cần phải là cao thủ TypeScript mới đọc hiểu được. Chỉ cần nắm ý tưởng:

// Gắn mác kiểu dữ liệu cho biến
let count: number = 0;
const name: string = 'Alice';

// Định nghĩa cấu trúc của một object
interface User { id: string; name: string; age?: number; }

// Generic (kiểu dữ liệu linh hoạt, gọi là gì thì nó là cái đó)
function first<T>(arr: T[]): T | undefined { return arr[0]; }

// Union type (Biến chỉ được nhận một trong các giá trị này)
type Status = 'idle' | 'loading' | 'success' | 'error';

React (Viết bằng Hàm & Hooks)

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Lưu ý: Chúng ta sẽ chia tay với Class components, trong guide này KHÔNG xài đến nó nhé.

Truy Vấn Cơ Sở Dữ Liệu SQL Cơ Bản

Cách ra lệnh cho database:

-- Đọc dữ liệu
SELECT * FROM users WHERE email = 'alice@test.com';

-- Thêm dữ liệu mới
INSERT INTO users (id, email, name) VALUES (?, ?, ?);

-- Cập nhật dữ liệu
UPDATE users SET name = ? WHERE id = ?;

-- Xóa dữ liệu
DELETE FROM users WHERE id = ?;

-- Lấy dữ liệu từ nhiều bảng kết hợp lại (Join)
SELECT u.name, g.name as group_name
FROM users u JOIN group_members gm ON u.id = gm.user_id
            JOIN groups g ON gm.group_id = g.id;

Bảng Tra Cứu Thuật Ngữ (Glossary) 📖

Những từ lóng bạn sẽ hay gặp trong nghề:

Thuật ngữ Giải thích dân dã
SPA Single Page App — Web chỉ tải HTML đúng 1 lần đầu, sau đó mọi thứ hiển thị mượt mà do JS tự vẽ ra.
Edge Đem code của bạn copy ra hàng trăm máy chủ (data center) trên toàn cầu, user ở đâu thì chạy code ở máy chủ gần nhất cho lẹ.
Serverless Không cần nuôi một server chạy tốn điện 24/7. Khi nào có khách ghé thăm (có request) thì code mới thức dậy để chạy.
JWT JSON Web Token — Tấm vé thông hành mã hóa, chứa thông tin của user (như userId, quyền hạn) để đi lại trong app.
PBKDF2 Cách băm (hash) mật khẩu cố tình làm cho cực chậm để mấy tay hacker nản chí, không rảnh mà thử từng mật khẩu một (brute-force).
HMAC Đóng dấu bảo mật vào dữ liệu bằng một mã bí mật, để lúc nhận biết chắc là hàng chuẩn, chưa bị ai sửa trên đường đi.
base64url Một kiểu mã hóa chữ cái sao cho nhét vừa vào thanh địa chỉ URL mà không bị lỗi (thay + / bằng - _ và bỏ dấu =).
CORS Chính sách bảo vệ của trình duyệt, ngăn không cho web nhà này tự tiện gọi sang API của nhà người khác nếu chưa xin phép.
CSRF Trò lừa đảo: Hacker lừa bạn (khi đang đăng nhập sẵn) bấm nhầm vào một nút để tự động làm việc xấu (chuyển tiền, xóa bài...) mà bạn không hề hay biết.
XSS Trò lừa đảo: Hacker nhét code mã độc thẳng vào trang web của bạn để theo dõi hoặc cắp thông tin người dùng.
Hot Module Replacement (HMR) Cứ lưu code là web tự cập nhật thay đổi ngay tắp lự mà không cần bạn phải bấm F5 (reload) lại trang.
Tree-shaking Tính năng dọn rác của trình gom code: Code nào bạn viết ra mà không xài tới, nó tự động chặt bỏ cho nhẹ web.
Reconciliation Cách React làm việc: Nó so sánh bản vẽ UI cũ và mới xem có gì thay đổi không, rồi mới lôi đúng chỗ đó ra để cập nhật lên màn hình.
Stale-while-revalidate Chiến thuật hiển thị: Cứ ném ra dữ liệu cũ cho user xem liền cho nhanh, rồi âm thầm đi lấy dữ liệu mới ở background để cập nhật sau.
Migration File kịch bản ghi lại các bước thay đổi cấu trúc của database (thêm cột, bỏ bảng...), chạy lần lượt theo thứ tự thời gian.
Binding (Trong Cloudflare Workers) Cầu nối để code của bạn "chạm" được vào Database hay ổ cứng ảo thông qua biến env.X.
Isolate (V8) Một môi trường chạy JS siêu nhẹ, cô lập hoàn toàn. Các nền tảng như Workers dùng cái này để chạy code cực nhanh thay vì bật cả một hệ điều hành to bự.
nanoid Công cụ tạo mã ID ngẫu nhiên siêu tốc — an toàn khi làm link và không ai đoán mò được.
Soft delete "Xóa giả vờ" — thay vì xóa mất tích luôn khỏi database, ta chỉ đánh dấu cột deleted_at là đã xóa để sau này còn đường mà khôi phục.

Lên Đồ Trước Khi Vào Việc 🛠️

Đảm bảo máy bạn đã cài sẵn những "đồ nghề" sau:

# Node.js (phiên bản từ 18 trở lên)
node --version

# npm (công cụ quản lý thư viện)
npm --version

# Cài đặt Wrangler (công cụ để làm việc với Cloudflare)
npm install -g wrangler
wrangler --version

# Tạo một tài khoản Cloudflare (Miễn phí hoàn toàn)
# Link đăng ký: [https://dash.cloudflare.com/sign-up](https://dash.cloudflare.com/sign-up)

# Đăng nhập vào Cloudflare trên cửa sổ lệnh
wrangler login

Mọi thứ đã sẵn sàng? Cùng bắt đầu thôi! 🚀