ดึงดูดลูกค้าแบบเรียลไทม์ด้วยเครื่องหมายขั้นสูงและ Firebase

Google Maps Platform ช่วยให้ลูกค้าพัฒนาประสบการณ์ที่ไม่เหมือนใครได้ด้วยการปรับแต่งการออกแบบภาพของเครื่องหมายบนแผนที่โดยใช้ เครื่องหมายขั้นสูง ในเอกสารนี้ เราจะสำรวจวิธีที่ลูกค้าสามารถก้าวไปอีกขั้นและสร้างเครื่องหมายที่เปลี่ยนแปลงแบบไดนามิกตามข้อมูลแบบเรียลไทม์

รูปภาพหลักแสดงแผนที่ Google Maps JS ที่มีซานฟรานซิสโกเป็นจุดศูนย์กลาง ตำแหน่งต่างๆ จะแสดงเครื่องหมายสีสันสดใสที่มีเนื้อหาว่า "2 นาที" หรือ "4 นาที" การระบายสีและเนื้อหาจะอัปเดตเมื่อเวลาผ่านไป

เครื่องหมายแผนที่เป็นเครื่องมือที่มีประโยชน์ในการมอบประสบการณ์การใช้งานแผนที่ที่สมบูรณ์แก่ผู้ใช้ แอตทริบิวต์ของเครื่องหมาย เช่น ขนาด สี และรูปร่าง สามารถสื่อถึงข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ที่ทำเครื่องหมายแต่ละแห่ง ในบางกรณี ข้อมูลเพิ่มเติมนี้อาจเปลี่ยนแปลงแบบไดนามิก และนักพัฒนาแอปอาจต้องการให้การแสดงภาพแผนที่อัปเดตอยู่เสมอเพื่อให้ผู้ใช้รู้สึกว่าข้อมูลเป็นปัจจุบัน

ในเอกสารนี้ เราจะใช้ตัวอย่างเพื่อประกอบการอธิบาย โดยสมมติว่าเครือร้านค้าปลีกต้องการใช้แผนที่เพื่อแสดงเวลาที่ต้องรอคิวในร้านให้ผู้ใช้ทราบ อย่างไรก็ตาม สถาปัตยกรรมเดียวกันนี้สามารถใช้ได้กับกรณีการใช้งานอื่นๆ อีกมากมาย ตัวอย่างเพิ่มเติมมีดังนี้

  • ความพร้อมให้บริการของห้องพักในโรงแรม: ในแผนที่ที่แสดงผลการค้นหาโรงแรม ความพร้อมให้บริการของห้องพักเป็นสัญญาณสำคัญที่กระตุ้นให้ ผู้ใช้จองโรงแรมได้เมื่อห้องพักเหลือน้อยลง
  • ความพร้อมให้บริการของที่จอดรถ: ในแผนที่ลานจอดรถ ให้ผู้ใช้ มั่นใจในการเลือกจุดหมายปลายทางที่มีที่จอดรถให้เมื่อเดินทางไปถึง
  • ร้านอาหารที่เปิด ใกล้ปิด และปิดแล้ว: ในแผนที่ที่แสดงผลการค้นหาร้านอาหาร ผู้ใช้ควรทราบว่าร้านอาหารอาจ ปิดเมื่อเดินทางไปถึง

โซลูชันเครื่องหมายขั้นสูงแบบไดนามิก

คุณสามารถสร้างแผนที่โดยใช้เครื่องหมายขั้นสูงเพื่อแสดงข้อมูลแบบไดนามิก ดังที่กล่าวไว้ก่อนหน้านี้ กรณีการใช้งานคือร้านค้าปลีกแบบเชนที่ใช้ประโยชน์จากระบบจัดการคิวชำระเงินเพื่อประมาณการและแสดงเวลาที่ต้องรอคิวให้ผู้ใช้ทราบ นี่คือสถาปัตยกรรมของแอปพลิเคชัน

แผนภาพสถาปัตยกรรมแสดงให้เห็นว่าผู้ใช้เข้าถึงเว็บแอปพลิเคชันอย่างไร โครงสร้างพื้นฐานของเว็บแอปพลิเคชันของ Google (GMP และ Firebase Cloud Functions) Firebase Cloud Functions เข้าถึงข้อมูลแบบเรียลไทม์จากแบ็กเอนด์ของลูกค้า

ขั้นตอนที่ 1 - กำหนดแอตทริบิวต์เพื่อกำหนดประสบการณ์การใช้งานภาพ

ขั้นตอนแรกคือการกำหนดพร็อพเพอร์ตี้ของสถานที่อย่างน้อย 1 รายการที่จะแสดงให้ผู้ใช้เห็น ในกรณีนี้ เราต้องการแสดงพร็อพเพอร์ตี้เพียงรายการเดียว นั่นคือเวลาที่ต้องรอคิวในปัจจุบันที่ร้านค้าแต่ละแห่ง ซึ่งวัดเป็นนาที

