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 photo de la faune sauvage à l'aide d'Angular v14. La demande remplie affichera un ensemble de photos, ainsi qu'un formulaire Envoyer un message pour contacter le photographe et une fenêtre de chat pour en savoir plus sur les animaux figurant sur les photos.

Vous créez tout dans votre application à l'aide d'Angular v14 et de la nouvelle fonctionnalité de composants autonomes.

Toutes les références au framework Angular et à Angular CLI reflètent Angular v14. Les composants autonomes sont une fonctionnalité en preview d'Angular v14. Vous devez donc créer une toute nouvelle application à l'aide d'Angular v14. Les composants autonomes offrent un moyen simplifié de créer des applications Angular. Les composants, directives et pipes autonomes visent à simplifier l'expérience de création en réduisant le besoin de NgModules. Les composants autonomes peuvent tirer pleinement parti de l'écosystème existant des bibliothèques Angular.

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

Demande envoyée

Objectifs de l'atelier

  • Utiliser l'interface de ligne de commande Angular pour créer un projet
  • Utiliser des composants autonomes Angular pour simplifier le développement d'applications Angular
  • Comment créer un composant autonome, c'est-à-dire comment créer l'UI et ajouter une logique métier
  • Amorcer 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. Découvrez comment créer un élément.
    • CSS et moins. Découvrez comment utiliser un sélecteur CSS et créer un fichier de définition de style.
    • TypeScript ou JavaScript. Comment interagir avec la structure DOM.
    • Git et GitHub Comment dupliquer et cloner un dépôt.
    • Interface de ligne de commande, telle que bash ou zsh. Comment parcourir les répertoires et exécuter des commandes.

2. Configuration de l'environnement

Configurer votre environnement local

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

  • Une version LTS active ou LTS de maintenance de Node.js. Permet d'installer le framework Angular et l'interface de ligne de commande 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. Utilisé pour ouvrir et modifier des fichiers.Visual Studio Code ou un autre éditeur de code de votre choix.

Installer la CLI Angular

Une fois que vous avez configuré toutes les dépendances, exécutez la commande npm suivante pour installer l'interface de ligne de commande 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 s'exécute correctement, vous devriez recevoir un message semblable à celui de la capture d'écran suivante.

Sortie du terminal de la version Angular

Code source et images

Vous allez créer l'application de A à Z, et cet atelier de programmation étape par étape vous y aidera. N'oubliez pas que le dépôt GitHub contient le code final. Si vous êtes bloqué, examinez le code final et les images affichées sur la page de la galerie.

Pour télécharger le code source :

  1. Dans votre navigateur, accédez à la page suivante.
    https://github.com/angular/codelabs/tree/standalone-components
  2. Dans une fenêtre de ligne de commande, dupliquez et clonez le dépôt.

À l'étape suivante, créez votre application Galerie de photos.

3. Créer une application

Pour créer l'application de démarrage initiale, effectuez les actions suivantes.

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

Créer un projet

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

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

Une fois l'interface de ligne de commande Angular terminée, vous disposez d'un nouvel espace de travail Angular et d'une application simple prête à l'emploi.

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.

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

Une fois le module d'application supprimé, votre application ne comporte plus aucun module. 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.

  1. Accédez au répertoire src/app dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier app.component.ts.
  3. Ajoutez le paramètre et la valeur suivants à votre liste de décorateurs.
    standalone: true
    Le fichier app.component.ts doit correspondre à 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';
}
  4. Enregistrez le fichier app.component.ts.

Compiler votre nouvelle application autonome

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

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

Votre application ne devrait pas pouvoir être compilée. Ne vous inquiétez pas, il vous suffit de corriger encore 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, effectuez les actions suivantes.

  1. Accédez au répertoire src dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier main.ts.
  3. 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';
  4. 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.

  1. Accédez au répertoire src dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier main.ts.
  3. Importez le composant bootstrapApplication à partir du service @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Ajoutez le code suivant pour amorcer votre application.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. 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 le routeur et les modules courants

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

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

  1. Accédez au répertoire src/app dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier app.component.ts.
  3. Importez les modules requis dans le composant.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Ajoutez les importations dans le 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';
}
  5. Enregistrez le fichier app.component.ts.

