Firebase-এর সাথে রিয়েল-টাইম মার্কার

Google Maps Platform গ্রাহকদের উন্নত মার্কার ব্যবহার করে তাদের ম্যাপ মার্কারের ভিজ্যুয়াল ডিজাইন কাস্টমাইজ করার মাধ্যমে অনন্য অভিজ্ঞতা তৈরি করতে দেয়। এই ডকুমেন্টে আমরা দেখব যে কীভাবে গ্রাহকরা আরও এক ধাপ এগিয়ে যেতে পারেন এবং রিয়েল-টাইম ডেটার উপর ভিত্তি করে ডাইনামিক মার্কার তৈরি করতে পারেন।

অনেক বড় ছবিতে সান ফ্রান্সিসকোকে কেন্দ্র করে Google Maps JS ম্যাপ দেখানো হয়েছে। বিভিন্ন লোকেশন রঙিন মার্কার দেখায় যার কন্টেন্টে '২ মিনিট' বা '৪ মিনিট' লেখা থাকে"। সময় অতিবাহিত হওয়ার সাথে সাথে রঙ ও কন্টেন্ট আপডেট হয়।

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

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

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

ডায়নামিক উন্নত মার্কার সমাধান

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

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

ধাপ ১ - ভিজ্যুয়াল অভিজ্ঞতা নির্ধারণ করার জন্য অ্যাট্রিবিউট ঠিক করা

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

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

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

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

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

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

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

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

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

ম্যাপে স্টাইলাইজড মার্কার রেন্ডার করতে আমরা এখন উন্নত মার্কার ব্যবহার করতে পারি। Google Maps Platform-এর Maps Javascript 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 ম্যাপ দেখানো হয়েছে। বিভিন্ন লোকেশন রঙিন মার্কার দেখায় যার কন্টেন্টে '২ মিনিট' বা '৪ মিনিট' লেখা থাকে। সময় অতিবাহিত হওয়ার সাথে সাথে রঙ ও কন্টেন্ট আপডেট হয়।

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

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

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

Firebase Cloud Messaging

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

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

WebSockets

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

উপসংহার

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

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

আরও পড়ুন:

অবদানকারী

প্রধান লেখক:

জিম লেফলার | Google Maps Platform সল্যুশন ইঞ্জিনিয়ার

জন ব্রানিগান | Google Cloud Platform সিনিয়র কাস্টমার ইঞ্জিনিয়ার

স্টিভ ব্যারেট | Google Maps Platform সলিউশন ইঞ্জিনিয়ার