ขั้นตอนถัดไปคือการเลือกแอตทริบิวต์ของเครื่องหมายที่สอดคล้องกันอย่างน้อย 1 รายการเพื่อใส่คำอธิบายประกอบเวลาที่ต้องรอคิวในเครื่องหมายแผนที่ รายการแอตทริบิวต์ของตัวทำเครื่องหมายพร้อมใช้งานทันทีในข้อกำหนด PinElement นอกจากนี้ คุณยังใช้ HTML ที่กำหนดเองเพื่อตัวเลือกการปรับแต่งที่สมบูรณ์ยิ่งขึ้นได้ด้วย

สำหรับตัวอย่างนี้ เราจะใช้แอตทริบิวต์ของตัวทำเครื่องหมาย 2 รายการเพื่อแสดงข้อมูลเวลาที่ต้องรอคิว

  • สีของเครื่องหมาย: สีน้ำเงินสำหรับเวลาที่ต้องรอคิวน้อยกว่า 5 นาที และสีเหลืองสำหรับเวลาที่ต้องรอคิวนานกว่า 5 นาที
  • เนื้อหาของเครื่องหมาย (ต้องใช้เครื่องหมาย HTML ที่กำหนดเอง): เราจะใส่ เวลาที่ต้องรอคิวในปัจจุบันเป็นนาทีไว้ในเครื่องหมายเอง

ขั้นตอนที่ 2 - กำหนดค่าการเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์

คุณเชื่อมต่อกับแหล่งข้อมูลได้หลายวิธี และโซลูชันที่เหมาะสมจะขึ้นอยู่กับกรณีการใช้งานและโครงสร้างพื้นฐานทางเทคนิคของคุณ ในตัวอย่างนี้ เราใช้วิธีการดึงข้อมูล ซึ่งเราจะขอข้อมูลเวลาที่ต้องรอคิวที่อัปเดตแล้วโดยใช้คำขอ HTTP (REST) เป็นประจำ ในส่วนต่อไปนี้ คุณจะเห็นสถาปัตยกรรมทางเลือกที่ใช้วิธีการพุชข้อมูล

สถาปัตยกรรมของเราใช้ประโยชน์จาก Cloud Functions for Firebase เพื่อให้แอปพลิเคชันเข้าถึงข้อมูลเวลาที่ต้องรอคิวจากเซิร์ฟเวอร์ของเราได้ Cloud Functions ช่วยให้เรากำหนดฟังก์ชันแบ็กเอนด์เพื่อเข้าถึงและคำนวณข้อมูลนี้ได้ นอกจากนี้ เรายังรวม ไลบรารี Firebase ไว้ในเว็บแอปพลิเคชัน ซึ่งช่วยให้เราเข้าถึง Cloud Functionได้โดยใช้คำขอ HTTP

ขั้นตอนถัดไปคือการตรวจสอบว่าเราเก็บข้อมูลให้เป็นปัจจุบันสำหรับผู้ใช้ เราจึงตั้งค่าตัวจับเวลาโดยใช้ฟังก์ชัน setInterval ของ JavaScript ที่มีระยะหมดเวลา 30 วินาที ระบบจะทริกเกอร์ตัวจับเวลาทุกครั้ง และเราจะขอข้อมูลเวลาที่ต้องรอคิวที่อัปเดตแล้วตามที่อธิบายไว้ข้างต้น เมื่อได้รับข้อมูลใหม่แล้ว เราต้องรีเฟรชลักษณะที่ปรากฏของเครื่องหมายแผนที่ ขั้นตอนถัดไปจะอธิบายรายละเอียดวิธีทำการเปลี่ยนแปลงดังกล่าว

ขั้นตอนที่ 3 - แสดงเครื่องหมายแผนที่

ตอนนี้เราสามารถใช้เครื่องหมายขั้นสูงเพื่อแสดงเครื่องหมายที่จัดรูปแบบไว้บนแผนที่ได้แล้ว เครื่องหมายขั้นสูงสามารถแสดงบนแผนที่ที่สร้างโดย Maps JavaScript API ของแพลตฟอร์ม Google Maps เมื่อใช้เครื่องหมายขั้นสูง โปรดตรวจสอบว่าได้ใส่พารามิเตอร์รหัสแผนที่ในคำขอแผนที่ JS แล้ว

ในข้อมูลโค้ดที่แสดงด้านล่าง เราจะสร้างเครื่องหมายและกำหนดเนื้อหาของเครื่องหมายโดยการสร้างองค์ประกอบ 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]
    }));