Compiler et exécuter votre nouvelle application autonome

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Saisissez la commande Angular suivante pour compiler et exécuter l'application, puis ouvrez 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 réussir. Bravo ! Vous avez créé une application Angular qui s'exécute sans module et avec un composant autonome.

  1. Ensuite, vous allez embellir votre application pour afficher des photos.

4. Afficher les photos

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

Les composants sont les blocs de construction de base des applications Angular. Les composants comportent 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 téléchargée précédemment depuis GitHub.

  1. Accédez au répertoire src/assets du projet GitHub.
  2. Copiez et collez les fichiers dans le répertoire analogue de votre répertoire de 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.

  1. Accédez au répertoire src/app dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier app.component.html.
  3. Supprimez tout le code HTML existant.
  4. 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
  5. Enregistrez le fichier app.component.html.

Créer le fichier de définition de style

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

  1. Accédez au répertoire src dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier styles.css.
  3. 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%;
  }
}
  4. Enregistrez le fichier styles.css.

Mettre à jour le fichier d'index

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

  1. Accédez au répertoire src dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier index.html.
  3. Ajoutez la police Raleway pour que toutes les pages puissent l'hériter.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Enregistrez le fichier index.html.
  5. 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.
  6. 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 offrent un moyen simplifié de créer des applications Angular 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, vous allez à nouveau utiliser l'interface de ligne de commande Angular.

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. 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 parties de la commande.

    Partie

    Détails

    ng

    Définit toutes les commandes de l'interface de ligne de commande 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. Vous n'avez donc qu'à l'importer comme s'il s'agissait d'un module.

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

  1. Accédez au répertoire src/app dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier app.component.ts.
  3. Importez le nouveau composant autonome.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. 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';
}
  5. Enregistrez le fichier app.component.ts.

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

Passez d'un paradigme de chargement différé à un paradigme de chargement différé, 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 différé, 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 un bouton à l'UI qui n'active le composant que lorsqu'un utilisateur le sélectionne.

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

  1. Accédez au répertoire src/app dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier app.component.html.
  3. 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>
  4. 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>
  5. Enregistrez le fichier app.component.html.

Configurer vos routes

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

  1. Accédez au répertoire src dans le nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier main.ts.
  3. 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';
  4. 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),
  }
]
  5. 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));
  6. 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 d'examiner comment le framework Angular charge le composant de manière différée.

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

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

Dans votre navigateur, effectuez les actions suivantes.

  1. Accédez à la page suivante.
    http://localhost:4200
  2. Ouvrez les outils pour les développeurs Chrome et sélectionnez l'onglet Réseau.
  3. Actualisez la page pour afficher plusieurs fichiers, mais pas le composant feedback-and-chat.Votre écran devrait ressembler à la capture d'écran suivante.Capture d&#39;écran de l&#39;application avec le panneau des outils pour les développeurs Chrome ouvert
  4. Sélectionnez le bouton En savoir plus sur ces gars 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'à la fin pour vérifier que le composant a été chargé. Votre écran devrait ressembler à la capture d'écran ci-dessous.Capture d&#39;écran de l&#39;application avec le panneau des outils de développement Chrome ouvert montrant le composant à chargement différé

6. Ajouter l'UI pour le formulaire

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

Pour prendre en charge l'UI, ajoutez un attribut formControlName dans un élément input qui se lie à chaque contrôle de formulaire contactForm associé à chacun des trois champs de saisie de l'UI.

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.

  1. Accédez au fichier feedback-and-chat.component.html.
  2. Supprimez le code HTML existant.
  3. Copiez et collez le code HTML de l'exemple de code 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>
  4. 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.

  1. Accédez au fichier feedback-and-chat.component.css.
  2. 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;
  }
}
  3. Enregistrez le fichier feedback-and-chat.component.css.

