Chuyện là một buổi trưa trong văn phòng, khi cả đám còn đang “đau đầu” chia lại hóa đơn buổi ăn hôm trước, tôi nghe đồng nghiệp càm ràm: “Splitwise miễn phí giờ chán òm, không chia từng món được, mà bản Pro tới gần 4 USD/tháng, ai rảnh đâu mà xài hoài!”. Nghe mà thấm thía thật! Dạo này đi ăn uống hay tiêu pha gì, cả nhóm cứ phải ngồi tính tay xem ai trả bao nhiêu, ai chưa trả. Có đứa còn “om” tiền mấy ngày, đến lúc đòi thì đúng kiểu “mệt mỏi như này ai chịu nổi”:
Có người đề xuất Splitwise, nhưng bản miễn phí thì “cùi bắp”, giới hạn đủ thứ, còn bản trả phí thì đắt đỏ. Là một đứa từng “vọc” code và đang mê mẩn Cursor AI – “trợ thủ” lập trình siêu đỉnh, tôi nghĩ ngay: “Sao không tự làm một web chia tiền cho nhóm, vừa gọn, vừa xịn, lại miễn phí luôn?”. Thế là bắt tay vào làm!
Ý tưởng ban đầu – Đơn giản nhưng phải “chất”
Trước tiên, làm gì cũng cần ý tưởng chứ, không thì “mơ hồ” sao nổi. Tôi dành 10 phút “vẽ” ra cái khung cơ bản cho web app này. Yêu cầu là phải:
- Thêm chi tiêu dễ dàng: Tên món, số tiền, ai trả, ai tham gia, chọn chia đều hay không.
- Không chia đều thì sao?: Có ô nhập tiền từng người, tính sao cho khớp với tổng tiền đã trả.
- Hiện kết quả rõ ràng: Ai nợ ai bao nhiêu, ai trả bao nhiêu.
- Chỉnh sửa, xóa thoải mái: Món nào sai thì sửa, không cần thì xóa.
- Giao diện “xanh mát mắt”: Dùng màu xanh lá pastel, đẹp mà hiện đại, tối ưu cho điện thoại (vì cả nhóm hay “cày” trên mobile).
Rồi tôi “bung” một prompt chi tiết cho Cursor AI, yêu cầu nó dựng giao diện và logic cơ bản. Đây là bản prompt tôi đã “tối ưu”:
"Tôi cần bạn xây dựng giúp tôi một trang web tính tiền và chia tiền ăn, tiền đi cà phê của nhóm bạn tôi. Nhóm tôi bao gồm 7 người: Phương, Thắng, Hoàng, Giang, Đức, Duyệt, Tâm, nhưng không phải lúc nào cũng đủ 7 người tham gia.
Trang web này sẽ cho phép thêm các chi tiêu mới để thực hiện tính toán, trong đó bao gồm tên chi tiêu, số tiền chi tiêu (với type=number), người trả (có menu dropdown để chọn người trả trong số 7 người trên), những người tham gia vào chi tiêu này (sử dụng checkbox để chọn ra những người tham gia vào chi tiêu), và một toggle switch (sử dụng toggle giống iOS) để bật/tắt tính năng chia đều theo đầu người, nếu không chia đều thì sẽ có thêm phần nhập tiền chi tiêu tương ứng đối với từng người (có logic tính toán sao cho tổng chi tiêu của tất cả những người tham gia phải bằng với chi tiêu mà người trả đã chi trước đó)
Sau khi ấn nút Lưu chi tiêu này, trang web sẽ thực hiện tính toán số tiền tương ứng đối với mỗi người, sẽ có mục kết quả chi tiền, gồm 2 phần tổng kết cá nhân và các giao dịch cần thực hiện. Với phần danh sách chi tiêu, cho phép người dùng chỉnh sửa hoặc xóa chi tiêu đi. Đảm bảo kết quả chia tiền cần được tính lại mỗi khi người dùng lưu chi tiêu.
Các giao dịch cần thực hiện sẽ hiển thị ai là người trả tiền cho người nào với số tiền tương ứng. Trang web cần được thiết kế đơn giản, tinh tế, hiện đại, sử dụng màu xanh lá pastel làm màu chủ đạo, font Roboto, dùng kết hợp HTML/CSS/JS cũng như bất cứ thư viện nào để tạo ra trang web một cách đẹp nhất. Đặt tên trang web sẽ là EzSplit. Cần phải xử lý các lỗi và các trường hợp exception (nếu có). Cuối trang web có đặt footer 'Made with ♥️ by duyet' và copyright tác giả. Ngoài ra, tôi cần tối ưu trang web này cho mobile vì chủ yếu chúng ta sẽ sử dụng trang này trên điện thoại".Tôi chọn model claude-3.7-sonnet MAX (trả phí 0,05 USD/request, bật Usage-based pricing trong Cursor). Gõ Cmd + K, nhập prompt, và chờ “phép màu”.
Chưa tới 5 phút, Cursor “xào” xong giao diện
Chỉ sau vài phút, Cursor trả về hơn 1.000 dòng code – một web hoàn chỉnh từ form nhập, logic tính toán đến bảng kết quả. Tôi deploy lên ngay để “nghía” thử:
Tôi chỉnh thêm chút CSS, căn lề, đổi text cho “hợp gu”, nhưng điều “đỉnh” nhất là: Tôi không viết một dòng code nào. Chỉ prompt, đọc, và chọn “apply” thôi!
- Form thêm chi tiêu: Tên món, số tiền (dùng “K” thay VNĐ cho gọn), dropdown chọn người trả, checkbox chọn người tham gia, toggle chia đều.
- Danh sách chi tiêu: Có nút sửa/xóa, tự cập nhật lại kết quả.
- Kết quả: Tổng kết từng người + ai nợ ai bao nhiêu.
Đồng nghiệp “góp ý” thêm QR chuyển khoản – quá đỉnh!
Demo cho nhóm xong, một anh bạn gợi ý: “Thêm mã QR chuyển khoản luôn cho tiện, giờ ai mà chẳng quét QR 5 giây xong!”. Nghe “hợp lý vl”!
Tôi “đào” được qr.sepay.vn – một endpoint tạo QR siêu tiện, chỉ cần gửi URL kiểu GET là ra ảnh QR với số tài khoản, ngân hàng, số tiền, nội dung. Không cần API phức tạp như VietQR!
Tôi prompt tiếp:
"Tôi cần thêm tính năng hiển thị QR code để chuyển khoản dựa trên số tiền bạn tính toán ra được. Ở mỗi dòng của các giao dịch cần thực hiện, có thêm dòng "Bấm vào đây để tạo QR chuyển tiền", khi bấm vào sẽ hiển thị ra mã QR để người nợ tiền trả cho người đã chủ trì cho phần chi tiêu trước đó.
Mã QR sẽ hiển thị dưới dạng ảnh, dựa vào endpoint sau đây: https://qr.sepay.vn/img?acc=[số tài khoản]&bank=VPB&amount=[số tiền]&des=[nội dung chuyển khoản]&template=compact&download=false (truy cập vào endpoint này sẽ ra ảnh QR dựa trên truy vấn đằng sau endpoint)
Trong đó số tài khoản sẽ cụ thể cho từng người như sau:
Phương: 152748566
Thắng: 152748566
Giang: 137146843
Hoàng: 142451433
Đức: 257357201
Duyệt: 29091998
Số tiền sẽ là số tiền mà người nợ trả cho người trả tiền.
Nội dung chuyển khoản theo format sau: [người nợ] ck [người trả] tiền [tên các chi tiêu phân bởi dấu cách]
Tôi cần bạn đảm bảo mã QR được refesh sau mỗi lần tính toán."Dùng model claude-3.5-sonnet (gói Pro, 500 request/tháng), thêm 50 request nữa để sửa lỗi, tối ưu CSS, tôi có ngay bản “xịn”:
Test trên iPhone 16 – đẹp “miễn chê”!
Chưa tới 1 giờ, chi phí chưa đến 2 bát phở
Tổng kết “hành trình” làm EzSplit:
- Ý tưởng: 10 phút.
- Prompt + code ban đầu: 5 phút (dùng claude-3.7-sonnet MAX).
- Tinh chỉnh + thêm QR: 40 phút.
Chi phí:
- 3 request MAX: 0,15 USD (~3.840 đồng).
- 50 request claude-3.5-sonnet (gói Pro 20 USD/tháng): ~2 USD.
=> Tổng: 2,15 USD (~55.000 đồng), chưa tới 2 bát phở!
Đặt tên EzSplit – đúng nghĩa “chia tiền dễ như ăn kẹo”. Dùng thử tại: EzSplit (bản demo, chưa final).
Chỉ cần ý tưởng – Cursor lo hết!
Tôi không phải coder “pro”, chỉ biết cơ bản. Nhưng với Cursor AI và chút logic, tôi làm được web này “ngon ơ”. Từ ý tưởng chia tiền đơn giản, tôi còn thấy tiềm năng mở rộng:
- Đăng ký/đăng nhập, nhóm động.
- Thêm số tài khoản tùy chỉnh.
- Lưu lịch sử chi tiêu.
- Nhắc nợ qua email, Telegram.
- Thống kê, biểu đồ “xịn sò”.
Chỉ cần bạn có ý tưởng rõ ràng, Cursor AI sẽ “xào” phần còn lại. Thử ngay nào!
Chia sẻ Thế Duyệt
