Bài 1: Giới thiệu khóa học và cài đặt môi trường lập trình

Khóa học Vibe Coding: Xây dựng Web quản lý cửa hàng bằng Cloudflare hướng dẫn bạn làm một sản phẩm từ đầu đến lúc chạy trên Internet.

Bạn sẽ dùng AI hỗ trợ viết code và tự kiểm tra từng bước. Sản phẩm gồm: sản phẩm, tồn kho, đơn hàng, khách hàng và báo cáo doanh thu.

Bài 1 chỉ cần đạt một mục tiêu: cài đủ công cụ và đăng nhập được Cloudflare. Bạn nên biết HTML, CSS và JavaScript cơ bản.

Kiến trúc sẽ học: Next.js (giao diện) → Workers (API) → D1 (dữ liệu) / R2 (ảnh).

Hướng dẫn dưới đây dùng Windows 11. Với macOS / Linux, chọn bộ cài tương ứng và kiểm tra yêu cầu hệ thống Wrangler. Chưa cần mua tên miền.

1. Mở nodejs.org/download, chọn bản LTS được hỗ trợ đúng hệ điều hành.
2. Chạy bộ cài, giữ tùy chọn thêm vào PATH.
3. Mở terminal mới và kiểm tra:

node --version
npm --version

Đạt: hai lệnh đều hiện số phiên bản. npm đi kèm bộ cài Node.js thông dụng, không cần cài riêng.

Nếu PowerShell chặn npm.ps1, dùng npm.cmd --version hoặc terminal Command Prompt.

Tải bộ cài từ git-scm.com/downloads. Trên Windows, chọn tùy chọn cho phép dùng Git từ command line. Mở terminal mới:

git --version

Đạt: lệnh hiện số phiên bản Git. Tài khoản GitHub sẽ dùng ở bài lưu mã nguồn và triển khai.

Chọn một trong hai:

• Cursor: tải tại cursor.com/download, cài và làm theo onboarding.
• Google Antigravity: tải tại antigravity.google/download. Nếu có nhiều ứng dụng, chọn Antigravity IDE để viết code và dùng terminal.

Mở editor → mở thư mục làm việc → mở Terminal. Chạy lại node --version, npm --version, git --version.

Đạt: terminal trong editor nhận đủ ba công cụ. Nếu chưa nhận, đóng editor rồi mở lại.

Thử hỏi AI: “Giải thích Node.js, npm và Git bằng ví dụ đơn giản, chưa sửa file.” Luôn đọc thay đổi và chạy kiểm tra trước khi nhận code AI tạo.

Mở terminal tại nơi bạn muốn lưu bài tập. Chạy từng dòng:

mkdir cua-hang-cloudflare-lab
cd cua-hang-cloudflare-lab
npm init -y
npm install --save-dev wrangler@latest
npx wrangler --version

Đạt: Wrangler hiện số phiên bản; thư mục có package.json và package-lock.json.

Cài Wrangler trong dự án giúp cố định phiên bản khi làm việc nhóm. Nếu thư mục hoặc package.json đã có, bỏ qua bước tạo tương ứng. Nếu PowerShell chặn script, dùng npm.cmd / npx.cmd. Xem hướng dẫn Wrangler chính thức.

Tạo hoặc đăng nhập tài khoản tại dash.cloudflare.com. Trong thư mục lab, chạy:

npx wrangler login
npx wrangler whoami

Trình duyệt sẽ mở để bạn cấp quyền cho Wrangler.

Đạt: whoami nhận đúng tài khoản. Nếu sai, chạy npx wrangler logout rồi đăng nhập lại. Nếu trình duyệt không mở, làm theo hướng dẫn CLI hiển thị.

Thư mục lab chưa có Worker, nên bài này chưa chạy dev hoặc deploy. Không lưu token, mật khẩu vào Git hoặc gửi cho AI.

Trước khi sang bài 2:

• Node.js, npm và Git hiện số phiên bản.
• Editor mở được thư mục lab và terminal.
• Wrangler hiện số phiên bản.
• wrangler whoami nhận đúng tài khoản.

Bài tập: tạo ghi-chu-moi-truong.md, ghi phiên bản công cụ và 3 chức năng cửa hàng bạn muốn làm.

Lỗi không tìm thấy lệnh: mở lại terminal / editor, rồi kiểm tra PATH. Lỗi hệ điều hành hoặc phiên bản Node: đối chiếu yêu cầu Wrangler và package đang cài.

Bài 2 sẽ phân tích nghiệp vụ và chia cấu trúc giao diện / API.