Xây dựng công cụ tính thu nhập cho Creator: Khi quyền riêng tư và Vanilla JS lên ngôi

Ngày nay, nền kinh tế sáng tạo (creator economy) đang bùng nổ mạnh mẽ, nhưng tồn tại một "điểm mù" lớn: việc tính toán thu nhập thực tế (net income). Nếu bạn là một nhà sáng tạo trên YouTube, Twitch hay Substack, việc ước tính thu nhập thường phải trải qua các quy trình thủ công với bảng tính lộn xộn hoặc các trang tính toán chi phí đầy quảng cáo và thu thập dữ liệu tài chính của bạn.

Hầu hết các máy tính hiện tại chỉ cung cấp ước tính tổng thể (gross estimates), bỏ qua các khoản cắt giảm của nền tảng, thuế và vị trí địa lý của khán giả. Tôi muốn giải quyết vấn đề này. Quan trọng hơn, với tư cách là một nhà phát triển, tôi muốn xây dựng nó theo cách nhẹ nhàng và tôn trọng quyền riêng tư nhất có thể.

Đó là cách Crecaly ra đời: một máy tính doanh thu cho nền kinh tế sáng tạo, giúp xác định số tiền thực sự bạn nhận được (take-home pay) trên hơn 15 nền tảng. Và tôi đã xây dựng nó hoàn toàn dưới dạng một Progressive Web App (PWA) không có máy chủ (serverless), sử dụng thuần túy Vanilla JavaScript, HTML và CSS.

Dưới đây là lý do tôi từ bỏ sự hào nhoáng của các framework hiện đại để quay về với những điều cơ bản.

Vấn đề của các công cụ tài chính hiện đại

Khi xây dựng một công cụ xử lý dữ liệu nhạy cảm—như thu nhập của ai đó, mức thuế và mục tiêu tài chính—quyền riêng tư phải là mặc định, không phải là một tính năng phụ (opt-in).

Hầu hết các ứng dụng máy tính sẽ gửi đầu vào của người dùng trở lại máy chủ để xử lý logic, thường lưu trữ dữ liệu đó cho mục đích phân tích hoặc quảng cáo lại (retargeting). Tôi muốn Crecaly trở thành "ông hoàng của quyền riêng tư".

Các ràng buộc tôi tự đặt ra cho bản thân:

• Thu thập dữ liệu backend bằng 0.
• Thời gian tải cực nhanh.
• Không sử dụng các framework nặng nề.

Công nghệ: Vanilla JS + PWA

Rất cám dỗ để khởi tạo một dự án React hoặc Vue cho mọi thứ, nhưng đối với một công cụ tiện ích độc lập (standalone utility), việc đóng gói một JavaScript bundle khổng lồ dường như là sự lãng phí.

Bám sát vào HTML, CSS và Vanilla JS, tôi đã giữ cho dung lượng ứng dụng vô cùng nhỏ gọn.

Xử lý phía Client (Không Backend)

Tất cả các phép tính phức tạp—tính đến cấu trúc phí độc đáo của hơn 15 nền tảng khác nhau, tính toán ước tính thuế và điều chỉnh theo địa lý khán giả—diễn ra cục bộ ngay trên trình duyệt của người dùng.

Vì không cần truy vấn cơ sở dữ liệu (database), giao diện người dùng (UI) cập nhật tức thì. Quan trọng hơn, các dự báo tài chính của người dùng không bao giờ rời khỏi thiết bị của họ.

Lợi thế của PWA

Tôi đã cấu trúc Crecaly dưới dạng một Progressive Web App. Bằng cách sử dụng tệp manifest.json đơn giản và một Service Worker, người dùng có thể cài đặt công cụ này trực tiếp vào màn hình chính (trên cả điện thoại và máy tính).

• Nó cảm giác giống như một ứng dụng gốc (native app).
• Nó bỏ qua các rào cản và mức phí 30% của các cửa hàng ứng dụng truyền thống.

Xây dựng "Chase Mode" (Logic toán học ngược)

Một trong những tính năng thú vị nhất để xây dựng là những gì tôi gọi là "Chase Mode" (Chế độ truy đuổi).

Thông thường, máy tính hoạt động theo chiều tiến: Nhập Lượt xem -> Xuất ra Tiền.

Chase Mode hoạt động ngược lại: Nhập Mục tiêu Tiền -> Xuất ra Lượt xem/Đăng ký/Bán hàng cần thiết.

Về mặt logic, điều này đòi hỏi phải xây dựng một động cơ toán học ngược (reverse-math engine) động. Nếu một nhà sáng tạo muốn kiếm đúng 5.000 USD tháng này, logic JS phải cộng động các ước tính thuế và phí nền tảng cụ thể để nói cho họ biết chính xác bao nhiêu đăng ký Twitch hay lượt xem YouTube họ cần để đạt mục tiêu đó. Việc thực hiện điều này ngay lập tức thông qua thao tác DOM mà không cần Virtual DOM là một bài tập tuyệt vời về quản lý trình lắng nghe sự kiện (event listener) hiệu quả.

Bài học từ việc đi theo hướng "Vanilla"

Việc xây dựng Crecaly đã nhắc nhở tôi rằng chúng ta không luôn cần một công nghệ (stack) quá phức tạp để tung ra một sản phẩm tuyệt vời.

• Tốc độ là một tính năng: Không có framework, điểm số Lighthouse là hoàn hảo.
• Quyền riêng tư xây dựng niềm tin: "Zero backend" là một điểm bán hàng khổng lồ khi tiếp thị đến những người dùng mệt mỏi vì việc bị thu thập dữ liệu.
• Vanilla JS rất mạnh mẽ: JavaScript hiện đại (ES6+) rất mạnh mẽ đến mức tôi hiếm khi cảm thấy thiếu sót một framework nào đó cho một ứng dụng tiện ích như thế này.