Construiți și implementați un formular unghiular cu Netlify Forms și Edge

Crearea front-end-ului, backend-ului și a fluxului de lucru de implementare al unei aplicații necesită multă muncă. În cazurile în care aplicația dvs. colectează doar o cantitate limitată de date trimise de la utilizatori, construirea unui întreg backend poate să nu pară să merite timpul și efortul. O alternativă la dezvoltarea unui backend complet este utilizarea Netlify Forms. În acest tutorial, voi explica cum ați putea folosi o formă reactivă unghiulară cu Netlify Forms. Deoarece formularele Netlify funcționează numai atunci când sunt implementate pe Netlify, voi ilustra, de asemenea, cum să vă implementați aplicația pe Netlify Edge.

Setul de instrumente

Un formular reactiv unghiular este un formular care are un model de date structurat creat în mod explicit într-o clasă de componente folosind furnizorii ReactiveFormsModule. Un model de formular este creat pentru fiecare element de intrare din vizualizarea formularului. Acest model de formular este o instanță a clasei FormControl și ține evidența valorii elementului de formular. Modelul de formular este imuabil deoarece ori de câte ori se face o modificare a modelului, instanța FormControl returnează un nou model de date în loc să actualizeze modelul vechi. Imuabilitatea sa face ca detectarea schimbărilor să fie mai eficientă și permite modificarea datelor cu operatori observabili. Deoarece elementele de introducere a formularelor sunt conectate direct la modelele lor de formulare, actualizările dintre ele sunt sincrone și nu se bazează pe redarea UI.

Netlify este o platformă care vă permite să construiți, să implementați și să găzduiți site-uri construite cu diverse tehnologii. Site-urile construite cu Angular pot fi găzduite pe Netlify. Netlify oferă, în plus, o serie de instrumente care simplifică, automatizează și sporesc versiunile și implementările acestor site-uri. Vom folosi două dintre produsele sale în acest tutorial: Netlify Edge și Netlify Forms.

După cum s-a descris mai devreme, Netlify Forms este o funcție de gestionare a formularelor care primește automat trimiteri de la formulare HTML. Nu necesită nicio configurație de procesare a trimiterii, cum ar fi crearea de API-uri, scripturi etc. Această funcție funcționează numai cu formularele din site-urile implementate pe Netlify. Este activat în mod implicit, reducând și mai mult configurația necesară pentru a configura trimiterea formularelor. Gestionarea trimiterilor este configurată în timpul implementării, în cazul în care fișierele HTML ale unui site sunt analizate de boții de compilare ai Netlify.

Netlify Edge este o rețea globală de livrare a aplicațiilor pe care sunt publicate site-uri și aplicații. Oferă funcții precum testarea A/B, rollback-uri, punerea în scenă și lansări treptate. Toate implementările pe Netlify Edge sunt atomice, ceea ce înseamnă că un site este activ numai atunci când toate fișierele au fost încărcate/actualizate și modificările site-ului sunt gata. Odată ce un site este implementat, i se atribuie un subdomeniu pe netlify.app atunci când este implementat în producție. Netlify Edge acceptă, de asemenea, previzualizări și implementări de ramuri (staging, dezvoltare etc.).

Gestionarea trimiterii formularelor Netlify funcționează deoarece roboții de construcție analizează formularele HTML pe un site în timpul implementării. Formele redate Javascript la nivelul clientului, cum ar fi cele din site-urile Angular compilate, nu vor fi găsite de acești roboți. Deci configurația normală pentru Netlify Forms nu va funcționa cu Angular Forms.

Cu toate acestea, există o soluție în acest sens. Pentru ca acesta să primească trimiteri, la fișierul index.html este adăugat un formular HTML simplu ascuns. Acest formular funcționează cu roboții de compilare. La trimiterea formularului unghiular, se face o cerere de postare către acest formular ascuns, care este apoi capturat de Netlify Forms.

În acest articol, vom crea o formă reactivă. De asemenea, vom dezvolta un serviciu pentru a face o cerere de postare în formularul HTML ascuns. În cele din urmă, vom implementa aplicația pe Netlify Edge.

Exemplu

Pentru a ilustra cum să construim aplicația, vom lua un exemplu de formular de feedback comun pe multe site-uri web. Vom folosi acest formular pentru a colecta comentarii/reclamații, întrebări și sugestii de la utilizatorii site-ului, împreună cu numele și e-mailul acestora. De asemenea, îl vom folosi pentru a colecta evaluarea site-ului.

Cerințe

Pentru a urma acest tutorial, veți avea nevoie de un cont Netlify și de instalat CLI-ul Angular. Dacă nu aveți CLI, îl puteți instala folosind npm.

 npm install -g @angular/cli

Dacă nu v-ați înscris încă pentru un cont Netlify, puteți crea unul aici. Netlify oferă înscriere prin Github, Gitlab, Bitbucket sau Email. În funcție de metoda de implementare pe care alegeți să utilizați, acestea pot fi alte cerințe. Acestea vor fi menționate sub fiecare metodă de implementare.

Configurarea aplicației

Pentru a începe, vom crea aplicația și o vom numi feedback . Când îl creați, adăugați-i rutarea când vi se solicită în solicitări.

 ng new feedback

În continuare, vom genera trei componente: un formular de feedback, o pagină cu mesaj de trimitere cu succes și o pagină 404. Formularele Netlify vă permit să navigați la o pagină după trimiterea cu succes a formularului. Pentru asta vom folosi SuccessComponent .

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

După generarea componentelor, vom adăuga rutele la fiecare pagină din AppRoutingModule din fișierul app-routing.module.ts .

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

Vom folosi serviciul FormBuilder pentru a crea formularul nostru reactiv. Acest lucru se datorează faptului că este mai convenabil și mai puțin repetitiv decât utilizarea controalelor de bază ale formularului. Pentru a avea acces la el, va trebui să înregistrăm ReactiveFormsModule în fișierul app.module.ts .

Deoarece vom face o cerere de postare în formularul HTML ascuns, trebuie să înregistrăm și HttpClientModule .

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

Continuați să modificați conținutul app.component.html pentru a avea doar priza routerului.

 <router-outlet></router-outlet>

Diferitele pagini vor împărtăși unele stiluri. Așadar, adăugați stilul de mai jos la 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; } }

Creați forma reactivă

În clasa noastră FeedbackComponent , vom începe prin a importa serviciul FormBuilder pe care îl vom folosi pentru a crea formularul. Vom importa, de asemenea, clasa Validators pentru validarea introducerii formularului.

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

Apoi vom injecta serviciul FormBuilder adăugându-l la constructorul FeedbackComponent .

 constructor(private fb: FormBuilder) { }

În continuare, vom defini modelul de formular folosind metoda group a serviciului FormBuilder injectat. Vom adăuga, de asemenea, o proprietate errorMsg pentru a păstra orice erori pe care le putem întâlni la trimiterea formularului de intrare. De asemenea, este inclusă o metodă closeError care va închide alerta de eroare care se afișează pe formular.

Fiecare control din modelul de formular va fi verificat folosind validatori din clasa Validators . Dacă vreuna dintre intrări eșuează validarea, formularul va fi invalid și trimiterea va fi dezactivată. Puteți alege să adăugați mai mulți validatori la un control de formular, cum ar fi în cazul controlului de email -mail.

 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 = ''; } // ... }

În șablonul componentei ( feedback.component.html ), vom adăuga acest lucru.

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

Rețineți că elementul formular ar trebui să aibă [formGroup]="feedbackForm" corespunzător modelului pe care tocmai l-am creat. De asemenea, fiecare dintre elementele de intrare ar trebui să aibă un formControlName="" corespunzător controlului formularului omologul său din model.

Pentru a stila formularul, adăugați-l la 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; } }

Iată cum va arăta formularul:

Adăugarea unui formular HTML ascuns

După cum sa menționat mai devreme, trebuie să adăugăm un formular HTML ascuns pe care roboții de compilare Netlify Forms îl pot analiza. Trimiterile vor fi apoi trimise din formularul nostru reactiv la formularul HTML ascuns. Formularul HTML este pus în fișierul index.html .

