এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

স্বতন্ত্র উপাদান দিয়ে শুরু করা

1. ভূমিকা

যা আপনি নির্মাণ করবেন

এই কোডল্যাবে, আপনি Angular v14 ব্যবহার করে একটি বন্যপ্রাণী ফটো গ্যালারি অ্যাপ্লিকেশন তৈরি করবেন। সম্পূর্ণ করা অ্যাপ্লিকেশনটি ফটোগুলির একটি সেট প্রদর্শন করবে এবং এতে ফটোগ্রাফারের সাথে যোগাযোগ করার জন্য একটি পাঠান বার্তা ফর্ম এবং ফটোগুলিতে চিত্রিত প্রাণীদের সম্পর্কে দুর্দান্ত তথ্য জানতে একটি চ্যাট উইন্ডো থাকবে৷

আপনি কৌণিক v14 এবং নতুন স্বতন্ত্র উপাদান বৈশিষ্ট্য ব্যবহার করে আপনার অ্যাপ্লিকেশনে সবকিছু তৈরি করেন।

কৌণিক কাঠামো এবং কৌণিক CLI-এর সমস্ত রেফারেন্স কৌণিক v14 প্রতিফলিত করে। স্বতন্ত্র উপাদানগুলি হল Angular v14 এর একটি পূর্বরূপ বৈশিষ্ট্য, তাই আপনাকে অবশ্যই Angular v14 ব্যবহার করে একটি নতুন অ্যাপ্লিকেশন তৈরি করতে হবে। স্বতন্ত্র উপাদানগুলি কৌণিক অ্যাপ্লিকেশন তৈরি করার একটি সরলীকৃত উপায় প্রদান করে। স্বতন্ত্র উপাদান, স্বতন্ত্র নির্দেশাবলী এবং স্ট্যান্ড একা পাইপগুলির লক্ষ্য হল NgModules এর প্রয়োজনীয়তা হ্রাস করে লেখক অভিজ্ঞতাকে স্ট্রীমলাইন করা। স্বতন্ত্র উপাদানগুলি কৌণিক লাইব্রেরির বিদ্যমান বাস্তুতন্ত্রের সম্পূর্ণ সুবিধা নিতে সক্ষম।

এই অ্যাপ্লিকেশন আপনি আজ নির্মাণ করা হয়.

সম্পূর্ণ আবেদন

যা শিখবেন

কিভাবে একটি নতুন প্রকল্প ভারা জন্য Angular CLI ব্যবহার করবেন
কৌণিক অ্যাপ্লিকেশানগুলির বিকাশকে প্রবাহিত করতে কৌণিক স্বতন্ত্র উপাদানগুলি কীভাবে ব্যবহার করবেন৷
কিভাবে একটি স্বতন্ত্র উপাদান তৈরি করতে হয়; যা কিভাবে UI তৈরি করতে হয় এবং কিছু ব্যবসায়িক যুক্তি যোগ করতে হয়
একটি স্বতন্ত্র উপাদান ব্যবহার করে একটি অ্যাপ্লিকেশন বুটস্ট্র্যাপ কিভাবে
কিভাবে অলস লোড একটি স্বতন্ত্র উপাদান
ডায়ালগফ্লো মেসেঞ্জার ব্যবহার করে কীভাবে একটি স্বতন্ত্র উপাদানে একটি চ্যাট সংলাপ এম্বেড করবেন
গুগল ক্লাউড সিএলআই (জিক্লাউড) ব্যবহার করে কীভাবে গুগল ক্লাউড অ্যাপ ইঞ্জিনে একটি কৌণিক অ্যাপ্লিকেশন স্থাপন করবেন

আপনি কি প্রয়োজন হবে

একটি Gmail বা Google Workspace অ্যাকাউন্ট
নিম্নলিখিত বিষয়ের প্রাথমিক জ্ঞান
- এইচটিএমএল কিভাবে একটি উপাদান তৈরি করতে হয়।
- সিএসএস এবং কম। কিভাবে একটি CSS নির্বাচক ব্যবহার করবেন এবং একটি শৈলী সংজ্ঞা ফাইল তৈরি করবেন।
- টাইপস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট। কিভাবে DOM কাঠামোর সাথে ইন্টারঅ্যাক্ট করবেন।
- git এবং GitHub। কিভাবে কাঁটাচামচ এবং একটি সংগ্রহস্থল ক্লোন.
- কমান্ড-লাইন ইন্টারফেস, যেমন bash বা zsh । কিভাবে ডিরেক্টরি নেভিগেট করবেন এবং কমান্ড চালাবেন।

2. পরিবেশ সেটআপ

আপনার স্থানীয় পরিবেশ সেট আপ করুন

এই কোডল্যাবটি সম্পূর্ণ করতে, আপনাকে অবশ্যই আপনার স্থানীয় কম্পিউটারে নিম্নলিখিত সফ্টওয়্যারটি ইনস্টল করতে হবে।

Node.js এর একটি সক্রিয় LTS বা রক্ষণাবেক্ষণ LTS সংস্করণ। কৌণিক কাঠামো এবং কৌণিক CLI ইনস্টল করতে ব্যবহৃত হয়।

নোড সংস্করণ	কৌণিক দ্বারা সমর্থিত
14.15 বা নতুন	সমর্থিত
16.10 বা নতুন	সমর্থিত
18.1.0	সমর্থিত নয়

আপনার স্থানীয় কম্পিউটারে Node.js-এর সংস্করণ যাচাই করতে, একটি কমান্ড-লাইন উইন্ডো থেকে নিম্নলিখিত node কমান্ডটি চালান।

node -v

একটি কোড সম্পাদক বা IDE। ফাইল খুলতে এবং সম্পাদনা করতে ব্যবহৃত হয়। ভিজ্যুয়াল স্টুডিও কোড , বা আপনার পছন্দের অন্য কোড সম্পাদক।

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

আপনি সমস্ত নির্ভরতা কনফিগার করার পরে, কমান্ড-লাইন উইন্ডো থেকে কৌণিক CLI ইনস্টল করতে নিম্নলিখিত npm কমান্ডটি চালান।

npm install --global @angular/cli

আপনার কনফিগারেশন সঠিক কিনা তা নিশ্চিত করতে, একটি কমান্ড-লাইন থেকে নিম্নলিখিত কৌণিক কমান্ডটি চালান।

ng version

কৌণিক কমান্ড সফলভাবে সম্পন্ন হলে, আপনি নিম্নলিখিত স্ক্রীন ক্যাপচারের মতো একটি বার্তা পাবেন।

কৌণিক সংস্করণের টার্মিনাল আউটপুট

সোর্স কোড এবং ছবি

আপনি স্ক্র্যাচ থেকে পুরো অ্যাপ্লিকেশন তৈরি করেন এবং এই ধাপে ধাপে কোডল্যাব আপনাকে সহায়তা করে। মনে রাখবেন যে GitHub সংগ্রহস্থলে চূড়ান্ত কোড রয়েছে। আপনি আটকে গেলে, গ্যালারি পৃষ্ঠায় প্রদর্শিত চূড়ান্ত কোড এবং চিত্রগুলি পর্যালোচনা করুন৷

সোর্স কোড ডাউনলোড করতে।

আপনার ব্রাউজারে, নিম্নলিখিত পৃষ্ঠাটি নেভিগেট করুন।
```
https://github.com/angular/codelabs/tree/standalone-components
```
একটি কমান্ড-লাইন উইন্ডোতে, সংগ্রহস্থলটি কাঁটাচামচ এবং ক্লোন করুন।

পরবর্তী ধাপে, আপনার ফটো গ্যালারি অ্যাপ্লিকেশন তৈরি করুন।

3. একটি নতুন অ্যাপ্লিকেশন তৈরি করুন৷

প্রাথমিক স্টার্টার অ্যাপ্লিকেশন তৈরি করতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

একটি নতুন কর্মক্ষেত্র তৈরি করতে কৌণিক CLI ব্যবহার করুন। কৌণিক CLI এবং কৌণিক কাঠামো সম্পর্কে আরও জানতে, angular.io এ যান।

একটি নতুন প্রকল্প তৈরি করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

photo-gallery-app নামে একটি নতুন কৌণিক প্রকল্প তৈরি করতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng new photo-gallery-app
```
প্রতিটি প্রম্পটে, ডিফল্ট পছন্দ গ্রহণ করুন। কৌণিক কাঠামো প্রয়োজনীয় প্যাকেজ এবং নির্ভরতা ইনস্টল করে। প্রক্রিয়াটি কয়েক মিনিট সময় নিতে পারে।

Angular CLI সম্পূর্ণ হওয়ার পরে, আপনার কাছে একটি নতুন Angular ওয়ার্কস্পেস এবং একটি সহজ রেডি-টু-রান অ্যাপ্লিকেশন রয়েছে।

আপনার নতুন অ্যাপ্লিকেশনটি একটি আদর্শ কৌণিক অ্যাপ্লিকেশনের মতো গঠন করা হয়েছে। আপনার নতুন অ্যাপ্লিকেশনের NgModule এই কোডল্যাবের জন্য অপ্রয়োজনীয়।

অ্যাপ্লিকেশন মডিউল সরান

অ্যাপ্লিকেশন মডিউল সরাতে, নিম্নলিখিত কর্ম সম্পূর্ণ করুন.

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.module.ts ফাইলটি মুছুন।

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

আপনার স্বতন্ত্র উপাদান ঘোষণা করুন

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.component.ts ফাইলটি খুলুন।
আপনার সাজসজ্জার তালিকায় নিম্নলিখিত প্যারামিটার এবং মান যোগ করুন।
```
standalone: true
```
app.component.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে ঘনিষ্ঠভাবে মেলে।
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
```
app.component.ts ফাইলটি সংরক্ষণ করুন।

আপনার নতুন স্বতন্ত্র অ্যাপ্লিকেশন কম্পাইল করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন
আপনার নতুন অ্যাপ্লিকেশন কম্পাইল করতে নিম্নলিখিত কৌণিক কমান্ড লিখুন।
```
ng serve
```

আপনার অ্যাপ্লিকেশন কম্পাইল করতে ব্যর্থ হওয়া উচিত. চিন্তা করবেন না, আপনাকে আরও কয়েকটি জিনিস ঠিক করতে হবে।

bootstrapApplication API ব্যবহার করুন

আপনার অ্যাপ্লিকেশনটিকে NgModule ছাড়া চালানোর অনুমতি দেওয়ার জন্য, আপনাকে অবশ্যই একটি স্বতন্ত্র উপাদান ব্যবহার করতে হবে রুট উপাদান হিসাবে bootstrapApplication API ব্যবহার করে।

অ্যাপ্লিকেশন মডিউল রেফারেন্স সরান

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src ডিরেক্টরিতে নেভিগেট করুন
main.ts ফাইলটি খুলুন।
নিম্নলিখিত আমদানি কোডটি সরান, যেহেতু আপনার কাছে আর একটি অ্যাপ্লিকেশন মডিউল নেই৷
```
import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
```
নিম্নলিখিত বুটস্ট্র্যাপ কোডটি সরান, যেহেতু আপনার কাছে আর কোনো অ্যাপ্লিকেশন মডিউল নেই।
```
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
```
main.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।
```
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
```

বুটস্ট্র্যাপ অ্যাপ্লিকেশন উপাদান যোগ করুন

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src ডিরেক্টরিতে নেভিগেট করুন।
main.ts ফাইলটি খুলুন।
@angular/platform-browser পরিষেবা থেকে bootstrapApplication উপাদান আমদানি করুন।
```
import { bootstrapApplication } from '@angular/platform-browser';
```
আপনার অ্যাপ্লিকেশন বুটস্ট্র্যাপ করতে নিম্নলিখিত কোড যোগ করুন.
```
bootstrapApplication(AppComponent).catch(err => console.error(err));
```

