Mục tiêu

Cài đặt và sử dụng được IDE tích hợp AI (Cursor hoặc Windsurf). Hiểu sự khác biệt với Bolt.new và khi nào dùng công cụ nào.

Sau bài này, bạn sẽ:

• ✅ Cài đặt thành công Cursor và kết nối AI model
• ✅ Hiểu cây thư mục (file/folder) và biết file nào làm gì
• ✅ Chạy được project đầu tiên trên localhost

Nội dung chính

2.1 — Tại sao cần “lên đời” từ Bolt.new?

	Bolt.new / Lovable	Cursor / Windsurf
Ẩn dụ	Bếp ăn nhanh — ra món nhanh, ít tuỳ chỉnh	Bếp nhà hàng — đầy đủ dụng cụ, làm được mọi món
Ưu điểm	Tạo app nhanh, không cài gì	Kiểm soát từng file, mạnh mẽ hơn
Hạn chế	Khó mở rộng, ít kiểm soát	Cần cài đặt, cần hiểu cây thư mục
Khi nào dùng	Prototype nhanh, app đơn giản	App có database, nhiều trang, cần duy trì lâu dài

Mẹo: Nhiều người dùng Bolt.new để tạo prototype nhanh, rồi export code sang Cursor để phát triển tiếp. Đây là workflow rất hiệu quả — tận dụng ưu điểm của cả hai.

2.2 — Cài đặt Cursor (Hướng dẫn từng bước)

Bước 1: Tải Cursor tại cursor.com

• Windows: tải file .exe, chạy cài đặt như bình thường
• Mac: tải file .dmg, kéo vào thư mục Applications
• Dung lượng khoảng 300MB, cần internet ổn định

Bước 2: Mở Cursor → Đăng nhập bằng Google hoặc GitHub.

Bước 3: Kết nối AI Model:

Settings → Models → Chọn model:
  - Claude Sonnet 4 (khuyến nghị, cân bằng tốc độ và chất lượng)
  - GPT-4o (tốc độ nhanh)
  - Claude Opus 4 (thông minh nhất, chậm hơn)

Bước 4: Cài Node.js (bắt buộc để chạy project):

1. Vào nodejs.org → Tải bản LTS (Long Term Support)
2. Cài đặt như phần mềm bình thường (Next → Next → Finish)
3. Mở Terminal trong Cursor (Ctrl + `) → Gõ: node --version
4. Nếu thấy số phiên bản (ví dụ: v20.11.0) → Thành công!

Mẹo: Nếu bạn đã dùng VS Code trước đó, Cursor sẽ tự import toàn bộ extensions và settings. Bạn không cần setup lại từ đầu.

2.3 — Hiểu “Cây thư mục”: Nhà của code

Khi mở project trong Cursor, bạn sẽ thấy cấu trúc file/folder bên trái:

📁 my-app/                    ← Thư mục gốc (root)
├── 📁 src/                   ← Source code chính
│   ├── 📁 components/        ← Các "khối" giao diện
│   │   ├── Navbar.jsx        ← Thanh điều hướng
│   │   ├── Footer.jsx        ← Chân trang
│   │   └── ProductCard.jsx   ← Thẻ sản phẩm
│   ├── 📁 pages/             ← Các trang
│   │   ├── Home.jsx          ← Trang chủ
│   │   └── About.jsx         ← Trang giới thiệu
│   ├── App.jsx               ← File chính, kết nối mọi thứ
│   └── index.css             ← File giao diện (màu sắc, font...)
├── package.json              ← "Hồ sơ" dự án (tên, dependencies...)
└── README.md                 ← Tài liệu mô tả project

Ẩn dụ: Cây thư mục giống như tủ quần áo có ngăn kéo. Mỗi ngăn (folder) chứa một loại: áo một ngăn, quần một ngăn, phụ kiện một ngăn. Code cũng được tổ chức tương tự — mỗi folder chứa một “loại” code.

2.4 — Tạo project đầu tiên trong Cursor

Thay vì tạo file thủ công, hãy nhờ AI tạo toàn bộ project cho bạn. Mở Terminal trong Cursor (Ctrl + `) và dùng prompt này:

Tạo cho tôi một project React với Vite, gồm các thành phần sau:

TRANG CHỦ:
- Tiêu đề lớn: "Xin chào! Đây là app đầu tiên của tôi trên Cursor"
- Mô tả ngắn bên dưới tiêu đề
- Một hình ảnh placeholder ở giữa
- Nút "Khám phá" có hiệu ứng hover

NAVBAR:
- Logo bên trái (text logo, không cần hình)
- Menu: Trang chủ, Giới thiệu, Liên hệ
- Responsive (thu gọn thành hamburger menu trên mobile)

FOOTER:
- Copyright text
- Link mạng xã hội (placeholder)

STYLE:
- Font: Inter hoặc system font
- Màu chính: xanh dương #2563EB
- Border radius mềm mại
- Có dark mode toggle

Dùng Tailwind CSS cho styling.

Prompt nâng cao (nếu muốn thử thêm):

Dựa trên project vừa tạo, thêm trang Giới thiệu (About):
- Ảnh đại diện placeholder tròn
- Tên và mô tả ngắn về bản thân
- Timeline 3 cột mốc quan trọng
- Nút liên hệ qua email
- Animation fade-in khi scroll đến

Tham chiếu @Navbar.jsx và @Footer.jsx để giữ layout nhất quán.

2.5 — Chạy project trên máy (Local)

Khi tải code về máy (hoặc tạo mới trong Cursor), cần chạy thử trên máy trước khi deploy:

Mở Terminal trong Cursor (Ctrl + `) → Gõ:

npm install      ← Tải các thư viện cần thiết (chỉ lần đầu)
npm run dev      ← Khởi chạy app trên máy

→ App chạy tại: http://localhost:3000 (mở trình duyệt để xem)

Localhost là gì? Localhost = “máy của bạn đóng vai server tạm”. App chạy trên máy bạn, chỉ bạn thấy, chưa ai trên internet truy cập được.

Lỗi thường gặp

Vấn đề: “Cursor không nhận project” — mở Cursor nhưng không thấy file nào → Bạn cần mở đúng thư mục gốc của project. Vào File → Open Folder → chọn thư mục chứa file package.json. Nếu mở thư mục cha (parent) thì Cursor sẽ không nhận đúng project.

Vấn đề: “‘npm’ is not recognized” — Terminal báo không tìm thấy npm → Bạn chưa cài Node.js. Quay lại Bước 4 ở phần 2.2, cài Node.js rồi khởi động lại Cursor.

Vấn đề: “Port 3000 đang bị sử dụng” → Có thể bạn đã mở app khác trên port 3000. Thử tắt Terminal cũ (Ctrl + C) rồi chạy lại npm run dev. Hoặc Vite sẽ tự chuyển sang port 3001.

Vấn đề: “npm install bị lỗi đỏ lòm” → Xóa thư mục node_modules và file package-lock.json, rồi chạy lại npm install. Nếu vẫn lỗi, copy dòng lỗi đỏ và paste vào Cursor Chat hỏi AI.

Mẹo: Khi gặp lỗi bất kỳ, đừng hoảng. Copy toàn bộ dòng lỗi trong Terminal → paste vào Cursor Chat → AI sẽ giải thích và hướng dẫn sửa. Đây là cách debug hiệu quả nhất cho người mới.

Bài tập thực hành

Nhiệm vụ:

1. (5 phút) Cài Cursor, kết nối AI model (Claude Sonnet 4)
   • Tiêu chí: mở Settings → thấy model đã kết nối
2. (15 phút) Tạo project mới bằng prompt ở phần 2.4, hoặc tự viết prompt theo ý bạn
   • Tiêu chí: project có ít nhất Navbar + trang chủ + Footer
   • Gợi ý nếu bị stuck: bắt đầu với prompt đơn giản trước, rồi thêm từng phần
3. (5 phút) Chạy npm install và npm run dev, mở trình duyệt xem kết quả
   • Tiêu chí: thấy app chạy trên localhost, không có lỗi đỏ trong Terminal

Thời gian: 25 phút Deliverable: Screenshot Cursor đang mở project + screenshot app chạy trên localhost

Tổng kết bài 2

Bạn đã học được	Chi tiết
Cursor vs Bolt.new	Cursor mạnh hơn, kiểm soát hơn, nhưng cần cài đặt
Cài đặt Cursor	Download, đăng nhập, chọn AI model, cài Node.js
Cây thư mục	Cách code được tổ chức thành file/folder
Localhost	Chạy app trên máy để test trước khi deploy