Đồng nghiệp than thở chuyện chia tiền ăn, tôi dùng Cursor AI code luôn ra trang web tính tiền "xịn" hơn Splitwise: Tốn chưa tới 1 giờ, chi phí không tới 2 bát phở
Bạn cần gì, tôi (và Cursor AI) code luôn ra thứ đó.
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 với tiêu chí gọn nhẹ, trực quan, dễ dùng và quan trọng là phải... 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):
Prompt cụ thể và cần phải được chi tiết (tham khảo):
"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 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 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."
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.
Sau 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
Test thử giao diện trên iPhone 16: Trông cũng khá là "ra gì và này nọ" đấy chứ
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.
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.
NỔI BẬT TRANG CHỦ
OpenAI mở miễn phí tính năng tạo ảnh AI của ChatGPT: Ai cũng có thể "đu trend" Studio Ghibli mà không tốn xu nào!
CEO OpenAI Sam Altman cho biết tính năng tạo ảnh của ChatGPT đã có 1 triệu người dùng chỉ trong 1 giờ.
14 năm "gồng lưng" nói tiếng Anh, giờ mới được "gọi mẹ" bằng tiếng Việt trên iPhone