উপাদান এবং প্রয়োজনীয় লাইব্রেরি আমদানি করুন।

import { AppComponent } from './app/app.component';

main.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

রাউটার এবং সাধারণ মডিউল যোগ করুন

রাউটার এবং অন্যান্য সাধারণ মডিউল বৈশিষ্ট্যগুলি ব্যবহার করতে আপনাকে প্রতিটি মডিউল সরাসরি উপাদানে আমদানি করতে হবে।

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.component.ts ফাইলটি খুলুন।

উপাদানে প্রয়োজনীয় মডিউল আমদানি করুন।

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

কম্পোনেন্টে আমদানি যোগ করুন।

imports: [CommonModule, RouterModule],

app.component.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}

app.component.ts ফাইলটি সংরক্ষণ করুন।

কম্পাইল এবং আপনার নতুন স্বতন্ত্র অ্যাপ্লিকেশন চালান

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশানটি কম্পাইল এবং রান করতে এবং একটি ওয়েব সার্ভার খুলতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান। কোনো সংকলন ত্রুটি দূর করতে আপনার অ্যাপ্লিকেশন চালানোর আগে আপনার IDE বন্ধ করতে হতে পারে।
```
ng serve
```

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

এর পরে, আপনি কিছু ফটো প্রদর্শন করতে আপনার অ্যাপ্লিকেশনটিকে সুন্দর করতে যাচ্ছেন।

4. ফটোগুলি প্রদর্শন করুন

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

উপাদানগুলি হল কৌণিক অ্যাপগুলির মূল বিল্ডিং ব্লক৷ উপাদান 3 প্রধান দিক আছে.

টেমপ্লেটের জন্য একটি HTML ফাইল
শৈলীর জন্য একটি CSS ফাইল
অ্যাপের আচরণের জন্য একটি টাইপস্ক্রিপ্ট ফাইল

আপনার অ্যাপ্লিকেশনে ফটো সরান

আপনি পূর্বে গিটহাব থেকে ডাউনলোড করেছেন এমন অ্যাপ্লিকেশনটিতে ছবিগুলি সরবরাহ করা হয়েছে।

GitHub প্রকল্পের src/assets ডিরেক্টরিতে নেভিগেট করুন।
আপনার photo-gallery-app প্রকল্প ডিরেক্টরির analogue ডিরেক্টরিতে ফাইলগুলি অনুলিপি করুন এবং আটকান।

HTML টেমপ্লেট তৈরি করুন

app.component.html ফাইলটি হল AppComponent উপাদানের সাথে যুক্ত HTML টেমপ্লেট ফাইল।

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.component.html ফাইলটি খুলুন।
সমস্ত বিদ্যমান HTML মুছুন।

নিম্নলিখিত কোড উদাহরণ থেকে HTML কপি এবং পেস্ট করুন.

<article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article

app.component.html ফাইলটি সংরক্ষণ করুন।

শৈলী সংজ্ঞা ফাইল তৈরি করুন

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src ডিরেক্টরিতে নেভিগেট করুন।
styles.css ফাইলটি খুলুন।

নিম্নলিখিত কোড উদাহরণ থেকে CSS কপি এবং পেস্ট করুন.

article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

styles.css ফাইলটি সংরক্ষণ করুন

ইনডেক্স ফাইল আপডেট করুন

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src ডিরেক্টরিতে নেভিগেট করুন।
index.html ফাইলটি খুলুন।
সমস্ত পৃষ্ঠাগুলিকে এটির উত্তরাধিকারী করার অনুমতি দিতে Raleway ফন্ট যোগ করুন।
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
index.html ফাইলটি সংরক্ষণ করুন।
কোড সংরক্ষণ করুন এবং আপনার ব্রাউজার পরীক্ষা করুন. ডেভেলপমেন্ট সার্ভার চলার সাথে, আপনি যখন সংরক্ষণ করেন তখন পরিবর্তনগুলি ব্রাউজারে প্রতিফলিত হয়।
এরপরে, আপনি প্রতিক্রিয়া পাঠাতে এবং জিম্বোর সাথে চ্যাট করার জন্য একটি নতুন স্বতন্ত্র উপাদান তৈরি করতে যাচ্ছেন। জিম্বো সম্পর্কে আরও জানতে এই কোডল্যাবটি চালিয়ে যান।

5. একটি নতুন স্বতন্ত্র উপাদান যোগ করুন

আপনি এখন পর্যন্ত দেখেছেন, স্বতন্ত্র উপাদানগুলি NgModules-এর প্রয়োজনীয়তা হ্রাস করে কৌণিক অ্যাপ্লিকেশনগুলি তৈরি করার একটি সরলীকৃত উপায় সরবরাহ করে। নিম্নলিখিত বিভাগগুলিতে, আপনি একটি নতুন স্বতন্ত্র উপাদান তৈরি করেন যা ব্যবহারকারীকে প্রতিক্রিয়া পাঠাতে এবং ভার্চুয়াল এজেন্টের সাথে চ্যাট করতে দেয়।

একটি নতুন স্বতন্ত্র উপাদান তৈরি করুন

এই নতুন উপাদান তৈরি করতে, আপনি আবার কৌণিক CLI ব্যবহার করুন।

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।

feedback-and-chat নামে একটি নতুন উপাদান তৈরি করতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।

ng generate component feedback-and-chat --standalone

নিম্নলিখিত সারণী কমান্ডের অংশগুলি বর্ণনা করে।

