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

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

১. ভূমিকা

আপনি যা তৈরি করবেন

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

আপনি আপনার অ্যাপ্লিকেশনের সবকিছু Angular v14 এবং নতুন স্ট্যান্ডঅ্যালোন কম্পোনেন্ট ফিচার ব্যবহার করে তৈরি করেন।

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

এই অ্যাপ্লিকেশনটিই আপনি আজ তৈরি করছেন।

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

আপনি যা শিখবেন

Angular CLI ব্যবহার করে কীভাবে একটি নতুন প্রজেক্ট স্কাফোল্ড করবেন
অ্যাঙ্গুলার অ্যাপ তৈরির প্রক্রিয়াকে সহজ করতে কীভাবে অ্যাঙ্গুলার স্ট্যান্ডঅ্যালোন কম্পোনেন্ট ব্যবহার করবেন
কীভাবে একটি স্বতন্ত্র কম্পোনেন্ট তৈরি করতে হয়; অর্থাৎ, কীভাবে UI তৈরি করতে হয় এবং কিছু বিজনেস লজিক যোগ করতে হয়।
একটি স্বতন্ত্র কম্পোনেন্ট ব্যবহার করে কীভাবে একটি অ্যাপ্লিকেশন বুটস্ট্র্যাপ করবেন
একটি স্বতন্ত্র কম্পোনেন্টকে কীভাবে লেজি লোড করবেন
Dialogflow Messenger ব্যবহার করে একটি স্বতন্ত্র কম্পোনেন্টে কীভাবে চ্যাট ডায়ালগ এম্বেড করবেন
Google Cloud CLI (gcloud) ব্যবহার করে কীভাবে একটি Angular অ্যাপ্লিকেশন Google Cloud App Engine-এ ডেপ্লয় করবেন

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

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

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

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

এই কোডল্যাবটি সম্পন্ন করতে, আপনাকে আপনার কম্পিউটারে নিম্নলিখিত সফ্টওয়্যারগুলি ইনস্টল করতে হবে।

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

নোড সংস্করণ	অ্যাঙ্গুলার দ্বারা সমর্থিত
১৪.১৫ বা নতুন	সমর্থিত
১৬.১০ বা নতুন	সমর্থিত
১৮.১.০	সমর্থিত নয়

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

node -v

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

Angular CLI ইনস্টল করুন

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

npm install --global @angular/cli

আপনার কনফিগারেশন সঠিক আছে কিনা তা নিশ্চিত করতে, কমান্ড-লাইন থেকে নিম্নলিখিত অ্যাঙ্গুলার কমান্ডটি চালান।

ng version

অ্যাঙ্গুলার কমান্ডটি সফলভাবে সম্পন্ন হলে, আপনি নিচের স্ক্রিনশটের মতো একটি বার্তা পাবেন।

অ্যাঙ্গুলার সংস্করণের টার্মিনাল আউটপুট

উৎস কোড এবং ছবি

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

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

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

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

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

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

নতুন ওয়ার্কস্পেস তৈরি করতে অ্যাঙ্গুলার সিএলআই (Angular CLI) ব্যবহার করুন। অ্যাঙ্গুলার সিএলআই এবং অ্যাঙ্গুলার ফ্রেমওয়ার্ক সম্পর্কে আরও জানতে angular.io- তে যান।

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

কমান্ড-লাইন উইন্ডোতে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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

Angular CLI-এর কাজ শেষ হলে, আপনি একটি নতুন Angular ওয়ার্কস্পেস এবং চালানোর জন্য প্রস্তুত একটি সহজ অ্যাপ্লিকেশন পাবেন।

আপনার নতুন অ্যাপ্লিকেশনটি একটি সাধারণ অ্যাঙ্গুলার অ্যাপ্লিকেশনের মতো করে তৈরি করা হয়েছে। এই কোডল্যাবের জন্য আপনার নতুন অ্যাপ্লিকেশনের NgModule-টি অপ্রয়োজনীয়।

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

অ্যাপ্লিকেশন মডিউলটি অপসারণ করতে, নিম্নলিখিত পদক্ষেপটি সম্পন্ন করুন।

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

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

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

কোড এডিটরে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

আপনার নতুন 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();
}
```

bootstrapApplication কম্পোনেন্টটি যোগ করুন

কোড এডিটরে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

আপনার নতুন 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 পোর্টে চালু থাকা উচিত। পূর্বের সমস্ত ত্রুটি দূর হয়ে যাওয়া উচিত এবং কম্পাইলেশন সফল হওয়া উচিত। খুব ভালো। আপনি সফলভাবে এমন একটি অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করেছেন যা কোনো মডিউল ছাড়াই এবং একটি স্বতন্ত্র কম্পোনেন্ট সহ চলে।

এরপরে, আপনি আপনার অ্যাপ্লিকেশনটিতে কিছু ছবি প্রদর্শনের জন্য সেটিকে আরও সুন্দর করে তুলবেন।

৪. ছবিগুলো প্রদর্শন করুন।

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

কম্পোনেন্ট হলো অ্যাঙ্গুলার অ্যাপের মূল ভিত্তি। কম্পোনেন্টের ৩টি প্রধান দিক রয়েছে।

টেমপ্লেটের জন্য একটি HTML ফাইল
স্টাইলগুলির জন্য একটি CSS ফাইল
অ্যাপটির আচরণের জন্য একটি টাইপস্ক্রিপ্ট ফাইল।

ছবিগুলো আপনার অ্যাপ্লিকেশনে সরান

ছবিগুলো সেই অ্যাপ্লিকেশনটিতে দেওয়া আছে, যা আপনি আগে গিটহাব থেকে ডাউনলোড করেছিলেন।

গিটহাব প্রজেক্টের src/assets ডিরেক্টরিতে যান।
আপনার photo-gallery-app প্রজেক্ট ডিরেক্টরির analogue ডিরেক্টরিতে ফাইলগুলো কপি করে পেস্ট করুন।

এইচটিএমএল টেমপ্লেট তৈরি করুন

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 ফাইলটি সংরক্ষণ করুন।
কোডটি সেভ করুন এবং আপনার ব্রাউজার চেক করুন। ডেভেলপমেন্ট সার্ভার চালু থাকলে, সেভ করার সাথে সাথে পরিবর্তনগুলো ব্রাউজারে প্রতিফলিত হয়।
এরপরে, আপনি জিম্বোর সাথে ফিডব্যাক পাঠাতে ও চ্যাট করার জন্য একটি নতুন স্বতন্ত্র কম্পোনেন্ট তৈরি করবেন। জিম্বো সম্পর্কে আরও জানতে এই কোডল্যাবটি চালিয়ে যান।

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

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

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

এই নতুন কম্পোনেন্টটি তৈরি করতে, আপনাকে আবার Angular CLI ব্যবহার করতে হবে।

কমান্ড-লাইন উইন্ডোতে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

আপনার নতুন photo-gallery-app প্রজেক্ট ডিরেক্টরিতে যান।

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

ng generate component feedback-and-chat --standalone

নিম্নোক্ত সারণিতে কমান্ডটির অংশগুলো বর্ণনা করা হয়েছে।

অংশ	বিস্তারিত
`ng`	অ্যাঙ্গুলার ফ্রেমওয়ার্কের সমস্ত অ্যাঙ্গুলার সিএলআই কমান্ড সংজ্ঞায়িত করে।
`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 মেথড এবং Routes মডিউল ইম্পোর্ট করুন। Angular v 14.2.0 একটি নতুন provideRouter মেথড চালু করেছে, যা আমাদের অ্যাপ্লিকেশনের জন্য এক সেট রাউট কনফিগার করার সুযোগ দেয়।
```
import { provideRouter, Routes } from '@angular/router';
```

নিচের কোড স্নিপেটটি import এবং 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 ফাইলটি সংরক্ষণ করুন।

ক্রোম ডেভেলপার টুলস দিয়ে সংকলন ও পর্যালোচনা করুন

অ্যাঙ্গুলার ফ্রেমওয়ার্ক কীভাবে কম্পোনেন্টটি লেজি লোড করে, তা পর্যালোচনা করতে ক্রোম ডেভেলপার টুলস ব্যবহার করুন।

কমান্ড-লাইন উইন্ডোতে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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

আপনার ব্রাউজারে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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

৬. ফর্মটির জন্য UI যোগ করুন

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

UI-কে সমর্থন করার জন্য, তিনটি ইনপুট UI ফিল্ডের প্রতিটির সাথে যুক্ত প্রতিটি contactForm ফর্ম কন্ট্রোলের সাথে বাইন্ড করে এমন একটি input এলিমেন্টে একটি formControlName অ্যাট্রিবিউট যোগ করুন।

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
```
আপনার অ্যাপ্লিকেশনটি কম্পাইল হতে ব্যর্থ হবে। চিন্তা করবেন না, আপনাকে ফর্মটি বাইন্ড করতে হবে।
আপাতত, নিম্নলিখিত বিষয়গুলো পর্যালোচনা করুন।
- আপনি formGroup প্রপার্টি বাইন্ডিং ব্যবহার করে contactForm form এলিমেন্টের সাথে এবং ngSubmit ইভেন্ট বাইন্ডিং ব্যবহার করে যুক্ত করেন।
- FormGroup ডিরেক্টিভটি form এলিমেন্ট দ্বারা নির্গত সাবমিট ইভেন্টটি শোনে। এরপর, FormGroup ডিরেক্টিভটি একটি ngSubmit ইভেন্ট নির্গত করে, যা আপনি onSubmit কলব্যাক ফাংশনের সাথে বাইন্ড করতে পারেন।
- পরবর্তী ধাপে, আপনি feedback-and-chat.component.ts ফাইলে onSubmit কলব্যাক ফাংশনটি ইমপ্লিমেন্ট করবেন।
এরপরে, আপনি ফর্মটি বাইন্ড করবেন।

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

ফিডব্যাক পাঠানোর ফর্মটির ইউজার ইন্টারফেস (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
```
ক্রোম ডেভেলপার টুলস খুলুন এবং কনসোল ট্যাবটি নির্বাচন করুন।
সম্পূর্ণ নাম , ইমেল এবং মন্তব্য টেক্সট বক্সগুলিতে যেকোনো মান লিখুন।
সাবমিট বাটনটি নির্বাচন করুন। পেজটিতে একটি সফলতার বার্তা প্রদর্শিত হবে।
কনসোল ট্যাবে প্রদর্শিত মানগুলো যাচাই করুন। আপনার স্ক্রিনটি নিম্নলিখিত স্ক্রিনশটের সাথে মিলতে হবে। আপনি কম্পোনেন্ট UI-তে একটি বার্তা পাঠানোর ফর্ম যোগ করার এবং ব্যবহারকারীর ইনপুটগুলো পার্স করার কোডটি সফলভাবে প্রয়োগ করেছেন।
এরপর, আপনি একটি চ্যাট ডায়ালগ যুক্ত করবেন, যাতে অ্যাপ্লিকেশনটির ব্যবহারকারীরা জিম্বোর সাথে কথা বলতে পারে। জিম্বো একটি কোয়ালা, যার কাছ থেকে আপনি বন্যপ্রাণী সম্পর্কে কিছু মজার তথ্য জানতে পারবেন।

