Xây dựng sản phẩm số đầu tiên của bạn với AI

Xây dựng ứng dụng To-Do List đầ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, tạo mốc lưu phiên bản ổn định và quay lại phiên bản trước.

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. Xem lại và phê duyệt kế hoạch đầu tiên🔒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 lưu và quay lại phiên bản🔒12 phút

Thêm khả năng lưu dữ liệu trong trình duyệt cho ứng dụng To-Do List, 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 quay lại phiên bản trước 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, thiết kế các trạng thái UX sao cho dễ kiểm tra và hoàn thiện phần chức năng đầu tiên cho sản phẩm của bạn.

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à lỗi hồi quy🔒20 phút
6. Cột mốc: hoàn thiện phần chức năng đầu tiên cho sản phẩm của bạn🔒45 phút

Dọn dẹp ứng dụng To-Do List qua từng bước tái cấu trúc mã có trọng tâm, đồng thời kiểm tra lỗi hồi quy để giữ nguyên hành vi.

1. Khi nào nên tái cấu trúc mã🔒15 phút
2. Tách các tiện ích xử lý công việc🔒30 phút
3. Tách lớp lưu trữ localStorage🔒30 phút

Chuyển từ lưu trữ trong trình duyệt sang dữ liệu từ xa, tìm hiểu cách xử lý bất đồng bộ, trạng thái tải và lỗi, rồi xây dựng mô hình dữ liệu cho sản phẩm của bạ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 kế hoạch chuyển ứng dụng To-Do List sang cơ sở dữ liệu🔒20 phút

Tạo dự án Supabase, lập kế hoạch chuyển đổi dữ liệu, xây dựng bảng tasks và kết nối các thao tác đọc, ghi của ứng dụng với cơ sở dữ liệu từ xa.

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 đăng nhập🔒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. Thiết lập các chính sách RLS🔒35 phút
3. Gỡ lỗi khi RLS chặn các hàng dữ liệu của chính bạn🔒30 phút
4. Kiểm tra lỗi xác thực và quyền truy cập🔒25 phút

Kết nối GitHub, chuẩn bị biến môi trường, đưa ứng dụng lên Vercel và kiểm tra nhanh ứng dụng trên hệ thống thật sau khi đã thiết lập bảo mật.

1. Đưa ứng dụng lên mạng nghĩa là gì🔒12 phút
2. Tạo GitHub từ đầu🔒25 phút
3. Chuẩn bị dự án để đưa lên mạng🔒20 phút
4. Biến môi trường🔒20 phút
5. Đưa ứng dụng lên mạng lần đầu🔒35 phút
6. Kiểm tra nhanh trên hệ thống thật🔒20 phút

Hoàn thiện ứng dụng To-Do List, chạy kiểm tra lỗi hồi quy lần cuối, viết README và phần mô tả cho hồ sơ năng lực, đồng thời chỉ ra những điều bạn chưa học được từ việc xây dựng ứng dụng này.

1. Hoàn thiện UX🔒25 phút
2. Danh sách kiểm tra lỗi hồi quy cuối cùng🔒25 phút
3. README và phần mô tả hồ sơ năng lực🔒25 phút
4. Những điều bạn chưa học được từ việc xây dựng ứng dụng To-Do List🔒12 phút

Dùng Build Notes đã tích lũy để phát triển tiếp phần chức năng đầu tiên cho sản phẩm của bạn, rồi kết thúc với các công thức có thể 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 của bạn 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