Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit eigenständigen Komponenten

1. Einführung

Umfang

In diesem Codelab erstellen Sie mit Angular v14 eine Fotogalerie für Tieraufnahmen. Die ausgefüllte Bewerbung enthält eine Reihe von Fotos sowie ein Formular zum Senden einer Nachricht, über das Sie den Fotografen kontaktieren können, sowie ein Chatfenster, um interessante Fakten über die abgebildeten Tiere zu erfahren.

Sie erstellen Ihre gesamte Anwendung mit Angular v14 und der neuen Funktion für eigenständige Komponenten.

Alle Verweise auf das Angular-Framework und die Angular-Befehlszeile beziehen sich auf Angular v14. Eigenständige Komponenten sind eine Vorabversion von Angular v14. Sie müssen also mit Angular v14 eine ganz neue Anwendung erstellen. Eigenständige Komponenten bieten eine vereinfachte Möglichkeit, Angular-Anwendungen zu erstellen. Eigenständige Komponenten, eigenständige Anweisungen und eigenständige Pipes sollen das Erstellen von Inhalten vereinfachen, indem die Notwendigkeit von NgModules reduziert wird. Eigenständige Komponenten können das gesamte bestehende System von Angular-Bibliotheken nutzen.

Das ist die Anwendung, die Sie heute erstellen.

Abgeschlossene Bewerbung

Lerninhalte

Neues Projekt mit der Angular-Befehlszeile erstellen
Angular-Standalone-Komponenten zur Optimierung der Entwicklung von Angular-Apps verwenden
Wie Sie eine eigenständige Komponente erstellen, also die Benutzeroberfläche erstellen und Geschäftslogik hinzufügen
Bootstrapping einer Anwendung mithilfe einer eigenständigen Komponente ausführen
Eigenständige Komponente mit Lazy Loading laden
Wie man einen Chat-Dialog mit Dialogflow Messenger in eine eigenständige Komponente einbettet
Angular-Anwendung mit der Google Cloud CLI (gcloud) in der Google Cloud App Engine bereitstellen

Voraussetzungen

Ein Gmail- oder Google Workspace-Konto
Grundkenntnisse in den folgenden Themen
- HTML: So erstellen Sie ein Element.
- CSS und Less. Informationen zum Verwenden eines CSS-Selektors und zum Erstellen einer Stildefinitionsdatei.
- TypeScript oder JavaScript. Wie Sie mit der DOM-Struktur interagieren.
- Git und GitHub. Verzweigen und Klonen eines Repositorys
- Befehlszeilenschnittstelle, z. B. bash oder zsh Wie Sie durch Verzeichnisse navigieren und Befehle ausführen.

2. Umgebung einrichten

Lokale Umgebung einrichten

Für dieses Codelab müssen Sie die folgende Software auf Ihrem lokalen Computer installieren.

Eine aktive Langzeit- oder Wartungsversion von Node.js Wird zum Installieren des Angular-Frameworks und der Angular-Befehlszeile verwendet.

Knotenversion

Unterstützt von Angular

14.15 oder höher

Unterstützt

16.10 oder höher

Unterstützt

18.1.0

Nicht unterstützt

Führen Sie den folgenden node-Befehl in einem Befehlszeilenfenster aus, um die Version von Node.js auf Ihrem lokalen Computer zu prüfen.
```
node -v
```
Einen Code-Editor oder eine IDE Wird zum Öffnen und Bearbeiten von Dateien verwendet.Visual Studio Code oder ein anderer Code-Editor Ihrer Wahl.

Angular CLI installieren

Nachdem Sie alle Abhängigkeiten konfiguriert haben, führen Sie den folgenden npm-Befehl aus, um die Angular-Befehlszeile über ein Befehlszeilenfenster zu installieren.

npm install --global @angular/cli

Führen Sie den folgenden Angular-Befehl über eine Befehlszeile aus, um zu prüfen, ob Ihre Konfiguration korrekt ist.

ng version

Wenn der Angular-Befehl erfolgreich abgeschlossen wurde, sollten Sie eine Meldung ähnlich der folgenden Bildschirmaufnahme erhalten.

Terminalausgabe der Angular-Version

Quellcode und Bilder

Sie erstellen die gesamte Anwendung von Grund auf und dieses Codelab unterstützt Sie dabei Schritt für Schritt. Das GitHub-Repository enthält den endgültigen Code. Wenn Sie nicht weiterkommen, sehen Sie sich den endgültigen Code und die Bilder an, die auf der Galerieseite angezeigt werden.

So laden Sie den Quellcode herunter:

Rufen Sie in Ihrem Browser die folgende Seite auf.

https://github.com/angular/codelabs/tree/standalone-components

Erstellen Sie in einem Befehlszeilenfenster ein Fork und klonen Sie das Repository.

Erstellen Sie im nächsten Schritt Ihre Fotogalerie-Anwendung.

3. Neue Anwendung erstellen

Führen Sie die folgenden Schritte aus, um die erste Starter-Anwendung zu erstellen.

Verwenden Sie die Angular CLI, um einen neuen Arbeitsbereich zu erstellen. Weitere Informationen zur Angular-Befehlszeile und zum Angular-Framework finden Sie unter angular.io.

Erstellen Sie ein neues Projekt

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Geben Sie den folgenden Angular-Befehl ein, um ein neues Angular-Projekt mit dem Namen photo-gallery-app zu erstellen.
```
ng new photo-gallery-app
```
Übernehmen Sie bei jeder Eingabeaufforderung die Standardauswahl.Das Angular-Framework installiert die erforderlichen Pakete und Abhängigkeiten. Der Vorgang kann einige Minuten dauern.

Nach Abschluss der Angular-Befehlszeile haben Sie einen neuen Angular-Arbeitsbereich und eine einfache, sofort einsatzbereite Anwendung.

Ihre neue Anwendung ist wie eine Standard-Angular-Anwendung strukturiert. Das NgModule in Ihrer neuen Anwendung ist für dieses Codelab redundant.

Anwendungsmodul entfernen

So entfernen Sie das Anwendungsmodul:

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Löschen Sie die Datei app.module.ts.

Nachdem Sie das Anwendungsmodul gelöscht haben, ist kein Modul mehr in Ihrer Anwendung vorhanden. Ihre Anwendung verfügt nur über eine Komponente, nämlich die Anwendungskomponente. Sie müssen die Komponente als eigenständige Komponente deklarieren.

Eigenständige Komponente deklarieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie das Verzeichnis src/app in Ihrem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei app.component.ts.

Fügen Sie der Liste der Decorators den folgenden Parameter und Wert hinzu.

standalone: true

Die Datei app.component.ts sollte dem folgenden Codebeispiel sehr ähnlich sein.

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';
}

Speichern Sie die Datei app.component.ts.

Neue eigenständige Anwendung kompilieren

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um Ihre neue Anwendung zu kompilieren.
```
ng serve
```

Die Anwendung sollte nicht kompiliert werden. Keine Sorge, Sie müssen nur noch ein paar Dinge korrigieren.

bootstrapApplication API verwenden

Damit deine Anwendung ohne NgModule ausgeführt werden kann, musst du mithilfe der bootstrapApplication API eine eigenständige Komponente als Stammkomponente verwenden.

Verweise auf das Anwendungsmodul entfernen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufe das Verzeichnis src in deinem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei main.ts.

Entfernen Sie den folgenden Importcode, da Sie kein Anwendungsmodul mehr haben.

import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Entfernen Sie den folgenden Bootstrap-Code, da Sie kein Anwendungsmodul mehr haben.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Die main.ts-Datei sollte dem folgenden Codebeispiel entsprechen.

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Komponente „bootstrapApplication“ hinzufügen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie das Verzeichnis src in Ihrem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei main.ts.
Importieren Sie die bootstrapApplication-Komponente aus dem @angular/platform-browser-Dienst.
```
import { bootstrapApplication } from '@angular/platform-browser';
```

Fügen Sie den folgenden Code hinzu, um Ihre Anwendung zu starten.

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

Importieren Sie die Komponente und die erforderlichen Bibliotheken.

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

Die main.ts-Datei sollte dem folgenden Codebeispiel entsprechen.

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 und gängige Module hinzufügen

Wenn Sie den Router und andere gängige Modulfunktionen verwenden möchten, müssen Sie jedes Modul direkt in die Komponente importieren.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie das Verzeichnis src/app in Ihrem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei app.component.ts.

Importieren Sie die erforderlichen Module in die Komponente.

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

Fügen Sie die Importe in die Komponente ein.

imports: [CommonModule, RouterModule],

Die app.component.ts-Datei sollte dem folgenden Codebeispiel entsprechen.

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';
}

Speichern Sie die Datei app.component.ts.

