Cette page a été traduite par l'API Cloud Translation.

Premiers pas avec les composants autonomes

1. Introduction

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une application de galerie de photos d'animaux sauvages à l'aide d'Angular v14. Une fois terminée, l'application affichera un ensemble de photos et un formulaire d'envoi de message permettant de contacter le photographe, ainsi qu'une fenêtre de chat permettant de découvrir des anecdotes intéressantes sur les animaux photographiés.

Vous compilez l'intégralité de votre application à l'aide d'Angular v14 et de la nouvelle fonctionnalité de composants autonomes.

Toutes les références au framework Angular et à la CLI Angular reflètent Angular v14. Les composants autonomes sont une fonctionnalité en version preview d'Angular v14. Vous devez donc créer une toute nouvelle application à l'aide d'Angular v14. Les composants autonomes permettent de créer facilement des applications Angular. Les composants autonomes, les directives autonomes et les canaux autonomes visent à simplifier l'expérience d'écriture en réduisant le besoin de NgModules. Les composants autonomes peuvent exploiter pleinement l'écosystème existant de bibliothèques Angular.

Il s'agit de l'application que vous créez aujourd'hui.

Demande terminée

Objectifs de l'atelier

Utiliser la CLI Angular pour créer un échafaudage de projet
Utiliser des composants autonomes Angular pour simplifier le développement d'applications Angular
Créer un composant autonome, c'est-à-dire créer l'interface utilisateur et ajouter une logique métier
Démarrer une application à l'aide d'un composant autonome
Charger un composant autonome de manière différée
Intégrer une boîte de dialogue de chat dans un composant autonome à l'aide de Dialogflow Messenger
Déployer une application Angular sur Google Cloud App Engine à l'aide de la Google Cloud CLI (gcloud)

Ce dont vous avez besoin

Un compte Gmail ou Google Workspace
Connaissances de base sur les sujets suivants :
- HTML. Créer un élément
- CSS et less. Utiliser un sélecteur CSS et créer un fichier de définition de style
- TypeScript ou JavaScript. Interagir avec la structure DOM
- git et GitHub. Dupliquer et cloner un dépôt
- Interface de ligne de commande, telle que bash ou zsh. Parcourir les répertoires et exécuter des commandes

2. Cofiguration de l'environnement

Configurer votre environnement local

Pour suivre cet atelier de programmation, vous devez installer les logiciels suivants sur votre ordinateur local.

Version LTS active ou LTS de maintenance de Node.js. Permet d'installer le framework Angular et la CLI Angular.

Version du nœud

Compatible avec Angular

14.15 ou version ultérieure

Compatible

16.10 ou version ultérieure

Compatible

18.1.0

Non compatible

Pour vérifier la version de Node.js sur votre ordinateur local, exécutez la commande node suivante à partir d'une fenêtre de ligne de commande.
```
node -v
```
Un éditeur de code ou un IDE Permet d'ouvrir et de modifier des fichiers.Visual Studio Code ou un autre éditeur de code de votre choix.

Installer la CLI Angular

Après avoir configuré toutes les dépendances, exécutez la commande npm suivante pour installer la CLI Angular à partir d'une fenêtre de ligne de commande.

npm install --global @angular/cli

Pour vérifier que votre configuration est correcte, exécutez la commande Angular suivante à partir d'une ligne de commande.

ng version

Si la commande Angular aboutit, vous devriez recevoir un message semblable à la capture d'écran suivante.

Résultat du terminal de la version Angular

Code source et images

Vous allez créer l'application entière de A à Z, et cet atelier de programmation vous y aidera. N'oubliez pas que le dépôt GitHub contient le code final. Si vous rencontrez des difficultés, examinez le code final et les images affichées sur la page de la galerie.

Pour télécharger le code source :

Dans votre navigateur, accédez à la page suivante.

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

Dans une fenêtre de ligne de commande, dupliquez et clonez le dépôt.

Dans l'étape suivante, créez votre application Galerie photo.

3. Créer une application

Pour créer l'application de démarrage initiale, procédez comme suit :

Utilisez la CLI Angular pour créer un espace de travail. Pour en savoir plus sur la CLI Angular et le framework Angular, consultez angular.io.

Créer un projet

Dans une fenêtre de ligne de commande, procédez comme suit.

