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

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

হিরো ইমেজটিতে সান ফ্রান্সিসকোকে কেন্দ্র করে একটি গুগল ম্যাপস জেএস ম্যাপ দেখানো হয়েছে। বেশ কয়েকটি স্থানে রঙিন মার্কার রয়েছে, যেগুলোতে '২ মিনিট' বা '৪ মিনিট' লেখা আছে। সময় অতিবাহিত হওয়ার সাথে সাথে রঙ এবং লেখাগুলো আপডেট হয়।

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

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

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

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

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

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

ধাপ ১ - ভিজ্যুয়াল অভিজ্ঞতা সংজ্ঞায়িত করার জন্য বৈশিষ্ট্যসমূহ নির্ধারণ করুন

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

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

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

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

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

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

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

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

ধাপ ৩ - মানচিত্রের চিহ্নিতকারীগুলো রেন্ডার করুন

আমরা এখন ম্যাপে স্টাইলাইজড মার্কারগুলো রেন্ডার করতে অ্যাডভান্সড মার্কার ব্যবহার করতে পারি। গুগল ম্যাপস প্ল্যাটফর্মের ম্যাপস জাভাস্ক্রিপ্ট এপিআই (Maps Javascript API) দ্বারা তৈরি ম্যাপে অ্যাডভান্সড মার্কার রেন্ডার করা যায়। অ্যাডভান্সড মার্কার ব্যবহার করার সময়, জেএস (JS) ম্যাপ রিকোয়েস্টে ম্যাপ আইডি (map ID) প্যারামিটারটি অবশ্যই অন্তর্ভুক্ত করতে হবে।

নীচে দেখানো কোড স্নিপেটে, আমরা মার্কারগুলো তৈরি করি এবং একটি 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) ব্যবহার করে:

হিরো ইমেজটিতে সান ফ্রান্সিসকোকে কেন্দ্র করে একটি গুগল ম্যাপস জেএস ম্যাপ দেখানো হয়েছে। বেশ কয়েকটি স্থানে রঙিন মার্কার রয়েছে, যেগুলোতে '২ মিনিট' বা '৪ মিনিট' লেখা আছে। সময় অতিবাহিত হওয়ার সাথে সাথে রঙ এবং লেখাগুলো আপডেট হয়।

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

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

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

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

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

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

ওয়েবসকেটস

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

উপসংহার

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

পরবর্তী পদক্ষেপ

আরও পড়ুন:

অবদানকারীরা

প্রধান লেখকগণ:

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

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

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