Primeiros passos com componentes independentes

1. Introdução

O que você criará

Neste codelab, você vai criar um aplicativo de galeria de fotos da vida selvagem usando o Angular v14. O aplicativo concluído vai mostrar um conjunto de fotos e também um formulário de enviar mensagem para entrar em contato com o fotógrafo e uma janela de chat para saber fatos interessantes sobre os animais nas fotos.

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

Todas as referências ao framework Angular e à CLI do Angular refletem o Angular v14. Os componentes independentes são um recurso de prévia do Angular v14. Por isso, é necessário criar um novo aplicativo usando essa versão. Os componentes independentes oferecem uma maneira simplificada de criar aplicativos Angular. Os componentes, as diretivas e os pipes independentes têm como objetivo simplificar 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 a estrutura de um novo projeto
  • Como usar componentes independentes do Angular para simplificar 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 fazer o bootstrap de um aplicativo usando um componente independente
  • Como fazer o carregamento lento de um componente independente
  • Como incorporar uma caixa de diálogo de chat 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 dos seguintes assuntos
    • HTML. Como criar um elemento.
    • CSS e menos. Como usar um seletor de CSS e criar um arquivo de definição de estilo.
    • TypeScript ou JavaScript. Como interagir com a estrutura do DOM.
    • git e GitHub. Como ramificar e clonar um repositório.
    • Interface de linha de comando, como bash ou zsh. Como navegar em diretórios e executar comandos.

2. configuração do ambiente

Configurar seu ambiente local

Para concluir este codelab, instale o seguinte software no seu computador local.

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

    Versão do nó

    Compatível com 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 seguinte comando npm 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 seguinte comando do Angular em uma linha de comando.

ng version

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

Saída do terminal da versão do Angular

Código-fonte e imagens

Você vai criar todo o aplicativo do zero, e este codelab vai ajudar você. O repositório do GitHub contém o código final. Se você tiver dificuldades, revise 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, ramifique e clone o repositório.

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

3. Crie um novo aplicativo

Para criar o aplicativo inicial, conclua as ações a seguir.

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

Criar um novo projeto

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

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

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

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 de aplicativo, conclua a seguinte ação.

  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 de aplicativo. Você precisa declarar o componente como independente.

Declarar seu componente independente

Em um editor de código, conclua as ações a seguir.

  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 seguinte parâmetro e valor à sua lista de decoradores.
    standalone: true
    O arquivo app.component.ts precisa ser muito parecido com o exemplo de código a seguir.
    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 independente

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. Insira o seguinte comando do Angular para compilar o novo aplicativo.
    ng serve

Seu aplicativo não vai ser compilado. Não se preocupe, você só precisa corrigir mais algumas coisas.

Usar a API bootstrapApplication

Para permitir que o aplicativo seja executado sem um NgModule, use 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, conclua as ações a seguir.

  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 a seguir, 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 seguinte código de bootstrap, 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, conclua as ações a seguir.

  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 seguinte código para inicializar o 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 a seguir.
    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 Router e outros recursos comuns do módulo, importe cada módulo diretamente no componente.

Em um editor de código, conclua as ações a seguir.

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

Compile e execute o novo aplicativo independente

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. Insira o seguinte comando do Angular para compilar e executar o aplicativo e abrir um servidor da Web. Talvez seja necessário fechar a IDE 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 ter sido corrigidos, e a compilação precisa ser bem-sucedida. Muito bem. Você criou um aplicativo Angular que é executado sem um módulo e com um componente independente.

  1. Em seguida, você vai embelezar o aplicativo para mostrar algumas fotos.

4. Mostrar as fotos

O novo aplicativo foi projetado para ser uma galeria de fotos e precisa mostrar algumas fotos.

Os componentes são os elementos básicos 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

Mova as fotos para o aplicativo

As imagens estão no aplicativo que você baixou do GitHub.

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

Criar o modelo HTML

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

Em um editor de código, conclua as ações a seguir.

  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 atual.
  4. Copie e cole o HTML do exemplo de código a seguir.
    <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, conclua as ações a seguir.

  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 a seguir.
    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, conclua as ações a seguir.

  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 o 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 o 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 novo componente independente que permite ao usuário enviar feedback e conversar com um agente virtual.

Criar um novo componente independente

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

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. Insira o seguinte comando do Angular para criar um 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 CLI do Angular para a estrutura Angular.

    generate component

    Cria a estrutura de um novo componente.

    feedback-and-chat

    O nome do componente

    --standalone

    Diz 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, conclua as ações a seguir.

  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 a seguir.
    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 imediato 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.

Atualizar o modelo HTML associado ao componente de 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, conclua as ações a seguir.

  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 a seguir 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 a seguir.
    <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 rotas

Em um editor de código, conclua as ações a seguir.

  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 "Routes". 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 a seguir 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 a seguir.
    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 Angular carrega o componente de forma lenta.

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. Insira o seguinte comando do 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, conclua 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.A tela precisa estar 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 esses caras! para acessar o componente independente.O registro vai indicar que o componente só é carregado quando você acessa o roteador completo. Role 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 mostrando um componente carregado de forma lenta

6. Adicionar a interface do formulário

O formulário de envio de feedback tem três campos de entrada na interface e um botão na parte de baixo. Os três campos de entrada da interface 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 se vincula a cada controle de formulário contactForm associado a cada um dos três campos de entrada da interface.

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, conclua 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 a seguir.
    <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 do formulário

No editor de código, conclua 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, conclua as ações a seguir.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Insira o seguinte comando do Angular para compilar e executar o aplicativo e abrir um servidor da Web.
    ng serve
    O aplicativo não vai ser compilado. Não se preocupe, você precisa vincular o formulário.
  3. Por enquanto, confira os itens a seguir.
    • Use 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 processamento de eventos ao formulário

A interface do formulário Enviar feedback está completa, mas não tem interação. O processamento de entradas 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. Analise a entrada do usuário da estrutura DOM renderizada associada ao componente.
  2. Valide a entrada do usuário, que inclui um CAPTCHA ou um mecanismo semelhante para evitar spam de bots.
  3. Envie um e-mail para um endereço designado.
  4. Mostre uma mensagem amigável para o usuário.

Neste codelab, você só vai implementar as seguintes ações.

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

Você precisa testar suas habilidades e implementar todas as quatro ações.

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

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

No editor de código, conclua 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 oferece métodos convenientes para gerar controles. Na próxima etapa, vamos usar a função inject. Portanto, precisamos importar essa função também de @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 usando a 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 designado.Neste codelab, você vai mostrar as entradas do usuário, usar o método reset para redefinir o formulário e mostrar uma mensagem de sucesso fácil de entender.
  7. Adicione o novo método onSubmit e defina a variável showMsg como true depois de inicializá-la.
    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 a seguir.
    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 "Enviar 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. Insira o seguinte comando do 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, conclua 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 confirmação vai aparecer na página.
  5. Verifique se os valores aparecem na guia Console.Sua tela precisa corresponder à captura de tela a seguir.Janela do navegador com o console mostrando os dados JSON inseridos no formulárioVocê implementou o código para adicionar um formulário de enviar mensagem à interface do componente e analisar as entradas do usuário.
  6. Em seguida, incorpore uma caixa de diálogo de chat para permitir que os visitantes do aplicativo conversem com o Jimbo. Jimbo é um coala que ensina fatos interessantes sobre a vida selvagem.

8. Adicionar uma caixa de diálogo de chat

Aproveite a experiência com interfaces de conversa, 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 linguagem humana e traduz o texto ou áudio do usuário final durante uma conversa para dados estruturados que apps e serviços podem entender.

Um agente virtual de amostra foi criado para você usar. Neste laboratório, você precisa adicionar uma caixa de diálogo de chat 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 de chat aparece no canto inferior direito da tela e aciona a intenção de boas-vindas padrão do agente. O bot cumprimenta o usuário e inicia uma conversa.

A implementação a seguir compartilha fatos curiosos sobre a vida selvagem com o usuário. Outras implementações para 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.

Adicionar o Dialogflow Messenger ao seu componente

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

No editor de código, conclua 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 a seguir 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.

    chat-title

    Pré-preenchido. Especifica o conteúdo a ser exibido 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.

    language-code

    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 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. Insira o seguinte comando do Angular para compilar o aplicativo.
    ng serve
    O aplicativo não vai ser compilado. A linha de comando vai mostrar a seguinte mensagem de erro: Mensagem de erro do df-messenger
  3. Em seguida, adicione um esquema personalizado.

Adicionar um 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, conclua 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-messenger exige um JavaScript que só deve 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.

Compilar e mostrar a caixa de diálogo de chat atualizada

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. Insira o seguinte comando do 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, conclua 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 o Jimbo, que dá informações legais sobre animais.Aplicativo mostrando uma janela de chat com um bot de mensagens 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 implante o aplicativo.

  • Criou um projeto na nuvem com o App Engine
  • Ativou a API Cloud Build
  • Instalar a CLI do Google Cloud

Siga estas etapas.

  1. Faça login na sua conta do Gmail ou do Google Workspace. Se você não tiver uma, crie uma Conta do Google.
  2. Ative o faturamento no console do Cloud para usar recursos e 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. Instale a CLI do Google Cloud e a ferramenta de linha de comando gcloud. Para saber mais, consulte Instalar a CLI gcloud.
  6. Inicialize a CLI do Google Cloud e verifique se a gcloud está configurada para usar o projeto do Google Cloud em que você quer fazer a implantação. Para saber mais, consulte Inicializar a CLI gcloud.

Criar seu aplicativo independente

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. Insira o seguinte comando do Angular para compilar e criar uma versão pronta para produção do aplicativo.
    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. Implante seu 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, conclua a seguinte ação.

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

Configurar o servidor da Web

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

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um 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.

Anexar o servidor da Web

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

  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 aplicativo.
  4. Salve o arquivo package.json.

Configurar o App Engine

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

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um 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 tempo de execução e o serviço.
  4. Salve o arquivo app.yaml.

Atualizar a lista de ignorados da 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, conclua as seguintes ações.

  1. Navegue até o novo diretório do projeto photo-gallery-app.
  2. Crie um 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, conclua as ações a seguir.

  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. Quando solicitado, escolha a região em que você quer localizar o aplicativo do App Engine.

implantar o aplicativo

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 comando a seguir 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, um URL para acessar o aplicativo será exibido.
  4. Digite o comando a seguir para abrir uma nova guia no navegador.
    gcloud app browse
    Saída do console de &quot;gcloud app deploy&quot; e entrada de &quot;gcloud app browse&quot;

11. Parabéns

Parabéns! Você criou uma galeria de fotos de amostra 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 receber feedback e comentários. Você também adicionou uma conversa por chat 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. Refatore-o para adicionar a lógica de negócios e enviar um e-mail.
  • Em um cenário real, você precisa validar a entrada do usuário e incluir um CAPTCHA ou um mecanismo semelhante para evitar spam de bots.
  • Crie um agente e saiba como projetar fluxos de conversa no Dialogflow CX

Continue testando o framework Angular e divirta-se.

Limpar e excluir seu projeto na nuvem

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

No navegador, conclua as seguintes ações:

  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. Clique no botão Excluir para abrir uma caixa de diálogo.
  5. Na caixa de diálogo, insira o ID do projeto e selecione o botão Encerrar para excluir o projeto.