Saisissez la commande Angular suivante pour créer un projet Angular nommé photo-gallery-app.
```
ng new photo-gallery-app
```
À chaque invite, acceptez le choix par défaut.Le framework Angular installe les packages et dépendances requis. Le processus peut prendre quelques minutes.

Une fois la CLI Angular terminée, vous disposez d'un nouvel espace de travail Angular et d'une application simple prête à l'exécution.

Votre nouvelle application est structurée comme une application Angular standard. Le NgModule de votre nouvelle application est redondant pour cet atelier de programmation.

Supprimer le module d'application

Pour supprimer le module d'application, procédez comme suit :

Accédez au répertoire src/app dans le nouveau répertoire de projet photo-gallery-app.
Supprimez le fichier app.module.ts.

Une fois le module d'application supprimé, aucun module ne figure dans votre application. Votre application ne comporte qu'un seul composant, à savoir le composant d'application. Vous devez déclarer le composant comme autonome.

Déclarer votre composant autonome

Dans un éditeur de code, effectuez les actions suivantes.

Accédez au répertoire src/app dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier app.component.ts.

Ajoutez le paramètre et la valeur suivants à votre liste de décorateurs.

standalone: true

Le fichier app.component.ts doit correspondre étroitement à l'exemple de code suivant.

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

Enregistrez le fichier app.component.ts.

Compiler votre nouvelle application autonome

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler votre nouvelle application.
```
ng serve
```

La compilation de votre application devrait échouer. Ne vous inquiétez pas, il ne vous reste plus qu'à réparer quelques points.

Utiliser l'API bootstrapApplication

Pour permettre à votre application de s'exécuter sans NgModule, vous devez utiliser un composant autonome comme composant racine à l'aide de l'API bootstrapApplication.

Supprimer les références au module d'application

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier main.ts.

Supprimez le code d'importation suivant, car vous n'avez plus de module d'application.

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

Supprimez le code d'amorçage suivant, car vous n'avez plus de module d'application.

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

Le fichier main.ts doit correspondre à l'exemple de code suivant.

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

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

Ajouter le composant bootstrapApplication

Dans un éditeur de code, effectuez les actions suivantes.

Accédez au répertoire src dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier main.ts.
Importez le composant bootstrapApplication à partir du service @angular/platform-browser.
```
import { bootstrapApplication } from '@angular/platform-browser';
```

Ajoutez le code suivant pour démarrer votre application.

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

Importez le composant et les bibliothèques requises.

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

Le fichier main.ts doit correspondre à l'exemple de code suivant.

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

Ajouter un routeur et des modules courants

Pour utiliser le routeur et d'autres fonctionnalités courantes des modules, vous devez importer directement chaque module dans le composant.

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src/app dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier app.component.ts.

Importez les modules requis dans le composant.

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

Ajoutez les importations au composant.

imports: [CommonModule, RouterModule],

Le fichier app.component.ts doit correspondre à l'exemple de code suivant.

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

Enregistrez le fichier app.component.ts.

Compiler et exécuter votre nouvelle application autonome

Dans une fenêtre de ligne de commande, procédez comme suit.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et exécuter l'application, et ouvrir un serveur Web. Vous devrez peut-être fermer votre IDE avant d'exécuter votre application pour supprimer les erreurs de compilation.
```
ng serve
```

Votre serveur de développement doit s'exécuter sur le port 4200. Toutes les erreurs précédentes devraient avoir disparu et la compilation devrait aboutir. Bravo ! Vous avez créé une application Angular qui s'exécute sans module et avec un composant autonome.

Vous allez maintenant embellir votre application pour afficher des photos.

4. Afficher les photos

Votre nouvelle application est conçue pour être une galerie de photos et doit afficher des photos.

Les composants sont les éléments de base des applications Angular. Les composants présentent trois aspects principaux.

Un fichier HTML pour le modèle
Un fichier CSS pour les styles
Un fichier TypeScript pour le comportement de l'application

Déplacer les photos vers votre application

Les images sont fournies dans l'application que vous avez précédemment téléchargée depuis GitHub.

Accédez au répertoire src/assets du projet GitHub.
Copiez et collez les fichiers dans le répertoire analogue du répertoire de votre projet photo-gallery-app.

Créer le modèle HTML

Le fichier app.component.html est le fichier de modèle HTML associé au composant AppComponent.

Dans un éditeur de code, effectuez les actions suivantes.

Accédez au répertoire src/app de votre nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier app.component.html.
Supprimez tout le code HTML existant.

Copiez et collez le code HTML de l'exemple de code suivant.

<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

Enregistrez le fichier app.component.html.

Créer le fichier de définition de style

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier styles.css.

Copiez et collez le code CSS de l'exemple de code suivant.

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

Enregistrer le fichier styles.css

Mettre à jour le fichier d'index

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier index.html.

Ajoutez la police Raleway pour permettre à toutes les pages d'en hériter.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

Enregistrez le fichier index.html.
Enregistrez le code et vérifiez votre navigateur. Lorsque le serveur de développement est en cours d'exécution, les modifications sont reflétées dans le navigateur lorsque vous les enregistrez.
Vous allez ensuite créer un composant autonome pour envoyer des commentaires et discuter avec Jimbo. Continuez cet atelier de programmation pour en savoir plus sur Jimbo.

5. Ajouter un composant autonome

Comme vous l'avez vu jusqu'à présent, les composants autonomes permettent de créer des applications Angular de manière simplifiée en réduisant le besoin de NgModules. Dans les sections suivantes, vous allez créer un composant autonome qui permet à l'utilisateur d'envoyer des commentaires et de discuter avec un agent virtuel.

Créer un composant autonome

Pour créer ce composant, utilisez à nouveau la CLI Angular.

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.

Saisissez la commande Angular suivante pour créer un composant nommé feedback-and-chat.

ng generate component feedback-and-chat --standalone

Le tableau suivant décrit les éléments de la commande.

Partie	Détails
`ng`	Définit toutes les commandes de la CLI Angular pour le framework Angular
`generate component`	Crée l'échafaudage d'un nouveau composant
`feedback-and-chat`	Nom du composant
`--standalone`	Indique au framework Angular de créer un composant autonome

Importer le nouveau composant autonome

Pour utiliser le nouveau composant autonome, vous devez d'abord l'ajouter au tableau imports dans le fichier app.components.ts.

Il s'agit d'un composant autonome. Il vous suffit donc de l'importer comme s'il s'agissait d'un module.

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src/app dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier app.component.ts.

Importez le nouveau composant autonome.

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

Mettez à jour les importations dans le composant.

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

Le fichier app.component.ts doit correspondre à l'exemple de code suivant.

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

Enregistrez le fichier app.component.ts.

Charger le composant de manière différée

Passez d'un paradigme de chargement anticipé à un paradigme de chargement paresseux, dans lequel le code n'est pas envoyé au client tant que vous n'en avez pas besoin. Le chargement différé est une excellente approche pour réduire le temps de chargement d'une page, améliorer les performances et l'expérience utilisateur. Le routeur gère le chargement paresseux, qui est le même pour un ngModule et un composant autonome.

Mettre à jour le modèle HTML associé au composant d'application

Pour charger le composant autonome de manière différée, ajoutez à l'interface utilisateur un bouton qui n'active le composant que lorsqu'un utilisateur le sélectionne.

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src/app de votre nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier app.component.html.

Faites défiler jusqu'à la fin du fichier et ajoutez l'exemple de code suivant avant de fermer l'élément article.

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

Le fichier app.component.html doit correspondre à l'exemple de code suivant.

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

Enregistrez le fichier app.component.html.

Configurer vos itinéraires

Dans un éditeur de code, procédez comme suit.

Accédez au répertoire src dans le nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier main.ts.
Importez la méthode provideRouter et le module Routes. Angular v14.2.0 a introduit une nouvelle méthode provideRouter qui nous permet de configurer un ensemble de routes pour l'application.
```
import { provideRouter, Routes } from '@angular/router';
```

Copiez et collez l'extrait de code suivant entre les importations et l'instruction if.

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

Copiez et collez l'extrait de code suivant, puis remplacez la méthode bootstrapApplication.

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

Le fichier main.ts doit correspondre à l'exemple de code suivant.

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

Enregistrez le fichier main.ts.

Compiler et examiner avec les outils pour les développeurs Chrome

Utilisez les outils pour les développeurs Chrome afin de vérifier comment le framework Angular charge le composant de façon différée.

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et exécuter l'application, et ouvrir un serveur Web.
```
ng serve
```
Votre serveur de développement doit s'exécuter sur le port 4200.

Dans votre navigateur, procédez comme suit.

