Introduzione ai componenti autonomi

1. Introduzione

Cosa creerai

In questo codelab, creerai un'applicazione galleria fotografica di animali selvatici utilizzando Angular v14. L'applicazione completata mostrerà una serie di foto e includerà anche un modulo Invia messaggio per contattare il fotografo e una finestra di chat per scoprire curiosità sugli animali ritratti nelle foto.

Crei tutto nella tua applicazione utilizzando Angular v14 e la nuova funzionalità dei componenti autonomi.

Tutti i riferimenti al framework Angular e alla CLI Angular riflettono Angular v14. I componenti autonomi sono una funzionalità di anteprima di Angular v14, quindi devi creare una nuova applicazione utilizzando Angular v14. I componenti autonomi offrono un modo semplificato per creare applicazioni Angular. I componenti autonomi, le direttive autonome e le pipe autonome mirano a semplificare l'esperienza di creazione riducendo la necessità di NgModules. I componenti autonomi possono sfruttare appieno l'ecosistema esistente di librerie Angular.

Questa è l'applicazione che stai creando oggi.

Richiesta completata

Cosa imparerai a fare

  • Come utilizzare l'interfaccia a riga di comando di Angular per creare la struttura di un nuovo progetto
  • Come utilizzare i componenti autonomi di Angular per semplificare lo sviluppo di app Angular
  • Come creare un componente autonomo, ovvero come creare la UI e aggiungere una logica di business
  • Come avviare un'applicazione utilizzando un componente autonomo
  • Come caricare in modalità differita un componente autonomo
  • Come incorporare una finestra di dialogo di chat in un componente autonomo utilizzando Dialogflow Messenger
  • Come eseguire il deployment di un'applicazione Angular in Google Cloud App Engine utilizzando Google Cloud CLI (gcloud)

Che cosa ti serve

  • Un account Gmail o Google Workspace
  • Conoscenza di base dei seguenti argomenti
    • HTML. Come creare un elemento.
    • CSS e meno. Come utilizzare un selettore CSS e creare un file di definizione dello stile.
    • TypeScript o JavaScript. Come interagire con la struttura DOM.
    • git e GitHub. Come creare un fork e clonare un repository.
    • Interfaccia a riga di comando, ad esempio bash o zsh. Come navigare nelle directory ed eseguire i comandi.

2. Configurazione dell'ambiente

Configura l'ambiente locale

Per completare questo codelab, devi installare il seguente software sul tuo computer locale.

  • Una versione LTS attiva o LTS di manutenzione di Node.js. Utilizzato per installare il framework Angular e Angular CLI.

    Versione nodo

    Supportato da Angular

    14.15 o versioni successive

    Supportato

    16.10 o versioni successive

    Supportato

    18.1.0

    Non supportata

    Per verificare la versione di Node.js sul computer locale, esegui il seguente comando node da una finestra della riga di comando.
    node -v
  • Un editor di codice o un IDE. Utilizzato per aprire e modificare i file.Visual Studio Code o un altro editor di codice di tua scelta.

Installa l'interfaccia a riga di comando Angular

Dopo aver configurato tutte le dipendenze, esegui il comando npm seguente per installare Angular CLI da una finestra della riga di comando.

npm install --global @angular/cli

Per verificare che la configurazione sia corretta, esegui il seguente comando Angular da una riga di comando.

ng version

Se il comando Angular viene completato correttamente, dovresti ricevere un messaggio simile a quello della schermata seguente.

Output del terminale della versione di Angular

Codice sorgente e immagini

Crei l'intera applicazione da zero e questo codelab passo passo ti aiuta. Tieni presente che il repository GitHub contiene il codice finale. Se non riesci ad andare avanti, rivedi il codice finale e le immagini visualizzate nella pagina della galleria.

Per scaricare il codice sorgente.

  1. Nel browser, vai alla pagina seguente.
    https://github.com/angular/codelabs/tree/standalone-components
  2. In una finestra della riga di comando, esegui il fork e clona il repository.

Nel passaggio successivo, crea l'applicazione Galleria fotografica.

3. Crea una nuova applicazione

Per creare l'applicazione iniziale di base, completa le seguenti azioni.

Utilizza la CLI di Angular per creare un nuovo spazio di lavoro. Per scoprire di più su Angular CLI e sul framework Angular, visita angular.io.

Crea un nuovo progetto

In una finestra della riga di comando, completa le seguenti azioni.

  1. Inserisci il seguente comando Angular per creare un nuovo progetto Angular denominato photo-gallery-app.
    ng new photo-gallery-app
  2. A ogni richiesta, accetta la scelta predefinita.Il framework Angular installa i pacchetti e le dipendenze richiesti. La procedura potrebbe richiedere alcuni minuti.

Al termine dell'esecuzione di Angular CLI, avrai un nuovo spazio di lavoro Angular e una semplice applicazione pronta per l'esecuzione.

La nuova applicazione è strutturata come un'applicazione Angular standard. NgModule nella nuova applicazione è ridondante per questo codelab.

Rimuovere il modulo dell'applicazione

Per rimuovere il modulo dell'applicazione, completa la seguente azione.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Elimina il file app.module.ts.

Dopo aver eliminato il modulo dell'applicazione, non avrai più moduli nell'applicazione. La tua applicazione ha un solo componente, ovvero il componente dell'applicazione. Devi dichiarare il componente come autonomo.

Dichiarare il componente autonomo

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Apri il file app.component.ts.
  3. Aggiungi il seguente parametro e valore all'elenco dei decoratori.
    standalone: true
    Il file app.component.ts dovrebbe corrispondere quasi esattamente all'esempio di codice riportato di seguito.
    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. Salva il file app.component.ts.

Compila la nuova applicazione autonoma

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app
  2. Inserisci il seguente comando Angular per compilare la nuova applicazione.
    ng serve

La compilazione dell'applicazione non dovrebbe riuscire. Non preoccuparti, devi solo risolvere un paio di problemi.

Utilizzare l'API bootstrapApplication

Per consentire l'esecuzione dell'applicazione senza un NgModule, devi utilizzare un componente autonomo come componente principale utilizzando l'API bootstrapApplication.

Rimuovi i riferimenti al modulo dell'applicazione

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src nella nuova directory del progetto photo-gallery-app
  2. Apri il file main.ts.
  3. Rimuovi il seguente codice di importazione, poiché non hai più un modulo dell'applicazione.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Rimuovi il seguente codice di bootstrap, poiché non hai più un modulo dell'applicazione.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    Il file main.ts deve corrispondere al seguente esempio di codice.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Aggiungere il componente bootstrapApplication

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src nella nuova directory del progetto photo-gallery-app.
  2. Apri il file main.ts.
  3. Importa il componente bootstrapApplication dal servizio @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Aggiungi il seguente codice per eseguire il bootstrap dell'applicazione.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Importa il componente e le librerie richieste.
    import { AppComponent } from './app/app.component';
    Il file main.ts deve corrispondere al seguente esempio di codice.
    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));

Aggiungere il router e i moduli comuni

Per utilizzare il router e altre funzionalità comuni dei moduli, devi importare direttamente ogni modulo nel componente.

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Apri il file app.component.ts.
  3. Importa i moduli richiesti nel componente.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Aggiungi le importazioni nel componente.
    imports: [CommonModule, RouterModule],
    Il file app.component.ts deve corrispondere al seguente esempio di codice.
    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. Salva il file app.component.ts.

Compila ed esegui la nuova applicazione autonoma

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare ed eseguire l'applicazione e aprire un server web. Potresti dover chiudere l'IDE prima di eseguire l'applicazione per rimuovere eventuali errori di compilazione.
    ng serve

Il server di sviluppo deve essere eseguito sulla porta 4200. Tutti gli errori precedenti devono essere scomparsi e la compilazione deve essere riuscita. Bene. Hai creato un'applicazione Angular che viene eseguita senza un modulo e con un componente autonomo.

  1. A questo punto, abbellirai l'applicazione per visualizzare alcune foto.

4. Mostra le foto

La nuova applicazione è progettata per essere una galleria fotografica e dovrebbe mostrare alcune foto.

I componenti sono gli elementi costitutivi principali delle app Angular. I componenti hanno tre aspetti principali.

  • Un file HTML per il modello
  • Un file CSS per gli stili
  • Un file TypeScript per il comportamento dell'app

Spostare le foto nell'applicazione

Le immagini sono fornite nell'applicazione che hai scaricato in precedenza da GitHub.

  1. Vai alla directory src/assets del progetto GitHub.
  2. Copia e incolla i file nella directory analogue della directory del progetto photo-gallery-app.

