Skip to main content

[DDD] Thiết kế Chi tiết Trang Hồ sơ người dùng

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

Tài liệu này mô tả cách thiết kế Trang Hồ sơ người dùng - nơi người dùng có thể xem và cập nhật thông tin cá nhân của mình. Trang này hoạt động giống như trang cài đặt cá nhân trong các ứng dụng quen thuộc như Facebook, Instagram, cho phép người dùng quản lý thông tin cơ bản như tên, email, địa chỉ và ảnh đại diện.

1. Tổng quan (Overview)​

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

Trong ứng dụng bất động sản, thông tin cá nhân chính xác rất quan trọng vì:

  • Người mua cần cung cấp thông tin liên hệ để nhận tư vấn và xem nhà
  • Người bán cần thông tin đầy đủ để tạo niềm tin với khách hàng
  • Hệ thống cần thông tin chính xác để gửi thông báo và hỗ trợ
  • Bảo mật cần xác minh danh tính người dùng

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

Mục tiêu (Goals)​

  • Xem thông tin cá nhân: Hiển thị ảnh đại diện, tên, email, số điện thoại hiện tại
  • Chỉnh sửa thông tin: Cho phép thay đổi tên, email, địa chỉ, ảnh đại diện
  • Kiểm tra lỗi: Hiển thị thông báo lỗi khi nhập sai thông tin
  • Lưu thay đổi: Cập nhật thông tin mới vào hệ thống
  • Hiển thị trạng thái tải: Cho người dùng biết khi hệ thống đang xử lý

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

  • Thay đổi mật khẩu - (ở trang cài đặt)
  • Cài đặt thông báo - (phát triển sau)

2. Cách hoạt động của trang hồ sơ​

Trang hồ sơ hoạt động như một "cầu nối" giữa người dùng và hệ thống lưu trữ thông tin. 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:​

  • 👤 Ảnh đại diện: Hiển thị ảnh hiện tại và nút thay đổi
  • 📝 Biểu mẫu thông tin: Các ô nhập liệu cho tên, email, địa chỉ
  • 📱 Thông tin liên hệ: Số điện thoại (chỉ xem, không sửa được)
  • 💾 Nút lưu: Để lưu các thay đổi
  • ⚠️ Thông báo lỗi: Hiển thị khi có lỗi trong thông tin

Cách sử dụng:​

  1. Xem thông tin: Vào trang hồ sơ → thấy tất cả thông tin hiện tại
  2. Chỉnh sửa: Nhấp vào ô muốn sửa → gõ thông tin mới
  3. Lưu thay đổi: Nhấn nút "Lưu thay đổi" → chờ thông báo thành công
  4. Thay đổi ảnh: Nhấn vào "ảnh đại diện" → chọn ảnh từ máy tính để cập nhật ảnh đại diện mới

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

Thông tin người dùng:​

// Thông tin cá nhân
interface UserProfile {
  username: string;              // Tên đăng nhập
  email: string;                 // Email liên hệ
  email_verified: boolean;       // Email đã xác thực chưa
  phone_number: string;          // Số điện thoại
  phone_number_verified: boolean; // SĐT đã xác thực chưa
  name: string;                  // Tên đầy đủ
  family_name: string;           // Họ
  given_name: string;            // Tên
  picture: string;               // Đường dẫn ảnh đại diện
  role: string;                  // Vai trò trong hệ thống
  country: string;               // Quốc gia
  city: string;                  // Thành phố
  zipCode: string;               // Mã bưu điện
}

3.4. Kiểm tra lỗi thông tin​

Các quy tắc kiểm tra:​

  • Họ và Tên: Không được để trống
  • Email: Phải có định dạng email hợp lệ (có @ và domain)
  • Quốc gia/Thành phố: Chỉ được chứa chữ cái và khoảng trắng
  • Mã bưu điện: Phải là số có từ 5-10 chữ số
  • Ảnh đại diện: Phải có kích thước dưới 5MB và định dạng JPG/PNG

Cách hiển thị lỗi:​

  • Hiển thị thông báo đỏ ngay dưới ô có lỗi
  • Nút "Lưu" bị vô hiệu hóa khi có lỗi
  • Hiển thị toast thông báo khi lưu thành công/thất bại

3.5. Cách lưu thông tin (Hiện tại & Tương lai)​

Hiện tại (Kết nối thật):​

  1. Thông tin được gửi lên máy chủ và lưu trữ
  2. Người dùng nhận thông báo thành công/thất bại
  3. Thông tin được cập nhật ngay lập tức trên màn hình
  4. Có thể xem thông tin trên nhiều thiết bị

Tương lai (Cải tiến):​

  1. Tự động lưu khi người dùng thay đổi thông tin
  2. Lưu tạm thời khi mất mạng
  3. Đồng bộ thông tin với các ứng dụng khác

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 trang cài đặt cá nhân khác
  • Phản hồi nhanh: Hiển thị "Đang tải..." và "Đang lưu..." khi cần
  • Thông báo rõ ràng: Lỗi hiển thị ngay tại thông tin đang lỗi

4.2. Bảo mật và an toàn​

  • Thông tin nhạy cảm: Số điện thoại không thể sửa (cần xác thực riêng)
  • Kiểm tra dữ liệu: Tất cả thông tin được kiểm tra trước khi lưu
  • Bảo vệ thông tin: Dữ liệu được mã hóa khi gửi lên máy chủ

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ý
Người dùng nhập thông tin saiTrung bìnhCaoKiểm tra lỗi ngay khi nhập và hiển thị hướng dẫn
Mất kết nối mạng khi đang lưuTrung bìnhTrung bìnhHiển thị "Lưu tạm thời" và gửi lại khi có mạng
Ảnh đại diện quá lớn hoặc sai định dạngThấpTrung bìnhKiểm tra kích thước và định dạng trước khi tải
Thông tin bị lộ do lỗi bảo mậtCaoThấpMã hóa dữ liệu và kiểm tra bảo mật thường xuyên
Hệ thống chậm khi có nhiều người dùngTrung bìnhThấpTối ưu hóa hiệu suất và mở rộng hệ thống

Tài liệu tham khảo: