Ta strona została przetłumaczona przez Cloud Translation API.

Pierwsze kroki z samodzielnymi komponentami

1. Wprowadzenie

Co utworzysz

W tym ćwiczeniu w Codelabs utworzysz aplikację z galeriami zdjęć przyrody za pomocą Angulara w wersji 14. Wypełniona aplikacja będzie zawierać zestaw zdjęć oraz formularz wysyłania wiadomości, za pomocą którego można skontaktować się z fotografem, a także okno czatu, w którym można dowiedzieć się ciekawych faktów o zwierzętach widocznych na zdjęciach.

Wszystko w aplikacji tworzysz za pomocą Angulara w wersji 14 i nowej funkcji samodzielnych komponentów.

Wszystkie odniesienia do frameworka i interfejsu wiersza poleceń Angular odnoszą się do wersji 14. Samodzielne komponenty to funkcja w wersji wstępnym Angulara 14, więc musisz utworzyć zupełnie nową aplikację w wersji Angulara 14. Samodzielne komponenty to uproszczony sposób tworzenia aplikacji Angular. Samodzielne komponenty, samodzielne dyrektywy i samodzielne kreski mają na celu uproszczenie procesu tworzenia treści dzięki ograniczeniu konieczności użycia funkcji NgModules. Samodzielne komponenty mogą w pełni korzystać z dotychczasowego ekosystemu bibliotek Angular.

To jest aplikacja, którą tworzysz dzisiaj.

Zakończone zgłoszenie

Czego się nauczysz

Jak użyć narzędzia wiersza poleceń Angular do stworzenia szablonu nowego projektu
Jak używać samodzielnych komponentów Angular do usprawnienia tworzenia aplikacji Angular
Jak utworzyć samodzielny komponent, czyli jak utworzyć interfejs użytkownika i dodać logikę biznesową
Jak uruchomić aplikację za pomocą samodzielnego komponentu
Jak wczytywać komponent samodzielny z opóźnieniem
Jak umieścić okno czatu w samodzielnym komponencie przy użyciu Dialogflow Messenger
Jak wdrożyć aplikację Angular w Google Cloud App Engine za pomocą Google Cloud CLI (gcloud)

Czego potrzebujesz

Konto Gmail lub Google Workspace
podstawową wiedzę z tych dziedzin:
- HTML. Jak utworzyć element.
- CSS i mniej. Jak korzystać z selektora arkusza CSS i utworzyć plik definicji stylu.
- TypeScript lub JavaScript. interakcji z strukturą DOM.
- git i GitHub. Jak utworzyć rozwidlenie i skopiować repozytorium.
- interfejs wiersza poleceń, np. bash lub zsh; Jak poruszać się po katalogach i uruchamiać polecenia.

2. Konfiguracja środowiska

Konfigurowanie środowiska lokalnego

Aby wykonać to ćwiczenie w Codelabs, musisz zainstalować następujące oprogramowanie na komputerze lokalnym.

aktywna lub LTS w etapie konserwacji wersja Node.js. Służy do instalacji platformy Angular i interfejsu wiersza poleceń Angular.

Wersja węzła

Obsługiwane przez Angular

14.15 lub nowsze

Obsługiwane

16.10 lub nowsze

Obsługiwane

18.1.0

Nieobsługiwane

Aby sprawdzić wersję Node.js na komputerze lokalnym, uruchom w oknie wiersza poleceń to polecenie node.
```
node -v
```
Edytor kodu lub IDE. służy do otwierania i edytowania plików.Visual Studio Code lub inny wybrany przez Ciebie edytor kodu.

Instalowanie interfejsu wiersza poleceń Angular

Po skonfigurowaniu wszystkich zależności uruchom następujące polecenie npm, aby zainstalować interfejs wiersza poleceń Angular z poziomu okna wiersza poleceń.

npm install --global @angular/cli

Aby sprawdzić, czy konfiguracja jest prawidłowa, uruchom następujące polecenie Angular z wiersza poleceń.

ng version

Jeśli polecenie Angular zostanie wykonane, powinien wyświetlić się komunikat podobny do tego poniżej.

Dane wyjściowe wersji w języku Angular

Kod źródłowy i obrazy

Tworzysz całą aplikację od podstaw, a ten samouczek krok po kroku Ci w tym pomoże. Pamiętaj, że repozytorium GitHub zawiera ostateczny kod. Jeśli napotkasz problemy, sprawdź kod końcowy i obrazy wyświetlane na stronie galerii.

Pobieranie kodu źródłowego.

Otwórz tę stronę w przeglądarce.

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

W oknie wiersza poleceń wykonaj fork repozytorium i sklonuj je.

W następnym kroku utwórz aplikację Galeria zdjęć.

3. Utwórz nową aplikację

Aby utworzyć początkową aplikację inicjującą, wykonaj te czynności.

Utwórz nowy obszar roboczy za pomocą interfejsu wiersza poleceń Angular. Aby dowiedzieć się więcej o interfejsie wiersza poleceń Angular i ramowcu Angular, odwiedź stronę angular.io.

Utwórz nowy projekt

W oknie wiersza poleceń wykonaj te czynności.

Aby utworzyć nowy projekt Angular o nazwie photo-gallery-app, wpisz to polecenie Angular:
```
ng new photo-gallery-app
```
Przy każdym promptzie zaakceptuj domyślny wybór.Framework Angular zainstaluje wymagane pakiety i zależności. Może to potrwać kilka minut.

Po zakończeniu pracy przez interfejs wiersza poleceń Angular masz nowy obszar roboczy Angular i prostą aplikację gotową do uruchomienia.

Struktura Twojej nowej aplikacji przypomina standardową aplikację Angular. W tym ćwiczeniu z programowania moduł NgModule w nowej aplikacji jest zbędny.

Usuwanie modułu aplikacji

Aby usunąć moduł aplikacji, wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src/app.
Usuń plik app.module.ts.

Po usunięciu modułu aplikacji nie będzie on już dostępny w aplikacji. Aplikacja ma tylko 1 komponent, którym jest komponent aplikacji. Musisz zadeklarować ten komponent jako samodzielny.

Zadeklaruj samodzielny komponent

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src/app w katalogu nowego projektu photo-gallery-app.
Otwórz plik app.component.ts.

Dodaj poniższy parametr i wartość do listy dekoratorów.

standalone: true

Plik app.component.ts powinien być zbliżony do poniższego przykładowego kodu.

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

Zapisz plik app.component.ts.

Kompilowanie nowej samodzielnej aplikacji

W oknie wiersza poleceń wykonaj te czynności.

Otwórz nowy katalog projektu photo-gallery-app.
Aby skompilować nową aplikację, wpisz to polecenie Angular.
```
ng serve
```

Kompilacja aplikacji powinna się nie udać. Nie martw się, musisz tylko poprawić kilka rzeczy.

Korzystanie z interfejsu bootstrapApplication API

Aby umożliwić uruchamianie aplikacji bez NgModule, musisz użyć samodzielnego komponentu jako komponentu głównego za pomocą interfejsu API bootstrapApplication.

Usuń odwołania do modułu aplikacji

W edytorze kodu wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src.
Otwórz plik main.ts.

Usuń ten kod importowania, ponieważ nie masz już modułu aplikacji.

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

Usuń ten kod bootstrapu, ponieważ nie masz już modułu aplikacji.

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

Plik main.ts powinien odpowiadać poniższemu przykładowemu kodowi.

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

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

Dodawanie komponentu bootstrapApplication

W edytorze kodu wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src.
Otwórz plik main.ts.
Zaimportuj komponent bootstrapApplication z usługi @angular/platform-browser.
```
import { bootstrapApplication } from '@angular/platform-browser';
```

Dodaj poniższy kod, aby uruchomić aplikację.

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

Zaimportuj komponent i wymagane biblioteki.

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

Plik main.ts powinien być zgodny z tym przykładowym kodem.

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

Dodawanie routera i modułów wspólnych

Aby korzystać z Routera i innych typowych funkcji modułów, musisz bezpośrednio zaimportować każdy moduł do komponentu.

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src/app w katalogu nowego projektu photo-gallery-app.
Otwórz plik app.component.ts.

Zaimportuj wymagane moduły do komponentu.

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

Dodaj importy w komponencie.

imports: [CommonModule, RouterModule],

Plik app.component.ts powinien być zgodny z tym przykładowym kodem.

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

Zapisz plik app.component.ts.

Kompilowanie i uruchamianie nowej samodzielnej aplikacji

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Wpisz to polecenie Angular, aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW. Przed uruchomieniem aplikacji może być konieczne zamknięcie środowiska IDE, aby usunąć błędy kompilacji.
```
ng serve
```

Serwer programistyczny powinien działać na porcie 4200. Wszystkie poprzednie błędy powinny zniknąć, a kompilacja powinna się udać. Dobra robota! Udało Ci się utworzyć aplikację Angular, która działa bez modułu i z samodzielnym komponentem.

Następnie uatrakcyjnisz aplikację, aby wyświetlała zdjęcia.

4. Wyświetlanie zdjęć

Twoja nowa aplikacja jest galerią zdjęć i powinna wyświetlać pewne zdjęcia.

Komponenty to podstawowe elementy aplikacji Angular. Składniki mają 3 główne aspekty.

Plik HTML szablonu
Plik CSS ze stylami
Plik TypeScript opisujący działanie aplikacji

Przenieś zdjęcia do aplikacji

Obrazy są dostępne w aplikacji pobranej wcześniej z GitHuba.

Przejdź do katalogu src/assets projektu GitHub.
Skopiuj pliki i wklej je do katalogu analogue w katalogu projektu photo-gallery-app.

Tworzenie szablonu HTML

Plik app.component.html to plik szablonu HTML powiązany z komponentem AppComponent.

W edytorze kodu wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src/app.
Otwórz plik app.component.html.
Usuń cały istniejący kod HTML.

Skopiuj i wklej kod HTML z tego przykładu kodu.

<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

Zapisz plik app.component.html.

Tworzenie pliku definicji stylu

W edytorze kodu wykonaj te czynności:

W nowym katalogu projektu photo-gallery-app otwórz katalog src.
Otwórz plik styles.css.

Skopiuj i wklej kod CSS z poniższego przykładu kodu.

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

Zapisz plik styles.css.

Aktualizowanie pliku indeksu

W edytorze kodu wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src.
Otwórz plik index.html.
Dodaj czcionkę Raleway, aby umożliwić dziedziczenie jej przez wszystkie strony.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
Zapisz plik index.html.
Zapisz kod i sprawdź przeglądarkę. Gdy serwer programistyczny jest uruchomiony, zmiany są odzwierciedlane w przeglądarce po zapisaniu.
Następnie utworzysz nowy samodzielny komponent, który umożliwi wysyłanie opinii i prowadzenie czatu z Jimbo. Aby dowiedzieć się więcej o Jimbo, kontynuuj pracę w tym ćwiczeniu.

5. Dodawanie nowego samodzielnego komponentu

Jak już wiesz, samodzielne komponenty upraszczają tworzenie aplikacji w Angular, ponieważ zmniejszają potrzebę korzystania z modułów Ng. W kolejnych sekcjach utworzysz nowy samodzielny komponent, który umożliwia użytkownikowi wysyłanie opinii i rozmowy z wirtualnym asystentem.

Tworzenie nowego samodzielnego komponentu

Aby utworzyć ten nowy komponent, ponownie użyj narzędzia wiersza poleceń Angular.

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.

Aby utworzyć nowy komponent o nazwie feedback-and-chat, wpisz to polecenie Angular:

ng generate component feedback-and-chat --standalone

W poniższej tabeli opisano części polecenia.

Część	Szczegóły
`ng`	definiuje wszystkie polecenia wiersza poleceń Angulara dla frameworka Angular;
`generate component`	Tworzy szkielet nowego komponentu.
`feedback-and-chat`	Nazwa komponentu.
`--standalone`	Informuje środowisko Angular o należytości od samodzielnego komponentu

Importowanie nowego samodzielnego komponentu

Aby użyć nowego samodzielnego komponentu, musisz go najpierw dodać do tablicy imports w pliku app.components.ts.

Jest to niezależny komponent, więc wystarczy go zaimportować jak moduł.

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src/app w katalogu nowego projektu photo-gallery-app.
Otwórz plik app.component.ts.

Zaimportuj nowy samodzielny komponent.

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

Zaktualizuj importy w komponencie.

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

Plik app.component.ts powinien odpowiadać poniższemu przykładowemu kodowi.

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

