অ্যাডভান্সড মার্কারের সাথে রিয়েল টাইমে গ্রাহকদের জড়িত করুন & ফায়ারবেস

Google মানচিত্র প্ল্যাটফর্ম গ্রাহকদের উন্নত মার্কার ব্যবহার করে তাদের মানচিত্র মার্কারগুলির ভিজ্যুয়াল ডিজাইন কাস্টমাইজ করে অনন্য অভিজ্ঞতা বিকাশ করতে সক্ষম করে৷ এই নথিতে আমরা অন্বেষণ করব কীভাবে গ্রাহকরা আরও এক ধাপ এগিয়ে যেতে পারেন এবং মার্কার তৈরি করতে পারেন যা রিয়েল-টাইম ডেটার উপর ভিত্তি করে গতিশীলভাবে পরিবর্তিত হয়।

নায়কের ছবিটি সান ফ্রান্সিসকোকে কেন্দ্র করে একটি Google Maps JS মানচিত্র দেখায়। বেশ কয়েকটি অবস্থান রঙিন মার্কার প্রদর্শন করে যার বিষয়বস্তু '2 মিনিট', '4 মিনিট' বলে

ম্যাপ মার্কারগুলি ব্যবহারকারীদের সমৃদ্ধ ম্যাপিং অভিজ্ঞতা প্রদানের জন্য একটি দরকারী টুল। মার্কার বৈশিষ্ট্য যেমন আকার, রঙ এবং আকৃতি প্রতিটি চিহ্নিত অবস্থান সম্পর্কে অতিরিক্ত তথ্য জানাতে পারে। কিছু ক্ষেত্রে, এই অতিরিক্ত তথ্য গতিশীলভাবে পরিবর্তিত হতে পারে এবং বিকাশকারী ব্যবহারকারীর জন্য সতেজতা বজায় রেখে মানচিত্রের ভিজ্যুয়ালাইজেশন আপডেট করতে চাইতে পারে।

এই নিবন্ধে, আমরা উদাহরণের জন্য একটি উদাহরণ ব্যবহার করি: একটি খুচরা চেইন ব্যবহারকারীদের জন্য অপেক্ষার সময়গুলিকে সঞ্চয় করার জন্য একটি মানচিত্র ব্যবহার করতে চায়৷ যাইহোক, এই একই স্থাপত্য অন্যান্য অনেক ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে। এখানে কয়েকটি অতিরিক্ত ধারণা রয়েছে:

  • হোটেল রুম প্রাপ্যতা : হোটেল অনুসন্ধানের ফলাফল দেখানো একটি মানচিত্রে, রুমের প্রাপ্যতার সতেজতা একটি গুরুত্বপূর্ণ সংকেত যা ব্যবহারকারীদের ইনভেন্টরি কমে যাওয়ার সাথে সাথে একটি হোটেলের জন্য সংরক্ষণ করতে উত্সাহিত করতে পারে৷
  • পার্কিং স্পেস প্রাপ্যতা : পার্কিং লটের মানচিত্রে, ব্যবহারকারীদের একটি গন্তব্য নির্বাচন করার জন্য আত্মবিশ্বাস দিন যেখানে তারা পৌঁছালে তাদের জন্য একটি স্থান থাকবে।
  • রেস্তোরাঁ খোলা, শীঘ্রই বন্ধ এবং বন্ধ : রেস্তোরাঁর অনুসন্ধানের ফলাফলগুলি দেখানো একটি মানচিত্রে, এটি গুরুত্বপূর্ণ যে ব্যবহারকারীরা সচেতন হন যে কোনো রেস্তোঁরা এসে পৌঁছলে বন্ধ হয়ে যেতে পারে।

ডায়নামিক অ্যাডভান্সড মার্কার সলিউশন

এখন চলুন গতিশীল ডেটা কল্পনা করতে উন্নত মার্কার ব্যবহার করে একটি মানচিত্র তৈরি করা যাক। যেমনটি আগেই উল্লেখ করা হয়েছে, ব্যবহার কেস হল খুচরা দোকানগুলির একটি চেইন যা তাদের চেক-আউট কিউ ম্যানেজমেন্ট সিস্টেম ব্যবহার করে ব্যবহারকারীদের জন্য অপেক্ষার সময় অনুমান এবং কল্পনা করতে। এটি অ্যাপ্লিকেশন আর্কিটেকচার::

একটি আর্কিটেকচার ডায়াগ্রাম ব্যাখ্যা করে যে ব্যবহারকারী ওয়েব অ্যাপ্লিকেশন অ্যাক্সেস করছেন। ওয়েব অ্যাপ্লিকেশন Google পরিকাঠামো (GMP এবং Firebase ক্লাউড ফাংশন)। Firebase ক্লাউড ফাংশন গ্রাহকের ব্যাকএন্ড থেকে লাইভ ডেটা অ্যাক্সেস করে।

