Thu hút khách hàng theo thời gian thực bằng Điểm đánh dấu nâng cao và Firebase

Nền tảng Google Maps giúp khách hàng phát triển các trải nghiệm độc đáo bằng cách tuỳ chỉnh thiết kế hình ảnh của điểm đánh dấu trên bản đồ bằng Điểm đánh dấu nâng cao. Trong tài liệu này, chúng ta sẽ khám phá cách khách hàng có thể tiến thêm một bước và tạo các điểm đánh dấu thay đổi linh động dựa trên dữ liệu theo thời gian thực.

Điểm đánh dấu trên bản đồ là một công cụ hữu ích để mang đến trải nghiệm bản đồ phong phú cho người dùng. Các thuộc tính của điểm đánh dấu như kích thước, màu sắc và hình dạng có thể truyền tải thêm thông tin về từng vị trí được đánh dấu. Trong một số trường hợp, thông tin bổ sung này có thể thay đổi một cách linh động và nhà phát triển có thể muốn hình ảnh bản đồ cập nhật để duy trì cảm giác mới mẻ cho người dùng.

Trong bài viết này, chúng tôi sử dụng một ví dụ để minh hoạ: một chuỗi bán lẻ muốn sử dụng bản đồ để hiển thị thời gian chờ tại cửa hàng cho người dùng. Tuy nhiên, bạn cũng có thể sử dụng cùng một cấu trúc này cho nhiều trường hợp sử dụng khác. Sau đây là một số ý tưởng khác:

Thử ngay: Truy cập vào Google Cloud Console và dùng thử API Maps JavaScript .

• Số phòng còn trống của khách sạn: trên bản đồ cho thấy kết quả tìm kiếm khách sạn, thông tin mới nhất về số phòng còn trống là một tín hiệu quan trọng có thể khuyến khích người dùng đặt phòng khách sạn khi quỹ phòng giảm dần.
• Tình trạng còn chỗ đỗ xe: trên bản đồ bãi đỗ xe, giúp người dùng yên tâm chọn một điểm đến có chỗ đỗ xe khi họ đến nơi.
• Nhà hàng đang mở, sắp đóng cửa và đã đóng cửa: trên bản đồ hiển thị kết quả tìm kiếm nhà hàng, người dùng cần biết liệu nhà hàng có thể đã đóng cửa khi họ đến hay không.

Giải pháp Dynamic Advanced Markers

Bây giờ, hãy cùng tìm hiểu cách tạo bản đồ bằng các điểm đánh dấu nâng cao để trực quan hoá dữ liệu động. Như đã đề cập trước đó, trường hợp sử dụng là một chuỗi cửa hàng bán lẻ tận dụng hệ thống quản lý hàng đợi thanh toán để ước tính và trực quan hoá thời gian chờ cho người dùng. Đây là cấu trúc ứng dụng:

Bước 1 – Xác định các thuộc tính để xác định trải nghiệm hình ảnh

Bước đầu tiên là xác định một hoặc nhiều thuộc tính vị trí để hiển thị cho người dùng. Trong trường hợp này, chúng ta chỉ muốn hiển thị một thuộc tính: thời gian chờ hiện tại tại mỗi vị trí cửa hàng, được tính bằng phút.

Bước tiếp theo là chọn một hoặc nhiều thuộc tính điểm đánh dấu tương ứng để chú thích trực quan thời gian chờ trên điểm đánh dấu bản đồ. Danh sách các thuộc tính điểm đánh dấu có sẵn trong quy cách PinElement. Bạn cũng có thể sử dụng HTML tuỳ chỉnh để có thêm nhiều lựa chọn tuỳ chỉnh phong phú.

Trong ví dụ này, chúng ta sẽ sử dụng hai thuộc tính điểm đánh dấu để trực quan hoá dữ liệu thời gian chờ:

• Màu điểm đánh dấu: xanh dương cho thời gian chờ dưới 5 phút, vàng cho thời gian chờ trên 5 phút
• Nội dung đánh dấu (yêu cầu điểm đánh dấu HTML tùy chỉnh): chúng tôi sẽ bao gồm thời gian chờ hiện tại tính bằng phút vào chính điểm đánh dấu

Bước 2 – Định cấu hình kết nối với nguồn dữ liệu theo thời gian thực

Có nhiều cách để kết nối với nguồn dữ liệu và giải pháp phù hợp phụ thuộc vào trường hợp sử dụng và cơ sở hạ tầng kỹ thuật của bạn. Trong ví dụ này, chúng tôi đang sử dụng phương pháp lấy dữ liệu, trong đó chúng tôi thường xuyên yêu cầu dữ liệu thời gian chờ cập nhật qua yêu cầu HTTP (REST). Trong các phần sau, bạn sẽ thấy các cấu trúc thay thế tận dụng các phương pháp đẩy.

Để cho phép ứng dụng truy cập vào dữ liệu thời gian chờ từ máy chủ, cấu trúc của chúng tôi tận dụng Cloud Functions cho Firebase. Cloud Functions cho phép chúng ta xác định một hàm phụ trợ để truy cập và tính toán dữ liệu này. Chúng ta cũng đưa thư viện Firebase vào ứng dụng web để có thể truy cập vào Hàm trên đám mây thông qua yêu cầu HTTP.

Bước tiếp theo là đảm bảo chúng ta luôn làm mới dữ liệu cho người dùng. Để làm việc này, chúng ta thiết lập một bộ hẹn giờ bằng hàm setInterval của JavaScript với thời gian chờ là 30 giây. Mỗi khi bộ hẹn giờ được kích hoạt, chúng tôi sẽ yêu cầu cập nhật dữ liệu thời gian chờ như mô tả ở trên. Khi nhận được dữ liệu mới, chúng tôi phải làm mới giao diện của điểm đánh dấu bản đồ. Bước tiếp theo sẽ trình bày chi tiết cách thực hiện những thay đổi đó.

Bước 3 – Kết xuất điểm đánh dấu trên bản đồ

Giờ đây, chúng ta có thể sử dụng Điểm đánh dấu nâng cao để hiển thị các điểm đánh dấu được tạo kiểu trên bản đồ. Điểm đánh dấu nâng cao có thể hiển thị trên bản đồ được tạo bằng API Maps JavaScript của Nền tảng Google Maps. Khi sử dụng điểm đánh dấu nâng cao, hãy nhớ đưa thông số Mã bản đồ vào yêu cầu bản đồ JS.

Trong đoạn mã được hiển thị bên dưới, chúng tôi tạo điểm đánh dấu và xác định nội dung của điểm đánh dấu bằng cách tạo phần tử div HTML:

// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");

// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
      map,
      position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
      content: storeWaitLabels[store_index]
    }));

Bước cuối cùng là cập nhật văn bản điểm đánh dấu và kiểu CSS cho từng cửa hàng. Đoạn mã dưới đây đọc dữ liệu về thời gian chờ đã cập nhật và gán kiểu cho từng ghim của cửa hàng dựa trên thời gian chờ:

// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
     if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
     else storeWaitLabels[store_index].className = "wait-under-5";

Bản đồ hiện sử dụng API thời gian chờ hiện có của chúng tôi để hiển thị thời gian chờ mới nhất cho người dùng:

Các cách thay thế để kết nối với nguồn dữ liệu theo thời gian thực

Có nhiều cách để kết nối với nguồn dữ liệu theo thời gian thực. Dưới đây, chúng ta sẽ xem xét hai phương án thay thế là Firebase Cloud Messaging và Websockets. Dù bạn chọn phương pháp tiếp cận nào, hãy chắc chắn xem xét các yếu tố bên dưới để công cụ bản đồ của bạn vẫn hoạt động tốt:

• Tần suất cập nhật
• Khối lượng dữ liệu
• Số lượng điểm đánh dấu trong chế độ xem bản đồ
• Khả năng của phần cứng và trình duyệt

Giải pháp gửi thông báo qua đám mây của Firebase

Giải pháp gửi thông báo qua đám mây của Firebase là một phương pháp đẩy. Khi sử dụng phương pháp này, bạn sẽ gửi thông tin cập nhật đến ứng dụng bản đồ mỗi khi dữ liệu thời gian chờ được cập nhật trên phần phụ trợ. Thông báo cập nhật sẽ kích hoạt một hàm gọi lại có mục đích là cập nhật giao diện và nội dung của điểm đánh dấu.

Một điều cần cân nhắc trước khi chọn cấu trúc này là bạn phải duy trì kết nối máy chủ liên tục cho mỗi trình duyệt chạy ứng dụng bản đồ. Vì lý do đó, việc chạy chương trình có thể tốn nhiều chi phí hơn và có thể kém hiệu quả hơn trong các vấn đề về khả năng kết nối.

WebSockets

WebSockets là một phương pháp khác dựa trên phương thức đẩy để luôn cập nhật dữ liệu. Tương tự như trường hợp trước, bạn có thể sử dụng WebSockets để thiết lập kết nối liên tục giữa chương trình phụ trợ và ứng dụng bản đồ của mình. Những lợi ích chức năng của phương pháp này về bản chất tương tự như Giải pháp gửi thông báo qua đám mây của Firebase, tuy nhiên, bạn có thể phải thực hiện thêm một số thao tác để định cấu hình cơ sở hạ tầng cần thiết.

Kết luận

Nhà phát triển có thể kết hợp các nguồn dữ liệu theo thời gian thực với Điểm đánh dấu nâng cao để tạo hình ảnh trực quan trên Google Maps. Có một số cách để kết nối các nguồn dữ liệu này tuỳ thuộc vào yêu cầu của bản đồ, phần cứng và trình duyệt của người dùng cũng như dung lượng dữ liệu. Sau đó, bạn có thể sử dụng dữ liệu tích hợp để kiểm soát giao diện của Điểm đánh dấu nâng cao theo thời gian thực, mang đến trải nghiệm linh động cho người dùng.

Hành động tiếp theo

Tài liệu đọc thêm:

• Bút đánh dấu nâng cao – Trung tâm nhà phát triển của Google
• Tạo điểm đánh dấu bằng HTML tuỳ chỉnh
• Chức năng đám mây dành cho Firebase
• Gửi thông báo qua đám mây của Firebase

Người đóng góp

Tác giả chính:

Jim Leflar | Kỹ sư giải pháp nền tảng Google Maps

John Branigan | Kỹ sư khách hàng cấp cao của Google Cloud Platform

Steve Barrett | Kỹ sư giải pháp Nền tảng Google Maps