Hoàn thiện side project với LLM và Cursor

• Từ khoảng 5 năm trước, tác giả đảm nhiệm vai trò Engineering Manager nên trong công việc chính, số lần trực tiếp viết mã đã giảm đi
• Ngoài công việc, tác giả vẫn đều đặn làm các dự án cá nhân để giữ cảm giác lập trình và rèn giũa năng lực kỹ thuật
• Trước đây, do hạn chế về thời gian nên tiến độ dự án thường chậm và nhiều trường hợp bị dừng lại trước khi hoàn thành
• Tuy nhiên, trong năm 2024, tác giả đã hình thành được thói quen “hoàn thiện” phiên bản đầu tiên bằng cách tạo và triển khai các công cụ cần thiết với tốc độ tương đối nhanh

Ví dụ về các side project hoàn thành gần đây

• jsonplayground.com : vừa là trình định dạng JSON, vừa cung cấp tính năng JQ chạy ngay trong trình duyệt (dùng WebAssembly), nên không gửi dữ liệu ra bên ngoài
• webtomarkdown.com : chuyển tệp sang Markdown hoặc trích xuất một phần website thành Markdown để truyền cho LLM làm ngữ cảnh
• Bản nháp cải tiến thiết kế cho trang của câu lạc bộ hàng không Evergreen Soaring
• Tạo tiện ích mở rộng Chrome để tự động hóa việc xử lý các tin nhắn gửi tới câu lạc bộ hàng không
• fitinterval.com : cung cấp chức năng hẹn giờ theo khoảng khi tập luyện

Bối cảnh sử dụng LLM và Cursor IDE

• LLM giúp tăng mạnh năng suất khi làm side project
• Đặc biệt, Cursor IDE khiến quá trình dùng LLM cho công việc lập trình trở nên thuận tiện
• Bài viết này chia sẻ toàn bộ luồng tạo một dự án mới để giúp độc giả có thể áp dụng thử
• Vì LLM không hữu ích như nhau trong mọi lĩnh vực, nên cần tự dùng thử để chọn xem nên áp dụng ở đâu

Dự án ví dụ: website theo dõi thói quen

• Tác giả muốn tái tạo ứng dụng theo dõi thói quen đang dùng dưới dạng website
• Toàn bộ dữ liệu được lưu trên thiết bị cục bộ để đảm bảo quyền riêng tư của người dùng

Bắt đầu xây dựng đặc tả

• Trước tiên, tác giả mô tả ngắn gọn cho ChatGPT, rồi vừa nhận thêm câu hỏi vừa cụ thể hóa đặc tả của ứng dụng
• Khi đã tương đối cụ thể, tác giả yêu cầu sắp xếp lại đến mức “người khác chỉ cần nhìn đặc tả này cũng có thể xây toàn bộ ứng dụng”
• Tác giả nêu rõ ý định dùng TypeScript, React, Tailwind CSS để tạo đặc tả dựa trên các công nghệ đó
• Đặc tả cuối cùng được lưu trong SPEC.md để tham chiếu ở các giai đoạn phát triển sau

Bootstrap dự án

• Dùng Vite để nhanh chóng dựng bộ khung dự án
• Thiết lập ban đầu bằng lệnh npm create vite@latest . và đặt SPEC.md vào thư mục dự án
• Trong Composer của Cursor IDE, tác giả dùng tính năng agent để tự động hóa việc cấu hình Tailwind, chỉnh sửa các tệp cơ bản, v.v.
• Cách này giúp triển khai nhanh các chức năng ban đầu như bố cục UX dự kiến, sử dụng localStorage, xuất Markdown, v.v.

Lặp lại công việc theo đơn vị nhỏ

• Thay vì yêu cầu quá nhiều tính năng cùng lúc, tác giả chia các cải tiến cần thiết thành từng phần và yêu cầu LLM cập nhật tuần tự
• Ví dụ, các thay đổi UX hay sửa lỗi được tách nhỏ và chỉ dẫn qua chế độ Chat hoặc Composer
• Có thể đính kèm hình ảnh vào Chat để mô tả thiết kế mong muốn và yêu cầu LLM hiện thực hóa thành mã

Thiết lập triển khai liên tục

• Tham khảo GitHub Actions để cấu hình sao cho khi có commit lên nhánh main thì tự động build rồi triển khai lên GitHub Pages
• Trong Cursor, tác giả cung cấp liên kết tới tệp .yml mẫu của repo khác để LLM tham chiếu và dựng pipeline triển khai

Mẹo tổng hợp

• Trước hết hãy sắp xếp trước phần tổng quan và chi tiết của dự án bằng LLM, rồi lưu lại để dùng làm ngữ cảnh về sau
• Dùng công cụ hoặc template mã nguồn mở để bootstrap dự án và thiết lập cấu trúc
  • Chuẩn bị một lần các công cụ phát triển thiết yếu và cấu trúc thư mục, đồng thời theo mô hình dự án dễ quản lý
• Dùng Cursor Composer (chế độ agent) để bắt đầu dự án nhanh hơn
• Kết hợp sử dụng Claude-3.5-Sonnet và o1 (mô hình)
  • Dùng o1 cho các công việc soạn thảo diện rộng (bản nháp đầu tiên)
  • Khoảng 80% các chỉnh sửa và bổ sung chi tiết được thực hiện với Claude-3.5-Sonnet
• Chọn chế độ phù hợp (Chat, Composer thường, Composer agent)
  • Chat: dùng khi cần thay đổi ở vị trí cụ thể và muốn kiểm tra kết quả chỉnh sửa mỗi lần
  • Composer (thường): khi cần thêm tính năng trải rộng trên nhiều tệp hoặc thay đổi đa tệp
  • Composer (agent): chưa dùng nhiều, nhưng phù hợp khi cần tự động hóa như chạy lệnh, lint, sửa lặp lại, v.v. (dù vậy vẫn nên chia nhỏ để dễ quản lý)
• Khi cung cấp ngữ cảnh, hãy gửi kèm các tệp, tài liệu, liên kết cụ thể
  • Khi cần, có thể cấu hình để Chat truy cập toàn bộ codebase, giúp LLM tìm và đề xuất mã phù hợp với ngữ cảnh
• Lưu các tài liệu liên quan đến dự án dưới dạng Markdown (SPEC.md, v.v.) để có thể đưa vào ngữ cảnh
• Tận dụng tệp .cursorrules trong thư mục dự án
  • Có thể chỉ định không dùng thư viện nào đó, hoặc bắt buộc dùng Tailwind, thư viện component shadcn, v.v.
  • Nếu định nghĩa sẵn các quy tắc muốn phản ánh vào prompt như vậy, có thể định hướng kết quả theo mong muốn trong hầu hết các yêu cầu
• Hãy làm việc trong khi vẫn hiểu tổng thể mã nguồn
  • Giữ chất lượng và cấu trúc mã để tránh tình huống LLM không debug được
  • Tiếp tục chia công việc thành các đơn vị nhỏ, và khi cần thì dùng LLM để refactor hoặc tách module

Kết lại

• Nếu nhanh chóng hoàn tất dự án theo cách này và tạo ra phiên bản có thể triển khai, thì ngay cả khi nghỉ một thời gian, việc bắt đầu lại cũng dễ dàng hơn nhiều
• Thói quen hoàn thành từng phần nhỏ giúp duy trì động lực, đồng thời mang lại sự khích lệ khi có thể nhanh chóng xác nhận những thành quả nhỏ

[fbtmdxor]

Cảm ơn bạn đã chia sẻ thông tin hữu ích!

[ragingwind]

Những gì mọi người thử làm trông na ná nhau.

[netcleaner]

Gần đây tôi cũng đã thử làm một dự án nhỏ với Cursor và LLM theo cách tương tự như nội dung ở trên, và năng suất thực sự rất tốt. Tôi tạo SPEC hoặc PRD bằng LLM rồi đưa vào Cursor làm ngữ cảnh, sau đó thiết lập các quy tắc cho công nghệ sẽ sử dụng bằng cursorrules, rồi giao từng tác vụ một thông qua Composer, thì mã sinh ra khá nhất quán và chạy rất ổn.