Neue eigenständige Anwendung kompilieren und ausführen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen. Möglicherweise müssen Sie Ihre IDE schließen, bevor Sie Ihre Anwendung ausführen, um Kompilierungsfehler zu entfernen.
```
ng serve
```

Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden. Alle vorherigen Fehler sollten behoben sein und die Kompilierung sollte erfolgreich sein. Gut gemacht! Sie haben eine Angular-Anwendung erstellt, die ohne Modul und mit einer eigenständigen Komponente ausgeführt wird.

Als Nächstes verschönern Sie Ihre Anwendung, indem Sie einige Fotos anzeigen.

4. Fotos anzeigen

Ihre neue Anwendung ist als Fotogalerie konzipiert und sollte einige Fotos anzeigen.

Komponenten sind die Hauptbausteine von Angular-Anwendungen. Komponenten haben drei Hauptaspekte.

Eine HTML-Datei für die Vorlage
Eine CSS-Datei für die Stile
TypeScript-Datei für das Verhalten der App

Fotos in Ihre Anwendung verschieben

Die Bilder befinden sich in der Anwendung, die Sie zuvor von GitHub heruntergeladen haben.

Rufen Sie das Verzeichnis src/assets des GitHub-Projekts auf.
Kopieren Sie die Dateien und fügen Sie sie in das Verzeichnis analogue in Ihrem photo-gallery-app-Projektverzeichnis ein.

HTML-Vorlage erstellen

Die Datei app.component.html ist die HTML-Vorlagendatei, die mit der Komponente AppComponent verknüpft ist.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie im neuen Projektverzeichnis photo-gallery-app das Verzeichnis src/app auf.
Öffnen Sie die Datei app.component.html.
Löschen Sie den gesamten vorhandenen HTML-Code.

Kopieren Sie den HTML-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

<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

Speichern Sie die Datei app.component.html.

Stildefinitionsdatei erstellen

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie im neuen Projektverzeichnis photo-gallery-app das Verzeichnis src auf.
Öffnen Sie die Datei styles.css.

Kopieren Sie den CSS-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

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%;
  }
}

Datei styles.css speichern

Indexdatei aktualisieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Wechseln Sie in Ihrem neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei index.html.
Fügen Sie die Schriftart Raleway hinzu, damit sie für alle Seiten übernommen werden kann.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
Speichern Sie die Datei index.html.
Speichern Sie den Code und überprüfen Sie Ihren Browser. Wenn der Anwendungsserver ausgeführt wird, werden die Änderungen beim Speichern im Browser angezeigt.
Als Nächstes erstellen Sie eine neue eigenständige Komponente, um Feedback zu senden und mit Jimbo zu chatten. In diesem Codelab erfahren Sie mehr über Jimbo.

5. Neue eigenständige Komponente hinzufügen

Wie Sie bereits gesehen haben, bieten eigenständige Komponenten eine vereinfachte Möglichkeit zum Erstellen von Angular-Anwendungen, da weniger NgModules erforderlich sind. In den folgenden Abschnitten erstellen Sie eine neue eigenständige Komponente, mit der Nutzer Feedback senden und mit einem virtuellen Kundenservicemitarbeiter chatten können.

Neue eigenständige Komponente erstellen

Verwenden Sie zum Erstellen dieser neuen Komponente wieder die Angular CLI.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.

Geben Sie den folgenden Angular-Befehl ein, um eine neue Komponente mit dem Namen feedback-and-chat zu erstellen.

ng generate component feedback-and-chat --standalone

In der folgenden Tabelle werden die Bestandteile des Befehls beschrieben.

Teil	Details
`ng`	Definiert alle Angular-Kommandozeilenbefehle für das Angular-Framework
`generate component`	Erstellt das Scaffolding für eine neue Komponente
`feedback-and-chat`	Der Name der Komponente
`--standalone`	Das Angular-Framework wird angewiesen, eine eigenständige Komponente zu erstellen.

Neue eigenständige Komponente importieren

Wenn Sie die neue eigenständige Komponente verwenden möchten, müssen Sie sie zuerst dem imports-Array in der app.components.ts-Datei hinzufügen.

Da es sich um eine eigenständige Komponente handelt, importieren Sie sie einfach wie ein Modul.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie das Verzeichnis src/app in Ihrem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei app.component.ts.

Importieren Sie die neue eigenständige Komponente.

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

Aktualisieren Sie die Importe in der Komponente.

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

Die app.component.ts-Datei sollte dem folgenden Codebeispiel entsprechen.

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';
}

Speichern Sie die Datei app.component.ts.