Această formă ar trebui să aibă același nume ca și forma reactivă. În plus, ar trebui să conțină alte trei atribute: netlify , netlify-honeypot și hidden . Boții caută orice formulare care au atributul netlify , astfel încât Netlify să poată procesa intrările de la acestea. netlify-honeypot este adăugat pentru a preveni afișarea captch-urilor atunci când se face o trimitere și pentru a permite protecție suplimentară împotriva spamului.

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

Este important să rețineți că, deoarece nu puteți seta valoarea elementelor de intrare ale file , nu puteți încărca un fișier folosind această metodă.

Efectuarea unei cereri de postare la formularul ascuns

Pentru a trimite o trimitere din formularul reactiv la formularul HTML, vom face o solicitare de postare care să conțină trimiterea la index.html . Operația va fi efectuată în metoda onSubmit a FeedbackComponent .

Cu toate acestea, înainte de a putea face asta, trebuie să creăm două lucruri: o interfață Feedback și un NetlifyFormsService . Să începem cu interfața.

 touch src/app/feedback/feedback.ts

Conținutul acestui fișier va fi:

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

NetlifyFormsService va conține o metodă publică pentru a trimite o intrare de feedback, o metodă privată pentru a trimite o intrare generică și o altă metodă privată pentru a gestiona orice erori. Puteți adăuga alte metode publice pentru formulare suplimentare.

Pentru a-l genera, rulați următoarele:

 ng gs netlify-forms/netlify-forms

Metoda submitEntry returnează un Observable<string> deoarece Netlify trimite o pagină HTML cu o alertă de succes odată ce postăm date în formular. Acesta este serviciul:

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

Vom trimite trimiterea formularului ca HttpParams . Un antet pentru ContentType ar trebui inclus cu valoarea application/x-www-form-urlencoded . Opțiunea responseType este specificată ca text , deoarece, dacă reușește, postarea în formularul ascuns va returna o pagină HTML care conține un mesaj generic de succes de la Netlify. Dacă nu includeți această opțiune, veți primi o eroare deoarece răspunsul va fi analizat ca JSON . Mai jos este o captură de ecran a mesajului generic de succes Netlify.

În clasa FeedbackComponent , vom importa NetlifyFormsService și Router . Vom trimite intrarea formularului folosind metoda NetlifyFormsService.submitEntry . Dacă trimiterea are succes, vom redirecționa către pagina de trimitere cu succes și vom reseta formularul. Vom folosi serviciul Router pentru redirecționare. Dacă nu reușește, proprietății errorMsg i se va atribui mesajul de eroare și va fi afișată în formular.

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

După aceea, injectați atât NetlifyFormsService , cât și Router în constructor.

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

În cele din urmă, apelați metoda NetlifyFormsService.submitEntry în FeedbackComponent.onSubmit .

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

Creați o pagină de trimitere de succes

Când un utilizator finalizează o trimitere, Netlify returnează un mesaj generic de succes afișat în ultima captură de ecran din secțiunea anterioară. Cu toate acestea, vă puteți conecta înapoi la propria pagină personalizată cu mesaje de succes. Faceți acest lucru adăugând atributul de action în formularul HTML ascuns. Valoarea sa este calea relativă către pagina de succes personalizată. Această cale trebuie să înceapă cu / și să fie relativă la site-ul rădăcină.

Setarea unei pagini personalizate de succes, totuși, nu pare să funcționeze atunci când utilizați un formular HTML ascuns. Dacă solicitarea de postare în formularul HTML ascuns are succes, returnează mesajul generic de succes Netlify ca pagină HTML. Nu redirecționează chiar și atunci când este specificat un atribut de action . Deci, în schimb, vom naviga la pagina cu mesajul de succes după o trimitere folosind serviciul Router .

Mai întâi, să adăugăm conținut la SuccessComponent pe care am generat-o mai devreme. În success.component.html , adăugați:

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

