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. En la aplicación completada, se mostrará un conjunto de fotos y también se incluirá un formulario para enviar un mensaje y comunicarte con el fotógrafo, así como una ventana de chat para conocer 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 Angular v14. Los componentes independientes son una función en versión preliminar de Angular v14, por lo que debes crear una aplicación completamente nueva con Angular v14. Los componentes independientes proporcionan una forma simplificada de compilar aplicaciones de Angular. Los componentes, las directivas y las canalizaciones 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 compilarás hoy.

Solicitud completada

Qué aprenderás

Cómo usar la CLI de Angular para crear la estructura 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 de los siguientes temas
- HTML. Cómo crear un elemento
- CSS y Less Cómo usar un selector CSS y crear un archivo de definición de estilo
- 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 los 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 del nodo

Compatible con Angular

14.15 o una versión posterior

Compatible

16.10 o una versión posterior

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 de npm para instalar la CLI de Angular desde una ventana de línea de comandos.

npm install --global @angular/cli

Para confirmar que la 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

Código fuente e imágenes

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 te quedas atascado, revisa el código final y las imágenes que se muestran en la página de la galería.

Descargar el código fuente

En tu navegador, navega a la siguiente página.

https://github.com/angular/codelabs/tree/standalone-components

En una ventana de línea de comandos, bifurca y clona el repositorio.

En el siguiente paso, compila tu aplicación de Galería de fotos.

3. Crear una nueva aplicación

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

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

Crea un proyecto nuevo

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

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

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

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

Cómo quitar el módulo de la aplicación

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

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

Después de borrar el módulo de aplicación, no tendrás ningún módulo en tu aplicación. Tu aplicación tiene solo un 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.

Navega al directorio src/app en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo app.component.ts.

Agrega el siguiente parámetro y valor a tu lista de decoradores.

standalone: true

El archivo app.component.ts debe coincidir 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';
}

Guarda el archivo app.component.ts.

Compila tu nueva aplicación independiente

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

Navega al directorio del proyecto photo-gallery-app nuevo
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 algunas cosas más.

Usa la API de bootstrapApplication

Para permitir que tu aplicación se ejecute sin un NgModule, debes usar un componente independiente como 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.

Navega al directorio src en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo main.ts.

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';

Quita el siguiente código de carga 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();
}

Cómo agregar el componente bootstrapApplication

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

Navega al directorio src en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo main.ts.
Importa el componente bootstrapApplication del servicio @angular/platform-browser.
```
import { bootstrapApplication } from '@angular/platform-browser';
```

Agrega el siguiente código para iniciar tu aplicación.

bootstrapApplication(AppComponent).catch(err => console.error(err));

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));

Agrega el router y los 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.

Navega al directorio src/app en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo app.component.ts.

Importa los módulos requeridos en el componente.

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

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';
}

Guarda el archivo app.component.ts.

Compila y ejecuta tu nueva aplicación independiente

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

Navega al directorio del proyecto photo-gallery-app nuevo.
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 la 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 completarse correctamente. Bien hecho. Creaste correctamente una aplicación de Angular que se ejecuta sin un módulo y con un componente independiente.

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

4. Mostrar las fotos

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

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

Navega al directorio src/assets del proyecto de GitHub.
Copia y pega los archivos en el directorio analogue de tu directorio de 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.

Navega al directorio src/app en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo app.component.html.
Borra todo el código HTML existente.

Copia y pega el código HTML del siguiente ejemplo.

<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

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.

Navega al directorio src en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo styles.css.

Copia y pega el código CSS del siguiente ejemplo.

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%;
  }
}

Guarda el archivo styles.css.

Actualiza el archivo de índice

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

Navega al directorio src en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo index.html.

Agrega la fuente Raleway para permitir que todas las páginas la hereden.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

Guarda el archivo index.html.
Guarda el código y revisa tu navegador. Con el servidor de desarrollo en ejecución, los cambios se reflejan en el navegador cuando guardas.
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 viste hasta ahora, los componentes independientes proporcionan una forma simplificada de compilar aplicaciones de Angular, ya que reducen la necesidad de usar NgModules. En las siguientes secciones, crearás un nuevo componente independiente que le permitirá al usuario enviar comentarios y chatear con un agente virtual.

Crea un nuevo componente independiente

Para crear este componente nuevo, volverás a usar la CLI de Angular.

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

Navega al directorio del proyecto photo-gallery-app nuevo.

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 la CLI de Angular para el framework de Angular
`generate component`	Crea la estructura de un componente nuevo
`feedback-and-chat`	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.

Navega al directorio src/app en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo app.component.ts.

Importa el nuevo componente independiente.

import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

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';
}

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 de carga de una página, mejorar el rendimiento y mejorar la experiencia del usuario. El router controla la carga diferida, que es la misma para un ngModule y un componente independiente.

Actualiza la plantilla HTML asociada al 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.

Navega al directorio src/app en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo app.component.html.

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>

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>

Guarda el archivo app.component.html.

Configura tus rutas

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

Navega al directorio src en el directorio del proyecto photo-gallery-app nuevo.
Abre el archivo main.ts.
Importa el método provideRouter y el módulo Routes. Angular v14.2.0 introdujo un nuevo método provideRouter que nos permite configurar un conjunto de rutas para la aplicación.
```
import { provideRouter, Routes } from '@angular/router';
```

Copia y pega el siguiente fragmento de código entre las importaciones y la instrucción if.

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

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));

Guarda el archivo main.ts.

Compila y revisa con las herramientas para desarrolladores de Chrome

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

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando 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 tu navegador, completa las siguientes acciones.

Navega a la siguiente página.
```
http://localhost:4200
```
Abre las Herramientas para desarrolladores de Chrome y elige la pestaña Red.
Actualiza la página para mostrar varios archivos, pero no el componente feedback-and-chat.Tu pantalla debe coincidir con la siguiente captura de pantalla.
Selecciona el botón Find out more about these guys! para dirigirte al componente independiente.El registro debe indicar que el componente solo se carga cuando accedes al router completo. Desplázate hasta el final de la lista para verificar que se haya cargado el componente. Tu pantalla debe coincidir con la siguiente captura de pantalla.

6. Agrega la IU del formulario

El formulario de envío de comentarios tiene tres campos de entrada de la IU y un botón en la parte inferior. Los tres campos de entrada de la IU son nombre completo, dirección de correo electrónico del remitente y 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 el usuario envíe comentarios.

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

Navega al archivo feedback-and-chat.component.html.
Quita el código HTML existente.

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>

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.

Navega al archivo feedback-and-chat.component.css.

Copia y pega el código CSS del siguiente ejemplo.

/*   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;
  }
}

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.

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando de Angular para compilar y ejecutar la aplicación, y abrir un servidor web.
```
ng serve
```
Tu aplicación no debería compilarse. No te preocupes, debes vincular el formulario.
Por el momento, revisa los siguientes elementos.
- Usas la vinculación de la propiedad formGroup para vincular contactForm al elemento form y la vinculación del evento ngSubmit.
- La directiva FormGroup escucha el evento de envío que emite el elemento form. Luego, la directiva FormGroup emite un evento ngSubmit al que puedes vincular 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.
A continuación, vincularás el formulario.

7. Agrega el control de eventos al formulario

La IU del formulario de envío de comentarios está completa, pero falta la interacción. El manejo de la entrada 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.

Analiza la entrada del usuario desde la estructura del DOM renderizada asociada al componente.
Valida la entrada del usuario, lo que incluye un captcha o un mecanismo similar para evitar el spam de bots.
Enviar un correo electrónico a una dirección de correo electrónico designada
Mostrar un mensaje amigable al usuario

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

Analiza la entrada del usuario desde la estructura del DOM renderizada asociada al componente.
Mostrar un mensaje amigable al usuario

Debes poner a prueba tus habilidades y aplicar las cuatro acciones.

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

Crea y agrega el modelo del formulario de envío de 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.

Navega al archivo feedback-and-chat.component.ts.
Importa el servicio FormBuilder y el módulo ReactiveModule del 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';
```

Importa el módulo ReactiveFormsModule.

imports: [CommonModule,ReactiveFormsModule],

Quita el siguiente constructor.
```
constructor() { }
```
Inserta 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 y recopilar el nombre, la dirección de correo electrónico y los comentarios de un usuario.
Crea la nueva propiedad contactForm y usa el método group para establecerla 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 a través de un 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.

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();
  }
}

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, completa las siguientes acciones.

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando 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 tu navegador, completa las siguientes acciones.

Navega a la siguiente página.
```
http://localhost:4200
```
Abre las Herramientas para desarrolladores de Chrome y elige la pestaña Consola.
Ingresa cualquier valor en los cuadros de texto Nombre completo, Correo electrónico y Comentarios.
Selecciona el botón Enviar.Debería aparecer un mensaje de confirmación en la página.
Verifica que los valores se muestren en la pestaña Console.Tu pantalla debe coincidir con la siguiente captura de pantalla.Implementaste correctamente el código para agregar un formulario de send message a la IU del componente y analizar las entradas del usuario.
A continuación, incorporarás un diálogo de chat para permitir que los visitantes de la aplicación hablen con Jimbo. Jimbo es un koala que te enseña datos interesantes sobre la vida silvestre.

8. Agregar un diálogo de chat

Aprovechar 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 muestra para que lo uses. En este lab, debes agregar un diálogo de chat al componente independiente para que los usuarios de la aplicación puedan interactuar con el bot. Para cumplir con este requisito, aprovecharás Dialogflow Messenger, una integración prediseñada que proporciona una ventana de diálogo personalizable. Cuando se abre, el diálogo de chat aparece en la parte inferior derecha de la pantalla y activa la intención de bienvenida predeterminada del agente. El bot saluda al usuario y comienza una conversación.

La siguiente implementación comparte datos curiosos 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 el canal principal de comunicación 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.

Navega al archivo feedback-and-chat.component.ts.

Copia y pega el elemento df-messenger del siguiente ejemplo de código en cualquier parte 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 para el 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 diálogo de chat. Inicialmente, se propaga antes con el nombre de tu agente, pero debes personalizarlo.
df-cx	Indica que la interacción es 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.
language-code	Especifica el código de idioma predeterminado para el primer intent.
ubicación	Especifica la región en la que implementas el agente.

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

Mostrar el modelo del formulario para enviar comentarios

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando de Angular para compilar la aplicación.
```
ng serve
```
Tu aplicación no debería compilarse. En la línea de comandos, debería aparecer el siguiente mensaje de error.
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 Web Component 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 el editor de código, completa las siguientes acciones.

Navega al archivo feedback-and-chat.component.ts.

Importa el esquema CUSTOM_ELEMENTS_SCHEMA.

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';

Agrega el 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]
})

...

El componente web df-messenger requiere un código JavaScript que solo se debe insertar cuando se carga el componente de comentarios y chat. Para ello, agregaremos el código pertinente al método ngOnInit(), que cargará el código de chat necesario 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);
}

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

Compilar y mostrar el diálogo de chat actualizado

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando 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 tu navegador, completa las siguientes acciones.

Navega a la siguiente página.
```
http://localhost:4200
```
Debería aparecer un ícono de chat en la parte inferior de la página.
Selecciona el ícono e interactúa con Jimbo, que te proporcionará datos interesantes sobre animales.
La aplicación funciona por completo.

9. Implementa la aplicación en Google App Engine

La aplicación se ejecuta de forma local en tu máquina. Lo que debes hacer como próximo 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.

Accede a tu cuenta de Gmail o Google Workspace. Si no tienes una, crea tu Cuenta de Google.
Habilita la facturación en la consola de Cloud para poder usar las APIs y los recursos de Cloud. Para obtener más información, consulta Crea, modifica o cierra la cuenta de Facturación de Cloud con servicio automático.
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.
Habilita la API de Cloud Build en Cloud Console. Para obtener más información, consulta Cómo habilitar el acceso a la API.
Instala Google Cloud CLI y la herramienta de línea de comandos de gcloud. Para obtener más información, consulta Instala gcloud CLI.
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.

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando de Angular para compilar y crear una versión de la aplicación lista para la 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 de 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.

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.

Navega al directorio del proyecto photo-gallery-app nuevo.
Crea un archivo server.js nuevo.

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}`);
});

Guarda el archivo server.js.

Conecta tu servidor web

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Abre el archivo package.json.

Modifica el comando de inicio 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.

Guarda el archivo package.json.

Configura App Engine

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Crea un archivo app.yaml nuevo.
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 tiempo de ejecución y el servicio.
Guarda el archivo app.yaml.

Actualiza la lista de elementos ignorados de gcloud

Para asegurarte de que no se suba tu directorio node_modules, crea un archivo .gcloudignore. Los archivos que se muestran en tu archivo .gcloudignore no se suben.

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Crea un archivo .gcloudignore nuevo.

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/

Guarda el archivo .gcloudignore.

Inicializa tu aplicación

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

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

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando para inicializar tu aplicación.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
En el mensaje, 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.

Navega al directorio del proyecto photo-gallery-app nuevo.
Ingresa el siguiente comando para implementar tu aplicación.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
En el mensaje, confirma la acción.Después de que el comando de implementación de gcloud se complete correctamente, se mostrará una URL para acceder a tu aplicación.
Ingresa el siguiente comando para abrir una pestaña nueva en tu navegador.
```
gcloud app browse
```

11. Felicitaciones

Felicitaciones. Creaste una galería de fotos de muestra 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 de envío de mensajes basada en formularios para proporcionar comentarios. También agregaste correctamente un diálogo de chat con un agente virtual de Dialogflow CX usando Dialogflow Messenger. Bien hecho.

Próximos pasos

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

En realidad, el formulario no envía comentarios. Refactorízalo para agregar la lógica de negocios que permita enviar un correo electrónico.
En una situación real, deberías validar la entrada del usuario e incluir un CAPTCHA o un mecanismo similar para evitar que los bots envíen spam.
Crea un agente nuevo y aprende a diseñar flujos de conversación en Dialogflow CX

Sigue 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 usaron en él.

En tu navegador, completa las siguientes acciones.

Accede a tu cuenta de Gmail o Google Workspace.
En la consola de Google Cloud, selecciona el botón Configuración de IAM y administración.
En la página IAM y administración, selecciona la pestaña Administrar recursos.
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.
En la ventana de diálogo, ingresa el ID del proyecto y selecciona el botón Cerrar para borrar el proyecto.

Versión del nodo	Compatible con Angular
14.15 o una versión posterior	Compatible
16.10 o una versión posterior	Compatible
18.1.0	No compatible