DEV Community

Cover image for API Headless Commerce là gì? MACH, Thương mại kết hợp và Lớp hợp đồng
Sebastian Petrus
Sebastian Petrus

Posted on • Originally published at apidog.com

API Headless Commerce là gì? MACH, Thương mại kết hợp và Lớp hợp đồng

Nếu bạn đã từng mua sắm trên một giao diện cửa hàng tùy chỉnh không giống mẫu có sẵn, rất có thể một API thương mại điện tử headless đang chạy phía sau. API thương mại điện tử headless là hợp đồng mà commerce backend cung cấp để frontend có thể đọc sản phẩm, tạo giỏ hàng và đặt hàng mà không phụ thuộc vào giao diện dựng sẵn. Bài viết này giải thích cách triển khai tư duy đó trong thực tế, cách nó liên quan đến thương mại điện tử composable và MACH, và vì sao nhóm frontend, mobile, backend và đối tác của bạn đều phụ thuộc vào hợp đồng API này. Nó dựa trên ý tưởng rằng phần mềm đang chuyển sang mô hình headless và API của bạn giờ đây là sản phẩm.

Thử Apidog ngay hôm nay

“Headless” nghĩa là gì trong thương mại điện tử

Trong nền tảng thương mại điện tử truyền thống, danh mục sản phẩm, giỏ hàng, thanh toán và các trang HTML thường nằm trong cùng một hệ thống. Bạn chọn theme, chỉnh giao diện, cấu hình checkout và triển khai.

Với thương mại điện tử headless, hệ thống được tách thành hai phần:

  • Backend thương mại điện tử: quản lý sản phẩm, giá, tồn kho, giỏ hàng, đơn hàng, khuyến mãi và logic nghiệp vụ.
  • Frontend cửa hàng: ứng dụng web, mobile app, kiosk, POS, voice assistant hoặc bất kỳ giao diện nào bạn tự xây dựng.
  • API: lớp hợp đồng kết nối frontend với backend.

“Head” là lớp trình bày. Khi chuyển sang headless, bạn bỏ “head” cố định của nền tảng và truy cập “body” — tức logic thương mại — thông qua API.

Ví dụ luồng hiển thị trang sản phẩm trong một storefront headless:

sequenceDiagram
  participant UI as Storefront React/Vue/Next.js
  participant API as Commerce API
  participant BE as Commerce Backend

  UI->>API: GET /products/{slug}
  API->>BE: Lấy sản phẩm, giá, tồn kho
  BE-->>API: Product data
  API-->>UI: JSON response
  UI->>UI: Render trang sản phẩm
Enter fullscreen mode Exit fullscreen mode

Điểm quan trọng là frontend và backend có thể phát triển độc lập. Nhóm frontend chọn framework và lịch release riêng. Nhóm backend kiểm soát quy tắc thương mại. API là ranh giới kỹ thuật giữa hai bên.

Đổi lại, bạn phải tự xây dựng và vận hành nhiều hơn. Một nền tảng truyền thống thường cho bạn một cửa hàng chạy được ngay. Headless phù hợp khi bạn cần trải nghiệm tùy chỉnh, nhiều kênh bán hàng, hoặc muốn frontend tách khỏi chu kỳ thay đổi của backend.

Headless so với Composable so với MACH

Ba thuật ngữ này thường bị dùng lẫn nhau, nhưng chúng không giống nhau.

Thuật ngữ Mô tả Phạm vi
Thương mại điện tử Headless Frontend được tách rời khỏi một backend thương mại điện tử duy nhất, kết nối qua API Một backend, một hoặc nhiều frontend
Thương mại điện tử Composable Hệ thống được lắp ghép từ nhiều dịch vụ độc lập: catalog, search, payment, PIM, OMS Nhiều dịch vụ độc lập được tích hợp với nhau
MACH Tập hợp nguyên tắc kiến trúc mà nhiều hệ thống composable tuân theo Triết lý kiến trúc, không phải một sản phẩm

