Primeiros passos com componentes independentes

1. Introdução

O que você criará

Neste codelab, você vai criar um aplicativo de galeria de fotos de animais selvagens usando o Angular v14. O aplicativo preenchido vai mostrar um conjunto de fotos e também vai apresentar um formulário enviar mensagem para entrar em contato com o fotógrafo e uma janela de chat para saber mais sobre os animais nas fotos.

Você cria tudo no seu aplicativo usando o Angular v14 e o novo recurso de componentes independentes.

Todas as referências ao framework e à CLI do Angular refletem o Angular v14. Os componentes independentes são um recurso de pré-lançamento do Angular v14. Portanto, você precisa criar um aplicativo totalmente novo usando o Angular v14. Os componentes independentes oferecem uma maneira simplificada de criar aplicativos Angular. Os componentes e as diretivas independentes e os pipes independentes têm como objetivo agilizar a experiência de criação, reduzindo a necessidade de NgModules. Os componentes independentes podem aproveitar ao máximo o ecossistema atual de bibliotecas do Angular.

Este é o aplicativo que você está criando hoje.

Inscrição concluída

O que você vai aprender

  • Como usar a CLI do Angular para criar um novo projeto
  • Como usar componentes independentes do Angular para agilizar o desenvolvimento de apps Angular
  • Como criar um componente independente, ou seja, como criar a interface e adicionar alguma lógica de negócios
  • Como inicializar um aplicativo usando um componente independente
  • Como carregar um componente independente de forma lenta
  • Como incorporar uma conversa em um componente independente usando o Dialogflow Messenger
  • Como implantar um aplicativo Angular no Google Cloud App Engine usando a CLI do Google Cloud (gcloud)

O que é necessário

  • Uma conta do Gmail ou do Google Workspace
  • Conhecimento básico sobre os seguintes temas
    • HTML. Como criar um elemento.
    • CSS e menos. Como usar um seletor CSS e criar um arquivo de definição de estilo.
    • TypeScript ou JavaScript. Como interagir com a estrutura do DOM.
    • git e GitHub. Como bifurcar e clonar um repositório.
    • Interface de linha de comando, como bash ou zsh. Como navegar pelos diretórios e executar comandos.

2. Configuração do ambiente

Configurar seu ambiente local

Para concluir este codelab, você precisa instalar os softwares a seguir no computador local.

  • Uma versão LTS ativa ou LTS de manutenção do Node.js. Usado para instalar o framework e a CLI do Angular.

    Versão do nó

    Suporte do Angular

    14.15 ou mais recente

    Compatível

    16.10 ou mais recente

    Compatível

    18.1.0

    Sem suporte

    Para verificar a versão do Node.js no computador local, execute o seguinte comando node em uma janela de linha de comando.
    node -v
  • Um editor de código ou ambiente de desenvolvimento integrado. Usado para abrir e editar arquivos.Visual Studio Code ou outro editor de código de sua escolha.

Instalar a CLI do Angular

Depois de configurar todas as dependências, execute o comando npm abaixo para instalar a CLI do Angular em uma janela de linha de comando.

npm install --global @angular/cli

Para confirmar se a configuração está correta, execute o comando Angular a seguir em uma linha de comando.

ng version

Se o comando do Angular for concluído, você vai receber uma mensagem semelhante à captura de tela abaixo.

Saída do terminal da versão angular

Código-fonte e imagens

Você cria todo o aplicativo do zero e este codelab ajuda você a fazer isso. O repositório do GitHub contém o código final. Se você ficar preso, analise o código final e as imagens exibidas na página da galeria.

Para fazer o download do código-fonte.

  1. No navegador, acesse a página a seguir.
    https://github.com/angular/codelabs/tree/standalone-components
  2. Em uma janela de linha de comando, bifurque e clone o repositório.

Na próxima etapa, crie o aplicativo da galeria de fotos.

3. Crie um novo aplicativo

Para criar o aplicativo inicial, siga estas etapas:

Use a CLI do Angular para criar um novo espaço de trabalho. Para saber mais sobre a CLI e o framework do Angular, acesse angular.io.

Criar um novo projeto

Em uma janela de linha de comando, realize as seguintes ações.

  1. Digite o seguinte comando do Angular para criar um novo projeto chamado photo-gallery-app.
    ng new photo-gallery-app
  2. Em cada solicitação, aceite a escolha padrão.O framework Angular instala os pacotes e as dependências necessários. Esse processo pode levar alguns minutos.

Depois que o Angular CLI for concluído, você terá um novo espaço de trabalho do Angular e um aplicativo simples pronto para uso.

Seu novo aplicativo é estruturado como um aplicativo Angular padrão. O NgModule no seu novo aplicativo é redundante para este codelab.

Remover o módulo do aplicativo

Para remover o módulo do aplicativo, faça o seguinte.

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Exclua o arquivo app.module.ts.

Depois de excluir o módulo do aplicativo, você não terá mais nenhum módulo no aplicativo. Seu aplicativo tem apenas um componente, que é o componente do aplicativo. Você precisa declarar o componente como independente.

Declarar o componente autônomo

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo app.component.ts.
  3. Adicione o parâmetro e o valor a seguir à lista de decoradores.
    standalone: true
    O arquivo app.component.ts precisa ser muito parecido com o exemplo de código abaixo.
    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. Salve o arquivo app.component.ts.

Compile seu novo aplicativo autônomo

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app
  2. Digite o seguinte comando do Angular para compilar o novo aplicativo.
    ng serve

O aplicativo não será compilado. Não se preocupe, você só precisa corrigir algumas coisas.

Usar a API bootstrapApplication

Para permitir que seu aplicativo seja executado sem uma NgModule, é necessário usar um componente independente como o componente raiz usando a API bootstrapApplication.

Remover referências ao módulo do aplicativo

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo main.ts.
  3. Remova o código de importação abaixo, já que você não tem mais um módulo de aplicativo.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Remova o código de inicialização abaixo, já que você não tem mais um módulo de aplicativo.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    O arquivo main.ts precisa corresponder ao exemplo de código a seguir.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Adicionar o componente bootstrapApplication

Em um editor de código, faça o seguinte:

  1. Navegue até o diretório src no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo main.ts.
  3. Importe o componente bootstrapApplication do serviço @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Adicione o código abaixo para inicializar seu aplicativo.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Importe o componente e as bibliotecas necessárias.
    import { AppComponent } from './app/app.component';
    O arquivo main.ts precisa corresponder ao exemplo de código abaixo.
    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));

Adicionar roteador e módulos comuns

Para usar o roteador e outros recursos comuns de módulo, importe cada módulo diretamente para o componente.

Em um editor de código, faça o seguinte:

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo app.component.ts.
  3. Importar os módulos necessários para o componente.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Adicione as importações no componente.
    imports: [CommonModule, RouterModule],
    O arquivo app.component.ts precisa corresponder ao exemplo de código a seguir.
    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. Salve o arquivo app.component.ts.

Compilar e executar o novo aplicativo independente

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando do Angular para compilar e executar o aplicativo e abrir um servidor da Web. Talvez seja necessário fechar o ambiente de desenvolvimento integrado antes de executar o aplicativo para remover erros de compilação.
    ng serve

O servidor de desenvolvimento precisa ser executado na porta 4200. Todos os erros anteriores devem desaparecer e a compilação deve ser concluída. Muito bem. Você criou um aplicativo Angular que é executado sem um módulo e com um componente independente.

  1. Em seguida, você vai melhorar seu aplicativo para mostrar algumas fotos.

4. Mostrar as fotos

Seu novo aplicativo foi projetado para ser uma galeria de fotos e deve mostrar algumas fotos.

Os componentes são os blocos de construção principais dos apps Angular. Os componentes têm três aspectos principais.

  • Um arquivo HTML para o modelo
  • Um arquivo CSS para os estilos
  • Um arquivo TypeScript para o comportamento do app

Mover as fotos para seu aplicativo

As imagens são fornecidas no aplicativo que você fez o download anteriormente no GitHub.

  1. Navegue até o diretório src/assets do projeto do GitHub.
  2. Copie e cole os arquivos no diretório analogue do projeto photo-gallery-app.

Criar o modelo HTML

O arquivo app.component.html é o arquivo de modelo HTML associado ao componente AppComponent.

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo app.component.html.
  3. Exclua todo o HTML.
  4. Copie e cole o HTML do exemplo de código abaixo.
    <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. Salve o arquivo app.component.html.

Criar o arquivo de definição de estilo

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo styles.css.
  3. Copie e cole o CSS do exemplo de código abaixo.
    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. Salve o arquivo styles.css.

Atualizar o arquivo de índice

Em um editor de código, faça o seguinte:

  1. Navegue até o diretório src no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo index.html.
  3. Adicione a fonte Raleway para permitir que todas as páginas a herdem.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Salve o arquivo index.html.
  5. Salve o código e verifique seu navegador. Com o servidor de desenvolvimento em execução, as mudanças são refletidas no navegador quando você salva.
  6. Em seguida, você vai criar um novo componente independente para enviar feedback e conversar com Jimbo. Continue este codelab para saber mais sobre o Jimbo.

5. Adicionar um novo componente independente

Como você viu até agora, os componentes independentes oferecem uma maneira simplificada de criar aplicativos Angular, reduzindo a necessidade de NgModules. Nas seções a seguir, você vai criar um componente independente que permite que o usuário envie feedback e converse com um agente virtual.

Criar um componente independente

Para criar esse novo componente, use a CLI do Angular novamente.

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Insira o seguinte comando do Angular para criar um novo componente chamado feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    A tabela a seguir descreve as partes do comando.

    Parte

    Detalhes

    ng

    Define todos os comandos da Angular CLI para o framework Angular

    generate component

    Cria a estrutura para um novo componente

    feedback-and-chat

    O nome do componente

    --standalone

    Informa ao framework Angular para criar um componente independente

Importar o novo componente independente

Para usar o novo componente independente, primeiro adicione-o à matriz imports no arquivo app.components.ts.

Esse é um componente independente, então basta importá-lo como se fosse um módulo.

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo app.component.ts.
  3. Importe o novo componente independente.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Atualize as importações no componente.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    O arquivo app.component.ts precisa corresponder ao exemplo de código abaixo.
    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. Salve o arquivo app.component.ts.

Carregar o componente de forma lenta

Mude de um paradigma de carregamento antecipado para um de carregamento lento, em que o código não é enviado ao cliente até que você precise dele. O carregamento lento é uma ótima abordagem para reduzir o tempo de carregamento de uma página, melhorar o desempenho e a experiência do usuário. O roteador processa o carregamento lento, que é o mesmo para um ngModule e um componente independente.

Atualize o modelo HTML associado ao componente do aplicativo

Para carregar o componente independente de forma lenta, adicione um botão à interface que só ativa o componente quando um usuário o seleciona.

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src/app no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo app.component.html.
  3. Role até o fim do arquivo e adicione o exemplo de código abaixo antes de fechar o elemento article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. O arquivo app.component.html precisa corresponder ao exemplo de código abaixo.
    <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. Salve o arquivo app.component.html.

Configurar suas rotas

Em um editor de código, realize as seguintes ações.

  1. Navegue até o diretório src no novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo main.ts.
  3. Importe o método provideRouter e o módulo de rotas. O Angular v 14.2.0 introduziu um novo método provideRouter, que permite configurar um conjunto de rotas para o aplicativo.
    import { provideRouter, Routes } from '@angular/router';
  4. Copie e cole o snippet de código abaixo entre as importações e a instrução if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Copie e cole o snippet de código a seguir e substitua o método bootstrapApplication.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    O arquivo main.ts precisa corresponder ao exemplo de código abaixo.
    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. Salve o arquivo main.ts.

Compilar e revisar com as Ferramentas para desenvolvedores do Chrome

Use as Ferramentas para desenvolvedores do Chrome para analisar como o framework do Angular carrega lentamente o componente.

Em uma janela de linha de comando, conclua as ações a seguir.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando Angular para compilar e executar o aplicativo e abrir um servidor da Web.
    ng serve
    O servidor de desenvolvimento precisa ser executado na porta 4200.

No navegador, realize as seguintes ações.

  1. Acesse a página a seguir.
    http://localhost:4200
  2. Abra as Ferramentas para desenvolvedores do Chrome e escolha a guia Rede.
  3. Atualize a página para mostrar vários arquivos, mas não o componente feedback-and-chat.Sua tela precisa ser igual à captura de tela a seguir.Captura de tela do app com o painel do Chrome DevTools aberto
  4. Selecione o botão Saiba mais sobre eles! para encaminhar ao componente independente.O registro vai indicar que o componente só é carregado quando você acessa o roteador completo. Role a tela para baixo até o final da lista para verificar se o componente foi carregado. A tela precisa estar igual à captura de tela abaixo.Captura de tela do app com o painel do Chrome DevTools aberto demonstrando o componente carregado com atraso

6. Adicionar a interface do formulário

O formulário de envio de feedback tem três campos de entrada da interface e um botão na parte de baixo. Os três campos de entrada da IU são nome completo, endereço de e-mail do remetente e comentários.

Para oferecer suporte à interface, adicione um atributo formControlName em um elemento input que seja vinculado a cada controle de formulário contactForm associado a cada um dos três campos da interface de entrada.

Adicionar o formulário ao modelo HTML

Adicione um formulário à interface para permitir que um usuário envie feedback.

No editor de código, realize as seguintes ações.

  1. Navegue até o arquivo feedback-and-chat.component.html.
  2. Remova o HTML atual.
  3. Copie e cole o HTML do exemplo de código abaixo.
    <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. Salve o arquivo feedback-and-chat.component.html.

Atualizar o arquivo de estilos para o formulário

No editor de código, realize as seguintes ações.

  1. Navegue até o arquivo feedback-and-chat.component.css.
  2. Copie e cole o CSS do exemplo de código a seguir.
    /*   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. Salve o arquivo feedback-and-chat.component.css.

Compilar a atualização da interface para o formulário

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando do Angular para compilar e executar o aplicativo e abrir um servidor da Web.
    ng serve
    O aplicativo não será compilado. Não se preocupe, você vai precisar vincular o formulário.
  3. Por enquanto, revise os itens a seguir.
    • Você usa a vinculação de propriedade formGroup para vincular contactForm ao elemento form e a vinculação de evento ngSubmit
    • A diretiva FormGroup detecta o evento de envio emitido pelo elemento form. Em seguida, a diretiva FormGroup emite um evento ngSubmit que pode ser vinculado à função de callback onSubmit.
    • Em uma etapa posterior, você vai implementar a função de callback onSubmit no arquivo feedback-and-chat.component.ts.
  4. Em seguida, você vai vincular o formulário.

7. Adicionar manipulação de eventos ao formulário

A interface do formulário Enviar feedback está completa, mas falta a interação. Processar a entrada do usuário com formulários é a base de muitos aplicativos comuns.

Em um cenário real, você precisa implementar a lógica de negócios para concluir as seguintes ações.

  1. Analisa a entrada do usuário na estrutura DOM renderizada associada ao componente.
  2. Valide a entrada do usuário, que inclui um captcha ou um mecanismo semelhante para evitar o envio de spam por bots.
  3. Enviar um e-mail para um endereço de e-mail específico.
  4. Mostre uma mensagem amigável ao usuário.

Neste codelab, você vai implementar apenas as ações a seguir.

  1. Analisar a entrada do usuário da estrutura DOM renderizada associada ao componente.
  2. Mostre uma mensagem amigável ao usuário.

Você deve desafiar suas habilidades e implementar todas as quatro ações.

Adicionar o modelo de formulário de mensagem de envio ao componente

Crie e adicione o modelo do formulário de envio de feedback à classe do componente. O modelo de formulário determina o status do formulário. O serviço FormBuilder fornece métodos convenientes para criar um controle de interface.

No editor de código, realize as seguintes ações.

  1. Navegue até o arquivo feedback-and-chat.component.ts.
  2. Importe o serviço FormBuilder e o módulo ReactiveModule do pacote @angular/forms. Esse serviço fornece métodos convenientes para gerar controles. Na próxima etapa, vamos aproveitar a função inject. Portanto, precisamos importá-la também do @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Importe o módulo ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Remova o seguinte construtor.
    constructor() { }
  5. Injete o serviço FormBuilder pela função inject logo abaixo da assinatura da classe.
    private formBuilder = inject(FormBuilder);
    Use o método group do serviço FormBuilder para criar um modelo de formulário e coletar o nome, o endereço de e-mail e os comentários de um usuário.
  6. Crie a nova propriedade contactForm e use o método group para defini-la como um modelo de formulário.O modelo de formulário contém os campos name, email e comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Defina um método onSubmit para processar o formulário.Em um cenário real, o método onSubmit permite que o usuário envie uma mensagem de feedback ao fotógrafo usando um e-mail enviado para um endereço de e-mail específico.Neste codelab, você mostra as entradas do usuário, usa o método reset para redefinir o formulário e mostra uma mensagem de sucesso fácil de usar.
  7. Adicione o novo método onSubmit e defina a variável showMsg como true após a inicialização.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    O arquivo feedback-and-chat.component.ts precisa corresponder ao exemplo de código abaixo.
    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. Salve o arquivo feedback-and-chat.component.ts.

Compilar e mostrar o modelo do formulário de envio de feedback

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando Angular para compilar e executar o aplicativo e abrir um servidor da Web.
    ng serve
  3. O servidor de desenvolvimento precisa ser executado na porta 4200.

No navegador, realize as seguintes ações.

  1. Acesse a página a seguir.
    http://localhost:4200
  2. Abra as Ferramentas para desenvolvedores do Chrome e escolha a guia Console.
  3. Insira valores nas caixas de texto Nome completo, E-mail e Comentários.
  4. Selecione o botão Enviar.Uma mensagem de êxito vai aparecer na página.
  5. Verifique a exibição dos valores na guia Console.Sua tela deve corresponder à captura de tela a seguir.Janela do navegador com o console mostrando dados JSON inseridos no formulárioVocê implementou o código para adicionar um formulário de envio de mensagem à interface do componente e analisar as entradas do usuário.
  6. Em seguida, você incorpora uma caixa de diálogo de chat para permitir que os visitantes do aplicativo conversem com Jimbo. Jimbo é um coala, e você aprende alguns fatos interessantes sobre a vida selvagem.

8. Adicionar uma caixa de diálogo de chat

Aproveite a experiência com interfaces de conversação, como o Dialogflow CX ou plataformas semelhantes. Um agente do Dialogflow CX é um agente virtual que processa conversas simultâneas com pessoas. Ele é um módulo de processamento de linguagem natural que reconhece as nuances da fala humana e traduz o texto ou áudio do usuário final durante uma conversa para dados estruturados que os apps e serviços conseguem entender.

Um agente virtual de exemplo já foi criado para você usar. O que você precisa fazer neste laboratório é adicionar uma conversa ao componente independente para permitir que os usuários do aplicativo interajam com o bot. Para atender a esse requisito, você vai usar o Dialogflow Messenger, uma integração pré-criada que oferece uma janela de diálogo personalizável. Quando aberta, a caixa de diálogo do chat aparece no canto inferior direito da tela e aciona a intent de boas-vindas padrão do agente. O bot cumprimenta o usuário e inicia uma conversa.

A implementação a seguir compartilha fatos divertidos sobre a vida selvagem com o usuário. Outras implementações de agentes virtuais podem abordar casos de uso complexos para clientes, como um agente humano de call center. Muitas empresas usam um agente virtual como o principal canal de comunicação com o site da empresa.

Adicione o Dialogflow Messenger ao seu componente

Assim como o formulário, a caixa de diálogo de chat só aparece quando o componente independente é carregado.

No editor de código, realize as seguintes ações.

  1. Navegue até o arquivo feedback-and-chat.component.ts.
  2. Copie e cole o elemento df-messenger no exemplo de código abaixo em qualquer lugar da 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>
    O Dialogflow gera os atributos do elemento df-messenger quando você seleciona a integração do Dialogflow Messenger.

    Atributo

    Detalhes

    agent-id

    Pré-preenchido. Especifica o identificador exclusivo do agente do Dialogflow.

    título-do-chat

    Pré-preenchido. Especifica o conteúdo a ser mostrado na parte de cima da caixa de diálogo do chat. Inicialmente preenchido com o nome do seu agente, mas você precisa personalizar.

    df-cx

    Indica que a interação é com um agente CX. Defina o valor como true.

    intent

    Especifica o evento personalizado usado para acionar a primeira intent quando a caixa de diálogo de chat é aberta.

    código do idioma

    Especifica o código de idioma padrão para a primeira intent.

    local

    Especifica a região em que você implanta o agente.

  3. Salve o arquivo feedback-and-chat.component.ts.

Mostrar o modelo do formulário de envio de feedback

Em uma janela de linha de comando, conclua as ações a seguir.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando do Angular para compilar o aplicativo.
    ng serve
    O aplicativo não será compilado. A linha de comando deve exibir a mensagem de erro a seguir.Mensagem de erro df-messenger
  3. Em seguida, adicione um esquema personalizado.

Adicionar esquema personalizado ao componente independente

O elemento df-messanger não é conhecido. É um componente da Web personalizado. A mensagem de erro do framework Angular sugere que você adicione um CUSTOM_ELEMENTS_SCHEMA aos componentes independentes para suprimir a mensagem.

No editor de código, realize as seguintes ações.

  1. Navegue até o arquivo feedback-and-chat.component.ts.
  2. Importe o esquema CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Adicione o CUSTOM_ELEMENTS_SCHEMA à lista de esquemas.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    O arquivo feedback-and-chat.component.ts precisa corresponder ao exemplo de código a seguir.
    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. O componente da Web df-messanger exige um JavaScript que só pode ser injetado quando o componente de feedback e chat é carregado. Para isso, vamos adicionar o código relevante ao método ngOnInit(), que vai carregar o script de chat necessário para ativar o 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. Salve o arquivo feedback-and-chat.component.ts.

Compile e exiba a caixa de diálogo de chat atualizada

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando Angular para compilar e executar o aplicativo e abrir um servidor da Web.
    ng serve
    O servidor de desenvolvimento precisa ser executado na porta 4200.

No navegador, realize as seguintes ações.

  1. Acesse a página a seguir.
    http://localhost:4200
    Um ícone de chat vai aparecer na parte de baixo da página.
  2. Selecione o ícone e interaja com Jimbo.Ele mostra curiosidades sobre animais.Aplicativo mostrando a janela de chat com o bot do Messenger respondendo
  3. O aplicativo é totalmente funcional.

9. Implantar o aplicativo no Google App Engine

O aplicativo está sendo executado localmente na sua máquina. A próxima e última etapa deste codelab é implantar o app no Google App Engine.

Para saber mais sobre o Google App Engine, consulte App Engine.

Configurar o ambiente para o Google App Engine

Se você já atende a todas as condições a seguir, pule as próximas etapas e prossiga com a implantação do aplicativo.

  • criou um projeto do Cloud com o App Engine;
  • Ativação da API Cloud Build
  • Instalou a CLI do Google Cloud

Conclua as seguintes ações.

  1. Faça login na sua conta do Gmail ou do Google Workspace. Crie uma Conta do Google, se você ainda não tiver uma.
  2. Ative o faturamento no console do Cloud para usar os recursos e as APIs do Cloud. Para saber mais, consulte Criar, modificar ou encerrar sua conta de autoatendimento do Cloud Billing.
  3. Crie um projeto do Google Cloud para armazenar os recursos do aplicativo do App Engine e outros recursos do Google Cloud. Para saber mais, consulte Como criar e gerenciar projetos.
  4. Ative a API Cloud Build no Console do Cloud. Para saber mais, consulte Ativar o acesso à API.
  5. Instalar a CLI do Google Cloud e a ferramenta de linha de comando gcloud. Para saber mais, consulte Instalar a CLI gcloud.
  6. Inicie a Google Cloud CLI e verifique se o gcloud está configurado para usar o projeto do Google Cloud que você quer implantar. Para saber mais, consulte Como inicializar a CLI gcloud.

Criar o aplicativo independente

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando Angular para compilar e criar uma versão do aplicativo pronta para produção.
    ng build

A versão pronta para produção do aplicativo é criada no subdiretório dist do diretório do projeto photo-gallery-app.

10. Implantar o aplicativo usando o framework Express.js

O exemplo de código neste codelab usa o framework Express.js para processar solicitações HTTP. Você pode usar o framework da Web que preferir.

Instalar o framework Express.js

Em uma janela de linha de comando, realize a seguinte ação.

  1. Digite o seguinte comando para instalar a estrutura Express.js.
    npm install express --save

Configurar o servidor da Web

No editor de código, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um novo arquivo server.js.
  3. Copie e cole o código a seguir.
    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. Salve o arquivo server.js.

Conectar o servidor da Web

No editor de código, faça o seguinte.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Abra o arquivo package.json.
  3. Modifique o comando de início para executar o nó no arquivo 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"
  },
    O atributo start é o ponto de entrada do seu aplicativo.
  4. Salve o arquivo package.json.

Configurar o App Engine

No editor de código, faça o seguinte.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um novo arquivo app.yaml.
  3. Copie e cole o código a seguir.
    runtime: nodejs16
service: default
    As informações no arquivo app.yaml especificam a configuração do App Engine. Você só precisa especificar o ambiente de execução e o serviço.
  4. Salve o arquivo app.yaml.

Atualizar a lista de ignorados do gcloud

Para garantir que o diretório node_modules não seja enviado, crie um arquivo .gcloudignore. Os arquivos listados no arquivo .gcloudignore não são enviados.

No editor de código, faça o seguinte.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um novo arquivo .gcloudignore.
  3. Copie e cole o código a seguir.
    # 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. Salve o arquivo .gcloudignore.

Inicializar o aplicativo

Antes de implantar o aplicativo, inicialize-o com seu projeto e escolha uma região associada.

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o seguinte comando para inicializar o aplicativo.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. No prompt, escolha a região em que você quer localizar o aplicativo do App Engine.

Implantar aplicativo

Em uma janela de linha de comando, realize as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Digite o comando abaixo para implantar o aplicativo.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. No prompt, confirme a ação.Depois que o comando de implantação do gcloud for concluído, ele vai mostrar um URL para acessar seu aplicativo.
  4. Digite o comando a seguir para abrir uma nova guia no navegador.
    gcloud app browse
    Saída do console do gcloud app deploy e entrada no gcloud app browse

11. Parabéns

Parabéns! Você criou uma galeria de fotos de exemplo usando o Angular v14 e a implantou no App Engine.

Você testou o recurso de componente independente e o carregamento lento. Você criou um recurso de envio de mensagens baseado em formulário para dar feedback e comentários. Você também adicionou uma conversa com um agente virtual do Dialogflow CX usando o Dialogflow Messenger. Muito bem.

Próximas etapas

Agora que você concluiu o aplicativo básico, melhore-o usando as seguintes ideias.

  • O formulário não envia feedback. Refactorize-o para adicionar a lógica de negócios para enviar um e-mail.
  • Em um cenário real, você deve validar a entrada do usuário e incluir um captcha ou um mecanismo semelhante para evitar spam de bots
  • Criar um novo agente e aprender a projetar fluxos de conversação no Dialogflow CX

Continue testando o framework do Angular e se divirta.

Limpar e excluir seu projeto do Cloud

Você pode manter seu projeto do Cloud ou excluí-lo para interromper o faturamento de todos os recursos usados nele.

No navegador, conclua as ações a seguir.

  1. Faça login na sua conta do Gmail ou do Google Workspace.
  2. No console do Google Cloud, selecione o botão Configurações do IAM e administrador.
  3. Na página IAM e administrador, selecione a guia Gerenciar recursos.
  4. Na página Gerenciar recursos, navegue até o projeto que você quer excluir e selecione-o. Selecione o botão Excluir para abrir uma janela de diálogo.
  5. Na janela de diálogo, insira o ID do projeto. Selecione o botão Shut down para excluir o projeto.