ধাপ 1 - চাক্ষুষ অভিজ্ঞতা সংজ্ঞায়িত করার জন্য গুণাবলী নির্ধারণ করুন

প্রথম ধাপ হল ব্যবহারকারীদের দেখানোর জন্য এক বা একাধিক অবস্থানের বৈশিষ্ট্য নির্ধারণ করা। এই ক্ষেত্রে, আমরা শুধুমাত্র একটি সম্পত্তি দেখতে চাই: প্রতিটি দোকানের অবস্থানে বর্তমান অপেক্ষার সময়, মিনিটে পরিমাপ করা হয়।

পরবর্তী ধাপ হল মানচিত্র মার্কারে অপেক্ষার সময়কে দৃশ্যত টীকা করতে এক বা একাধিক সংশ্লিষ্ট মার্কার বৈশিষ্ট্য নির্বাচন করা। চিহ্নিতকারী বৈশিষ্ট্যগুলির তালিকা PinElement স্পেসিফিকেশনে বাক্সের বাইরে উপলব্ধ। আপনি আরও সমৃদ্ধ কাস্টমাইজেশন বিকল্পের জন্য কাস্টম HTML ব্যবহার করতে পারেন।

এই উদাহরণের জন্য, আমরা অপেক্ষার সময় ডেটা কল্পনা করতে দুটি মার্কার বৈশিষ্ট্য ব্যবহার করব:

  • মার্কার রঙ : 5 মিনিটের কম অপেক্ষা সময়ের জন্য নীল, 5 মিনিটের বেশি সময়ের জন্য হলুদ
  • মার্কার বিষয়বস্তু (কাস্টম এইচটিএমএল মার্কার প্রয়োজন) : আমরা মার্কারেই বর্তমান অপেক্ষার সময় মিনিটের মধ্যে অন্তর্ভুক্ত করব

ধাপ 2 - রিয়েল-টাইম ডেটা সোর্সের সাথে সংযোগ কনফিগার করুন

ডেটা উত্সগুলির সাথে সংযোগ করার একাধিক উপায় রয়েছে এবং সঠিক সমাধান আপনার ব্যবহারের ক্ষেত্রে এবং প্রযুক্তিগত অবকাঠামোর উপর নির্ভর করে৷ এই উদাহরণে, আমরা একটি পুল পদ্ধতি ব্যবহার করছি, যেখানে আমরা নিয়মিতভাবে HTTP অনুরোধের (REST) ​​মাধ্যমে আপডেট হওয়া অপেক্ষা সময়ের ডেটার জন্য অনুরোধ করি। নিম্নলিখিত বিভাগগুলিতে, আপনি বিকল্প স্থাপত্যগুলি দেখতে পাবেন যা পুশ পদ্ধতির ব্যবহার করে।

আমাদের সার্ভার থেকে অপেক্ষার সময় ডেটা অ্যাক্সেস করতে আমাদের অ্যাপ্লিকেশনকে সক্ষম করতে, আমাদের আর্কিটেকচার ফায়ারবেসের জন্য ক্লাউড ফাংশনগুলিকে ব্যবহার করে৷ ক্লাউড ফাংশন আমাদের এই ডেটা অ্যাক্সেস এবং গণনা করার জন্য একটি ব্যাকএন্ড ফাংশন সংজ্ঞায়িত করতে সক্ষম করে। আমরা আমাদের ওয়েব অ্যাপ্লিকেশনে ফায়ারবেস লাইব্রেরিও অন্তর্ভুক্ত করি, একটি HTTP অনুরোধের মাধ্যমে আমাদের ক্লাউড ফাংশন অ্যাক্সেস করতে সক্ষম করে।

পরবর্তী ধাপ হল ব্যবহারকারীর জন্য ডেটা সতেজ রাখা নিশ্চিত করা। এটি করার জন্য, আমরা 30 সেকেন্ডের টাইমআউট সহ javascript setInterval ফাংশন ব্যবহার করে একটি টাইমার সেট আপ করি। প্রতিবার টাইমার ট্রিগার করা হলে, আমরা উপরে বর্ণিত অপেক্ষার সময়ের ডেটা আপডেট করার অনুরোধ করি। একবার আমরা নতুন ডেটা পেয়ে গেলে, আমাদের অবশ্যই মানচিত্র মার্কারগুলির চেহারা রিফ্রেশ করতে হবে। এই পরিবর্তনগুলি কীভাবে করা যায় তার পরবর্তী ধাপের বিবরণ।

ধাপ 3 - ম্যাপ মার্কার রেন্ডার করুন

আমরা এখন ম্যাপে স্টাইলাইজড মার্কার রেন্ডার করতে অ্যাডভান্সড মার্কার ব্যবহার করতে পারি। Google মানচিত্র প্ল্যাটফর্মের মানচিত্র জাভাস্ক্রিপ্ট API দ্বারা তৈরি মানচিত্রে উন্নত মার্কার রেন্ডার করা যেতে পারে। উন্নত মার্কার ব্যবহার করার সময়, JS মানচিত্রের অনুরোধে মানচিত্র আইডি পরামিতি অন্তর্ভুক্ত করতে ভুলবেন না।

