Crie e implante um formulário Angular com formulários Netlify e Edge

Criar o fluxo de trabalho de front-end, back-end e implantação de um aplicativo dá muito trabalho. Nos casos em que seu aplicativo coleta apenas uma quantidade limitada de envios de dados de seus usuários, criar um back-end completo pode não valer o tempo e o esforço. Uma alternativa para desenvolver um backend completo é usar o Netlify Forms. Neste tutorial, explicarei como você pode usar um formulário reativo Angular com Netlify Forms. Como o Netlify Forms só funciona quando implantado no Netlify, também ilustrarei como implantar seu aplicativo no Netlify Edge.

O kit de ferramentas

Um formulário reativo Angular é um formulário que possui um modelo de dados estruturado criado explicitamente em uma classe de componente usando os provedores ReactiveFormsModule. Um modelo de formulário é criado para cada elemento de entrada na visualização de formulário. Este modelo de formulário é uma instância da classe FormControl e acompanha o valor do elemento de formulário. O modelo de formulário é imutável porque sempre que uma alteração é feita no modelo, a instância FormControl retorna um novo modelo de dados em vez de atualizar o modelo antigo. Sua imutabilidade torna a detecção de alterações mais eficiente e permite a alteração de dados com operadores observáveis. Como os elementos de entrada de formulário estão diretamente conectados a seus modelos de formulário, as atualizações entre eles são síncronas e não dependem da renderização da interface do usuário.

Netlify é uma plataforma que permite construir, implantar e hospedar sites construídos com várias tecnologias. Sites construídos com Angular podem ser hospedados no Netlify. Além disso, a Netlify fornece uma série de ferramentas que simplificam, automatizam e aumentam as compilações e implantações desses sites. Vamos usar dois de seus produtos neste tutorial: Netlify Edge e Netlify Forms.

Conforme descrito anteriormente, o Netlify Forms é um recurso de manipulação de formulários que recebe envios de formulários HTML automaticamente. Não requer nenhuma configuração de processamento de envio, como criação de APIs, scripts, etc. Esse recurso só funciona com formulários em sites implantados no Netlify. Ele é ativado por padrão, reduzindo ainda mais a configuração necessária para configurar os envios de formulários. O tratamento de envio é configurado durante a implantação, onde os arquivos HTML de um site são analisados ​​pelos bots de compilação da Netlify.

Netlify Edge é uma rede global de entrega de aplicativos na qual sites e aplicativos são publicados. Ele fornece recursos como testes A/B, reversões, preparação e lançamentos em fases. Todas as implantações no Netlify Edge são atômicas, o que significa que um site só estará ativo quando todos os arquivos forem carregados/atualizados e as alterações no site estiverem prontas. Depois que um site é implantado, ele recebe um subdomínio em netlify.app quando implantado na produção. O Netlify Edge também oferece suporte a implantações de visualização e ramificação (preparação, desenvolvimento etc.).

O tratamento de envio de formulários Netlify funciona porque os bots de compilação analisam formulários HTML em um site durante a implantação. Formulários renderizados em Javascript do lado do cliente, como aqueles em sites Angular compilados, não serão encontrados por esses bots. Portanto, a configuração normal do Netlify Forms não funcionará com o Angular Forms.

No entanto, há uma solução alternativa para isso. Para que ele receba envios, um formulário HTML simples oculto é adicionado ao arquivo index.html . Este formulário funciona com os bots de compilação. Ao enviar o Formulário Angular, uma solicitação de postagem é feita para este formulário oculto, que é então capturado pelo Netlify Forms.

Neste artigo, vamos criar um formulário reativo. Também desenvolveremos um serviço para fazer uma solicitação de postagem para o formulário HTML oculto. Por fim, implantaremos o aplicativo no Netlify Edge.

Exemplo

Para ilustrar como construir o aplicativo, vamos dar um exemplo de formulário de feedback comum em muitos sites. Usaremos este formulário para coletar comentários/reclamações, perguntas e sugestões dos usuários do site, juntamente com seu nome e e-mail. Também o usaremos para coletar sua classificação do site.

Requisitos

Para acompanhar este tutorial, você precisará de uma conta Netlify e da CLI Angular instalada. Se você não tiver a CLI, poderá instalá-la usando npm.

 npm install -g @angular/cli

Se você ainda não se inscreveu para uma conta Netlify, você pode criar uma aqui. A Netlify oferece inscrição por meio do Github, Gitlab, Bitbucket ou Email. Dependendo do método de implantação escolhido, eles podem ser outros requisitos. Eles serão declarados em cada método de implantação.

Configurando o aplicativo

Para começar, vamos criar o aplicativo e chamá-lo de feedback . Ao criá-lo, adicione roteamento a ele quando solicitado nos prompts.

 ng new feedback

Em seguida, geraremos três componentes: um formulário de feedback, uma página de mensagem de envio bem-sucedida e uma página 404. Os formulários Netlify permitem que você navegue para uma página após o envio bem-sucedido da entrada do formulário. É para isso que usaremos o SuccessComponent .

 ng gc feedback ng gc success ng gc page-not-found

Depois de gerar os componentes, adicionaremos as rotas a cada página no AppRoutingModule dentro do arquivo app-routing.module.ts .

 const routes: Routes = [ { path:'', component: FeedbackComponent }, { path: 'success', component: SuccessComponent }, { path: '**', component: PageNotFoundComponent } ];

Usaremos o serviço FormBuilder para criar nosso formulário reativo. Isso ocorre porque é mais conveniente e menos repetitivo do que usar controles de formulário básicos. Para ter acesso a ele, precisaremos registrar o ReactiveFormsModule no arquivo app.module.ts .

Como faremos uma solicitação de postagem para o formulário HTML oculto, também precisamos registrar o HttpClientModule .

 import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ // other imports ReactiveFormsModule, HttpClientModule ] }) export class AppModule { }

Prossiga para alterar o conteúdo de app.component.html para ter apenas a tomada do roteador.

 <router-outlet></router-outlet>

As diferentes páginas compartilharão alguns estilos. Então adicione o estilo abaixo ao styles.css .

 html, body { height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } h1 { margin: 0; text-align: center; } h1, p, label { font-family: Arial, Helvetica, sans-serif; } p { max-width: 25rem; } #container { border: none; padding: .4rem; border-radius: 0; flex-direction: column; display: flex; } hr { width: 80%; } button { color: white; background-color: black; font-size: large; padding: .5rem; border-radius: .5rem; margin-top: 1rem; } @media screen and (min-height: 700px) { html, body { align-items: center; justify-content: center; } } @media screen and (min-width: 480px) { #container { border: .1rem solid lightgray; padding: 2rem; border-radius: .5rem; } html, body { align-items: center; justify-content: center; } }

Criar o formulário reativo

Em nossa classe FeedbackComponent , começaremos importando o serviço FormBuilder que usaremos para criar o formulário. Também importaremos a classe Validators para validação de entrada de formulário.

 import { FormBuilder, Validators } from '@angular/forms';

Em seguida, injetaremos o serviço FormBuilder adicionando-o ao construtor FeedbackComponent .

 constructor(private fb: FormBuilder) { }

Em seguida, definiremos o modelo de formulário usando o método group do serviço FormBuilder injetado. Também adicionaremos uma propriedade errorMsg para conter quaisquer erros que possamos encontrar ao enviar a entrada do formulário. Também está incluído um método closeError que fechará o alerta de erro exibido no formulário.

Cada controle no modelo de formulário será verificado usando validadores da classe Validators . Se alguma das entradas falhar na validação, o formulário será inválido e o envio será desabilitado. Você pode optar por adicionar vários validadores a um controle de formulário, como no caso do controle de email .

 export class FeedbackComponent { feedbackForm = this.fb.group({ firstName: ['', Validators.required], lastName: ['', Validators.required], email: ['', [Validators.email, Validators.required]], type: ['', Validators.required], description: ['', Validators.required], rating: [0, Validators.min(1)] }); errorMsg = ''; closeError() { this.errorMsg = ''; } // ... }

No template do componente ( feedback.component.html ), devemos adicionar isso.

 <div> <div class="error" [class.hidden]="errorMsg.length == 0"> <p>{{errorMsg}}</p> <span (click)="closeError()" class="close">︎</span> </div> <h1>Feedback Form</h1> <hr> <p>We'd like your feedback to improve our website.</p> <form [formGroup]="feedbackForm" name="feedbackForm" (ngSubmit)="onSubmit()"> <div> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="suggestion"> <label for="suggestion">Suggestion</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="comment"> <label for="comment">Comment</label><br> </p> <p class="radioOption"> <input formControlName="type" type="radio" name="type" value="question"> <label for="question">Question</label><br> </p> </div> <div class="inputContainer"> <label>Description:</label> <textarea rows="6" formControlName="description"></textarea> </div> <div class="inputContainer"> <div> <label>How would you rate our site?</label> <label>{{feedbackForm.value?.rating}}</label> </div> <input formControlName="rating" type="range" name="rating" max="5"> </div> <div class="inputContainer"> <label>Name:</label> <div class="nameInput"> <input formControlName="firstName" type="text" name="firstName" placeholder="First"> <input formControlName="lastName" type="text" name="lastName" placeholder="Last"> </div> </div> <div class="inputContainer"> <label>Email:</label> <input formControlName="email" type="email" name="email"> </div> <div class="inputContainer"> <button type="submit" [disabled]="feedbackForm.invalid">Submit Feedback</button> </div> </form> </div>

Observe que o elemento do formulário deve ter o [formGroup]="feedbackForm" correspondente ao modelo que acabamos de criar. Além disso, cada um dos elementos de entrada deve ter um formControlName="" correspondente ao controle de formulário correspondente no modelo.

Para estilizar o formulário, adicione-o a feedback.component.css .

 #options { display: flex; flex-direction: column; } #options label { margin: 0 0 0 .2rem; } .radioOption { margin: 0 0 .2rem 0; } .inputContainer { display: flex; flex-direction: column; margin: .5rem 0 .5rem 0; } label { margin: .5rem 0 .5rem 0; } .nameInput { display: flex; flex-direction: column; } button:disabled { cursor: not-allowed; pointer-events: all; background-color: slategrey; } #ratingLabel { display: flex; justify-content: space-between; margin: .5rem 0 .5rem 0; } #ratingValue { font-weight: bolder; font-size: large; border: .1rem solid lightgray; padding: .4rem .6rem .1rem .6rem; margin: 0; vertical-align: middle; border-radius: .3rem; } .error { color: darkred; background-color: lightsalmon; border: .1rem solid crimson; border-radius: .3rem; padding: .5rem; text-align: center; margin: 0 0 1rem 0; display: flex; width: inherit; } .error p { margin: 0; flex-grow: 1; } textarea, input { margin: .1rem; font-family: Arial, Helvetica, sans-serif; padding: 5px; font-size: medium; font-weight: lighter; } .close { cursor: default; } .hidden { display: none; } @media screen and (min-width: 480px) { #options { flex-direction: row; justify-content: space-around; } .nameInput { flex-direction: row; justify-content: space-between; } }

É assim que o formulário ficará:

Adicionando um formulário HTML oculto

Como dito anteriormente, precisamos adicionar um formulário HTML oculto que os bots de compilação do Netlify Forms possam analisar. Os envios serão enviados do nosso formulário reativo para o formulário HTML oculto. O formulário HTML é colocado no arquivo index.html .

Este formulário deve ter o mesmo nome do formulário reativo. Além disso, deve conter três outros atributos: netlify , netlify-honeypot e hidden . Os bots procuram qualquer formulário que tenha o atributo netlify para que o Netlify possa processar entradas deles. O atributo netlify-honeypot foi adicionado para evitar que captchas sejam mostrados quando um envio é feito e permite proteção extra contra spam.

 <!doctype html> <html lang="en"> <!-- Head --> <body> <form name="feedbackForm" netlify netlify-honeypot="bot-field" hidden> <input type="text" name="firstName"/> <input type="text" name="lastName"/> <input type="text" name="email"/> <input type="text" name="feedbackType"/> <input type="text" name="description"/> <input type="text" name="rating"/> </form> <app-root></app-root> </body> </html>

É importante observar que, como você não pode definir o valor dos elementos de entrada do file , não pode fazer upload de um arquivo usando esse método.

Fazendo uma solicitação de postagem para o formulário oculto

Para enviar um envio do formulário reativo para o formulário HTML, faremos uma solicitação de postagem contendo o envio para index.html . A operação será realizada no método onSubmit do FeedbackComponent .

No entanto, antes que possamos fazer isso, precisamos criar duas coisas: uma interface de Feedback e um NetlifyFormsService . Vamos começar com a interface.

 touch src/app/feedback/feedback.ts

O conteúdo deste arquivo será:

 export interface Feedback { firstName: string; lastName: string; email: string; type: string; description: string; rating: number; }

O NetlifyFormsService conterá um método público para enviar uma entrada de feedback, um método privado para enviar uma entrada genérica e outro privado para lidar com quaisquer erros. Você pode adicionar outros métodos públicos para formulários adicionais.

Para gerá-lo, execute o seguinte:

 ng gs netlify-forms/netlify-forms

O método submitEntry retorna um Observable<string> porque o Netlify envia uma página HTML com um alerta de sucesso assim que postamos dados no formulário. Este é o serviço:

 import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } } import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; import { Feedback } from '../feedback/feedback'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NetlifyFormsService { constructor(private http: HttpClient) { } submitFeedback(fbEntry: Feedback): Observable { const entry = new HttpParams({ fromObject: { 'form-name': 'feedbackForm', ...fbEntry, 'rating': fbEntry.rating.toString(), }}); return this.submitEntry(entry); } private submitEntry(entry: HttpParams): Observable { return this.http.post( '/', entry.toString(), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'text' } ).pipe(catchError(this.handleError)); } private handleError(err: HttpErrorResponse) { let errMsg = ''; if (err.error instanceof ErrorEvent) { errMsg = `A client-side error occurred: ${err.error.message}`; } else { errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`; } return throwError(errMsg); } }

Enviaremos o envio do formulário como HttpParams . Um cabeçalho para o ContentType deve ser incluído com o valor application/x-www-form-urlencoded . A opção responseType é especificada como text porque, se for bem-sucedida, a postagem no formulário oculto retornará uma página HTML contendo uma mensagem genérica de sucesso do Netlify. Se você não incluir essa opção, receberá um erro porque a resposta será analisada como JSON . Abaixo está uma captura de tela da mensagem genérica de sucesso do Netlify.

Na classe FeedbackComponent , importaremos o NetlifyFormsService e o Router . Enviaremos a entrada do formulário usando o método NetlifyFormsService.submitEntry . Se o envio for bem-sucedido, redirecionaremos para a página de envio bem-sucedida e redefiniremos o formulário. Usaremos o serviço Router para o redirecionamento. Se não tiver êxito, a propriedade errorMsg receberá a mensagem de erro e será exibida no formulário.

 import { Router } from '@angular/router'; import { NetlifyFormsService } from '../netlify-forms/netlify-forms.service';

Depois disso, injete o NetlifyFormsService e o Router no construtor.

 constructor( private fb: FormBuilder, private router: Router, private netlifyForms: NetlifyFormsService ) {}

Por fim, chame o método NetlifyFormsService.submitEntry em FeedbackComponent.onSubmit .

 onSubmit() { this.netlifyForms.submitFeedbackEntry(this.feedbackForm.value).subscribe( () => { this.feedbackForm.reset(); this.router.navigateByUrl('/success'); }, err => { this.errorMsg = err; } ); }

Crie uma página de envio bem-sucedida

Quando um usuário conclui um envio, o Netlify retorna uma mensagem genérica de sucesso mostrada na última captura de tela da seção anterior. No entanto, você pode vincular de volta à sua própria página de mensagem de sucesso personalizada. Você faz isso adicionando o atributo de action ao formulário HTML oculto. Seu valor é o caminho relativo para sua página de sucesso personalizada. Esse caminho deve começar com / e ser relativo ao seu site raiz.

Definir uma página de sucesso personalizada, no entanto, não parece funcionar ao usar um formulário HTML oculto. Se a solicitação de postagem para o formulário HTML oculto for bem-sucedida, ele retornará a mensagem genérica de sucesso do Netlify como uma página HTML. Ele não redireciona mesmo quando um atributo de action é especificado. Então, em vez disso, navegaremos para a página de mensagem de sucesso após um envio usando o serviço Router .

Primeiro, vamos adicionar conteúdo ao SuccessComponent que geramos anteriormente. Em success.component.html , adicione:

 <div> <h1>Thank you!</h1> <hr> <p>Your feedback submission was successful.</p> <p>Thank you for sharing your thoughts with us!</p> <button routerLink="/">Give More Feedback</button> </div>

Para estilizar a página, adicione isto a success.component.css :

 p { margin: .2rem 0 0 0; text-align: center; }

Esta é a aparência da página:

Na classe FeedbackComponent , já adicionamos o serviço Router como uma importação e o injetamos no construtor. Em seu método onSubmit , após a solicitação ser bem-sucedida e o formulário redefinido, navegamos até a página de envio bem-sucedida, /success . Usamos o método navigateByUrl do roteador para fazer isso.

Criando a página 404

A página 404 pode não ser necessária, mas é bom ter. O conteúdo de page-not-found.component.html seria:

 <div> <h1>Page Not Found!</h1> <hr> <p>Sorry! The page does not exist.</p> <button routerLink="/">Go to Home</button> </div>

Para estilizá-lo, adicione isto a page-not-found.component.css :

 p { text-align: center; }

Esta é a aparência da página 404.

Corrigir o roteamento antes da implantação

Como estamos usando o serviço Router , todo o nosso roteamento é feito no cliente. Se um link para uma página em nosso aplicativo for colado na barra de endereços (link direto) ou houver uma atualização de página, essa solicitação será enviada ao nosso servidor. O servidor não contém nenhuma de nossas rotas porque elas foram configuradas no frontend, em nosso aplicativo. Receberemos um status 404 nessas instâncias.

Para corrigir isso, precisamos dizer ao servidor Netlify para redirecionar todas as solicitações para nossa página index.html . Dessa forma, nosso roteador Angular pode lidar com eles. Se você estiver interessado, pode ler mais sobre esse fenômeno aqui e aqui.

Começaremos criando um arquivo _redirects em nossa pasta src . O arquivo _redirects é um arquivo de texto simples que especifica regras de redirecionamento e regravação para o site Netlify. Ele deve residir no diretório do site de publicação do site ( dist/<app_name> ). Vamos colocá-lo na pasta src e especificá-lo como um ativo no arquivo angular.json . Quando o aplicativo for compilado, ele será colocado em dist/<app_name> .

 touch src/_redirects

Este arquivo conterá a regra abaixo. Indica que todas as solicitações ao servidor devem ser redirecionadas para index.html . Também adicionamos uma opção de código de status HTTP no final para indicar que esses redirecionamentos devem retornar um status 200 . Por padrão, um status 301 é retornado.

 /* /index.html 200

A última coisa que precisamos fazer é adicionar a opção abaixo em nosso angular.json em er projects > {your_project_name} > architect > options > assets . Inclua-o na matriz de assets :

 { "glob": "_redirects", "input": "src", "output": "/" }

Visualize seu aplicativo localmente

Antes de implantar o aplicativo de feedback, é melhor visualizá-lo. Isso permite que você tenha certeza de que seu site funciona como você pretendia. Você pode descobrir problemas resultantes do processo de construção, como caminhos quebrados para recursos, entre outras coisas. Primeiro, você terá que construir seu aplicativo. Em seguida, serviremos a versão compilada usando um servidor. Usaremos o lite-server, que é um servidor leve de recarga ao vivo para aplicativos da web.

Nota : Como o aplicativo ainda não foi implantado no Netlify, você receberá um erro 404 ao tentar fazer a solicitação de postagem. Isso ocorre porque o Netlify Forms só funciona em aplicativos implantados. Você verá um erro no formulário, conforme mostrado na captura de tela abaixo, no entanto, ele funcionará depois de implantado.

1. Para começar, instale o lite-server:
   

    npm install lite-server --save-dev

2. Em seguida, no diretório do espaço de trabalho do seu aplicativo, crie seu aplicativo. Para garantir que as compilações sejam executadas toda vez que seus arquivos forem alterados, passe o sinalizador --watch para ele. Depois que o aplicativo é compilado, os resultados são gravados no diretório de saída dist/<app name> . Se você estiver usando um sistema de controle de versão, certifique-se de não fazer check-in na pasta dist porque ela é gerada e é apenas para fins de visualização.
   

    ng build --watch

3. Para servir o site compilado, execute o lite-server no diretório de saída de compilação.
   

    lite-server --baseDir="dist/<app name>"

O site agora é servido em localhost:3000 . Verifique-o em seu navegador e certifique-se de que funcione conforme o esperado antes de iniciar sua implantação.

Desdobramento, desenvolvimento

Existem várias maneiras de implantar seu projeto Angular no Netlify Edge. Vamos cobrir três aqui:

1. Usando netlify-builder ,
2. Usando o Git e a interface do usuário da Web do Netlify,
3. Usando a ferramenta Netlify CLI.

1. Usando netlify-builder

O netlify-builder facilita a implantação de aplicativos Angular por meio da CLI Angular. Para usar esse método, seu aplicativo precisa ter sido criado usando o Angular CLI v8.3.0 ou superior.

1. Na guia Sites do seu painel Netlify, crie um novo projeto. Como não usaremos o Git para criar um projeto, arraste qualquer pasta vazia para a área de borda pontilhada marcada "Arraste e solte sua pasta do site aqui" . Isso criará automaticamente um projeto com um nome aleatório. Você pode alterar esse nome nas configurações de domínio do site posteriormente, se desejar.
   

   

   
   Isto é o que você deve ver uma vez que seu projeto foi criado.
   

   

2. Antes de implantar usando esse método, você precisará obter o ID de API do projeto Netlify e um token de acesso pessoal Netlify de sua conta. Você pode obter o ID da API do projeto nas configurações do site. Em Configurações do site > Geral > Detalhes do site > Informações do site , você encontrará o ID da API do seu projeto.
   

   

   

   
   Você pode obter um token de acesso pessoal nas configurações do usuário. Em Configurações do usuário > Aplicativos > Tokens de acesso pessoal , clique no botão Novo token de acesso . Quando solicitado, insira a descrição do seu token e clique no botão Gerar Token . Copie seu token. Por questão de persistência, você pode armazenar esses valores em um arquivo .env em seu projeto, mas não faça check-in desse arquivo se estiver usando um sistema de controle de versão.
   

   

   

   

   

3. Em seguida, adicione netlify-builder ao seu projeto usando ng add .
   

    ng add @netlify-builder/deploy

   Depois de concluir a instalação, você será solicitado a adicionar o ID da API e o token de acesso pessoal.
   

   

   
   É opcional adicioná-los aqui. Você pode ignorar este prompt porque eles serão adicionados ao seu arquivo angular.json , que geralmente é verificado se você usa um sistema de controle de versão. Não é seguro armazenar esse tipo de informação confidencial em repositórios de código. Se você não estiver fazendo check-in desse arquivo, basta inserir sua ID de API e token de acesso pessoal. A entrada abaixo será modificada em seu arquivo angular.json nas configurações do architect .
   

    "deploy": { "builder": "@netlify-builder/deploy:deploy", "options": { "outputPath": "dist/<app name>", "netlifyToken": "", "siteId": "" } }

4. Tudo o que resta é implantar seu aplicativo executando:
   

    NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy

   Como alternativa, você pode colocar isso em um script e executá-lo quando precisar implantar seu aplicativo.
   

    # To create the script touch deploy.sh && echo "NETLIFY_TOKEN=<access token> NETLIFY_API_ID=<api id> ng deploy" >> deploy.sh && chmod +x deploy.sh # To deploy ./deploy.sh

   Esta é a saída que você deve ver depois de executar este comando:
   

   

2. Usando o Git e a IU da Web do Netlify

Se o código do seu aplicativo Angular estiver hospedado no Github, Bitbucket ou Gitlab, você poderá hospedar o projeto usando a interface do usuário da Web do Netlify.

1. Na guia Sites do seu painel Netlify, clique no botão “ Novo site do Git”.
   

   

2. Conecte-se a um serviço de repositório de código. Escolha o serviço em que o código do seu aplicativo está hospedado. Você será solicitado a autorizar o Netlify a visualizar seus repositórios. Isso será diferente de serviço para serviço.
   

   

3. Escolha seu repositório de código.
   

   

4. Em seguida, você especificará as implantações e as configurações de compilação. Nesse caso, selecione a ramificação da qual você deseja implantar, especifique o comando build como ng deploy --prod e o diretório de publicação como dist/<your app name> .
   

   

5. Clique no botão Implantar Site e pronto.

3. Usando a ferramenta CLI Netlify

1. Para começar, instale a ferramenta Netlify CLI da seguinte forma:
   

    npm install netlify-cli -g

   Se a instalação for bem-sucedida, você deverá ver estes resultados em seu terminal:
   

   

2. Em seguida, faça login no Netlify executando:
   

    netlify login

   Ao executar este comando, ele navegará para uma janela do navegador onde você será solicitado a autorizar a CLI do Netlify. Clique no botão Authorize . Você pode prosseguir para fechar a guia assim que a autorização for concedida.

   

   

3. Para criar um novo projeto Netlify, execute o seguinte no seu terminal:
   

    netlify init

   Você será solicitado a conectar seu aplicativo Angular a um projeto Netlify existente ou criar um novo. Escolha a opção Criar e configurar um novo site .

   

   Em seguida, selecione sua equipe e um nome para o site que deseja implantar. Depois que o projeto for criado, a ferramenta CLI listará os detalhes do site para seu projeto.
   

   

   Depois disso, a ferramenta CLI solicitará que você conecte sua conta Netlify a um provedor de hospedagem Git para configurar webhooks e implantar chaves. Você não pode optar por isso. Escolha uma opção para fazer login e depois autorize o Netlify.
   

   

   Em seguida, você será solicitado a inserir um comando de compilação. Usar:
   

    ng build --prod

   Depois, você será solicitado a fornecer um diretório para implantação. Digite dist/<app name> com o nome do seu aplicativo.
   

   

   No final disso, o comando será concluído e exibirá essa saída.
   

   

4. Para implantar o aplicativo, execute:
   

    netlify deploy --prod

   Usar o sinalizador --prod garante que a compilação seja implantada na produção. Se você omitir esse sinalizador, o comando netlify deploy implantará sua compilação em um URL de rascunho exclusivo que é usado para teste e visualização. Quando a implantação estiver concluída, você deverá ver esta saída:
   

   

Visualizando Envios de Formulários

Os envios de formulários podem ser visualizados no painel Netlify na guia Formulários do seu site. Você pode encontrá-lo em app.netlify.com/sites/<your_site_name>/forms . Nesta página, todos os seus formulários ativos serão listados. O atributo name que você coloca no elemento de formulário oculto é o nome do formulário no painel.

Depois de selecionar um formulário, todos os envios para esse formulário serão listados. Você pode optar por baixar todas as entradas como um arquivo CSV, marcá-las como spam ou excluí-las.

Conclusão

O Netlify Forms permite que você colete o envio de formulários do seu aplicativo sem precisar criar ou configurar um back-end para fazer isso. Isso pode ser útil especialmente em aplicativos que precisam coletar apenas uma quantidade limitada de dados, como informações de contato, feedback do cliente, inscrições em eventos e assim por diante.

O emparelhamento de formulários reativos Angular com formulários Netlify permite estruturar seu modelo de dados. Formulários reativos angulares têm o benefício adicional de ter seu modelo de dados e elementos de formulário sincronizados entre si. Eles não dependem da renderização da interface do usuário.

Embora o Netlify Forms funcione apenas quando implantado no Netlify Edge, a plataforma de hospedagem é bastante robusta, fornece recursos úteis como testes A/B e automatiza as compilações e implantações de aplicativos.

• Veja o código-fonte deste projeto →

Você pode continuar lendo mais sobre como usar o Netlify com seus formulários aqui.