Zapisz plik app.component.ts.

Leniwe ładowanie komponentu

Przejdź z modelu leniwego ładowania na model leniwego ładowania, w którym kod nie jest wysyłany do klienta, dopóki nie będzie potrzebny. Leniwe ładowanie to świetny sposób na skrócenie czasu wczytywania strony, poprawę wydajności i wygody użytkowników. Router obsługuje leniwe obciążenie, które jest takie samo w przypadku ngModule i samodzielnego komponentu.

Zaktualizuj szablon HTML powiązany z komponentem aplikacji

Aby wczytywać samodzielny komponent z opóźnieniem, dodaj do interfejsu użytkownika przycisk, który aktywuje komponent tylko wtedy, gdy użytkownik go wybierze.

W edytorze kodu wykonaj te czynności:

W nowym katalogu projektu photo-gallery-app otwórz katalog src/app.
Otwórz plik app.component.html.

Przewiń do końca pliku i przed zamknięciem elementu article dodaj podany niżej przykład kodu.

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

Plik app.component.html powinien odpowiadać temu przykładowemu kodowi.

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

Zapisz plik app.component.html.

Konfigurowanie tras

W edytorze kodu wykonaj te czynności.

W nowym katalogu projektu photo-gallery-app otwórz katalog src.
Otwórz plik main.ts.
Zaimportuj metodę provideRouter i Moduł Trasy. W wersji 14.2.0 Angulara wprowadzono nową metodę provideRouter, która umożliwia konfigurowanie zestawu tras dla aplikacji.
```
import { provideRouter, Routes } from '@angular/router';
```

Skopiuj i wklej ten fragment kodu między instrukcjami importu a instrukcją if.

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

Skopiuj i wklej poniższy fragment kodu, a następnie zastąp metodę bootstrapApplication.

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

Plik main.ts powinien odpowiadać poniższemu przykładowemu kodowi.

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

Zapisz plik main.ts.

Kompilowanie i sprawdzanie danych za pomocą Narzędzi deweloperskich w Chrome

Za pomocą Narzędzi deweloperskich w Chrome sprawdź, jak framework Angular wczytuje komponent z opóźnieniem.

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW, wpisz to polecenie Angular.
```
ng serve
```
Serwer programistyczny powinien działać na porcie 4200.

W przeglądarce wykonaj te czynności:

Przejdź na następną stronę.
```
http://localhost:4200
```
Otwórz Narzędzia programistyczne Chrome i kliknij kartę Sieć.
Odśwież stronę, aby wyświetlić kilka plików, ale nie komponent feedback-and-chat.Ekran powinien pasować do tego zrzutu ekranu.
Wybierz przycisk Dowiedz się więcej o tych osobach, aby przejść do samodzielnego komponentu.W logu powinno być widać, że komponent jest wczytywany tylko wtedy, gdy klikniesz pełny router. Przewiń w dół listy, aby sprawdzić, czy komponent został załadowany. Twój ekran powinien wyglądać tak jak w przypadku tego zrzutu ekranu.

6. Dodawanie interfejsu formularza

Formularz przesyłania opinii zawiera 3 pola wprowadzania danych i przycisk u dołu. 3 pola interfejsu użytkownika to imię i nazwisko, adres e-mail nadawcy i komentarze.

Aby obsługiwać interfejs użytkownika, dodaj atrybut formControlName w elemencie input, który łączy się z każdym elementem formularza contactForm powiązanym z każdym z 3 pol interfejsu użytkownika z danymi wejściowymi.

Dodawanie formularza do szablonu HTML

Dodaj do interfejsu formularz, aby umożliwić użytkownikowi przesyłanie opinii.

W edytorze kodu wykonaj te czynności:

Przejdź do pliku feedback-and-chat.component.html.
Usuń istniejący kod HTML.

Skopiuj i wklej kod HTML z poniższego przykładowego kodu.

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

Zapisz plik feedback-and-chat.component.html.

Zaktualizuj plik stylów formularza.

W edytorze kodu wykonaj te czynności:

Przejdź do pliku feedback-and-chat.component.css.

Skopiuj i wklej kod CSS z poniższego przykładu kodu.

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

Zapisz plik feedback-and-chat.component.css.

Kompilowanie aktualizacji interfejsu formularza

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW, wpisz to polecenie Angular.
```
ng serve
```
Kompilacja aplikacji powinna się nie udać. Nie martw się, musisz tylko zbindować formularz.
Na razie sprawdź te elementy.
- Użyj wiązania właściwości formGroup, aby powiązać contactForm z elementem form i wiązaniem zdarzenia ngSubmit.
- Dyrektywa FormGroup nasłuchuje zdarzenia przesyłania wywoływanego przez element form. Następnie dyrektywa FormGroup emituje zdarzenie ngSubmit, które możesz powiązać z funkcją wywołania zwrotnego onSubmit.
- W następnym kroku zaimplementujesz funkcję wywołania zwrotnego onSubmit w pliku feedback-and-chat.component.ts.
Następnie zbindujesz formularz.

7. Dodawanie obsługi zdarzeń do formularza

Interfejs formularza przesyłania opinii jest gotowy, ale brakuje interakcji. Obsługa danych wprowadzanych przez użytkownika za pomocą formularzy jest podstawą wielu popularnych aplikacji.

W rzeczywistych warunkach musisz zaimplementować logikę biznesową, aby wykonać te czynności.

Przeanalizuj dane wejściowe użytkownika z wyrenderowanej struktury DOM powiązanej z komponentem.
Sprawdzanie danych wprowadzanych przez użytkownika, w tym mechanizmu Captcha lub podobnego, aby uniknąć spamu generowanego przez boty.
Wyślij e-maila na wskazany adres.
Wyświetl użytkownikowi przyjazną wiadomość.

W tym ćwiczeniu z programowania będziesz wykonywać tylko te czynności.

Przeanalizuj dane wejściowe użytkownika z wyrenderowanej struktury DOM powiązanej z komponentem.
Wyświetl przyjazny komunikat dla użytkownika.

Spróbuj wdrożyć wszystkie 4 działania.

Dodaj do komponentu model formularza wysyłania wiadomości

Utwórz i dodaj model formularza przesyłania opinii w klasie komponentu. Model formularza określa jego stan. Usługa FormBuilder udostępnia wygodne metody tworzenia elementów sterujących interfejsu użytkownika.

W edytorze kodu wykonaj te czynności:

Przejdź do pliku feedback-and-chat.component.ts.
Zaimportuj usługę FormBuilder i moduł ReactiveModule z pakietu @angular/forms. Ta usługa udostępnia wygodne metody generowania elementów sterujących. W następnym kroku użyjemy funkcji inject, więc musimy ją też zaimportować z @angular/core.
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

Zaimportuj moduł ReactiveFormsModule.

imports: [CommonModule,ReactiveFormsModule],

Usuń ten konstruktor.
```
constructor() { }
```
Wstrzyknij usługę FormBuilder za pomocą funkcji inject tuż pod sygnaturą klasy.
```
private formBuilder = inject(FormBuilder);
```
Użyj metody group z usługi FormBuilder, aby utworzyć model formularza, który umożliwi zbieranie od użytkownika imienia i nazwiska, adresu e-mail oraz komentarzy.
Utwórz nową właściwość contactForm i za pomocą metody group ustaw ją jako model formularza.Model formularza zawiera pola name, email i comments.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Zdefiniuj metodę onSubmit do obsługi formularza.W rzeczywistości metoda onSubmit pozwala użytkownikowi przesłać opinię do fotografa za pomocą e-maila, który jest wysyłany na wyznaczony adres e-mail.W ramach tego ćwiczenia w programowaniu pokazujesz dane wejściowe użytkownika, używasz metody reset, aby zresetować formularz, i wyświetlało się przystępny komunikat o powodzeniu.

Dodaj nową metodę onSubmit i po jej zainicjowaniu ustaw zmienną showMsg na true.

showMsg: boolean = false;

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

Plik feedback-and-chat.component.ts powinien odpowiadać poniższemu przykładowemu kodowi.

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

Zapisz plik feedback-and-chat.component.ts.

Kompilowanie i wyświetlanie modelu formularza przesyłania opinii

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW, wpisz to polecenie Angular.
```
ng serve
```
Serwer programistyczny powinien działać na porcie 4200.

W przeglądarce wykonaj te czynności:

Przejdź na następną stronę.
```
http://localhost:4200
```
Otwórz Narzędzia dla programistów w Chrome i kliknij kartę Konsola.
Wpisz dowolne wartości w polach tekstowych Pełna nazwa, Adres e-mail i Komentarze.
Kliknij przycisk Prześlij.Na stronie powinien wyświetlić się komunikat o udanej operacji.
Sprawdź, czy wartości są wyświetlane na karcie Konsola.Ekran powinien pasować do tego zrzutu ekranu.Udało Ci się wdrożyć kod pozwalający dodać formularz wysyłania wiadomości do interfejsu komponentu i przeanalizować dane wejściowe użytkownika.
Następnie umieszczasz okno czatu, aby umożliwić użytkownikom aplikacji rozmowę z Jimbo. Jimbo to koala, który opowie Ci ciekawe fakty o środowisku naturalnym.

8. Dodawanie okna czatu

Wykorzystaj doświadczenie w obsłudze interfejsów konwersacyjnych, takich jak Dialogflow CX lub podobne platformy. Agent Dialogflow CX to agent wirtualny, który obsługuje równoległe rozmowy z ludźmi. Jest to moduł przetwarzania języka naturalnego, który rozpoznaje niuanse języka ludzkiego i przekształca tekst lub dźwięk użytkownika podczas rozmowy w dane ustrukturyzowane, które są zrozumiałe dla aplikacji i usług.

Utworzyliśmy dla Ciebie przykładowego wirtualnego agenta, którego możesz już używać. W tym module do samodzielnego komponentu musisz dodać okno czatu, aby umożliwić użytkownikom aplikacji interakcję z botem. Aby spełnić to wymaganie, użyj Dialogflow Messenger, czyli gotowej integracji, która udostępnia dostosowywalne okno dialogowe. Po otwarciu okno czatu pojawi się w prawym dolnym rogu ekranu i uruchomi domyślny komunikat powitalny pracownika obsługi klienta. Bot wita użytkownika i rozpoczyna rozmowę.

W ramach tej implementacji użytkownik dowiaduje się ciekawych faktów o środowisku naturalnym. Inne implementacje wirtualnych agentów mogą obsługiwać złożone przypadki użycia przez klientów (np. agenta w centrum obsługi klienta). Wiele firm używa agenta wirtualnego jako głównego kanału komunikacji z witryną firmy.

Dodawanie do komponentu bota Dialogflow Messenger

Podobnie jak w przypadku formularza, okno czatu powinno wyświetlać się tylko wtedy, gdy wczytany jest samodzielny komponent.

W edytorze kodu wykonaj te czynności:

Przejdź do pliku feedback-and-chat.component.ts.

Skopiuj element df-messenger z tego przykładu kodu i wklej go w dowolnym miejscu na stronie.

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

Gdy wybierzesz integrację Dialogflow z Messengerem, Dialogflow wygeneruje atrybuty elementu df-messenger.

Atrybut	Szczegóły
agent-id	Wstępnie wypełnione. Określa unikalny identyfikator agenta Dialogflow.
tytuł-czatu	Wstępnie wypełnione. Określa treść, która ma być wyświetlana u góry okna czatu. Początkowo w tym polu znajduje się nazwa Twojego agenta, ale musisz ją dostosować.
df-cx	Wskazuje, że interakcja dotyczy pracownika obsługi klienta. Ustaw wartość na `true`.
intencja	Określa niestandardowe zdarzenie używane do wywołania pierwszego zamiaru po otwarciu okna czatu.
language-code	Określa domyślny kod języka dla pierwszego zamiaru.
lokalizacja	Określa region, w którym wdrożono agenta.

Zapisz plik feedback-and-chat.component.ts.

Wyświetlanie modelu formularza przesyłania opinii

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Wpisz to polecenie Angular, aby skompilować aplikację.
```
ng serve
```
Kompilacja aplikacji powinna się nie udać. W wierszu poleceń powinien wyświetlić się ten komunikat o błędzie.
Następnie dodaj schemat niestandardowy.

Dodaj schemat niestandardowy do niezależnego komponentu

