Erste Schritte mit eigenständigen Komponenten

1. Einführung

Umfang

In diesem Codelab erstellen Sie mit Angular v14 eine Fotogalerieanwendung für Wildtiere. In der fertigen Anwendung werden eine Reihe von Fotos angezeigt. Außerdem gibt es ein Formular zum Senden von Nachrichten, über das Sie den Fotografen kontaktieren können, und ein Chatfenster, in dem Sie interessante Fakten zu den auf den Fotos abgebildeten Tieren erfahren.

Sie entwickeln alles in Ihrer Anwendung mit Angular v14 und dem neuen Feature für eigenständige Komponenten.

Alle Verweise auf das Angular-Framework und die Angular-CLI beziehen sich auf Angular v14. Eigenständige Komponenten sind eine Vorschaufunktion von Angular v14. Sie müssen also eine brandneue Anwendung mit Angular v14 erstellen. Eigenständige Komponenten bieten eine vereinfachte Möglichkeit zum Erstellen von Angular-Anwendungen. Standalone-Komponenten, Standalone-Direktiven und Standalone-Pipes sollen die Erstellung vereinfachen, indem die Notwendigkeit von NgModules reduziert wird. Standalone-Komponenten können das vorhandene Ökosystem von Angular-Bibliotheken voll ausschöpfen.

Das ist die Anwendung, die Sie heute erstellen.

Vollständiger Antrag

Lerninhalte

So erstellen Sie ein neues Projekt mit der Angular CLI
Angular-Standalone-Komponenten verwenden, um die Entwicklung von Angular-Apps zu optimieren
So erstellen Sie eine eigenständige Komponente, d. h. so erstellen Sie die Benutzeroberfläche und fügen etwas Geschäftslogik hinzu
Anwendung mit einer eigenständigen Komponente booten
Lazy Loading einer eigenständigen Komponente
Chatdialog mithilfe von Dialogflow Messenger in eine eigenständige Komponente einbetten
Angular-Anwendung mit der Google Cloud CLI (gcloud) in Google Cloud App Engine bereitstellen

Voraussetzungen

Ein Gmail- oder Google Workspace-Konto
Grundkenntnisse in den folgenden Bereichen
- HTML So erstellen Sie ein Element.
- CSS und weniger. So verwenden Sie einen CSS-Selektor und erstellen eine Stildatei.
- TypeScript oder JavaScript. So interagieren Sie mit der DOM-Struktur.
- Git und GitHub So verzweigen und klonen Sie ein Repository.
- Befehlszeilenschnittstelle wie bash oder zsh. So navigieren Sie in Verzeichnissen und führen Befehle aus.

2. Umgebung einrichten

Lokale Umgebung einrichten

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

Eine aktive LTS- oder Wartungs-LTS-Version von Node.js. Wird verwendet, um das Angular-Framework und die Angular-Befehlszeile zu installieren.

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. Zum Öffnen und Bearbeiten von Dateien.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 CLI über ein Befehlszeilenfenster zu installieren.

npm install --global @angular/cli

Führen Sie den folgenden Angular-Befehl über die 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 dem folgenden Screenshot erhalten.

Terminalausgabe der Angular-Version

Quellcode und Bilder

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

Quellcode herunterladen

Rufen Sie in Ihrem Browser die folgende Seite auf.

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

Führen Sie in einem Befehlszeilenfenster einen Fork und einen Klon des Repositorys aus.

Im nächsten Schritt erstellen Sie 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 CLI und zum Angular-Framework finden Sie unter angular.io.

