Dự án: mô hình hoá 3 hệ thống

Chúc mừng - mèo con đã đi hết phần lõi của khoá! Trước khi bắt tay làm dự án, điểm lại bộ đồ nghề đã có:

• ▸Bốn mức zoom: Context (cho mọi người) → Container → Component → Code (thường bỏ).
• ▸Sơ đồ bổ trợ: System Landscape, Dynamic, Deployment - khi câu hỏi vượt khỏi "gồm gì".
• ▸Ký pháp tự-đứng-vững: tiêu đề, chú giải, nhãn quan hệ rõ hướng, nhất quán.
• ▸Diagrams as code (Mermaid/Structurizr) để sơ đồ luôn khớp và version cùng Git.
• ▸Giao tiếp: chọn mức zoom theo khán giả, kể chuyện thay vì đổ sơ đồ.

Cách duy nhất để những thứ này thành kỹ năng là tự làm. Dưới đây là ba dự án; widget cuối bài có sẵn cả ba (và một hệ thống ngân hàng) để mèo con đối chiếu sau khi tự làm.

Hệ thống đầu: một ví điện tử. Người dùng nạp tiền, chuyển tiền, thanh toán; chủ cửa hàng nhận thanh toán; ví nối tới ngân hàng và một dịch vụ định danh (eKYC).

Bắt đầu bằng Context. Đây là một cách viết nó bằng Mermaid để mèo con tham khảo:

C4Context
  title System Context - Vi Dien Tu
  Person(nd, "Người dùng", "Nạp, chuyển, thanh toán")
  Person(ch, "Chủ cửa hàng", "Nhận thanh toán")
  System(vi, "Ví Điện Tử", "Thanh toán & chuyển tiền")
  System_Ext(bank, "Hệ thống ngân hàng", "Nạp/rút tiền")
  System_Ext(ekyc, "Dịch vụ eKYC", "Xác minh danh tính")
  Rel(nd, vi, "Nạp/chuyển/thanh toán", "HTTPS")
  Rel(ch, vi, "Nhận thanh toán", "HTTPS")
  Rel(vi, bank, "Nạp/rút tiền", "API")
  Rel(vi, ekyc, "Xác minh danh tính", "API")

Đoạn Mermaid trên render ra đúng sơ đồ này:

Hệ thống thứ hai: một app đặt đồ ăn. Thực khách đặt món, nhà hàng chuẩn bị, tài xế giao; nối tới cổng thanh toán và dịch vụ bản đồ.

• ▸Context: ba vai trò người dùng (thực khách, nhà hàng, tài xế) + hai hệ thống ngoài.
• ▸Container: app thực khách, app tài xế, API, cơ sở dữ liệu, và một hàng đợi để điều phối đơn.
• ▸Để ý: nhiều loại người dùng hơn ví điện tử - bức Context sẽ "đông" hơn ở phần Person.

Hệ thống thứ ba: một nền tảng học trực tuyến. Học viên học bài và làm quiz, giảng viên soạn bài; nối tới cổng thanh toán và dịch vụ email.

• ▸Làm đủ ba mức cho dự án này: Context → Container → Component (cho API).
• ▸Component: tách controller (đăng nhập, bài học), service (tiến độ, quiz), gateway truy cập dữ liệu.
• ▸So ba dự án: tư duy zoom GIỐNG HỆT nhau, chỉ khác phần tử cụ thể.

Sau khi tự làm, dùng widget dưới đây để so cách làm của mèo con với một cách hợp lý. Nhớ: khác không có nghĩa là sai - miễn mô hình của mèo con nhất quán và tự đứng vững.

• ▸Đối chiếu ranh giới trong/ngoài: mèo con đặt hệ thống nào là "ngoài"?
• ▸Đối chiếu độ chi tiết: ở Container, mèo con có ghi công nghệ + giao thức chưa?
• ▸Trình bày thử: chọn một dự án, kể nó cho một "sếp kinh doanh" (chỉ Context) và một "lập trình viên" (tới Component).

Mèo con giờ đã biết mô hình hoá kiến trúc một hệ thống thật, trình bày nó cho từng phòng ban, và giữ sơ đồ khỏi lạc hậu bằng code. Đó là một kỹ năng quý mà nhiều lập trình viên lâu năm vẫn còn lúng túng.

• ▸Áp dụng ngay: vẽ C4 cho một hệ thống mèo con đang làm hoặc tò mò.
• ▸Thử Structurizr Lite để quản lý mô hình bằng code, sinh nhiều view.
• ▸C4 mô tả "hình"; muốn vững phần "ruột" nghiệp vụ thì học thêm thiết kế & kiến trúc code.