Lộ trình/1. Nền Tảng: Kiến Trúc Web, Frontend - Backend & Tư Duy Code/Phân Biệt Rạch Ròi: Frontend, Backend & Database

Mentor Alex

Gia Sư AI Trực Tiếp

Dạy kèm & Hướng dẫn theo từng bước

Gợi ý hỏi:

CẤP ĐỘ BASIC +50 XP

1. Nền Tảng: Kiến Trúc Web, Frontend - Backend & Tư Duy Code•⏱️ 12 phút

Phân Biệt Rạch Ròi: Frontend, Backend & Database

Nắm vững ranh giới giữa Mặt tiền (Frontend), Hậu trường (Backend), Cơ sở dữ liệu (Database) và cách chúng phối hợp cùng nhau.

Ẩn Dụ Thực Tế (Dễ Nhớ)

“Hãy tưởng tượng một NHÀ HÀNG SANG TRỌNG: - FRONTEND là KHÔNG GIAN BÀN ĂN: Nơi khách ngồi ngắm nhìn menu đẹp, bấm chuông gọi món, tận hưởng âm nhạc và ánh sáng. - BACKEND là NHÀ BẾP: Nơi đầu bếp chế biến công thức bí mật, kiểm tra vệ sinh an toàn mà khách không nhìn thấy trực tiếp. - DATABASE là KHO CHỨA THỰC PHẨM & KÉT TIỀN: Nơi cất giữ nguyên liệu và ghi chép sổ sách hóa đơn vĩnh viễn. - API là NHÂN VIÊN PHỤC VỤ: Chuyển tờ order từ bàn ăn vào bếp và bê đĩa thức ăn nóng hổi ra cho khách.”

🎯 Phân Biệt Frontend, Backend & Database

Một ứng dụng phần mềm hoàn chỉnh luôn được chia làm 3 tầng tách biệt rõ ràng:

---

1. FRONTEND (Mặt Tiền - Phía Người Dùng)

- Là tất cả những gì người dùng nhìn thấy, chạm vào và tương tác trên màn hình. - Bộ 3 công nghệ trụ cột: - HTML (Khung xương): Định nghĩa các đoạn văn bản, hình ảnh, nút bấm. - CSS (Bộ trang phục): Tô màu sắc, bố cục, kích thước, hiệu ứng lung linh (Tailwind CSS, Glassmorphism). - JavaScript (Hệ thần kinh): Khi người dùng bấm nút thì mở popup, gửi form, chuyển trang mượt mà.

---

2. BACKEND (Hậu Trường - Phía Máy Chủ)

- Là phần chạy ẩn trên máy chủ (Server/Cloudflare Edge) mà người dùng không thể nhìn thấy mã nguồn. - Nhiệm vụ chính: - Xác thực danh tính người dùng (Đăng nhập Google OAuth). - Xử lý các phép tính toán nhạy cảm (trừ tiền tài khoản, cộng điểm XP). - Bảo vệ dữ liệu, ngăn chặn tin tặc tấn công.

---

3. DATABASE (Cơ Sở Dữ Liệu)

- Là cuốn sổ cái điện tử an toàn (như Cloudflare D1 SQL) để lưu trữ: - Danh sách tài khoản người dùng, mật khẩu đã mã hóa. - Lịch sử bài học, điểm số XP, chuỗi ngày streak. - Dữ liệu vẫn còn nguyên vẹn kể cả khi người dùng tắt máy.

---

4. API (Cầu Nối Giao Tiếp)

- API (Application Programming Interface) là cầu nối gửi tin nhắn chuẩn mực (thường dưới dạng JSON) giữa Frontend và Backend.

Lỗi Người Mới Hay Gặp

•Lưu mật khẩu hoặc logic tiền bạc ở Frontend (rất nguy hiểm vì người dùng có thể bấm F12 xem được)
•Nghĩ rằng chỉ cần học Frontend là đủ xây dựng ứng dụng chạy được mà không cần Backend/Database

Lời Khuyên Cốt Lõi

Lập trình viên Fullstack là người hiểu và làm chủ cả 3 thành phần: Frontend + Backend + Database.