Pentru a stila pagina, adăugați acest lucru la success.component.css :

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

Cam asa arata pagina:

În clasa FeedbackComponent , am adăugat deja serviciul Router ca import și l-am injectat în constructor. În metoda sa onSubmit , după ce solicitarea este reușită și formularul a fost resetat, navigăm la pagina de trimitere cu succes, /success . Folosim metoda navigateByUrl a routerului pentru a face asta.

Crearea paginii 404

Pagina 404 poate să nu fie necesară, dar este plăcută. Conținutul page-not-found.component.html ar fi:

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

Pentru a-l stila, adăugați acest lucru la page-not-found.component.css :

 p { text-align: center; }

Așa va arăta pagina 404.

Remediați rutarea înainte de implementare

Deoarece folosim serviciul Router , toată rutarea noastră se face pe client. Dacă un link către o pagină din aplicația noastră este lipit în bara de adrese (link profund) sau există o reîmprospătare a paginii, acea solicitare va fi trimisă la serverul nostru. Serverul nu conține niciuna dintre rutele noastre, deoarece acestea au fost configurate în frontend, în aplicația noastră. Vom primi un statut 404 în aceste cazuri.

Pentru a remedia acest lucru, trebuie să spunem serverului Netlify să redirecționeze toate solicitările către pagina noastră index.html . În acest fel routerul nostru Angular le poate gestiona. Dacă ești interesat, poți citi mai multe despre acest fenomen aici și aici.

Vom începe prin a crea un fișier _redirects în folderul nostru src . Fișierul _redirects este un fișier text simplu care specifică regulile de redirecționare și rescriere pentru site-ul Netlify. Ar trebui să se afle în directorul site-ului de publicare a site-ului ( dist/<app_name> ). Îl vom plasa în folderul src și îl vom specifica ca activ în fișierul angular.json . Când aplicația este compilată, aceasta va fi plasată în dist/<app_name> .

 touch src/_redirects