৮. একটি চ্যাট ডায়ালগ যোগ করুন

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

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

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

আপনার কম্পোনেন্টে Dialogflow Messenger যোগ করুন

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

আপনার কোড এডিটরে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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>

আপনি যখন Dialogflow Messenger ইন্টিগ্রেশনটি নির্বাচন করেন, তখন Dialogflow df-messenger এলিমেন্টের জন্য অ্যাট্রিবিউটগুলো তৈরি করে।

বৈশিষ্ট্য	বিস্তারিত
এজেন্ট-আইডি	পূর্ব-পূরিত। Dialogflow এজেন্টের অনন্য শনাক্তকারী নির্দিষ্ট করে।
চ্যাট-শিরোনাম	পূর্ব-পূরিত। চ্যাট ডায়ালগের শীর্ষে প্রদর্শিত বিষয়বস্তু নির্দিষ্ট করে। প্রাথমিকভাবে এটি আপনার এজেন্টের নাম দিয়ে পূরণ করা থাকে, তবে আপনার এটি কাস্টমাইজ করা উচিত।
ডিএফ-সিএক্স	এটি নির্দেশ করে যে মিথস্ক্রিয়াটি একজন 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
```
পেজের নীচে একটি চ্যাট আইকন দেখা যাবে।
আইকনটি নির্বাচন করুন এবং জিম্বোর সাথে যোগাযোগ করুন। জিম্বো প্রাণীদের সম্পর্কে মজার মজার তথ্য দেয়।
অ্যাপ্লিকেশনটি সম্পূর্ণরূপে কার্যকর।

৯. অ্যাপ্লিকেশনটি গুগল অ্যাপ ইঞ্জিনে স্থাপন করুন।

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

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

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

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

অ্যাপ ইঞ্জিন দিয়ে একটি ক্লাউড প্রজেক্ট তৈরি করা হয়েছে
ক্লাউড বিল্ড এপিআই সক্রিয় করা হয়েছে
গুগল ক্লাউড সিএলআই ইনস্টল করা হয়েছে

নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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

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

কমান্ড-লাইন উইন্ডোতে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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

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

১০. 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 ফাইলটি সংরক্ষণ করুন।

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

আপনার 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 deployment কমান্ডটি সফলভাবে সম্পন্ন হওয়ার পর, এটি আপনার অ্যাপ্লিকেশনটি অ্যাক্সেস করার জন্য একটি URL প্রদর্শন করে।
আপনার ব্রাউজারে একটি নতুন ট্যাব খুলতে নিম্নলিখিত কমান্ডটি প্রবেশ করান।
```
gcloud app browse
```

১১. অভিনন্দন

অভিনন্দন। আপনি Angular v14 ব্যবহার করে একটি নমুনা ফটো গ্যালারি তৈরি করেছেন এবং সফলভাবে App Engine-এ তা স্থাপন করেছেন।

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

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

এখন যেহেতু আপনি প্রাথমিক অ্যাপ্লিকেশনটি তৈরি করে ফেলেছেন, নিচের ধারণাগুলো ব্যবহার করে এটিকে আরও উন্নত করুন।

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

অ্যাঙ্গুলার ফ্রেমওয়ার্ক নিয়ে পরীক্ষা-নিরীক্ষা চালিয়ে যান এবং আনন্দ করুন।

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

আপনি আপনার ক্লাউড প্রজেক্টটি রাখতে পারেন অথবা প্রজেক্টে ব্যবহৃত সমস্ত রিসোর্সের বিলিং বন্ধ করতে এটি ডিলিটও করে দিতে পারেন।

আপনার ব্রাউজারে নিম্নলিখিত কাজগুলো সম্পন্ন করুন।

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