Accédez à la page suivante.
```
http://localhost:4200
```
Ouvrez les Outils pour les développeurs Chrome, puis sélectionnez l'onglet Réseau.
Actualisez la page pour afficher plusieurs fichiers, mais pas le composant feedback-and-chat.Votre écran doit ressembler à la capture d'écran suivante.
Sélectionnez le bouton En savoir plus sur ces personnes pour accéder au composant autonome.Le journal doit indiquer que le composant n'est chargé que lorsque vous accédez au routeur complet. Faites défiler la liste jusqu'en bas pour vérifier que le composant a été chargé. Votre écran doit ressembler à la capture d'écran suivante.

6. Ajouter l'UI du formulaire

Le formulaire d'envoi de commentaires comporte trois champs d'interface utilisateur de saisie et un bouton en bas. Les trois champs de saisie de l'UI sont le nom complet, l'adresse e-mail de l'expéditeur et les commentaires.

Pour prendre en charge l'interface utilisateur, ajoutez un attribut formControlName dans un élément input qui se lie à chaque commande de formulaire contactForm associée à chacun des trois champs d'interface utilisateur de saisie.

Ajouter le formulaire au modèle HTML

Ajoutez un formulaire à l'UI pour permettre à un utilisateur d'envoyer des commentaires.

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au fichier feedback-and-chat.component.html.
Supprimez le code HTML existant.

Copiez et collez le code HTML de l'exemple suivant.

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

Enregistrez le fichier feedback-and-chat.component.html.

Mettre à jour le fichier de styles du formulaire

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au fichier feedback-and-chat.component.css.

Copiez et collez le code CSS de l'exemple de code suivant.

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

Enregistrez le fichier feedback-and-chat.component.css.

Compiler la mise à jour de l'interface utilisateur pour le formulaire

Dans une fenêtre de ligne de commande, procédez comme suit.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et exécuter l'application, et ouvrir un serveur Web.
```
ng serve
```
Votre application ne doit pas se compiler. Ne vous inquiétez pas, vous devez lier le formulaire.
Pour l'instant, consultez les éléments suivants.
- Vous utilisez la liaison de propriété formGroup pour lier contactForm à l'élément form et la liaison d'événement ngSubmit.
- La directive FormGroup écoute l'événement de soumission émis par l'élément form. Ensuite, la directive FormGroup émet un événement ngSubmit que vous pouvez lier à la fonction de rappel onSubmit.
- Dans une étape ultérieure, vous implémenterez la fonction de rappel onSubmit dans le fichier feedback-and-chat.component.ts.
Vous allez maintenant lier le formulaire.

7. Ajouter la gestion des événements au formulaire

L'UI du formulaire Envoyer des commentaires est terminée, mais l'interaction est manquante. La gestion des entrées utilisateur avec des formulaires est la pierre angulaire de nombreuses applications courantes.

Dans un scénario réel, vous devez implémenter une logique métier pour effectuer les actions suivantes.

Analysez l'entrée utilisateur à partir de la structure DOM affichée associée au composant.
Validez l'entrée utilisateur, qui inclut un captcha ou un mécanisme similaire pour éviter le spam par des bots.
Envoyer un e-mail à une adresse e-mail désignée
Affichez un message convivial à l'utilisateur.

Dans cet atelier de programmation, vous n'implémentez que les actions suivantes.

Analysez l'entrée utilisateur à partir de la structure DOM affichée associée au composant.
Affichez un message convivial à l'utilisateur.

Vous devez tester vos compétences et mettre en œuvre les quatre actions.

Ajouter le modèle de formulaire d'envoi de message au composant

Créez et ajoutez le modèle de formulaire d'envoi de commentaires dans la classe du composant. Le modèle de formulaire détermine l'état du formulaire. Le service FormBuilder fournit des méthodes pratiques pour créer un contrôle d'interface utilisateur.

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au fichier feedback-and-chat.component.ts.
Importez le service FormBuilder et le module ReactiveModule à partir du package @angular/forms. Ce service fournit des méthodes pratiques pour générer des commandes. À l'étape suivante, nous allons utiliser la fonction inject. Nous devons donc également l'importer depuis @angular/core.
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

Importez le module ReactiveFormsModule.

imports: [CommonModule,ReactiveFormsModule],

