Một buổi trưa trong văn phòng, khi mọi người còn đang lăn tăn chia lại hóa đơn ăn uống của buổi tụ tập hôm trước, tôi nghe một đồng nghiệp than thở: "Splitwise bản miễn phí giờ chán thật, không phân chia theo từng món được, mà bản Pro lại gần 4 USD/tháng mà đâu có dùng thường xuyên".
Quả như thế thật, dạo gần đây đi ăn tiêu gì, chúng tôi cứ phải tính đi tính lại xem ai trả bao nhiêu tiền rồi ai đã trả tiền chưa. Có người còn "om" mấy hôm mới trả tiền, lúc ấy thì bạn sẽ rơi vào trường hợp như dưới đây.
Mỗi lần đi ăn chơi mà như này thì chẳng phải là quá tội
Có người gợi ý dùng Splitwise, nhưng app này mà dùng bản miễn phí thì quá bất tiện khi bị giới hạn thêm chi tiêu, mà bản trả phí thì đâu có rẻ
Là người từng mày mò code và đang dùng Cursor AI để nghiên cứu công cụ hỗ trợ lập trình, tôi nảy ra một ý tưởng đơn giản: Tự tạo một web app tính tiền ăn riêng cho nhóm mình: gọn nhẹ, trực quan, dễ dùng và… miễn phí.
Ý tưởng ban đầu
Tất nhiên, muốn làm cái gì thì trước tiên cũng phải có ý tưởng trước đã. Bạn sẽ chẳng làm nổi một cái gì nếu không có ý tưởng ban đầu, và tôi đã dành ra khoảng 10 phút lên ý tưởng cho các tính năng cần có của web app này. Cốt lõi là phải xử lý được:
- Thêm chi tiêu: gồm tên chi tiêu, số tiền, người trả, người tham gia, và tùy chọn chia đều hoặc không chia đều.
- Nếu không chia đều, phải có input để nhập phần chi của từng người sao cho tổng bằng số tiền người trả bỏ ra.
- Hiển thị kết quả chia tiền theo từng người, ai nợ ai bao nhiêu.
- Cho phép chỉnh sửa, xóa chi tiêu bất kỳ.
- Giao diện đơn giản, đẹp, hiện đại, dùng màu xanh lá pastel.
- Tối ưu cho mobile vì mọi người sẽ dùng trang web này trên điện thoại là chính.
Sau đó, tôi viết một prompt chi tiết để yêu cầu Cursor AI dựng giao diện và logic ban đầu (đã được tôi tối ưu như sau):
Tôi sử dụng model claude-3.7-sonnet MAX để xử lý prompt này. Đây là model trả phí theo từng request với giá 0,05 USD/lần, yêu cầu bật Usage-based pricing trong phần cài đặt của Cursor. Gõ Cmd + K để mở hộp thoại prompt khởi tạo.
Nhớ bật cái này lên mới dùng được model claude-3.7-sonnet MAX
Bật xong rồi thì nhớ chọn model claude-3.7-sonnet MAX để khởi tạo giao diện nền tảng nhé. Giao diện nền tảng cực kỳ quan trọng vì thế nên nếu muốn tốt nhất, đẹp nhất thì nên dùng model này để khởi tạo
Sau chưa đầy 5 phút, Cursor trả lại cho tôi hơn 1.000 dòng mã với một giao diện web hoàn chỉnh từ form nhập chi tiêu, tính toán chia tiền đến bảng kết quả và logic xử lý.
Vẫn như thường lệ, sau khi đọc hiểu prompt, Cursor AI tự động generate ra toàn bộ trang web và chèn trực tiếp vào tệp index.php
Sau khi tạo xong, tôi deploy thẳng lên web để check giao diện. Có thể thấy thì giao diện nền tảng của trang web sau prompt đầu tiên cũng khá ổn đấy chứ, giờ thì đi test chức năng đã
Tôi chỉ cần tinh chỉnh đôi chút về CSS, căn lề, đổi lại một số text và logic hiển thị. Quan trọng hơn, một lần nữa tôi phải nhấn mạnh là tôi KHÔNG HỀ viết một dòng code nào, mọi thứ chỉ cần nhập prompt, đọc và chọn apply những phần code mình cần.
Form thêm chi tiêu với các trường cần thiết gồm tên chi tiêu, số tiền (tôi sử dụng đơn vị là K thay cho VNĐ để tránh việc nhập số 0 quá nhiều lần), người trả tiền, danh sách những người tham gia và toggle switch chia đều cho tất cả
Sau khi thêm chi tiêu thì ở mục danh sách sẽ có các chi tiêu như này, mỗi mục chi tiêu sẽ có tính năng chỉnh sửa hoặc xóa chi tiêu, sau mỗi thay đổi, trang web tự tính toán lại số tiền ai còn nợ ai
Kết quả chia tiền sẽ hiển thị phần tổng kết cá nhân là ai đã chi tiêu hết bao nhiêu
Các giao dịch cần thực hiện sẽ được hiển thị dạng như này rất trực quan. Ai nợ ai là biết liền
Đồng nghiệp đề xuất thêm tính năng tạo mã QR chuyển khoản
Sau khi demo cho nhóm đồng nghiệp dùng thử, có người gợi ý thêm tính năng hiển thị mã QR để chuyển khoản trực tiếp, một ý tưởng hợp lý, nhất là trong thời đại chuyển khoản 5s như hiện nay.
Anh đồng nghiệp gợi ý thêm tính năng tạo mã QR để chuyển khoản luôn cho tiện. Nghe cũng hợp lý
Tôi tìm hiểu và phát hiện nền tảng qr.sepay.vn hỗ trợ tạo mã QR chuyển khoản dựa trên URL truy vấn.
Trang SePay cho phép tạo mã QR bằng truy vấn URL dạng GET như này. Quả là một endpoint API quá tiện, tôi chẳng cần phải dùng xác thực Authorization hay đăng ký tài khoản sử dụng API giống như VietQR, chỉ cần gửi truy vấn GET như này là đã có ngay mã QR với số tài khoản, tên ngân hàng, số tiền và nội dung chuyển khoản
Tôi tiếp tục prompt Cursor AI như sau:
Tôi chuyển về dùng model claude-3.5-sonnet trong gói Pro (cho phép 500 fast premium request/tháng), để tối ưu chi phí. Chỉ sau khoảng 50 request (bao gồm sửa lỗi nhỏ, tối ưu CSS, thêm nút toggle…), trang web của tôi đã sẵn sàng sử dụng.
Như thường lệ, hãy dùng công cụ Agent khi thao tác với Cursor AI để tự refactor, tự apply code
Giao diện dễ dùng, tương tác đơn giản, chia tiền xong bấm tạo QR là có thể quét và chuyển khoản ngay.
Sai khi thêm tính năng tạo mã QR thì trang web sẽ hiển thị luôn mã QR với số tiền và nội dung chuyển khoản được thiết lập sẵn
Mất chưa tới một giờ, tốn chưa tới hai bát phở
Sau tất cả, tôi có thể tổng kết lại những gì mà tôi đã thực hiện để làm ra được trang web tính tiền có phần "xịn" hơn cả Splitwise (tôi tự cho là thế).
- Lên ý tưởng: 10 phút (phải có ý tưởng mới làm được)
- Viết prompt + tạo code ban đầu: 5 phút (bước này cực kỳ quan trọng vì nó sẽ quyết định xem website/ứng dụng của bạn khởi tạo ra giao diện và tính năng nền tảng như thế nào, nên dùng claude-3.7-sonnet MAX)
- Tinh chỉnh, sửa lỗi, thêm tính năng QR, feedback nội bộ: khoảng 40 phút tất cả
Về phần chi phí, dựa trên chi phí gói Cursor AI Pro mà tôi đang sử dụng, cũng như chi phí bên ngoài gói Pro (chi phí sử dụng model MAX), tôi đưa ra như sau:
- 3 request sử dụng claude-3.7-sonnet MAX: 0,15 USD (khoảng 3.840 đồng)
- Khoảng 50 fast premium request dùng claude-3.5-sonnet (nằm trong gói Pro): khoảng 2 USD (gói Pro là 20 USD/tháng)
Như vậy chi phí chỉ khoảng 2,15 USD, tương đương 55.000 đồng, chưa tới 2 bát phở mà tôi ăn với đồng nghiệp.
Tôi gọi tên trang web là EzSplit, vì đúng như cái tên: chia tiền dễ dàng, tiện lợi và không tốn phí duy trì như các nền tảng khác.
- → EzSplit
Chỉ cần bạn có ý tưởng
Tôi chẳng phải là lập trình viên chuyên nghiệp, chỉ có nền tảng kiến thức cơ bản. Nhưng với công cụ như Cursor AI và một chút logic, bạn hoàn toàn có thể tạo ra một trang web, ứng dụng, hay công cụ phục vụ cho chính nhu cầu của mình.
Trong trường hợp này, ý tưởng ban đầu chỉ đơn thuần là chia tiền, nhưng sau khi thử nghiệm và phát triển, tôi còn thấy tiềm năng mở rộng và có thể trong tương lai tôi sẽ phát triển thêm cho EzSplit, chẳng hạn như:
- Tạo hệ thống đăng ký, đăng nhập tài khoản và nhóm chia tiền động.
- Cho phép thêm ngân hàng, số tài khoản tùy chỉnh.
- Lưu trữ lịch sử chi tiêu theo ngày/tháng (cần kết hợp xử lý thêm ở phía backend và database)
- Nhắc nhở nợ chưa thanh toán qua email, Telegram, SMS...
- Thêm bảng thống kê chi tiêu, biểu đồ trực quan.
Chỉ cần bạn có ý tưởng đủ rõ ràng và chi tiết, thì phần còn lại Cursor AI hoàn toàn xử lý thay cho bạn.
