Demo sàn nhà hàng và màn hình bếp

Mở nó hai lần, gọi món với vai phục vụ ở cửa sổ này, rồi xem phiếu rơi xuống giá bếp ở cửa sổ kia. Bấm xong món và cái bàn chuyển xanh trở lại trên sàn. Hầu hết mọi người nghĩ việc đó cần một máy chủ. Nó chỉ cần một trình duyệt.

Mở bản demo

Mở kitchen.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ì

Cửa sổ phục vụ là sơ đồ bàn: bàn theo khu, mở đơn, thêm món, gửi xuống bếp. Cửa sổ bếp là giá phiếu: phiếu tô màu theo trạm với đồng hồ đếm tuổi phiếu, bắt đầu làm và bấm xong. Quầy chia món nằm giữa hai bên, còn quản lý có thống kê ca, nhật ký hoạt động, và một trình mô phỏng tự nấu để một người cũng diễn được trọn vòng.

Mọi thay đổi đều đi qua đúng một hàm: ghi các bản ghi đã đổi vào IndexedDB, áp vào trạng thái tại chỗ, rồi phát chính các bản ghi đó đi. Cửa sổ nhận áp thẳng dữ liệu nhận được vào bộ nhớ và vẽ lại chứ không đọc lại cơ sở dữ liệu, vì cơ sở dữ liệu thuộc về từng origin và cửa sổ gửi thì đã lưu xong rồi. Cảm giác tức thì đến từ đó, và thanh đầu in ra độ trễ đo được để lời khẳng định này kiểm chứng được chứ không chỉ là lời nói.

Sửa đồng thời được giải quyết theo nguyên tắc người ghi sau thắng trên một bộ đếm Lamport, lấy mã cửa sổ ghi làm cơ sở phân định, nên mọi cửa sổ dừng lại ở cùng một kết quả chứ không phải mỗi cửa sổ một phách. Các thay đổi được xếp hàng nối tiếp, nên chạm nhanh hai lần sẽ tăng số lượng chứ không để lại hai dòng giống hệt nhau. Trạng thái của đơn được suy ra từ các món và trạng thái bàn suy ra từ đơn, nên bấm xong món cuối cùng sẽ đẩy phiếu lên và vẽ lại sàn mà không cần thêm một thông điệp nào chạy qua kênh.

Mở cửa sổ thứ hai từ sảnh, chọn Phục vụ ở một bên và Bếp ở bên kia, rồi gửi một đơn. Danh sách cửa sổ trên thanh đầu in ra độ trễ đo được giữa chúng.

Tính năng

14 bàn thuộc ba khu, 26 món trong năm nhóm chia về bốn trạm chế biến, bảy nhân viên, và một món đã hết khỏi thực đơn.

Sàn và giá phiếu

Bàn theo khu kèm số khách, trạng thái đơn và số món sẵn sàng, cùng một giá phiếu bếp nhóm theo trạm với đồng hồ đếm tuổi trên từng phiếu.

Cùng nhịp giữa các cửa sổ

Một kênh phát tin giữa các cửa sổ, với sự kiện lưu trữ làm phương án dự phòng, và một danh sách nêu tên từng cửa sổ đang mở, vai của nó và độ trễ đo được tới nó.

Mỗi cửa sổ một vai

Phục vụ, bếp, quầy chia món và quản lý, giữ theo từng cửa sổ chứ không theo trình duyệt, nên hai cửa sổ mở cạnh nhau không tranh nhau một vai.

Bảng điều khiển của quản lý

Thống kê ca, nhật ký hoạt động, nút đặt lại, và một trình mô phỏng tự nấu để trình diễn trọn vòng mà không cần người thứ hai.

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.

  1. Xếp khách vào bàn

    Một cái bàn trên sơ đồ nhận số khách và mở một đơn.

  2. Gửi xuống bếp

    Món được thêm rồi gửi. Bản ghi được lưu, áp tại chỗ và phát đi trong cùng một bước.

  3. Giá bếp nhận phiếu

    Cửa sổ bên kia vẽ phiếu mà không đọc lại cơ sở dữ liệu, tô màu theo trạm, với đồng hồ tuổi phiếu đã chạy sẵn.

  4. Nấu và bấm xong

    Món được bắt đầu và bấm xong. Bấm xong món cuối cùng đẩy cả phiếu lên, vì trạng thái phiếu được suy ra từ các món chứ không lưu riêng bên cạnh.

  5. Sàn biết ngay

    Cái bàn chuyển xanh kèm số món sẵn sàng và một thông báo, từ chính lần phát tin đó chứ không từ một thông điệp gửi thêm.

  6. Ra món, rồi bắt đầu lại

    Ra hết món sẵn sàng là khép vòng và bàn trở lại trống, và đó là chỗ đơn tiếp theo bắt đầu.

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

  • Hai cửa sổ cùng nhịp, với độ trễ giữa chúng được đo và in ngay trên thanh đầu
  • Chạm nhanh hai lần làm tăng số lượng chứ không ghi thành hai dòng giống hệt nhau
  • Sửa đồng thời dừng ở cùng một kết quả trên mọi cửa sổ, theo thứ tự Lamport với một cơ sở phân định xác định
  • Tiếng Việt trên sàn, trên giá bếp và trong thực đơn mẫu, với giá tiền được định dạng lại chứ không gõ lại

Cố ý không làm thật

  • Hai cửa sổ bắt buộc phải cùng một trình duyệt trên cùng một máy. Đó là giới hạn thật của một demo không có máy chủ, và sảnh nói trước điều đó
  • Vai là một lựa chọn theo cửa sổ, không phải xác thực
  • Không có gì được in ra, không thu tiền, và không phiếu nào tới một cái bếp thật
  • Mã phiếu được đánh số theo từng cửa sổ, nên hai cửa sổ mở đơn cùng một khoảnh khắc có thể hiện cùng một mã. Đơn được định danh bằng id, còn mã chỉ để nhìn

Đượ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ệ
Svelte 5 với runes, TypeScript và Vite, IndexedDB qua idb, một router theo hash khoảng bốn mươi dòng, và một lớp dịch tự viết. Không CSS framework, không thư viện quản lý trạng thái, không gói biểu tượng, và khoảng 38 KB gzip JavaScript trên đúng hai thư viện chạy thật.
Truyền tin
Một kênh phát tin giữa các cửa sổ, với sự kiện lưu trữ làm dự phòng. Thứ được phát đi là bản ghi chứ không phải lệnh làm mới, nên cửa sổ nhận vẽ thẳng từ dữ liệu nhận được thay vì quay lại cơ sở dữ liệu.
Xung đột
Người ghi sau thắng trên một bộ đếm Lamport, lấy mã cửa sổ ghi làm cơ sở phân định, cùng một hàng đợi nối tiếp để hai lần chạm liên tiếp không thể xen vào nhau.
Kiểm tra
Kiểm tra kiểu trên các thành phần và phần TypeScript là chốt tự động duy nhất ở đây. Không có bộ kiểm thử đơn vị, vì thứ đáng kiểm tra là hai cửa sổ có giữ đúng nhịp hay không, và điều đó được kiểm bằng cách mở hai cửa sổ.

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.