অংশ	বিস্তারিত
`ng`	কৌণিক কাঠামোর জন্য সমস্ত কৌণিক CLI কমান্ড সংজ্ঞায়িত করে
`generate component`	একটি নতুন উপাদানের জন্য ভারা তৈরি করে
`feedback-and-chat`	উপাদানটির নাম
`--standalone`	কৌণিক কাঠামোকে একটি স্বতন্ত্র উপাদান তৈরি করতে বলে

নতুন স্বতন্ত্র উপাদান আমদানি করুন

নতুন স্বতন্ত্র উপাদান ব্যবহার করতে, আপনাকে প্রথমে এটিকে app.components.ts ফাইলের imports অ্যারেতে যোগ করতে হবে।

এটি একটি স্বতন্ত্র উপাদান, তাই আপনি এটিকে আমদানি করেন যেন এটি একটি মডিউল।

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.component.ts ফাইলটি খুলুন।

নতুন স্বতন্ত্র উপাদান আমদানি করুন.

import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

কম্পোনেন্টে আমদানি আপডেট করুন।

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

app.component.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}

app.component.ts ফাইলটি সংরক্ষণ করুন।

অলস লোড উপাদান

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

অ্যাপ্লিকেশন উপাদানের সাথে যুক্ত HTML টেমপ্লেট আপডেট করুন

স্বতন্ত্র উপাদানটি অলসভাবে লোড করার জন্য, UI-তে একটি বোতাম যুক্ত করুন যা শুধুমাত্র একজন ব্যবহারকারী নির্বাচন করলে উপাদানটিকে সক্রিয় করে।

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src/app ডিরেক্টরিতে নেভিগেট করুন।
app.component.html ফাইলটি খুলুন।
ফাইলের শেষে স্ক্রোল করুন এবং article উপাদানটি বন্ধ করার আগে নিম্নলিখিত কোড উদাহরণ যোগ করুন।
```
<a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet> 
```

app.component.html ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

<article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>

app.component.html ফাইলটি সংরক্ষণ করুন।

আপনার রুট কনফিগার করুন

একটি কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে src ডিরেক্টরিতে নেভিগেট করুন।
main.ts ফাইলটি খুলুন
provideRouter পদ্ধতি এবং রুট মডিউল আমদানি করুন। Angular v 14.2.0 একটি নতুন প্রোভাইডার রাউটার পদ্ধতি চালু করেছে যা আমাদের অ্যাপ্লিকেশনের জন্য রুটের একটি সেট কনফিগার করতে দেয়।
```
import { provideRouter, Routes } from '@angular/router';
```
আমদানি এবং if স্টেটমেন্টের মধ্যে নিম্নলিখিত কোড স্নিপেটটি অনুলিপি করুন এবং আটকান।
```
const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
```

নিম্নলিখিত কোড স্নিপেটটি অনুলিপি করুন এবং পেস্ট করুন এবং bootstrapApplication পদ্ধতিটি প্রতিস্থাপন করুন।

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

main.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => 
      import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

main.ts ফাইলটি সংরক্ষণ করুন।

ক্রোম বিকাশকারী সরঞ্জামগুলির সাথে কম্পাইল করুন এবং পর্যালোচনা করুন৷

অ্যাঙ্গুলার ফ্রেমওয়ার্ক অলস কীভাবে উপাদান লোড করে তা পর্যালোচনা করতে Chrome বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন৷

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশানটি কম্পাইল এবং রান করতে এবং একটি ওয়েব সার্ভার খুলতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng serve
```
আপনার ডেভেলপমেন্ট সার্ভার পোর্ট 4200 এ চালানো উচিত।

আপনার ব্রাউজারে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

নিম্নলিখিত পৃষ্ঠায় নেভিগেট করুন.
```
http://localhost:4200
```
Chrome ডেভেলপার টুল খুলুন এবং নেটওয়ার্ক ট্যাব বেছে নিন।
বেশ কয়েকটি ফাইল প্রদর্শন করতে পৃষ্ঠাটি রিফ্রেশ করুন, কিন্তু feedback-and-chat উপাদান নয়৷ আপনার স্ক্রীনটি নিম্নলিখিত স্ক্রীন ক্যাপচারের সাথে মেলে৷
এই ছেলেদের সম্পর্কে আরও জানুন নির্বাচন করুন! স্বতন্ত্র উপাদানে যাওয়ার জন্য বোতাম। লগটি নির্দেশ করবে যে উপাদানটি শুধুমাত্র লোড হবে যখন আপনি সম্পূর্ণ রাউটারে আঘাত করবেন। কম্পোনেন্ট লোড হয়েছে তা পরীক্ষা করতে তালিকার শেষ পর্যন্ত স্ক্রোল করুন। আপনার স্ক্রীন নিম্নলিখিত স্ক্রীন ক্যাপচারের সাথে মেলে।

6. ফর্মের জন্য UI যোগ করুন

সেন্ড ফিডব্যাক ফর্মটিতে তিনটি ইনপুট UI ক্ষেত্র এবং নীচে একটি বোতাম রয়েছে৷ তিনটি ইনপুট UI ক্ষেত্র হল পুরো নাম, প্রেরকের ইমেল ঠিকানা এবং মন্তব্য।

UI সমর্থন করতে, একটি input উপাদানে একটি formControlName অ্যাট্রিবিউট যোগ করুন যা তিনটি ইনপুট UI ক্ষেত্রের প্রতিটির সাথে সম্পর্কিত প্রতিটি contactForm ফর্ম নিয়ন্ত্রণের সাথে আবদ্ধ হয়৷

HTML টেমপ্লেটে ফর্ম যোগ করুন

একজন ব্যবহারকারীকে প্রতিক্রিয়া পাঠাতে অনুমতি দিতে UI-তে একটি ফর্ম যোগ করুন।

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

feedback-and-chat.component.html ফাইলে নেভিগেট করুন।
বিদ্যমান HTML সরান।

নিম্নলিখিত কোড উদাহরণ থেকে HTML কপি এবং পেস্ট করুন.

<article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>

feedback-and-chat.component.html ফাইলটি সংরক্ষণ করুন।

ফর্মের জন্য শৈলী ফাইল আপডেট করুন

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

feedback-and-chat.component.css ফাইলে নেভিগেট করুন।

নিম্নলিখিত কোড উদাহরণ থেকে CSS কপি এবং পেস্ট করুন.

/*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

feedback-and-chat.component.css ফাইলটি সংরক্ষণ করুন।

ফর্মের জন্য UI আপডেট কম্পাইল করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশানটি কম্পাইল এবং রান করতে এবং একটি ওয়েব সার্ভার খুলতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng serve
```
আপনার অ্যাপ্লিকেশন কম্পাইল করতে ব্যর্থ হওয়া উচিত. চিন্তা করবেন না, আপনাকে ফর্মটি বাঁধতে হবে।
এখন জন্য, নিম্নলিখিত আইটেম পর্যালোচনা করুন.
- আপনি form এলিমেন্টের সাথে contactForm এবং ngSubmit ইভেন্ট বাইন্ডিং করতে formGroup প্রপার্টি বাইন্ডিং ব্যবহার করেন
- FormGroup নির্দেশিকা form উপাদান দ্বারা নির্গত জমা ইভেন্টের জন্য শোনে। তারপর, FormGroup নির্দেশিকা একটি ngSubmit ইভেন্ট নির্গত করে যা আপনি onSubmit কলব্যাক ফাংশনের সাথে আবদ্ধ করতে সক্ষম।
- পরবর্তী ধাপে, আপনি feedback-and-chat.component.ts ফাইলে onSubmit কলব্যাক ফাংশনটি বাস্তবায়ন করবেন
পরবর্তী, আপনি ফর্ম বাঁধাই যাচ্ছে.

7. ফর্মে ইভেন্ট হ্যান্ডলিং যোগ করুন

প্রতিক্রিয়া পাঠানোর ফর্মের জন্য UI সম্পূর্ণ, কিন্তু এটি ইন্টারঅ্যাকশন অনুপস্থিত। ফর্ম সহ ব্যবহারকারীর ইনপুট পরিচালনা করা অনেক সাধারণ অ্যাপ্লিকেশনের ভিত্তি।

একটি বাস্তব পরিস্থিতিতে, আপনাকে নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করতে ব্যবসায়িক যুক্তি প্রয়োগ করতে হবে।

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

এই কোডল্যাবে, আপনি শুধুমাত্র নিম্নলিখিত ক্রিয়াগুলি বাস্তবায়ন করেন।

কম্পোনেন্টের সাথে যুক্ত রেন্ডার করা DOM স্ট্রাকচার থেকে ইউজার ইনপুট পার্স করুন।
ব্যবহারকারীর কাছে একটি বন্ধুত্বপূর্ণ বার্তা প্রদর্শন করুন।

আপনার দক্ষতাকে চ্যালেঞ্জ করা উচিত এবং চারটি কাজই বাস্তবায়ন করা উচিত।

উপাদানে পাঠান বার্তা ফর্ম মডেল যোগ করুন

কম্পোনেন্ট ক্লাসে ফিডব্যাক ফর্ম মডেল তৈরি করুন এবং যোগ করুন। ফর্ম মডেল ফর্মের স্থিতি নির্ধারণ করে। FormBuilder পরিষেবা একটি UI নিয়ন্ত্রণ তৈরি করার জন্য সুবিধাজনক পদ্ধতি প্রদান করে।

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

feedback-and-chat.component.ts ফাইলে নেভিগেট করুন।
@angular/forms প্যাকেজ থেকে FormBuilder পরিষেবা এবং ReactiveModule মডিউল আমদানি করুন। এই পরিষেবাটি নিয়ন্ত্রণ তৈরি করার জন্য সুবিধাজনক পদ্ধতি প্রদান করে। পরবর্তী ধাপে আমরা inject ফাংশনটি ব্যবহার করব তাই আমাদের সেটিকেও @angular/core থেকে আমদানি করতে হবে।
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```
ReactiveFormsModule মডিউল আমদানি করুন।
```
imports: [CommonModule,ReactiveFormsModule],
```
নিম্নলিখিত কনস্ট্রাক্টর সরান।
```
constructor() { }
```
শ্রেণী স্বাক্ষরের ঠিক নীচে inject ফাংশনের মাধ্যমে FormBuilder পরিষেবাটি ইনজেক্ট করুন।
```
private formBuilder = inject(FormBuilder);
```
একজন ব্যবহারকারীর কাছ থেকে নাম, ইমেল ঠিকানা এবং মন্তব্য সংগ্রহ করার জন্য ফর্ম মডেল তৈরি করতে FormBuilder পরিষেবা থেকে group পদ্ধতি ব্যবহার করুন।
নতুন contactForm বৈশিষ্ট্য তৈরি করুন এবং একটি ফর্ম মডেলে সেট করতে group পদ্ধতি ব্যবহার করুন৷ ফর্ম মডেলটিতে name , email এবং comments ক্ষেত্র রয়েছে৷
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
ফর্মটি পরিচালনা করার জন্য একটি onSubmit পদ্ধতি সংজ্ঞায়িত করুন৷ একটি বাস্তব পরিস্থিতিতে, onSubmit পদ্ধতি ব্যবহারকারীকে একটি ইমেল বার্তা ব্যবহার করে ফটোগ্রাফারের কাছে একটি প্রতিক্রিয়া বার্তা জমা দেওয়ার অনুমতি দেয় যা একটি মনোনীত ইমেল ঠিকানায় পাঠানো হয়৷ এই কোডল্যাবে, আপনি ব্যবহারকারীর ইনপুটগুলি প্রদর্শন করেন৷ , ফর্ম রিসেট করতে reset পদ্ধতি ব্যবহার করুন এবং একটি ব্যবহারকারী-বান্ধব সাফল্যের বার্তা প্রদর্শন করুন।

নতুন onSubmit পদ্ধতি যোগ করুন এবং শুরু করার পরে showMsg ভেরিয়েবলটিকে true সেট করুন।

showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}

feedback-and-chat.component.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}

feedback-and-chat.component.ts ফাইলটি সংরক্ষণ করুন।

কম্পাইল এবং পাঠান প্রতিক্রিয়া ফর্ম মডেল প্রদর্শন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশানটি কম্পাইল এবং রান করতে এবং একটি ওয়েব সার্ভার খুলতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng serve
```
আপনার ডেভেলপমেন্ট সার্ভার পোর্ট 4200 এ চালানো উচিত।

