Pierwsze kroki z samodzielnymi komponentami

1. Wprowadzenie

Co utworzysz

W tym ćwiczeniu utworzysz aplikację galerii zdjęć dzikich zwierząt za pomocą Angulara w wersji 14. W wypełnionym formularzu zobaczysz zestaw zdjęć, a także formularz wyślij wiadomość, który umożliwia kontakt z fotografem, oraz okno czatu, w którym możesz poznać ciekawe fakty o zwierzętach przedstawionych na zdjęciach.

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

Wszystkie odniesienia do platformy Angular i interfejsu Angular CLI dotyczą wersji 14. Samodzielne komponenty to funkcja w wersji zapoznawczej w Angularze 14, więc musisz utworzyć zupełnie nową aplikację, korzystając z Angulara 14. Samodzielne komponenty to uproszczony sposób tworzenia aplikacji Angular. Samodzielne komponenty, samodzielne dyrektywy i samodzielne potoki mają na celu uproszczenie procesu tworzenia przez ograniczenie potrzeby stosowania NgModules. Samodzielne komponenty mogą w pełni korzystać z istniejącego ekosystemu bibliotek Angulara.

To aplikacja, którą dziś tworzysz.

Wypełniony wniosek

Czego się nauczysz

Jak używać interfejsu wiersza poleceń Angular do tworzenia szkieletu nowego projektu
Jak używać samodzielnych komponentów Angulara do usprawniania tworzenia aplikacji Angulara
Jak utworzyć komponent autonomiczny, czyli jak zbudować interfejs i dodać logikę biznesową
Jak uruchomić aplikację za pomocą samodzielnego komponentu
Jak leniwie wczytać samodzielny komponent
Jak osadzić okno czatu w samodzielnym komponencie za pomocą Dialogflow Messenger
Wdrażanie aplikacji Angular w Google Cloud App Engine za pomocą Google Cloud CLI (gcloud)

Co będzie potrzebne

konto Gmail lub Google Workspace,
Podstawowa wiedza z tych dziedzin:
- HTML. Jak utworzyć element.
- CSS i less. Jak używać selektora CSS i tworzyć plik definicji stylu.
- TypeScript lub JavaScript. Jak wchodzić w interakcję ze strukturą DOM.
- git i GitHub. Jak utworzyć rozwidlenie i sklonować repozytorium.
- Interfejs wiersza poleceń, np. bash lub zsh. Jak poruszać się po katalogach i uruchamiać polecenia.

2. Konfigurowanie środowiska

Konfigurowanie środowiska lokalnego

Aby ukończyć to ćwiczenie, musisz zainstalować na komputerze lokalnym to oprogramowanie:

Aktywna wersja LTS lub wersja LTS w trybie konserwacji Node.js. Służy do instalowania platformy Angular i interfejsu wiersza poleceń Angular.

Wersja węzła

Obsługiwane przez Angular

14.15 lub nowsza

Obsługiwane

16.10 lub nowsza

Obsługiwane

18.1.0

Nieobsługiwane

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

Instalowanie interfejsu wiersza poleceń Angular

Po skonfigurowaniu wszystkich zależności uruchom to polecenie npm, aby zainstalować interfejs wiersza poleceń Angular w oknie wiersza poleceń.

npm install --global @angular/cli

Aby sprawdzić, czy konfiguracja jest prawidłowa, uruchom to polecenie Angulara z wiersza poleceń.

ng version

Jeśli polecenie Angulara zostanie wykonane prawidłowo, powinien pojawić się komunikat podobny do tego na zrzucie ekranu.

Dane wyjściowe terminala z wersją Angulara

Kod źródłowy i obrazy

Całą aplikację tworzysz od podstaw, a ten szczegółowy przewodnik po ćwiczeniach z programowania Ci w tym pomoże. Pamiętaj, że repozytorium GitHub zawiera ostateczny kod. Jeśli utkniesz, sprawdź końcowy kod i obrazy wyświetlane na stronie galerii.

Aby pobrać kod źródłowy.

W przeglądarce otwórz tę stronę.

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

W oknie wiersza poleceń utwórz kopię repozytorium i sklonuj ją.

W następnym kroku skompiluj aplikację Galeria zdjęć.

3. Utwórz nową aplikację

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

Aby utworzyć nowy obszar roboczy, użyj interfejsu wiersza poleceń Angular. Więcej informacji o interfejsie wiersza poleceń Angular i platformie Angular znajdziesz na stronie angular.io.

Utwórz nowy projekt

W oknie wiersza poleceń wykonaj te czynności:

Wpisz to polecenie Angulara, aby utworzyć nowy projekt Angulara o nazwie photo-gallery-app.
```
ng new photo-gallery-app
```
Przy każdym wyświetlanym prompcie zaakceptuj domyślny wybór.Framework Angular zainstaluje wymagane pakiety i zależności. Ten proces może potrwać kilka minut.

Po zakończeniu działania interfejsu Angular CLI będziesz mieć nowy obszar roboczy Angulara i prostą aplikację gotową do uruchomienia.

Nowa aplikacja ma strukturę standardowej aplikacji Angular. W tym ćwiczeniu z programowania moduł NgModule w nowej aplikacji jest zbędny.

Usuwanie modułu aplikacji

Aby usunąć moduł aplikacji, wykonaj to działanie.

Przejdź do katalogu src/app w nowym katalogu projektu photo-gallery-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óry jest komponentem aplikacji. Musisz zadeklarować go jako samodzielny.

Deklarowanie samodzielnego komponentu

W edytorze kodu wykonaj te czynności:

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

Dodaj do listy dekoratorów ten parametr i jego wartość.

standalone: true

Plik app.component.ts powinien być bardzo podobny do tego przykładu 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:

Przejdź do nowego katalogu projektu photo-gallery-app.
Aby skompilować nową aplikację, wpisz to polecenie Angulara.
```
ng serve
```

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

Korzystanie z interfejsu bootstrapApplication API

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

Usuń odniesienia do modułu aplikacji

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src w nowym katalogu projektu photo-gallery-app.
Otwórz plik main.ts.

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

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

Usuń ten kod początkowy, ponieważ nie masz już modułu aplikacji.

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

Plik main.ts powinien być zgodny z tym przykładem kodu.

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

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

Dodawanie komponentu bootstrapApplication

W edytorze kodu wykonaj te czynności:

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

Dodaj ten 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ładem kodu.

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 funkcji modułu wspólnego, musisz bezpośrednio zaimportować każdy moduł do komponentu.

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src/app w nowym katalogu 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ładem kodu.

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 Angulara, aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW. Aby usunąć błędy kompilacji, przed uruchomieniem aplikacji może być konieczne zamknięcie środowiska IDE.
```
ng serve
```

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

Następnie upiększysz aplikację, aby wyświetlać zdjęcia.

4. Wyświetlanie zdjęć

Nowa aplikacja ma być galerią zdjęć i powinna wyświetlać kilka zdjęć.

Komponenty to podstawowe elementy składowe aplikacji Angular. Komponenty mają 3 główne aspekty.

plik HTML szablonu,
plik CSS ze stylami,
plik TypeScript z informacjami o działaniu aplikacji;

Przenieś zdjęcia do aplikacji.

Zdjęcia są dostępne w aplikacji, którą wcześniej pobrano z GitHub.

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:

Przejdź do katalogu src/app w nowym katalogu projektu photo-gallery-app.
Otwórz plik app.component.html.
Usuń cały istniejący kod HTML.

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

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

Przejdź do katalogu src w nowym katalogu projektu photo-gallery-app.
Otwórz plik styles.css.

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

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:

Przejdź do katalogu src w nowym katalogu projektu photo-gallery-app.
Otwórz plik index.html.

Dodaj czcionkę Raleway, aby wszystkie strony mogły ją dziedziczyć.

<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 do wysyłania opinii i rozmawiania z Jimbo. Aby dowiedzieć się więcej o Jimbo, przejdź do dalszej części tego ćwiczenia.

5. Dodawanie nowego komponentu autonomicznego

Jak już wiesz, samodzielne komponenty upraszczają tworzenie aplikacji w Angularze, ponieważ zmniejszają potrzebę używania modułów NgModule. W kolejnych sekcjach utworzysz nowy samodzielny komponent, który umożliwi użytkownikowi wysyłanie opinii i rozmawianie z agentem wirtualnym.

Tworzenie nowego komponentu autonomicznego

Aby utworzyć ten nowy komponent, ponownie użyj Angular CLI.

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

ng generate component feedback-and-chat --standalone

W tabeli poniżej znajdziesz opis poszczególnych części polecenia.

Część	Szczegóły
`ng`	Definiuje wszystkie polecenia interfejsu wiersza poleceń Angular dla platformy Angular.
`generate component`	Tworzy szkielet nowego komponentu
`feedback-and-chat`	Nazwa komponentu
`--standalone`	Informuje platformę Angular, że ma utworzyć samodzielny komponent.

Importowanie nowego samodzielnego komponentu

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

Jest to samodzielny komponent, więc wystarczy go zaimportować tak jak moduł.

W edytorze kodu wykonaj te czynności:

Przejdź do katalogu src/app w nowym katalogu 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 być zgodny z tym przykładem kodu.

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 wczytywania z wyprzedzeniem na model leniwego ładowania, w którym kod nie jest wysyłany do klienta, dopóki nie jest potrzebny. Leniwe ładowanie to świetny sposób na skrócenie czasu wczytywania strony, poprawę wydajności i zwiększenie wygody użytkowników. Router obsługuje leniwe wczytywanie, które jest takie samo w przypadku elementu ngModule i komponentu autonomicznego.

Aktualizowanie szablonu HTML powiązanego z komponentem aplikacji

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

W edytorze kodu wykonaj te czynności:

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

Przewiń plik do końca i przed zamknięciem elementu article dodaj ten 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 być zgodny z tym przykładem 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> 
    <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:

Przejdź do katalogu src w nowym katalogu projektu photo-gallery-app.
Otwórz plik main.ts.
Zaimportuj metodę provideRouter i moduł Routes. W Angularze w wersji 14.2.0 wprowadzono nową metodę provideRouter, która umożliwia skonfigurowanie zestawu tras dla aplikacji.
```
import { provideRouter, Routes } from '@angular/router';
```

Skopiuj ten fragment kodu i wklej go między importami a instrukcją if.

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

Skopiuj ten fragment kodu i wklej go, zastępując metodę bootstrapApplication.

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

Plik main.ts powinien być zgodny z tym przykładem kodu.

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 za pomocą Narzędzi deweloperskich w Chrome

Użyj Narzędzi deweloperskich w Chrome, aby sprawdzić, jak framework Angular leniwie wczytuje komponent.

W oknie wiersza poleceń wykonaj te czynności:

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

W przeglądarce wykonaj te czynności:

Przejdź do następnej strony.
```
http://localhost:4200
```
Otwórz Narzędzia deweloperskie w Chrome i kliknij kartę Sieć.
Odśwież stronę, aby wyświetlić kilka plików, ale nie komponent feedback-and-chat.Zawartość ekranu powinna być taka jak na tym zrzucie ekranu.
Kliknij przycisk Dowiedz się więcej o tych osobach, aby przejść do samodzielnego komponentu.Dziennik powinien wskazywać, że komponent jest wczytywany tylko wtedy, gdy używasz pełnego routera. Przewiń listę do końca, aby sprawdzić, czy komponent został załadowany. Ekran powinien wyglądać jak na zrzucie poniżej.

6. Dodawanie interfejsu formularza

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

Aby obsługiwać interfejs, dodaj atrybut formControlName w elemencie input, który wiąże się z każdym elementem sterującym formularza contactForm powiązanym z każdym z 3 pól interfejsu.

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ń dotychczasowy kod HTML.

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

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

Aktualizowanie pliku 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.

/*   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.

Skompiluj aktualizację interfejsu formularza.

W oknie wiersza poleceń wykonaj te czynności:

Przejdź do nowego katalogu projektu photo-gallery-app.
Wpisz to polecenie Angulara, aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW.
```
ng serve
```
Kompilacja aplikacji powinna się nie powieść. Nie martw się, musisz powiązać formularz.
Na razie zapoznaj się z tymi informacjami.
- Używasz wiązania właściwości formGroup, aby powiązać contactForm z elementem form, oraz wiązania zdarzenia ngSubmit.
- Dyrektywa FormGroup nasłuchuje zdarzenia submit emitowanego przez element form. Następnie dyrektywa FormGroup emituje zdarzenie ngSubmit, które możesz powiązać z funkcją wywołania zwrotnego onSubmit.
- W dalszej części tego przewodnika zaimplementujesz funkcję wywołania zwrotnego onSubmit w pliku feedback-and-chat.component.ts.
Następnie powiążesz formularz.

7. Dodawanie obsługi zdarzeń do formularza

Interfejs formularza przesyłania opinii jest kompletny, ale brakuje w nim interakcji. Obsługa danych wejściowych użytkownika za pomocą formularzy jest podstawą wielu popularnych aplikacji.

W rzeczywistym scenariuszu musisz zaimplementować logikę biznesową, aby wykonać te działania.

Przeanalizuj dane wejściowe użytkownika z wyrenderowanej struktury DOM powiązanej z komponentem.
Sprawdzaj dane wejściowe użytkownika, w tym mechanizm Captcha lub podobny, aby uniknąć spamu z botów.
wysłać e-maila na wyznaczony adres e-mail;
Wyświetl użytkownikowi przyjazny komunikat.

W tym module zaimplementujesz tylko te działania.

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

Sprawdź swoje umiejętności i wykonaj wszystkie 4 działania.

Dodawanie do komponentu modelu formularza wysyłania wiadomości

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

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 będzie zbierać imię i nazwisko, adres e-mail i komentarze użytkownika.
Utwórz nową właściwość contactForm i użyj metody group, aby ustawić ją na 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 rzeczywistym scenariuszu metoda onSubmit umożliwia użytkownikowi przesłanie fotografowi opinii w wiadomości e-mail wysłanej na wyznaczony adres.W tym laboratorium wyświetlasz dane wejściowe użytkownika, używasz metody reset do zresetowania formularza i wyświetlasz przyjazny dla użytkownika komunikat o sukcesie.

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

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 być zgodny z tym przykładem kodu.

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.
Wpisz to polecenie Angulara, aby skompilować i uruchomić aplikację oraz otworzyć serwer WWW.
```
ng serve
```
Serwer programistyczny powinien działać na porcie 4200.

W przeglądarce wykonaj te czynności:

Przejdź do następnej strony.
```
http://localhost:4200
```
Otwórz Narzędzia dla programistów w Chrome i wybierz kartę Konsola.
Wpisz dowolne wartości w polach tekstowych Imię i nazwisko, Adres e-mail i Komentarze.
Kliknij przycisk Prześlij.Na stronie powinien wyświetlić się komunikat o udanej aktualizacji.
Sprawdź, czy wartości wyświetlają się na karcie Konsola. Twój ekran powinien wyglądać jak na tym zrzucie ekranu.Kod został wdrożony prawidłowo. Do interfejsu komponentu dodano formularz wyślij wiadomość, a dane wprowadzane przez użytkownika są analizowane.
Następnie umieść okno czatu, aby umożliwić odwiedzającym aplikację rozmowę z Jimbo. Jimbo to koala, od którego dowiesz się ciekawych rzeczy o dzikich zwierzętach.

8. Dodawanie okna czatu

Wykorzystaj doświadczenie w zakresie interfejsów konwersacyjnych, takich jak Dialogflow CX lub podobne platformy. Agent Dialogflow CX to agent wirtualny, który obsługuje równoczesne rozmowy z ludźmi. Jest to moduł rozumienia języka naturalnego, który rozpoznaje niuanse języka ludzkiego i tłumaczy tekst lub dźwięk użytkownika podczas rozmowy na dane strukturalne, które mogą być zrozumiałe dla aplikacji i usług.

Utworzyliśmy dla Ciebie przykładowego agenta wirtualnego, którego możesz od razu użyć. W tym module musisz dodać do komponentu samodzielnego okno czatu, aby użytkownicy aplikacji mogli wchodzić w interakcje z botem. Aby spełnić to wymaganie, skorzystasz z Dialogflow Messenger, czyli gotowej integracji, która zapewnia okno dialogowe z możliwością dostosowania. Po otwarciu okno czatu pojawi się w prawym dolnym rogu ekranu i wywoła domyślny zamiar powitalny agenta. Bot wita użytkownika i rozpoczyna rozmowę.

Poniższa implementacja udostępnia użytkownikowi ciekawe informacje o dzikich zwierzętach. Inne wdrożenia wirtualnych agentów mogą dotyczyć złożonych przypadków 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 komunikatora Dialogflow do komponentu

Podobnie jak formularz, okno czatu powinno być wyświetlane tylko wtedy, gdy załadowany jest samodzielny komponent.

W edytorze kodu wykonaj te czynności:

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

Skopiuj element df-messenger z poniższego 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>

Dialogflow generuje atrybuty elementu df-messenger, gdy wybierzesz integrację Dialogflow Messenger.

Atrybut	Szczegóły
agent-id	Wstępnie wypełnione. Określa unikalny identyfikator agenta Dialogflow.
chat-title	Wstępnie wypełnione. Określa treść, która ma być wyświetlana u góry okna czatu. Początkowo jest wypełniona nazwą agenta, ale możesz ją dostosować.
df-cx	Wskazuje, że interakcja odbywa się z agentem CX. Ustaw wartość na `true`.
intencja	Określa niestandardowe zdarzenie używane do wywoływania 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 wdrażasz agenta.

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

Wyświetlanie formularza przesyłania opinii

W oknie wiersza poleceń wykonaj te czynności:

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

Dodawanie schematu niestandardowego do samodzielnego komponentu

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

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 być zgodny z tym przykładem kodu.

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-messenger wymaga kodu JavaScript, który powinien być wstrzykiwany tylko wtedy, gdy wczytany jest komponent opinii i czatu. W tym celu dodamy odpowiedni kod do metody ngOnInit(), która wczyta skrypt czatu potrzebny do aktywowania 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.

kompilować i wyświetlać zaktualizowane okno czatu,

W oknie wiersza poleceń wykonaj te czynności:

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

W przeglądarce wykonaj te czynności:

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

9. Wdrażanie aplikacji w Google App Engine

Aplikacja jest uruchamiana lokalnie na Twoim komputerze. Ostatnim krokiem tego ćwiczenia jest wdrożenie aplikacji w Google App Engine.

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

Konfigurowanie środowiska pod kątem Google App Engine

Jeśli spełniasz już wszystkie te warunki, pomiń kolejne kroki i wdroż aplikację.

Utworzono projekt w chmurze z App Engine
włączono Cloud Build API;
Zainstalowano Google Cloud CLI

Wykonaj te czynności.

Zaloguj się na swoje konto Gmail lub Google Workspace. Jeśli nie masz konta Google, możesz je utworzyć tutaj.
Włącz płatności w konsoli Cloud, 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łącz interfejs Cloud Build API w Cloud Console. Więcej informacji znajdziesz w artykule Włączanie dostępu do interfejsu API.
Zainstaluj Google Cloud CLI i narzędzie wiersza poleceń gcloud. Więcej informacji znajdziesz w artykule Instalowanie gcloud CLI.
Zainicjuj Google Cloud CLI i upewnij się, że gcloud jest skonfigurowany do korzystania z projektu w chmurze Google, w którym chcesz wdrożyć aplikację. Więcej informacji znajdziesz w artykule Inicjowanie gcloud CLI.

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 w środowisku produkcyjnym, wpisz to polecenie Angulara.
```
ng build
```

Wersja aplikacji gotowa do wdrożenia zostanie utworzona w podkatalogu dist katalogu projektu photo-gallery-app.

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

Przykładowy kod w tym laboratorium korzysta z architektury Express.js do obsługi żądań HTTP. Możesz użyć preferowanej 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 poniższy 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łączanie serwera WWW

W edytorze kodu wykonaj te czynności:

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

Zmodyfikuj polecenie uruchamiania, 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 do 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 poniższy kod.
```
runtime: nodejs16
service: default
```
Informacje w pliku app.yaml określają konfigurację App Engine. Wystarczy określić środowisko wykonawcze i usługę.
Zapisz plik app.yaml.

Aktualizowanie listy ignorowanych fragmentów kodu w 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 poniższy 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

Przed wdrożeniem aplikacji zainicjuj ją przy użyciu projektu 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 odpowiedzi na wyświetlony monit wybierz region, w którym chcesz umieścić aplikację App Engine.

Wdróż aplikację

W oknie wiersza poleceń wykonaj te czynności:

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

Aby wdrożyć aplikację, wpisz to polecenie.

gcloud app deploy --project=[YOUR_PROJECT_ID]

W odpowiedzi na monit potwierdź działanie.Po pomyślnym wykonaniu polecenia wdrażania gcloud wyświetli się adres URL, pod którym można uzyskać 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 App Engine.

Wypróbowano funkcję samodzielnego komponentu i leniwe ładowanie. Utworzono funkcję wysyłania wiadomości w formularzu, aby umożliwić przekazywanie opinii i komentarzy. Udało Ci się też dodać okno czatu z agentem wirtualnym Dialogflow CX za pomocą Dialogflow Messenger. Dobra robota.

Dalsze kroki

Po ukończeniu podstawowej aplikacji możesz ją ulepszyć, korzystając z tych pomysłów.

Formularz nie wysyła opinii. Zrefaktoryzuj go, aby dodać logikę biznesową wysyłania e-maili.
W rzeczywistym scenariuszu należy sprawdzić dane wejściowe użytkownika i uwzględnić Captcha lub podobny mechanizm, aby uniknąć spamu ze strony botów.
Tworzenie nowego agenta i projektowanie przepływów konwersacji w Dialogflow CX

Eksperymentuj dalej z frameworkiem Angular i baw się dobrze.

Zwalnianie miejsca i usuwanie projektu w chmurze

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

W przeglądarce wykonaj te czynności:

Zaloguj się na swoje konto Gmail lub Google Workspace.
W konsoli Google Cloud kliknij przycisk Ustawienia administracji.
Na stronie Uprawnienia i administrator kliknij kartę Zarządzaj zasobami.
Na stronie Zarządzanie zasobami znajdź projekt, który chcesz usunąć, i wybierz go. Kliknij 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 nowsza	Obsługiwane
16.10 lub nowsza	Obsługiwane
18.1.0	Nieobsługiwane