Compiler la mise à jour de l'UI pour le formulaire

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Saisissez la commande Angular suivante pour compiler et exécuter l'application, puis ouvrez un serveur Web.
    ng serve
    Votre application ne devrait pas pouvoir être compilée. Ne vous inquiétez pas, vous devez associer le formulaire.
  3. Pour l'instant, examinez 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 submit émis par l'élément form. La directive FormGroup émet ensuite un événement ngSubmit auquel vous pouvez associer 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.
  4. Vous allez maintenant associer le formulaire.

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

L'UI du formulaire Envoyer des commentaires est complète, mais il manque l'interaction. Le traitement des saisies utilisateur avec des formulaires est la pierre angulaire de nombreuses applications courantes.

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

  1. Analysez l'entrée utilisateur à partir de la structure DOM affichée associée au composant.
  2. Validez les saisies des utilisateurs, y compris un captcha ou un mécanisme similaire pour éviter le spam des robots.
  3. Envoyez un e-mail à une adresse e-mail désignée.
  4. Affichez un message convivial à l'utilisateur.

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

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

Mettez vos compétences à l'épreuve et implémentez 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 de 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.

  1. Accédez au fichier feedback-and-chat.component.ts.
  2. 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 contrôles. À l'étape suivante, nous allons utiliser la fonction inject. Nous devons donc l'importer également depuis @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Importez le module ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Supprimez le constructeur suivant.
    constructor() { }
  5. 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 permettant de recueillir le nom, l'adresse e-mail et les commentaires d'un utilisateur.
  6. 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 saisies de l'utilisateur, utilisez la méthode reset pour réinitialiser le formulaire et affichez un message de réussite convivial.
  7. 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();
  }
}
  8. Enregistrez le fichier feedback-and-chat.component.ts.

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

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

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

Dans votre navigateur, effectuez les actions suivantes.

  1. Accédez à la page suivante.
    http://localhost:4200
  2. Ouvrez les outils pour les développeurs Chrome et sélectionnez l'onglet Console.
  3. Saisissez des valeurs dans les zones de texte Nom complet, Adresse e-mail et Commentaires.
  4. Sélectionnez le bouton Envoyer.Un message de réussite devrait s'afficher sur la page.
  5. Vérifiez que les valeurs s'affichent dans l'onglet Console.Votre écran doit correspondre à la capture d'écran suivante.Fenêtre de navigateur avec la console affichant les données JSON saisies dans le formulaireVous avez implémenté le code pour ajouter un formulaire send message à l'UI du composant et analyser les saisies de l'utilisateur.
  6. Ensuite, vous allez intégrer une boîte de dialogue pour permettre aux visiteurs de l'application de discuter avec Jimbo. Jimbo est un koala qui vous apprend des choses intéressantes sur la faune sauvage.

8. Ajouter une boîte de dialogue de chat

Mettez à profit votre expérience avec les interfaces conversationnelles, comme 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 à un 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 apparaît en bas à droite de l'écran et déclenche l'intention d'accueil par défaut de l'agent. Le bot salue l'utilisateur et entame une conversation.

L'implémentation suivante partage des informations amusantes sur la faune avec 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 le site Web de l'entreprise.

