LoRa- ভিত্তিক ভিজ্যুয়াল মনিটরিং সিস্টেম এগ্রিকালচার আইওটি - ফায়ারবেস এবং কৌণিক ব্যবহার করে একটি ফ্রন্টেড অ্যাপ্লিকেশন ডিজাইন করা: 10 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:56

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

ধাপ 1: আপনার কম্পিউটারে কৌণিক সেটআপ করুন

কৌণিক হল সবচেয়ে জনপ্রিয় জাভাস্ক্রিপ্ট (যা আসলে টাইপস্ক্রিপ্ট) ভিত্তিক কাঠামো যা বেশিরভাগ সফটওয়্যার শিল্পে ব্যবহৃত হয়, যেহেতু আমরা আমাদের ব্যাকএন্ড (সার্ভার হিসাবে ব্যাকএন্ড) হিসাবে ফায়ারবেস ব্যবহার করি শুধুমাত্র আমাদের যা প্রয়োজন তা হল এই ব্যাকএন্ডটি ম্যানিপুলেট করার জন্য একটি ফ্রন্টএন্ড। তাহলে চলুন দেখে নেওয়া যাক কিভাবে এই প্রয়োজনীয় সবগুলি স্ক্র্যাচ থেকে ইনস্টল করা যায়।

বিবেচনা করুন এই পুরো টিউটোরিয়ালটি উইন্ডোজ 10 পরিবেশের উপর ভিত্তি করে এবং আশা করি আপনার কৌণিক এবং ফায়ারবেস সম্পর্কে প্রাথমিক জ্ঞান আছে।

উইন্ডোতে node.js এবং NPM ইনস্টল করুন।

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

আপনি এগিয়ে যাওয়ার আগে আপনি সফলভাবে নোড ইনস্টল করেছেন কিনা তা পরীক্ষা করুন।

কৌণিক ইনস্টল করুন।

আপনার কমান্ড লাইন টুলটি খুলুন এবং কমান্ডের নিচে চালান, npm install -g @angular/cli

এখন নিশ্চিত করুন যে আপনি সফলভাবে কৌণিক ইনস্টল করেছেন, আপনি এই টিউটোরিয়াল কৌণিক অফিসিয়াল ওয়েবসাইটের জন্য কৌণিক সম্পর্কে আরও জানতে পারেন।

পদক্ষেপ 2: আপনার প্রকল্পের কাঠামো সেটআপ করুন

যেখানে আপনি আপনার প্রকল্প তৈরি করতে চান সেখানে যান, আমার জন্য আমি D: / Angular-Projects এই অবস্থানটি ব্যবহার করেছি। সেই স্থানে কমান্ড লাইন প্রম্পট খুলুন। নিচের কমান্ড টাইপ করুন।

নতুন কৃষি-পর্যবেক্ষণ-ব্যবস্থা

তারপর কৌণিক সমস্ত প্রয়োজনীয় জিনিস তৈরি করবে যা আমরা আমাদের সামনের দিকে রাখতে চাই। ফ্রন্টএন্ড এবং ব্যাকএন্ড একসাথে সংযুক্ত করার আগে। আসুন কৌণিক এবং ফায়ারবেস সম্পর্কে কিছুটা শিখি।

কৌণিক

টিপিক্যাল ওয়েব আর্কিটেকচার কেমন দেখায় সে বিষয়ে কথা বলা যাক, ফ্রন্টএন্ড বা ক্লায়েন্ট সাইড ব্যাকএন্ড বা সার্ভার সাইড আছে, ক্লায়েন্ট সাইড মানে এটা যেখানে সব এইচটিএমএল, সিএসএস থাকে, কিন্তু কৌণিকভাবে আমাদের কন্টেন্টের জন্য স্পারেট ওয়েব পেজ তৈরি করতে হয় না যেমন, home.html, about.hml, index.html… ইত্যাদি। পুরো অ্যাপ্লিকেশনের জন্য একটি মাত্র পৃষ্ঠা আছে এটি index.html যখন ব্যবহারকারী অন্য পৃষ্ঠাগুলি দিয়ে যায় বা অন্যটিতে index.html থাকে সেই পৃষ্ঠাগুলির ধারণার সাথে রেন্ডার করতে যাচ্ছে যার অর্থ নির্দিষ্ট পৃষ্ঠার html এবং css ভিউ। তাই আমাদের পুরো অ্যাপ্লিকেশনটিতে শুধুমাত্র একটি একক.html পৃষ্ঠা রয়েছে। এটাকেই আমরা SPA বলতাম। সুতরাং আসুন আমাদের অ্যাপ্লিকেশন তৈরি করি। সিএমডি খুলুন একই ডিরেক্টরিতে নীচের কমান্ড টাইপ করুন।

এনজি জেনারেট কম্পোনেন্ট হোম।

এটি আপনার হোম পেজ ধারণ করবে, তারপর আপনি একটি home.ts ফাইল এবং home.html ফাইল এবং home.css দেখতে পাবেন। css যেখানে আপনি হোম পেজের জন্য আপনার স্টাইল যোগ করতে যাচ্ছেন, এবং সবশেষে home.ts ফাইল যেখানে আপনি আমাদের ব্যাকএন্ডের সাথে কাজ করার জন্য টাইপস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট কোড কোড করতে যাচ্ছেন।

ধাপ 3: বুটস্ট্র্যাপ 4 ইনস্টল করা

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

npm বুটস্ট্র্যাপ install 3 ইনস্টল করুন

এখন আপনি কিভাবে আমাদের ওয়েব পেজ গঠন করতে পারেন তা নিয়ে চিন্তা করতে হবে না, বুটস্ট্র্যাপ কাজটি করবে।