Cách hiểu thực tế:

  • Headless: bạn có thể vẫn dùng một backend nguyên khối, miễn là storefront truy cập backend qua API.
  • Composable: bạn chia hệ thống thành nhiều dịch vụ chuyên biệt, ví dụ search dùng một vendor, payment dùng vendor khác, PIM dùng hệ thống riêng.
  • MACH: theo MACH Alliance, MACH là viết tắt của Microservices, API-first, Cloud-native SaaS và Headless.

Trong MACH, API-first là trung tâm. Các thành phần không tích hợp bằng cách truy cập database trực tiếp hoặc gọi logic nội bộ, mà giao tiếp qua API. Vì vậy, bạn cần coi API của bạn như một sản phẩm: có hợp đồng rõ ràng, tài liệu tốt, versioning và kiểm thử.

API thương mại điện tử headless thường cung cấp những gì

Một API headless ecommerce thường xoay quanh các nhóm endpoint hoặc schema sau:

  • Danh mục và sản phẩm: đọc sản phẩm, biến thể, collection, hình ảnh, thuộc tính.
  • Tìm kiếm và duyệt: query, filter, sort, pagination.
  • Giỏ hàng: tạo cart, thêm/xóa/cập nhật item, áp dụng mã giảm giá.
  • Checkout: địa chỉ giao hàng, phương thức vận chuyển, thanh toán, tạo đơn hàng.
  • Khách hàng: đăng nhập, tài khoản, địa chỉ, lịch sử đơn hàng.
  • Kho hàng và giá: tồn kho, giá theo thị trường, tiền tệ, phân khúc khách hàng.
  • Webhook/sự kiện: order created, payment captured, inventory changed.

Một thiết kế REST đơn giản có thể trông như sau:

GET /products?category=shoes&limit=20
GET /products/{id}
POST /carts
POST /carts/{cartId}/items
PATCH /carts/{cartId}/items/{itemId}
POST /carts/{cartId}/checkout
GET /customers/{customerId}/orders
Enter fullscreen mode Exit fullscreen mode

Ví dụ response cho trang sản phẩm:

{
  "id": "prod_123",
  "slug": "running-shoe-x",
  "name": "Running Shoe X",
  "description": "Giày chạy bộ nhẹ cho luyện tập hằng ngày",
  "price": {
    "amount": 1290000,
    "currency": "VND"
  },
  "inventory": {
    "available": true,
    "quantity": 25
  },
  "variants": [
    {
      "id": "var_123_black_42",
      "color": "black",
      "size": "42",
      "sku": "SHOE-X-BLK-42"
    }
  ],
  "images": [
    {
      "url": "https://example.com/images/shoe-x.png",
      "alt": "Running Shoe X màu đen"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Một số nền tảng tách API thành:

  • Storefront API: dùng cho frontend công khai, chủ yếu đọc dữ liệu và thao tác cart/checkout.
  • Admin API: dùng cho vận hành nội bộ, quản lý catalog, đơn hàng, cấu hình, fulfillment.

Giao thức cũng cần được quyết định sớm. Nhiều nền tảng dùng GraphQL vì storefront có thể yêu cầu đúng trường cần thiết trong một request. Các nền tảng khác dùng REST, hoặc hỗ trợ cả hai. Nếu đang cân nhắc, xem thêm REST vs GraphQL.

Ví dụ GraphQL query cho trang sản phẩm:

query ProductPage($slug: String!) {
  product(slug: $slug) {
    id
    name
    description
    price {
      amount
      currency
    }
    variants {
      id
      sku
      size
      color
    }
    images {
      url
      alt
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Các nền tảng chính

Không gian headless ecommerce thường chia thành SaaS và mã nguồn mở. Một số nền tảng phổ biến:

  • commercetools: thành viên sáng lập của MACH Alliance và là một nền tảng composable commerce nổi bật, thiết kế theo hướng API-first và cloud-native.
  • Shopify: hỗ trợ headless thông qua Storefront API, cùng Hydrogen như một React framework để xây dựng storefront. Nếu bạn đang dùng Shopify, xem thêm hướng dẫn Shopify API.
  • BigCommerce: hỗ trợ headless với GraphQL Storefront và Checkout API. Xem hướng dẫn cách sử dụng BigCommerce APIs.
  • Saleor: công cụ mã nguồn mở, ưu tiên GraphQL, xây dựng trên Python và Django.
  • Medusa: công cụ mã nguồn mở trên Node.js và TypeScript, phù hợp với nhóm JavaScript muốn kiểm soát backend nhiều hơn.

Trước khi chọn nền tảng, hãy kiểm tra:

  • API có đủ cho storefront của bạn không?
  • Có hỗ trợ REST, GraphQL hay cả hai?
  • Có sandbox hoặc mock server không?
  • Có giới hạn rate limit nào ảnh hưởng đến frontend không?
  • Có webhook cho order, inventory, payment không?
  • Versioning và breaking change được xử lý thế nào?
  • Mô hình hosting, chi phí và khả năng mở rộng có phù hợp không?

Mô hình chung vẫn giống nhau: commerce engine phơi bày logic thương mại qua API, còn bạn xây dựng “head” của riêng mình.

Cách thiết kế hợp đồng API cho storefront headless

Khi frontend được tách rời, API không còn là chi tiết triển khai nội bộ. Nó trở thành hợp đồng mà các nhóm cùng dựa vào.

Một quy trình thực tế nên bắt đầu như sau:

1. Liệt kê các màn hình và luồng người dùng

Ví dụ:

  • Trang danh sách sản phẩm
  • Trang chi tiết sản phẩm
  • Tìm kiếm
  • Giỏ hàng
  • Checkout
  • Đăng nhập
  • Lịch sử đơn hàng

Sau đó ánh xạ từng màn hình sang dữ liệu cần thiết.

Ví dụ trang chi tiết sản phẩm cần:

Product:
- id
- slug
- name
- description
- price
- images
- variants
- availability
- related products
Enter fullscreen mode Exit fullscreen mode

2. Thiết kế response trước khi code

Ví dụ endpoint:

GET /storefront/products/{slug}
Enter fullscreen mode Exit fullscreen mode

Response:

{
  "id": "prod_123",
  "slug": "running-shoe-x",
  "name": "Running Shoe X",
  "price": {
    "amount": 1290000,
    "currency": "VND"
  },
  "availability": {
    "status": "in_stock"
  }
}
Enter fullscreen mode Exit fullscreen mode

Hãy thống nhất sớm:

  • Trường nào bắt buộc?
  • Trường nào có thể null?
  • Format tiền tệ là gì?
  • Lỗi trả về theo chuẩn nào?
  • Pagination dùng cursor hay page?
  • Filter và sort dùng query param nào?

3. Chuẩn hóa error response

Frontend cần biết cách xử lý lỗi. Một format lỗi nhất quán giúp giảm logic đặc biệt trong UI.

Ví dụ:

{
  "error": {
    "code": "PRODUCT_NOT_FOUND",
    "message": "Không tìm thấy sản phẩm",
    "requestId": "req_abc123"
  }
}
Enter fullscreen mode Exit fullscreen mode

Một số mã lỗi nên định nghĩa rõ:

PRODUCT_NOT_FOUND
CART_NOT_FOUND
ITEM_OUT_OF_STOCK
INVALID_COUPON
PAYMENT_FAILED
UNAUTHORIZED
RATE_LIMITED
Enter fullscreen mode Exit fullscreen mode

4. Xác định versioning

Đừng thay đổi response đang được frontend hoặc đối tác sử dụng mà không có kế hoạch. Một số cách phổ biến:

GET /v1/products/{id}
GET /v2/products/{id}
Enter fullscreen mode Exit fullscreen mode

Hoặc dùng header:

Accept: application/vnd.example.storefront.v1+json
Enter fullscreen mode Exit fullscreen mode

Nguyên tắc an toàn:

  • Thêm field mới thường là non-breaking.
  • Xóa field, đổi tên field, đổi kiểu dữ liệu là breaking change.
  • Breaking change cần version mới hoặc thời gian deprecation rõ ràng.

Tại sao các nhóm phụ thuộc vào hợp đồng API thương mại điện tử

Trong hệ thống headless, nhiều consumer có thể dùng cùng một API:

  • Web storefront
  • Mobile app
  • Ứng dụng loyalty
  • Tích hợp thuế
  • Marketplace feed
  • POS hoặc kiosk
  • Đối tác fulfillment
  • Dashboard nội bộ

Nếu response sản phẩm thay đổi mà không báo trước, tất cả consumer đó có thể lỗi cùng lúc.

Ví dụ frontend đang đọc:

product.price.amount
Enter fullscreen mode Exit fullscreen mode

Nhưng backend đổi thành:

{
  "price": 1290000
}
Enter fullscreen mode Exit fullscreen mode

Đây là breaking change. UI có thể hiển thị lỗi hoặc không render được giá.

Vì vậy, một hợp đồng API tốt cần có:

  • Schema rõ ràng.
  • Tài liệu luôn cập nhật.
  • Mock server để frontend phát triển sớm.
  • Kiểm thử hợp đồng để phát hiện breaking change.
  • Quy tắc versioning và deprecation.

Hợp đồng API là sản phẩm. Nó cần được chăm sóc như chính storefront, bao gồm cả kiểm thử hợp đồng để phát hiện thay đổi gây lỗi trước khi triển khai.

Apidog phù hợp ở đâu

Apidog không vận hành cửa hàng của bạn. Nó không phải commerce engine, CMS hay payment gateway. Nó cũng không tự biến hệ thống của bạn thành headless hoặc composable.

Vai trò của Apidog nằm ở lớp API-first: nơi bạn thiết kế, kiểm thử, giả lập và tài liệu hóa hợp đồng mà frontend, backend và đối tác cùng phụ thuộc vào.

Hình ảnh minh họa giao diện Apidog với các tùy chọn thiết kế, kiểm thử, giả lập và tài liệu hóa API.

Trong dự án thương mại điện tử headless, bạn có thể dùng Apidog theo quy trình sau:

1. Thiết kế hợp đồng trước

Mô hình hóa Storefront API hoặc Admin API dưới dạng đặc tả OpenAPI trong Apidog trước khi backend hoàn tất.

Ví dụ các endpoint chính:

paths:
  /storefront/products/{slug}:
    get:
      summary: Lấy chi tiết sản phẩm theo slug
  /storefront/carts:
    post:
      summary: Tạo giỏ hàng mới
  /storefront/carts/{cartId}/items:
    post:
      summary: Thêm sản phẩm vào giỏ hàng
Enter fullscreen mode Exit fullscreen mode

2. Mock API để frontend bắt đầu sớm

Tạo mock server từ đặc tả để nhóm frontend có thể build UI dựa trên response thực tế, ngay cả khi commerce backend chưa sẵn sàng.

Ví dụ frontend có thể gọi mock endpoint:

const res = await fetch("https://mock.example.com/storefront/products/running-shoe-x");
const product = await res.json();
Enter fullscreen mode Exit fullscreen mode

Cách này giúp frontend và backend làm việc song song. Xem thêm bài giải thích API giả lập.

3. Kiểm thử hợp đồng trong CI

Chạy API test trong pipeline để phát hiện response sai schema, lỗi status code hoặc breaking change.

Ví dụ pipeline có thể chạy:

apidog run
Enter fullscreen mode Exit fullscreen mode

Mục tiêu là đảm bảo contract vẫn đúng trước khi deploy. Đây là cách biến “headless” thành quy trình kỹ thuật có kiểm soát: frontend không cần chạy để xác minh API, chỉ cần hợp đồng được kiểm thử.

4. Tài liệu hóa cho nhóm nội bộ và đối tác

Tài liệu tương tác giúp các nhóm storefront, mobile và đối tác có một nguồn sự thật duy nhất:

  • Endpoint nào đang có?
  • Request body ra sao?
  • Response schema thế nào?
  • Auth dùng gì?
  • Error code có ý nghĩa gì?
  • Endpoint nào sắp deprecate?

Để hiểu sâu hơn vì sao điều này quan trọng khi API trở thành giao diện chính, xem phần mềm đang chuyển sang mô hình headless và API của bạn giờ đây là sản phẩm. Nếu muốn thử quy trình này, bạn có thể tải Apidog và nhập một đặc tả hiện có.

Checklist triển khai API thương mại điện tử headless

Dùng checklist này trước khi bắt đầu build storefront:

[ ] Đã xác định frontend nào sẽ dùng API: web, mobile, kiosk, partner
[ ] Đã liệt kê các màn hình và dữ liệu cần thiết
[ ] Đã chọn REST, GraphQL hoặc cả hai
[ ] Đã thiết kế schema sản phẩm, cart, checkout, customer
[ ] Đã chuẩn hóa error response
[ ] Đã có chiến lược auth
[ ] Đã có versioning
[ ] Đã có mock server cho frontend
[ ] Đã có contract test trong CI
[ ] Đã có tài liệu API cho nội bộ và đối tác
[ ] Đã định nghĩa quy trình deprecation cho breaking change
Enter fullscreen mode Exit fullscreen mode

Các câu hỏi thường gặp

Thương mại điện tử headless có giống với thương mại điện tử composable không?

Không. Thương mại điện tử headless tách storefront khỏi backend thông qua API. Thương mại điện tử composable đi xa hơn bằng cách lắp ghép nhiều dịch vụ độc lập, mỗi dịch vụ có API riêng, thành một trải nghiệm duy nhất. Mọi hệ thống composable thường là headless, nhưng một thiết lập headless với một backend nguyên khối không nhất thiết là composable.

Tôi có cần GraphQL cho một API thương mại điện tử headless không?

Không. GraphQL phổ biến vì storefront có thể yêu cầu đúng các trường cần thiết trong một request, phù hợp cho trang sản phẩm và giỏ hàng. Tuy nhiên, nhiều API headless ecommerce dùng REST, và một số nền tảng hỗ trợ cả hai. Giao thức ít quan trọng hơn việc hợp đồng ổn định, rõ ràng và được tài liệu hóa.

Tôi có thể kiểm thử API trước khi backend được xây dựng không?

Có. Nếu bạn thiết kế hợp đồng API trước dưới dạng đặc tả, bạn có thể tạo máy chủ giả lập trả về response thực tế. Frontend có thể build và test với mock server trước, sau đó chuyển sang endpoint thật khi backend sẵn sàng.

MACH Alliance là gì?

MACH Alliance là một nhóm ngành được thành lập vào năm 2020 để thúc đẩy các ngăn xếp công nghệ mở, “best-of-breed” dựa trên Microservices, API-first, Cloud-native SaaS và Headless. Các nhà cung cấp như commercetools là thành viên sáng lập. MACH là tập hợp nguyên tắc kiến trúc, không phải một sản phẩm duy nhất.

Hợp đồng là cửa hàng

Thương mại điện tử headless chuyển trọng tâm từ theme dựng sẵn sang API. Khi storefront được tách rời, API thương mại điện tử là thứ mà web, mobile, backend và đối tác thật sự xây dựng dựa vào. Composable commerce và MACH đẩy điều này xa hơn bằng cách biến API-first thành nguyên tắc cốt lõi.

Apidog không thay thế commerce engine, nhưng giúp bạn quản lý phần quan trọng nhất của kiến trúc headless: hợp đồng API. Nếu dự án của bạn cần thiết kế, mock, kiểm thử và tài liệu hóa API một cách nhất quán, Apidog cung cấp lớp làm việc đó mà không giả vờ là nền tảng thương mại điện tử bên dưới.

Top comments (0)