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

1. Введение

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

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

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

Все ссылки на фреймворк 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 и Less. Как использовать селектор CSS и создать файл определения стилей.
    • TypeScript или JavaScript. Как взаимодействовать со структурой DOM.
    • Git и GitHub. Как создать форк и клонировать репозиторий.
    • Интерфейс командной строки, например, bash или zsh . Как перемещаться по каталогам и выполнять команды.

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

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

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

  • Активная LTS-версия или версия Node.js с поддержкой LTS. Используется для установки фреймворка 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 успешно завершится, вы должны получить сообщение, похожее на показанный на следующем снимке экрана.

Вывод терминала версии 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],
    The app.component.ts file should match the following code example. 
    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. Navigate to the src directory in your new photo-gallery-app project directory.
  2. Откройте файл index.html .
  3. Добавьте шрифт Raleway , чтобы все страницы могли его наследовать. 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Сохраните файл index.html .
  5. Сохраните код и проверьте браузер. При запущенном сервере разработки изменения отобразятся в браузере после сохранения.
  6. Далее вам предстоит создать новый автономный компонент для отправки отзывов и общения с Jimbo. Продолжайте выполнение этого практического задания, чтобы узнать больше о Jimbo.

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 версии 14.2.0 появился новый метод provideRouter, который позволяет настраивать набор маршрутов для приложения. 
    import { provideRouter, Routes } from '@angular/router';
  4. Скопируйте и вставьте следующий фрагмент кода между операторами import и 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. А пока ознакомьтесь со следующими пунктами.
    • Для привязки contactForm к элементу form используется привязка свойства formGroup , а для привязки события ngSubmit
    • Директива FormGroup отслеживает событие отправки формы, генерируемое элементом form . Затем директива FormGroup генерирует событие ngSubmit , которое можно привязать к функции обратного вызова onSubmit .
    • На следующем этапе вы реализуете функцию обратного вызова onSubmit в файле feedback-and-chat.component.ts
  4. Далее вам нужно будет связать форму.

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

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

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

  1. Проанализируйте пользовательский ввод из отображаемой DOM-структуры, связанной с компонентом.
  2. Проверяйте вводимые пользователем данные, включая капчу или аналогичный механизм, чтобы предотвратить рассылку спама ботами.
  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. Enable billing in the Cloud Console to allow you to use Cloud resources and APIs. To learn more, see Create, modify, or close your self-serve Cloud Billing account .
  3. Создайте проект Google Cloud для хранения ресурсов вашего приложения App Engine и других ресурсов Google Cloud. Для получения дополнительной информации см. раздел «Создание и управление проектами» .
  4. Включите API Cloud Build в консоли Cloud. Для получения дополнительной информации см. раздел «Включение доступа к API» .
  5. Установите Google Cloud CLI и инструмент командной строки gcloud. Для получения дополнительной информации см. раздел «Установка gcloud CLI» .
  6. Инициализируйте Google Cloud CLI и убедитесь, что gcloud настроен на использование проекта Google Cloud, в который вы хотите выполнить развертывание. Для получения дополнительной информации см. раздел «Инициализация gcloud CLI» .

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

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

  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. Измените команду запуска, чтобы она запускала Node.js, в файле 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
    The information in the app.yaml file specifies the configuration for App Engine. You only need to specify the runtime and service.
  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 и при входе в меню просмотра приложения gcloud.

11. Поздравляем!

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

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

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

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

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

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

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

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

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

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