Giới thiệu về Spuddy

Bạn đã bao giờ cố gắng đánh dấu các mặt hàng trong một ứng dụng danh sách mua sắm trong khi vừa xách giỏ hàng vừa cầm điện thoại chưa?

Spuddy là một ứng dụng danh sách mua sắm mà tôi đã phát triển cách đây hai năm, nhằm mục đích cải thiện trải nghiệm người dùng mà tôi cảm thấy chưa tốt trong các ứng dụng khác.

Tôi thiết kế Spuddy để dễ sử dụng - mọi thứ đều có thể tiếp cận bằng một tay, và việc đánh dấu hoàn thành chỉ cần một vuốt sang trái hoặc phải.

Công Nghệ Đằng Sau Spuddy

Spuddy không phải là một ứng dụng truyền thống, mà là một Ứng Dụng Web Tiến Bộ (PWA) với khả năng đồng bộ thời gian thực. Điều này cho phép bạn chia sẻ danh sách mua sắm với gia đình, và mọi người có thể thấy các cập nhật ngay lập tức.

Dự Án Đầu Tiên Trong #buildinpublic

Spuddy sẽ là dự án đầu tiên của tôi trong phong trào #buildinpublic.

Mặc dù tôi đã xây dựng Spuddy cách đây hai năm, nhưng tôi chưa bao giờ chia sẻ nó công khai. Lý do là vì nó chỉ phục vụ cho nhu cầu cá nhân của tôi, và tôi không nghĩ rằng ai khác sẽ quan tâm đến nó.

Tuy nhiên, bây giờ tôi muốn cởi mở hơn về các dự án của mình và chia sẻ hành trình xây dựng ứng dụng - Spuddy sẽ là dự án đầu tiên tôi công khai.

Tôi nghĩ thật thú vị khi một ứng dụng danh sách mua sắm sẽ là dự án đầu tiên tôi chia sẻ công khai. Đối với hầu hết các kỹ sư frontend, một ứng dụng danh sách mua sắm (todo) chính là dự án đầu tiên mà họ từng xây dựng.

Từ Dự Án Phụ Thành Sản Phẩm

Spuddy đã tồn tại, vậy tại sao lại phải xây dựng lại? Tôi có thể chỉ cần chia sẻ mã nguồn, mở tên miền và xong việc, đúng không?

Như tôi đã viết trong bài viết trước đó "Mục Tiêu Internet Của Tôi (Cam Kết)", tôi không muốn chỉ đơn giản là mở mã nguồn các dự án của mình. Tôi muốn biến chúng thành sản phẩm thực sự và học hỏi về khái niệm "sản phẩm".

Để biến Spuddy từ một ứng dụng nhỏ thành một sản phẩm thực thụ, tôi sẽ phải thực hiện những điều sau:

Trang Đích (Landing Page)

Một trong những điều đầu tiên mà bất kỳ ai cũng nên nghĩ đến khi xây dựng một sản phẩm là tiếp thị! Bước đầu tiên quan trọng nhất trong việc tiếp thị sản phẩm của bạn là có một trang đích.

Trang đích này nên giải thích rõ ràng Spuddy là gì và tại sao bạn nên sử dụng nó.

Các Trang Khác

Vì đây là một sản phẩm mà tôi cho phép người dùng nhập dữ liệu, tôi cũng cần một số trang khác:

• Chính sách bảo mật
• Chính sách cookie
• Điều khoản dịch vụ
• Liên hệ

Xác Thực & Phân Quyền

Điều này là hiển nhiên, nhưng hiện tại bất kỳ ai cũng có thể làm bất cứ điều gì trong Spuddy :)

Phân Tích Sản Phẩm

Có thể đây là một sự lãng phí thời gian khi làm việc này, vì tôi không biết liệu có ai sẽ sử dụng Spuddy hay không.

Tuy nhiên, tôi muốn học cách xây dựng phân tích sản phẩm, để dễ dàng triển khai trong các dự án tương lai.

Giá Cả & Đăng Ký

Tương tự như phân tích sản phẩm, điều này có thể là một sự lãng phí thời gian, nếu không ai sử dụng Spuddy.

Tuy nhiên, tôi muốn học cách xây dựng mô hình giá cả & đăng ký, để có thể triển khai trong các dự án tương lai. Nếu tôi có người dùng, tôi sẽ phải tìm cách để chi trả cho chi phí lưu trữ, vì đồng bộ thời gian thực không phải là miễn phí.

Cải Thiện Giao Diện & Trải Nghiệm Người Dùng

Vì Spuddy được xây dựng chỉ phục vụ cho nhu cầu cá nhân của tôi, tôi đã thêm những tính năng ngẫu nhiên như màn hình công thức nấu ăn mà không thực sự nghĩ đến trải nghiệm người dùng tổng thể, và không cho những tính năng này thời gian để phát triển.

Tôi muốn lùi lại một bước và suy nghĩ về trải nghiệm người dùng tổng thể, và cách tôi có thể cải thiện nó. Đối với sản phẩm khả thi tối thiểu (MVP) này, tôi muốn tập trung vào trải nghiệm cốt lõi của một ứng dụng danh sách mua sắm và làm cho nó trở nên tuyệt vời nhất có thể.

Công Nghệ

Việc đồng bộ thời gian thực của Spuddy hiện tại được hỗ trợ bởi việc triển khai thủ công y-websocket-server trên Fly.io. Điều này khá phiền phức trong quản lý, vì y-websocket-server phụ thuộc vào một cơ sở dữ liệu ít được sử dụng - leveldb, mà không có nhiều công cụ xung quanh nó. Hơn nữa, vì đây là YJS và tôi đang sử dụng React, tôi đã phải tự phát triển các hooks & tích hợp từ React đến YJS - tất cả đều là mã khá khó đọc.

Đối với phiên bản mới của Spuddy, tôi muốn chuyển sang InstantDB làm backend. Nó không chỉ cung cấp một giải pháp được lưu trữ mà còn hỗ trợ tốt cho React. Điều này sẽ giúp tôi dễ dàng bảo trì và tập trung vào việc xây dựng sản phẩm, thay vì hạ tầng.

LƯU Ý: InstantDB là mã nguồn mở và có thể tự lưu trữ. Tôi có thể sẽ khám phá tùy chọn này sau khi ra mắt, nếu tôi có người dùng.

Những Bước Tiếp Theo

Tiếp theo, tôi sẽ thiết lập khung cho phiên bản mới của Spuddy, với các thay đổi công nghệ đã đề cập ở trên. Nó sẽ được mở mã ngay từ đầu, và tôi sẽ chia sẻ điều này như một phần của bài viết theo dõi.

Sau đó, tôi sẽ bắt đầu làm việc trên thiết kế của ứng dụng - cả giao diện người dùng và trải nghiệm người dùng. Tôi thường bắt đầu với việc lập trình, nhưng lần này tôi muốn lùi lại một bước và suy nghĩ về trải nghiệm tổng thể. Tôi nghĩ đây cũng sẽ là cơ hội tốt để chia sẻ suy nghĩ thiết kế của tôi và nhận phản hồi từ bạn, độc giả.