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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตอนนี้เราใช้เครื่องหมายขั้นสูงเพื่อแสดงผลเครื่องหมายที่มีสไตล์บนแผนที่ได้แล้ว เครื่องหมายขั้นสูงสามารถแสดงบนแผนที่ที่สร้างโดย Maps JavaScript API ของ Google Maps Platform เมื่อใช้เครื่องหมายขั้นสูง โปรดตรวจสอบว่าได้ใส่พารามิเตอร์รหัสแผนที่ในคำขอแผนที่ 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 สำหรับร้านค้าแต่ละแห่ง โค้ดด้านล่างจะอ่านข้อมูลเวลารอที่อัปเดตแล้ว และกำหนดการจัดรูปแบบให้กับ PIN ของร้านค้าแต่ละร้านตามเวลารอดังนี้

// 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 และ Websockets ไม่ว่าคุณจะเลือกแนวทางใดก็ตาม อย่าลืมพิจารณาปัจจัยต่อไปนี้เพื่อให้เครื่องมือแผนที่มีประสิทธิภาพอยู่เสมอ

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

Firebase Cloud Messaging

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

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

WebSockets

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

บทสรุป

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

การดำเนินการถัดไป

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

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

ผู้แต่งหลัก:

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

John Branigan | วิศวกรลูกค้าของ Google Cloud Platform Sr.

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