Element df-messanger nie jest znanym elementem. Jest to niestandardowy komponent internetowy. Komunikat o błędzie z ramy Angular sugeruje, że musisz dodać parametr CUSTOM_ELEMENTS_SCHEMA do obu samodzielnych komponentów, aby go stłumić.

W edytorze kodu wykonaj te czynności.

Przejdź do pliku feedback-and-chat.component.ts.

Zaimportuj schemat CUSTOM_ELEMENTS_SCHEMA.

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

Dodaj CUSTOM_ELEMENTS_SCHEMA do listy schematów.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Plik feedback-and-chat.component.ts powinien odpowiadać poniższemu przykładowemu kodowi.

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

...

Komponent internetowy df-messanger wymaga kodu JavaScript, który należy wstrzyknąć tylko wtedy, gdy wczytywane są elementy opinii i czatu. W tym celu dodamy odpowiedni kod do metody ngOnInit(), która wczyta skrypt czatu potrzebny do aktywacji elementu .

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

Zapisz plik feedback-and-chat.component.ts.

Kompilowanie i wyświetlanie zaktualizowanego okna czatu

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW, wpisz to polecenie Angular.
```
ng serve
```
Serwer programistyczny powinien działać na porcie 4200.

W przeglądarce wykonaj te czynności:

Przejdź do tej strony.
```
http://localhost:4200
```
U dołu strony powinna pojawić się ikona czatu.
Kliknij ikonę i wejdź w interakcję z Jimbo.Jimbo przedstawia ciekawe fakty o zwierzętach.
Aplikacja jest w pełni funkcjonalna.

9. Wdrażanie aplikacji w Google App Engine

Aplikacja działa lokalnie na Twoim komputerze. W ostatnim kroku tego ćwiczenia z kodą należy wdrożyć aplikację w Google App Engine.

Więcej informacji o Google App Engine znajdziesz w artykule App Engine.

Konfigurowanie środowiska Google App Engine

Jeśli spełniasz już wszystkie te warunki, pomiń kolejne kroki i przystąp do wdrażania aplikacji.

Utworzono projekt Cloud z App Engine
Włącz interfejs Cloud Build API.
Zainstaluj interfejs wiersza poleceń Google Cloud.

Wykonaj te czynności.

Zaloguj się na konto Gmail lub Google Workspace. Jeśli nie masz konta Google, tutaj możesz je utworzyć.
Włącz rozliczenia w Cloud Console, aby móc korzystać z zasobów i interfejsów API Cloud. Więcej informacji znajdziesz w artykule Tworzenie, modyfikowanie i zamykanie samoobsługowego konta rozliczeniowego Cloud.
Utwórz projekt Google Cloud, w którym będą przechowywane zasoby aplikacji App Engine i inne zasoby Google Cloud. Więcej informacji znajdziesz w artykule Tworzenie projektów i zarządzanie nimi.
włączyć interfejs Cloud Build API w konsoli Cloud, Więcej informacji znajdziesz w artykule Włączanie dostępu przez interfejs API.
Zainstaluj Google Cloud CLI i narzędzie wiersza poleceń gcloud. Więcej informacji znajdziesz w artykule Instalowanie interfejsu wiersza poleceń gcloud.
Inicjuj Google Cloud CLI i upewnij się, że gcloud jest skonfigurowany do korzystania z projektu Google Cloud, do którego chcesz wdrożyć aplikację. Więcej informacji znajdziesz w artykule Inicjowanie interfejsu wiersza poleceń gcloud.

Tworzenie samodzielnej aplikacji

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować i utworzyć wersję aplikacji gotową do wdrożenia, wpisz to polecenie Angular:
```
ng build
```

Wersja produkcyjna aplikacji jest tworzona w podkatalogu dist w katalogu projektu photo-gallery-app.

10. Wdrażanie aplikacji za pomocą frameworka Express.js

Przykładowy kod w tym samouczku korzysta z biblioteki Express.js do obsługi żądań HTTP. Możesz użyć ulubionej platformy internetowej.

Instalowanie platformy Express.js

W oknie wiersza poleceń wykonaj to działanie.

Aby zainstalować platformę Express.js, wpisz to polecenie.
```
npm install express --save
```

Konfigurowanie serwera WWW

W edytorze kodu wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Utwórz nowy plik server.js.

Skopiuj i wklej ten kod.

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

Zapisz plik server.js.