আপনার ব্রাউজারে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

নিম্নলিখিত পৃষ্ঠায় নেভিগেট করুন.
```
http://localhost:4200
```
Chrome বিকাশকারী সরঞ্জামগুলি খুলুন এবং কনসোল ট্যাবটি চয়ন করুন৷
সম্পূর্ণ নাম , ইমেল এবং মন্তব্য পাঠ্য বাক্সে যেকোনো মান লিখুন।
জমা দিন বোতামটি নির্বাচন করুন৷ একটি সফল বার্তা পৃষ্ঠায় প্রদর্শিত হবে৷
কনসোল ট্যাবে প্রদর্শিত মানগুলি যাচাই করুন৷ আপনার স্ক্রীনটি নিম্নলিখিত স্ক্রীন ক্যাপচারের সাথে মেলে৷ আপনি কম্পোনেন্ট UI-তে একটি পাঠান বার্তা ফর্ম যোগ করতে এবং ব্যবহারকারীর ইনপুট পার্স করার জন্য কোডটি সফলভাবে প্রয়োগ করেছেন।
এর পরে, আপনি একটি চ্যাট ডায়ালগ এম্বেড করুন যাতে অ্যাপ্লিকেশন দর্শকদের জিম্বোর সাথে কথা বলার অনুমতি দেওয়া হয়। জিম্বো একটি কোয়ালা, যার কাছ থেকে আপনি বন্যপ্রাণী সম্পর্কে কিছু দুর্দান্ত তথ্য শিখতে পারেন।

8. একটি চ্যাট সংলাপ যোগ করুন

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

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

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

আপনার উপাদানে ডায়ালগফ্লো মেসেঞ্জার যোগ করুন

ফর্মের মতো, চ্যাট ডায়ালগ শুধুমাত্র তখনই প্রদর্শিত হবে যখন স্বতন্ত্র উপাদান লোড করা হয়।

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

feedback-and-chat.component.ts ফাইলে নেভিগেট করুন।

নিচের কোডের উদাহরণে df-messenger উপাদানটিকে পৃষ্ঠার যেকোনো জায়গায় কপি করে পেস্ট করুন।

<df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
              chat-title="Chat with Jimbo!"
              df-cx="true"
              intent="messanger-welcome-event"
              language-code="en"
              location="us-central1"></df-messenger>

আপনি যখন ডায়ালগফ্লো মেসেঞ্জার ইন্টিগ্রেশন নির্বাচন করেন তখন ডায়ালগফ্লো df-messenger উপাদানের জন্য বৈশিষ্ট্যগুলি তৈরি করে।

বৈশিষ্ট্য	বিস্তারিত
এজেন্ট-আইডি	পূর্ব জনসংখ্যা। ডায়ালগফ্লো এজেন্টের অনন্য শনাক্তকারী নির্দিষ্ট করে।
চ্যাট-শিরোনাম	পূর্ব জনসংখ্যা। চ্যাট ডায়ালগের শীর্ষে প্রদর্শনের জন্য সামগ্রী নির্দিষ্ট করে। প্রাথমিকভাবে আপনার এজেন্টের নামের সাথে প্রিপুলেশন করা হয়েছে, কিন্তু আপনার এটি কাস্টমাইজ করা উচিত।
df-cx	ইঙ্গিত করে যে মিথস্ক্রিয়াটি একটি CX এজেন্টের সাথে। মান `true` সেট করুন।
অভিপ্রায়	চ্যাট ডায়ালগ খোলা হলে প্রথম অভিপ্রায় ট্রিগার করতে ব্যবহৃত কাস্টম ইভেন্টটি নির্দিষ্ট করে।
ভাষা-কোড	প্রথম উদ্দেশ্যের জন্য ডিফল্ট ভাষা কোড নির্দিষ্ট করে।
অবস্থান	আপনি যে অঞ্চলে এজেন্ট স্থাপন করবেন তা নির্দিষ্ট করে।

feedback-and-chat.component.ts ফাইলটি সংরক্ষণ করুন।

প্রতিক্রিয়া পাঠান ফর্ম মডেল প্রদর্শন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশন কম্পাইল করতে নিম্নলিখিত কৌণিক কমান্ড লিখুন।
```
ng serve
```
আপনার অ্যাপ্লিকেশন কম্পাইল করতে ব্যর্থ হওয়া উচিত. কমান্ড লাইন নিম্নলিখিত ত্রুটি বার্তা প্রদর্শন করা উচিত.
এরপরে, একটি কাস্টম স্কিমা যোগ করুন।

স্বতন্ত্র উপাদানে কাস্টম স্কিমা যোগ করুন

df-messanger উপাদানটি একটি পরিচিত উপাদান নয়। এটি একটি কাস্টম ওয়েব কম্পোনেন্ট । কৌণিক কাঠামোর ত্রুটি বার্তাটি পরামর্শ দেয় যে বার্তাটি দমন করার জন্য আপনাকে উভয় স্বতন্ত্র উপাদানগুলিতে একটি CUSTOM_ELEMENTS_SCHEMA যোগ করতে হবে৷

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

feedback-and-chat.component.ts ফাইলে নেভিগেট করুন।