Crea il modello HTML

Il file app.component.html è il file modello HTML associato al componente AppComponent.

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Apri il file app.component.html.
  3. Elimina tutto l'HTML esistente.
  4. Copia e incolla il codice HTML dal seguente esempio di codice.
    <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. Salva il file app.component.html.

Crea il file di definizione dello stile

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src nella nuova directory del progetto photo-gallery-app.
  2. Apri il file styles.css.
  3. Copia e incolla il CSS dall'esempio di codice riportato di seguito.
    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. Salva il file styles.css

Aggiorna il file indice

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src nella nuova directory del progetto photo-gallery-app.
  2. Apri il file index.html.
  3. Aggiungi il carattere Raleway per consentire a tutte le pagine di ereditarlo.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Salva il file index.html.
  5. Salva il codice e controlla il browser. Con il server di sviluppo in esecuzione, le modifiche vengono applicate nel browser quando salvi.
  6. Successivamente, creerai un nuovo componente autonomo per inviare feedback e chattare con Jimbo. Continua questo codelab per scoprire di più su Jimbo.

5. Aggiungere un nuovo componente autonomo

Come hai visto finora, i componenti autonomi offrono un modo semplificato per creare applicazioni Angular riducendo la necessità di moduli NgModules. Nelle sezioni seguenti, creerai un nuovo componente autonomo che consente all'utente di inviare feedback e chattare con un agente virtuale.

Crea un nuovo componente autonomo

Per creare questo nuovo componente, utilizza di nuovo la CLI Angular.

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per creare un nuovo componente denominato feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    La tabella seguente descrive le parti del comando.

    Parte

    Dettagli

    ng

    Definisce tutti i comandi dell'interfaccia a riga di comando Angular per il framework Angular

    generate component

    Crea la struttura di base per un nuovo componente

    feedback-and-chat

    Il nome del componente.

    --standalone

    Indica al framework Angular di creare un componente autonomo

Importa il nuovo componente autonomo

Per utilizzare il nuovo componente autonomo, devi prima aggiungerlo all'array imports nel file app.components.ts.

Si tratta di un componente autonomo, quindi importalo come se fosse un modulo.

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Apri il file app.component.ts.
  3. Importa il nuovo componente autonomo.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Aggiorna le importazioni nel componente.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    Il file app.component.ts deve corrispondere al seguente esempio di codice.
    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. Salva il file app.component.ts.

Caricare il componente in modo lento

Passa da un paradigma di caricamento eager a un paradigma di caricamento lazy, in cui il codice non viene inviato al client finché non ne hai bisogno. Il caricamento lento è un ottimo approccio per ridurre il tempo di caricamento di una pagina, migliorare le prestazioni e l'esperienza utente. Il router gestisce il caricamento differito, che è lo stesso per un ngModule e un componente autonomo.

Aggiorna il modello HTML associato al componente dell'applicazione

Per caricare in modalità differita il componente autonomo, aggiungi un pulsante all'interfaccia utente che attiva il componente solo quando un utente lo seleziona.

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src/app nella nuova directory del progetto photo-gallery-app.
  2. Apri il file app.component.html.
  3. Scorri fino alla fine del file e aggiungi il seguente esempio di codice prima di chiudere l'elemento article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. Il file app.component.html deve corrispondere al seguente esempio di codice.
    <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. Salva il file app.component.html.

Configurare le route

In un editor di codice, completa le seguenti azioni.

  1. Vai alla directory src nella nuova directory del progetto photo-gallery-app.
  2. Apri il file main.ts
  3. Importa il metodo provideRouter e il modulo Routes. Angular v 14.2.0 ha introdotto un nuovo metodo provideRouter che consente di configurare un insieme di route per l'applicazione.
    import { provideRouter, Routes } from '@angular/router';
  4. Copia e incolla il seguente snippet di codice tra le importazioni e l'istruzione if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Copia e incolla il seguente snippet di codice e sostituisci il metodo bootstrapApplication.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    Il file main.ts deve corrispondere al seguente esempio di codice.
    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. Salva il file main.ts.

Compila e rivedi con gli Strumenti per sviluppatori di Chrome

Utilizza gli Strumenti per sviluppatori di Chrome per esaminare il caricamento differito del componente da parte del framework Angular.

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare ed eseguire l'applicazione e aprire un server web.
    ng serve
    Il server di sviluppo deve essere eseguito sulla porta 4200.

