Skip to main content

[DDD] Thiết kế Chi tiết Tính năng xem chi tiết bài đăng

Tóm tắt tài liệu

Tài liệu này trình bày thiết kế kỹ thuật chi tiết cho luồng xem chi tiết nội dung video trên dashboard. Bao gồm thiết kế UI, hành vi người dùng, dữ liệu hiển thị, API, và các biện pháp tối ưu hiệu suất.

1. Tổng quan (Overview)​

1.1. Bối cảnh và Vấn đề​

Người dùng cần một giao diện rõ ràng và đầy đủ để xem chi tiết nội dung video họ đã đăng tải, bao gồm: mô tả, thông tin dự án, tiện ích, đa ngôn ngữ, định vị, và tài nguyên đa phương tiện.

1.2. Mục tiêu & Phi mục tiêu (Goals and Non-Goals)​

Mục tiêu (Goals)​

  • Hiển thị toàn bộ thông tin liên quan đến video một cách trực quan.
  • Hỗ trợ hiển thị nội dung đa ngôn ngữ.
  • Tích hợp bản đồ định vị Google Maps.
  • Xem trước video và hình ảnh liên quan.

Phi mục tiêu (Non-Goals)​

  • Chỉnh sửa nội dung video.
  • Quản lý trạng thái video (ẩn/hiện/xóa).
Ghi chú

Tài liệu chỉnh sửa và quản lý sẽ được trình bày riêng để tránh chồng chéo.

2. Kiến trúc Tổng thể (Overall Architecture)​

3. Thiết kế Chi tiết (Detailed Design)​

3.1. Thiết kế Giao diện & Luồng người dùng (UI & User Flow)​

Luồng hiển thị: Khi người dùng xem video chi tiết:

  1. Người dùng bấm vào 1 video trong danh sách.
  2. Giao diện chuyển sang màn hình xem chi tiết video.
  3. Giao diện có các tab ngôn ngữ: Tiếng Việt, Tiếng Anh, Tiếng Hàn.
  4. Dữ liệu được hiển thị theo từng ngôn ngữ, chia thành 3 bước:
  • Bước 1: Hiển thị tên dự án, mô tả, địa chỉ, và đoạn video.
  • Bước 2: Hiển thị giá bán, diện tích, tình trạng pháp lý.
  • Bước 3: Hiển thị danh sách tiện ích và các hình ảnh liên quan.
  1. Người dùng có thể chuyển ngôn ngữ mà không cần tải lại trang.
  2. Hệ thống giữ lại thông tin đã tải để không gọi lại nhiều lần.

3.2. Luồng Tương tác (Interaction Flow)​

3.3. Thiết kế API (API Design)​

Endpoint: GET /api/v1/content/:id

Response (Success - 200 OK):​

{
  "success": true,
  "data": {
    "price": 4566545,
    "unit_price": "USD",
    "area": 456546,
    "unit_area": "ft²",
    "hash_tags": ["#DaNang", "#ShopHouse", "#Investment"],
    "geo": {
      "lat": 16.02559,
      "long": 108.23344
    },
    "profit_rate": {
      "roi": 50,
      "roa": 50
    },
    "amenities": ["security_system", "elevator"],
    "content_info": {
      "vi": {
        "project_name": "1080fullhd",
        "description": "dfdf",
        "address": "Đ. Nguyễn Văn Thông, Cẩm Lệ, Đà Nẵng",
        "legal_certificates": "Giấy chứng nhận quyền sở hữu",
        "apartment_type": "Shophouse",
        "project_status": "Có sẵn"
      },
      "en": { ... },
      "ko": { ... }
    },
    "images": [...],
    "video": {
      "thumbnail_url": "...",
      "url": "...",
      "duration": 14.6,
      "resolution": "1080x2048"
    },
    "uploader": {
      "name": "Nguyễn Văn A",
      "phone": "+84xxx"
    }
  }
}

Response (Error):​

  • 404 Not Found: Không tồn tại nội dung.
  • 401 Unauthorized: Nếu nội dung bị giới hạn quyền.

4. Yêu cầu không phải tính năng (Non-Functional Requirements)​

4.1. Hiệu suất tốt​

  • Chỉ tải ảnh và video khi cần thiết: Giúp trang nhanh hơn và tiết kiệm tài nguyên.
  • Ghi nhớ dữ liệu tạm thời: Nếu người dùng quay lại trang, không cần tải lại dữ liệu.
  • Giảm số lần gọi API: Tránh gửi yêu cầu nhiều lần khi đã có thông tin.

4.2. Bảo vệ dữ liệu​

  • Kiểm tra quyền xem nếu nội dung là riêng tư.
  • Không hiển thị số điện thoại hay thông tin cá nhân nếu người dùng không có quyền xem.

5. Các tình huống rủi ro và cách xử lý​

Vấn đề có thể gặpMức độ ảnh hưởngCó dễ xảy ra không?Cách xử lý để tránh hoặc giảm thiểu
Trang không hiển thị được videoTrung bìnhHiếm khi xảy raDùng ảnh dự phòng hoặc thông báo cho người dùng
Lộ thông tin riêng tưCaoHiếm khi xảy raKiểm tra quyền xem trước khi hiển thị nội dung
Tải nội dung chậmTrung bìnhCó thể xảy raTải ảnh/video sau khi trang đã hiển thị xong

Tài liệu tham khảo: