একটি সম্পূর্ণ ওয়েদার ড্যাশবোর্ড তৈরি করুন: রিয়্যাক্ট বিগিনারদের জন্য স্টেপ-বাই-স্টেপ গাইড
আসসালামু আলাইকুম! এই ব্লগ পোস্টে আমরা ধাপে ধাপে একটি সম্পূর্ণ ফাংশনাল ওয়েদার ড্যাশবোর্ড তৈরি করব। ☀️🌧️ এই প্রজেক্টটি রিয়্যাক্ট বিগিনার ডেভেলপারদের জন্য বিশেষভাবে তৈরি করা হয়েছে, যাতে তারা একটি রিয়েল-ওয়ার্ল্ড প্রজেক্টে কাজ করার অভিজ্ঞতা লাভ করতে পারে। আমরা প্রজেক্টের প্রতিটি অংশ বিস্তারিতভাবে আলোচনা করব, সহজ-সরল ভাষায়, যাতে আপনি সহজেই বুঝতে এবং অনুসরণ করতে পারেন। চলুন, শুরু করা যাক!
প্রজেক্ট ওভারভিউ এবং ফিচারসমূহ
আমাদের ওয়েদার ড্যাশবোর্ডে বেশ কিছু আকর্ষণীয় ফিচার থাকবে:
- বর্তমান লোকেশনের আবহাওয়া: ব্রাউজার API ব্যবহার করে ব্যবহারকারীর বর্তমান Latitude ও Longitude নিয়ে OpenWeatherMap API থেকে আবহাওয়ার তথ্য এনে হোমপেজে দেখানো হবে।
- লোকেশন সার্চ: সার্চ অপশনে কোনো এলাকার নাম লিখে সার্চ করলে, OpenWeatherMap-এর geocoding API ব্যবহার করে সেই এলাকার Latitude ও Longitude বের করা হবে। এরপর সেই তথ্য দিয়ে আবহাওয়ার ডেটা এনে হোমপেজে আপডেট করা হবে।
- ফেভারিট লোকেশন: হোমপেজে "Add To Favorite" বাটন থাকবে। এই বাটনে ক্লিক করে বর্তমান লোকেশনের নাম, Latitude ও Longitude লোকাল স্টোরেজে সেভ করে রাখা যাবে। পুনরায় ক্লিক করলে তা লোকাল স্টোরেজ থেকে রিমুভ হয়ে যাবে। [cite: 2, 12]
- ফেভারিট লিস্ট: একটি ফেভারিট লিস্ট থাকবে, যেখানে ক্লিক করলে লোকাল স্টোরেজে সেভ করা লোকেশনগুলো দেখা যাবে। [cite: 2]
এই প্রজেক্টে আমরা রিয়্যাক্টের বিভিন্ন গুরুত্বপূর্ণ কনসেপ্ট যেমন কাস্টম হুকস (useWeather, useLocalStorage), কনটেক্সট এপিআই (WeatherContext, FavoriteContext), এবং লোকাল স্টোরেজ ব্যবহার করব। [cite: 2, 9, 11, 12]
প্রোজেক্টের গঠন এবং কম্পোনেন্টসমূহ
আমরা প্রথমে HTML টেমপ্লেট থেকে প্রয়োজনীয় রিয়্যাক্ট কম্পোনেন্টগুলো তৈরি করে নেব। [cite: 1] আমাদের প্রধান কম্পোনেন্টগুলো হবে:
- Header: এখানে থাকবে লোগো, সার্চ বার, এবং ফেভারিট লিস্ট দেখার জন্য একটি বাটন/আইকন। [cite: 2]
- Logo: অ্যাপ্লিকেশনের লোগো। [cite: 2]
- Search: লোকেশন সার্চ করার ইনপুট ফিল্ড। [cite: 2]
- Favorite: ফেভারিট লোকেশনগুলো দেখার জন্য বাটন। [cite: 2]
- FavoriteListModal: ফেভারিট লোকেশনগুলো দেখানোর জন্য একটি মোডাল। [cite: 2]
- WeatherBoard: এই কম্পোনেন্টে আবহাওয়ার মূল তথ্যগুলো দেখানো হবে। [cite: 2]
- WeatherSummary: আবহাওয়ার সারসংক্ষেপ (যেমন তাপমাত্রা, আর্দ্রতা)।
- WeatherCondition: বর্তমান আবহাওয়ার অবস্থা (যেমন মেঘলা, বৃষ্টি)। [cite: 2]
- AddToFavorite: বর্তমান লোকেশনকে ফেভারিট হিসেবে অ্যাড বা রিমুভ করার বাটন। [cite: 2]
API এবং কাস্টম হুকস
API (OpenWeatherMap)
এই প্রজেক্টে আমরা OpenWeatherMap API ব্যবহার করব আবহাওয়ার তথ্য আনার জন্য। এর জন্য আমাদের GEO Location (Latitude, Longitude) প্রয়োজন হবে। [cite: 2] API কলের সময় units=metric প্যারামিটার ব্যবহার করে আমরা তাপমাত্রা সেলসিয়াসে পাব। [cite: 2]
কাস্টম হুকস (Custom Hooks)
রিয়্যাক্টে কাস্টম হুকস আমাদের কম্পোনেন্ট লজিককে পুনঃব্যবহারযোগ্য ফাংশনে পরিণত করতে সাহায্য করে। আমরা কিছু কাস্টম হুক তৈরি করব: [cite: 2]
useWeather: এই হুকটি আবহাওয়ার ডেটা ফেচ করার এবং ডেটা মডেলিং করার জন্য তৈরি করা হবে। [cite: 3, 4]useLocalStorage: লোকাল স্টোরেজে ডেটা সেভ এবং রিট্রিভ করার জন্য এই হুকটি ব্যবহার করা হবে। [cite: 11]useDebounce: সার্চ ইনপুটের ক্ষেত্রে API কল অপটিমাইজ করার জন্য এই হুকটি কাজে লাগবে। [cite: 13]
useWeather হুক তৈরি এবং ডেটা মডেলিং
#hooks/useWeather.js নামে একটি ফাইল তৈরি করে আমরা useWeather হুকটি লিখব। [cite: 3] এই হুকের মূল কাজ হবে OpenWeatherMap API থেকে আবহাওয়ার ডেটা নিয়ে আসা এবং সেই ডেটাকে আমাদের প্রয়োজন অনুযায়ী সাজানো (Data Modeling)। [cite: 3, 4] কারণ API থেকে যে বিপুল পরিমাণ ডেটা আসে, তার সবকিছু আমাদের প্রয়োজন নাও হতে পারে। [cite: 3]
useWeather হুকের স্টেট (State):
এই হুকের মধ্যে আমরা কিছু স্টেট ম্যানেজ করব:
weatherData: এখানে আবহাওয়ার প্রক্রিয়াকৃত ডেটা থাকবে। এর মধ্যে যা যা দরকারি তথ্য, যেমন:location: জায়গার নাম। [cite: 5, 6]climate: আবহাওয়ার ধরন (যেমন: Clouds, Rain, Clear)। [cite: 5, 6]temperature: বর্তমান তাপমাত্রা। [cite: 5, 6]maxTemperature: দিনের সর্বোচ্চ তাপমাত্রা। [cite: 5, 6]minTemperature: দিনের সর্বনিম্ন তাপমাত্রা। [cite: 5, 6]humidity: আর্দ্রতা। [cite: 6]cloudPercentage: মেঘের পরিমাণ। [cite: 6]wind: বাতাসের গতি। [cite: 5, 6]time: ডেটা প্রাপ্তির সময়। [cite: 5]longitude: দ্রাঘিমাংশ। [cite: 5, 6]latitude: অক্ষাংশ। [cite: 5, 6]
loading: ডেটা লোড হচ্ছে কিনা, সেই অবস্থা ট্র্যাক করার জন্য। [cite: 5] প্রাথমিকভাবে এরstateহবেfalseএবংmessageখালি থাকবে। ডেটা ফেচিং শুরু হলেstate: trueএবংmessage: "Fetching Data"সেট করা হবে। [cite: 5]error: কোনো এরর ঘটলে তা এখানে স্টোর হবে। [cite: 5]
async fetchData ফাংশন:
useWeather হুকের ভেতরে একটি async ফাংশন থাকবে, ধরা যাক fetchData, যা API কল করে ডেটা আনবে এবং স্টেট আপডেট করবে। [cite: 5] useEffect হুকের বাইরে এই async ফাংশনটি তৈরি করা ভালো। [cite: 7]
বর্তমান লোকেশন:
ব্যবহারকারীর বর্তমান Latitude ও Longitude আমরা useCurrentLocation() নামে একটি কাস্টম হুক (অথবা সরাসরি ব্রাউজার Geolocation API) থেকে পেতে পারি। [cite: 8]
কনটেক্সট এপিআই (Context API)
আমরা Composition Pattern এবং Context Provider ব্যবহার করে আমাদের কাস্টম হুক useWeather থেকে প্রাপ্ত ডেটা পুরো অ্যাপ্লিকেশনে সরবরাহ করব। [cite: 9] এর জন্য WeatherContext তৈরি করা হবে। ContextProvider-এর মধ্যে useWeather কল করে প্রাপ্ত স্টেট ও ডেটা Provider-এর মাধ্যমে পাস করা হবে। [cite: 9]
ইউটিলিটি ফাংশন
কিছু ছোট ছোট কাজের জন্য আমরা ইউটিলিটি ফাংশন তৈরি করব:
getImage(climate): আবহাওয়ারclimate-এর উপর নির্ভর করে ডাইনামিকভাবে বিভিন্ন আইকন বা ছবি দেখানোর জন্য এই ফাংশনটি ব্যবহার করা হবে। এটি একটিswitch caseব্যবহার করে বিভিন্ন আবহাওয়ার জন্য নির্দিষ্ট আইকন ইমপোর্ট করে রিটার্ন করতে পারে। [cite: 10]getFormatedDate(time): API থেকে প্রাপ্তtime-কে সুন্দর ফরম্যাটে দেখানোর জন্য একটি ইউটিলিটি ফাংশন তৈরি করা হবে। [cite: 10, 11]
ফেভারিট লোকেশন ফিচার
FavoriteContext এবং FavoriteProvider:
ফেভারিট লোকেশনগুলো ম্যানেজ করার জন্য আমরা FavoriteContext তৈরি করব। [cite: 12] FavoriteProvider কম্পোনেন্টটি localStorage-কে একটি খালি অ্যারে ([]) দিয়ে ইনিশিয়ালাইজ করবে, যদি আগে থেকে কোনো ডেটা না থাকে। [cite: 12]
useLocalStorage কাস্টম হুক:
লোকাল স্টোরেজ থেকে ফেভারিট লোকেশনগুলো পড়া, নতুন লোকেশন যোগ করা বা ডিলিট করার কাজগুলো সহজে করার জন্য আমরা useLocalStorage নামে একটি কাস্টম হুক তৈরি করব। এই হুকটি setLocalStorage এবং getLocalStorage ফাংশন দেবে। [cite: 11, 12]
ফেভারিট লোকেশন অ্যাড ও রিমুভ ফাংশন:
addToFavorite(latitude, longitude, location): এই ফাংশনটিFavoriteProvider-এর মধ্যে থাকবে। এটি তিনটি প্যারামিটার নেবে:latitude,longitude, এবংlocation-এর নাম। [cite: 12] এই ফাংশন কল হলে লোকেশনটি লোকাল স্টোরেজে সেভ হবে।removeFavorite(location): এই ফাংশনটি লোকেশনের নাম প্যারামিটার হিসেবে নেবে এবং লোকাল স্টোরেজ থেকে সেই লোকেশনটি রিমুভ করবে। [cite: 12]
ফেভারিট লিস্ট দেখানোর সময়, UI লোড হওয়ার সাথে সাথে লোকাল স্টোরেজে কোনো লোকেশন সেভ করা আছে কিনা তা চেক করা হবে এবং থাকলে সেগুলো লিস্ট আকারে দেখানো হবে। [cite: 12]
সার্চ ফিচার
সার্চ বারে কোনো এলাকার নাম টাইপ করলে, প্রথমে OpenWeatherMap-এর geocoding API ব্যবহার করে সেই এলাকার Latitude ও Longitude বের করা হবে। তারপর প্রাপ্ত Latitude ও Longitude দিয়ে useWeather হুকের মাধ্যমে আবহাওয়ার ডেটা ফেচ করে হোমপেজের WeatherBoard-এ দেখানো হবে।
useDebounce কাস্টম হুক:
সার্চের সময় প্রতিটি অক্ষর টাইপ করার সাথে সাথে API কল করাটা পারফরম্যান্সের জন্য ভালো না। এই সমস্যা সমাধানের জন্য আমরা useDebounce নামে একটি কাস্টম হুক ব্যবহার করব। [cite: 13] এই হুকটি একটি কলব্যাক ফাংশন এবং একটি ডিলে সময় (delay) নেবে। [cite: 14] ব্যবহারকারী টাইপ করা বন্ধ করার নির্দিষ্ট সময় পর কলব্যাক ফাংশনটি (API কল) এক্সিকিউট হবে। [cite: 13, 14] এর জন্য useRef ব্যবহার করে timeoutID ম্যানেজ করা যেতে পারে। [cite: 14]
// useDebounce হুকের একটি বেসিক ধারণা
const useDebounce = (callback, delay) => {
const timeoutIdRef = useRef(null);
const debouncedCallback = (...args) => {
if (timeoutIdRef.current) {
clearTimeout(timeoutIdRef.current);
}
timeoutIdRef.current = setTimeout(() => {
callback(...args);
}, delay);
};
return debouncedCallback;
};ডাইনামিক ব্যাকগ্রাউন্ড ইমেজ
আবহাওয়ার climate-এর উপর নির্ভর করে ড্যাশবোর্ডের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করা যেতে পারে। [cite: 13] এর জন্য একটি switch case ব্যবহার করে বিভিন্ন আবহাওয়ার জন্য ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড ইমেজ সেট করা যেতে পারে। [cite: 13]
উপসংহার
আশা করি এই বিস্তারিত গাইডটি অনুসরণ করে আপনি সফলভাবে ওয়েদার ড্যাশবোর্ড প্রজেক্টটি তৈরি করতে পারবেন। প্রতিটি ধাপ মন দিয়ে পড়ুন, বুঝুন এবং নিজে কোড করার চেষ্টা করুন। এই প্রজেক্টটি আপনার রিয়্যাক্ট স্কিলকে আরও একধাপ এগিয়ে নিয়ে যাবে। শুভকামনা! 🚀