ขั้นตอนสุดท้ายคือการอัปเดตข้อความเครื่องหมายและการจัดรูปแบบ CSS สำหรับร้านค้าแต่ละแห่ง โค้ดด้านล่างจะอ่านข้อมูลเวลาที่ต้องรอคิวที่อัปเดตแล้วและกำหนดการจัดรูปแบบให้กับหมุดของร้านค้าแต่ละแห่งตามเวลาที่ต้องรอคิว

// 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";

ตอนนี้แผนที่จะใช้ API เวลาที่ต้องรอคิวที่มีอยู่เพื่อแสดงเวลาที่ต้องรอคิวล่าสุดให้ผู้ใช้ทราบ

รูปภาพหลักแสดงแผนที่ Google Maps JS ที่มีซานฟรานซิสโกเป็นจุดศูนย์กลาง สถานที่หลายแห่งแสดงเครื่องหมายสีสันสดใสซึ่งมีเนื้อหาว่า "2 นาที" หรือ "4 นาที" การระบายสีและเนื้อหาจะอัปเดตเมื่อเวลาผ่านไป

วิธีอื่นในการเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์

คุณเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์ได้หลายวิธี ด้านล่างนี้ เราจะดูตัวเลือกทางเลือก 2 รายการ ได้แก่ Firebase Cloud Messaging และ WebSocket ไม่ว่าคุณจะเลือกใช้วิธีใด โปรดพิจารณาปัจจัยด้านล่างเพื่อให้เครื่องมือแผนที่ยังคงทำงานได้อย่างมีประสิทธิภาพ

  • ความถี่ในการอัปเดต
  • ปริมาณข้อมูล
  • จำนวนเครื่องหมายในมุมมองแผนที่
  • ความสามารถของฮาร์ดแวร์และเบราว์เซอร์

Firebase Cloud Messaging

Firebase Cloud Messaging เป็น วิธีการพุชข้อมูล เมื่อใช้วิธีนี้ คุณจะต้องส่งการอัปเดตไปยังแอปพลิเคชันแผนที่ทุกครั้งที่ข้อมูลเวลาที่ต้องรอคิวได้รับการอัปเดตในแบ็กเอนด์ ข้อความอัปเดตจะทริกเกอร์ฟังก์ชันเรียกกลับที่มีจุดประสงค์เพื่ออัปเดตลักษณะที่ปรากฏและเนื้อหาของเครื่องหมาย

สิ่งหนึ่งที่ควรพิจารณาก่อนเลือกสถาปัตยกรรมนี้คือต้องมีการเชื่อมต่อเซิร์ฟเวอร์แบบถาวรสำหรับเบราว์เซอร์แต่ละรายการที่เรียกใช้แอปพลิเคชันแผนที่ ด้วยเหตุนี้ การเรียกใช้จึงอาจมีค่าใช้จ่ายสูงกว่า และอาจมีความเสถียรน้อยกว่าในกรณีที่เกิดปัญหาการเชื่อมต่อ

WebSockets

WebSockets เป็นอีกวิธีการพุชข้อมูลเพื่อเก็บข้อมูลให้เป็นปัจจุบัน เช่นเดียวกับสถานการณ์ก่อนหน้านี้ คุณสามารถใช้ WebSocket เพื่อสร้างการเชื่อมต่อแบบถาวรระหว่างแบ็กเอนด์กับแอปพลิเคชันแผนที่ ประโยชน์ด้านการทำงานของวิธีการนี้คล้ายกับ Firebase Cloud Messaging แต่คุณอาจต้องดำเนินการเพิ่มเติมเพื่อกำหนดค่าโครงสร้างพื้นฐานที่จำเป็น

บทสรุป

นักพัฒนาแอปสามารถรวมแหล่งข้อมูลแบบเรียลไทม์กับเครื่องหมายขั้นสูงเพื่อสร้างการแสดงภาพที่ใช้งานง่ายใน Google Maps คุณเชื่อมต่อแหล่งข้อมูลเหล่านี้ได้หลายวิธี ทั้งนี้ขึ้นอยู่กับข้อกำหนดของแผนที่ ฮาร์ดแวร์และเบราว์เซอร์ของผู้ใช้ รวมถึงปริมาณข้อมูล จากนั้นคุณสามารถใช้ข้อมูลที่ผสานรวมเพื่อควบคุมลักษณะที่ปรากฏของเครื่องหมายขั้นสูงแบบเรียลไทม์ ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานแบบไดนามิก

ขั้นตอนถัดไป

อ่านเพิ่มเติม

ผู้ร่วมให้ข้อมูล

ผู้เขียนหลัก

Jim Leflar | Google Maps Platform วิศวกรโซลูชัน

John Branigan | วิศวกรลูกค้าอาวุโสของ Google Cloud Platform

Steve Barrett | วิศวกรโซลูชันของแพลตฟอร์ม Google Maps