स्टैंडअलोन कॉम्पोनेंट का इस्तेमाल शुरू करना

1. परिचय

आपको क्या बनाना है

इस कोडलैब में, Angular v14 का इस्तेमाल करके वाइल्डलाइफ़ फ़ोटो गैलरी ऐप्लिकेशन बनाया जाएगा. पूरा हो जाने पर, ऐप्लिकेशन में फ़ोटो का एक सेट दिखेगा. इसमें फ़ोटोग्राफ़र से संपर्क करने के लिए, मैसेज भेजें फ़ॉर्म भी होगा. साथ ही, फ़ोटो में दिखाए गए जानवरों के बारे में दिलचस्प जानकारी पाने के लिए, चैट विंडो भी होगी.

आपने अपने ऐप्लिकेशन में Angular v14 और नई स्टैंडअलोन कॉम्पोनेंट सुविधा का इस्तेमाल करके सब कुछ बनाया है.

Angular फ़्रेमवर्क और Angular CLI के सभी रेफ़रंस, Angular v14 को दिखाते हैं. स्टैंडअलोन कॉम्पोनेंट, Angular v14 की एक झलक वाली सुविधा है. इसलिए, आपको Angular v14 का इस्तेमाल करके एक नया ऐप्लिकेशन बनाना होगा. स्टैंडअलोन कॉम्पोनेंट की मदद से, Angular ऐप्लिकेशन को आसानी से बनाया जा सकता है. स्टैंडअलोन कॉम्पोनेंट, स्टैंडअलोन डायरेक्टिव, और स्टैंडअलोन पाइप का मकसद, ऑथरिंग के अनुभव को बेहतर बनाना है. इसके लिए, NgModules की ज़रूरत को कम किया जाता है. स्टैंडअलोन कॉम्पोनेंट, Angular लाइब्रेरी के मौजूदा नेटवर्क का पूरा फ़ायदा उठा सकते हैं.

यह वह ऐप्लिकेशन है जिसे आज बनाया जा रहा है.

आवेदन पूरा हो गया है

आपको क्या सीखने को मिलेगा

  • Angular CLI का इस्तेमाल करके, नया प्रोजेक्ट कैसे बनाया जाता है
  • Angular ऐप्लिकेशन के डेवलपमेंट को आसान बनाने के लिए, Angular के स्टैंडअलोन कॉम्पोनेंट इस्तेमाल करने का तरीका
  • स्टैंडअलोन कॉम्पोनेंट बनाने का तरीका; यानी यूज़र इंटरफ़ेस (यूआई) बनाने और कुछ कारोबारी लॉजिक जोड़ने का तरीका
  • स्टैंडअलोन कॉम्पोनेंट का इस्तेमाल करके ऐप्लिकेशन को बूटस्ट्रैप करने का तरीका
  • स्टैंडअलोन कॉम्पोनेंट को लेज़ी लोड करने का तरीका
  • Dialogflow Messenger का इस्तेमाल करके, स्टैंडअलोन कॉम्पोनेंट में चैट डायलॉग को एम्बेड करने का तरीका
  • Google Cloud CLI (gcloud) का इस्तेमाल करके, Google Cloud App Engine पर Angular ऐप्लिकेशन को डिप्लॉय करने का तरीका

आपको किस चीज़ की ज़रूरत होगी

  • Gmail या Google Workspace खाता
  • इन विषयों की बुनियादी जानकारी
    • एचटीएमएल. कोई एलिमेंट कैसे बनाएं.
    • सीएसएस और लेस. सीएसएस सिलेक्टर का इस्तेमाल करने और स्टाइल डेफ़िनिशन फ़ाइल बनाने का तरीका.
    • TypeScript या JavaScript. DOM स्ट्रक्चर के साथ इंटरैक्ट करने का तरीका.
    • git और GitHub. किसी रिपॉज़िटरी को फ़ोर्क और क्लोन करने का तरीका.
    • कमांड-लाइन इंटरफ़ेस, जैसे कि bash या zsh. डायरेक्ट्री में नेविगेट करने और कमांड चलाने का तरीका.

2. एनवायरमेंट सेटअप करना

अपना लोकल एनवायरमेंट सेट अप करना

इस कोडलैब को पूरा करने के लिए, आपको अपने लोकल कंप्यूटर पर यह सॉफ़्टवेयर इंस्टॉल करना होगा.

  • Node.js का चालू एलटीएस या रखरखाव एलटीएस वर्शन. इस कुकी का इस्तेमाल, Angular फ़्रेमवर्क और Angular CLI को इंस्टॉल करने के लिए किया जाता है.

    नोड वर्शन

    Angular के साथ काम करता है

    14.15 या उसके बाद का वर्शन

    समर्थित

    16.10 या उसके बाद के वर्शन

    समर्थित

    18.1.0

    ये काम नहीं करते हैं

    अपने लोकल कंप्यूटर पर Node.js के वर्शन की पुष्टि करने के लिए, कमांड-लाइन विंडो से यहां दिया गया node कमांड चलाएं.
    node -v
  • कोड एडिटर या आईडीई. इसका इस्तेमाल फ़ाइलें खोलने और उनमें बदलाव करने के लिए किया जाता है.Visual Studio Code या अपनी पसंद का कोई अन्य कोड एडिटर.

ऐंगुलर सीएलआई इंस्टॉल करना

सभी ज़रूरी सॉफ़्टवेयर कॉन्फ़िगर करने के बाद, कमांड-लाइन विंडो से Angular CLI इंस्टॉल करने के लिए, यहां दिया गया npm निर्देश चलाएं.

npm install --global @angular/cli

यह पुष्टि करने के लिए कि आपका कॉन्फ़िगरेशन सही है, कमांड-लाइन से यह Angular कमांड चलाएं.

ng version

अगर Angular कमांड सही तरीके से पूरी हो जाती है, तो आपको इस स्क्रीन कैप्चर की तरह एक मैसेज मिलेगा.

Angular के वर्शन का टर्मिनल आउटपुट

सोर्स कोड और इमेज

आपको पूरा ऐप्लिकेशन शुरू से बनाना है. इस सिलसिलेवार कोडलैब से आपको मदद मिलती है. ध्यान रखें कि GitHub डेटाबेस में फ़ाइनल कोड मौजूद होता है. अगर आपको कोई समस्या आ रही है, तो फ़ाइनल कोड और गैलरी पेज पर दिखाई गई इमेज देखें.

सोर्स कोड डाउनलोड करने के लिए.

  1. अपने ब्राउज़र में, इस पेज पर जाएं.
    https://github.com/angular/codelabs/tree/standalone-components
  2. कमांड-लाइन विंडो में, रिपॉज़िटरी को फ़ोर्क और क्लोन करें.

अगले चरण में, फ़ोटो गैलरी ऐप्लिकेशन बनाएं.

3. नया ऐप्लिकेशन बनाना

शुरुआती स्टार्टर ऐप्लिकेशन बनाने के लिए, ये कार्रवाइयां करें.

नया वर्कस्पेस बनाने के लिए, Angular CLI का इस्तेमाल करें. Angular CLI और Angular फ़्रेमवर्क के बारे में ज़्यादा जानने के लिए, angular.io पर जाएं.

नया प्रोजेक्ट बनाएं

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. photo-gallery-app नाम का नया Angular प्रोजेक्ट बनाने के लिए, यह Angular कमांड डालें.
    ng new photo-gallery-app
  2. हर प्रॉम्प्ट पर, डिफ़ॉल्ट विकल्प स्वीकार करें.Angular फ़्रेमवर्क, ज़रूरी पैकेज और डिपेंडेंसी इंस्टॉल करता है. इस प्रोसेस में कुछ मिनट लग सकते हैं.

Angular CLI के पूरा होने के बाद, आपके पास एक नया Angular वर्कस्पेस और इस्तेमाल के लिए तैयार एक सामान्य ऐप्लिकेशन होता है.

आपका नया ऐप्लिकेशन, स्टैंडर्ड Angular ऐप्लिकेशन की तरह स्ट्रक्चर किया गया है. आपके नए ऐप्लिकेशन में मौजूद NgModule, इस कोडलैब के लिए ज़रूरी नहीं है.

ऐप्लिकेशन मॉड्यूल हटाना

ऐप्लिकेशन मॉड्यूल को हटाने के लिए, यह कार्रवाई करें.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.module.ts फ़ाइल मिटाएं.

ऐप्लिकेशन मॉड्यूल मिटाने के बाद, आपके ऐप्लिकेशन में कोई मॉड्यूल नहीं रहता. आपके ऐप्लिकेशन में सिर्फ़ एक कॉम्पोनेंट है, जो ऐप्लिकेशन कॉम्पोनेंट है. आपको कॉम्पोनेंट को स्टैंडअलोन के तौर पर घोषित करना होगा.

अपने स्टैंडअलोन कॉम्पोनेंट के बारे में जानकारी देना

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.component.ts फ़ाइल खोलें.
  3. डेकोरेटर की सूची में, यह पैरामीटर और वैल्यू जोड़ें.
    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';
}
  4. app.component.ts फ़ाइल सेव करें.

अलग से उपलब्ध नए ऐप्लिकेशन को कंपाइल करना

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं
  2. अपने नए ऐप्लिकेशन को कंपाइल करने के लिए, यह Angular कमांड डालें.
    ng serve

आपका ऐप्लिकेशन कंपाइल नहीं होना चाहिए. चिंता न करें, आपको बस कुछ और चीज़ें ठीक करनी हैं.

bootstrapApplication API का इस्तेमाल करना

अपने ऐप्लिकेशन को NgModule के बिना चलाने के लिए, आपको bootstrapApplication एपीआई का इस्तेमाल करके, स्टैंडअलोन कॉम्पोनेंट को रूट कॉम्पोनेंट के तौर पर इस्तेमाल करना होगा.

ऐप्लिकेशन मॉड्यूल के रेफ़रंस हटाएं

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src डायरेक्ट्री पर जाएं
  2. main.ts फ़ाइल खोलें.
  3. नीचे दिए गए इंपोर्ट कोड को हटाएं, क्योंकि अब आपके पास ऐप्लिकेशन मॉड्यूल नहीं है.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. नीचे दिए गए बूटस्ट्रैप कोड को हटाएं, क्योंकि अब आपके पास ऐप्लिकेशन मॉड्यूल नहीं है.
    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 कॉम्पोनेंट जोड़ना

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src डायरेक्ट्री पर जाएं.
  2. main.ts फ़ाइल खोलें.
  3. @angular/platform-browser सेवा से bootstrapApplication कॉम्पोनेंट इंपोर्ट करें.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. अपने ऐप्लिकेशन को बूटस्ट्रैप करने के लिए, यह कोड जोड़ें.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. कॉम्पोनेंट और ज़रूरी लाइब्रेरी इंपोर्ट करें.
    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));

राउटर और सामान्य मॉड्यूल जोड़ना

Router और अन्य सामान्य मॉड्यूल की सुविधाओं का इस्तेमाल करने के लिए, आपको हर मॉड्यूल को सीधे तौर पर कॉम्पोनेंट में इंपोर्ट करना होगा.

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.component.ts फ़ाइल खोलें.
  3. ज़रूरी मॉड्यूल को कॉम्पोनेंट में इंपोर्ट करें.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. कॉम्पोनेंट में इंपोर्ट जोड़ें.
    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';
}
  5. app.component.ts फ़ाइल सेव करें.

अपने नए स्टैंडअलोन ऐप्लिकेशन को कंपाइल और रन करें

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल और चलाने के लिए, यह Angular कमांड डालें. इससे वेब सर्वर खुल जाएगा. कंपाइलेशन से जुड़ी किसी भी गड़बड़ी को हटाने के लिए, आपको अपना ऐप्लिकेशन चलाने से पहले अपना आईडीई बंद करना पड़ सकता है.
    ng serve

आपका डेवलपमेंट सर्वर, 4200 पोर्ट पर चलना चाहिए. पिछली सभी गड़बड़ियां ठीक हो जानी चाहिए और कंपाइल करने की प्रोसेस पूरी हो जानी चाहिए. बहुत खूब. आपने एक ऐसा Angular ऐप्लिकेशन बना लिया है जो बिना मॉड्यूल के और स्टैंडअलोन कॉम्पोनेंट के साथ चलता है.

  1. इसके बाद, आपको कुछ फ़ोटो दिखाने के लिए अपने ऐप्लिकेशन को बेहतर बनाना होगा.

4. फ़ोटो दिखाओ

आपका नया ऐप्लिकेशन, फ़ोटो गैलरी के तौर पर काम करने के लिए डिज़ाइन किया गया है. इसमें कुछ फ़ोटो दिखनी चाहिए.

कॉम्पोनेंट, Angular ऐप्लिकेशन के मुख्य बिल्डिंग ब्लॉक होते हैं. कॉम्पोनेंट के तीन मुख्य पहलू होते हैं.

  • टेंप्लेट के लिए एचटीएमएल फ़ाइल
  • स्टाइल के लिए सीएसएस फ़ाइल
  • ऐप्लिकेशन के व्यवहार के लिए TypeScript फ़ाइल

फ़ोटो को अपने ऐप्लिकेशन में ले जाना

ये तस्वीरें, उस ऐप्लिकेशन में उपलब्ध हैं जिसे आपने पहले GitHub से डाउनलोड किया था.

  1. GitHub प्रोजेक्ट की src/assets डायरेक्ट्री पर जाएं.
  2. फ़ाइलों को कॉपी करके, अपनी photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद analogue डायरेक्ट्री में चिपकाएं.

एचटीएमएल टेंप्लेट बनाना

app.component.html फ़ाइल, AppComponent कॉम्पोनेंट से जुड़ी एचटीएमएल टेंप्लेट फ़ाइल होती है.

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.component.html फ़ाइल खोलें.
  3. मौजूदा एचटीएमएल को मिटाएं.
  4. यहां दिए गए कोड के उदाहरण से एचटीएमएल को कॉपी करके चिपकाएं.
    <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
  5. app.component.html फ़ाइल सेव करें.

स्टाइल डेफ़िनिशन फ़ाइल बनाना

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src डायरेक्ट्री पर जाएं.
  2. styles.css फ़ाइल खोलें.
  3. यहां दिए गए कोड के उदाहरण से सीएसएस को कॉपी करके चिपकाएं.
    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%;
  }
}
  4. styles.css फ़ाइल सेव करना

इंडेक्स फ़ाइल अपडेट करना

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src डायरेक्ट्री पर जाएं.
  2. index.html फ़ाइल खोलें.
  3. Raleway फ़ॉन्ट जोड़ें, ताकि सभी पेज इसे इनहेरिट कर सकें.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. index.html फ़ाइल सेव करें.
  5. कोड को सेव करें और अपने ब्राउज़र की जांच करें. डेवलपमेंट सर्वर चालू होने पर, सेव करने पर बदलाव ब्राउज़र में दिखते हैं.
  6. इसके बाद, आपको एक नया स्टैंडअलोन कॉम्पोनेंट बनाना होगा, ताकि Jimbo को सुझाव/राय दी जा सके और उससे चैट की जा सके. Jimbo के बारे में ज़्यादा जानने के लिए, इस कोडलैब को जारी रखें.

5. कोई नया स्टैंडअलोन कॉम्पोनेंट जोड़ना

जैसा कि आपने अब तक देखा है, स्टैंडअलोन कॉम्पोनेंट, Angular ऐप्लिकेशन बनाने का एक आसान तरीका है. इससे NgModules की ज़रूरत कम हो जाती है. यहां दिए गए सेक्शन में, एक नया स्टैंडअलोन कॉम्पोनेंट बनाया जाता है. इसकी मदद से, उपयोगकर्ता सुझाव/राय दे सकते हैं या शिकायत कर सकते हैं. साथ ही, वर्चुअल एजेंट से चैट कर सकते हैं.

नया स्टैंडअलोन कॉम्पोनेंट बनाना

इस नए कॉम्पोनेंट को बनाने के लिए, Angular CLI का फिर से इस्तेमाल करें.

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. feedback-and-chat नाम का नया कॉम्पोनेंट बनाने के लिए, यह Angular कमांड डालें.
    ng generate component feedback-and-chat --standalone
    इस टेबल में, कमांड के हिस्सों के बारे में बताया गया है.

    भाग

    विवरण

    ng

    यह Angular फ़्रेमवर्क के लिए, Angular CLI की सभी कमांड तय करता है

    generate component

    यह कमांड, नए कॉम्पोनेंट के लिए स्केफ़ोल्डिंग बनाती है

    feedback-and-chat

    कॉम्पोनेंट का नाम

    --standalone

    यह एनोटेशन, Angular फ़्रेमवर्क को स्टैंडअलोन कॉम्पोनेंट बनाने के लिए कहता है

नए स्टैंडअलोन कॉम्पोनेंट को इंपोर्ट करना

नए स्टैंडअलोन कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको पहले इसे app.components.ts फ़ाइल में मौजूद imports ऐरे में जोड़ना होगा.

यह एक स्टैंडअलोन कॉम्पोनेंट है. इसलिए, इसे ऐसे ही इंपोर्ट करें जैसे कोई मॉड्यूल इंपोर्ट किया जाता है.

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.component.ts फ़ाइल खोलें.
  3. नए स्टैंडअलोन कॉम्पोनेंट को इंपोर्ट करें.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. कॉम्पोनेंट में इंपोर्ट किए गए डेटा को अपडेट करें.
    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';
}
  5. app.component.ts फ़ाइल सेव करें.

कॉम्पोनेंट को लेज़ी लोड करना

ईगर लोडिंग पैराडाइम से लेज़ी लोडिंग पैराडाइम पर स्विच करें. इसमें कोड को क्लाइंट को तब तक नहीं भेजा जाता, जब तक आपको इसकी ज़रूरत नहीं होती. लेज़ी लोडिंग, पेज लोड होने में लगने वाले समय को कम करने, परफ़ॉर्मेंस को बेहतर बनाने, और उपयोगकर्ता अनुभव को बेहतर बनाने का एक बेहतरीन तरीका है. राउटर, लेज़ी लोड को हैंडल करता है. यह ngModule और स्टैंडअलोन कॉम्पोनेंट, दोनों के लिए एक जैसा होता है.

ऐप्लिकेशन कॉम्पोनेंट से जुड़े एचटीएमएल टेंप्लेट को अपडेट करना

स्टैंडअलोन कॉम्पोनेंट को लेज़ी लोड करने के लिए, यूज़र इंटरफ़ेस (यूआई) में एक बटन जोड़ें. यह बटन, कॉम्पोनेंट को सिर्फ़ तब चालू करता है, जब कोई उपयोगकर्ता इसे चुनता है.

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src/app डायरेक्ट्री पर जाएं.
  2. app.component.html फ़ाइल खोलें.
  3. फ़ाइल के आखिर तक स्क्रोल करें और article एलिमेंट को बंद करने से पहले, कोड का यह उदाहरण जोड़ें.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. 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>
  5. app.component.html फ़ाइल सेव करें.

अपने रास्ते कॉन्फ़िगर करना

कोड एडिटर में, यह तरीका अपनाएं.

  1. अपने नए photo-gallery-app प्रोजेक्ट डायरेक्ट्री में मौजूद src डायरेक्ट्री पर जाएं.
  2. main.ts फ़ाइल खोलें
  3. provideRouter तरीके और Routes मॉड्यूल को इंपोर्ट करें. Angular v 14.2.0 में, provideRouter नाम का एक नया तरीका पेश किया गया है. इसकी मदद से, ऐप्लिकेशन के लिए रास्तों का एक सेट कॉन्फ़िगर किया जा सकता है.
    import { provideRouter, Routes } from '@angular/router';
  4. इस कोड स्निपेट को कॉपी करके, इंपोर्ट और if स्टेटमेंट के बीच में चिपकाएं.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. इस कोड स्निपेट को कॉपी करके चिपकाएं और 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));
  6. main.ts फ़ाइल सेव करें.

Chrome डेवलपर टूल की मदद से, कोड को कंपाइल और उसकी समीक्षा करना

Chrome डेवलपर टूल का इस्तेमाल करके देखें कि Angular फ़्रेमवर्क, कॉम्पोनेंट को लेज़ी लोड कैसे करता है.

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल और चलाने के लिए, यह Angular कमांड डालें. इससे वेब सर्वर खुल जाएगा.
    ng serve
    आपका डेवलपमेंट सर्वर, 4200 पोर्ट पर चलना चाहिए.

अपने ब्राउज़र में, यह तरीका अपनाएं.

  1. अगले पेज पर जाएं.
    http://localhost:4200
  2. Chrome डेवलपर टूल खोलें और नेटवर्क टैब चुनें.
  3. पेज को रीफ़्रेश करें, ताकि कई फ़ाइलें दिखें. हालांकि, feedback-and-chat कॉम्पोनेंट नहीं दिखना चाहिए. आपकी स्क्रीन, यहाँ दिए गए स्क्रीन कैप्चर से मेल खानी चाहिए.Chrome DevTools पैनल के साथ ऐप्लिकेशन का स्क्रीनशॉट खुला है
  4. स्टैंडअलोन कॉम्पोनेंट पर जाने के लिए, इनके बारे में ज़्यादा जानें! बटन चुनें.लॉग में यह दिखना चाहिए कि कॉम्पोनेंट सिर्फ़ तब लोड होता है, जब आपने पूरे राऊटर को हिट किया हो. यह देखने के लिए कि कॉम्पोनेंट लोड हो गया है, सूची में सबसे नीचे तक स्क्रोल करें. आपकी स्क्रीन, यहाँ दिए गए स्क्रीन कैप्चर से मिलती-जुलती होनी चाहिए.ऐप्लिकेशन का स्क्रीनशॉट. इसमें Chrome DevTools पैनल खुला है और लेज़ी लोड किए गए कॉम्पोनेंट को दिखाया गया है

6. फ़ॉर्म के लिए यूज़र इंटरफ़ेस (यूआई) जोड़ना

सुझाव/राय देने या शिकायत करने वाले फ़ॉर्म में, तीन इनपुट यूज़र इंटरफ़ेस (यूआई) फ़ील्ड और सबसे नीचे एक बटन है. इनपुट यूज़र इंटरफ़ेस (यूआई) के तीन फ़ील्ड हैं: पूरा नाम, ईमेल भेजने वाले का ईमेल पता, और टिप्पणियां.

यूज़र इंटरफ़ेस (यूआई) को सपोर्ट करने के लिए, input एलिमेंट में एक formControlName एट्रिब्यूट जोड़ें. यह एट्रिब्यूट, तीन इनपुट यूज़र इंटरफ़ेस (यूआई) फ़ील्ड से जुड़े हर contactForm फ़ॉर्म कंट्रोल से बाइंड होता है.

फ़ॉर्म को एचटीएमएल टेंप्लेट में जोड़ना

यूज़र इंटरफ़ेस (यूआई) में एक फ़ॉर्म जोड़ें, ताकि उपयोगकर्ता सुझाव, शिकायत या राय भेज सके.

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. feedback-and-chat.component.html फ़ाइल पर जाएं.
  2. मौजूदा एचटीएमएल हटाएं.
  3. यहां दिए गए कोड के उदाहरण से एचटीएमएल को कॉपी करके चिपकाएं.
    <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>
  4. feedback-and-chat.component.html फ़ाइल सेव करें.

