Introduzione ai componenti autonomi

1. Introduzione

Cosa creerai

In questo codelab, creerai un'applicazione per la galleria fotografica di fauna selvatica utilizzando Angular v14. L'applicazione completata conterrà una serie di foto, un modulo per l'invio di un messaggio per contattare il fotografo e una finestra di chat per conoscere informazioni interessanti sugli animali ripresi nelle foto.

Puoi creare tutto nella tua 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 Angular v14. I componenti autonomi sono una funzionalità in anteprima di Angular v14, quindi devi creare una nuova applicazione utilizzando Angular v14. I componenti autonomi forniscono un modo semplificato per creare applicazioni Angular. I componenti autonomi, le istruzioni autonome e i canali autonomi mirano a semplificare l'esperienza di creazione 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 delle app Angular
  • Come creare un componente autonomo. ovvero come creare la UI e aggiungere una logica di business
  • Eseguire il bootstrap di un'applicazione utilizzando un componente autonomo
  • Come eseguire il caricamento lento di un componente autonomo
  • Come incorporare una finestra di dialogo della chat in un componente autonomo utilizzando Dialogflow Messenger
  • 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 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 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 tuo computer locale, esegui questo comando node da una finestra della riga di comando.
    node -v
  • Un editor di codice o 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 questo comando npm per installare l'interfaccia a riga di comando Angular da una finestra della riga di comando.

npm install --global @angular/cli

Per confermare che la configurazione è corretta, esegui questo comando Angular dalla riga di comando.

ng version

Se il comando Angular viene completato correttamente, dovresti ricevere un messaggio simile all'acquisizione di schermata seguente.

Output del terminale della versione angolare

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 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, crea un fork e clona il repository.

Nel passaggio successivo, crea l'applicazione Galleria fotografica.

3. Crea una nuova applicazione

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

Utilizza l'interfaccia a riga di comando Angular per creare una nuova area di lavoro. Per scoprire di più sull'interfaccia a riga di comando Angular e sul framework Angular, vai a 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 prompt accetta la scelta predefinita.Il framework Angular installa i pacchetti e le dipendenze richiesti. Il processo potrebbe richiedere alcuni minuti.

Una volta completata l'interfaccia a riga di comando Angular, hai una nuova area di lavoro Angular e un'applicazione semplice pronta all'esecuzione.

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

Rimuovi il modulo dell'applicazione

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

  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, l'applicazione non contiene più alcun modulo. La tua applicazione ha un solo componente, ovvero quello dell'applicazione. Devi dichiarare il componente come autonomo.

Dichiara il tuo 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 parametro e il valore riportati di seguito al tuo elenco di decorator.
    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 tua nuova applicazione.
    ng serve

La compilazione dell'applicazione dovrebbe non riuscire. Non preoccuparti, devi solo risolvere un paio di altre 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 hai più 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 di 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 ciascun 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 codice di esempio che segue.
    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 tua 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 dovrebbero essere eliminati e la compilazione dovrebbe andare a buon fine. Bene. Hai creato un'applicazione Angular che viene eseguita senza modulo e con un componente autonomo.

  1. Successivamente, abbellirai la tua applicazione in modo da visualizzare alcune foto.

4. Visualizza le foto

La nuova applicazione è stata progettata come una galleria fotografica e dovrebbe visualizzare alcune foto.

I componenti sono i componenti di base fondamentali 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 all'interno della directory del progetto photo-gallery-app.

Crea il modello HTML

Il file app.component.html è il file del 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 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.

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 codice CSS dal codice di esempio seguente.
    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 di 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 si riflettono nel browser quando salvi.
  6. Quindi, creerai un nuovo componente autonomo per inviare feedback e chattare con Jimbo. Continua questo codelab per scoprire di più su Jimbo.

5. Aggiungi un nuovo componente autonomo

Come hai visto finora, i componenti autonomi forniscono un modo semplificato per creare applicazioni Angular riducendo la necessità di NgModule. 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 nuovamente l'interfaccia a riga di comando 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 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, occorre semplicemente 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 al codice di esempio che segue.
    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 tramite caricamento lento

Passare da un paradigma di caricamento eager a un paradigma di caricamento lento, in cui il codice viene spedito al client solo quando ne hai bisogno. Il caricamento lento è un ottimo approccio per ridurre il tempo di caricamento di una pagina, migliorare il rendimento e migliorare l'esperienza utente. Il router gestisce il caricamento lento, che è lo stesso per un ngModule e un componente autonomo.

Aggiorna il modello HTML associato al componente dell'applicazione

Per eseguire il caricamento lento del componente autonomo, aggiungi all'interfaccia utente un pulsante 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 Route. Nella versione 14.2.0 di Angular è stato introdotto un nuovo metodo fornireRouter 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 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.

Compilazione e revisione 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 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 seguente.
    http://localhost:4200
  2. Apri Strumenti per sviluppatori di Chrome e seleziona la scheda Rete.
  3. Aggiorna la pagina per visualizzare diversi file, ma non il componente feedback-and-chat.Lo schermo 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 eseguire il routing al componente autonomo.Il log dovrebbe indicare che il componente viene caricato solo quando accedi alla versione completa del router. Scorri verso il basso fino alla fine dell'elenco per verificare che il componente sia stato caricato. Lo schermo deve corrispondere alla seguente acquisizione schermo.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 Invia feedback contiene tre campi UI di inserimento e un pulsante nella parte inferiore. 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.

Completa le azioni seguenti nell'editor di codice.

  1. Passa 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 di stili per il modulo