Supprimez le constructeur suivant.
```
constructor() { }
```
Injectez le service FormBuilder via la fonction inject juste en dessous de la signature de la classe.
```
private formBuilder = inject(FormBuilder);
```
Utilisez la méthode group du service FormBuilder pour créer un modèle de formulaire afin de recueillir le nom, l'adresse e-mail et les commentaires d'un utilisateur.
Créez la propriété contactForm et utilisez la méthode group pour la définir sur un modèle de formulaire.Le modèle de formulaire contient les champs name, email et comments.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Définissez une méthode onSubmit pour gérer le formulaire.Dans un scénario réel, la méthode onSubmit permet à l'utilisateur d'envoyer un message de commentaires au photographe à l'aide d'un e-mail envoyé à une adresse e-mail désignée.Dans cet atelier de programmation, vous affichez les entrées utilisateur, utilisez la méthode reset pour réinitialiser le formulaire et affichez un message de réussite convivial.

Ajoutez la nouvelle méthode onSubmit et définissez la variable showMsg sur true après l'avoir initialisée.

showMsg: boolean = false;

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

Le fichier feedback-and-chat.component.ts doit correspondre à l'exemple de code suivant.

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

Enregistrez le fichier feedback-and-chat.component.ts.

Compiler et afficher le modèle du formulaire d'envoi de commentaires

Dans une fenêtre de ligne de commande, procédez comme suit.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et exécuter l'application, et ouvrir un serveur Web.
```
ng serve
```
Votre serveur de développement doit s'exécuter sur le port 4200.

Dans votre navigateur, procédez comme suit.

Accédez à la page suivante.
```
http://localhost:4200
```
Ouvrez les outils pour les développeurs Chrome, puis sélectionnez l'onglet Console.
Saisissez des valeurs dans les zones de texte Nom complet, Adresse e-mail et Commentaires.
Sélectionnez le bouton Submit (Envoyer). Un message de réussite devrait s'afficher sur la page.
Vérifiez que les valeurs s'affichent dans l'onglet Console.Votre écran doit correspondre à la capture d'écran suivante.Vous avez implémenté le code pour ajouter un formulaire d'envoi de message à l'interface utilisateur du composant et analyser les entrées utilisateur.
Vous allez ensuite intégrer une boîte de dialogue de chat pour permettre aux visiteurs de l'application de discuter avec Jimbo. Jimbo est un koala qui vous apprend des anecdotes intéressantes sur la faune.

8. Ajouter une boîte de dialogue de chat

Exploitez votre expérience avec les interfaces de conversation, telles que Dialogflow CX ou des plates-formes similaires. Un agent Dialogflow CX est un agent virtuel qui gère les conversations simultanées avec des humains. Il s'agit d'un module de compréhension du langage naturel qui reconnaît les nuances du langage humain et traduit le contenu texte ou audio de l'utilisateur final pendant une conversation en données structurées compréhensibles par les applications et les services.

Un exemple d'agent virtuel a déjà été créé pour vous. Dans cet atelier, vous devez ajouter une boîte de dialogue de chat au composant autonome pour permettre aux utilisateurs de l'application d'interagir avec le bot. Pour répondre à cette exigence, vous allez utiliser Dialogflow Messenger, une intégration prédéfinie qui fournit une fenêtre de dialogue personnalisable. Lorsqu'elle est ouverte, la boîte de dialogue de chat s'affiche en bas à droite de l'écran et déclenche l'intent de bienvenue par défaut de l'agent. Le bot salue l'utilisateur et entame une conversation.

L'implémentation suivante présente des informations amusantes sur la faune et la flore à l'utilisateur. D'autres implémentations d'agents virtuels peuvent répondre à des cas d'utilisation complexes pour les clients (comme un agent humain de centre d'appels). De nombreuses entreprises utilisent un agent virtuel comme principal canal de communication avec leur site Web.

Ajouter Dialogflow Messenger à votre composant

Comme le formulaire, la boîte de dialogue de chat ne doit s'afficher que lorsque le composant autonome est chargé.

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au fichier feedback-and-chat.component.ts.

Copiez et collez l'élément df-messenger de l'exemple de code suivant n'importe où sur la page.

<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 génère les attributs pour l'élément df-messenger lorsque vous sélectionnez l'intégration Dialogflow Messenger.