फ़ॉर्म के लिए स्टाइल फ़ाइल अपडेट करना

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. feedback-and-chat.component.css फ़ाइल पर जाएं.
  2. यहां दिए गए कोड के उदाहरण से सीएसएस को कॉपी करके चिपकाएं.
    /*   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;
  }
}
  3. feedback-and-chat.component.css फ़ाइल सेव करें.

फ़ॉर्म के लिए यूज़र इंटरफ़ेस (यूआई) अपडेट को कंपाइल करना

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल और चलाने के लिए, यह Angular कमांड डालें. इससे वेब सर्वर खुल जाएगा.
    ng serve
    आपका ऐप्लिकेशन कंपाइल नहीं होना चाहिए. चिंता न करें, आपको फ़ॉर्म को बाइंड करना होगा.
  3. फ़िलहाल, इन आइटम की समीक्षा करें.
    • contactForm को form एलिमेंट से बाइंड करने के लिए, formGroup प्रॉपर्टी बाइंडिंग का इस्तेमाल करें. साथ ही, ngSubmit इवेंट बाइंडिंग का इस्तेमाल करें
    • FormGroup डायरेक्टिव, form एलिमेंट से जनरेट होने वाले सबमिट इवेंट को सुनता है. इसके बाद, FormGroup डायरेक्टिव, ngSubmit इवेंट को ट्रिगर करता है. इसे onSubmit कॉलबैक फ़ंक्शन से बाइंड किया जा सकता है.
    • बाद के चरण में, feedback-and-chat.component.ts फ़ाइल में onSubmit कॉलबैक फ़ंक्शन लागू करें
  4. इसके बाद, आपको फ़ॉर्म को बाइंड करना होगा.

7. फ़ॉर्म में इवेंट हैंडलिंग जोड़ना

सुझाव/राय दें या शिकायत करें फ़ॉर्म का यूज़र इंटरफ़ेस (यूआई) पूरा हो गया है, लेकिन इसमें इंटरैक्शन मौजूद नहीं है. फ़ॉर्म की मदद से उपयोगकर्ता के इनपुट को मैनेज करना, कई सामान्य ऐप्लिकेशन का मुख्य काम होता है.

असल में, आपको इन कार्रवाइयों को पूरा करने के लिए, कारोबार के लॉजिक को लागू करना होगा.

  1. कॉम्पोनेंट से जुड़े रेंडर किए गए DOM स्ट्रक्चर से, उपयोगकर्ता के इनपुट को पार्स करता है.
  2. उपयोगकर्ता के इनपुट की पुष्टि करें. इसमें कैप्चा या इसी तरह का कोई अन्य तरीका शामिल है, ताकि बॉट को स्पैम करने से रोका जा सके.
  3. किसी तय किए गए ईमेल पते पर ईमेल भेजें.
  4. उपयोगकर्ता को एक फ़्रेंडली मैसेज दिखाएं.

इस कोडलैब में, सिर्फ़ ये कार्रवाइयां लागू की जाती हैं.

  1. कॉम्पोनेंट से जुड़े रेंडर किए गए DOM स्ट्रक्चर से, उपयोगकर्ता के इनपुट को पार्स करता है.
  2. उपयोगकर्ता को एक फ़्रेंडली मैसेज दिखाएं.

आपको अपने हुनर को चुनौती देनी चाहिए और चारों कार्रवाइयों को लागू करना चाहिए.

कॉम्पोनेंट में, 'मैसेज भेजें' फ़ॉर्म मॉडल जोड़ना

सुझाव, शिकायत या राय भेजने के फ़ॉर्म का मॉडल बनाएं और उसे कॉम्पोनेंट क्लास में जोड़ें. फ़ॉर्म मॉडल से फ़ॉर्म की स्थिति तय होती है. FormBuilder सेवा, यूज़र इंटरफ़ेस (यूआई) कंट्रोल बनाने के आसान तरीके उपलब्ध कराती है.

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. feedback-and-chat.component.ts फ़ाइल पर जाएं.
  2. @angular/forms पैकेज से FormBuilder सेवा और ReactiveModule मॉड्यूल इंपोर्ट करें. यह सेवा, कंट्रोल जनरेट करने के आसान तरीके उपलब्ध कराती है. अगले चरण में, हम inject फ़ंक्शन का इस्तेमाल करेंगे. इसलिए, हमें इसे भी @angular/core से इंपोर्ट करना होगा.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. ReactiveFormsModule मॉड्यूल इंपोर्ट करें.
    imports: [CommonModule,ReactiveFormsModule],
  4. नीचे दिए गए कंस्ट्रक्टर को हटाएं.
    constructor() { }
  5. क्लास सिग्नेचर के ठीक नीचे, inject फ़ंक्शन के ज़रिए FormBuilder सेवा को इंजेक्ट करें.
    private formBuilder = inject(FormBuilder);
    किसी उपयोगकर्ता से उसका नाम, ईमेल पता, और टिप्पणियां इकट्ठा करने के लिए, FormBuilder सेवा से group तरीके का इस्तेमाल करके, फ़ॉर्म मॉडल बनाएं.
  6. नई contactForm प्रॉपर्टी बनाएं और उसे फ़ॉर्म मॉडल पर सेट करने के लिए, group तरीके का इस्तेमाल करें.फ़ॉर्म मॉडल में name, email, और comments फ़ील्ड शामिल होते हैं.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    फ़ॉर्म को मैनेज करने के लिए, onSubmit तरीके को तय करें. असल में, onSubmit तरीके की मदद से उपयोगकर्ता, फ़ोटोग्राफ़र को ईमेल भेजकर सुझाव/राय दे सकता है या शिकायत कर सकता है. यह ईमेल, तय किए गए ईमेल पते पर भेजा जाता है. इस कोडलैब में, उपयोगकर्ता के इनपुट दिखाए जाते हैं. साथ ही, फ़ॉर्म को रीसेट करने के लिए reset तरीके का इस्तेमाल किया जाता है. इसके अलावा, उपयोगकर्ता को आसानी से समझ में आने वाला मैसेज दिखाया जाता है.
  7. नया 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();
  }
}
  8. feedback-and-chat.component.ts फ़ाइल सेव करें.

'सुझाव, शिकायत या राय भेजें' फ़ॉर्म मॉडल को कंपाइल और डिसप्ले करता है

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल और चलाने के लिए, यह Angular कमांड डालें. इससे वेब सर्वर खुल जाएगा.
    ng serve
  3. आपका डेवलपमेंट सर्वर, 4200 पोर्ट पर चलना चाहिए.

अपने ब्राउज़र में, यह तरीका अपनाएं.

  1. अगले पेज पर जाएं.
    http://localhost:4200
  2. Chrome डेवलपर टूल खोलें और Console टैब चुनें.
  3. पूरा नाम, ईमेल, और टिप्पणियां टेक्स्ट बॉक्स में कोई भी वैल्यू डालें.
  4. सबमिट करें बटन को चुनें.पेज पर 'हो गया' मैसेज दिखेगा.
  5. Console टैब में दिखने वाली वैल्यू की पुष्टि करें. आपकी स्क्रीन, यहां दिए गए स्क्रीन कैप्चर से मेल खानी चाहिए.ब्राउज़र विंडो में, कंसोल में JSON डेटा दिख रहा है. यह डेटा फ़ॉर्म में डाला गया हैआपने कोड को लागू कर दिया है. इससे कॉम्पोनेंट यूज़र इंटरफ़ेस (यूआई) में मैसेज भेजें फ़ॉर्म जोड़ा जा सकेगा. साथ ही, उपयोगकर्ता के इनपुट को पार्स किया जा सकेगा.
  6. इसके बाद, चैट डायलॉग को एम्बेड करें, ताकि ऐप्लिकेशन पर आने वाले लोग Jimbo से बात कर सकें. जिंबो एक कोआला है. इससे आपको जंगली जानवरों के बारे में कुछ दिलचस्प बातें जानने को मिलती हैं.

8. चैट डायलॉग जोड़ना

Dialogflow CX या इसी तरह के अन्य प्लैटफ़ॉर्म जैसे बातचीत वाले इंटरफ़ेस का इस्तेमाल करें. Dialogflow CX एजेंट एक वर्चुअल एजेंट होता है. यह इंसानों के साथ एक साथ कई बातचीत को मैनेज करता है. यह नैचुरल लैंग्वेज समझने वाला मॉड्यूल है. यह इंसानों की भाषा की बारीकियों को पहचानता है. साथ ही, बातचीत के दौरान असली उपयोगकर्ता के टेक्स्ट या ऑडियो को ऐसे स्ट्रक्चर्ड डेटा में बदलता है जिसे ऐप्लिकेशन और सेवाएं समझ सकती हैं.

आपके इस्तेमाल के लिए, पहले से ही एक सैंपल वर्चुअल एजेंट बनाया गया है. इस लैब में आपको स्टैंडअलोन कॉम्पोनेंट में चैट डायलॉग जोड़ना है, ताकि ऐप्लिकेशन के उपयोगकर्ता बॉट से इंटरैक्ट कर सकें. इस ज़रूरत को पूरा करने के लिए, Dialogflow Messenger का इस्तेमाल किया जाएगा. यह पहले से बना हुआ इंटिग्रेशन है, जो पसंद के मुताबिक डायलॉग विंडो उपलब्ध कराता है. इसे खोलने पर, चैट डायलॉग स्क्रीन के सबसे नीचे दाईं ओर दिखता है. साथ ही, एजेंट के डिफ़ॉल्ट वेलकम इंटेंट को ट्रिगर करता है. बॉट, उपयोगकर्ता का स्वागत करता है और बातचीत शुरू करता है.

यहां दिए गए उदाहरण में, उपयोगकर्ता के साथ वन्यजीवों के बारे में दिलचस्प तथ्य शेयर किए गए हैं. वर्चुअल एजेंट के अन्य वर्शन, ग्राहकों के लिए मुश्किल सवालों के जवाब दे सकते हैं. जैसे, कॉल सेंटर में काम करने वाला कोई व्यक्ति. कई कंपनियां, वर्चुअल एजेंट का इस्तेमाल करती हैं. यह कंपनी की वेबसाइट पर बातचीत करने का मुख्य चैनल होता है.

अपने कॉम्पोनेंट में Dialogflow Messenger जोड़ना

फ़ॉर्म की तरह, चैट डायलॉग सिर्फ़ तब दिखना चाहिए, जब स्टैंडअलोन कॉम्पोनेंट लोड हो जाए.

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. feedback-and-chat.component.ts फ़ाइल पर जाएं.
  2. यहां दिए गए कोड के उदाहरण में मौजूद 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 एलिमेंट के लिए एट्रिब्यूट जनरेट करता है.

    एट्रिब्यूट

    विवरण

    agent-id

    अपने-आप भरी गई जानकारी. Dialogflow एजेंट का यूनीक आइडेंटिफ़ायर तय करता है.

    chat-title

    अपने-आप भरी गई जानकारी. इससे चैट डायलॉग में सबसे ऊपर दिखने वाले कॉन्टेंट के बारे में पता चलता है. शुरुआत में, इसमें आपके एजेंट का नाम पहले से भरा होता है. हालांकि, आपको इसे अपनी पसंद के मुताबिक बनाना चाहिए.

    df-cx

    इससे पता चलता है कि बातचीत CX एजेंट से हो रही है. वैल्यू को true पर सेट करें.

    इंटेंट

    यह उस कस्टम इवेंट के बारे में बताता है जिसका इस्तेमाल, चैट डायलॉग बॉक्स खुलने पर पहले इंटेंट को ट्रिगर करने के लिए किया जाता है.

    language-code

    यह पहले इंटेंट के लिए डिफ़ॉल्ट भाषा कोड तय करता है.

    जगह

    इससे उस इलाके के बारे में पता चलता है जहां एजेंट को डिप्लॉय किया जाता है.

  3. feedback-and-chat.component.ts फ़ाइल सेव करें.

सुझाव, शिकायत या राय भेजने का फ़ॉर्म मॉडल दिखाएं

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल करने के लिए, यह Angular कमांड डालें.
    ng serve
    आपका ऐप्लिकेशन कंपाइल नहीं होना चाहिए. कमांड-लाइन में गड़बड़ी का यह मैसेज दिखना चाहिए.df-messenger से जुड़ी गड़बड़ी का मैसेज
  3. इसके बाद, कस्टम स्कीमा जोड़ें.

स्टैंडअलोन कॉम्पोनेंट में कस्टम स्कीमा जोड़ना

df-messanger एलिमेंट, ऐसा एलिमेंट नहीं है जिसके बारे में हमें जानकारी हो. यह एक कस्टम वेब कॉम्पोनेंट है. Angular फ़्रेमवर्क से मिले गड़बड़ी के मैसेज के मुताबिक, आपको मैसेज को छिपाने के लिए, दोनों स्टैंडअलोन कॉम्पोनेंट में CUSTOM_ELEMENTS_SCHEMA जोड़ना होगा.

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. feedback-and-chat.component.ts फ़ाइल पर जाएं.
  2. CUSTOM_ELEMENTS_SCHEMA स्कीमा इंपोर्ट करें.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. 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]
})

...
  4. df-messanger वेब कॉम्पोनेंट के लिए एक JavaScript की ज़रूरत होती है. इसे सिर्फ़ तब इंजेक्ट किया जाना चाहिए, जब सुझाव और चैट कॉम्पोनेंट लोड हो जाए. इसके लिए, हम 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);
}
  5. feedback-and-chat.component.ts फ़ाइल सेव करें.

अपडेट किए गए चैट डायलॉग को कंपाइल और डिसप्ले करना

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल और चलाने के लिए, यह Angular कमांड डालें. इससे वेब सर्वर खुल जाएगा.
    ng serve
    आपका डेवलपमेंट सर्वर, 4200 पोर्ट पर चलना चाहिए.

अपने ब्राउज़र में, यह तरीका अपनाएं.

  1. अगले पेज पर जाएं.
    http://localhost:4200
    पेज पर सबसे नीचे, चैट आइकॉन दिखेगा.
  2. आइकॉन चुनें और Jimbo से बातचीत करें.Jimbo, जानवरों के बारे में दिलचस्प जानकारी देता है.ऐप्लिकेशन में चैट विंडो दिख रही है. इसमें मैसेंजर बॉट जवाब दे रहा है
  3. ऐप्लिकेशन पूरी तरह से काम कर रहा हो.

9. ऐप्लिकेशन को Google App Engine पर डिप्लॉय करना

ऐप्लिकेशन, आपके कंप्यूटर पर लोकल तौर पर चल रहा है. कोडलैब के इस मॉड्यूल के अगले और आखिरी चरण में, आपको इसे Google App Engine पर डिप्लॉय करना है.

Google App Engine के बारे में ज़्यादा जानने के लिए, App Engine पर जाएं.

Google App Engine के लिए अपना एनवायरमेंट सेट अप करना

अगर आपने पहले से ही ये सभी शर्तें पूरी कर ली हैं, तो अगले चरणों को छोड़कर ऐप्लिकेशन को डिप्लॉय करें.

  • App Engine का इस्तेमाल करके Cloud प्रोजेक्ट बनाया गया
  • Cloud Build API चालू किया गया हो
  • Google Cloud CLI इंस्टॉल की गई हो

यहां दी गई कार्रवाइयां पूरी करें.

  1. अपने Gmail या Google Workspace खाते में साइन इन करें. अगर आपके पास Google खाता नहीं है, तो अपना Google खाता बनाएं.
  2. Cloud Console में बिलिंग चालू करें, ताकि Cloud संसाधनों और एपीआई का इस्तेमाल किया जा सके. ज़्यादा जानने के लिए, खुद पेमेंट करने की सुविधा वाला Cloud Billing खाता बनाना, उसमें बदलाव करना या उसे बंद करना लेख पढ़ें.
  3. App Engine ऐप्लिकेशन के संसाधनों और Google Cloud के अन्य संसाधनों को सेव करने के लिए, एक Google Cloud प्रोजेक्ट बनाएं. ज़्यादा जानने के लिए, प्रोजेक्ट बनाना और मैनेज करना लेख पढ़ें.
  4. Cloud Console में Cloud Build API को चालू करें. ज़्यादा जानने के लिए, एपीआई का ऐक्सेस चालू करना लेख पढ़ें.
  5. Google Cloud CLI और gcloud कमांड-लाइन टूल इंस्टॉल करें. ज़्यादा जानने के लिए, gcloud सीएलआई इंस्टॉल करना लेख पढ़ें.
  6. Google Cloud CLI को शुरू करें. साथ ही, यह पक्का करें कि gcloud को उस Google Cloud प्रोजेक्ट का इस्तेमाल करने के लिए कॉन्फ़िगर किया गया हो जिसमें आपको डिप्लॉय करना है. ज़्यादा जानने के लिए, gcloud सीएलआई का इस्तेमाल शुरू करना लेख पढ़ें.

स्टैंडअलोन ऐप्लिकेशन बनाना

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. ऐप्लिकेशन को कंपाइल करने और प्रोडक्शन के लिए तैयार वर्शन बनाने के लिए, यह Angular कमांड डालें.
    ng build

ऐप्लिकेशन का प्रोडक्शन-रेडी वर्शन, आपकी photo-gallery-app प्रोजेक्ट डायरेक्ट्री की dist सबडायरेक्ट्री में बनाया जाता है.

10. Express.js फ़्रेमवर्क का इस्तेमाल करके, अपने ऐप्लिकेशन को डिप्लॉय करना

इस कोडलैब में दिए गए सैंपल कोड में, एचटीटीपी अनुरोधों को मैनेज करने के लिए Express.js फ़्रेमवर्क का इस्तेमाल किया गया है. आपके पास अपने पसंदीदा वेब फ़्रेमवर्क का इस्तेमाल करने का विकल्प होता है.

Express.js फ़्रेमवर्क इंस्टॉल करना

कमांड-लाइन विंडो में, यह कार्रवाई करें.

  1. Express.js फ़्रेमवर्क इंस्टॉल करने के लिए, यह कमांड डालें.
    npm install express --save

अपने वेब सर्वर को कॉन्फ़िगर करना

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. नई server.js फ़ाइल बनाएं.
  3. यहां दिए गए कोड को कॉपी करके चिपकाएं.
    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}`);
});
  4. server.js फ़ाइल सेव करें.

अपने वेब सर्वर को अटैच करना

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. package.json फ़ाइल खोलें.
  3. 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 एट्रिब्यूट, आपके आवेदन का एंट्री पॉइंट होता है.
  4. package.json फ़ाइल सेव करें.

App Engine को कॉन्फ़िगर करना

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. नई app.yaml फ़ाइल बनाएं.
  3. यहां दिए गए कोड को कॉपी करके चिपकाएं.
    runtime: nodejs16
service: default
    app.yaml फ़ाइल में दी गई जानकारी से, App Engine के कॉन्फ़िगरेशन के बारे में पता चलता है. आपको सिर्फ़ रनटाइम और सेवा के बारे में बताना होगा.
  4. app.yaml फ़ाइल सेव करें.

gcloud की नज़रअंदाज़ की जाने वाली सूची को अपडेट करना

यह पक्का करने के लिए कि आपकी node_modules डायरेक्ट्री अपलोड न हो, एक .gcloudignore फ़ाइल बनाएं. आपकी .gcloudignore फ़ाइल में मौजूद फ़ाइलें अपलोड नहीं की गई हैं.

अपने कोड एडिटर में, यह कार्रवाइयां पूरी करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. नई .gcloudignore फ़ाइल बनाएं.
  3. यहां दिए गए कोड को कॉपी करके चिपकाएं.
    # 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/
  4. .gcloudignore फ़ाइल सेव करें.

अपने ऐप्लिकेशन को शुरू करना

ऐप्लिकेशन को डिप्लॉय करने से पहले, उसे अपने प्रोजेक्ट के साथ शुरू करें और उससे जुड़ा कोई क्षेत्र चुनें.

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. अपने ऐप्लिकेशन को शुरू करने के लिए, यह कमांड डालें.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. प्रॉम्प्ट मिलने पर, वह इलाका चुनें जहां आपको अपना App Engine ऐप्लिकेशन डिप्लॉय करना है.

अपना ऐप्लिकेशन डिप्लॉय करना

कमांड-लाइन विंडो में, यहां दी गई कार्रवाइयां करें.

  1. अपनी नई photo-gallery-app प्रोजेक्ट डायरेक्ट्री पर जाएं.
  2. अपने ऐप्लिकेशन को डिप्लॉय करने के लिए, यह कमांड डालें.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. प्रॉम्प्ट पर, कार्रवाई की पुष्टि करें.gcloud डिप्लॉयमेंट कमांड के पूरा होने के बाद, यह आपके ऐप्लिकेशन को ऐक्सेस करने के लिए यूआरएल दिखाता है.
  4. अपने ब्राउज़र में नया टैब खोलने के लिए, यह कमांड डालें.
    gcloud app browse
    gcloud app deploy का कंसोल आउटपुट और glcoud app browse में एंटर करना

11. बधाई हो

बधाई हो। आपने Angular v14 का इस्तेमाल करके, फ़ोटो गैलरी का एक सैंपल बनाया है. साथ ही, उसे App Engine पर डिप्लॉय किया है.

आपने स्टैंडअलोन कॉम्पोनेंट की सुविधा और लेज़ी लोडिंग का इस्तेमाल किया हो. आपने सुझाव/राय देने या शिकायत करने और टिप्पणी करने के लिए, फ़ॉर्म पर आधारित 'मैसेज भेजें' सुविधा बनाई है. आपने Dialogflow Messenger का इस्तेमाल करके, Dialogflow CX वर्चुअल एजेंट के साथ चैट डायलॉग भी जोड़ दिया है. बहुत खूब.

अगले चरण

अब जब आपने बुनियादी ऐप्लिकेशन बना लिया है, तो यहां दिए गए आइडिया का इस्तेमाल करके इसे बेहतर बनाएं.

  • फ़ॉर्म से सुझाव, राय या शिकायत नहीं भेजी जाती है. इसलिए, ईमेल भेजने के लिए इसमें कारोबारी लॉजिक जोड़ें.
  • असल दुनिया के किसी उदाहरण में, आपको उपयोगकर्ता के इनपुट की पुष्टि करनी चाहिए. साथ ही, बॉट से स्पैम रोकने के लिए, Captcha या इसी तरह का कोई अन्य तरीका शामिल करना चाहिए
  • नया एजेंट बनाएं और Dialogflow CX में बातचीत के फ़्लो डिज़ाइन करने का तरीका जानें

Angular फ़्रेमवर्क के साथ एक्सपेरिमेंट करना जारी रखें और मज़े करें.

अपने Cloud प्रोजेक्ट को मिटाना और उससे जुड़ा डेटा हटाना

आपके पास Cloud प्रोजेक्ट को बनाए रखने का विकल्प होता है. इसके अलावा, प्रोजेक्ट में इस्तेमाल किए गए सभी संसाधनों के लिए बिलिंग बंद करने के लिए, इसे मिटाया भी जा सकता है.

अपने ब्राउज़र में, यह तरीका अपनाएं.

  1. अपने Gmail या Google Workspace खाते में साइन इन करें.
  2. Google Cloud console में, आईएएम और एडमिन सेटिंग बटन चुनें.
  3. IAM और एडमिन पेज पर, संसाधन मैनेज करें टैब चुनें.
  4. संसाधन मैनेज करें पेज पर जाएं.उस प्रोजेक्ट पर जाएं जिसे आपको मिटाना है और उसे चुनें.डायलॉग विंडो खोलने के लिए, मिटाएं बटन चुनें.
  5. डायलॉग विंडो पर, प्रोजेक्ट आईडी डालें. प्रोजेक्ट मिटाने के लिए, बंद करें बटन चुनें.