Introduzione ai componenti autonomi

1. Introduzione

Cosa creerai

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

Puoi creare tutto nell'applicazione utilizzando Angular v14 e la nuova funzionalità dei componenti autonomi.

Tutti i riferimenti al framework Angular e all'interfaccia a riga di comando Angular riflettono la versione 14 di Angular. I componenti autonomi sono una funzionalità di anteprima di Angular 14, quindi devi creare una nuova applicazione utilizzando Angular 14. I componenti autonomi offrono un modo semplificato per creare applicazioni Angular. I componenti autonomi, le direttive autonome e i canali autonomi hanno lo scopo di semplificare l'esperienza di creazione dei contenuti riducendo la necessità di NgModules. I componenti autonomi sono in grado di 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 Angular per strutturare 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 l'interfaccia utente e aggiungere un po' di logica di business
  • Come avviare un'applicazione utilizzando un componente autonomo
  • Come eseguire il caricamento lazy di un componente autonomo
  • Come incorporare una finestra di dialogo della 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)

Cosa ti serve

  • Un account Gmail o Google Workspace
  • Conoscenza di base dei seguenti argomenti
    • HTML. Come creare un elemento.
    • CSS e less. 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 comandi.

2. Configurazione dell'ambiente

Configura il tuo ambiente locale

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

  • Una versione LTS attiva o LTS di manutenzione di Node.js. Utilizzato per installare il framework Angular e l'interfaccia a riga di comando Angular.

    Versione del 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 a tua scelta.

Installa l'interfaccia a riga di comando Angular

Dopo aver configurato tutte le dipendenze, esegui il seguente comando npm 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 alla seguente schermata.

Output del terminale della versione Angular

Codice sorgente e immagini

Creerai l'intera applicazione da zero e questo codelab passo passo ti aiuterà. Tieni presente che il repository GitHub contiene il codice finale. Se non riesci a procedere, controlla 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 la clonazione del repository.

Nel passaggio successivo, crea l'applicazione Galleria fotografica.

3. Crea una nuova applicazione

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

Utilizza l'interfaccia a riga di comando Angular per creare una nuova area di lavoro. Per scoprire di più su Angular CLI e sul framework Angular, visita il sito 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. Ad 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'interfaccia a riga di comando Angular, avrai una nuova area di lavoro Angular e una semplice applicazione pronta per l'uso.

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

Rimuovi 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ù alcun modulo nella tua applicazione. L'applicazione ha un solo componente, ovvero il componente dell'applicazione. Devi dichiarare il componente come autonomo.

Dichiara 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 essere molto simile al seguente esempio di codice.
    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 andare a buon fine. Non preoccuparti, devi solo sistemare un paio di cose.

Utilizza l'API bootstrapApplication

Per consentire l'esecuzione dell'applicazione senza NgModule, devi utilizzare un componente autonomo come componente principale mediante 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 disponi più di un modulo di 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 codice di esempio che segue.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Aggiungi 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 codice seguente per eseguire il bootstrap della tua applicazione.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Importa il componente e le librerie necessarie.
    import { AppComponent } from './app/app.component';
    Il file main.ts deve corrispondere al codice di esempio che segue.
    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));

Aggiungi router e 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 all'esempio di codice riportato di seguito.
    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 directory del nuovo 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 dovrebbero essere eliminati e la compilazione dovrebbe andare a buon fine. Bene. Hai creato un'applicazione Angular che funziona senza un modulo e con un componente autonomo.

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

4. Visualizzare le foto

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

I componenti sono gli elementi di base 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 il codice HTML esistente.
  4. Copia e incolla il codice HTML dal codice di esempio che segue.
    <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.

Creare 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 dal seguente esempio di codice.
    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 dell'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 al momento del salvataggio.
  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 NgModules. Nelle sezioni seguenti creerai un nuovo componente autonomo che consente all'utente di inviare feedback e chattare con un agente virtuale.

Creare un nuovo componente autonomo

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

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

  1. Vai alla directory del nuovo 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 Angular CLI per il framework Angular

    generate component

    Crea lo scaffolding 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.