Neues Projekt erstellen

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
```
Akzeptieren Sie bei jeder Aufforderung die Standardauswahl.Das Angular-Framework installiert die erforderlichen Pakete und Abhängigkeiten. Der Vorgang kann einige Minuten dauern.

Nachdem die Angular-Befehlszeile abgeschlossen ist, haben Sie einen neuen Angular-Arbeitsbereich und eine einfache, sofort ausführbare Anwendung.

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

Anwendungsmodul entfernen

So entfernen Sie das Anwendungsmodul:

Wechseln Sie im 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 hat nur eine Komponente, nämlich die Anwendungskomponente. Sie müssen die Komponente als eigenständig deklarieren.

Eigenständige Komponente deklarieren

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.ts.

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

standalone: true

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

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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Angular-Befehl ein, um die neue Anwendung zu kompilieren.
```
ng serve
```

Die Kompilierung Ihrer Anwendung sollte fehlschlagen. Keine Sorge, du musst nur noch ein paar Dinge korrigieren.

bootstrapApplication API verwenden

Damit Ihre Anwendung ohne NgModule ausgeführt werden kann, müssen Sie eine eigenständige Komponente als Stammkomponente mit der bootstrapApplication API verwenden.

Verweise auf das Anwendungsmodul entfernen

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Ö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 Datei main.ts sollte dem folgenden Codebeispiel entsprechen.

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

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

bootstrapApplication-Komponente hinzufügen

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei main.ts.
Importieren Sie die bootstrapApplication-Komponente aus dem Dienst @angular/platform-browser.
```
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 Datei main.ts 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 allgemeine 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 die folgenden Aktionen in einem Code-Editor aus.

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Ö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 der Komponente hinzu.

imports: [CommonModule, RouterModule],

Die Datei app.component.ts 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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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 beheben.
```
ng serve
```

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

Als Nächstes verschönern Sie Ihre Anwendung, um einige Fotos anzuzeigen.

4. Zeig die Fotos

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

Komponenten sind die grundlegenden Bausteine für Angular-Apps. Komponenten haben drei Hauptaspekte.

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

Fotos in Ihre Anwendung verschieben

Die Bilder sind in der Anwendung enthalten, 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 Projektverzeichnis photo-gallery-app ein.

HTML-Vorlage erstellen

Die Datei app.component.html ist die HTML-Vorlagendatei, die der Komponente AppComponent zugeordnet ist.

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Ö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 die folgenden Aktionen in einem Code-Editor aus.

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei styles.css.

Kopieren Sie das CSS aus dem folgenden Codebeispiel und fügen Sie es 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%;
  }
}

Speichern Sie die Datei styles.css.

Indexdatei aktualisieren

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei index.html.
Fügen Sie die Schriftart Raleway hinzu, damit sie auf allen Seiten verwendet werden kann.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
Speichern Sie die Datei index.html.
Speichern Sie den Code und prüfen Sie Ihren Browser. Wenn der Entwicklungsserver ausgeführt wird, werden die Änderungen im Browser übernommen, sobald Sie sie speichern.
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 bisher gesehen haben, bieten Standalone-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 der Nutzer Feedback geben und mit einem virtuellen Agenten chatten kann.

Neue eigenständige Komponente erstellen

Um diese neue Komponente zu erstellen, verwenden Sie wieder die Angular CLI.

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.

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 Teile des Befehls beschrieben.

Teil	Details
`ng`	Definiert alle Angular CLI-Befehle für das Angular-Framework.
`generate component`	Erstellt das Gerüst für eine neue Komponente
`feedback-and-chat`	Der Name der Komponente
`--standalone`	Weist das Angular-Framework an, 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 Array imports in der Datei app.components.ts hinzufügen.

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

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Ö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 Datei app.component.ts 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.

Komponente verzögert laden

Wechseln Sie von einem Eager-Loading-Paradigma zu einem Lazy-Loading-Paradigma, bei dem der Code erst an den Client gesendet wird, wenn er benötigt wird. Lazy Loading ist eine gute Methode, um die Ladezeit einer Seite zu verkürzen, die Leistung zu verbessern und die Nutzerfreundlichkeit zu steigern. Der Router übernimmt das Lazy Loading, das für ein ngModule und eine eigenständige Komponente identisch ist.

HTML-Vorlage aktualisieren, die der Anwendungskomponente zugeordnet ist

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

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

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src/app.
Öffnen Sie die Datei app.component.html.

