Tài khoản
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 ă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ế là, 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 phải là lựa chọn hợp lý cho nhóm của chúng tôi.
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à đặc biệt là 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 chia đều.
– 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 ứng dụng 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 toggle switch để bật/tắt tính năng chia đều. 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, hiển thị kết quả chi tiền, bao gồm tổng kết cá nhân và các giao dịch cần thực hiện. Danh sách chi tiêu cho phép chỉnh sửa hoặc xóa chi tiêu. Đảm bảo kết quả chia tiền được tính lại mỗi khi người dùng lưu chi tiêu.
Trang web cần được thiết kế đơn giản, hiện đại, sử dụng màu xanh lá pastel, font Roboto, kết hợp HTML/CSS/JS và bất kỳ thư viện nào để tạo ra trang web đẹp nhất. Đặt tên trang web là EzSplit. Cần xử lý các lỗi và 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 chúng ta sẽ sử dụng trang này 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 request 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ề, đổi lại một số text và logic hiển thị. Quan trọng hơn, tôi KHÔNG HỀ 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 gồm tên chi tiêu, số tiề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, danh sách sẽ hiển thị các chi tiêu, mỗi mục có tính năng chỉnh sửa hoặc xóa chi tiêu, 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ử, 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 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 dạng GET. Tôi không cần phải xác thực hay đăng ký tài khoản, chỉ cần gửi truy vấn GET 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 để thêm tính năng hiển thị mã QR cho các giao dịch cần thực hiện.
"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ị mã QR để người nợ tiền trả cho người đã chi tiêu trước đó.
Mã QR sẽ hiển thị dưới dạng ảnh, dựa trên endpoint sau: 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.
Số tài khoản sẽ cụ thể cho từng người, và nội dung chuyển khoản sẽ theo định dạng: [người nợ] ck [người trả] tiền [tên các chi tiêu phân cách bởi dấu cách].
Tôi cần bạn đảm bảo mã QR được làm mới sau mỗi lần tính toán."
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 request, 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, feedback nội bộ: khoảng 40 phút.
Về chi phí, dựa trên gói Cursor AI Pro mà tôi đang sử dụng, 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: 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ư 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.
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ý cho bạn.