Poiché si tratta di un componente autonomo, devi solo importarlo 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 all'esempio di codice riportato di seguito.
    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.

Carica il componente con caricamento lento

Passa da un paradigma di caricamento immediato a un paradigma di caricamento lento, 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 modo lazy il componente autonomo, aggiungi un pulsante all'interfaccia utente che attivi 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 codice di esempio che segue.
    <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.

Configura 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. La versione 14.2.0 di Angular ha introdotto un nuovo metodo provideRouter che ci consente di configurare un insieme di percorsi 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 codice di esempio che segue.
    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

Usa gli Strumenti per sviluppatori di Chrome per esaminare il modo in cui il framework Angular carica il componente tramite caricamento lento.

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

  1. Vai alla directory del nuovo 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 seguente.
    http://localhost:4200
  2. Apri 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 schermata di acquisizione.Screenshot dell&#39;app con il riquadro Devtools di Chrome aperto
  4. Seleziona il pulsante Scopri di più su questi ragazzi per passare al componente autonomo.Nel log dovrebbe essere indicato che il componente viene caricato solo quando raggiungi il router completo. Scorri verso il basso fino alla fine dell'elenco per verificare che il componente sia stato caricato. La schermata dovrebbe corrispondere alla seguente schermata di acquisizione.Screenshot dell&#39;app con il riquadro Strumenti per sviluppatori di Chrome aperto che mostra il componente caricato tramite caricamento lento

6. Aggiungi l'interfaccia utente per il modulo

Il modulo per l'invio del feedback ha tre campi dell'interfaccia utente di input e un pulsante in basso. I tre campi dell'interfaccia utente di immissione sono il nome completo, l'indirizzo email del mittente e i commenti.

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

Aggiungi il modulo al modello HTML

Aggiungi un modulo alla UI 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 il codice 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 degli 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 codice CSS dal codice di esempio 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 directory del nuovo 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 non dovrebbe riuscire. Non preoccuparti, devi vincolare il modulo.
  3. Per il momento, esamina i seguenti elementi.
    • Puoi utilizzare l'associazione di proprietà formGroup per associare contactForm all'elemento form e all'associazione di eventi ngSubmit
    • La direttiva FormGroup ascolta l'evento submit emesso dall'elemento form. La direttiva FormGroup emette quindi 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. A questo punto, dovrai vincolare 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 tramite i moduli è la pietra miliare di molte applicazioni comuni.

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

  1. Analizza l'input 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 azioni riportate di seguito.

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

Dovresti mettere alla prova le tue abilità e implementare tutte e quattro le azioni.

Aggiungi il modello di 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 dell'interfaccia utente.

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 la generazione di 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 in modo da 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, mostri gli input dell'utente, utilizzi il metodo reset per reimpostare il modulo e mostri 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 all'esempio di codice riportato di seguito.
    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 per l'invio di feedback

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

  1. Vai alla directory del nuovo 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. Passa alla pagina seguente.
    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.Nella 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 schermata di acquisizione.Finestra del browser con la console che mostra i dati JSON inseriti nel moduloHai implementato correttamente il codice per aggiungere un modulo di invio di messaggi all'interfaccia utente del componente e analizzare gli input dell'utente.
  6. Successivamente, incorpori un dialogo della chat per consentire ai visitatori dell'applicazione di parlare con Jimbo. Jimbo è un koala che ti insegna alcune curiosità sulla fauna selvatica.

8. Aggiungere una finestra di dialogo della chat

Sfrutta l'esperienza con le interfacce di conversazione, come Dialogflow CX o piattaforme simili. Un agente Dialogflow CX è un agente virtuale che gestisce conversazioni simultanee con persone. È 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 che app e servizi sono in grado di comprendere.

È 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 puoi avvalerti di Dialogflow Messenger, un'integrazione predefinita che fornisce una finestra di dialogo personalizzabile. Una volta aperta, la finestra di dialogo della chat viene visualizzata nella parte in basso a 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 riguardare casi d'uso complessi per i clienti, ad esempio un agente umano di call center. Molte aziende utilizzano un agente virtuale come canale di comunicazione principale con il sito web dell'azienda.

Aggiungi il componente Dialogflow Messenger al tuo componente

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

Completa le azioni seguenti nell'editor di codice.

  1. Vai al file feedback-and-chat.component.ts.
  2. Copia e incolla l'elemento df-messenger nel seguente esempio di codice ovunque nella 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

    ID agente

    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 del tuo agente, ma devi personalizzarlo.

    df-cx

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

    intent

    Specifica l'evento personalizzato utilizzato per attivare il primo intent quando viene aperta la finestra di dialogo della chat.

    language-code

    Specifica il codice lingua predefinito per il primo intento.

    località

    Specifica la regione in cui esegui 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 directory del nuovo progetto photo-gallery-app.
  2. Inserisci il seguente comando Angular per compilare l'applicazione.
    ng serve
    La compilazione dell'applicazione non dovrebbe riuscire. Nella riga di comando dovrebbe essere visualizzato il seguente messaggio di errore.Messaggio di errore di df-messenger
  3. Aggiungi uno schema personalizzato.

Aggiungi lo 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 che devi aggiungere CUSTOM_ELEMENTS_SCHEMA a entrambi i componenti autonomi per eliminare il messaggio.

Completa le azioni seguenti nell'editor di codice.

  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 all'esempio di codice riportato di seguito.
    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 mostra la finestra di dialogo della chat aggiornata

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

  1. Vai alla directory del nuovo 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 seguente.
    http://localhost:4200
    Nella parte inferiore della pagina dovrebbe apparire un'icona di chat.
  2. Seleziona l'icona e interagisci con Jimbo.Jimbo fornisce interessanti curiosità sugli animali.Applicazione che mostra una finestra di chat con la risposta del bot di messaggistica
  3. L'applicazione è completamente funzionale.

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

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

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

Configurare l'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
  • L'API Cloud Build è stata abilitata
  • Hai installato Google Cloud CLI

Completa le seguenti azioni.

  1. Accedi al tuo account Gmail o Google Workspace. Se non ne hai uno, crea il tuo Account Google.
  2. Abilita la fatturazione nella console Cloud per utilizzare le risorse e le API Cloud. Per scoprire 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 scoprire di più, consulta la pagina Creare e gestire progetti.
  4. Abilita l'API Cloud Build nella console Cloud. Per scoprire di più, vedi Attivare l'accesso all'API.
  5. Installa Google Cloud CLI e lo strumento a riga di comando gcloud. Per scoprire di più, consulta Installare 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 scoprire di più, consulta Inizializza l'interfaccia a riga di comando gcloud.

Creare l'applicazione autonoma

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

  1. Vai alla directory del nuovo 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 pronta per la produzione dell'applicazione 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.

Installa il framework Express.js

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

  1. Inserisci il comando seguente 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 directory del nuovo 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 start 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.

Configurare App Engine

Nell'editor di codice, completa le seguenti azioni.

  1. Vai alla directory del nuovo 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.

Aggiornare 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 directory del nuovo 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 directory del nuovo progetto photo-gallery-app.
  2. Inserisci il comando seguente per inizializzare l'applicazione.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Quando richiesto, scegli la regione in cui vuoi posizionare l'applicazione App Engine.

Esegui il deployment dell'applicazione

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

  1. Vai alla directory del nuovo progetto photo-gallery-app.
  2. Inserisci questo comando per eseguire il deployment della tua 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 seguente comando 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à del componente autonomo e il caricamento lento. Hai creato una funzionalità di invio di messaggi basata su moduli per fornire feedback e commenti. Hai anche aggiunto correttamente una finestra di dialogo della 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.

  • Di fatto, il modulo non invia feedback, ma deve effettuare il refactoring per aggiungere la logica di business per l'invio di 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 di conversazione in Dialogflow CX

Continua a fare esperimenti con il framework Angular e divertiti.

Ripulire ed eliminare il progetto Cloud

Puoi mantenere il progetto Cloud o, in alternativa, 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 sceglilo. Seleziona il 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.