Начало работы с автономными компонентами

1. Введение

Что вы построите

В этой лаборатории кода вы создадите приложение-галерею фотографий дикой природы с помощью Angular v14. Завершенное приложение будет отображать набор фотографий, а также форму отправки сообщения для связи с фотографом и окно чата, где можно узнать интересные факты о животных, изображенных на фотографиях.

Вы создаете все в своем приложении, используя Angular v14 и новую функцию автономных компонентов.

Все ссылки на платформу Angular и Angular CLI отражают Angular v14. Автономные компоненты — это предварительная версия Angular v14, поэтому вам необходимо создать совершенно новое приложение с использованием Angular v14. Автономные компоненты обеспечивают упрощенный способ создания приложений Angular. Автономные компоненты, автономные директивы и автономные каналы призваны упростить процесс разработки за счет уменьшения необходимости в NgModules . Автономные компоненты могут в полной мере использовать преимущества существующей экосистемы библиотек Angular.

Это приложение, которое вы создаете сегодня.

Заполненное заявление

Что вы узнаете

  • Как использовать Angular CLI для создания нового проекта
  • Как использовать автономные компоненты Angular для оптимизации разработки приложений Angular
  • Как создать автономный компонент; вот как построить пользовательский интерфейс и добавить немного бизнес-логики
  • Как загрузить приложение с помощью автономного компонента
  • Как отложенно загружать автономный компонент
  • Как встроить диалог чата в отдельный компонент с помощью Dialogflow Messenger
  • Как развернуть приложение Angular в Google Cloud App Engine с помощью Google Cloud CLI (gcloud)

Что вам понадобится

  • Учетная запись Gmail или Google Workspace.
  • Базовые знания по следующим предметам
    • HTML. Как создать элемент.
    • CSS и меньше. Как использовать селектор CSS и создать файл определения стиля.
    • TypeScript или JavaScript. Как взаимодействовать со структурой DOM.
    • git и GitHub. Как форкнуть и клонировать репозиторий.
    • Интерфейс командной строки, например bash или zsh . Как перемещаться по каталогам и запускать команды.

2. Настройка среды

Настройте локальную среду

Чтобы завершить эту лабораторную работу, вам необходимо установить следующее программное обеспечение на свой локальный компьютер.

  • Активная LTS-версия или поддерживающая LTS- версия Node.js. Используется для установки платформы Angular и Angular CLI.

    Версия узла

    При поддержке Angular

    14.15 или новее

    Поддерживается

    16.10 или новее

    Поддерживается

    18.1.0

    Не поддерживается

    Чтобы проверить версию Node.js на вашем локальном компьютере, выполните следующую команду node из окна командной строки. 
    node -v
  • Редактор кода или IDE. Используется для открытия и редактирования файлов. Visual Studio Code или другой редактор кода по вашему выбору.

Установите Angular CLI

После настройки всех зависимостей выполните следующую команду npm , чтобы установить Angular CLI из окна командной строки.

npm install --global @angular/cli

Чтобы убедиться в правильности вашей конфигурации, запустите следующую команду Angular из командной строки.

ng version

Если команда Angular успешно завершится, вы должны получить сообщение, подобное следующему снимку экрана.

Терминальный вывод угловой версии

Исходный код и изображения

Вы создаете все приложение с нуля, и эта пошаговая инструкция поможет вам. Имейте в виду, что репозиторий GitHub содержит окончательный код. Если вы застряли, просмотрите окончательный код и изображения, отображаемые на странице галереи.

Чтобы скачать исходный код.

  1. В браузере перейдите на следующую страницу. 
    https://github.com/angular/codelabs/tree/standalone-components
  2. В окне командной строки создайте форк и клонируйте репозиторий.

На следующем этапе создайте приложение Фотогалерея.

3. Создайте новое приложение.

Чтобы создать начальное стартовое приложение, выполните следующие действия.

Используйте Angular CLI для создания нового рабочего пространства. Чтобы узнать больше об Angular CLI и платформе Angular, перейдите на angular.io .

Создать новый проект

В окне командной строки выполните следующие действия.

  1. Введите следующую команду Angular, чтобы создать новый проект Angular с именем photo-gallery-app . 
    ng new photo-gallery-app
  2. При каждом запросе принимайте выбор по умолчанию. Платформа Angular устанавливает необходимые пакеты и зависимости. Процесс может занять несколько минут.

После завершения работы Angular CLI у вас появится новое рабочее пространство Angular и простое, готовое к запуску приложение.

Ваше новое приложение структурировано как стандартное приложение Angular. NgModule в вашем новом приложении является избыточным для этой лаборатории кода.

Удалить модуль приложения

Чтобы удалить модуль приложения, выполните следующее действие.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Удалите файл app.module.ts .

После удаления модуля приложения в вашем приложении не останется модуля. В вашем приложении есть только один компонент — компонент приложения. Вы должны объявить этот компонент как автономный.

Объявите свой автономный компонент

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Откройте файл app.component.ts .
  3. Добавьте следующий параметр и значение в свой список декораторов.
    standalone: true
    Файл app.component.ts должен точно соответствовать следующему примеру кода. 
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  4. Сохраните файл app.component.ts .

Скомпилируйте новое автономное приложение

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app
  2. Введите следующую команду Angular, чтобы скомпилировать новое приложение. 
    ng serve

Ваше приложение не должно скомпилироваться. Не волнуйтесь, вам просто нужно исправить еще пару вещей.

Используйте API-интерфейс bootstrapApplication.

Чтобы ваше приложение могло работать без NgModule , вы должны использовать автономный компонент в качестве корневого компонента с помощью API bootstrapApplication .

Удалить ссылки на модуль приложения

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src в новом каталоге проекта photo-gallery-app
  2. Откройте файл main.ts
  3. Удалите следующий код импорта, поскольку у вас больше нет модуля приложения. 
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Удалите следующий код начальной загрузки, поскольку у вас больше нет модуля приложения.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    Файл main.ts должен соответствовать следующему примеру кода. 
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Добавьте компонент bootstrapApplication.

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src в новом каталоге проекта photo-gallery-app .
  2. Откройте файл main.ts
  3. Импортируйте компонент bootstrapApplication из сервиса @angular/platform-browser . 
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Добавьте следующий код для загрузки вашего приложения. 
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Импортируйте компонент и необходимые библиотеки.
    import { AppComponent } from './app/app.component';
    Файл main.ts должен соответствовать следующему примеру кода. 
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

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

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

Добавьте маршрутизатор и общие модули

Чтобы использовать маршрутизатор и другие общие функции модуля, вам необходимо напрямую импортировать каждый модуль в компонент.

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Откройте файл app.component.ts .
  3. Импортируйте необходимые модули в компонент. 
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Добавьте импорт в компонент.
    imports: [CommonModule, RouterModule],
    Файл app.component.ts должен соответствовать следующему примеру кода. 
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. Сохраните файл app.component.ts .

Скомпилируйте и запустите новое автономное приложение.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и запустить приложение, а также открыть веб-сервер. Возможно, вам придется закрыть IDE перед запуском приложения, чтобы удалить все ошибки компиляции. 
    ng serve

Ваш сервер разработки должен работать на порту 4200 . Все предыдущие ошибки должны исчезнуть, а компиляция должна пройти успешно. Отличная работа. Вы успешно создали приложение Angular, которое работает без модуля и с автономным компонентом.

  1. Далее вы собираетесь украсить свое приложение, чтобы оно отображало несколько фотографий.

4. Покажите фотографии

Ваше новое приложение представляет собой фотогалерею и должно отображать несколько фотографий.

Компоненты — это основные строительные блоки для приложений Angular. Компоненты имеют 3 основных аспекта.

  • HTML-файл для шаблона
  • CSS-файл для стилей
  • Файл TypeScript для поведения приложения.

Переместите фотографии в свое приложение

Изображения предоставлены в приложении, которое вы ранее скачали с GitHub.

  1. Перейдите в каталог src/assets проекта GitHub.
  2. Скопируйте и вставьте файлы в analogue каталог в каталоге проекта вашего photo-gallery-app .

Создайте HTML-шаблон

Файл app.component.html — это файл шаблона HTML, связанный с компонентом AppComponent .

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Откройте файл app.component.html .
  3. Удалите весь существующий HTML.
  4. Скопируйте и вставьте HTML-код из следующего примера кода. 
    <article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article
  5. Сохраните файл app.component.html .