Ajouter Dialogflow Messenger à votre composant

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

  1. Accédez au fichier feedback-and-chat.component.ts.
  2. 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 de l'élément df-messenger lorsque vous sélectionnez l'intégration Dialogflow Messenger.

    Attribut

    Détails

    agent-id

    Valeur préremplie. Spécifie l'identifiant unique de l'agent Dialogflow.

    chat-title

    Valeur préremplie. Spécifie le contenu à afficher en haut de la boîte de dialogue de chat. Il est initialement prérempli avec le nom de votre agent, mais vous devez le personnaliser.

    df-cx

    Indique que l'interaction doit s'effectuer 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 pour le premier intent.

    position

    Spécifie la région dans laquelle vous déployez l'agent.

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Saisissez la commande Angular suivante pour compiler l'application.
    ng serve
    Votre application ne devrait pas pouvoir être compilée. La ligne de commande doit afficher le message d'erreur suivant :Message d&#39;erreur df-messenger
  3. 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.

  1. Accédez au fichier feedback-and-chat.component.ts.
  2. Importez le schéma CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. 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]
})

...
  4. 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 correspondant à la méthode ngOnInit() qui chargera le script de chat nécessaire à l'activation de 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);
}
  5. 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.

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

Dans votre navigateur, effectuez les actions suivantes.

  1. Accédez à la page suivante.
    http://localhost:4200
    Une icône de chat devrait s'afficher en bas de la page.
  2. Sélectionnez l'icône et interagissez avec Jimbo.Il vous donnera des anecdotes intéressantes sur les animaux.Application affichant une fenêtre de chat avec un bot Messenger qui répond
  3. L'application est entièrement fonctionnelle.

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

L'application s'exécute localement sur votre ordinateur. La prochaine et dernière étape de cet atelier de programmation consiste à déployer l'application 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 déployez l'application.

  • Création d'un projet Cloud avec App Engine
  • Activer l'API Cloud Build
  • Vous avez installé la Google Cloud CLI.

Effectuez les actions suivantes.

  1. Connectez-vous à votre compte Gmail ou Google Workspace. Si vous n'en avez pas, créez un compte Google.
  2. 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.
  3. 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 Créer et gérer des projets.
  4. Activez l'API Cloud Build dans la console Cloud. Pour en savoir plus, consultez Activer l'accès à l'API.
  5. Installez Google Cloud CLI et l'outil de ligne de commande gcloud. Pour en savoir plus, consultez Installer la gcloud CLI.
  6. 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 la gcloud CLI.

Créer votre application autonome

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

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

La version de production de l'application est créée dans le sous-répertoire dist du 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, effectuez l'action suivante.

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Créez un fichier server.js.
  3. 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}`);
});
  4. Enregistrez le fichier server.js.

Associer votre serveur Web

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Ouvrez le fichier package.json.
  3. 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 est le point d'entrée de votre application.
  4. Enregistrez le fichier package.json.

Configurer App Engine

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

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

Mettre à jour la liste des éléments à ignorer de 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.

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Créez un fichier .gcloudignore.
  3. 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/
  4. 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, effectuez les actions suivantes.

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Saisissez la commande suivante pour initialiser votre application.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. À l'invite, choisissez la région dans laquelle vous souhaitez localiser votre application App Engine.

Déployer votre application

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

  1. Accédez au nouveau répertoire du projet photo-gallery-app.
  2. Saisissez la commande suivante pour déployer votre application.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. À l'invite, confirmez l'action.Une fois la commande de déploiement gcloud exécutée, une URL permettant d'accéder à votre application s'affiche.
  4. Saisissez la commande suivante pour ouvrir un nouvel onglet dans votre navigateur.
    gcloud app browse
    Sortie de la console de gcloud app deploy et saisie de gcloud app browse

11. Félicitations

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

Vous avez expérimenté la fonctionnalité de composant autonome et le chargement différé. Vous avez créé une fonctionnalité d'envoi de messages basée sur un formulaire pour recueillir des commentaires. Vous avez également ajouté une boîte de dialogue 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 utilisant les idées suivantes.

  • 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 des robots.
  • Créer un agent et apprendre à concevoir des flux de conversation dans Dialogflow CX

Continuez à expérimenter avec 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 utilisées dans le projet.

Dans votre navigateur, effectuez les actions suivantes.

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