Skip to main content

[DDD] Thiết kế Chi tiết Trang Tin nhắn

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

Tài liệu này mô tả cách thiết kế Trang Tin nhắn - nơi người dùng có thể trò chuyện với nhau trong ứng dụng. Trang này hoạt động giống như các ứng dụng chat quen thuộc như Messenger, Zalo, với danh sách cuộc trò chuyện bên trái và khung chat bên phải.

1. Tổng quan (Overview)​

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

Trong ứng dụng bất động sản, người mua và người bán cần trao đổi thông tin trực tiếp. Thay vì phải gọi điện hoặc gặp mặt, họ có thể nhắn tin ngay trong ứng dụng để:

  • Hỏi thêm thông tin về bất động sản
  • Thương lượng giá cả
  • Sắp xếp lịch xem nhà
  • Trao đổi tài liệu và hình ảnh

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

Mục tiêu (Goals)​

  • Hiển thị danh sách chat: Người dùng thấy tất cả cuộc trò chuyện của mình (với người bán, người mua, hoặc nhóm)
  • Xem tin nhắn: Khi chọn một cuộc trò chuyện, hiển thị tất cả tin nhắn đã trao đổi
  • Gửi tin nhắn: Có thể gửi tin nhắn chữ hoặc tin nhắn thoại (giống như ghi âm trong Zalo)
  • Dễ sử dụng trên điện thoại: Trên màn hình nhỏ, danh sách chat sẽ ẩn vào menu để tiết kiệm không gian

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

  • Gửi file đính kèm (hình ảnh, video, tài liệu) (phát triển sau)
  • Thông báo đẩy khi có tin nhắn mới (phát triển sau)
  • Tạo nhóm chat mới hoặc tìm kiếm người dùng (phát triển sau)
  • Gọi video hoặc gọi thoại (phát triển sau)

2. Cách hoạt động của trang tin nhắn​

Trang tin nhắn hoạt động như một "cầu nối" giữa người dùng và hệ thống lưu trữ tin nhắn. Khi người dùng thực hiện một hành động, hệ thống sẽ xử lý và cập nhật thông tin tương ứng.

3. Chi tiết cách hoạt động​

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

3.2. Giao diện và cách sử dụng​

Các phần chính của trang:​

  • 📋 Danh sách cuộc trò chuyện (bên trái): Hiển thị tất cả cuộc trò chuyện với tên người/ nhóm, tin nhắn cuối cùng và thời gian
  • 💬 Khung chat (bên phải): Hiển thị tin nhắn của cuộc trò chuyện đang chọn
  • ✍️ Ô nhập tin nhắn: Nơi gõ tin nhắn và gửi đi
  • 🎤 Nút ghi âm: Để gửi tin nhắn thoại

Cách sử dụng trên máy tính:​

  1. Vào trang tin nhắn → thấy danh sách cuộc trò chuyện bên trái
  2. Nhấp vào một cuộc trò chuyện → thấy tin nhắn bên phải
  3. Gõ tin nhắn và nhấn Enter hoặc nút Gửi
  4. Hoặc nhấn nút ghi âm để gửi tin nhắn thoại

Cách sử dụng trên điện thoại:​

  1. Vào trang tin nhắn → thấy khung chat và nút menu (☰)
  2. Nhấn nút menu → danh sách cuộc trò chuyện hiện ra
  3. Chọn cuộc trò chuyện → quay lại khung chat với tin nhắn mới
  4. Gửi tin nhắn như bình thường

3.3. Cấu trúc thông tin​

Thông tin một tin nhắn:​

// Tin nhắn đơn lẻ
interface Message {
  id: number | string;           // Mã số tin nhắn
  text: string;                  // Nội dung tin nhắn (nếu là tin nhắn chữ)
  variant: 'sent' | 'received';  // Tin nhắn gửi đi hay nhận về
  type: 'text' | 'audio';        // Loại tin nhắn: chữ hay thoại
  timestamp: number;             // Thời gian gửi
  duration?: number;             // Độ dài tin nhắn thoại (giây)
  audioBlob?: Blob | null;       // File âm thanh (nếu là tin nhắn thoại)
}

Thông tin một cuộc trò chuyện:​

// Cuộc trò chuyện (nhóm hoặc cá nhân)
interface Group {
  id: string;                    // Mã số cuộc trò chuyện
  name: string;                  // Tên người/nhóm
  avatar: string;                // Hình đại diện
  lastMessage: string;           // Tin nhắn cuối cùng
  time: number;                  // Thời gian tin nhắn cuối
  messages: Message[];           // Danh sách tất cả tin nhắn
}

3.4. Cách gửi tin nhắn (Hiện tại & Tương lai)​

Hiện tại (Dữ liệu mẫu):​

Khi người dùng gửi tin nhắn, hệ thống chỉ cập nhật trên màn hình mà không lưu vào máy chủ. Tin nhắn sẽ mất khi tải lại trang.

Tương lai (Kết nối thật):​

  1. Tin nhắn sẽ được gửi lên máy chủ và lưu trữ
  2. Người khác có thể nhận được tin nhắn ngay lập tức
  3. Tin nhắn không bị mất khi tải lại trang
  4. Có thể xem tin nhắn trên nhiều thiết bị

4. Yêu cầu về trải nghiệm người dùng​

4.1. Dễ sử dụng​

  • Giao diện quen thuộc: Giống các ứng dụng chat khác để người dùng dễ sử dụng
  • Phản hồi nhanh: Khi người dùng gửi tin nhắn, ứng dụng sẽ hiển thị trạng thái "Đang gửi..." để người dùng biết hệ thống đang xử lý.

4.2. Hoạt động tốt khi có nhiều tin nhắn​

  • Tải từng phần: Không tải tất cả tin nhắn cùng lúc để trang không bị chậm
  • Kết nối nhanh: Hệ thống sử dụng công nghệ kết nối real-time để nhận tin nhắn mới ngay lập tức

5. Những rủi ro có thể gặp và cách xử lý​

Rủi roMức độ ảnh hưởngKhả năng xảy raCách xử lý
Khi chuyển sang hệ thống thật, quản lý thông tin phức tạpCaoCaoSử dụng công cụ quản lý thông tin chuyên nghiệp và lưu trữ thông minh
Trang chậm khi có nhiều tin nhắn trong một cuộc trò chuyệnCaoTrung bìnhChỉ hiển thị tin nhắn đang thấy, tải thêm khi cần
Mất kết nối mạng khi đang gửi tin nhắnTrung bìnhTrung bìnhHiển thị "Không gửi được" và cho phép gửi lại khi có mạng

Tài liệu tham khảo: