Sobre este codelab
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.
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
ouzsh
. 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.Para verificar a versão do Node.js no computador local, execute o seguinte comando
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
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.
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.
- No navegador, acesse a página a seguir.
https://github.com/angular/codelabs/tree/standalone-components
- 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.
- Digite o seguinte comando do Angular para criar um novo projeto chamado
photo-gallery-app
.ng new photo-gallery-app
- 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.
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - 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.
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
app.component.ts
. - Adicione o parâmetro e o valor a seguir à lista de decoradores.
O arquivostandalone: true
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';
} - Salve o arquivo
app.component.ts
.
Compile seu novo aplicativo autônomo
Em uma janela de linha de comando, realize as seguintes ações.
- Navegue até o novo diretório do projeto
photo-gallery-app
- 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.
- Navegue até o diretório
src
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
main.ts
. - 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'; - Remova o código de inicialização abaixo, já que você não tem mais um módulo de aplicativo.
O arquivoplatformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));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:
- Navegue até o diretório
src
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
main.ts
. - Importe o componente
bootstrapApplication
do serviço@angular/platform-browser
.import { bootstrapApplication } from '@angular/platform-browser';
- Adicione o código abaixo para inicializar seu aplicativo.
bootstrapApplication(AppComponent).catch(err => console.error(err));
- Importe o componente e as bibliotecas necessárias.
O arquivoimport { AppComponent } from './app/app.component';
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:
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
app.component.ts
. - Importar os módulos necessários para o componente.
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; - Adicione as importações no componente.
O arquivoimports: [CommonModule, RouterModule],
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';
} - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - 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.
- 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.
- Navegue até o diretório
src/assets
do projeto do GitHub. - Copie e cole os arquivos no diretório
analogue
do projetophoto-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.
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
app.component.html
. - Exclua todo o HTML.
- 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 - 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.
- Navegue até o diretório
src
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
styles.css
. - 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%;
}
} - Salve o arquivo
styles.css
.
Atualizar o arquivo de índice
Em um editor de código, faça o seguinte:
- Navegue até o diretório
src
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
index.html
. - Adicione a fonte
Raleway
para permitir que todas as páginas a herdem.<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
- Salve o arquivo
index.html
. - 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.
- 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Insira o seguinte comando do Angular para criar um novo componente chamado
feedback-and-chat
. A tabela a seguir descreve as partes do comando.ng generate component feedback-and-chat --standalone
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.
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
app.component.ts
. - Importe o novo componente independente.
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
- Atualize as importações no componente.
O arquivoimports: [CommonModule, RouterModule, FeedbackAndChatComponent],
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';
} - 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.
- Navegue até o diretório
src/app
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
app.component.html
. - 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> - 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> - Salve o arquivo
app.component.html
.
Configurar suas rotas
Em um editor de código, realize as seguintes ações.
- Navegue até o diretório
src
no novo diretório do projetophoto-gallery-app
. - Abra o arquivo
main.ts
. - 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';
- 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),
}
] - Copie e cole o snippet de código a seguir e substitua o método
bootstrapApplication
. O arquivobootstrapApplication(AppComponent, {
providers: [
provideRouter(routes)
]
}).catch(err => console.error(err));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)); - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o seguinte comando Angular para compilar e executar o aplicativo e abrir um servidor da Web.
O servidor de desenvolvimento precisa ser executado na portang serve
4200
.
No navegador, realize as seguintes ações.
- Acesse a página a seguir.
http://localhost:4200
- Abra as Ferramentas para desenvolvedores do Chrome e escolha a guia Rede.
- 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. - 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.
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.
- Navegue até o arquivo
feedback-and-chat.component.html
. - Remova o HTML atual.
- 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> - 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.
- Navegue até o arquivo
feedback-and-chat.component.css
. - 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;
}
} - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o seguinte comando do Angular para compilar e executar o aplicativo e abrir um servidor da Web.
O aplicativo não será compilado. Não se preocupe, você vai precisar vincular o formulário.ng serve
- Por enquanto, revise os itens a seguir.
- Você usa a vinculação de propriedade
formGroup
para vincularcontactForm
ao elementoform
e a vinculação de eventongSubmit
- A diretiva
FormGroup
detecta o evento de envio emitido pelo elementoform
. Em seguida, a diretivaFormGroup
emite um eventongSubmit
que pode ser vinculado à função de callbackonSubmit
. - Em uma etapa posterior, você vai implementar a função de callback
onSubmit
no arquivofeedback-and-chat.component.ts
.
- Você usa a vinculação de propriedade
- Em seguida, você vai vincular o formulário.
7. Adicionar o processamento 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.
- Analisa a entrada do usuário na estrutura DOM renderizada associada ao componente.
- Valide a entrada do usuário, que inclui um captcha ou um mecanismo semelhante para evitar o envio de spam por bots.
- Enviar um e-mail para um endereço de e-mail específico.
- Mostre uma mensagem amigável ao usuário.
Neste codelab, você vai implementar apenas as ações a seguir.
- Analisar a entrada do usuário da estrutura DOM renderizada associada ao componente.
- 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.
- Navegue até o arquivo
feedback-and-chat.component.ts
. - Importe o serviço
FormBuilder
e o móduloReactiveModule
do pacote@angular/forms
. Esse serviço fornece métodos convenientes para gerar controles. Na próxima etapa, vamos aproveitar a funçãoinject
. Portanto, precisamos importá-la também do@angular/core
.import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; - Importe o módulo
ReactiveFormsModule
.imports: [CommonModule,ReactiveFormsModule],
- Remova o seguinte construtor.
constructor() { }
- Injete o serviço
FormBuilder
pela funçãoinject
logo abaixo da assinatura da classe. Use o métodoprivate formBuilder = inject(FormBuilder);
group
do serviçoFormBuilder
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. - Crie a nova propriedade
contactForm
e use o métodogroup
para defini-la como um modelo de formulário.O modelo de formulário contém os camposname
,email
ecomments
. Defina um métodocontactForm = this.formBuilder.group({
fullname: '',
email: '',
comments: ''
});onSubmit
para processar o formulário.Em um cenário real, o métodoonSubmit
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étodoreset
para redefinir o formulário e mostra uma mensagem de sucesso fácil de usar. - Adicione o novo método
onSubmit
e defina a variávelshowMsg
comotrue
após a inicialização. O arquivoshowMsg: boolean = false;
onSubmit(): void {
console.log('Your feedback has been submitted', this.contactForm.value);
this.showMsg = true;
this.contactForm.reset();
}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();
}
} - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - 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.
- Acesse a página a seguir.
http://localhost:4200
- Abra as Ferramentas para desenvolvedores do Chrome e escolha a guia Console.
- Insira valores nas caixas de texto Nome completo, E-mail e Comentários.
- Selecione o botão Enviar.Uma mensagem de êxito vai aparecer na página.
- Verifique a exibição dos valores na guia Console.Sua tela deve corresponder à captura de tela a seguir.
Você implementou o código para adicionar um formulário de envio de mensagem à interface do componente e analisar as entradas do usuário.
- 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.
- Navegue até o arquivo
feedback-and-chat.component.ts
. - Copie e cole o elemento
df-messenger
no exemplo de código abaixo em qualquer lugar da página. O Dialogflow gera os atributos do elemento<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>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.
- 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o seguinte comando do Angular para compilar o aplicativo.
O aplicativo não será compilado. A linha de comando deve exibir a mensagem de erro a seguir.ng serve
- 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.
- Navegue até o arquivo
feedback-and-chat.component.ts
. - Importe o esquema
CUSTOM_ELEMENTS_SCHEMA
.import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
- Adicione o
CUSTOM_ELEMENTS_SCHEMA
à lista de esquemas. O arquivoschemas: [CUSTOM_ELEMENTS_SCHEMA]
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]
})
... - 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);
} - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o seguinte comando Angular para compilar e executar o aplicativo e abrir um servidor da Web.
O servidor de desenvolvimento precisa ser executado na portang serve
4200
.
No navegador, realize as seguintes ações.
- Acesse a página a seguir.
Um ícone de chat vai aparecer na parte de baixo da página.http://localhost:4200
- Selecione o ícone e interaja com Jimbo.Ele mostra curiosidades sobre animais.
- 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.
- Faça login na sua conta do Gmail ou do Google Workspace. Crie uma Conta do Google, se você ainda não tiver uma.
- 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.
- 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.
- Ative a API Cloud Build no Console do Cloud. Para saber mais, consulte Ativar o acesso à API.
- Instalar a CLI do Google Cloud e a ferramenta de linha de comando gcloud. Para saber mais, consulte Instalar a CLI gcloud.
- 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - 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 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, realize a seguinte ação.
- 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Crie um novo arquivo
server.js
. - 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}`);
}); - Salve o arquivo
server.js
.
Conectar o servidor da Web
No editor de código, faça o seguinte.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Abra o arquivo
package.json
. - Modifique o comando de início para executar o nó no arquivo
server.js
. O atributo"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"
},start
é o ponto de entrada do seu aplicativo. - Salve o arquivo
package.json
.
Configurar o App Engine
No editor de código, faça o seguinte.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Crie um novo arquivo
app.yaml
. - Copie e cole o código a seguir.
As informações no arquivoruntime: nodejs16
service: defaultapp.yaml
especificam a configuração do App Engine. Você só precisa especificar o ambiente de execução e o serviço. - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Crie um novo arquivo
.gcloudignore
. - 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/ - 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o seguinte comando para inicializar o aplicativo.
gcloud app create --project=[YOUR_PROJECT_ID]
- 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.
- Navegue até o novo diretório do projeto
photo-gallery-app
. - Digite o comando abaixo para implantar o aplicativo.
gcloud app deploy --project=[YOUR_PROJECT_ID]
- 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.
- Digite o comando a seguir para abrir uma nova guia no navegador.
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.
- Faça login na sua conta do Gmail ou do Google Workspace.
- No console do Google Cloud, selecione o botão Configurações do IAM e administrador.
- Na página IAM e administrador, selecione a guia Gerenciar recursos.
- 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.
- Na janela de diálogo, insira o ID do projeto. Selecione o botão Shut down para excluir o projeto.