ধাপ 4: রুট সংজ্ঞায়িত করা

আউট আইওটি প্রকল্পে আমরা হেডার, ফুটার, তাপমাত্রা, আর্দ্রতা, Co2 শতাংশ, মাটির আর্দ্রতা সংগ্রহ করতে যাচ্ছি। তাই আমরা 4 টি ওয়েব পেজ তৈরি করতে যাচ্ছি যার অর্থ কৌণিকভাবে আমরা এই প্রতিটি সূচকের জন্য 4 টি উপাদান তৈরি করতে যাচ্ছি।

AppModule কম্পোনেন্টে কৌণিক রাউটার মডিউল আমদানি করুন।

পৃথক ফাইলে রুটগুলি সংজ্ঞায়িত করুন।

const রুট: রুট = [{পথ: 'প্রথম উপাদান', উপাদান: HomeComponent}, {পথ: 'দ্বিতীয় উপাদান', উপাদান: HumiComponent},];

AppMoodule এ আমদানি ট্যাগের ভিতরে কোডের এই লাইনগুলো যোগ করুন।

GNgModule ({আমদানি: [RouterModule.forRoot (রুট)], রপ্তানি: [RouterModule]})

আসুন আমাদের header.html ফাইলের মধ্যে বুটস্ট্র্যাপ নেভিগেশন বার কোড যুক্ত করি এবং আমাদের উপাদানগুলিকে লিঙ্ক করি,

ধাপ 5: ফায়ারবেস

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

ধাপ 01: আপনার gamil অ্যাকাউন্টে লগইন করুন

ধাপ 02: আপনার সার্চ বারে ফায়ারবেস কনসোল টাইপ করুন

ধাপ 03: এখন আপনার কাজ শেষ।

ধাপ 6: Angular এ Firebase ইনস্টল করুন

ফায়ারবেস নিয়ে কাজ করার জন্য আমরা ইনস্টল করেছি বা অন্তর্ভুক্ত করেছি যে লাইব্রেরিকে ফায়ারবেস এবং কৌণিককে একসাথে সংযুক্ত করতে সাহায্য করে। আপনার প্রকল্পের পথে যান এবং সিএমডি খুলুন এবং নীচের কোডটি টাইপ করুন।

npm firebase @angular/fire --save ইনস্টল করুন

ধাপ 7: আমাদের কৌণিক প্রকল্পকে ফায়ারবেসের সাথে সংযুক্ত করা।

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

রপ্তানি const পরিবেশ = {

উত্পাদন: সত্য, ফায়ারবেস: {

আপনার কনফিগারেশনের বিস্তারিত এখানে …

}

};

এবং app.module.ts এর ভিতরে নীচের কোডগুলিও যোগ করুন

আমদানি: [AngularFireModule.initializeApp (Environment.firebase),…।],

ধাপ 8: আপনার কৌণিক প্রকল্পে NgxCharts লাইব্রেরি ইনস্টল করা

প্রজেক্ট পাথে যান যেমন আমরা আগের ধাপে করেছি, আপনার সিএমডিতে নীচের কোডটি টাইপ করুন।

npm i @সাঁতারের বিমান/ngx-charts-save

NgxChart অফিসিয়াল সাইট এই সাইটে যান এবং আপনি যে চার্টটি চান তা ধরুন। আমি লাইন চার্ট দিয়ে পছন্দ করেছি। এই url এ যান এবং কোডটি ধরুন এবং সংশ্লিষ্ট উপাদানগুলিতে যোগ করুন।

ধাপ 9: একটি পরিষেবা শ্রেণী এবং রিয়েলটাইম ডাটাবেস তৈরি করুন।

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

async getData () {

this.items = ;

নতুন প্রতিশ্রুতি ফিরান ((সমাধান) => {

এই ডাটাবেস। তালিকা (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges ()। সাবস্ক্রাইব (স্ন্যাপশট => {

snapshot.forEach (উপাদান => {

যদি (! element.key.startsWith ('current_hum')) {

this.items.push ({

নাম: মুহূর্ত (element.payload.val () ['date'], 'YYYY-M-DD hh: mm: ss')। বিন্যাস ('YYYY-MM-DD hh: mm'), মান: element.payload.val () ['মান']

});

}

});

সমাধান (this.items);

});

});

}

এটি ডাটাবেসে হাম নোডের অধীনে সংরক্ষিত ডেটা অ্যাক্সেস করার জন্য সার্ভিস ক্লাস কোড, আপনাকে যা করতে হবে তা হল এই ক্লাস getData () ফাংশন যেখানে আপনি আপনার চার্ট তৈরি করতে চান।

async ngOnInit () {this.items = অপেক্ষায় this.humService.getData ();

this.multi = [{{

নাম: '%', সিরিজ: এই

}];

}

এখানে আমাদের কম্পোনেন্ট ক্লাস ngOnInit পদ্ধতির ভিতরে আমরা কল করেছি আমাদের সার্ভিস পপুলেটেড মাল্টি অ্যারে যা অ্যারে যা আমাদের গ্রাফের মানগুলো পাস করতে হবে।

ধাপ 10: আপনার প্রকল্প কম্পাইল করুন

আপনার প্রজেক্ট ফোল্ডারে যান এবং সিএমডি খুলুন এবং এনজি সার্ভার টাইপ করুন, তারপর সমস্ত টাইপস্ক্রিপ্ট কোড জাভাস্ক্রিপ্টে রূপান্তরিত হতে চলেছে। এবং যে ইউআরএলটি সিএমডি আপনাকে প্রম্পট করতে যাচ্ছে তা টাইপ করুন, উপরের প্রকল্পের জন্য https:// localhost: 4200/home এবং আপনার কাজ শেষ।