Completa le azioni seguenti nell'editor di codice.

  1. Passa al file feedback-and-chat.component.css.
  2. Copia e incolla il codice CSS dal codice di esempio seguente.
    /*   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, dovrai vincolare il modulo.
  3. Per il momento, controlla gli elementi riportati di seguito.
    • Puoi utilizzare l'associazione di proprietà formGroup per associare contactForm all'elemento form e all'associazione di eventi ngSubmit
    • L'istruzione FormGroup rimane in ascolto dell'evento di invio generato dall'elemento form. Quindi, l'istruzione FormGroup emette 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

La UI per il 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 di 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 utente dalla struttura DOM sottoposta a rendering associata al componente.
  2. Mostra un messaggio amichevole all'utente.

Devi mettere alla prova le tue competenze e implementare tutte e quattro le azioni.

Aggiungi il modello di modulo Invia messaggio al componente

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

Completa le azioni seguenti nell'editor di codice.

  1. Passa al file feedback-and-chat.component.ts.
  2. Importa il servizio FormBuilder e il modulo ReactiveModule dal pacchetto @angular/forms. Questo servizio fornisce metodi comodi per generare i controlli. Nel passaggio successivo, utilizzeremo la funzione inject, quindi dovremo importare anche quella 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 al fine di 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 che viene inviato a un indirizzo email designato.In questo codelab, visualizzerai gli input dell'utente, utilizzerai il metodo reset per reimpostare il modulo e visualizzerai 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 codice di esempio che segue.
    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 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 seguente.
    http://localhost:4200
  2. Apri Strumenti per sviluppatori di Chrome e seleziona la scheda Console.
  3. Inserisci eventuali 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 siano visualizzati nella scheda Console.La schermata deve corrispondere all'acquisizione di schermata riportata di seguito.Finestra del browser con la console che mostra i dati JSON inseriti nel moduloHai implementato il codice per aggiungere un modulo di invio di messaggi all'interfaccia utente del componente e analizzare gli input dell'utente.
  6. Successivamente, incorpori una finestra di dialogo della chat per consentire ai visitatori dell'applicazione di parlare con Jimbo. Jimbo è un koala, da cui impari alcune curiosità sugli animali selvatici.

8. Aggiungi 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 le conversazioni simultanee con persone fisiche. È 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 dovrai aggiungere una finestra di dialogo della 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 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à sugli animali selvatici. 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 principale di comunicazione con il sito web aziendale.

Aggiungi Dialogflow Messenger al componente

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

Completa le azioni seguenti nell'editor di codice.

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

    ID agente

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

    titolo-chat

    Precompilato. Specifica i contenuti da visualizzare nella parte superiore della finestra di dialogo della chat. Inizialmente è precompilato con il nome dell'agente, ma dovrai 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 quando viene aperta la finestra di dialogo della chat.

    codice lingua

    Specifica il codice lingua predefinito per il primo intent.

    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 per l'invio di 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 che devi aggiungere CUSTOM_ELEMENTS_SCHEMA a entrambi i componenti autonomi per eliminare il messaggio.

Completa le azioni seguenti nell'editor di codice.

  1. Passa 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 codice di esempio che segue.
    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 soltanto quando vengono caricati il componente 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. Passa alla pagina seguente.
    http://localhost:4200
    Nella parte inferiore della pagina dovrebbe essere visualizzata l'icona di una chat.
  2. Seleziona l'icona e interagisci con Jimbo.Jimbo offre curiosità sugli animali.Applicazione che mostra una finestra di chat con la risposta del bot di messaggistica
  3. L'applicazione è perfettamente funzionante.

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 è il deployment in Google App Engine.

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

Configura l'ambiente per Google App Engine

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

  • Creazione di un progetto Cloud con App Engine
  • Abilitazione dell'API Cloud Build
  • Installazione di 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 saperne di più, consulta Creare, modificare o chiudere l'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 sezione Creare e gestire progetti.
  4. Abilita l'API Cloud Build nella console Cloud. Per scoprire di più, consulta Abilitare l'accesso all'API.
  5. Installa Google Cloud CLI e lo strumento a riga di comando gcloud. Per saperne 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 saperne di più, consulta Inizializzare l'interfaccia a riga di comando gcloud.

Crea la tua 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 campione 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 questa azione.

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

Configura il server web

Completa le azioni seguenti nell'editor di codice.

  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 tuo server web

Completa le azioni seguenti nell'editor di codice.

  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.

Configura App Engine

Completa le azioni seguenti nell'editor di codice.

  1. Vai alla nuova directory del progetto photo-gallery-app.
  2. Crea un nuovo file app.yaml.
  3. Copia e incolla il codice riportato di seguito.
    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 ignorati gcloud

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

Completa le azioni seguenti nell'editor di codice.

  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 questo comando per inizializzare l'applicazione.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Al prompt, scegli la regione in cui vuoi individuare 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 della tua applicazione.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. Al prompt, conferma l'azione.Al termine del comando gcloud deployment, verrà visualizzato un URL per accedere all'applicazione.
  4. Inserisci il comando seguente per aprire una nuova scheda nel browser.
    gcloud app browse
    Output console del deployment di gcloud app deploy e inserimento della navigazione in glcoud app

11. Complimenti

Complimenti. Hai creato una galleria fotografica di esempio utilizzando Angular v14 e ne hai eseguito il deployment in 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 la domanda di base, migliorala seguendo le idee riportate di seguito.

  • 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, è necessario convalidare l'input dell'utente e includere un captcha o un meccanismo simile per evitare lo spam di bot.
  • Crea un nuovo agente e scopri come progettare flussi conversazionali in Dialogflow CX

Continua a sperimentare il framework Angular e divertiti.

Esegui la pulizia ed elimina 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 IAM e Impostazioni amministratore.
  3. Nella piattaforma IAM e Amministratore.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.