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

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

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

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

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

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

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

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

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

ขั้นตอนที่ 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 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 เวลารอที่มีอยู่ของเราเพื่อแสดงเวลารอล่าสุดสำหรับผู้ใช้:

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

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

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

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

Firebase Cloud Messaging

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

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

WebSockets

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

บทสรุป

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

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

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

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

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

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

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

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