উদ্দেশ্য
ব্যবহারকারীদের কাছের অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে স্থানগুলি খুঁজে পেতে সাহায্য করার জন্য Google মানচিত্রের সাথে স্থান অনুসন্ধান উপাদানকে কীভাবে একীভূত করতে হয় তা শিখুন, তাদের আগ্রহের পয়েন্টগুলি অন্বেষণ করার ক্ষমতা বৃদ্ধি করে৷ আপনার অ্যাপ্লিকেশানে প্রদর্শিত স্থানগুলি সম্পর্কে আরও বিশদ প্রদান করতে স্থানের বিবরণ কমপ্যাক্ট উপাদান ব্যবহার করুন৷
স্থান অনুসন্ধান উপাদান কি?
স্থান অনুসন্ধান উপাদানটি মানচিত্র জাভাস্ক্রিপ্ট API-এ স্থান UI কিটের অংশ। এটি একটি HTML উপাদান যা একটি স্থান অনুসন্ধানের ফলাফল সরাসরি আপনার অ্যাপ্লিকেশনের মধ্যে একটি তালিকা বিন্যাসে রেন্ডার করে। এই উপাদানটি কাছাকাছি অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে পাওয়া স্থানগুলি প্রদর্শনের প্রক্রিয়াটিকে সহজ করে, স্থান আবিষ্কারের জন্য একটি বিরামহীন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। যখন একজন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করেন, আপনি প্রায়শই একটি তথ্য উইন্ডো এবং স্থানের বিবরণ উপাদান ব্যবহার করে মানচিত্রের বিবরণ প্রদর্শন করতে পারেন।
স্থান আবিষ্কার কল্পনা করুন
নিচের ছবিটি প্লেস সার্চ এলিমেন্টের একটি উদাহরণ দেখায়। বাম দিকে, রেস্তোরাঁর একটি তালিকা প্রদর্শিত হয় (স্থান অনুসন্ধান উপাদান)। যখন একটি রেস্তোরাঁ নির্বাচন করা হয়, তখন এর বিশদ বিবরণ মানচিত্রে একটি তথ্য উইন্ডোতে প্রদর্শিত হয় এবং মানচিত্রটি এর অবস্থানের কেন্দ্রে থাকে।
স্থান আবিষ্কারের জন্য কেস ব্যবহার করুন
স্থান অনুসন্ধান উপাদান একত্রিত করা বিভিন্ন শিল্প জুড়ে বিভিন্ন অ্যাপ্লিকেশন উন্নত করতে পারে:
- ভ্রমণ এবং পর্যটন: পর্যটকদের একটি এলাকায় আকর্ষণ, হোটেল, বা নির্দিষ্ট ধরনের রন্ধনপ্রণালী অনুসন্ধান করার অনুমতি দিন।
- রিয়েল এস্টেট: কাছাকাছি স্কুল, সুপারমার্কেট, বা পাবলিক ট্রান্সপোর্ট বিকল্পগুলি খুঁজে পেতে সম্ভাব্য ক্রেতা বা ভাড়াটেদের সক্ষম করুন৷
- লজিস্টিকস এবং পরিষেবা: EV চার্জিং স্টেশন, গ্যাস স্টেশন, বা নির্দিষ্ট পরিষেবা কেন্দ্রগুলি খুঁজে পেতে ড্রাইভারদের সহায়তা করুন।
সমাধান কর্মপ্রবাহ: স্থান আবিষ্কার বাস্তবায়ন
এই বিভাগটি আপনাকে স্থানগুলি UI কিটের সাথে ইন্টারঅ্যাক্ট করার জন্য কোড স্নিপেট সহ একটি মানচিত্রে স্থানগুলি আবিষ্কার করার জন্য স্থান অনুসন্ধান উপাদানকে একীভূত করার পদক্ষেপগুলির মধ্য দিয়ে চলে। আমরা মানচিত্র আরম্ভ করা, এবং কাছাকাছি অনুসন্ধান এবং পাঠ্য অনুসন্ধান কার্যকারিতা উভয় বাস্তবায়ন কভার করব। অবশেষে, মানচিত্রের পিনের ক্লিকে, একটি নির্দিষ্ট স্থান সম্পর্কে আরও বিশদ বিবরণ দেখানোর জন্য আমরা স্থানের বিবরণ উপাদানটি ব্যবহার করব।
পূর্বশর্ত
নিম্নলিখিত ডকুমেন্টেশনের সাথে পরিচিতি সুপারিশ করা হয়:
- স্থান অনুসন্ধান উপাদান - কাছাকাছি অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে স্থানগুলি প্রকাশ করতে ব্যবহৃত হয়
- স্থানের বিবরণ উপাদান - একটি পৃথক স্থানের বিবরণ প্রদর্শন করতে ব্যবহৃত হয়
- মানচিত্র জাভাস্ক্রিপ্ট API - আপনার পৃষ্ঠায় একটি মানচিত্র দেখাতে এবং স্থান UI কিট আমদানি করতে ব্যবহৃত হয়
আপনার প্রকল্পে Maps JavaScript API এবং Places UI Kit সক্ষম করুন৷
আপনি মানচিত্র জাভাস্ক্রিপ্ট API লোড করেছেন এবং শুরু করার আগে প্রয়োজনীয় লাইব্রেরি আমদানি করেছেন তা যাচাই করুন। এই ডকুমেন্টটি HTML, CSS, এবং JavaScript সহ ওয়েব ডেভেলপমেন্টের কাজের জ্ঞানও অনুমান করে।
পৃষ্ঠায় একটি মানচিত্র যোগ করুন
প্রথম ধাপ হল আপনার পৃষ্ঠায় একটি মানচিত্র যোগ করা। এই মানচিত্রটি নির্বাচনযোগ্য পিন হিসাবে স্থান অনুসন্ধান উপাদান ফলাফল প্রদর্শন করতে ব্যবহার করা হবে।
একটি পৃষ্ঠায় একটি মানচিত্র যোগ করার দুটি উপায় আছে:
- একটি
gmp-map
HTML ওয়েব উপাদান ব্যবহার করে। - জাভাস্ক্রিপ্ট ব্যবহার করে।
এই পৃষ্ঠার কোড স্নিপেটগুলি একটি জাভাস্ক্রিপ্ট মানচিত্র ব্যবহার করে তৈরি করা হয়েছিল৷
মানচিত্রটি হয় এমন একটি অবস্থানের উপর কেন্দ্রীভূত হতে পারে যা আপনি ব্যবহারকারীকে অনুসন্ধান করতে চান, যেমন একটি হোটেল, বা মানচিত্রটিকে কেন্দ্রে রাখতে ব্যবহারকারীর বর্তমান অবস্থান জিজ্ঞাসা করার জন্য শুরু করা যেতে পারে। এই নথির উদ্দেশ্যে, আমরা অনুসন্ধানটি অ্যাঙ্কর করার জন্য একটি নির্দিষ্ট অবস্থান ব্যবহার করব৷
আপনি যদি একটি নির্দিষ্ট অবস্থানের আশেপাশের স্থানগুলিকে ভিজ্যুয়ালাইজ করেন, যেমন একটি হোটেল, তাহলে এই স্থানটিকে উপস্থাপন করতে মানচিত্রে একটি মার্কার রাখুন ৷ যেমন:
মানচিত্রটি সান ফ্রান্সিসকোকে কেন্দ্র করে, যেখানে আমরা আশেপাশে যে জায়গাটি খুঁজছি তা উপস্থাপন করার জন্য একটি নীল পিন রয়েছে৷ পিনের রঙ PinElement
ব্যবহার করে কাস্টমাইজ করা হয়েছে। মানচিত্র প্রকার নিয়ন্ত্রণ UI থেকে লুকানো হয়েছে।
স্থান অনুসন্ধান উপাদান সেট আপ করুন
এখন, আমরা স্থান অনুসন্ধান উপাদান প্রদর্শন করতে HTML এবং CSS সেট আপ করতে পারি। এই উদাহরণের জন্য, আমরা মানচিত্রের বাম দিকে উপাদানটিকে ভাসতে যাচ্ছি, তবে আপনার অ্যাপ্লিকেশনের জন্য বিভিন্ন লেআউট চেষ্টা করার পরামর্শ দেওয়া হচ্ছে।
আপনার এইচটিএমএল কোডের মধ্যে, একটি div
তৈরি করুন যা স্থান অনুসন্ধান উপাদানকে ধরে রাখবে। এর মধ্যে, একটি খালি gmp-place-list
আরম্ভ করুন। উপাদানটিতে ক্লিক ইভেন্টগুলি সক্ষম করতে gmp-place-list to
সহ selectable
বৈশিষ্ট্য ব্যবহার করুন।
<gmp-place-list selectable></gmp-place-list>
এই পর্যায়ে, একটি স্থানের প্রকার অনুসন্ধান করতে configureFromSearchNearbyRequest
ব্যবহার করুন, ফলাফলগুলি সঠিকভাবে প্রদর্শিত হয়েছে তা পরীক্ষা করতে৷
স্থান অনুসন্ধানের ফলাফল দেখাতে স্থান অনুসন্ধান উপাদান কনফিগার করতে JavaScript ব্যবহার করুন। একটি কেন্দ্র বিন্দু এবং একটি উপযুক্ত ব্যাসার্ধ ব্যবহার করে locationRestriction
হিসাবে ব্যবহার করার জন্য একটি বৃত্ত শুরু করুন। এই উদাহরণের জন্য, restaurant
একটি স্থানের ধরন অনুসন্ধান করতে উপাদানটি কনফিগার করা হয়েছে এবং পূর্ববর্তী ধাপে সেট আপ করা মার্কার অবস্থানটি বৃত্ত কেন্দ্র বিন্দু হিসাবে ব্যবহার করা হয়েছে।
এর জন্য কোড স্নিপেট নিম্নরূপ:
const placeListElement = document.querySelector("gmp-place-list");
const circleRestriction = new Circle({
center: marker.position,
radius: 500
});
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: circleRestriction,
includedPrimaryTypes: ['restaurant'],
});
এই পর্যায়ে অ্যাপ্লিকেশনটি কীভাবে দেখতে পারে তার একটি উদাহরণ নিম্নরূপ:
ব্যবহারকারীকে অনুসন্ধান করার অনুমতি দিন
স্থান অনুসন্ধান উপাদান দুটি অনুসন্ধান বিকল্পের অনুমতি দেয়:
-
configureFromSearchNearbyRequest
- স্থানের ধরন ব্যবহার করে কাছাকাছি স্থানের অনুসন্ধান থেকে অনুসন্ধানের ফলাফল রেন্ডার করুন। -
configureFromSearchByTextRequest
- একটি স্থান টেক্সট অনুসন্ধান থেকে অনুসন্ধান ফলাফল রেন্ডার করুন, একটি বিনামূল্যের পাঠ্য ইনপুট ব্যবহার করে যেমন "সান ফ্রান্সিসকোতে সুশি"।
এই বিভাগে উভয় পদ্ধতির বাস্তবায়ন বর্ণনা করে।
কাছাকাছি অনুসন্ধান
একটি UI উপাদান প্রয়োগ করুন যাতে ব্যবহারকারীরা বেছে নিতে পারেন যে কোন স্থানের ধরন স্থান অনুসন্ধান উপাদানটি প্রদর্শন করবে৷ আপনার ব্যবহারের ক্ষেত্রে এই ধরনের একটি উপসেট বেছে নেওয়ার পরামর্শ দেওয়া হচ্ছে। উদাহরণস্বরূপ, আপনি যদি পর্যটকদের একটি হোটেলের কাছাকাছি কী আছে তা দেখানোর জন্য একটি অ্যাপ্লিকেশন তৈরি করছেন, তাহলে আপনি বেছে নিতে পারেন: bakery
, coffee_shop
, museum
, restaurant
, এবং tourist_attraction
। আপনার অ্যাপ্লিকেশনের জন্য সবচেয়ে ভালো কাজ করে এমন নির্বাচন পদ্ধতি বেছে নিন, উদাহরণস্বরূপ, স্থানের প্রকারের নির্বাচনের সাথে একটি ড্রপ-ডাউন তালিকা তৈরি করা হয়েছে।
আপনার স্থানের প্রকার নির্বাচন UI এ পরিবর্তন ইভেন্ট পরিচালনা করতে একটি জাভাস্ক্রিপ্ট শ্রোতা তৈরি করুন৷ configureFromSearchNearbyRequest
ব্যবহার করে নির্বাচিত স্থানের প্রকারের উপর ভিত্তি করে স্থান অনুসন্ধান উপাদান আপডেট করতে একটি ফাংশন কল করার জন্য শ্রোতাকে কনফিগার করুন।
একটি ফাংশন ব্যবহার করে স্থান অনুসন্ধান উপাদান আপডেট করার একটি উদাহরণ নিম্নরূপ:
// Function to update the place search
function updatePlaceList() {
const selectedType = placeTypeSelect.value;
if (!selectedType) {
console.warn("No place type selected.");
// Clear results or handle as needed
placeListElement.requestedResultTypes = [];
return;
}
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: searchCircle,
maxResultCount: 8,
includedPrimaryTypes: [selectedType],
});
}
আগের ধাপে সেট আপ করা একই বৃত্ত locationRestriction
ব্যবহার করা হয়। includedPrimaryTypes
প্যারামিটারটি UI-তে নির্বাচিত মানের উপর ভিত্তি করে সেট করা হয়। একটি ঐচ্ছিক maxResultCount
ও সেট করা হয়েছে, ফলাফলের সংখ্যা সীমিত করতে এবং স্থান অনুসন্ধান উপাদানে প্রদর্শিত হবে।
পাঠ্য অনুসন্ধান
আপনার ব্যবহারকারীদের তাদের পাঠ্য অনুসন্ধানে প্রবেশ করার জন্য একটি বোতাম সহ একটি পাঠ্য ইনপুট যোগ করুন। বোতামে click
ইভেন্ট পরিচালনা করতে একটি জাভাস্ক্রিপ্ট শ্রোতা তৈরি করুন, এবং configureFromSearchByTextRequest
ব্যবহার করে প্রবেশ করা অনুসন্ধান স্ট্রিং ব্যবহার করে অনুসন্ধান করার জন্য স্থান অনুসন্ধান উপাদানটি কনফিগার করুন।
const textSearchInput = document.getElementById('textSearchInput');
const textSearchButton = document.getElementById('textSearchButton');
textSearchButton.addEventListener('click', performTextSearch);
function performTextSearch() {
const query = textSearchInput.value.trim();
if (!query) {
console.log("Search query is empty.");
return;
}
placeListElement.configureFromSearchByTextRequest({
textQuery: query,
locationRestriction: map.getBounds(),
maxResultCount: 8,
});
}
এই উদাহরণের জন্য, মানচিত্রের বর্তমান সীমানা ব্যবহার করে একটি ঐচ্ছিক locationRestriction
সেট করা হয়েছে। সার্চ ক্যোয়ারী textQuery
প্যারামিটার ব্যবহার করে পাস করা হয়। একটি ঐচ্ছিক maxResultCount
ও সেট করা হয়েছে, ফলাফলের সংখ্যা সীমিত করতে এবং স্থান অনুসন্ধান উপাদানে প্রদর্শিত হবে।
প্রদর্শন স্থান পিন এবং বিবরণ
এখন অ্যাপ্লিকেশনটি একটি স্থান অনুসন্ধান করতে পারে এবং উপাদানটি পূরণ করতে পারে। পরবর্তী ধাপে আমরা এর কার্যকারিতা বাড়াব:
- প্লেস সার্চ এলিমেন্টে থাকা প্রতিটি জায়গার জন্য মানচিত্রে পিন প্রদর্শন করা হচ্ছে।
- একজন ব্যবহারকারীকে সেই নির্দিষ্ট স্থান সম্পর্কে আরও বিশদ বিবরণ দেখানোর জন্য, স্থান অনুসন্ধান উপাদানের মধ্যে একটি পিন বা স্থানটিতে ক্লিক করার অনুমতি দেয়।
অ্যাপ্লিকেশনটি configureFromSearchNearbyRequest
বা configureFromSearchByTextRequest
ব্যবহার করছে কিনা এই ধাপের নীতি একই হবে। এই উদাহরণের জন্য, আমরা configureFromSearchNearbyRequest
ব্যবহার করব।
স্থান চিহ্নিতকারী সংরক্ষণ করতে আপনার জাভাস্ক্রিপ্ট কোডে একটি বিশ্বব্যাপী পরিবর্তনশীল যোগ করুন। এটি আপনাকে অনুসন্ধান পরিবর্তন করার সময় সেগুলি সরাতে এবং স্থানের বিবরণ প্রদর্শন করতে ক্লিক ইভেন্টগুলি পরিচালনা করার অনুমতি দেবে৷
let markers = {};
এতে একটি ফাংশন যোগ করুন:
- বিদ্যমান স্থান চিহ্নিতকারী সরান।
- স্থান অনুসন্ধান উপাদান ফলাফল যদিও লুপ এবং প্রতিটি জন্য একটি মার্কার যোগ করুন.
- মানচিত্রের সীমানা সেট করুন যাতে সমস্ত চিহ্নিতকারী দৃশ্যমান হয়।
async function addMarkers() {
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
if (placeListElement.places.length > 0) {
// Remove existing markers
for (m in markers) {
markers[m].map = null;
}
markers = {};
// Loop through each place in the Place Search Element
// Add a marker for each place
placeListElement.places.forEach((place) => {
let marker = new AdvancedMarkerElement({
map: map,
position: place.location,
});
markers[place.id] = marker;
bounds.extend(place.location);
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
// Position the map to display all markers with the bounds
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
}
}
অবশেষে, একবার configureFromSearchNearbyRequest
প্রতিশ্রুতি সফলভাবে সমাধান হয়ে গেলে, নতুন addMarkers()
ফাংশনটিকে কল করুন, এভাবে:
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: searchCircle,
maxResultCount: 8,
includedPrimaryTypes: [selectedType],
}).then(addMarkers);
একবার এই ধাপটি সম্পন্ন হলে, প্লেস সার্চ এলিমেন্ট দ্বারা প্রত্যাবর্তিত প্রতিটি স্থানের জন্য মার্কার দেখানোর ক্ষমতা সহ অ্যাপ্লিকেশনটি নিচের মত দেখাবে:
এখন যেহেতু আমাদের মানচিত্রে চিহ্নিতকারী রয়েছে, শেষ পদক্ষেপটি হল স্থানের বিশদ বিবরণ সহ একটি তথ্য উইন্ডো দেখানোর জন্য মার্কার এবং উপাদান ক্লিক ইভেন্টগুলি পরিচালনা করা, যা স্থানের বিবরণ উপাদান দ্বারা সরবরাহ করা হয়েছে। এই উদাহরণের জন্য, আমরা Place Details Compact Element ব্যবহার করব।
আপনার কোডে স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট HTML যোগ করুন, উদাহরণস্বরূপ:
<gmp-place-details-compact orientation="vertical" style="display: none;">
<gmp-place-all-content></gmp-place-all-content>
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>
style
display: none
; এটি প্রয়োজনীয় না হওয়া পর্যন্ত এটি দৃশ্যমান হবে না। gmp-place-all-content
পাস করা হয় সমস্ত উপাদান সামগ্রী রেন্ডার করার জন্য। কোন বিষয়বস্তু রেন্ডার করতে হবে তা চয়ন করতে, স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট ডকুমেন্টেশন দেখুন।
প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্টের রেফারেন্স রাখার জন্য জাভাস্ক্রিপ্টে একটি গ্লোবাল ভেরিয়েবল তৈরি করুন এবং আপনার ইনিশিয়ালাইজেশন কোডে এটি পূরণ করুন, উদাহরণস্বরূপ:
let placeDetailsElement;
…
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers
ফাংশনের মধ্যে, প্রতিটি মার্কারে একটি gmp-click
ইভেন্ট লিসেনার যোগ করুন এবং বর্তমান মার্কারের প্লেস আইডি পাস করে স্থানের বিশদ বিবরণ দেখানোর জন্য স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট কনফিগার করুন।
এটি হয়ে গেলে, মার্কারে নোঙর করা স্থানের বিবরণ কমপ্যাক্ট উপাদান প্রদর্শনের জন্য একটি তথ্য উইন্ডো খোলা হয়।
অবশেষে, মানচিত্রটি নির্বাচিত স্থানের ভিউপোর্টে অবস্থান করে, এটি দৃশ্যমান করে।
async function addMarkers() {
...
marker.addListener('gmp-click', (event) => {
//Set up Place Details Compact Widget
placeDetailsElement.style.display = "block";
// Remove any existing place request element
const existingPlaceRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
if (existingPlaceRequest) {
existingPlaceRequest.remove();
}
// Create and configure the new place request element
const placeRequestElement = new google.maps.places.PlaceDetailsPlaceRequestElement({ place: place.id });
// Prepend the new place request element to the main widget
placeDetailsElement.prepend(placeRequestElement);
if (infoWindow.isOpen) {
infoWindow.close();
}
infoWindow.setOptions({
content: placeDetailsElement
});
infoWindow.open({
anchor: marker,
map: map
});
// Position the map to show the selected place
placeDetailsElement.addEventListener('gmp-load', () => {
map.fitBounds(place.viewport, { top: 500, left: 400 });
});
});
...
});
}
}
প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্ট দেখানোর জন্য প্লেস লিস্ট এলিমেন্টের একটি জায়গায় ক্লিক করতে ব্যবহারকারীকে সক্ষম করতে, configureFromSearchNearbyRequest
কল করার পরে জাভাস্ক্রিপ্ট কোডে নিম্নলিখিতটি যোগ করুন।
placeListElement.addEventListener("gmp-placeselect", ({ place }) => {
markers[place.id].click();
});
এই ধাপটি সম্পন্ন হওয়ার পরে, অ্যাপ্লিকেশনটি স্থান তালিকার উপাদানটি পূরণ করতে কাছাকাছি অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করতে সক্ষম হবে। এর ফলাফল ম্যাপে পিন দেখাবে, এবং প্লেস লিস্ট এলিমেন্টের একটি পিন বা একটি জায়গায় ক্লিক করলে প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্ট দ্বারা প্রদত্ত স্থানের বিবরণ সহ একটি তথ্য উইন্ডো দেখাবে।
অ্যাপ্লিকেশন নিম্নলিখিত মত দেখাবে:
উপসংহার
স্থানের বিবরণ কমপ্যাক্ট এলিমেন্টের সাথে মিলিত স্থান অনুসন্ধান উপাদানটি আপনার Google মানচিত্র প্ল্যাটফর্ম অ্যাপ্লিকেশনগুলিতে সমৃদ্ধ স্থান আবিষ্কার বৈশিষ্ট্যগুলি যোগ করার একটি সুগম উপায় প্রদান করে৷
আপনার ব্যবহারকারীদের কাছাকাছি এবং পাঠ্য অনুসন্ধান উভয় ব্যবহার করে স্থানগুলি খুঁজে বের করতে এবং অন্বেষণ করতে এবং সমৃদ্ধ স্থানের বিশদ প্রদর্শন করতে, আপনার স্থান আবিষ্কারের ব্যবহারের ক্ষেত্রে তাদের মিথস্ক্রিয়া বাড়াতে আজই প্লেসেস UI কিট ব্যবহার করে দেখুন৷
অবদানকারী
হেনরিক ভালভ | ডেভএক্স ইঞ্জিনিয়ার