Podłącz serwer WWW

W edytorze kodu wykonaj te czynności:

Przejdź do nowego katalogu projektu photo-gallery-app.
Otwórz plik package.json.

Zmodyfikuj polecenie start, aby uruchomić węzeł w pliku server.js.

"name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Atrybut start to punkt wejścia aplikacji.

Zapisz plik package.json.

Konfigurowanie App Engine

W edytorze kodu wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Utwórz nowy plik app.yaml.
Skopiuj i wklej ten kod.
```
runtime: nodejs16
service: default
```
Informacje w pliku app.yaml określają konfigurację App Engine. Wystarczy podać środowisko uruchomieniowe i usługę.
Zapisz plik app.yaml.

Aktualizowanie listy ignorowanych fragmentów kodu gcloud

Aby mieć pewność, że katalog node_modules nie zostanie przesłany, utwórz plik .gcloudignore. Pliki wymienione w pliku .gcloudignore nie są przesyłane.

W edytorze kodu wykonaj te czynności:

Przejdź do nowego katalogu projektu photo-gallery-app.
Utwórz nowy plik .gcloudignore.

Skopiuj i wklej ten kod.

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

Zapisz plik .gcloudignore.

Inicjowanie aplikacji

Zanim wdrożysz aplikację, zainicjuj ją w projekcie i wybierz powiązany region.

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby zainicjować aplikację, wpisz to polecenie.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
W wyświetlonym komunikacie wybierz region, w którym chcesz znaleźć aplikację App Engine.

Wdróż aplikację

W oknie wiersza poleceń wykonaj te czynności.

Przejdź do nowego katalogu projektu photo-gallery-app.

Wpisz to polecenie, aby wdrożyć aplikację.

gcloud app deploy --project=[YOUR_PROJECT_ID]

Po wyświetleniu odpowiedniego prompta potwierdź działanie.Po zakończeniu wdrażania polecenia gcloud wyświetli adres URL umożliwiający dostęp do aplikacji.
Aby otworzyć nową kartę w przeglądarce, wpisz to polecenie.
```
gcloud app browse
```

11. Gratulacje

Gratulacje. Udało Ci się utworzyć przykładową galerię zdjęć za pomocą Angulara w wersji 14 i wdrożyć ją w usłudze App Engine.

Eksperymentujesz z funkcją samodzielnego komponentu i leniwym ładowaniem. Udało Ci się stworzyć funkcję wysyłania wiadomości opartą na formularzu, która służy do przekazywania opinii i komentarzy. Udało Ci się też dodać okno czatu z wirtualnym agentem Dialogflow CX za pomocą Dialogflow Messenger. Dobra robota!

Dalsze kroki

Po wypełnieniu podstawowego formularza możesz go ulepszyć, korzystając z podanych niżej wskazówek.

Formularz nie wysyła opinii. Zmień go, aby dodać logikę biznesową, która umożliwi wysyłanie e-maili.
W rzeczywistych warunkach należy zweryfikować dane wprowadzane przez użytkownika i umieścić reCAPTCHA lub podobny mechanizm, aby zapobiec spamowaniu przez boty.
Tworzenie nowego agenta i poznawanie sposobów projektowania ścieżek konwersacyjnych w Dialogflow CX

Kontynuuj eksperymentowanie z platformą Angular i baw się dobrze.

Czyszczenie i usuwanie projektu Cloud

Możesz zachować projekt Cloud lub usunąć go, aby zatrzymać naliczanie opłat za wszystkie zasoby używane w projekcie.

W przeglądarce wykonaj te czynności:

Zaloguj się na konto Gmail lub Google Workspace.
W konsoli Google Cloud kliknij przycisk Administracja.
Na stronie Administracja kliknij kartę Zarządzaj zasobami.
Na stronie Zarządzanie zasobami przejdź do projektu, który chcesz usunąć, i wybierz go. Naciśnij przycisk Usuń, aby otworzyć okno dialogowe.
W oknie wpisz identyfikator projektu. Kliknij przycisk Wyłącz, aby usunąć projekt.

Wersja węzła	Obsługiwane przez Angular
14.15 lub nowsze	Obsługiwane
16.10 lub nowsze	Obsługiwane
18.1.0	Nieobsługiwane