Attribut	Détails
ID de l'agent	Prérempli. Spécifie l'identifiant unique de l'agent Dialogflow.
chat-title	Préremplies. Spécifie le contenu à afficher en haut de la boîte de dialogue de chat. Initialement prérempli avec le nom de votre agent, mais vous devez le personnaliser.
df-cx	Indique que l'interaction est effectuée avec un agent CX. Définissez la valeur sur `true`.
intent	Spécifie l'événement personnalisé utilisé pour déclencher le premier intent lorsque la boîte de dialogue de chat est ouverte.
language-code	Spécifie le code de langue par défaut du premier intent.
position	Spécifie la région dans laquelle vous déployez l'agent.

Enregistrez le fichier feedback-and-chat.component.ts.

Afficher le modèle de formulaire d'envoi de commentaires

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler l'application.
```
ng serve
```
Votre application ne doit pas se compiler. La ligne de commande doit afficher le message d'erreur suivant :
Ensuite, ajoutez un schéma personnalisé.

Ajouter un schéma personnalisé au composant autonome

L'élément df-messanger n'est pas un élément connu. Il s'agit d'un composant Web personnalisé. Le message d'erreur du framework Angular suggère que vous devez ajouter un CUSTOM_ELEMENTS_SCHEMA aux deux composants autonomes pour supprimer le message.

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au fichier feedback-and-chat.component.ts.

Importez le schéma CUSTOM_ELEMENTS_SCHEMA.

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

Ajoutez CUSTOM_ELEMENTS_SCHEMA à la liste des schémas.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Le fichier feedback-and-chat.component.ts doit correspondre à l'exemple de code suivant.

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

...

Le composant Web df-messanger nécessite un code JavaScript qui ne doit être injecté que lorsque le composant de commentaires et de chat est chargé. Pour ce faire, nous allons ajouter le code approprié à la méthode ngOnInit(), qui chargera le script de chat nécessaire pour activer l'élément .

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

Enregistrez le fichier feedback-and-chat.component.ts.

Compiler et afficher la boîte de dialogue de chat mise à jour

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et exécuter l'application, puis ouvrir un serveur Web.
```
ng serve
```
Votre serveur de développement doit s'exécuter sur le port 4200.

Dans votre navigateur, procédez comme suit.

Accédez à la page suivante.
```
http://localhost:4200
```
Une icône de chat devrait s'afficher en bas de la page.
Sélectionnez l'icône et interagissez avec Jimbo.Jimbo vous fournira des informations intéressantes sur les animaux.
L'application est entièrement fonctionnelle.

9. Déployer l'application sur Google App Engine

L'application s'exécute localement sur votre machine. L'étape suivante et dernière de cet atelier de programmation consiste à le déployer sur Google App Engine.

Pour en savoir plus sur Google App Engine, consultez App Engine.

Configurer votre environnement pour Google App Engine

Si vous remplissez déjà toutes les conditions suivantes, ignorez les étapes suivantes et passez au déploiement de l'application.

créé un projet Cloud avec App Engine ;
Activation de l'API Cloud Build
Avez installé Google Cloud CLI

Effectuez les actions suivantes.

Connectez-vous à votre compte Gmail ou Google Workspace. Si vous ne possédez pas encore de compte Google, créez-en un.
Activez la facturation dans la console Cloud pour pouvoir utiliser les ressources et les API Cloud. Pour en savoir plus, consultez Créer, modifier ou fermer un compte de facturation Cloud en libre-service.
Créez un projet Google Cloud pour stocker les ressources de votre application App Engine et d'autres ressources Google Cloud. Pour en savoir plus, consultez la section Créer et gérer des projets.
Activez l'API Cloud Build dans la console Cloud. Pour en savoir plus, consultez Activer l'accès à l'API.
Installer la Google Cloud CLI et l'outil de ligne de commande gcloud Pour en savoir plus, consultez Installer gcloud CLI.
Initialisez Google Cloud CLI et assurez-vous que gcloud est configuré pour utiliser le projet Google Cloud sur lequel vous souhaitez effectuer le déploiement. Pour en savoir plus, consultez Initialiser gcloud CLI.

Créer votre application autonome

Dans une fenêtre de ligne de commande, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande Angular suivante pour compiler et créer une version prête à la production de l'application.
```
ng build
```

La version prête à la production de l'application est créée dans le sous-répertoire dist de votre répertoire de projet photo-gallery-app.

10. Déployer votre application à l'aide du framework Express.js