Acest fișier va conține regula de mai jos. Indică faptul că toate solicitările către server ar trebui redirecționate către index.html . De asemenea, adăugăm o opțiune de cod de stare HTTP la sfârșit pentru a indica faptul că aceste redirecționări ar trebui să returneze o stare 200 . În mod implicit, este returnată o stare 301 .

 /* /index.html 200

Ultimul lucru pe care trebuie să-l facem este să adăugăm opțiunea de mai jos în angular.json er projects > {your_project_name} > architect > options > assets . Includeți-l în matricea de assets :

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

Previzualizează-ți aplicația local

Înainte de a putea implementa aplicația de feedback, cel mai bine este să o previzualizați. Acest lucru vă permite să vă asigurați că site-ul dvs. funcționează așa cum v-ați propus. Este posibil să descoperiți probleme rezultate din procesul de construire, cum ar fi căi întrerupte către resurse, printre altele. În primul rând, va trebui să vă construiți aplicația. Apoi vom servi versiunea compilată folosind un server. Vom folosi lite-server, care este un server ușor de reîncărcare live pentru aplicații web.

Notă : Deoarece aplicația nu este încă implementată pe Netlify, veți primi o eroare 404 când încercați să faceți cererea de postare. Acest lucru se datorează faptului că Netlify Forms funcționează numai pe aplicațiile implementate. Veți vedea o eroare pe formular, așa cum se arată în captura de ecran de mai jos, cu toate acestea, va funcționa odată ce l-ați implementat.

1. Pentru a începe, instalați lite-server:
   

    npm install lite-server --save-dev

2. Apoi, în directorul spațiului de lucru al aplicației, creați aplicația. Pentru a vă asigura că versiunile sunt executate de fiecare dată când fișierele dvs. se schimbă, transmiteți-i marcatorul --watch . Odată ce aplicația este compilată, rezultatele sunt scrise în directorul de ieșire dist/<app name> . Dacă utilizați un sistem de control al versiunilor, asigurați-vă că nu verificați în folderul dist , deoarece este generat și este doar în scopuri de previzualizare.
   

    ng build --watch

3. Pentru a servi site-ul compilat, rulați lite-server în directorul de ieșire al compilației.
   

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

Site-ul este acum servit la localhost:3000 . Verificați-l în browser și asigurați-vă că funcționează conform așteptărilor înainte de a începe implementarea.

Implementare

Există mai multe moduri în care vă puteți implementa proiectul Angular pe Netlify Edge. Vom acoperi trei aici:

1. Folosind netlify-builder ,
2. Folosind Git și Netlify web UI,
3. Folosind instrumentul Netlify CLI.

1. Folosind netlify-builder

netlify-builder facilitează implementarea aplicațiilor Angular prin intermediul CLI Angular. Pentru a utiliza această metodă, aplicația dvs. trebuie să fi fost creată folosind Angular CLI v8.3.0 sau o versiune ulterioară.

1. Din fila Site-uri a tabloului de bord Netlify, creați un nou proiect. Deoarece nu vom folosi Git pentru a crea un proiect, trageți orice dosar gol în zona de margine punctată marcată „Drag and drop your site folder here” . Acest lucru va crea automat un proiect cu un nume aleatoriu. Puteți schimba acest nume în setările de domeniu ale site-ului ulterior, dacă doriți.
   

   

   
   Acesta este ceea ce ar trebui să vedeți odată ce proiectul dvs. a fost creat.
   

   

2. Înainte de a putea implementa folosind această metodă, va trebui să obțineți ID-ul API al proiectului Netlify și un simbol de acces personal Netlify din contul dvs. Puteți obține ID-ul API al proiectului din setările site-ului. Sub Setări site > General > Detalii site > Informații site veți găsi ID-ul API al proiectului dumneavoastră.
   

   

   

   
   Puteți obține un token de acces personal în setările dvs. de utilizator. În Setări utilizator > Aplicații > Jetoane de acces personale , faceți clic pe butonul Token de acces nou . Când vi se solicită, introduceți descrierea simbolului dvs., apoi faceți clic pe butonul Generați token . Copiați-vă simbolul. De dragul persistenței, puteți stoca aceste valori într-un fișier .env în cadrul proiectului dvs., dar nu verificați acest fișier dacă utilizați un sistem de control al versiunilor.
   

   

   

   

   

3. Apoi, adăugați netlify-builder la proiectul dvs. folosind ng add .
   

    ng add @netlify-builder/deploy

   După ce s-a terminat de instalat, vi se va solicita să adăugați ID-ul API și tokenul de acces personal.
   

   

   
   Este opțional să le adăugați aici. Puteți ignora această solicitare, deoarece acestea vor fi adăugate la fișierul dvs. angular.json , care este de obicei verificat dacă utilizați un sistem de control al versiunilor. Nu este sigur să stocați acest tip de informații sensibile în repozițiile de cod. Dacă nu verificați acest fișier, puteți doar să introduceți ID-ul API și simbolul de acces personal. Intrarea de mai jos va fi modificată în fișierul angular.json din setările architect .
   

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

4. Tot ce a mai rămas este să implementați aplicația dvs. rulând:
   

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

   Alternativ, puteți pune acest lucru într-un script și îl puteți rula atunci când trebuie să vă implementați aplicația.
   

    # 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

   Aceasta este rezultatul pe care ar trebui să-l vedeți odată ce rulați această comandă:
   

   

2. Folosind Git și Netlify Web UI

Dacă codul aplicației dvs. Angular este găzduit fie pe Github, Bitbucket sau Gitlab, puteți găzdui proiectul folosind interfața de utilizare web a Netlify.

1. Din fila Site-uri de pe tabloul de bord Netlify, faceți clic pe „ Site nou din Git”.
   

   

2. Conectați-vă la un serviciu de depozit de coduri. Alegeți serviciul în care este găzduit codul aplicației. Vi se va solicita să autorizați Netlify să vă vadă depozitele. Acest lucru va diferi de la serviciu la serviciu.
   

   

3. Alegeți depozitul de coduri.
   

   

4. Apoi, veți specifica implementările și setările de compilare. În acest caz, selectați ramura din care doriți să implementați, specificați comanda de compilare ca ng deploy --prod și directorul de publicare ca dist/<your app name> .
   

   

5. Faceți clic pe butonul Implementați site și ați terminat.

3. Utilizarea instrumentului Netlify CLI

1. Pentru a începe, instalați instrumentul Netlify CLI după cum urmează:
   

    npm install netlify-cli -g

   Dacă instalarea are succes, ar trebui să vedeți aceste rezultate pe terminalul dvs.:
   

   

2. Apoi, conectați-vă la Netlify executând:
   

    netlify login

   Când rulați această comandă, aceasta va naviga la o fereastră de browser unde vi se va solicita să autorizați Netlify CLI. Faceți clic pe butonul Authorize . Puteți continua apoi să închideți fila odată ce autorizarea este acordată.

   

   

3. Pentru a crea un nou proiect Netlify, rulați următoarele pe terminalul dvs.:
   

    netlify init

   Vi se va solicita fie să vă conectați aplicația Angular la un proiect Netlify existent, fie să creați unul nou. Alegeți opțiunea Creați și configurați un site nou .

   

   Apoi, selectați-vă echipa și un nume pentru site-ul pe care doriți să îl implementați. Odată ce proiectul a fost creat, instrumentul CLI va lista detaliile site-ului pentru proiectul dvs.
   

   

   După care instrumentul CLI vă va solicita să vă conectați contul Netlify la un furnizor de găzduire Git pentru a configura webhook-uri și a implementa chei. Nu puteți renunța la acest lucru. Alegeți o opțiune pentru a vă autentifica, apoi autorizați Netlify.
   

   

   Apoi, vi se va cere să introduceți o comandă de compilare. Utilizare:
   

    ng build --prod

   După aceea, vi se va cere să furnizați un director pentru implementare. Introduceți dist/<app name> cu numele aplicației dvs.
   

   

   La sfârșitul acesteia, comanda se va finaliza și va afișa această ieșire.
   

   

4. Pentru a implementa aplicația, rulați:
   

    netlify deploy --prod

   Utilizarea --prod asigură implementarea versiunii în producție. Dacă omiteți acest semnalizator, comanda netlify deploy va implementa versiunea dvs. la o adresă URL nefinalizată unică care este utilizată pentru testare și previzualizare. Odată ce implementarea este completă, ar trebui să vedeți această ieșire:
   

   

Vizualizarea trimiterilor de formulare

Trimiterile de formulare pot fi vizualizate pe tabloul de bord Netlify din fila Formulare a site-ului dvs. Îl puteți găsi la app.netlify.com/sites/<your_site_name>/forms . Pe această pagină vor fi listate toate formularele dvs. active. Atributul nume pe care l-ați introdus în elementul de formular ascuns este numele formularului de pe tabloul de bord.

Odată ce selectați un formular, vor fi listate toate trimiterile pentru formularul respectiv. Puteți alege să descărcați toate intrările ca fișier CSV, să le marcați ca spam sau să le ștergeți.

Concluzie

Formularele Netlify vă permit să colectați trimiterea formularelor din aplicația dvs. fără a fi nevoie să creați sau să configurați un backend pentru a face acest lucru. Acest lucru poate fi util în special în aplicațiile care trebuie să colecteze doar o cantitate limitată de date, cum ar fi informații de contact, feedback-ul clienților, înscrieri la evenimente și așa mai departe.

Asocierea formularelor reactive unghiulare cu formularele Netlify vă permite să vă structurați modelul de date. Formele reactive unghiulare au avantajul suplimentar de a avea modelul de date și elementele de formular sincronizate între ele. Nu se bazează pe redarea UI.

Deși Netlify Forms funcționează numai atunci când este implementat pe Netlify Edge, platforma de găzduire este destul de robustă, oferă funcții utile precum testarea A/B și automatizează construirea și implementarea aplicațiilor.

• Vezi codul sursă pentru acest proiect →

Puteți continua să citiți mai multe despre utilizarea Netlify cu formularele dvs. aici.