Danh mục và giỏ hàng
Sáu danh mục, bộ lọc thuộc tính, ảnh sản phẩm lưu ngay trong trình duyệt, và một giỏ hàng sống sót qua lần tải lại trang lẫn khi đóng tab.
Demo cửa hàng và trang quản trị
Hai mặt trên cùng một cửa hàng: danh mục, giỏ hàng và thanh toán cho khách, còn sản phẩm, tồn kho, đơn hàng và khuyến mãi cho người vận hành. Nó tự tạo dữ liệu mẫu ngay khi bạn mở, nên không có tài khoản nào phải đăng ký và không phải chờ gì cả.
Mở storefront.taiphamsolutions.com trong tab mới. Không cần tài khoản, không cần đăng ký, và mọi thao tác của bạn đều không rời khỏi trình duyệt. Ứng dụng demo chỉ có bản tiếng Anh.
Bản demo này làm gì
Mặt tiền là nửa dành cho việc mua sắm: sáu danh mục, bộ lọc thuộc tính, ảnh sản phẩm, và một giỏ hàng sống sót qua lần tải lại trang. Trang quản trị là nửa còn lại của cùng cơ sở dữ liệu đó, vào được qua nút chuyển vai trò trong menu.
Thanh toán là phần bắt buộc phải làm cho tử tế. Nó chạy như một giao dịch IndexedDB duy nhất: đọc lại tồn kho, từ chối bán quá số lượng, đánh số đơn hàng từ một bộ đếm, ghi một bút toán vào sổ kho, rồi làm rỗng giỏ hàng. Cho hai tab tranh nhau đơn vị hàng cuối cùng thì đúng một tab thắng. Tab thua được hoàn tác hoàn toàn, kể cả số đơn hàng.
Tồn kho là một con số được lưu sẵn với một cuốn sổ phía sau giải thích mọi lần biến động, và trang kho cộng lại sổ rồi dựng biểu ngữ cảnh báo nếu hai bên có lúc nào đó lệch nhau. Đơn hàng chụp lại tên, mã SKU và đơn giá tại đúng thời điểm bán, nên sửa sản phẩm về sau không thể viết lại số tiền một người đã bị tính.
Mở trang quản trị ở một tab thứ hai, đổi một mức giá, rồi xem tab cửa hàng vẽ lại mà không cần tải lại trang.
Tính năng
24 sản phẩm thuộc 6 danh mục, 10 khách hàng, và khoảng 90 ngày lịch sử đơn hàng, được tạo sẵn ngay lần mở đầu tiên.
Trang quản trị
Sản phẩm và biến thể, tồn kho, đơn hàng và giao hàng, khách hàng, mã giảm giá, và cuốn sổ kho giải thích cho con số tồn.
Đồng bộ giữa các tab
Một lần ghi ở mặt này tới được mặt kia mà không cần tải lại trang, không cần websocket riêng, và không có bộ nhớ đệm nào phải xóa.
Công cụ dữ liệu
Xuất toàn bộ cơ sở dữ liệu, kể cả ảnh sản phẩm, thành một tệp JSON, và khôi phục lại trong một giao dịch được ăn cả ngã về không.
Quy trình khép kín, từ đầu đến cuối
Mọi bước dưới đây đều diễn ra bên trong bản demo. Không có điểm nào mà công việc rời khỏi trình duyệt rồi quay lại.
Duyệt và lọc
Danh mục và thuộc tính thu hẹp dần danh sách. Giá, tồn kho và hình ảnh đều đến từ chính những bản ghi mà bên quản trị đang sửa.
Giỏ hàng
Các dòng hàng gắn với biến thể chứ không gắn với tên, nên một lần đổi tên ở phía trên không thể âm thầm thay đổi thứ đang nằm trong giỏ.
Thanh toán, như một giao dịch
Tồn kho được đọc lại, việc bán quá bị từ chối, đơn hàng nhận số tiếp theo từ bộ đếm, một bút toán được ghi vào sổ, và giỏ hàng rỗng đi. Hoặc tất cả, hoặc không gì cả.
Đơn hàng sang tới bên nhân viên
Nó hiện ra trong trang quản trị với các dòng hàng đã được chụp lại, và đi tiếp qua quy trình giao hàng từ đó.
Tồn kho được đối chiếu
Trang kho cộng sổ và so với con số đang lưu rồi nói ra nếu hai bên đã lệch, thay vì lặng lẽ tin vào con số đó.
Cái gì là thật, cái gì thì không
Không có máy chủ nào phía sau, và chính điều đó quyết định cả hai cột. Cột trái là những phần mà ràng buộc ấy khiến chúng đáng được làm cho tử tế. Cột phải là những phần nó loại trừ.
Được xử lý thật
- Bán quá tồn khi hai tab tranh nhau đơn vị hàng cuối cùng
- Lịch sử đơn hàng vẫn đúng sau khi sản phẩm bị sửa về sau
- Một con số tồn kho bạn có thể đối chiếu với chính cuốn sổ của nó
- Cập nhật giữa các tab mà không cần tải lại trang
Cố ý không làm thật
- Nút chuyển vai trò không phải là xác thực. Không có máy chủ thì không có gì để xác thực, và giao diện nói rõ điều đó
- Thanh toán dừng ở một bước mô phỏng. Không thu thẻ và không có dòng tiền nào chạy
- Không có email nào được gửi, cho khách hay cho bất kỳ ai
- Không có gì được đồng bộ. Dữ liệu nằm theo từng hồ sơ trình duyệt, nên mở trên điện thoại là một bản mới tinh
Được xây dựng thế nào
Phần mô tả này thuyết phục hơn cả bản thân ứng dụng, nên nó nằm ngay trên trang thay vì trong một kho mã không ai mở được.
- Công nghệ
- Vue 3, Dexie trên IndexedDB, Vite. Một gói tĩnh duy nhất, không có máy chủ phía sau bất kỳ mặt nào.
- Lưu trữ
- Mọi sản phẩm, đơn hàng, khách hàng, mã giảm giá và ảnh sản phẩm đều nằm trong IndexedDB của trình duyệt.
- Ranh giới
- Không có gì trong mặt tiền, trang quản trị hay các store import Dexie. Mọi lần đọc và ghi đều đi qua một lớp repository trả về các đối tượng thuần, nên thay IndexedDB bằng một API thật chỉ có nghĩa là viết lại một thư mục.
- Kiểm thử
- 78 unit test chạy trên fake-indexeddb, nên giao dịch, chỉ mục và đường nâng cấp đều được thử thật, cộng thêm 4 test Playwright chạy trên đúng gói được phát hành.
Bản demo này là bằng chứng cho dịch vụ nào
Một bản demo tồn tại để chứng minh điều gì đó trong danh sách dịch vụ, chứ không phải để tự nó gây ấn tượng. Đây là những dịch vụ mà bản demo này chứng minh.
Các bản demo khác
Mỗi bản là một loại bài toán khác nhau, và tất cả đều nằm trong menu Bản demo ở đầu trang.
Muốn một bản như thế này nhưng chạy theo quy tắc của bạn?
Bản này được làm dưới một ràng buộc mà không ai tự chọn. Bản của bạn sẽ có máy chủ, tài khoản thật, và cả những phần thực sự khó trong nghiệp vụ. Hãy cho chúng tôi biết phần mềm cần làm được gì, chúng tôi sẽ nói cần những gì để làm ra nó.
Cứ mang tới bài toán còn ngổn ngang. Đó là kiểu trao đổi chúng tôi thích nhất.