L'exemple de code de cet atelier de programmation utilise le framework Express.js pour gérer les requêtes HTTP. Vous pouvez utiliser le framework Web de votre choix.

Installer le framework Express.js

Dans une fenêtre de ligne de commande, procédez comme suit.

Saisissez la commande suivante pour installer le framework Express.js.
```
npm install express --save
```

Configurer votre serveur Web

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Créez un fichier server.js.

Copiez et collez le code suivant.

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

Enregistrez le fichier server.js.

Associer votre serveur Web

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Ouvrez le fichier package.json.

Modifiez la commande de démarrage pour exécuter le nœud dans le fichier 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"
  },

L'attribut start correspond au point d'entrée de votre application.

Enregistrez le fichier package.json.

Configurer App Engine

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Créez un fichier app.yaml.
Copiez et collez le code suivant.
```
runtime: nodejs16
service: default
```
Les informations du fichier app.yaml spécifient la configuration d'App Engine. Il vous suffit de spécifier l'environnement d'exécution et le service.
Enregistrez le fichier app.yaml.

Mettre à jour la liste des éléments à ignorer gcloud

Pour vous assurer que votre répertoire node_modules n'est pas importé, créez un fichier .gcloudignore. Les fichiers listés dans votre fichier .gcloudignore ne sont pas importés.

Dans votre éditeur de code, effectuez les actions suivantes.

Accédez au nouveau répertoire de projet photo-gallery-app.
Créez un fichier .gcloudignore.

Copiez et collez le code suivant.

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

Enregistrez le fichier .gcloudignore.

Initialiser votre application

Avant de déployer l'application, initialisez-la avec votre projet et choisissez une région associée.

Dans une fenêtre de ligne de commande, procédez comme suit.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande suivante pour initialiser votre application.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
Lorsque vous y êtes invité, choisissez la région dans laquelle vous souhaitez placer votre application App Engine.

Déployer votre application

Dans une fenêtre de ligne de commande, procédez comme suit.

Accédez au nouveau répertoire de projet photo-gallery-app.
Saisissez la commande suivante pour déployer votre application.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
À l'invite, confirmez l'action.Une fois la commande de déploiement gcloud terminée, une URL s'affiche pour accéder à votre application.
Saisissez la commande suivante pour ouvrir un nouvel onglet dans votre navigateur.
```
gcloud app browse
```

11. Félicitations

Félicitations, Vous avez créé un exemple de galerie de photos à l'aide d'Angular v14 et l'avez déployé avec succès sur App Engine.

Vous avez expérimenté la fonctionnalité de composant autonome et le chargement paresseux. Vous avez créé une fonctionnalité d'envoi de messages basée sur un formulaire pour envoyer des commentaires. Vous avez également ajouté une discussion avec un agent virtuel Dialogflow CX à l'aide de Dialogflow Messenger. Bravo !

Étapes suivantes

Maintenant que vous avez terminé l'application de base, améliorez-la en suivant les idées ci-dessous.

Le formulaire n'envoie pas de commentaires. Refactorisez-le pour ajouter la logique métier permettant d'envoyer un e-mail.
Dans un scénario réel, vous devez valider l'entrée utilisateur et inclure un Captcha ou un mécanisme similaire pour éviter le spam par des robots.
Créer un agent et apprendre à concevoir des flux de conversation dans Dialogflow CX

Continuez à expérimenter le framework Angular et amusez-vous.

Nettoyer et supprimer votre projet Cloud

Vous pouvez conserver votre projet Cloud ou le supprimer pour arrêter la facturation de toutes les ressources qu'il utilise.

Dans votre navigateur, effectuez les actions suivantes.

Connectez-vous à votre compte Gmail ou Google Workspace.
Dans la console Google Cloud, sélectionnez le bouton Paramètres IAM et administration.
Sur la page IAM et administration, sélectionnez l'onglet Gérer les ressources.
Sur la page Gérer les ressources, accédez au projet que vous souhaitez supprimer, puis sélectionnez-le. Cliquez sur le bouton Supprimer pour ouvrir une boîte de dialogue.
Dans la boîte de dialogue, saisissez l'ID du projet. Sélectionnez le bouton Arrêter pour supprimer le projet.

Version du nœud	Compatible avec Angular
14.15 ou version ultérieure	Compatible
16.10 ou version ultérieure	Compatible
18.1.0	Non compatible