paint-brush
React.js-এ ব্যবহারকারীর অবস্থান কীভাবে পাবেন: একটি ব্যবহারিক নির্দেশিকাদ্বারা@codebucks
7,668 পড়া
7,668 পড়া

React.js-এ ব্যবহারকারীর অবস্থান কীভাবে পাবেন: একটি ব্যবহারিক নির্দেশিকা

দ্বারা CodeBucks16m2023/04/25
Read on Terminal Reader
Read this story w/o Javascript

অতিদীর্ঘ; পড়তে

ওয়েব অ্যাপ্লিকেশনগুলি আরও বেশি ব্যক্তিগতকৃত হয়ে উঠছে। একাধিক কারণে অবস্থান-ভিত্তিক পরিষেবা ব্যবহার করে এমন ওয়েব অ্যাপ্লিকেশনের উত্থান ঘটেছে। ব্যবহারকারীর অবস্থান জেনে আপনি সহজেই বিভিন্ন বৈশিষ্ট্য যেমন ব্যক্তিগতকৃত সামগ্রী, ভাল নিরাপত্তা, আবহাওয়ার পূর্বাভাস, আরও স্থানীয়করণ এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা অফার করতে পারেন। এই নিবন্ধে, আমরা আপনাকে ধাপে ধাপে নির্দেশাবলীর মাধ্যমে নিয়ে যাব কিভাবে আপনি প্রতিক্রিয়ার মত আধুনিক ওয়েব প্রযুক্তি ব্যবহার করে ব্যবহারকারীর অবস্থান পেতে পারেন।
featured image - React.js-এ ব্যবহারকারীর অবস্থান কীভাবে পাবেন: একটি ব্যবহারিক নির্দেশিকা
CodeBucks HackerNoon profile picture
0-item
1-item
2-item

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


ব্যবহারকারীর অবস্থান জেনে আপনি সহজেই বিভিন্ন বৈশিষ্ট্য যেমন ব্যক্তিগতকৃত বিষয়বস্তু, ভাল নিরাপত্তা , আবহাওয়ার পূর্বাভাস, আরও স্থানীয়করণ এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা অফার করতে পারেন। একজন বিকাশকারী হিসাবে, আপনার ওয়েব অ্যাপ্লিকেশনগুলির জন্য ব্যবহারকারীর অবস্থান কীভাবে পাবেন তা জানা অত্যন্ত গুরুত্বপূর্ণ৷ এই নিবন্ধে, React.js- এর মতো আধুনিক ওয়েব প্রযুক্তি ব্যবহার করে আপনি কীভাবে ব্যবহারকারীর অবস্থান পেতে পারেন সে সম্পর্কে আমরা আপনাকে ধাপে ধাপে নির্দেশনা দেব। আমরা ব্যবহারকারীর আইপি ঠিকানা পেতে বিভিন্ন পদ্ধতি কভার করব এবং কীভাবে আমরা ব্যবহারকারীর কাছ থেকে আরও ভূ-অবস্থান ডেটা পেতে পারি। চল শুরু করা যাক!

আইপি বা জিওলোকেশন কি?

প্রথমে আসুন জেনে নিই আইপি বা আইপি ঠিকানা কী।


ইন্টারনেট ব্যবহার করে এমন প্রতিটি ডিভাইসের একটি অনন্য ঠিকানা থাকে ঠিক যেমন প্রতিটি বাড়ির একটি অনন্য নম্বর বা ঠিকানা থাকে। ডিভাইসের এই অনন্য ঠিকানাটিকে IP ঠিকানা বলা হয়। এটি ডিভাইসগুলিকে ইন্টারনেটের মাধ্যমে একে অপরের সাথে যোগাযোগ করতে সহায়তা করে।


এখানে, আইপি মানে "ইন্টারনেট প্রোটোকল" যা নিয়মের একটি সেট যা ডিভাইসগুলি ইন্টারনেটের মাধ্যমে একে অপরের সাথে যোগাযোগ করতে ব্যবহার করে। এখন জিওলোকেশন বোঝা যাক।