Создайте файл определения стиля.

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src в новом каталоге проекта photo-gallery-app .
  2. Откройте styles.css .
  3. Скопируйте и вставьте CSS из следующего примера кода. 
    article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
  4. Сохраните styles.css .

Обновите индексный файл

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src в новом каталоге проекта photo-gallery-app .
  2. Откройте файл index.html .
  3. Добавьте шрифт Raleway , чтобы все страницы могли его наследовать. 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Сохраните файл index.html .
  5. Сохраните код и проверьте свой браузер. При работающем сервере разработки изменения отражаются в браузере при сохранении.
  6. Далее вы собираетесь создать новый автономный компонент для отправки отзывов и общения с Джимбо. Продолжите эту лабораторную работу, чтобы узнать больше о Джимбо.

5. Добавьте новый автономный компонент.

Как вы уже видели, автономные компоненты предоставляют упрощенный способ создания приложений Angular за счет уменьшения необходимости в NgModules. В следующих разделах вы создадите новый автономный компонент, который позволяет пользователю отправлять отзывы и общаться в чате с виртуальным агентом.

Создайте новый автономный компонент

Чтобы создать этот новый компонент, вы снова используете Angular CLI.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы создать новый компонент с именем feedback-and-chat .
    ng generate component feedback-and-chat --standalone
    В следующей таблице описаны части команды.

    Часть

    Подробности

    ng

    Определяет все команды Angular CLI для платформы Angular.

    generate component

    Создает основу для нового компонента.

    feedback-and-chat

    Название компонента

    --standalone

    Сообщает платформе Angular о необходимости создания автономного компонента.

Импортируйте новый автономный компонент.

Чтобы использовать новый автономный компонент, необходимо сначала добавить его в массив imports в файле app.components.ts .

Это автономный компонент, поэтому вы просто импортируете его, как если бы это был модуль.

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Откройте файл app.component.ts .
  3. Импортируйте новый автономный компонент. 
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Обновите импорт в компоненте.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    Файл app.component.ts должен соответствовать следующему примеру кода. 
    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. Сохраните файл app.component.ts .

Ленивая загрузка компонента

Переключитесь с парадигмы нетерпеливой загрузки на парадигму отложенной загрузки, при которой код не отправляется клиенту до тех пор, пока он вам не понадобится. Отложенная загрузка — отличный подход, позволяющий сократить время загрузки страницы, повысить производительность и улучшить взаимодействие с пользователем. Маршрутизатор обрабатывает отложенную нагрузку, которая одинакова для ngModule и автономного компонента.

Обновите шаблон HTML, связанный с компонентом приложения.

Чтобы отложить загрузку автономного компонента, добавьте в пользовательский интерфейс кнопку, которая активирует компонент только тогда, когда пользователь выбирает его.

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src/app в новом каталоге проекта photo-gallery-app .
  2. Откройте файл app.component.html .
  3. Прокрутите файл до конца и добавьте следующий пример кода, прежде чем закрыть элемент article . 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. Файл app.component.html должен соответствовать следующему примеру кода. 
    <article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>
  5. Сохраните файл app.component.html .

Настройте свои маршруты

В редакторе кода выполните следующие действия.

  1. Перейдите в каталог src в новом каталоге проекта photo-gallery-app .
  2. Откройте файл main.ts
  3. Импортируйте метод provideRouter и модуль Routes. В Angular v 14.2.0 представлен новый метод ProvideRouter, который позволяет нам настраивать набор маршрутов для приложения. 
    import { provideRouter, Routes } from '@angular/router';
  4. Скопируйте и вставьте следующий фрагмент кода между импортом и оператором if . 
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Скопируйте и вставьте следующий фрагмент кода и замените метод bootstrapApplication .
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    Файл main.ts должен соответствовать следующему примеру кода. 
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

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

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

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
  6. Сохраните файл main.ts

Скомпилируйте и проверьте с помощью инструментов разработчика Chrome.

Используйте инструменты разработчика Chrome, чтобы проверить, как платформа Angular отложенно загружает компонент.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и запустить приложение, а также открыть веб-сервер.
    ng serve
    Ваш сервер разработки должен работать на порту 4200 .

В браузере выполните следующие действия.

  1. Перейдите на следующую страницу. 
    http://localhost:4200
  2. Откройте инструменты разработчика Chrome и выберите вкладку «Сеть» .
  3. Обновите страницу, чтобы отобразить несколько файлов, но не компонент feedback-and-chat экран должен соответствовать следующему снимку экрана. Скриншот приложения с открытой панелью инструментов разработчика Chrome
  4. Выберите « Узнайте больше об этих парнях!» Кнопка для маршрутизации к автономному компоненту. В журнале должно быть указано, что компонент загружается только при использовании полного маршрутизатора. Прокрутите список до конца, чтобы убедиться, что компонент загружен. Ваш экран должен соответствовать следующему снимку экрана. Скриншот приложения с открытой панелью инструментов разработчика Chrome, демонстрирующий отложенную загрузку компонента

6. Добавьте пользовательский интерфейс для формы

Форма отправки отзыва имеет три поля ввода пользовательского интерфейса и кнопку внизу. Три поля ввода пользовательского интерфейса — это полное имя, адрес электронной почты отправителя и комментарии.

Для поддержки пользовательского интерфейса добавьте атрибут formControlName в элемент input , который привязывается к каждому элементу управления формой contactForm , связанному с каждым из трех входных полей пользовательского интерфейса.

Добавьте форму в HTML-шаблон

Добавьте форму в пользовательский интерфейс, чтобы позволить пользователю отправлять отзывы.

В редакторе кода выполните следующие действия.

  1. Перейдите к файлу feedback-and-chat.component.html .
  2. Удалите существующий HTML.
  3. Скопируйте и вставьте HTML-код из следующего примера кода. 
    <article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>
  4. Сохраните файл feedback-and-chat.component.html .

Обновите файл стилей для формы.

В редакторе кода выполните следующие действия.

  1. Перейдите к файлу feedback-and-chat.component.css .
  2. Скопируйте и вставьте CSS из следующего примера кода. 
    /*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
  3. Сохраните файл feedback-and-chat.component.css .

Скомпилируйте обновление пользовательского интерфейса для формы.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и запустить приложение, а также открыть веб-сервер.
    ng serve
    Ваше приложение не должно скомпилироваться. Не волнуйтесь, вам нужно привязать форму.
  3. А пока просмотрите следующие пункты.
    • Вы используете привязку свойства formGroup для привязки contactForm к элементу form и привязку события ngSubmit
    • Директива FormGroup прослушивает событие отправки, создаваемое элементом form . Затем директива FormGroup генерирует событие ngSubmit , которое вы можете привязать к функции обратного вызова onSubmit .
    • На более позднем этапе вы реализуете функцию обратного вызова onSubmit в файле feedback-and-chat.component.ts
  4. Далее вы собираетесь связать форму.

7. Добавьте обработку событий в форму

Пользовательский интерфейс формы отправки отзыва завершен, но в нем отсутствует взаимодействие. Обработка пользовательского ввода с помощью форм является краеугольным камнем многих распространенных приложений.

В реальном сценарии вам необходимо реализовать бизнес-логику для выполнения следующих действий.

  1. Анализируйте вводимые пользователем данные из отображаемой структуры DOM, связанной с компонентом.
  2. Подтвердите введенные пользователем данные, включая Captcha или аналогичный механизм, чтобы избежать рассылки спама ботами.
  3. Отправьте электронное письмо на указанный адрес электронной почты.
  4. Отобразите дружелюбное сообщение пользователю.

В этой лаборатории кода вы реализуете только следующие действия.

  1. Анализируйте вводимые пользователем данные из отображаемой структуры DOM, связанной с компонентом.
  2. Отобразите дружелюбное сообщение пользователю.

Вам следует бросить вызов своим навыкам и выполнить все четыре действия.

Добавьте в компонент модель формы отправки сообщения.

Создайте и добавьте модель формы отправки отзыва в класс компонента. Модель формы определяет статус формы. Служба FormBuilder предоставляет удобные методы для создания элемента управления пользовательского интерфейса.

В редакторе кода выполните следующие действия.

  1. Перейдите к файлу feedback-and-chat.component.ts .
  2. Импортируйте службу FormBuilder и модуль ReactiveModule из пакета @angular/forms . Этот сервис предоставляет удобные методы для создания элементов управления. На следующем шаге мы будем использовать функцию inject , поэтому нам нужно импортировать и ее из @angular/core . 
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Импортируйте модуль ReactiveFormsModule . 
    imports: [CommonModule,ReactiveFormsModule],
  4. Удалите следующий конструктор. 
    constructor() { }
  5. Внедрите службу FormBuilder с помощью функции inject чуть ниже сигнатуры класса.
    private formBuilder = inject(FormBuilder);
    Используйте метод group из службы FormBuilder , чтобы создать модель формы, чтобы получить имя, адрес электронной почты и комментарии пользователя.
  6. Создайте новое свойство contactForm и используйте метод group , чтобы установить его в модель формы. Модель формы содержит поля name , email и comments .
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Определите метод onSubmit для обработки формы. В реальном сценарии метод onSubmit позволяет пользователю отправить сообщение обратной связи фотографу, используя сообщение электронной почты, которое отправляется на указанный адрес электронной почты. В этой кодовой лаборатории вы отображаете вводимые пользователем данные. , используйте метод reset , чтобы сбросить форму и отобразить удобное сообщение об успехе.
  7. Добавьте новый метод onSubmit и установите для переменной showMsg значение true после его инициализации.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    Файл feedback-and-chat.component.ts должен соответствовать следующему примеру кода. 
    import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}
  8. Сохраните файл feedback-and-chat.component.ts .

Скомпилируйте и отобразите модель формы отправки отзыва.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и запустить приложение, а также открыть веб-сервер. 
    ng serve
  3. Ваш сервер разработки должен работать на порту 4200 .

В браузере выполните следующие действия.

  1. Перейдите на следующую страницу. 
    http://localhost:4200
  2. Откройте инструменты разработчика Chrome и выберите вкладку «Консоль» .
  3. Введите любые значения в текстовые поля «Полное имя» , «Электронная почта » и «Комментарии» .
  4. Нажмите кнопку «Отправить» . На странице должно появиться сообщение об успешном завершении.
  5. Проверьте значения, отображаемые на вкладке «Консоль» . Ваш экран должен соответствовать следующему снимку экрана. Окно браузера с консолью, отображающей данные json, введенные в форму Вы успешно реализовали код, чтобы добавить форму отправки сообщения в пользовательский интерфейс компонента и проанализировать вводимые пользователем данные.
  6. Затем вы встраиваете диалог чата, чтобы посетители приложения могли общаться с Джимбо. Джимбо — коала, от которой вы узнаете несколько интересных фактов о дикой природе.

8. Добавьте диалог в чат

Используйте опыт работы с диалоговыми интерфейсами, такими как Dialogflow CX или аналогичными платформами. Агент Dialogflow CX — это виртуальный агент, который обрабатывает одновременные разговоры с людьми. Это модуль распознавания естественного языка, который распознает нюансы человеческого языка и переводит текст или аудио конечного пользователя во время разговора в структурированные данные, которые могут понимать приложения и службы.

Образец виртуального агента уже создан для вас. В этой лабораторной работе вам нужно добавить диалог чата в автономный компонент, чтобы пользователи приложения могли взаимодействовать с ботом. Для этого требования вы будете использовать Dialogflow Messenger — встроенную интеграцию, которая предоставляет настраиваемое диалоговое окно. При открытии диалоговое окно чата появляется в нижней правой части экрана и запускает приветственное намерение агента по умолчанию. Бот приветствует пользователя и инициирует разговор.

Следующая реализация делится с пользователем забавными фактами о дикой природе. Другие реализации виртуальных агентов могут решать сложные случаи использования для клиентов (например, агент центра обработки вызовов). Многие компании используют виртуального агента в качестве основного канала связи с веб-сайтом компании.

Добавьте Dialogflow Messenger в свой компонент.

Как и форма, диалоговое окно чата должно отображаться только при загрузке автономного компонента.

В редакторе кода выполните следующие действия.

  1. Перейдите к файлу feedback-and-chat.component.ts .
  2. Скопируйте и вставьте элемент df-messenger из следующего примера кода в любое место страницы.
    <df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
              chat-title="Chat with Jimbo!"
              df-cx="true"
              intent="messanger-welcome-event"
              language-code="en"
              location="us-central1"></df-messenger>
    Dialogflow генерирует атрибуты для элемента df-messenger при выборе интеграции Dialogflow Messenger.

    Атрибут

    Подробности

    идентификатор агента

    Предварительно заполнено. Указывает уникальный идентификатор агента Dialogflow.

    заголовок чата

    Предварительно заполнено. Указывает содержимое, которое будет отображаться в верхней части диалогового окна чата. Изначально уже указано имя вашего агента, но вам следует настроить его.

    df-cx

    Указывает, что взаимодействие происходит с агентом CX. Установите значение true .

    намерение

    Указывает пользовательское событие, используемое для запуска первого намерения при открытии диалогового окна чата.

    код языка

    Указывает код языка по умолчанию для первого намерения.

    расположение

    Указывает регион, в котором вы развертываете агент.

  3. Сохраните файл feedback-and-chat.component.ts .

Отображение модели формы отправки отзыва

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular для компиляции приложения.
    ng serve
    Ваше приложение не должно скомпилироваться. В командной строке должно появиться следующее сообщение об ошибке. Сообщение об ошибке df-messenger
  3. Затем добавьте пользовательскую схему.

Добавьте пользовательскую схему в автономный компонент

Элемент df-messanger не является известным элементом. Это пользовательский веб-компонент . Сообщение об ошибке от платформы Angular предполагает, что вам необходимо добавить CUSTOM_ELEMENTS_SCHEMA к обоим автономным компонентам, чтобы подавить сообщение.

В редакторе кода выполните следующие действия.

  1. Перейдите к файлу feedback-and-chat.component.ts .
  2. Импортируйте схему CUSTOM_ELEMENTS_SCHEMA . 
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Добавьте CUSTOM_ELEMENTS_SCHEMA в список схем.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    Файл feedback-and-chat.component.ts должен соответствовать следующему примеру кода. 
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...
  4. Веб-компоненту df-messanger требуется JavaScript, который следует внедрять только при загрузке компонента обратной связи и чата. Для этого мы добавим соответствующий код в метод ngOnInit(), который будет загружать скрипт чата, необходимый для активации элемент. 
    ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}
  5. Сохраните файл feedback-and-chat.component.ts .

Скомпилируйте и отобразите обновленный диалог чата.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и запустить приложение, а также открыть веб-сервер.
    ng serve
    Ваш сервер разработки должен работать на порту 4200 .

В браузере выполните следующие действия.

  1. Перейдите на следующую страницу.
    http://localhost:4200
    Внизу страницы должен появиться значок чата.
  2. Выберите значок и взаимодействуйте с Джимбо. Джимбо рассказывает интересные факты о животных. Приложение отображает окно чата с ответом бота-мессенджера
  3. Приложение полностью функционально.

9. Разверните приложение в Google App Engine.

Приложение работает локально на вашем компьютере. Следующим и последним шагом этой лаборатории кода вы хотите развернуть ее в Google App Engine.

Дополнительную информацию о Google App Engine см. в разделе App Engine .

Настройте свою среду для Google App Engine

Если вы уже соответствуете всем следующим условиям, пропустите следующие шаги и приступайте к развертыванию приложения.

  • Создал облачный проект с помощью App Engine.
  • Включен API Cloud Build.
  • Установлен Google Cloud CLI.

Выполните следующие действия.

  1. Войдите в свою учетную запись Gmail или Google Workspace. Если у вас его нет, создайте учетную запись Google .
  2. Включите выставление счетов в Cloud Console, чтобы вы могли использовать облачные ресурсы и API. Дополнительные сведения см. в статье Создание, изменение или закрытие учетной записи самостоятельного выставления счетов в Cloud .
  3. Создайте проект Google Cloud для хранения ресурсов приложения App Engine и других ресурсов Google Cloud. Дополнительные сведения см. в разделе Создание проектов и управление ими .
  4. Включите Cloud Build API в Cloud Console. Дополнительные сведения см. в разделе Включение доступа к API .
  5. Установите Google Cloud CLI и инструмент командной строки gcloud. Дополнительные сведения см. в разделе Установка интерфейса командной строки gcloud .
  6. Инициализируйте Google Cloud CLI и убедитесь, что gcloud настроен для использования проекта Google Cloud, в котором вы хотите выполнить развертывание. Дополнительные сведения см. в разделе Инициализация интерфейса командной строки gcloud .

Создайте свое автономное приложение

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду Angular, чтобы скомпилировать и создать готовую к использованию версию приложения. 
    ng build

Готовая к использованию версия приложения создается в подкаталоге dist каталога проекта photo-gallery-app .

10. Разверните свое приложение с помощью платформы Express.js.

Пример кода в этой лаборатории использует платформу Express.js для обработки HTTP-запросов. Вы можете использовать предпочитаемую вами веб-инфраструктуру.

Установите платформу Express.js

В окне командной строки выполните следующее действие.

  1. Введите следующую команду, чтобы установить платформу Express.js. 
    npm install express --save

Настройте свой веб-сервер

В редакторе кода выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Создайте новый файл server.js .
  3. Скопируйте и вставьте следующий код. 
    const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});
  4. Сохраните файл server.js .

Подключите свой веб-сервер

В редакторе кода выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Откройте файл package.json .
  3. Измените команду запуска, чтобы запустить узел в файле server.js .
    "name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
    Атрибут start является точкой входа для вашего приложения.
  4. Сохраните файл package.json .

Настройка App Engine

В редакторе кода выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Создайте новый файл app.yaml .
  3. Скопируйте и вставьте следующий код.
    runtime: nodejs16
service: default
    Информация в файле app.yaml определяет конфигурацию App Engine. Вам нужно только указать время выполнения и сервис.
  4. Сохраните файл app.yaml .

Обновите список игнорирования gcloud

Чтобы убедиться, что ваш каталог node_modules не загружен, создайте файл .gcloudignore . Файлы, перечисленные в вашем файле .gcloudignore , не загружаются.

В редакторе кода выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Создайте новый файл .gcloudignore .
  3. Скопируйте и вставьте следующий код. 
    # This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/
  4. Сохраните файл .gcloudignore .

Инициализируйте свое приложение

Перед развертыванием приложения инициализируйте его с помощью своего проекта и выберите связанный регион.

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду, чтобы инициализировать ваше приложение. 
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. В командной строке выберите регион, в котором вы хотите разместить свое приложение App Engine.

Разверните свое приложение

В окне командной строки выполните следующие действия.

  1. Перейдите в новый каталог проекта photo-gallery-app .
  2. Введите следующую команду, чтобы развернуть приложение. 
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. В командной строке подтвердите действие. После успешного завершения команды развертывания gcloud отобразится URL-адрес для доступа к вашему приложению.
  4. Введите следующую команду, чтобы открыть новую вкладку в браузере. 
    gcloud app browse
    Вывод консоли при развертывании приложения gcloud и вводе обзора приложения glcoud

11. Поздравления

Поздравляю. Вы создали образец фотогалереи с помощью Angular v14 и успешно развернули его в App Engine.

Вы экспериментировали с функцией автономного компонента и отложенной загрузкой. Вы создали функцию отправки сообщений на основе формы для обратной связи и комментариев. Вы также успешно добавили диалог чата с виртуальным агентом Dialogflow CX с помощью Dialogflow Messenger. Отличная работа.

Следующие шаги

Теперь, когда вы завершили базовое приложение, улучшите его, используя следующие идеи.

  • Форма на самом деле не отправляет обратную связь, поэтому выполните ее рефакторинг, чтобы добавить бизнес-логику для отправки электронного письма.
  • В реальном сценарии вам следует проверить вводимые пользователем данные и включить Captcha или аналогичный механизм, чтобы избежать рассылки спама ботами.
  • Создайте нового агента и узнайте, как создавать потоки диалога в Dialogflow CX.

Продолжайте экспериментировать с фреймворком Angular и получайте удовольствие.

Очистите и удалите свой облачный проект.

Вы можете сохранить свой облачный проект или удалить его, чтобы прекратить выставление счетов за все ресурсы, используемые в проекте.

В браузере выполните следующие действия.

  1. Войдите в свою учетную запись Gmail или Google Workspace.
  2. В консоли Google Cloud . Нажмите кнопку «IAM и настройки администратора» .
  3. На странице IAM и администрирование. Выберите вкладку «Управление ресурсами» .
  4. На странице «Управление ресурсами» . Перейдите к проекту, который вы хотите удалить, и выберите его. Нажмите кнопку «Удалить» , чтобы открыть диалоговое окно.
  5. В диалоговом окне. Введите идентификатор проекта. Нажмите кнопку «Завершить работу» , чтобы удалить проект.