Scrollen Sie zum Ende der Datei und fügen Sie das folgende Codebeispiel ein, 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 die folgenden Aktionen in einem Code-Editor aus.

Wechseln Sie im neuen photo-gallery-app-Projektverzeichnis zum Verzeichnis src.
Öffnen Sie die Datei main.ts.
Importieren Sie die Methode provideRouter und das Modul „Routes“. In Angular v14.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';
```

Kopieren Sie das folgende Code-Snippet und fügen Sie es 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 und fügen Sie es ein. Ersetzen Sie dabei die Methode bootstrapApplication.

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

Die Datei main.ts 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 das Angular-Framework die Komponente verzögert lädt.

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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
```
Öffnen Sie die Chrome-Entwicklertools und wählen Sie den Tab Netzwerk aus.
Aktualisieren Sie die Seite, um mehrere Dateien, aber nicht die Komponente feedback-and-chat anzuzeigen.Ihr Bildschirm sollte dem folgenden Screenshot entsprechen.
Klicken Sie auf die Schaltfläche Find out more about these guys! (Weitere Informationen zu diesen Personen), um zur eigenständigen Komponente weitergeleitet zu werden.Im Log sollte zu sehen sein, dass die Komponente nur geladen wird, wenn Sie den vollständigen Router aufrufen. Scrolle zum Ende der Liste, um zu prüfen, ob die Komponente geladen wurde. Ihr Bildschirm sollte dem folgenden Screenshot entsprechen.

6. Benutzeroberfläche für das Formular hinzufügen

Das Formular zum Senden von Feedback hat drei Eingabefelder und eine Schaltfläche unten. 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-Formularsteuerelement gebunden ist, das mit jedem der drei Eingabe-UI-Felder verknüpft ist.

Formular zur HTML-Vorlage hinzufügen

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

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

Rufen Sie die Datei feedback-and-chat.component.html auf.
Entfernen Sie den vorhandenen HTML-Code.

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 im Code-Editor die folgenden Aktionen aus.

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

Kopieren Sie das CSS aus dem folgenden Codebeispiel und fügen Sie es 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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren und auszuführen und einen Webserver zu öffnen.
```
ng serve
```
Die Kompilierung Ihrer Anwendung sollte fehlschlagen. Keine Sorge, Sie müssen das Formular nur binden.
Sehen Sie sich vorerst die folgenden Punkte an.
- Mit der formGroup-Eigenschaftsbindung 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. Die FormGroup-Anweisung gibt dann ein ngSubmit-Ereignis aus, das Sie an die onSubmit-Rückruffunktion binden können.
- In einem späteren Schritt implementieren Sie die onSubmit-Rückruffunktion in der Datei feedback-and-chat.component.ts.
Als Nächstes binden Sie das Formular.

7. Ereignisbehandlung zum Formular hinzufügen

Die Benutzeroberfläche für das Formular Feedback senden ist vollständig, aber die Interaktion fehlt. Die Verarbeitung von Nutzereingaben mit Formularen ist ein wichtiger Bestandteil 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 der Komponente zugeordnet ist.
Validieren Sie die Nutzereingabe. Dazu gehört auch ein Captcha oder ein ähnlicher Mechanismus, um Spam durch Bots zu vermeiden.
Eine E‑Mail an eine bestimmte E‑Mail-Adresse senden
Eine freundliche Nachricht an den Nutzer zurückgeben.

In diesem Codelab implementieren Sie nur die folgenden Aktionen.

Parsen Sie die Nutzereingabe aus der gerenderten DOM-Struktur, die der Komponente zugeordnet ist.
Eine freundliche Nachricht an den Nutzer zurückgeben.

Sie sollten Ihr Können unter Beweis stellen und alle vier Aktionen implementieren.

Das Modell für das Formular zum Senden von Nachrichten zur Komponente hinzufügen

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