Nel browser, completa le seguenti azioni.

  1. Vai alla pagina successiva.
    http://localhost:4200
  2. Apri gli strumenti per sviluppatori di Chrome e scegli la scheda Rete.
  3. Aggiorna la pagina per visualizzare diversi file, ma non il componente feedback-and-chat.La schermata dovrebbe corrispondere alla seguente acquisizione dello schermo.Screenshot dell&#39;app con il riquadro Chrome DevTools aperto
  4. Seleziona il pulsante Scopri di più su questi ragazzi per passare al componente autonomo.Il log deve indicare che il componente viene caricato solo quando raggiungi il router completo. Scorri fino alla fine dell'elenco per verificare che il componente sia stato caricato. La schermata dovrebbe corrispondere alla seguente acquisizione.Screenshot dell&#39;app con il riquadro Chrome DevTools aperto che mostra il componente caricato in modalità differita

6. Aggiungere l'interfaccia utente per il modulo

Il modulo Invia feedback ha tre campi della UI di input e un pulsante in basso. I tre campi dell'interfaccia utente di input sono nome completo, indirizzo email del mittente e commenti.

Per supportare l'UI, aggiungi un attributo formControlName in un elemento input che si associa a ogni controllo modulo contactForm associato a ciascuno dei tre campi dell'UI di input.

Aggiungere il modulo al modello HTML

Aggiungi un modulo all'interfaccia utente per consentire a un utente di inviare feedback.

Nell'editor di codice, completa le seguenti azioni.

  1. Vai al file feedback-and-chat.component.html.
  2. Rimuovi l'HTML esistente.
  3. Copia e incolla il codice HTML dal seguente esempio di codice.
    <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. Salva il file feedback-and-chat.component.html.

Aggiorna il file di stili per il modulo

