Skip to main content

[DDD] Thiết kế Chi tiết Trang Tìm kiếm nâng cao

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

Tài liệu này mô tả cách thiết kế Trang Bản đồ - nơi người dùng có thể tìm kiếm và xem bất động sản trực quan trên bản đồ. Trang này hoạt động giống như Google Maps, cho phép người dùng tìm kiếm theo địa chỉ, xem vị trí bất động sản, và so sánh các khu vực khác nhau một cách dễ dàng.

1. Tổng quan (Overview)​

1.1. Tại sao cần trang bản đồ?​

Trong lĩnh vực bất động sản, việc chỉ xem danh sách bất động sản thường không đủ để người dùng đưa ra quyết định tốt. Họ cần:

  • Hình dung vị trí thực tế: Xem bất động sản nằm ở đâu trên bản đồ
  • So sánh khu vực: Đánh giá các khu vực khác nhau một cách trực quan
  • Đánh giá tiện ích: Xem trường học, bệnh viện, siêu thị gần đó
  • Tính toán khoảng cách: Đo thời gian di chuyển đến các địa điểm quan trọng
  • Khám phá môi trường: Hiểu về giao thông, an ninh, tiện ích xung quanh

Trang bản đồ giúp người dùng đưa ra quyết định mua, thuê hoặc đầu tư bất động sản một cách tự tin và chính xác hơn.

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

Mục tiêu (Goals)​

  • Hiển thị bản đồ tương tác: Bản đồ Google Maps với khả năng zoom, di chuyển
  • Tìm kiếm theo địa chỉ: Ô tìm kiếm với gợi ý địa chỉ tự động
  • Danh sách bất động sản: Hiển thị danh sách bên cạnh bản đồ
  • Đánh dấu vị trí: Hiển thị bất động sản bằng các điểm đánh dấu trên bản đồ
  • Xem chi tiết: Hiển thị đầy đủ các thông tin của bất động sản

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

  • Vẽ hoặc đo đạc trên bản đồ - sẽ làm sau
  • Lọc phức tạp ngay trên bản đồ - sẽ làm sau
  • Chế độ xem phố (Street View) - không cần thiết ngay

2. Cách hoạt động của trang bản đồ​

Trang bản đồ hoạt động như một "cầu nối" giữa người dùng và hệ thống bản đồ, kết hợp với dữ liệu bất động sả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:​

  • 🗺️ Bản đồ Google Maps: Chiếm phần lớn màn hình, hiển thị các điểm đánh dấu bất động sản
  • 🔍 Ô tìm kiếm: Ở đầu trang, để tìm kiếm địa chỉ hoặc khu vực
  • 📋 Danh sách bất động sản: Bên cạnh bản đồ, hiển thị danh sách các bất động sản trong khu vực
  • 📍 Điểm đánh dấu: Các điểm trên bản đồ đại diện cho bất động sản
  • 👁️ Thông tin chi tiết: Hiển thị modal thông tin chi tiết

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

  1. Xem bản đồ: Vào trang bản đồ → thấy bản đồ với các điểm đánh dấu
  2. Tìm kiếm: Gõ địa chỉ vào ô tìm kiếm → chọn từ gợi ý → bản đồ di chuyển đến vị trí mới
  3. Khám phá: Kéo, zoom bản đồ để xem các khu vực khác
  4. Xem chi tiết: Click vào điểm đánh dấu hoặc item trong danh sách

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

  1. Xem bản đồ: Vào trang bản đồ → thấy bản đồ chiếm toàn màn hình
  2. Tìm kiếm: Nhấn nút tìm kiếm → gõ địa chỉ → chọn từ gợi ý
  3. Xem danh sách: Nhấn nút danh sách → thấy danh sách BĐS
  4. Xem chi tiết: Nhấn vào item trong danh sách hoặc điểm đánh dấu

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

Thông tin bất động sản trên bản đồ:​

// Thông tin BĐS hiển thị trên bản đồ
interface PropertyOnMap {
  id: string;                    // Mã số BĐS
  title: string;                 // Tiêu đề BĐS
  price: number;                 // Giá
  area: number;                  // Diện tích
  address: string;               // Địa chỉ
  coordinates: {                 // Tọa độ địa lý
    lat: number;                 // Vĩ độ
    lng: number;                 // Kinh độ
  };
  images: string[];              // Hình ảnh
  status: 'sale' | 'rent';       // Trạng thái: bán/thuê
  propertyType: string;          // Loại BĐS: nhà, căn hộ, đất...
}

3.4. Cách tìm kiếm và lọc (Hiện tại & Tương lai)​

Hiện tại (Chức năng cơ bản):​

  1. Tìm kiếm theo địa chỉ: Gõ địa chỉ và chọn từ gợi ý
  2. Di chuyển bản đồ: Kéo, zoom để xem các khu vực khác
  3. Xem danh sách: Danh sách tự động cập nhật theo khu vực hiển thị
  4. Xem chi tiết: Xem thông tin bất động sản

Tương lai (Chức năng nâng cao):​

  1. Lọc theo tiêu chí: Giá, diện tích, loại BĐS, số phòng ngủ
  2. Lọc theo tiện ích: Trường học, bệnh viện, siêu thị gần đó
  3. Đo khoảng cách: Tính thời gian di chuyển đến các địa điểm
  4. Lưu tìm kiếm: Lưu các tìm kiếm yêu thích

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 Google Maps để người dùng dễ sử dụng
  • Tìm kiếm nhanh: Gợi ý địa chỉ tự động khi gõ
  • Phản hồi nhanh: Bản đồ di chuyển ngay khi chọn địa chỉ
  • Thông tin rõ ràng: Điểm đánh dấu dễ nhận biết và thông tin dễ đọc

4.2. Hoạt động tốt khi có nhiều dữ liệu​

  • Tải từng phần: Chỉ tải BĐS trong khu vực đang xem
  • Gom nhóm điểm đánh dấu: Khi có nhiều BĐS, gom thành nhóm để dễ nhìn (có thể phát triển nếu cần)
  • Danh sách thông minh: Hiển thị danh sách theo thứ tự phù hợp

4.3. Hoạt động tốt khi mạng chậm​

  • Tải từng bước: Tải bản đồ trước, sau đó tải dữ liệu BĐS
  • Thông báo trạng thái: Cho người dùng biết khi đang tải
  • Thử lại khi lỗi: Tự động thử lại khi mạng bị lỗi

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ý
Chi phí Google Maps API caoCaoCaoTối ưu số lần gọi API, theo dõi chi phí chặt chẽ
Bản đồ chậm khi có nhiều điểm đánh dấuCaoTrung bìnhGom nhóm điểm đánh dấu, chỉ hiển thị trong khu vực đang xem
Google Maps không hoạt độngTrung bìnhThấpHiển thị thông báo lỗi và hướng dẫn thử lại
Dữ liệu BĐS không chính xácTrung bìnhTrung bìnhKiểm tra và cập nhật dữ liệu thường xuyên
Mạng chậm làm bản đồ không tải đượcTrung bìnhTrung bìnhHiển thị trạng thái tải và cho phép thử lại

Tài liệu tham khảo: