Comienza a usar componentes independientes

1. Introducción

Qué compilarás

En este codelab, compilarás una aplicación de galería de fotos de vida silvestre con Angular v14. La solicitud completa mostrará un conjunto de fotos y también un formulario para enviar un mensaje y comunicarte con el fotógrafo, y una ventana de chat para obtener datos interesantes sobre los animales que aparecen en las fotos.

Compilas todo en tu aplicación con Angular v14 y la nueva función de componentes independientes.

Todas las referencias al framework de Angular y a la CLI de Angular reflejan la versión 14 de Angular. Los componentes independientes son una función preliminar de Angular v14, por lo que debes crear una aplicación nueva con Angular v14. Los componentes independientes proporcionan una forma simplificada de compilar aplicaciones de Angular. Los componentes independientes, las directivas independientes y los canales independientes tienen como objetivo optimizar la experiencia de creación, ya que reducen la necesidad de NgModules. Los componentes independientes pueden aprovechar al máximo el ecosistema existente de bibliotecas de Angular.

Esta es la aplicación que estás compilando hoy.

Solicitud completada

Qué aprenderás

  • Cómo usar Angular CLI para crear un andamiaje de un proyecto nuevo
  • Cómo usar componentes independientes de Angular para optimizar el desarrollo de apps de Angular
  • Cómo crear un componente independiente, es decir, cómo compilar la IU y agregar lógica empresarial
  • Cómo iniciar una aplicación con un componente independiente
  • Cómo cargar de forma diferida un componente independiente
  • Cómo incorporar un diálogo de chat en un componente independiente con Dialogflow Messenger
  • Cómo implementar una aplicación de Angular en Google Cloud App Engine con Google Cloud CLI (gcloud)

Lo que necesitarás

  • Una cuenta de Gmail o Google Workspace
  • Conocimientos básicos sobre los siguientes temas
    • HTML. Cómo crear un elemento
    • CSS y menos. Cómo usar un selector CSS y crear un archivo de definición de estilos
    • TypeScript o JavaScript. Cómo interactuar con la estructura del DOM
    • git y GitHub. Cómo bifurcar y clonar un repositorio
    • Interfaz de línea de comandos, como bash o zsh Cómo navegar por directorios y ejecutar comandos

2. Configuración del entorno

Cómo configurar tu entorno local

Para completar este codelab, debes instalar el siguiente software en tu computadora local.

  • Una versión LTS activa o LTS de mantenimiento de Node.js Se usa para instalar el framework de Angular y la CLI de Angular.

    Versión de nodo

    Compatible con Angular

    14.15 o una versión posterior

    Compatible

    16.10 o versiones posteriores

    Compatible

    18.1.0

    No compatible

    Para verificar la versión de Node.js en tu computadora local, ejecuta el siguiente comando node desde una ventana de línea de comandos.
    node -v
  • Un editor de código o IDE Se usa para abrir y editar archivos.Visual Studio Code o cualquier otro editor de código que elijas.

Instala la CLI de Angular

Después de configurar todas las dependencias, ejecuta el siguiente comando npm para instalar la CLI de Angular desde una ventana de línea de comandos.

npm install --global @angular/cli

Para confirmar que tu configuración es correcta, ejecuta el siguiente comando de Angular desde una línea de comandos.

ng version

Si el comando de Angular se completa correctamente, deberías recibir un mensaje similar al de la siguiente captura de pantalla.

Resultado de la terminal de la versión de Angular

Imágenes y código fuente

Crearás toda la aplicación desde cero y este codelab paso a paso te ayudará. Ten en cuenta que el repositorio de GitHub contiene el código final. Si tienes problemas, revisa el código final y las imágenes que se muestran en la página de la galería.

Para descargar el código fuente, haz lo siguiente:

  1. En tu navegador, navega a la siguiente página.
    https://github.com/angular/codelabs/tree/standalone-components
  2. En una ventana de línea de comandos, bifurca y clona el repositorio.

En el siguiente paso, compilarás tu aplicación de galería de fotos.

3. Crear una nueva aplicación

Para crear la aplicación de partida inicial, completa las siguientes acciones.

Usa Angular CLI para crear un lugar de trabajo nuevo. Para obtener más información sobre la CLI de Angular y el framework de Angular, ve a angular.io.

Crea un proyecto nuevo

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Ingresa el siguiente comando de Angular para crear un nuevo proyecto de Angular llamado photo-gallery-app.
    ng new photo-gallery-app
  2. En cada instrucción, acepta la opción predeterminada.El framework de Angular instala los paquetes y las dependencias necesarios. El proceso puede tardar algunos minutos.

Cuando se complete Angular CLI, tendrás un nuevo espacio de trabajo de Angular y una aplicación simple lista para ejecutarse.

Tu nueva aplicación está estructurada como una aplicación estándar de Angular. El NgModule de tu nueva aplicación es redundante para este codelab.

Quita el módulo de la aplicación

Para quitar el módulo de la aplicación, completa la siguiente acción.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Borra el archivo app.module.ts.

Después de borrar el módulo de la aplicación, no tendrás ningún módulo en ella. Tu aplicación tiene un solo componente, que es el componente de la aplicación. Debes declarar el componente como independiente.

Declara tu componente independiente

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo app.component.ts.
  3. Agrega el siguiente parámetro y valor a tu lista de decoradores.
    standalone: true
    El archivo app.component.ts debería coincidir estrechamente con el siguiente ejemplo de código.
    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. Guarda el archivo app.component.ts.

Compila tu nueva aplicación independiente

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio de tu nuevo proyecto photo-gallery-app.
  2. Ingresa el siguiente comando de Angular para compilar tu nueva aplicación.
    ng serve

Tu aplicación no debería compilarse. No te preocupes, solo debes corregir algunos aspectos más.

Usa la API de bootstrapApplication

Para permitir que tu aplicación se ejecute sin un NgModule, debes usar un componente independiente como el componente raíz con la API de bootstrapApplication.

Quita las referencias al módulo de la aplicación

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo main.ts.
  3. Quita el siguiente código de importación, ya que ya no tienes un módulo de aplicación.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Quita el siguiente código de arranque, ya que ya no tienes un módulo de aplicación.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    El archivo main.ts debe coincidir con el siguiente ejemplo de código.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Agrega el componente bootstrapApplication

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src en el directorio de tu proyecto photo-gallery-app nuevo.
  2. Abre el archivo main.ts.
  3. Importa el componente bootstrapApplication desde el servicio @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Agrega el siguiente código para iniciar tu aplicación.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Importa el componente y las bibliotecas requeridas.
    import { AppComponent } from './app/app.component';
    El archivo main.ts debe coincidir con el siguiente ejemplo de código.
    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));

Cómo agregar routers y módulos comunes

Para usar el router y otras funciones comunes del módulo, debes importar cada módulo directamente en el componente.

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo app.component.ts.
  3. Importa los módulos requeridos en el componente.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Agrega las importaciones en el componente.
    imports: [CommonModule, RouterModule],
    El archivo app.component.ts debe coincidir con el siguiente ejemplo de código.
    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. Guarda el archivo app.component.ts.

Compila y ejecuta tu nueva aplicación independiente

En una ventana de línea de comandos, realiza las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para compilar y ejecutar la aplicación y abrir un servidor web. Es posible que debas cerrar tu IDE antes de ejecutar tu aplicación para quitar cualquier error de compilación.
    ng serve

Tu servidor de desarrollo debe ejecutarse en el puerto 4200. Todos los errores anteriores deberían desaparecer y la compilación debería realizarse correctamente. Bien hecho. Creaste con éxito una aplicación de Angular que se ejecuta sin un módulo y con un componente independiente.

  1. A continuación, mejorarás tu aplicación para mostrar algunas fotos.

4. Cómo mostrar las fotos

Tu nueva aplicación está diseñada para ser una galería de fotos y debería mostrar algunas.

Los componentes son los elementos básicos de las apps de Angular. Los componentes tienen 3 aspectos principales.

  • Un archivo HTML para la plantilla
  • Un archivo CSS para los estilos
  • Un archivo TypeScript para el comportamiento de la app

Mueve las fotos a tu aplicación

Las imágenes se proporcionan en la aplicación que descargaste anteriormente de GitHub.

  1. Navega al directorio src/assets del proyecto de GitHub.
  2. Copia y pega los archivos en el directorio analogue del directorio de tu proyecto photo-gallery-app.

Crea la plantilla HTML

El archivo app.component.html es el archivo de plantilla HTML asociado con el componente AppComponent.

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo app.component.html.
  3. Borra todo el código HTML existente.
  4. Copia y pega el código HTML del siguiente ejemplo de código.
    <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. Guarda el archivo app.component.html.

Crea el archivo de definición de diseño

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo styles.css.
  3. Copia y pega el CSS del siguiente ejemplo de código.
    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. Guarda el archivo styles.css.

Actualiza el archivo de índice

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo index.html.
  3. Agrega la fuente Raleway para permitir que todas las páginas la hereden.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Guarda el archivo index.html.
  5. Guarda el código y revisa tu navegador. Con el servidor de desarrollo en ejecución, los cambios se reflejan en el navegador cuando los guardas.
  6. A continuación, crearás un nuevo componente independiente para enviar comentarios y chatear con Jimbo. Continúa con este codelab para obtener más información sobre Jimbo.

5. Agrega un nuevo componente independiente

Como has visto hasta ahora, los componentes independientes proporcionan una forma simplificada de compilar aplicaciones de Angular, ya que reducen la necesidad de NgModules. En las siguientes secciones, crearás un nuevo componente independiente que le permita al usuario enviar comentarios y chatear con un agente virtual.

Crea un nuevo componente independiente

Para crear este nuevo componente, vuelve a usar Angular CLI.

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para crear un componente nuevo llamado feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    En la siguiente tabla, se describen las partes del comando.

    Pieza

    Detalles

    ng

    Define todos los comandos de Angular CLI para el framework de Angular.

    generate component

    Crea la estructura para un componente nuevo

    feedback-and-chat

    Es el nombre del componente.

    --standalone

    Indica al framework de Angular que cree un componente independiente

Importa el nuevo componente independiente

Para usar el nuevo componente independiente, primero debes agregarlo al array imports en el archivo app.components.ts.

Este es un componente independiente, por lo que solo debes importarlo como si fuera un módulo.

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo app.component.ts.
  3. Importa el nuevo componente independiente.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Actualiza las importaciones en el componente.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    El archivo app.component.ts debe coincidir con el siguiente ejemplo de código.
    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. Guarda el archivo app.component.ts.

Carga diferida del componente

Cambia de un paradigma de carga anticipada a uno de carga diferida, en el que el código no se envía al cliente hasta que lo necesites. La carga diferida es un excelente enfoque para reducir el tiempo necesario para cargar una página, mejorar el rendimiento y optimizar la experiencia del usuario. El router controla la carga diferida, que es lo mismo para un ngModule y un componente independiente.

Actualiza la plantilla HTML asociada con el componente de la aplicación

Para cargar de forma diferida el componente independiente, agrega un botón a la IU que solo active el componente cuando un usuario lo seleccione.

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src/app en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo app.component.html.
  3. Desplázate hasta el final del archivo y agrega el siguiente ejemplo de código antes de cerrar el elemento article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. El archivo app.component.html debe coincidir con el siguiente ejemplo de código.
    <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. Guarda el archivo app.component.html.

Configura tus rutas

En un editor de código, completa las siguientes acciones.

  1. Navega al directorio src en el nuevo directorio del proyecto photo-gallery-app.
  2. Abre el archivo main.ts.
  3. Importa el método provideRouter y el módulo Routes. La versión 14.2.0 de Angular presentó un nuevo método provideRouter que nos permite configurar un conjunto de rutas para la aplicación.
    import { provideRouter, Routes } from '@angular/router';
  4. Copia y pega el siguiente fragmento de código entre las importaciones y la sentencia if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Copia y pega el siguiente fragmento de código y reemplaza el método bootstrapApplication.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    El archivo main.ts debe coincidir con el siguiente ejemplo de código.
    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. Guarda el archivo main.ts.

Compila y revisa con las herramientas para desarrolladores de Chrome

Usa las herramientas para desarrolladores de Chrome y revisa cómo el framework de Angular carga de forma diferida el componente.

En una ventana de línea de comandos, realiza las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para compilar y ejecutar la aplicación y abrir un servidor web.
    ng serve
    Tu servidor de desarrollo debería ejecutarse en el puerto 4200.

En el navegador, completa las siguientes acciones.

  1. Navega a la siguiente página.
    http://localhost:4200
  2. Abre las herramientas para desarrolladores de Chrome y elige la pestaña Red.
  3. Actualiza la página para que se muestren varios archivos, pero no el componente feedback-and-chat.Tu pantalla debería coincidir con la siguiente captura de pantalla.Captura de pantalla de la app con el panel de Chrome DevTools abierto
  4. Selecciona el botón Obtén más información sobre estos tipos para dirigirte al componente independiente.El registro debe indicar que el componente solo se carga cuando presionas el router completo. Desplázate hacia abajo hasta el final de la lista para verificar que se haya cargado el componente. Tu pantalla debe coincidir con la siguiente captura de pantalla.Captura de pantalla de la app con el panel de herramientas para desarrolladores de Chrome abierto que muestra el componente cargado de forma diferida

6. Agrega la IU del formulario

El formulario para enviar comentarios tiene tres campos de entrada de la IU y un botón en la parte inferior. Los tres campos de la IU de entrada son el nombre completo, la dirección de correo electrónico del remitente y los comentarios.

Para admitir la IU, agrega un atributo formControlName en un elemento input que se vincule a cada control de formulario contactForm asociado con cada uno de los tres campos de entrada de la IU.

Agrega el formulario a la plantilla HTML.

Agrega un formulario a la IU para permitir que un usuario envíe comentarios.

En tu editor de código, realiza las siguientes acciones.

  1. Navega al archivo feedback-and-chat.component.html.
  2. Quita el código HTML existente.
  3. Copia y pega el código HTML del siguiente ejemplo.
    <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. Guarda el archivo feedback-and-chat.component.html.

Actualiza el archivo de estilos del formulario

En el editor de código, completa las siguientes acciones.

  1. Navega al archivo feedback-and-chat.component.css.
  2. Copia y pega el CSS del siguiente ejemplo de código.
    /*   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. Guarda el archivo feedback-and-chat.component.css.

Compila la actualización de la IU para el formulario

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para compilar y ejecutar la aplicación y abrir un servidor web.
    ng serve
    No debería poder compilarse tu aplicación. No te preocupes, debes vincular el formulario.
  3. Por ahora, revisa los siguientes elementos.
    • Usas la vinculación de propiedades formGroup para vincular contactForm al elemento form y la vinculación de eventos ngSubmit.
    • La directiva FormGroup detecta el evento de envío emitido por el elemento form. Luego, la directiva FormGroup emite un evento ngSubmit que puedes vincular a la función de devolución de llamada onSubmit.
    • En un paso posterior, implementarás la función de devolución de llamada onSubmit en el archivo feedback-and-chat.component.ts.
  4. A continuación, vincularás el formulario.

7. Agrega el control de eventos al formulario

La IU del formulario para enviar comentarios está completa, pero falta la interacción. El manejo de las entradas del usuario con formularios es la piedra angular de muchas aplicaciones comunes.

En una situación real, debes implementar la lógica empresarial para completar las siguientes acciones.

  1. Analiza la entrada del usuario de la estructura del DOM renderizada asociada con el componente.
  2. Valida la entrada del usuario, que incluye un Captcha o un mecanismo similar para evitar el spam de bots.
  3. Envía un correo electrónico a una dirección de correo electrónico designada.
  4. Mostrar un mensaje amigable al usuario.

En este codelab, solo implementarás las siguientes acciones.

  1. Analiza la entrada del usuario desde la estructura del DOM renderizada asociada con el componente.
  2. Muestra un mensaje amigable al usuario.

Debes desafiar tus habilidades y, luego, implementar las cuatro acciones.

Agrega el modelo de formulario de envío de mensajes al componente

Crea y agrega el modelo del formulario para enviar comentarios en la clase del componente. El modelo de formulario determina el estado del formulario. El servicio FormBuilder proporciona métodos convenientes para crear un control de IU.

En el editor de código, completa las siguientes acciones.

  1. Navega al archivo feedback-and-chat.component.ts.
  2. Importa el servicio FormBuilder y el módulo ReactiveModule desde el paquete @angular/forms. Este servicio proporciona métodos convenientes para generar controles. En el siguiente paso, aprovecharemos la función inject, por lo que también debemos importarla desde @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Importa el módulo ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Quita el siguiente constructor.
    constructor() { }
  5. Inyecta el servicio FormBuilder a través de la función inject justo debajo de la firma de la clase.
    private formBuilder = inject(FormBuilder);
    Usa el método group del servicio FormBuilder para crear un modelo de formulario a fin de recopilar el nombre, la dirección de correo electrónico y los comentarios de un usuario.
  6. Crea la nueva propiedad contactForm y usa el método group para configurarla en un modelo de formulario.El modelo de formulario contiene los campos name, email y comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Define un método onSubmit para controlar el formulario.En una situación real, el método onSubmit permite que el usuario envíe un mensaje de comentarios al fotógrafo mediante un mensaje de correo electrónico que se envía a una dirección de correo electrónico designada.En este codelab, mostrarás las entradas del usuario, usarás el método reset para restablecer el formulario y mostrarás un mensaje de éxito fácil de usar.
  7. Agrega el nuevo método onSubmit y establece la variable showMsg en true después de inicializarla.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    El archivo feedback-and-chat.component.ts debe coincidir con el siguiente ejemplo de código.
    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. Guarda el archivo feedback-and-chat.component.ts.

Compila y muestra el modelo del formulario para enviar comentarios

En una ventana de línea de comandos, realiza las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Escribe el comando siguiente de Angular para compilar y ejecutar la aplicación, y abrir un servidor web.
    ng serve
  3. Tu servidor de desarrollo debería ejecutarse en el puerto 4200.

En el navegador, completa las siguientes acciones.

  1. Navega a la siguiente página.
    http://localhost:4200
  2. Abre las Herramientas para desarrolladores de Chrome y elige la pestaña Consola.
  3. Ingresa valores en los cuadros de texto Nombre completo, Correo electrónico y Comentarios.
  4. Selecciona el botón Enviar.Se debería mostrar un mensaje de éxito en la página.
  5. Verifica que los valores se muestren en la pestaña Console.Tu pantalla debería coincidir con la siguiente captura de pantalla.Ventana del navegador con la consola que muestra los datos JSON ingresados en el formularioImplementaste correctamente el código para agregar un formulario send message a la IU del componente y analizar las entradas del usuario.
  6. A continuación, incorporas un diálogo de chat para permitir que los visitantes de la aplicación hablen con Jimbo. Jimbo es un koala con el que aprenderás datos interesantes sobre la vida silvestre.

8. Agrega un diálogo de chat

Aprovecha la experiencia con interfaces de conversación, como Dialogflow CX o plataformas similares. Un agente de Dialogflow CX es un agente virtual que maneja conversaciones simultáneas con personas. Es un módulo de comprensión del lenguaje natural que reconoce los matices del lenguaje humano y traduce el texto o el audio del usuario final durante una conversación a datos estructurados que las apps y los servicios pueden comprender.

Ya se creó un agente virtual de ejemplo para que lo uses. En este lab, debes agregar un diálogo de chat al componente independiente para permitir que los usuarios de la aplicación interactúen con el bot. Para este requisito, aprovecharás Dialogflow Messenger, una integración precompilada que proporciona una ventana de diálogo personalizable. Cuando se abre, el cuadro de chat aparece en la parte inferior derecha de la pantalla y activa el intent de bienvenida predeterminado del agente. El bot saluda al usuario y comienza una conversación.

En la siguiente implementación, se comparten datos interesantes sobre la vida silvestre con el usuario. Otras implementaciones de agentes virtuales pueden abordar casos de uso complejos para los clientes (como un agente humano de un centro de llamadas). Muchas empresas usan un agente virtual como canal de comunicación principal con el sitio web de la empresa.

Agrega Dialogflow Messenger a tu componente

Al igual que el formulario, el diálogo de chat solo debe mostrarse cuando se carga el componente independiente.

En el editor de código, completa las siguientes acciones.

  1. Navega al archivo feedback-and-chat.component.ts.
  2. Copia y pega el elemento df-messenger del siguiente ejemplo de código en cualquier lugar de la página.
    <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 los atributos del elemento df-messenger cuando seleccionas la integración de Dialogflow Messenger.

    Atributo

    Detalles

    agent-id

    Se prepropaga. Especifica el identificador único del agente de Dialogflow.

    chat-title

    Se prepropaga. Especifica el contenido que se mostrará en la parte superior del cuadro de diálogo de chat. Inicialmente, se propaga con el nombre de tu agente, pero debes personalizarlo.

    df-cx

    Indica que la interacción está con un agente de CX. Establece el valor en true.

    intent

    Especifica el evento personalizado que se usa para activar el primer intent cuando se abre el cuadro de diálogo de chat.

    código-de-idioma

    Especifica el código de idioma predeterminado para el primer intent.

    ubicación

    Especifica la región en la que implementas el agente.

  3. Guarda el archivo feedback-and-chat.component.ts.

Cómo mostrar el modelo del formulario para enviar comentarios

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para compilar la aplicación.
    ng serve
    Tu aplicación no debería compilarse. La línea de comandos debería mostrar el siguiente mensaje de error.Mensaje de error de df-messenger
  3. A continuación, agrega un esquema personalizado.

Agrega un esquema personalizado al componente independiente

El elemento df-messanger no es un elemento conocido. Es un componente web personalizado. El mensaje de error del framework de Angular sugiere que debes agregar un CUSTOM_ELEMENTS_SCHEMA a ambos componentes independientes para suprimir el mensaje.

En tu editor de código, realiza las siguientes acciones.

  1. Navega al archivo feedback-and-chat.component.ts.
  2. Importa el esquema CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Agrega CUSTOM_ELEMENTS_SCHEMA a la lista de esquemas.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    El archivo feedback-and-chat.component.ts debe coincidir con el siguiente ejemplo de código.
    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. El componente web df-messanger requiere un código JavaScript que se debe insertar solo cuando se carga el componente de comentarios y chat. Para ello, agregaremos el código relevante al método ngOnInit(), que cargará la secuencia de comandos de chat necesaria para activar el 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. Guarda el archivo feedback-and-chat.component.ts.

Compila y muestra el diálogo de chat actualizado

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Escribe el comando siguiente de Angular para compilar y ejecutar la aplicación, y abrir un servidor web.
    ng serve
    Tu servidor de desarrollo debe ejecutarse en el puerto 4200.

En el navegador, completa las siguientes acciones.

  1. Navega a la siguiente página.
    http://localhost:4200
    Debería aparecer un ícono de chat en la parte inferior de la página.
  2. Selecciona el ícono y haz una interacción con Jimbo.Jimbo proporciona datos interesantes sobre animales.Aplicación que muestra una ventana de chat con un bot de mensajería respondiendo
  3. La aplicación es completamente funcional.

9. Implementa la aplicación en Google App Engine

La aplicación se está ejecutando de forma local en tu máquina. El siguiente y último paso de este codelab es implementarlo en Google App Engine.

Para obtener más información sobre Google App Engine, consulta App Engine.

Configura tu entorno para Google App Engine

Si ya cumples con todas las siguientes condiciones, omite los próximos pasos y continúa con la implementación de la aplicación.

  • Creaste un proyecto de Cloud con App Engine
  • Habilitaste la API de Cloud Build
  • Instalaste Google Cloud CLI

Completa las siguientes acciones.

  1. Accede a tu cuenta de Gmail o Google Workspace. Si no tienes una, crea tu Cuenta de Google.
  2. Habilita la facturación en la consola de Cloud para poder usar los recursos y las APIs de Cloud. Para obtener más información, consulta Crea, modifica o cierra la cuenta de Facturación de Cloud de servicio automático.
  3. Crea un proyecto de Google Cloud para alojar los recursos de tu aplicación de App Engine y otros recursos de Google Cloud. Para obtener más información, consulta Crea y administra proyectos.
  4. Habilita la API de Cloud Build en la consola de Cloud. Para obtener más información, consulta Habilita el acceso a la API.
  5. Instala Google Cloud CLI y la herramienta de línea de comandos de gcloud. Para obtener más información, consulta Instala la CLI de gcloud.
  6. Inicializa Google Cloud CLI y asegúrate de que gcloud esté configurado para usar el proyecto de Google Cloud en el que deseas realizar la implementación. Para obtener más información, consulta Inicializa la CLI de gcloud.

Compila tu aplicación independiente

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando de Angular para compilar y crear una versión de la aplicación lista para producción.
    ng build

La versión lista para producción de la aplicación se crea en el subdirectorio dist del directorio del proyecto photo-gallery-app.

10. Implementa tu aplicación con el framework de Express.js

El código de muestra de este codelab usa el framework Express.js para controlar las solicitudes HTTP. Puedes usar el framework web que prefieras.

Instala el framework de Express.js

En una ventana de línea de comandos, completa la siguiente acción.

  1. Ingresa el siguiente comando para instalar el framework de Express.js.
    npm install express --save

Configura tu servidor web

En el editor de código, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Crea un archivo server.js nuevo.
  3. Copia y pega el siguiente código.
    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. Guarda el archivo server.js.

Conecta tu servidor web

En el editor de código, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Abre el archivo package.json.
  3. Modifica el comando start para ejecutar el nodo en el archivo 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"
  },
    El atributo start es el punto de entrada de tu aplicación.
  4. Guarda el archivo package.json.

Configura App Engine

En el editor de código, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Crea un archivo app.yaml nuevo.
  3. Copia y pega el siguiente código.
    runtime: nodejs16
service: default
    La información del archivo app.yaml especifica la configuración de App Engine. Solo debes especificar el entorno de ejecución y el servicio.
  4. Guarda el archivo app.yaml.

Actualiza la lista de elementos ignorados de gcloud

Para garantizar que no se suba tu directorio node_modules, crea un archivo .gcloudignore. No se subieron los archivos enumerados en tu archivo .gcloudignore.

En tu editor de código, realiza las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Crea un archivo .gcloudignore nuevo.
  3. Copia y pega el siguiente código.
    # 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. Guarda el archivo .gcloudignore.

Inicializa tu aplicación

Antes de implementar la aplicación, iníciala con tu proyecto y elige una región asociada.

En una ventana de línea de comandos, realiza las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando para inicializar tu aplicación.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Cuando se te solicite, elige la región en la que deseas ubicar tu aplicación de App Engine.

Implementa tu aplicación

En una ventana de línea de comandos, completa las siguientes acciones.

  1. Navega al directorio del proyecto photo-gallery-app nuevo.
  2. Ingresa el siguiente comando para implementar tu aplicación.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. En el mensaje, confirma la acción.Una vez que se complete correctamente el comando de implementación de gcloud, se mostrará una URL para acceder a tu aplicación.
  4. Ingresa el siguiente comando para abrir una pestaña nueva en el navegador.
    gcloud app browse
    Resultado de la consola de gcloud app deploy y entrada de gcloud app browse

11. Felicitaciones

Felicitaciones. Creaste una galería de fotos de ejemplo con Angular v14 y la implementaste correctamente en App Engine.

Experimentaste con la función de componentes independientes y la carga diferida. Creaste una función para enviar mensajes basada en formularios que permite brindar comentarios. También agregaste correctamente un diálogo de chat con un agente virtual de Dialogflow CX con Dialogflow Messenger. Bien hecho.

Próximos pasos

Ahora que completaste la aplicación básica, mejorala con las siguientes ideas.

  • En realidad, el formulario no envía comentarios, así que refactorízalo para agregar la lógica empresarial que envíe un correo electrónico.
  • En una situación real, debes validar la entrada del usuario y, además, incluir un Captcha o un mecanismo similar para evitar el spam de bots.
  • Crea un agente nuevo y aprende a diseñar flujos de conversación en Dialogflow CX

Continúa experimentando con el framework de Angular y diviértete.

Limpia y borra tu proyecto de Cloud

Puedes conservar tu proyecto de Cloud o borrarlo para detener la facturación de todos los recursos que se usan en él.

En el navegador, completa las siguientes acciones.

  1. Accede a tu cuenta de Gmail o Google Workspace.
  2. En la consola de Google Cloud, selecciona el botón IAM &Admin Settings.
  3. En la página IAM y administración, selecciona la pestaña Administrar recursos.
  4. En la página Administrar recursos, navega al proyecto que deseas borrar y selecciónalo. Selecciona el botón Borrar para abrir una ventana de diálogo.
  5. En la ventana de diálogo, ingresa el ID del proyecto. Selecciona el botón Cerrar para borrar el proyecto.