Nell'editor di codice, completa le seguenti azioni.

  1. Vai al file feedback-and-chat.component.css.
  2. Copia e incolla il CSS dall'esempio di codice riportato di seguito.
    /*   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. Salva il file feedback-and-chat.component.css.

Compila l'aggiornamento dell'interfaccia utente per il modulo

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare ed eseguire l'applicazione e aprire un server web.
    ng serve
    La compilazione dell'applicazione dovrebbe non riuscire. Non preoccuparti, devi associare il modulo.
  3. Per il momento, esamina i seguenti elementi.
    • Utilizzi l'associazione di proprietà formGroup per associare contactForm all'elemento form e l'associazione di eventi ngSubmit
    • La direttiva FormGroup rimane in ascolto dell'evento submit emesso dall'elemento form. Quindi, la direttiva FormGroup genera un evento ngSubmit che puoi associare alla funzione di callback onSubmit.
    • In un passaggio successivo, implementerai la funzione di callback onSubmit nel file feedback-and-chat.component.ts.
  4. Ora devi associare il modulo.

7. Aggiungere la gestione degli eventi al modulo

L'interfaccia utente del modulo Invia feedback è completa, ma manca l'interazione. La gestione dell'input utente con i moduli è la base di molte applicazioni comuni.

In uno scenario reale, devi implementare la logica di business per completare le seguenti azioni.

  1. Analizza l'input dell'utente dalla struttura DOM sottoposta a rendering associata al componente.
  2. Convalida l'input dell'utente, che include un captcha o un meccanismo simile per evitare lo spam dei bot.
  3. Invia un'email a un indirizzo email designato.
  4. Mostra un messaggio amichevole all'utente.

In questo codelab implementerai solo le seguenti azioni.

  1. Analizza l'input dell'utente dalla struttura DOM sottoposta a rendering associata al componente.
  2. Mostra un messaggio amichevole all'utente.

Metti alla prova le tue abilità e implementa tutte e quattro le azioni.

Aggiungi il modello del modulo di invio del messaggio al componente

Crea e aggiungi il modello del modulo di invio feedback nella classe del componente. Il modello del modulo determina lo stato del modulo. Il servizio FormBuilder fornisce metodi pratici per creare un controllo UI.

Nell'editor di codice, completa le seguenti azioni.

  1. Vai al file feedback-and-chat.component.ts.
  2. Importa il servizio FormBuilder e il modulo ReactiveModule dal pacchetto @angular/forms. Questo servizio fornisce metodi pratici per generare controlli. Nel passaggio successivo utilizzeremo la funzione inject, quindi dobbiamo importare anche questa da @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Importa il modulo ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Rimuovi il seguente costruttore.
    constructor() { }
  5. Inserisci il servizio FormBuilder tramite la funzione inject appena sotto la firma della classe.
    private formBuilder = inject(FormBuilder);
    Utilizza il metodo group del servizio FormBuilder per creare un modello di modulo per raccogliere il nome, l'indirizzo email e i commenti di un utente.
  6. Crea la nuova proprietà contactForm e utilizza il metodo group per impostarla su un modello di modulo.Il modello di modulo contiene i campi name, email e comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Definisci un metodo onSubmit per gestire il modulo.In uno scenario reale, il metodo onSubmit consente all'utente di inviare un messaggio di feedback al fotografo utilizzando un messaggio email inviato a un indirizzo email designato.In questo codelab, visualizzi gli input dell'utente, utilizzi il metodo reset per reimpostare il modulo e visualizzi un messaggio di successo intuitivo.
  7. Aggiungi il nuovo metodo onSubmit e imposta la variabile showMsg su true dopo averla inizializzata.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    Il file feedback-and-chat.component.ts deve corrispondere al seguente esempio di codice.
    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. Salva il file feedback-and-chat.component.ts.

Compila e visualizza il modello del modulo di invio feedback

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare ed eseguire l'applicazione e aprire un server web.
    ng serve
  3. Il server di sviluppo deve essere eseguito sulla porta 4200.

Nel browser, completa le seguenti azioni.

  1. Vai alla pagina successiva.
    http://localhost:4200
  2. Apri gli strumenti per sviluppatori di Chrome e scegli la scheda Console.
  3. Inserisci i valori nelle caselle di testo Nome completo, Email e Commenti.
  4. Seleziona il pulsante Invia.Sulla pagina dovrebbe essere visualizzato un messaggio di operazione riuscita.
  5. Verifica che i valori vengano visualizzati nella scheda Console.La schermata dovrebbe corrispondere alla seguente acquisizione dello schermo.Finestra del browser con la console che mostra i dati JSON inseriti nel moduloHai implementato correttamente il codice per aggiungere un modulo Invia messaggio all'interfaccia utente del componente e analizzare gli input dell'utente.
  6. Successivamente, incorpora una finestra di dialogo di chat per consentire ai visitatori dell'applicazione di parlare con Jimbo. Jimbo è un koala che ti insegnerà alcune curiosità sulla fauna selvatica.

8. Aggiungere una finestra di dialogo della chat

Sfrutta l'esperienza con interfacce conversazionali, come Dialogflow CX o piattaforme simili. Un agente Dialogflow CX è un agente virtuale che gestisce conversazioni simultanee con persone. Si tratta di un modulo di comprensione del linguaggio naturale che riconosce le sfumature del linguaggio umano e traduce il testo o l'audio dell'utente finale durante una conversazione in dati strutturati comprensibili dalle app e dai servizi.

È già stato creato un agente virtuale di esempio che puoi utilizzare. In questo lab devi aggiungere una finestra di dialogo di chat al componente autonomo per consentire agli utenti dell'applicazione di interagire con il bot. Per questo requisito, utilizzerai Dialogflow Messenger, un'integrazione predefinita che fornisce una finestra di dialogo personalizzabile. Quando viene aperta, la finestra di dialogo della chat viene visualizzata nella parte inferiore destra dello schermo e attiva l'intent di benvenuto predefinito dell'agente. Il bot saluta l'utente e avvia una conversazione.

La seguente implementazione condivide con l'utente curiosità sulla fauna selvatica. Altre implementazioni per gli agenti virtuali possono gestire casi d'uso complessi per i clienti (come un operatore di call center umano). Molte aziende utilizzano un agente virtuale come canale di comunicazione principale con il sito web aziendale.

Aggiungere Dialogflow Messenger al componente

Come il modulo, la finestra di dialogo della chat deve essere visualizzata solo quando viene caricato il componente autonomo.

Nell'editor di codice, completa le seguenti azioni.

  1. Vai al file feedback-and-chat.component.ts.
  2. Copia e incolla l'elemento df-messenger nell'esempio di codice seguente in un punto qualsiasi della pagina.
    <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 genera gli attributi per l'elemento df-messenger quando selezioni l'integrazione di Dialogflow Messenger.

    Attributo

    Dettagli

    agent-id

    Precompilato. Specifica l'identificatore univoco dell'agente Dialogflow.

    chat-title

    Precompilato. Specifica i contenuti da visualizzare nella parte superiore della finestra di dialogo della chat. Inizialmente precompilato con il nome dell'agente, ma devi personalizzarlo.

    df-cx

    Indica che l'interazione è con un agente CX. Imposta il valore su true.

    intent

    Specifica l'evento personalizzato utilizzato per attivare il primo intent all'apertura della finestra di dialogo della chat.

    language-code

    Specifica il codice di lingua predefinito per il primo intent.

    località

    Specifica la regione in cui viene eseguito il deployment dell'agente.

  3. Salva il file feedback-and-chat.component.ts.

Visualizza il modello del modulo di invio feedback

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare l'applicazione.
    ng serve
    La compilazione dell'applicazione dovrebbe non riuscire. La riga di comando dovrebbe visualizzare il seguente messaggio di errore.Messaggio di errore df-messenger
  3. Poi, aggiungi uno schema personalizzato.

Aggiungi uno schema personalizzato al componente autonomo

L'elemento df-messanger non è un elemento noto. Si tratta di un componente web personalizzato. Il messaggio di errore del framework Angular suggerisce di aggiungere uno CUSTOM_ELEMENTS_SCHEMA a entrambi i componenti autonomi per eliminare il messaggio.

Nell'editor di codice, completa le seguenti azioni.

  1. Vai al file feedback-and-chat.component.ts.
  2. Importa lo schema CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Aggiungi CUSTOM_ELEMENTS_SCHEMA all'elenco degli schemi.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    Il file feedback-and-chat.component.ts deve corrispondere al seguente esempio di codice.
    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. Il componente web df-messanger richiede un codice JavaScript che deve essere inserito solo quando viene caricato il componente di feedback e chat. A questo scopo, aggiungeremo il codice pertinente al metodo ngOnInit(), che caricherà lo script della chat necessario per attivare l'elemento .
    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. Salva il file feedback-and-chat.component.ts.

Compila e visualizza la finestra di dialogo della chat aggiornata

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare ed eseguire l'applicazione e aprire un server web.
    ng serve
    Il server di sviluppo deve essere eseguito sulla porta 4200.

Nel browser, completa le seguenti azioni.

  1. Vai alla pagina successiva.
    http://localhost:4200
    Nella parte inferiore della pagina dovrebbe essere visualizzata un'icona di chat.
  2. Seleziona l'icona e interagisci con Jimbo, che ti fornirà curiosità sugli animali.Applicazione che mostra la finestra della chat con la risposta del bot di messaggistica
  3. L'applicazione è completamente funzionante.

9. Esegui il deployment dell'applicazione in Google App Engine

L'applicazione viene eseguita localmente sulla tua macchina. Il passaggio successivo e ultimo di questo codelab consiste nell'eseguire il deployment su Google App Engine.

Per saperne di più su Google App Engine, consulta App Engine.

Configura il tuo ambiente per Google App Engine

Se soddisfi già tutte le seguenti condizioni, salta i passaggi successivi e procedi con il deployment dell'applicazione.

  • Creazione di un progetto cloud con App Engine
  • Abilitato l'API Cloud Build
  • Installazione di Google Cloud CLI

Completa le seguenti azioni.

  1. Accedi al tuo account Gmail o Google Workspace. Se non ne possiedi uno, crea il tuo Account Google.
  2. Abilita la fatturazione in Cloud Console per poter utilizzare le risorse e le API Cloud. Per saperne di più, consulta Creare, modificare o chiudere un account di fatturazione Cloud self-service.
  3. Crea un progetto Google Cloud per contenere le risorse dell'applicazione App Engine e altre risorse Google Cloud. Per saperne di più, consulta la pagina Creare e gestire progetti.
  4. Abilita l'API Cloud Build in Cloud Console. Per saperne di più, vedi Attivare l'accesso all'API.
  5. Installa Google Cloud CLI e lo strumento a riga di comando gcloud. Per saperne di più, consulta Installa gcloud CLI.
  6. Inizializza Google Cloud CLI e assicurati che gcloud sia configurato per utilizzare il progetto Google Cloud in cui vuoi eseguire il deployment. Per saperne di più, consulta Inizializzazione di gcloud CLI.

Crea l'applicazione autonoma

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare e creare una versione dell'applicazione pronta per la produzione.
    ng build

La versione dell'applicazione pronta per la produzione viene creata nella sottodirectory dist della directory del progetto photo-gallery-app.

10. Esegui il deployment dell'applicazione utilizzando il framework Express.js

Il codice di esempio in questo codelab utilizza il framework Express.js per gestire le richieste HTTP. Puoi utilizzare il framework web che preferisci.

Installare il framework Express.js

In una finestra della riga di comando, completa la seguente azione.

  1. Inserisci il seguente comando per installare il framework Express.js.
    npm install express --save

Configura il server web

Nell'editor di codice, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Crea un nuovo file server.js.
  3. Copia e incolla il seguente codice.
    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. Salva il file server.js.

Collega il server web

Nell'editor di codice, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Apri il file package.json.
  3. Modifica il comando di avvio per eseguire il nodo nel file 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'attributo start è il punto di accesso per la tua applicazione.
  4. Salva il file package.json.

Configura App Engine

Nell'editor di codice, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Crea un nuovo file app.yaml.
  3. Copia e incolla il seguente codice.
    runtime: nodejs16
service: default
    Le informazioni nel file app.yaml specificano la configurazione per App Engine. Devi solo specificare il runtime e il servizio.
  4. Salva il file app.yaml.

Aggiorna l'elenco di elementi da ignorare di gcloud

Per assicurarti che la directory node_modules non venga caricata, crea un file .gcloudignore. I file elencati nel file .gcloudignore non vengono caricati.

Nell'editor di codice, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Crea un nuovo file .gcloudignore.
  3. Copia e incolla il seguente codice.
    # 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. Salva il file .gcloudignore.

Inizializza l'applicazione

Prima di eseguire il deployment dell'applicazione, inizializzala con il tuo progetto e scegli una regione associata.

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci il comando seguente per inizializzare l'applicazione.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Al prompt, scegli la regione in cui vuoi collocare l'applicazione App Engine.

Esegui il deployment dell'applicazione

In una finestra della riga di comando, completa le seguenti azioni.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Inserisci questo comando per eseguire il deployment dell'applicazione.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. Al prompt, conferma l'azione.Al termine del comando di deployment gcloud, viene visualizzato un URL per accedere all'applicazione.
  4. Inserisci il comando seguente per aprire una nuova scheda nel browser.
    gcloud app browse
    Output della console di gcloud app deploy e inserimento di gcloud app browse

11. Complimenti

Complimenti. Hai creato una galleria fotografica di esempio utilizzando Angular v14 e ne hai eseguito il deployment su App Engine.

Hai sperimentato la funzionalità dei componenti autonomi e il caricamento differito. Hai creato una funzionalità di invio di messaggi basata su moduli per fornire feedback e commenti. Hai anche aggiunto correttamente una finestra di dialogo di chat con un agente virtuale Dialogflow CX utilizzando Dialogflow Messenger. Bene.

Passaggi successivi

Ora che hai completato l'applicazione di base, migliorala utilizzando le seguenti idee.

  • Il modulo non invia effettivamente feedback, ma viene refattorizzato per aggiungere la logica di business per inviare un'email.
  • In uno scenario reale, devi convalidare l'input dell'utente e includere un Captcha o un meccanismo simile per evitare lo spam dei bot
  • Crea un nuovo agente e scopri come progettare flussi conversazionali in Dialogflow CX

Continua a sperimentare con il framework Angular e divertiti.

Eseguire la pulizia ed eliminare il progetto Cloud

Puoi mantenere il tuo progetto Cloud o eliminarlo per interrompere la fatturazione per tutte le risorse utilizzate nel progetto.

Nel browser, completa le seguenti azioni.

  1. Accedi al tuo account Gmail o Google Workspace.
  2. Nella console Google Cloud, seleziona il pulsante Impostazioni IAM e amministrazione.
  3. Nella pagina IAM e amministrazione, seleziona la scheda Gestisci risorse.
  4. Nella pagina Gestisci risorse, vai al progetto che vuoi eliminare e selezionalo. Fai clic sul pulsante Elimina per aprire una finestra di dialogo.
  5. Nella finestra di dialogo, inserisci l'ID progetto. Seleziona il pulsante Chiudi per eliminare il progetto.