জিওলোকেশন হল দুটি শব্দের সমন্বয়। প্রথমটি হল "জিও" যার অর্থ পৃথিবী এবং দ্বিতীয় শব্দটি হল " অবস্থান" যার অর্থ পৃথিবীতে কিছু অবস্থিত।


সুতরাং, "IP-ভৌগলিক অবস্থান" হল ডিভাইসটি তার IP ঠিকানার উপর ভিত্তি করে শারীরিকভাবে কোথায় অবস্থিত তা খুঁজে বের করার একটি উপায়৷ আইপি-জিওলোকেশন ডেটার নির্ভুলতা বিভিন্ন কারণের উপর নির্ভর করে যেমন ডেটা পাওয়ার জন্য কোন পদ্ধতি ব্যবহার করা হয়, ডেটার গুণমান, ডিভাইসের ধরন ইত্যাদি। মোবাইল ডিভাইসগুলির জন্য ডেটা কম নির্ভুল হতে পারে যেহেতু এই ডিভাইসগুলি ঘন ঘন নেটওয়ার্ক পরিবর্তন করে। এখন দেখা যাক কিভাবে আমরা React এ ব্যবহারকারীর IP ঠিকানা পেতে পারি।


ব্যবহারকারীর অবস্থান পাওয়া

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


প্রথমে vite ব্যবহার করে একটি React অ্যাপ তৈরি করা যাক। CMD বা টার্মিনাল খুলুন তারপর আপনার প্রকল্প ফোল্ডার সনাক্ত করুন এবং নিম্নলিখিত কমান্ডগুলি ব্যবহার করুন।


  • npm create vite@latest your-app-name


একবার আপনি উপরের কমান্ডটি কার্যকর করলে এটি আপনাকে ফ্রেমওয়ার্কের একটি তালিকা দেখাবে, এখন তীর কী ব্যবহার করে তালিকা থেকে প্রতিক্রিয়া নির্বাচন করুন এবং এন্টার টিপুন।


  • এখন এটি আপনাকে ভেরিয়েন্টের একটি তালিকা দেখাবে, সেই ভেরিয়েন্টগুলি থেকে Javascript নির্বাচন করুন। তারপর এটি আপনার অ্যাপের নামের সাথে একটি ফোল্ডার তৈরি করবে এবং প্রয়োজনীয় সমস্ত ফাইল যুক্ত করবে। এখন সমস্ত প্রয়োজনীয় লাইব্রেরি ইনস্টল করতে এবং ডেভেলপমেন্ট সার্ভার চালাতে নিম্নলিখিত কমান্ডগুলি ব্যবহার করুন।


    • cd your-app-name এই কমান্ডটি বর্তমান ডিরেক্টরিকে অ্যাপ ডিরেক্টরিতে পরিবর্তন করবে
    • npm install এই কমান্ডটি ব্যবহার করে আমরা সমস্ত প্রয়োজনীয় লাইব্রেরি ইনস্টল করব
    • npm run dev এই কমান্ডটি সম্ভবত localhost:5173 এ ডেভেলপমেন্ট সার্ভার শুরু করবে


এখন ডেভেলপমেন্ট সার্ভার আপ এবং চলমান তাই ব্যবহারকারীর আইপি ঠিকানা পাওয়া যাক.

জিওলোকেশন API ব্যবহার করে ব্যবহারকারীর অক্ষাংশ এবং দ্রাঘিমাংশের তথ্য পাওয়া