Lazy Loading der Komponente

Wechseln Sie von einem Eager-Loading-Paradigma zu einem Lazy-Loading-Paradigma, bei dem der Code erst dann an den Client gesendet wird, wenn er benötigt wird. Lazy Loading ist eine gute Möglichkeit, die Ladezeit einer Seite zu verkürzen, die Leistung zu verbessern und die Nutzerfreundlichkeit zu erhöhen. Der Router übernimmt das Lazy Load, das bei einer ngModule und einer eigenständigen Komponente gleich ist.

Aktualisieren Sie die mit der Anwendungskomponente verknüpfte HTML-Vorlage.

Wenn Sie die eigenständige Komponente lazy laden möchten, fügen Sie der Benutzeroberfläche eine Schaltfläche hinzu, die die Komponente nur aktiviert, wenn ein Nutzer sie auswählt.

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie im neuen Projektverzeichnis photo-gallery-app das Verzeichnis src/app auf.
Öffnen Sie die Datei app.component.html.

Scrollen Sie zum Ende der Datei und fügen Sie das folgende Codebeispiel hinzu, bevor Sie das article-Element schließen.

<a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>

Die Datei app.component.html sollte dem folgenden Codebeispiel entsprechen.

<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>

Speichern Sie die Datei app.component.html.

Routen konfigurieren

Führen Sie in einem Code-Editor die folgenden Aktionen aus.

Rufen Sie das Verzeichnis src in Ihrem neuen Projektverzeichnis photo-gallery-app auf.
Öffnen Sie die Datei main.ts.
Importieren Sie die Methode provideRouter und das Routes-Modul. In Angular v 14.2.0 wurde die neue Methode „provideRouter“ eingeführt, mit der wir eine Reihe von Routen für die Anwendung konfigurieren können.
```
import { provideRouter, Routes } from '@angular/router';
```

Fügen Sie das folgende Code-Snippet zwischen den Importen und der if-Anweisung ein.

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

Kopieren Sie das folgende Code-Snippet, fügen Sie es ein und ersetzen Sie die Methode bootstrapApplication.

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

Die main.ts-Datei sollte dem folgenden Codebeispiel entsprechen.

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));

Speichern Sie die Datei main.ts.

Mit den Chrome-Entwicklertools kompilieren und überprüfen

Mit den Chrome-Entwicklertools können Sie prüfen, wie die Komponente vom Angular-Framework verzögert geladen wird.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsserver sollte auf Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Öffne die Chrome-Entwicklertools und wähle den Tab Netzwerk aus.
Aktualisieren Sie die Seite, um mehrere Dateien, aber nicht die feedback-and-chat-Komponente zu sehen.Ihr Bildschirm sollte der folgenden Abbildung entsprechen.
Klicken Sie auf die Schaltfläche Erfahren Sie mehr über diese Leute!, um zur eigenständigen Komponente zu gelangen.Aus dem Protokoll geht hervor, dass die Komponente nur geladen wird, wenn Sie den vollen Router nutzen. Scrollen Sie nach unten zum Ende der Liste, um zu prüfen, ob die Komponente geladen wurde. Ihr Display sollte der folgenden Abbildung entsprechen.

6. UI für das Formular hinzufügen

Das Formular zum Senden von Feedback enthält drei Eingabefelder und unten eine Schaltfläche. Die drei Eingabefelder sind Vollständiger Name, E-Mail-Adresse des Absenders und Kommentare.

Fügen Sie zur Unterstützung der Benutzeroberfläche ein formControlName-Attribut in ein input-Element ein, das an jedes contactForm-Formularkontrollelement gebunden ist, das mit den drei Eingabefeldern der Benutzeroberfläche verknüpft ist.

Formular der HTML-Vorlage hinzufügen

Fügen Sie der Benutzeroberfläche ein Formular hinzu, damit Nutzer Feedback senden können.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.html auf.
Entfernen Sie die vorhandene HTML-Datei.

Kopieren Sie den HTML-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

<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>

Speichern Sie die Datei feedback-and-chat.component.html.

Stildatei für das Formular aktualisieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.css auf.

Kopieren Sie den CSS-Code aus dem folgenden Codebeispiel und fügen Sie ihn ein.

