Trong một buổi trưa tại văn phòng, khi mọi người đang bối rối với việc chia sẻ hóa đơn từ bữa ăn trước, tôi nghe thấy một đồng nghiệp phàn nàn: "Phiên bản miễn phí của Splitwise giờ thật sự không còn hữu ích, không thể phân chia theo từng món, trong khi bản Pro lại tốn gần 4 USD mỗi tháng mà chúng tôi không sử dụng thường xuyên".
Thực tế, mỗi lần đi ăn, chúng tôi lại phải tính toán xem ai đã trả bao nhiêu và ai còn nợ. Có những người còn “giữ” tiền trong vài ngày, khiến cho việc tính toán trở nên phức tạp hơn bao giờ hết.
Những tình huống như vậy thật sự gây khó chịu cho mọi người.
Mặc dù có người đề xuất sử dụng Splitwise, nhưng phiên bản miễn phí lại quá hạn chế và bản trả phí thì không hề rẻ.
Với kinh nghiệm lập trình và sự hỗ trợ từ Cursor AI, tôi đã nảy ra một ý tưởng đơn giản: Tạo một ứng dụng web tính tiền ăn uống riêng cho nhóm mình, với tiêu chí dễ sử dụng, trực quan và hoàn toàn miễn phí.
Khởi đầu với ý tưởng
Để bắt đầu, tôi đã dành khoảng 10 phút để phác thảo ý tưởng cho các tính năng cần có của ứng dụng. Mục tiêu chính là:
– Thêm chi tiêu: bao 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.
– Nếu không chia đều, cần có ô nhập để ghi rõ phần chi của từng người sao cho tổng cộng bằng số tiền mà người trả đã chi.
– 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 và xóa chi tiêu bất kỳ.
– Giao diện đơn giản, hiện đại, sử dụng màu xanh lá pastel.
– Tối ưu cho thiết bị di động, vì mọi người sẽ sử dụng trang web này chủ yếu trên điện thoại.
Tôi đã viết một prompt chi tiết để yêu cầu Cursor AI tạo giao diện và logic ban đầu cho ứng dụng này.
Prompt cụ thể:
"Tôi cần bạn xây dựng một trang web tính tiền và chia tiền ăn cho nhóm bạn tôi. Nhóm tôi có 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, bao gồm tên chi tiêu, số tiền chi tiêu, người trả, những người tham gia và một tùy chọn để chia đều hoặc không. Nếu không chia đều, sẽ có thêm phần nhập tiền chi tiêu tương ứng với từng người.
Sau khi ấn nút Lưu, trang web sẽ tính toán số tiền tương ứng cho mỗi người và hiển thị kết quả. Danh sách chi tiêu sẽ cho phép người dùng chỉnh sửa hoặc xóa chi tiêu. Giao diện cần đơn giản, tinh tế, sử dụng màu xanh lá pastel, font Roboto, và kết hợp HTML/CSS/JS để tạo ra trang web đẹp nhất. Đặt tên trang web là EzSplit. Cần xử lý các lỗi và các trường hợp ngoại lệ. Cuối trang web có footer ‘Made with ♥️ by duyet’ và copyright tác giả. Tối ưu cho mobile vì chủ yếu sử dụng trên điện thoại".
Tôi đã sử dụng model claude-3.7-sonnet MAX để xử lý prompt này. Đây là model trả phí theo từng yêu cầu với giá 0,05 USD/lần.
Nhớ bật tính năng này để sử dụng model claude-3.7-sonnet MAX.
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ý.
Cursor AI tự động tạo 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 đã triển khai lên web để kiểm tra giao diện. Giao diện nền tảng của trang web sau prompt đầu tiên cũng khá ổn, giờ thì cần kiểm tra chức năng.
Tôi chỉ cần tinh chỉnh một chút về CSS, căn lề, và thay đổi một số văn bản. Quan trọng hơn, tôi KHÔNG CẦN viết một dòng code nào, mọi thứ chỉ cần nhập prompt và chọn áp dụng những phần code cần thiết.
Form thêm chi tiêu với các trường cần thiết như 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à tùy chọn chia đều cho tất cả.
Sau khi thêm chi tiêu, danh sách sẽ hiển thị các chi tiêu, mỗi mục sẽ có tính năng chỉnh sửa hoặc xóa, và sau mỗi thay đổi, trang web tự động 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, cho biết ai đã chi tiêu bao nhiêu.
Các giao dịch cần thực hiện sẽ được hiển thị một cách trực quan, giúp mọi người dễ dàng nhận biết ai nợ ai.
Đề xuất tính năng tạo mã QR chuyển khoản
Sau khi trình diễn cho nhóm đồng nghiệp dùng thử, một 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 rất hợp lý trong thời đại chuyển khoản nhanh chóng hiện nay.
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 mà không cần xác thực hay đăng ký tài khoản. Tôi tiếp tục prompt Cursor AI để thêm tính năng này.
"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 đã tính toán. Ở mỗi dòng giao dịch, 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ị mã QR để người nợ tiền trả cho người đã chi tiêu trước đó."
Tôi đã chuyển về dùng model claude-3.5-sonnet trong gói Pro để tối ưu chi phí. Chỉ sau khoảng 50 yêu cầu, trang web của tôi đã sẵn sàng sử dụng.
Giao diện dễ sử dụng, tương tác đơn giản, sau khi chia tiền xong, chỉ cần bấm tạo QR là có thể quét và chuyển khoản ngay.
Sau khi thêm tính năng tạo mã QR, trang web sẽ hiển thị mã QR với số tiền và nội dung chuyển khoản được thiết lập sẵn.
Kiểm tra giao diện trên iPhone 16: Trông cũng khá ấn tượng.
Chỉ mất chưa tới một giờ, chi phí chưa tới hai bát phở
Tôi có thể tổng kết lại quá trình tạo ra trang web tính tiền này:
– Lên ý tưởng: 10 phút.
– Viết prompt và tạo code ban đầu: 5 phút.
– Tinh chỉnh, sửa lỗi, thêm tính năng QR: khoảng 40 phút.
Về chi phí, dựa trên gói Cursor AI Pro mà tôi đang sử dụng, chi phí cụ thể như sau:
– 3 yêu cầu sử dụng claude-3.7-sonnet MAX: 0,15 USD (khoảng 3.840 đồng).
– Khoảng 50 yêu cầu fast premium dùng claude-3.5-sonnet: khoảng 2 USD (gói Pro là 20 USD/tháng).
Như vậy, tổng 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 đã đặt tên cho trang web là EzSplit, vì đúng như tên gọi: 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.
Chỉ cần bạn có ý tưởng
Tôi không phải là lập trình viên chuyên nghiệp, chỉ có 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 nhu cầu của mình.
Ý 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 thấy tiềm năng mở rộng 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.
– 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, phần còn lại sẽ do Cursor AI xử lý giúp bạn.