জিওলোকেশন API ব্যবহারকারীকে তাদের অবস্থান প্রদান করতে দেয় যদি তারা চায়। এই পদ্ধতিটি তখনই কাজ করে যখন ব্যবহারকারী তার অবস্থান অ্যাক্সেস করার অনুমতি দেয় অন্যথায় এই ব্রাউজার-ভিত্তিক API IP ঠিকানা পেতে সক্ষম হবে না। যদি আপনার ওয়েব অ্যাপ্লিকেশনের বৈশিষ্ট্যটির জন্য সত্যিই ব্যবহারকারীর অবস্থানের প্রয়োজন হয় তবে আপনি ব্যবহারকারীকে একটি ভাল পাঠ্য বার্তা দিয়ে অনুরোধ করতে পারেন এবং তাদের জানাতে পারেন কেন আপনি তাদের অবস্থানের প্রয়োজন৷


এই জিওলোকেশন এপিআইটি navigator.geolocation এ একটি কলের মাধ্যমে অ্যাক্সেস করা হয় যা একটি সম্পত্তি যা একটি জিওলোকেশন অবজেক্ট ফিরিয়ে দিতে পারে। চলুন দেখা যাক নেভিগেটর কি।


  • নেভিগেটর: এটি একটি ইন্টারফেস যা রাষ্ট্র এবং ব্যবহারকারী এজেন্টের (ব্রাউজার) পরিচয় উপস্থাপন করে। আসুন এই ন্যাভিগেটরকে লগ করি এবং দেখি এটি অন্যান্য বৈশিষ্ট্যগুলি প্রদান করে।


    App.jsx ফাইলটি খুলুন এবং রিটার্ন স্টেটমেন্টের ভিতরে সমস্ত কোড পরিষ্কার করুন এবং ক্লাস App সাথে প্যারেন্ট div রাখুন তারপর নিম্নলিখিত কোডে দেওয়া একটি useEffect এর ভিতরে console.log(navigator) ব্যবহার করুন।


 import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App;


আপনার ডেভেলপমেন্ট সার্ভার ট্যাবে F12 টিপে বা মাউসের ডান ক্লিকের মাধ্যমে কনসোলটি খুলুন। আপনি বিভিন্ন প্রপার্টির তালিকা দেখতে পাবেন যেমন appCodeName , Bluetooth , ক্লিপবোর্ড , জিওলোকেশন ইত্যাদি। আসুন জিওলোকেশনটি লগ করি। শুধু এই console.log(navigator.geolocation) এর মতো লগে জিওলোকেশন যোগ করুন। কনসোলে আপনি একটি খালি বস্তু দেখতে পাবেন কারণ আমাদের কাছে এখন ভৌগলিক অবস্থান অ্যাক্সেস করার অনুমতি নেই তাই এই অনুমতিটি কীভাবে পেতে হয় তা দেখা যাক। নিম্নলিখিত কোড এবং ব্যাখ্যা দেখুন.


 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []);


উপরের useEffect , প্রথমে আমরা নেভিগেটর আছে কিনা তা পরীক্ষা করব। ভূ-অবস্থান বা না এবং এটি সত্য হলে আমরা অনুমতিগুলি পরীক্ষা করব।


এখানে,

  • navigator.permissions: এটি একটি পারমিশন অবজেক্ট রিটার্ন করে যা অনুমতির স্থিতি অনুসন্ধান এবং আপডেট করতে ব্যবহার করা যেতে পারে।

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


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

     { name: "geolocation", onchange: null, state: "prompt" }


রাষ্ট্রের 3টি ভিন্ন মান থাকতে পারে,


  • মঞ্জুর করা হয়েছে: এর মানে আমাদের কাছে অবস্থান অ্যাক্সেস করার অনুমতি রয়েছে যাতে আমরা সরাসরি জিওলোকেশনে কল করতে পারি।
  • প্রম্পট: ব্যবহারকারী অনুমতি চেয়ে একটি পপআপ পাবেন।
  • অস্বীকার: এর মানে ব্যবহারকারী তার অবস্থান ভাগাভাগি অস্বীকার করেছে।


