Vibe Coding với AI Agent: Từ ứng dụng Todo đến sản phẩm của riêng bạn

Tìm hiểu trước cam kết của khóa học, lộ trình, bộ công cụ, chi phí và cách chuyển phương pháp sang sản phẩm riêng trước khi bắt đầu phần Lovable trả phí.

1. Bạn sẽ có thể xây dựng những gì🔒7 phút
2. Lộ trình khóa học và cam kết chuyển giao🔒12 phút
3. Những công cụ được sử dụng🔒20 phút
4. Lovable miễn phí hay trả phí?🔒10 phút
5. Cách tiết kiệm lượt yêu cầu AI agent🔒5 phút
6. Ý tưởng sản phẩm của bạn🔒15 phút

Xây dựng ứng dụng Todo đầu tiên chỉ chạy trong trình duyệt bằng Lovable, đồng thời hình thành thói quen quản lý phạm vi, PRD, Project Knowledge, Plan mode, kiểm tra, sửa lỗi, checkpoint và rollback.

1. Bản tóm tắt có giới hạn cho lần xây dựng đầu tiên🔒15 phút
2. PRD và Project Knowledge🔒20 phút
3. Plan mode và định hướng hình ảnh🔒10 phút
4. Kiểm tra kết quả tạo lần đầu🔒20 phút
5. Vòng lặp sửa lỗi đầu tiên🔒30 phút
6. Thực hành checkpoint và rollback🔒12 phút

Thêm khả năng lưu dữ liệu trong trình duyệt cho ứng dụng Todo, rồi kiểm tra hành vi sau khi tải lại trang và những lỗi localStorage thường gặp.

1. Vì sao localStorage quan trọng🔒10 phút
2. Triển khai localStorage🔒35 phút
3. Kiểm tra localStorage bằng tay🔒20 phút
4. Làm gì khi localStorage bị lỗi🔒25 phút

Thực hành phục hồi sau khi lệch phạm vi, lặp vô ích, bịa API, thay đổi gây lỗi và thông báo khó hiểu trước khi ứng dụng trở nên phức tạp hơn.

1. Lovable đã thay đổi điều tôi không yêu cầu🔒18 phút
2. Lovable đang lặp lại hoặc bịa API🔒18 phút
3. Khi rollback tốt hơn tiếp tục sửa🔒12 phút
4. Đọc lỗi mà không cần đọc mã🔒20 phút

Xây dựng các tính năng frontend với ít hướng dẫn hơn, đặt trạng thái UX ở nơi có thể kiểm tra và tạo lát cắt đầu tiên cho sản phẩm riêng.

1. Bộ lọc và trạng thái trống🔒35 phút
2. Chỉnh sửa công việc bằng prompt của bạn🔒40 phút
3. Mức ưu tiên và di chuyển dữ liệu🔒45 phút
4. Hạn chót, tìm kiếm và trạng thái không có kết quả🔒45 phút
5. UX trên thiết bị di động và regression🔒20 phút
6. Cột mốc: Lát cắt đầu tiên của sản phẩm riêng🔒45 phút

Dọn dẹp ứng dụng Todo qua những bước refactor có trọng tâm, đồng thời dùng kiểm tra regression để giữ nguyên hành vi.

1. Khi nào refactor là đáng làm🔒15 phút
2. Tách các tiện ích xử lý công việc🔒30 phút
3. Tách adapter localStorage🔒30 phút

Bắc cầu từ lưu trữ trong trình duyệt sang dữ liệu từ xa, hành vi bất đồng bộ, cách nghĩ về loading/error và mô hình dữ liệu cho sản phẩm của học viên.

1. Từ localStorage sang dữ liệu từ xa🔒15 phút
2. Mô hình dữ liệu cho sản phẩm của bạn🔒20 phút
3. Bản tóm tắt di chuyển cơ sở dữ liệu Todo🔒20 phút

Tạo dự án Supabase, lập kế hoạch di chuyển, xây dựng bảng tasks và kết nối thao tác đọc ghi dữ liệu từ xa thật.

1. Tạo Supabase từ đầu🔒30 phút
2. Tạo bảng tasks bằng Lovable🔒35 phút
3. Tải công việc từ cơ sở dữ liệu🔒35 phút
4. Kết nối thao tác tạo, cập nhật và xóa🔒40 phút

Thêm đăng nhập, gắn công việc với người dùng và kiểm tra hành vi giữa hai người dùng trước khi bật cơ chế bảo vệ quyền riêng tư.

1. Vì sao cần đăng nhập🔒10 phút
2. Thêm giao diện Auth🔒40 phút
3. Kiểm tra với hai người dùng🔒20 phút

Biến quyền sở hữu công việc thành quyền riêng tư thực sự ở cơ sở dữ liệu bằng RLS, gỡ lỗi và kiểm tra quyền truy cập với hai người dùng.

1. Vì sao lọc ở frontend là chưa đủ🔒12 phút
2. Triển khai các policy RLS🔒35 phút
3. Gỡ lỗi khi RLS chặn chính hàng dữ liệu của bạn🔒30 phút
4. Kiểm tra lỗi Auth và quyền truy cập🔒25 phút

Kết nối GitHub, chuẩn bị biến môi trường, triển khai lên Vercel và smoke-test ứng dụng trực tuyến sau khi đã có lớp bảo mật.

1. Triển khai có nghĩa là gì🔒12 phút
2. Tạo GitHub từ đầu🔒25 phút
3. Chuẩn bị dự án để triển khai🔒20 phút
4. Biến môi trường🔒20 phút
5. Lần triển khai đầu tiên🔒35 phút
6. Smoke test trên production🔒20 phút

Hoàn thiện ứng dụng Todo, chạy kiểm tra regression lần cuối, viết nội dung bàn giao cho portfolio và chỉ ra những điều Todo chưa dạy.

1. Hoàn thiện UX🔒25 phút
2. Checklist regression cuối cùng🔒25 phút
3. README và phần mô tả portfolio🔒25 phút
4. Những điều Todo chưa dạy bạn🔒12 phút

Dùng Build Notes đã tích lũy để phát triển sâu hơn lát cắt sản phẩm riêng, rồi kết thúc với các công thức tái sử dụng và bản đồ công cụ.

1. Hoàn thiện PRD của riêng bạn🔒25 phút
2. Prompt dùng chung cho tính năng hoặc sản phẩm mới🔒15 phút
3. Tính năng đầu tiên cho sản phẩm riêng từ đầu đến cuối🔒45 phút
4. Mục lục công thức và các tính năng tiếp theo🔒20 phút
5. Khi Lovable chưa đủ: Bản đồ công cụ🔒15 phút