CUSTOM_ELEMENTS_SCHEMA স্কিমা আমদানি করুন৷

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';

স্কিমার তালিকায় CUSTOM_ELEMENTS_SCHEMA যোগ করুন।

schemas: [CUSTOM_ELEMENTS_SCHEMA]

feedback-and-chat.component.ts ফাইলটি নিম্নলিখিত কোড উদাহরণের সাথে মেলে।

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...

df-messanger ওয়েব কম্পোনেন্টের জন্য একটি জাভাস্ক্রিপ্ট প্রয়োজন যা শুধুমাত্র ফিডব্যাক এবং চ্যাট কম্পোনেন্ট লোড হলেই ইনজেক্ট করা উচিত। এই উদ্দেশ্যে আমরা ngOnInit() পদ্ধতিতে প্রাসঙ্গিক কোড যোগ করতে যাচ্ছি যা সক্রিয় করার জন্য প্রয়োজনীয় চ্যাট স্ক্রিপ্ট লোড করবে
উপাদান
```
ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}
```
feedback-and-chat.component.ts ফাইলটি সংরক্ষণ করুন।

আপডেট করা চ্যাট ডায়ালগ কম্পাইল করুন এবং প্রদর্শন করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশানটি কম্পাইল এবং রান করতে এবং একটি ওয়েব সার্ভার খুলতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng serve
```
আপনার ডেভেলপমেন্ট সার্ভার পোর্ট 4200 এ চালানো উচিত।

আপনার ব্রাউজারে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

নিম্নলিখিত পৃষ্ঠায় নেভিগেট করুন.
```
http://localhost:4200
```
পৃষ্ঠার নীচে একটি চ্যাট আইকন উপস্থিত হওয়া উচিত।
আইকন নির্বাচন করুন এবং Jimbo এর সাথে ইন্টারঅ্যাক্ট করুন। Jimbo চমৎকার প্রাণীর তথ্য প্রদান করে।
অ্যাপ্লিকেশন সম্পূর্ণরূপে কার্যকরী.

9. Google অ্যাপ ইঞ্জিনে অ্যাপ্লিকেশনটি স্থাপন করুন৷

অ্যাপ্লিকেশনটি আপনার মেশিনে স্থানীয়ভাবে চলছে। এই কোডল্যাবের পরবর্তী এবং শেষ ধাপ হিসেবে আপনি যা করতে চান তা হল এটিকে Google অ্যাপ ইঞ্জিনে স্থাপন করা।

Google অ্যাপ ইঞ্জিন সম্পর্কে আরও জানতে, অ্যাপ ইঞ্জিন দেখুন।

গুগল অ্যাপ ইঞ্জিনের জন্য আপনার পরিবেশ সেট আপ করুন

আপনি যদি ইতিমধ্যেই নিম্নলিখিত সমস্ত শর্ত পূরণ করেন তবে পরবর্তী পদক্ষেপগুলি এড়িয়ে যান এবং অ্যাপ্লিকেশনটি স্থাপন করতে এগিয়ে যান৷

অ্যাপ ইঞ্জিনের সাথে একটি ক্লাউড প্রকল্প তৈরি করা হয়েছে
ক্লাউড বিল্ড API সক্ষম করা হয়েছে৷
Google Cloud CLI ইনস্টল করা হয়েছে

নিম্নলিখিত কর্মগুলি সম্পূর্ণ করুন।

আপনার Gmail বা Google Workspace অ্যাকাউন্টে সাইন-ইন করুন। আপনার যদি একটি না থাকে তবে আপনার Google অ্যাকাউন্ট তৈরি করুন ।
আপনাকে ক্লাউড সংস্থান এবং API ব্যবহার করার অনুমতি দিতে ক্লাউড কনসোলে বিলিং সক্ষম করুন৷ আরও জানতে, আপনার স্ব-পরিষেবা ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করুন, সংশোধন করুন বা বন্ধ করুন দেখুন।
আপনার অ্যাপ ইঞ্জিন অ্যাপ্লিকেশন সংস্থান এবং অন্যান্য Google ক্লাউড সংস্থানগুলি ধরে রাখতে একটি Google ক্লাউড প্রকল্প তৈরি করুন৷ আরও জানতে, প্রজেক্ট তৈরি এবং পরিচালনা দেখুন।
ক্লাউড কনসোলে ক্লাউড বিল্ড API সক্ষম করুন। আরও জানতে, API-এ অ্যাক্সেস সক্ষম করুন দেখুন।
Google Cloud CLI এবং gcloud কমান্ড-লাইন টুল ইনস্টল করুন। আরও জানতে, gcloud CLI ইনস্টল করুন দেখুন।
Google ক্লাউড CLI আরম্ভ করুন এবং নিশ্চিত করুন যে আপনি যে Google ক্লাউড প্রকল্পটি স্থাপন করতে চান সেটি ব্যবহার করার জন্য gcloud কনফিগার করা হয়েছে। আরও জানতে, gcloud CLI শুরু করা দেখুন।

আপনার স্বতন্ত্র অ্যাপ্লিকেশন তৈরি করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
অ্যাপ্লিকেশনটির একটি উত্পাদন-প্রস্তুত সংস্করণ কম্পাইল এবং তৈরি করতে নিম্নলিখিত কৌণিক কমান্ডটি প্রবেশ করান।
```
ng build
```

অ্যাপ্লিকেশনটির উত্পাদন-প্রস্তুত সংস্করণটি আপনার photo-gallery-app প্রকল্প ডিরেক্টরির dist সাবডিরেক্টরিতে তৈরি করা হয়েছে।

10. Express.js ফ্রেমওয়ার্ক ব্যবহার করে আপনার অ্যাপ্লিকেশন স্থাপন করুন

এই কোডল্যাবের নমুনা কোডটি HTTP অনুরোধগুলি পরিচালনা করতে Express.js ফ্রেমওয়ার্ক ব্যবহার করে। আপনি আপনার পছন্দের ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।

Express.js ফ্রেমওয়ার্ক ইনস্টল করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াটি সম্পূর্ণ করুন।

Express.js ফ্রেমওয়ার্ক ইনস্টল করতে নিম্নলিখিত কমান্ডটি লিখুন।
```
npm install express --save
```

আপনার ওয়েব সার্ভার কনফিগার করুন

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
একটি নতুন server.js ফাইল তৈরি করুন।

নিচের কোডটি কপি করে পেস্ট করুন।

const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});

server.js ফাইলটি সংরক্ষণ করুন।

আপনার ওয়েব সার্ভার সংযুক্ত করুন

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
package.json ফাইলটি খুলুন।
server.js ফাইলে নোড চালানোর জন্য স্টার্ট কমান্ডটি পরিবর্তন করুন।
```
"name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
```
start অ্যাট্রিবিউট হল আপনার আবেদনের এন্ট্রি পয়েন্ট।
package.json ফাইলটি সংরক্ষণ করুন।

অ্যাপ ইঞ্জিন কনফিগার করুন

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
একটি নতুন app.yaml ফাইল তৈরি করুন।
নিচের কোডটি কপি করে পেস্ট করুন।
```
runtime: nodejs16
service: default
```
app.yaml ফাইলের তথ্য অ্যাপ ইঞ্জিনের কনফিগারেশন নির্দিষ্ট করে। আপনাকে শুধুমাত্র রানটাইম এবং পরিষেবা নির্দিষ্ট করতে হবে।
app.yaml ফাইলটি সংরক্ষণ করুন।

জিক্লাউড উপেক্ষা তালিকা আপডেট করুন

আপনার node_modules ডিরেক্টরি আপলোড করা হয়নি তা নিশ্চিত করতে, একটি .gcloudignore ফাইল তৈরি করুন। আপনার .gcloudignore ফাইলে তালিকাভুক্ত ফাইলগুলি আপলোড করা হয় না৷

আপনার কোড এডিটরে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
একটি নতুন .gcloudignore ফাইল তৈরি করুন।

নিচের কোডটি কপি করে পেস্ট করুন।

# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/

.gcloudignore ফাইলটি সংরক্ষণ করুন।

আপনার আবেদন শুরু করুন

অ্যাপ্লিকেশন স্থাপন করার আগে, এটি আপনার প্রকল্পের সাথে শুরু করুন এবং একটি সংশ্লিষ্ট অঞ্চল বেছে নিন।

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
আপনার অ্যাপ্লিকেশন আরম্ভ করার জন্য নিম্নলিখিত কমান্ড লিখুন।
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
প্রম্পটে, আপনি আপনার অ্যাপ ইঞ্জিন অ্যাপ্লিকেশনটি সনাক্ত করতে চান এমন অঞ্চলটি চয়ন করুন৷

আপনার আবেদন স্থাপন করুন

একটি কমান্ড-লাইন উইন্ডোতে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন।

আপনার নতুন photo-gallery-app প্রকল্প ডিরেক্টরিতে নেভিগেট করুন।
আপনার অ্যাপ্লিকেশন স্থাপন করতে নিম্নলিখিত কমান্ড লিখুন.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
প্রম্পটে, অ্যাকশনটি নিশ্চিত করুন৷ gcloud ডিপ্লয়মেন্ট কমান্ড সফলভাবে সম্পন্ন হওয়ার পরে, এটি আপনার অ্যাপ্লিকেশন অ্যাক্সেস করার জন্য একটি URL প্রদর্শন করে৷
আপনার ব্রাউজারে একটি নতুন ট্যাব খুলতে নিম্নলিখিত কমান্ডটি লিখুন।
```
gcloud app browse
```

11. অভিনন্দন

অভিনন্দন। আপনি কৌণিক v14 ব্যবহার করে একটি নমুনা ফটো গ্যালারি তৈরি করেছেন এবং এটিকে অ্যাপ ইঞ্জিনে সফলভাবে স্থাপন করেছেন৷

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

পরবর্তী পদক্ষেপ

এখন আপনি মৌলিক অ্যাপ্লিকেশনটি সম্পন্ন করেছেন, নিম্নলিখিত ধারণাগুলি ব্যবহার করে এটিকে উন্নত করুন।

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

কৌণিক কাঠামোর সাথে পরীক্ষা চালিয়ে যান এবং মজা করুন।

আপনার ক্লাউড প্রকল্পটি পরিষ্কার করুন এবং মুছুন

আপনি আপনার ক্লাউড প্রকল্পটি রাখতে পারেন বা প্রকল্পে ব্যবহৃত সমস্ত সংস্থানগুলির জন্য বিলিং বন্ধ করতে বিকল্পভাবে এটি মুছে ফেলতে পারেন৷

আপনার ব্রাউজারে, নিম্নলিখিত ক্রিয়াগুলি সম্পূর্ণ করুন৷

আপনার Gmail বা Google Workspace অ্যাকাউন্টে সাইন-ইন করুন।
Google ক্লাউড কনসোলে। IAM এবং অ্যাডমিন সেটিংস বোতামটি নির্বাচন করুন।
আইএএম এবং অ্যাডমিন পৃষ্ঠায় । সম্পদ পরিচালনা করুন ট্যাবটি নির্বাচন করুন।
সম্পদ পরিচালনা পৃষ্ঠায়। আপনি যে প্রকল্পটি মুছতে চান সেটিতে নেভিগেট করুন এবং এটি চয়ন করুন। একটি ডায়ালগ উইন্ডো খুলতে মুছুন বোতামটি নির্বাচন করুন।
ডায়ালগ উইন্ডোতে।প্রজেক্ট আইডি লিখুন।প্রজেক্ট মুছে ফেলতে শাট ডাউন বোতামটি নির্বাচন করুন।