"মঞ্জুর করা" এবং "প্রম্পট" রাজ্যগুলির জন্য আমরা ব্যবহারকারীর বর্তমান অবস্থান পেতে একটি ফাংশন তৈরি করতে পারি কিন্তু " অস্বীকৃত " অবস্থার জন্য, আমরা নির্দেশাবলী দেখাতে পারি কিভাবে তারা তাদের ব্রাউজারে অবস্থানের অনুমতি সক্ষম করতে পারে৷


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


আসুন নিম্নলিখিত হিসাবে সমস্ত 3টি অনুমতি রাজ্যের জন্য 3টি শর্ত ব্যবহার করি


 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []);


prompt অবস্থায় getCurrentPosition নামক ফাংশনটি ব্যবহার করা যাক। এই ফাংশন নিম্নলিখিত আর্গুমেন্ট লাগে.


  • সফলতা : একটি কলব্যাক ফাংশন যা কল করা হবে যদি অবস্থানটি সফলভাবে পুনরুদ্ধার করা হয়।
  • ত্রুটি : একটি কলব্যাক ফাংশন যা কল করা হবে যদি অবস্থান পুনরুদ্ধার করার সময় একটি ত্রুটি থাকে। এটি ঐচ্ছিক।
  • বিকল্পগুলি : বিকল্পগুলি বিভিন্ন পরামিতি গ্রহণ করে যেমন MaximumAge, timeout, enableHighAccuracy ইত্যাদি। আপনি MDN ডকুমেন্টেশন থেকে এই বিকল্পগুলি সম্পর্কে আরও পড়তে পারেন। এটিও ঐচ্ছিক।


এর সমস্ত 3 টি আর্গুমেন্ট বাস্তবায়ন করা যাক। প্রথমে একটি সফল ফাংশন তৈরি করা যাক। useEffect আগে নিম্নলিখিত সাফল্য ফাংশন যোগ করুন।

 function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }


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

 function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); }


আসুন একটি বিকল্প অবজেক্টও ঘোষণা করি,

 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, };


এখন "প্রম্পট" এবং "মঞ্জুর করা" শর্তে নিম্নলিখিত লাইনটি পেস্ট করুন এবং আপনার ব্রাউজারে আউটপুট পরীক্ষা করুন।

 navigator.geolocation.getCurrentPosition(success, errors, options)


আপনি ব্রাউজারে একটি প্রম্পট দেখতে পারেন যা আপনাকে অবস্থানের অনুমতি চেয়েছে। একবার আপনি অনুমতি দিলে আপনি কনসোল ট্যাবে সমন্বয় মান দেখতে পাবেন। এখানে সম্পূর্ণ কোড আছে.

 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App;


এটাই. এইভাবে আপনি সহজেই যেকোনো ডিভাইসের অক্ষাংশ এবং দ্রাঘিমাংশের মান পেতে পারেন। এখন এই তথ্যটি যথেষ্ট নয় তাই আসুন ব্যবহারকারীর অবস্থান সম্পর্কে আরও তথ্য পেতে opencage এর বিপরীত জিওকোডিং API ব্যবহার করি।


বিপরীত জিওকোডিং সহ অবস্থান-ভিত্তিক পরিষেবাগুলি উন্নত করা

আমরা ইতিমধ্যে ব্যবহারকারীর ডিভাইস সম্পর্কে অক্ষাংশ এবং দ্রাঘিমাংশের তথ্য পেয়েছি এখন দেখা যাক কিভাবে আমরা এর অবস্থান সম্পর্কে আরও তথ্য পেতে এটি ব্যবহার করতে পারি। অবস্থান সম্পর্কে আরও তথ্য পেতে আমরা opencage থেকে APIs ব্যবহার করব। সুতরাং, নিশ্চিত করুন যে আপনি সাইন আপ করুন এবং একটি API কী পান। ওপেনকেজ বিনামূল্যে ট্রায়ালে 2,500টি অনুরোধ/দিন প্রদান করে বলে আপনাকে কিছু দিতে হবে না। আপনি তাদের ওয়েবসাইটের মূল্য সম্পর্কে আরও তথ্য চেকআউট করতে পারেন। আমি Opencage এর API ব্যবহার করেছি যেহেতু তাদের বিনামূল্যে ট্রায়াল আছে এবং কোন CORS সীমাবদ্ধতাও নেই। এখন এই API ব্যবহার করার জন্য একটি ফাংশন তৈরি করা যাক।


 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); }