Führen Sie im 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 Kontrollvariablen. Im nächsten Schritt verwenden wir die Funktion inject. Daher müssen wir sie auch 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ügen Sie den FormBuilder-Dienst über die inject-Funktion direkt unter der Klassensignatur ein.
```
private formBuilder = inject(FormBuilder);
```
Verwenden Sie die Methode group aus dem Dienst FormBuilder, um ein Formularmodell zu erstellen, mit dem Sie den Namen, die E-Mail-Adresse und die Kommentare eines Nutzers erfassen können.
Erstellen Sie die neue contactForm-Eigenschaft und legen Sie sie 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 Feedbacknachricht an den Fotografen senden. Dazu wird eine E-Mail an eine bestimmte E-Mail-Adresse gesendet. In diesem Codelab werden die Nutzereingaben angezeigt, das Formular wird mit der reset-Methode zurückgesetzt und eine nutzerfreundliche Erfolgsmeldung wird angezeigt.

Fügen Sie die neue onSubmit-Methode 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 Feedbackformular kompilieren und anzeigen

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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
```
Ö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 dem folgenden Screenshot entsprechen.Sie haben den Code erfolgreich implementiert, um der Benutzeroberfläche der Komponente ein Nachricht senden-Formular hinzuzufügen und die Nutzereingaben zu parsen.
Als Nächstes betten Sie einen Chatdialog ein, damit die Besucher der Anwendung mit Jimbo sprechen können. Jimbo ist ein Koala, von dem du einige interessante Fakten über die Tierwelt erfahren kannst.

8. Chatdialog hinzufügen

Sie haben Erfahrung mit dialogorientierten Benutzeroberflächen wie Dialogflow CX oder ähnlichen Plattformen. Ein Dialogflow CX-Agent ist ein virtueller Agent, der nebenläufige Unterhaltungen mit Menschen abwickelt. Es ist ein Modul für Natural Language Understanding (NLU), das die Nuancen der menschlichen Sprache erkennt und den Text oder Audio des Endnutzers während einer Unterhaltung in strukturierte Daten übersetzt, die Apps und Dienste verstehen können.

Ein Beispiel-Virtual Agent wurde bereits für Sie erstellt. In diesem Lab müssen Sie der eigenständigen Komponente einen Chatdialog hinzufügen, damit die Anwendungsnutzer mit dem Bot interagieren können. Für diese Anforderung nutzen Sie Dialogflow Messenger, eine vorgefertigte Integration, die ein anpassbares Dialogfenster bietet. Wenn das Chat-Dialogfeld geöffnet wird, wird es rechts unten auf dem Bildschirm angezeigt und löst die Standard-Begrüßungsabsicht des Kundenservicemitarbeiters aus. Der Bot begrüßt den Nutzer und beginnt eine Unterhaltung.

In der folgenden Implementierung werden dem Nutzer interessante Fakten über Wildtiere präsentiert. Andere Implementierungen für virtuelle Kundenservicemitarbeiter können komplexe Anwendungsfälle für Kunden abdecken (wie ein menschlicher Callcenter-Agent). Viele Unternehmen nutzen einen virtuellen Kundenservicemitarbeiter als primären Kommunikationskanal für die Unternehmenswebsite.

Dialogflow Messenger zur Komponente hinzufügen

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

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

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

Kopieren Sie das df-messenger-Element im 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. Gibt die eindeutige ID des Dialogflow-Agents an.
chat-title	Vorab ausgefüllt. Gibt die Inhalte an, die oben im Chat-Dialogfeld angezeigt werden sollen. Wird anfangs mit dem Namen Ihres Agents ausgefüllt, sollte aber angepasst werden.
df-cx	Gibt an, dass die Interaktion mit einem CX-Agent 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.

Feedbackformular anzeigen

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Angular-Befehl ein, um die Anwendung zu kompilieren.
```
ng serve
```
Die Kompilierung Ihrer Anwendung sollte fehlschlagen. In der Befehlszeile sollte die folgende Fehlermeldung angezeigt werden:
Fügen Sie als Nächstes ein benutzerdefiniertes Schema hinzu.

Benutzerdefiniertes Schema zur Standalone-Komponente hinzufügen

Das df-messanger-Element ist kein bekanntes Element. Es handelt sich um eine benutzerdefinierte Webkomponente. Die Fehlermeldung des Angular-Frameworks deutet darauf hin, dass Sie den beiden eigenständigen Komponenten ein CUSTOM_ELEMENTS_SCHEMA hinzufügen müssen, um die Meldung zu unterdrücken.

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

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

Importieren Sie das CUSTOM_ELEMENTS_SCHEMA-Schema.

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

Fügen Sie 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. Dazu fügen wir der ngOnInit()-Methode den entsprechenden Code hinzu, mit dem das Chat-Script geladen wird, 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.

Aktualisierten Chatdialog zusammenstellen und anzeigen

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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 interessante Fakten über Tiere.
Die Anwendung ist voll funktionsfähig.

9. Anwendung in 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 Google App Engine bereit.

Weitere Informationen zur Google App Engine finden Sie hier.

Umgebung für Google App Engine einrichten

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

Sie haben ein Cloud-Projekt mit App Engine erstellt.
Cloud Build API aktiviert
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 die Ressourcen Ihrer App Engine-Anwendung 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
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 sorgen Sie dafür, 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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Angular-Befehl ein, um eine produktionsreife Version der Anwendung zu kompilieren und zu erstellen.
```
ng build
```

Die produktionsreife Version der Anwendung wird im Unterverzeichnis dist Ihres Projektverzeichnisses photo-gallery-app erstellt.

10. Anwendung mit dem Express.js-Framework bereitstellen

Im Beispielcode in diesem Codelab wird das Express.js-Framework zur Verarbeitung von HTTP-Anfragen 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 im Code-Editor die folgenden Aktionen aus.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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 im Code-Editor die folgenden Aktionen aus.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Öffnen Sie die Datei package.json.

Ändern Sie den Startbefehl, 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 im Code-Editor die folgenden Aktionen aus.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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 geben die Konfiguration für App Engine an. Sie müssen nur die Laufzeit und den Dienst angeben.
Speichern Sie die Datei app.yaml.

gcloud-Ignorierliste aktualisieren

Damit Ihr node_modules-Verzeichnis nicht hochgeladen wird, erstellen Sie eine .gcloudignore-Datei. Dateien, die in der Datei .gcloudignore aufgeführt sind, werden nicht hochgeladen.

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

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Befehl ein, um die Anwendung zu initialisieren.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
Wählen Sie bei entsprechender 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.

Wechseln Sie zum neuen photo-gallery-app-Projektverzeichnis.
Geben Sie den folgenden Befehl ein, um die Anwendung bereitzustellen.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
Bestätigen Sie die Aktion an der Eingabeaufforderung.Nach erfolgreichem 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 eine Beispiel-Fotogalerie mit Angular v14 erstellt und erfolgreich in App Engine bereitgestellt.

Sie haben mit der Funktion für eigenständige Komponenten und mit Lazy Loading experimentiert. Sie haben eine Funktion zum Senden von Nachrichten auf Grundlage eines Formulars entwickelt, um Feedback und Kommentare zu ermöglichen. Sie haben auch erfolgreich einen Chatdialog mit einem virtuellen Dialogflow CX-Kundenservicemitarbeiter über Dialogflow Messenger 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. Führen Sie eine Refaktorierung durch, 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 einfügen, um Spam durch 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 behalten oder es 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.
Wählen Sie in der Google Cloud Console die Schaltfläche IAM- und Verwaltungseinstellungen aus.
Wählen Sie auf der Seite IAM & Verwaltung den Tab Ressourcen verwalten aus.
Wählen Sie auf der Seite Ressourcen verwalten das Projekt aus, das Sie löschen möchten. Klicken Sie 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