/*   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;
  }
}

Speichern Sie die Datei feedback-and-chat.component.css.

UI-Update für das Formular kompilieren

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Die Anwendung sollte nicht kompiliert werden. Keine Sorge, Sie müssen das Formular binden.
Sehen Sie sich jetzt die folgenden Punkte an.
- Mit der formGroup-Attributbindung binden Sie contactForm an das form-Element und die ngSubmit-Ereignisbindung
- Die FormGroup-Anweisung wartet auf das Ereignis „submit“, das vom form-Element ausgegeben wird. Anschließend sendet die FormGroup-Richtlinie ein ngSubmit-Ereignis aus, das Sie an die onSubmit-Rückruffunktion binden können.
- In einem späteren Schritt implementieren Sie die Rückruffunktion onSubmit in der Datei feedback-and-chat.component.ts.
Als Nächstes binden Sie das Formular.

7. Dem Formular Ereignisbehandlung hinzufügen

Die Benutzeroberfläche für das Formular Feedback senden ist fertig, aber die Interaktion fehlt. Die Verarbeitung von Nutzereingaben mithilfe von Formularen ist der Eckpfeiler vieler gängiger Anwendungen.

In einem realen Szenario müssen Sie Geschäftslogik implementieren, um die folgenden Aktionen auszuführen.

Parsen Sie die Nutzereingabe aus der gerenderten DOM-Struktur, die mit der Komponente verknüpft ist.
Prüfen Sie die Nutzereingaben. Dazu gehört ein Captcha oder ein ähnlicher Mechanismus, um Spam von Bots zu vermeiden.
Senden Sie eine E-Mail an eine festgelegte E-Mail-Adresse.
Zeigen Sie dem Nutzer eine freundliche Nachricht an.

In diesem Codelab implementieren Sie nur die folgenden Aktionen.

Die Nutzereingabe aus der gerenderten DOM-Struktur der Komponente parsen.
Zeigen Sie dem Nutzer eine freundliche Nachricht.

Sie sollten sich selbst herausfordern und alle vier Maßnahmen umsetzen.

Der Komponente das Modell zum Senden von Nachrichtenformularen hinzufügen

Erstellen Sie das Formularmodell zum Senden von Feedback und fügen Sie es in der Komponentenklasse hinzu. Das Formularmodell bestimmt den Status des Formulars. Der FormBuilder-Dienst bietet praktische Methoden zum Erstellen eines UI-Steuerelements.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.
Importieren Sie den FormBuilder-Dienst und das ReactiveModule-Modul aus dem @angular/forms-Paket. Dieser Dienst bietet praktische Methoden zum Generieren von Steuerelementen. Im nächsten Schritt verwenden wir die Funktion inject. Daher müssen wir auch diese aus @angular/core importieren.
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

Importieren Sie das Modul ReactiveFormsModule.

imports: [CommonModule,ReactiveFormsModule],

Entfernen Sie den folgenden Konstruktor.
```
constructor() { }
```
Führen Sie den FormBuilder-Dienst über die inject-Funktion direkt unter der Klassensignatur ein.
```
private formBuilder = inject(FormBuilder);
```
Verwenden Sie die Methode group des Dienstes FormBuilder, um ein Formularmodell zu erstellen, mit dem der Name, die E-Mail-Adresse und die Kommentare eines Nutzers erfasst werden.
Erstellen Sie das neue Attribut contactForm und legen Sie es mit der Methode group auf ein Formularmodell fest.Das Formularmodell enthält die Felder name, email und comments.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Definieren Sie eine onSubmit-Methode zum Verarbeiten des Formulars.In einem realen Szenario kann der Nutzer mit der onSubmit-Methode eine Feedback-E-Mail an den Fotografen senden, die an eine bestimmte E-Mail-Adresse gesendet wird.In diesem Codelab geben Sie die Nutzereingaben aus, setzen das Formular mit der Methode reset zurück und zeigen eine nutzerfreundliche Erfolgsmeldung an.

Fügen Sie die neue Methode onSubmit hinzu und legen Sie die Variable showMsg nach der Initialisierung auf true fest.

showMsg: boolean = false;

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

Die Datei feedback-and-chat.component.ts sollte dem folgenden Codebeispiel entsprechen.

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();
  }
}

Speichern Sie die Datei feedback-and-chat.component.ts.

Modell für das Senden von Feedbackformularen kompilieren und anzeigen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsteam sollte über Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Öffnen Sie die Chrome-Entwicklertools und wählen Sie den Tab Konsole aus.
Geben Sie Werte in die Textfelder Vollständiger Name, E-Mail und Kommentare ein.
Klicken Sie auf die Schaltfläche Senden.Auf der Seite sollte eine Erfolgsmeldung angezeigt werden.
Prüfen Sie, ob die Werte auf dem Tab Konsole angezeigt werden.Ihr Bildschirm sollte mit dem folgenden Screenshot übereinstimmen.Sie haben den Code erfolgreich implementiert, um der Benutzeroberfläche der Komponente ein Formular zum Senden von Nachrichten hinzuzufügen und die Nutzereingaben zu analysieren.
Als Nächstes betten Sie ein Chat-Dialogfeld ein, damit die Anwendungsbesucher mit Jimbo sprechen können. Jimbo ist ein Koala, von dem du coole Fakten über die Tierwelt erfährst.

8. Chatdialog hinzufügen

Nutzen Sie Ihre Erfahrung mit dialogorientierten Benutzeroberflächen wie Dialogflow CX oder ähnlichen Plattformen. Ein Dialogflow CX-Agent ist ein virtueller Kundenservicemitarbeiter, der nebenläufige Unterhaltungen mit Menschen abwickelt. Mithilfe von Natural Language Understanding (NLU) versteht der Agent die Nuancen der menschlichen Sprache und übersetzt Nutzereingaben in Text- oder Audioform in strukturierte Daten, die Anwendungen und Dienste verstehen können.

Es wurde bereits ein Beispiel für einen virtuellen Kundenservicemitarbeiter erstellt, den Sie verwenden können. In diesem Lab fügen Sie der eigenständigen Komponente einen Chatdialog hinzu, damit die App-Nutzer mit dem Bot interagieren können. Für diese Anforderung verwenden Sie Dialogflow Messenger, eine vorgefertigte Integration mit einem anpassbaren Dialogfeld. Wenn das Chat-Dialogfeld geöffnet wird, wird es rechts unten auf dem Bildschirm angezeigt und löst die Standard-Willkommensabsicht des Kundenservicemitarbeiters aus. Der Bot begrüßt den Nutzer und beginnt eine Unterhaltung.

In der folgenden Implementierung werden dem Nutzer interessante Fakten über die Tierwelt mitgeteilt. Andere Implementierungen für virtuelle Kundenservicemitarbeiter können komplexe Anwendungsfälle für Kunden abdecken (z. B. ein menschlicher Callcentermitarbeiter). Viele Unternehmen verwenden einen virtuellen Kundenservicemitarbeiter als primären Kanal für die Kommunikation mit der Unternehmenswebsite.

Dialogflow Messenger zur Komponente hinzufügen

Wie das Formular sollte auch das Chat-Dialogfeld nur angezeigt werden, wenn die eigenständige Komponente geladen wird.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.

Kopieren Sie das df-messenger-Element aus dem folgenden Codebeispiel und fügen Sie es an einer beliebigen Stelle auf der Seite ein.

<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 generiert die Attribute für das df-messenger-Element, wenn Sie die Dialogflow Messenger-Integration auswählen.

Attribut	Details
agent-id	Vorab ausgefüllt. Die eindeutige ID des Dialogflow-Agents.
chat-title	Vorab ausgefüllt. Gibt an, welcher Inhalt oben im Chat-Dialogfeld angezeigt werden soll. Anfangs mit dem Namen Ihres Agents vorausgefüllt, aber Sie sollten ihn anpassen.
df-cx	Gibt an, dass die Interaktion mit einem CX-Kundenservicemitarbeiter erfolgt. Legen Sie den Wert auf `true` fest.
Intent	Gibt das benutzerdefinierte Ereignis an, mit dem der erste Intent ausgelöst wird, wenn das Chat-Dialogfeld geöffnet wird.
language-code	Gibt den Standardsprachcode für den ersten Intent an.
Standort	Gibt die Region an, in der Sie den Agent bereitstellen.

Speichern Sie die Datei feedback-and-chat.component.ts.

Feedback-Formular-Modell anzeigen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren.
```
ng serve
```
Die Anwendung sollte nicht kompiliert werden. In der Befehlszeile sollte die folgende Fehlermeldung angezeigt werden.
Fügen Sie als Nächstes ein benutzerdefiniertes Schema hinzu.

Der eigenständigen Komponente ein benutzerdefiniertes Schema hinzufügen

Das Element df-messanger ist kein bekanntes Element. Es ist eine benutzerdefinierte Webkomponente. Die Fehlermeldung vom Angular-Framework schlägt vor, dass Sie beiden eigenständigen Komponenten ein CUSTOM_ELEMENTS_SCHEMA hinzufügen müssen, um die Meldung zu unterdrücken.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie die Datei feedback-and-chat.component.ts auf.

Importieren Sie das Schema CUSTOM_ELEMENTS_SCHEMA.

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

Fügen Sie die CUSTOM_ELEMENTS_SCHEMA der Liste der Schemas hinzu.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Die Datei feedback-and-chat.component.ts sollte dem folgenden Codebeispiel entsprechen.

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]
})

...

Für die Webkomponente „df-messanger“ ist ein JavaScript erforderlich, das nur dann eingefügt werden sollte, wenn die Feedback- und Chatkomponente geladen wird. Zu diesem Zweck fügen wir der ngOnInit()-Methode den entsprechenden Code hinzu, der das Chat-Skript lädt, das zum Aktivieren des -Elements erforderlich ist.

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);
}

Speichern Sie die Datei feedback-and-chat.component.ts.

Aktualisiertes Chatfenster kompilieren und anzeigen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Ihr Entwicklungsserver sollte auf Port 4200 ausgeführt werden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Rufen Sie die folgende Seite auf.
```
http://localhost:4200
```
Unten auf der Seite sollte ein Chatsymbol angezeigt werden.
Wählen Sie das Symbol aus und interagieren Sie mit Jimbo.Jimbo liefert coole Tierfakten.
Die Anwendung ist voll funktionsfähig.

9. Anwendung in der Google App Engine bereitstellen

Die Anwendung wird lokal auf Ihrem Computer ausgeführt. Im nächsten und letzten Schritt dieses Codelabs stellen Sie die Anwendung in der Google App Engine bereit.

Weitere Informationen zur Google App Engine finden Sie unter App Engine.

Umgebung für Google App Engine einrichten

Wenn Sie bereits alle folgenden Bedingungen erfüllen, überspringen Sie die nächsten Schritte und fahren Sie mit der Bereitstellung der Anwendung fort.

Sie haben ein Cloud-Projekt mit der App Engine erstellt.
Cloud Build API aktiviert
Sie haben die Google Cloud CLI installiert.

Führen Sie die folgenden Schritte aus:

Melden Sie sich in Ihrem Gmail- oder Google Workspace-Konto an. Sie haben noch kein Google-Konto? Hier können Sie kostenlos eines erstellen.
Aktivieren Sie die Abrechnung in der Cloud Console, damit Sie Cloud-Ressourcen und APIs verwenden können. Weitere Informationen finden Sie unter Selfservice-Cloud-Rechnungskonto erstellen, ändern oder schließen.
Erstellen Sie ein Google Cloud-Projekt für Ihre App Engine-Anwendungsressourcen und andere Google Cloud-Ressourcen. Weitere Informationen finden Sie unter Projekte erstellen und verwalten.
Aktivieren Sie die Cloud Build API in der Cloud Console. Weitere Informationen finden Sie unter Zugriff auf die API aktivieren.
Installieren Sie die Google Cloud CLI und das gcloud-Befehlszeilentool. Weitere Informationen finden Sie unter gcloud CLI installieren.
Initialisieren Sie die Google Cloud CLI und achten Sie darauf, dass gcloud für die Verwendung des Google Cloud-Projekts konfiguriert ist, in dem Sie die Bereitstellung vornehmen möchten. Weitere Informationen finden Sie unter gcloud CLI initialisieren.

Eigenständige Anwendung erstellen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Angular-Befehl ein, um eine produktionsreife Version der Anwendung zu kompilieren und zu erstellen.
```
ng build
```

Die für die Produktion bereite Version der Anwendung wird im Unterverzeichnis dist des Projektverzeichnisses photo-gallery-app erstellt.

10. Anwendung mit dem Express.js-Framework bereitstellen

Im Beispielcode in diesem Codelab wird zur Verarbeitung von HTTP-Anfragen das Express.js-Framework verwendet. Sie können Ihr bevorzugtes Web-Framework verwenden.

Express.js-Framework installieren

Führen Sie in einem Befehlszeilenfenster die folgenden Schritte aus.

Geben Sie den folgenden Befehl ein, um das Express.js-Framework zu installieren.
```
npm install express --save
```

Webserver konfigurieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue server.js-Datei.

Kopieren Sie den folgenden Code und fügen Sie ihn ein.

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}`);
});

Speichern Sie die Datei server.js.

Webserver anhängen

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Öffnen Sie die Datei package.json.

Ändern Sie den Befehl „start“, um den Knoten in der Datei server.js auszuführen.

"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"
  },

Das Attribut start ist der Einstiegspunkt für Ihre Anwendung.

Speichern Sie die Datei package.json.

App Engine konfigurieren

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue app.yaml-Datei.
Kopieren Sie den folgenden Code und fügen Sie ihn ein.
```
runtime: nodejs16
service: default
```
Die Informationen in der Datei app.yaml legen die Konfiguration für App Engine fest. Sie müssen nur die Laufzeit und den Dienst angeben.
Speichern Sie die Datei app.yaml.

Ignorierliste für gcloud aktualisieren

Erstellen Sie eine .gcloudignore-Datei, damit Ihr node_modules-Verzeichnis nicht hochgeladen wird. Die in Ihrer .gcloudignore-Datei aufgeführten Dateien wurden nicht hochgeladen.

Führen Sie in Ihrem Code-Editor die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Erstellen Sie eine neue .gcloudignore-Datei.

Kopieren Sie den folgenden Code und fügen Sie ihn ein.

# 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/

Speichern Sie die Datei .gcloudignore.

Anwendung initialisieren

Bevor Sie die Anwendung bereitstellen, müssen Sie sie mit Ihrem Projekt initialisieren und eine zugehörige Region auswählen.

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie das neue photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Befehl ein, um die Anwendung zu initialisieren.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
Wählen Sie auf der Aufforderung die Region aus, in der sich die App Engine-Anwendung befinden soll.

Anwendung bereitstellen

Führen Sie in einem Befehlszeilenfenster die folgenden Aktionen aus.

Rufen Sie Ihr neues photo-gallery-app-Projektverzeichnis auf.
Geben Sie den folgenden Befehl ein, um die Anwendung bereitzustellen.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
Bestätigen Sie die Aktion in der Eingabeaufforderung.Nach Abschluss des gcloud-Bereitstellungsbefehls wird eine URL für den Zugriff auf Ihre Anwendung angezeigt.
Geben Sie den folgenden Befehl ein, um einen neuen Tab in Ihrem Browser zu öffnen.
```
gcloud app browse
```

11. Glückwunsch

Glückwunsch! Sie haben mit Angular v14 eine Beispiel-Fotogalerie erstellt und in der App Engine bereitgestellt.

Sie haben mit der Funktion für eigenständige Komponenten und dem Lazy Loading experimentiert. Sie haben eine formularbasierte Funktion zum Senden von Nachrichten erstellt, um Feedback und Kommentare zu geben. Außerdem haben Sie mit Dialogflow Messenger einen Chatdialog mit einem Dialogflow CX-virtuellen Kundenservicemitarbeiter hinzugefügt. Gut gemacht!

Nächste Schritte

Nachdem Sie die grundlegende Anwendung fertiggestellt haben, können Sie sie mit den folgenden Ideen verbessern.

Über das Formular wird kein Feedback gesendet. Refaktorisieren Sie es, um die Geschäftslogik zum Senden einer E-Mail hinzuzufügen.
In der Praxis sollten Sie die Nutzereingabe validieren und ein Captcha oder einen ähnlichen Mechanismus einbinden, um Spam von Bots zu vermeiden.
Neuen Agent erstellen und Konversationsabläufe in Dialogflow CX entwerfen

Experimentieren Sie weiter mit dem Angular-Framework und haben Sie Spaß dabei.

Cloud-Projekt bereinigen und löschen

Sie können Ihr Cloud-Projekt beibehalten oder löschen, um die Abrechnung für alle im Projekt verwendeten Ressourcen zu beenden.

Führen Sie in Ihrem Browser die folgenden Aktionen aus.

Melden Sie sich in Ihrem Gmail- oder Google Workspace-Konto an.
Klicken Sie in der Google Cloud Console auf die Schaltfläche IAM- und Administratoreinstellungen.
Wählen Sie auf der Seite IAM und Verwaltung den Tab Ressourcen verwalten aus.
Rufen Sie auf der Seite Ressourcen verwalten das Projekt auf, das Sie löschen möchten, und wählen Sie es aus. Klicken Sie dann auf die Schaltfläche Löschen, um ein Dialogfeld zu öffnen.
Geben Sie im Dialogfeld die Projekt-ID ein. Klicken Sie auf die Schaltfläche Herunterfahren, um das Projekt zu löschen.

Knotenversion	Unterstützt von Angular
14.15 oder höher	Unterstützt
16.10 oder höher	Unterstützt
18.1.0	Nicht unterstützt