এই getLocationInfo ফাংশন অক্ষাংশ এবং দ্রাঘিমাংশ নেয় তারপর এটি opencage এর ডকুমেন্টেশন থেকে URL ব্যবহার করে যা অক্ষাংশ, দ্রাঘিমাংশ এবং API কী নেয়। এই ফাংশনে আমরা ইউআরএল থেকে ডেটা পেতে fetch ব্যবহার করেছি এবং স্ট্যাটাস কোড 200 হলে আমরা লোকেশন স্টেটে ডেটা সংরক্ষণ করব। আপনি কোন ধরণের ডেটা পাচ্ছেন তা দেখতে ব্রাউজারে আপনার কনসোল পরীক্ষা করতে পারেন। আপাতত, আমরা ফর্ম্যাট করা সম্পত্তি থেকে মান ব্যবহার করছি। প্রতিক্রিয়া অবজেক্ট সম্পর্কে আরও তথ্য পেতে আপনি ডকুমেন্টেশন পরীক্ষা করতে পারেন। এখন এই ফাংশনটিকে সফল ফাংশন থেকে কল করা যাক যা আমরা ইতিমধ্যে সংজ্ঞায়িত করেছি।


 function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); }


এখন, যখনই ব্যবহারকারী তার অবস্থান দিতে রাজি হবেন সাফল্য ফাংশনটি চলবে এবং এটি অক্ষাংশ এবং দ্রাঘিমাংশের তথ্য getLocationInfo ফাংশনে পাস করবে এবং এটি কার্যকর করবে। আপনি আপনার ওয়েব অ্যাপে অবস্থান প্রদর্শন করতে এই অবস্থানের অবস্থা ব্যবহার করতে পারেন।


এখানে সম্পূর্ণ কোড আছে:

 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App;


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


ব্যবহারকারীর আইপি ঠিকানা পাওয়া

ক্লায়েন্ট সাইডে ব্যবহারকারীর আইপি ঠিকানা পেতে আমরা ipify ব্যবহার করব যা একটি সাধারণ পাবলিক IP ঠিকানা API। আমরা আরেকটি useEffect তৈরি করব এবং নিম্নলিখিত কোড ব্লকে দেখানো আইপি অ্যাড্রেস আনতে একটি ফাংশন তৈরি করব।


 const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []);


উপরের কোডে, আমরা আইপি ঠিকানা সংরক্ষণ করার জন্য ipAddress নামে একটি স্টেট তৈরি করেছি। ipfy একটি পাবলিক API তাই আমাদের কোনো API কী প্রয়োজন নেই এবং আমরা সরাসরি URL ব্যবহার করতে পারি। useEffect এ আমরা fetchIp নামে একটি অ্যাসিঙ্ক ফাংশন তৈরি করেছি যা আইপি অ্যাড্রেসটিকে ipAddress অবস্থায় আনবে এবং সংরক্ষণ করবে। useEffectfetchIp ফাংশন কল করতে ভুলবেন না।


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


ব্যবহারকারীর অবস্থান ডেটা সংগ্রহ এবং পরিচালনার জন্য সর্বোত্তম অনুশীলন

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


  • আইপি বা জিওলোকেশন ডেটা কতটা সঠিক?
  • ব্যবহারকারী তার অবস্থান ব্যবহার করার সম্মতি না দিলে কী করবেন?
  • কীভাবে নিরাপদে ডেটা পরিচালনা এবং সুরক্ষা করবেন?


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


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


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


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


    উপসংহার

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


    • DevDreamning নামে আমার ওয়েবসাইট চেকআউট করুন।
    • আমার ইউটিউব চ্যানেল👇😉