নীচে দেখানো কোড স্নিপেটে, আমরা মার্কার তৈরি করি, এবং একটি HTML div উপাদান তৈরি করে চিহ্নিতকারীর বিষয়বস্তু নির্ধারণ করি:

// 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 মিনিট' বলে

রিয়েল-টাইম ডেটা সোর্সের সাথে সংযোগ করার বিকল্প উপায়

রিয়েল-টাইম ডেটা উত্সগুলির সাথে সংযোগ করার বিভিন্ন উপায় রয়েছে৷ নীচে, আমরা দুটি বিকল্প বিকল্প পর্যালোচনা করি, ফায়ারবেস ক্লাউড মেসেজিং এবং ওয়েবসকেট। আপনি যে পদ্ধতিই নির্বাচন করুন না কেন, নিচের বিষয়গুলি বিবেচনা করতে ভুলবেন না যাতে আপনার মানচিত্র টুলটি কার্যকর থাকে:

  • আপডেটের ফ্রিকোয়েন্সি
  • ডেটার ভলিউম
  • মানচিত্র দৃশ্যে চিহ্নিতকারীর সংখ্যা
  • হার্ডওয়্যার এবং ব্রাউজার ক্ষমতা

ফায়ারবেস ক্লাউড মেসেজিং

ফায়ারবেস ক্লাউড মেসেজিং একটি পুশ পদ্ধতি। এই পদ্ধতি ব্যবহার করে, ব্যাকএন্ডে প্রতিবার অপেক্ষার সময় ডেটা আপডেট করার সময় আপনি মানচিত্র অ্যাপ্লিকেশনে আপডেট পাঠাবেন। আপডেট বার্তা একটি কলব্যাক ফাংশন ট্রিগার করবে যার উদ্দেশ্য হল মার্কার চেহারা এবং বিষয়বস্তু আপডেট করা।

এই আর্কিটেকচারটি নির্বাচন করার আগে একটি বিষয় বিবেচনা করা উচিত যে এটি মানচিত্র অ্যাপ্লিকেশন চালানো প্রতিটি ব্রাউজারের জন্য একটি স্থায়ী সার্ভার সংযোগ বজায় রাখা প্রয়োজন। সেই কারণে এটি চালানোর জন্য আরও ব্যয়বহুল হতে পারে এবং সংযোগের সমস্যাগুলির প্রেক্ষাপটে কম শক্তিশালী হতে পারে।

ওয়েবসকেট

ওয়েবসকেটগুলি ডেটা সতেজ রাখার জন্য আরেকটি পুশ-ভিত্তিক পদ্ধতি। পূর্ববর্তী দৃশ্যের অনুরূপ, আপনি আপনার ব্যাকএন্ড এবং আপনার মানচিত্র অ্যাপ্লিকেশনের মধ্যে একটি স্থায়ী সংযোগ স্থাপন করতে WebSockets ব্যবহার করতে পারেন। এই পদ্ধতির কার্যকরী সুবিধাগুলি Firebase ক্লাউড মেসেজিং-এর মতোই, তবে প্রয়োজনীয় পরিকাঠামো কনফিগার করার জন্য অতিরিক্ত কাজের প্রয়োজন হতে পারে।

উপসংহার

বিকাশকারীরা Google মানচিত্রে স্বজ্ঞাত ভিজ্যুয়ালাইজেশন তৈরি করতে উন্নত মার্কারগুলির সাথে রিয়েল-টাইম ডেটা উত্সগুলিকে একত্রিত করতে পারে৷ মানচিত্রের প্রয়োজনীয়তা, ব্যবহারকারীর হার্ডওয়্যার এবং ব্রাউজার এবং ডেটা ভলিউমের উপর নির্ভর করে এই ডেটা উত্সগুলিকে সংযুক্ত করার বিভিন্ন উপায় রয়েছে। ইন্টিগ্রেটেড ডেটা তারপরে ব্যবহারকারীদের জন্য একটি গতিশীল অভিজ্ঞতা সক্ষম করে, রিয়েল-টাইমে উন্নত মার্কারগুলির চেহারা এবং অনুভূতি নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে।

পরবর্তী অ্যাকশন

আরও পড়া:

অবদানকারী

প্রধান লেখক:

জিম লেফ্লার | গুগল ম্যাপ প্ল্যাটফর্ম সলিউশন ইঞ্জিনিয়ার

জন ব্রানিগান | Google ক্লাউড প্ল্যাটফর্ম সিনিয়র গ্রাহক প্রকৌশলী

স্টিভ ব্যারেট | গুগল ম্যাপ প্ল্যাটফর্ম সলিউশন ইঞ্জিনিয়ার