Zbuduj i wdróż formę kątową za pomocą Netlify Forms i Edge

Tworzenie frontendu, backendu i przepływu pracy wdrożeniowej aplikacji wymaga dużo pracy. W przypadkach, w których Twoja aplikacja zbiera tylko ograniczoną ilość przesłanych danych od użytkowników, zbudowanie całego zaplecza może nie wydawać się warte czasu i wysiłku. Alternatywą dla tworzenia kompletnego backendu jest użycie Netliify Forms. W tym samouczku wyjaśnię, w jaki sposób można użyć reaktywnego formularza Angular z Netlify Forms. Ponieważ Netlify Forms działa tylko po wdrożeniu w Netlify, zilustruję również, jak wdrożyć aplikację w Netlify Edge.

Zestaw narzędzi

Formularz reaktywny Angular to formularz, który ma ustrukturyzowany model danych utworzony jawnie w klasie składnika przy użyciu dostawców ReactiveFormsModule. Model formularza jest tworzony dla każdego elementu wejściowego w widoku formularza. Ten model formularza jest instancją klasy FormControl i śledzi wartość elementu formularza. Model formularza jest niezmienny, ponieważ za każdym razem, gdy w modelu zostanie wprowadzona zmiana, instancja FormControl zwraca nowy model danych zamiast aktualizować stary model. Jego niezmienność sprawia, że ​​wykrywanie zmian jest bardziej wydajne i umożliwia zmianę danych za pomocą obserwowalnych operatorów. Ponieważ elementy wejściowe formularzy są bezpośrednio połączone z ich modelami formularzy, aktualizacje między nimi są synchroniczne i nie polegają na renderowaniu interfejsu użytkownika.

Netlify to platforma, która umożliwia tworzenie, wdrażanie i hostowanie witryn zbudowanych przy użyciu różnych technologii. Witryny zbudowane za pomocą Angulara mogą być hostowane na Netlify. Netlify dodatkowo zapewnia szereg narzędzi, które upraszczają, automatyzują i rozszerzają kompilacje i wdrożenia tych witryn. W tym samouczku użyjemy dwóch jego produktów: Netlify Edge i Netlify Forms.

Jak opisano wcześniej, Netlify Forms to funkcja obsługi formularzy, która automatycznie odbiera zgłoszenia z formularzy HTML. Nie wymaga żadnej konfiguracji przetwarzania przesyłania, takiej jak tworzenie interfejsów API, skryptów itp. Ta funkcja działa tylko z formularzami w witrynach wdrożonych na Netlify. Jest ona domyślnie włączona, co dodatkowo ogranicza konfigurację potrzebną do skonfigurowania przesyłania formularzy. Obsługa przesyłania jest konfigurowana podczas wdrażania, gdy pliki HTML witryny są analizowane przez boty budujące Netlify.

Netliify Edge to globalna sieć dostarczania aplikacji, w której publikowane są witryny i aplikacje. Zapewnia funkcje, takie jak testowanie A/B, wycofywanie, przemieszczanie i wdrażanie etapowe. Wszystkie wdrożenia w Netlify Edge są niepodzielne, co oznacza, że ​​witryna działa tylko wtedy, gdy wszystkie pliki zostały przesłane/zaktualizowane, a zmiany w witrynie są gotowe. Po wdrożeniu witryny przypisywana jest jej subdomena na netlify.app po wdrożeniu w środowisku produkcyjnym. Netliify Edge obsługuje również wdrożenia podglądu i oddziałów (staging, development, itp.).

Obsługa przesyłania formularzy Netlify Forms działa, ponieważ budujące boty analizują formularze HTML w witrynie podczas wdrażania. Te boty nie znajdą wyrenderowanych formularzy JavaScript po stronie klienta, takich jak te w skompilowanych witrynach Angular. Tak więc normalna konfiguracja dla Netlify Forms nie będzie działać z Angular Forms.

Istnieje jednak obejście tego. Aby umożliwić otrzymywanie zgłoszeń, ukryty zwykły formularz HTML jest dodawany do pliku index.html . Ten formularz działa z botami budującymi. Podczas przesyłania formularza kątowego do tego ukrytego formularza wysyłane jest żądanie poczty, które jest następnie przechwytywane przez Netlify Forms.

W tym artykule stworzymy formularz reaktywny. Opracujemy również usługę umożliwiającą wysyłanie prośby o wysłanie do ukrytego formularza HTML. Na koniec wdrożymy aplikację w Netliify Edge.

Przykład

Aby zilustrować, jak zbudować aplikację, posłużymy się przykładem formularza opinii, który jest powszechny na wielu stronach internetowych. Użyjemy tego formularza do zbierania komentarzy/skarg, pytań i sugestii od użytkowników strony wraz z ich nazwiskiem i adresem e-mail. Wykorzystamy go również do zebrania ich oceny witryny.

Wymagania

Aby śledzić ten samouczek, będziesz potrzebować konta Netlify i zainstalowanego interfejsu Angular CLI. Jeśli nie masz CLI, możesz zainstalować go za pomocą npm.

 npm install -g @angular/cli

Jeśli nie założyłeś jeszcze konta Netlify, możesz je utworzyć tutaj. Netlify oferuje rejestrację przez Github, Gitlab, Bitbucket lub Email. W zależności od wybranej metody wdrażania mogą to być inne wymagania. Zostaną one podane pod każdą metodą rozmieszczenia.

Konfigurowanie aplikacji

Na początek utworzymy aplikację i nazwiemy ją feedback . Tworząc go, dodaj do niego routing, gdy zostaniesz o to poproszony w monitach.

 ng new feedback

Następnie wygenerujemy trzy elementy: formularz opinii, stronę pomyślnego przesłania wiadomości i stronę 404. Formularze Netliify umożliwiają przejście do strony po pomyślnym przesłaniu formularza. Do tego właśnie użyjemy SuccessComponent .

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

Po wygenerowaniu komponentów dodamy trasy do każdej strony w AppRoutingModule w app-routing.module.ts .

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

Użyjemy usługi FormBuilder , aby utworzyć nasz formularz reaktywny. Dzieje się tak, ponieważ jest to wygodniejsze i mniej powtarzalne niż korzystanie z podstawowych kontrolek formularza. Aby mieć do niego dostęp, musimy zarejestrować moduł ReactiveFormsModule w pliku app.module.ts .

Ponieważ będziemy wysyłać żądanie postu do ukrytego formularza HTML, musimy również zarejestrować HttpClientModule .

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

Przejdź do zmiany zawartości app.component.html , aby mieć tylko gniazdo routera.

 <router-outlet></router-outlet>

Różne strony będą miały pewien styl. Dodaj więc poniższą stylizację do 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; } }

Utwórz formularz reaktywny

W naszej klasie FeedbackComponent zaczniemy od zaimportowania usługi FormBuilder , której użyjemy do utworzenia formularza. Zaimportujemy również klasę Validators do walidacji danych wejściowych formularza.

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

Następnie wstrzykniemy usługę FormBuilder , dodając ją do konstruktora FeedbackComponent .

 constructor(private fb: FormBuilder) { }

Następnie zdefiniujemy model formularza za pomocą metody group wstrzykniętej usługi FormBuilder . Dodamy również właściwość errorMsg , aby przechowywać wszelkie błędy, które możemy napotkać podczas przesyłania danych wejściowych formularza. Dołączona jest również metoda closeError , która zamyka alert o błędzie wyświetlany w formularzu.

Każda kontrolka w modelu formularza zostanie zweryfikowana za pomocą walidatorów z klasy Validators . Jeśli którekolwiek z danych wejściowych nie przejdzie weryfikacji, formularz będzie nieważny, a przesyłanie zostanie wyłączone. Możesz dodać wiele walidatorów do kontrolki formularza, tak jak w przypadku kontrolki 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 = ''; } // ... }

W szablonie komponentu ( feedback.component.html ) dodamy to.

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

Zauważ, że element formularza powinien mieć [formGroup]="feedbackForm" odpowiadający nowo utworzonemu modelowi. Ponadto każdy z elementów wejściowych powinien mieć formControlName="" odpowiadający jego kontrolce formularza odpowiednika w modelu.

Aby wystylizować formularz, dodaj to do 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; } }

Formularz będzie wyglądał tak:

Dodawanie ukrytego formularza HTML

Jak wspomniano wcześniej, musimy dodać ukryty formularz HTML, który mogą przeanalizować boty budujące Netlify Forms. Zgłoszenia zostaną następnie wysłane z naszego formularza reaktywnego do ukrytego formularza HTML. Formularz HTML jest umieszczany w pliku index.html .

Formularz ten powinien mieć taką samą nazwę jak formularz reaktywny. Dodatkowo powinien zawierać trzy inne atrybuty: netlify , netlify-honeypot i hidden . Boty szukają wszelkich formularzy, które mają atrybut netlify , aby Netlify mógł przetwarzać z nich dane wejściowe. netlify-honeypot został dodany, aby zapobiec wyświetlaniu captcha podczas przesyłania i zapewnia dodatkową ochronę przed spamem.

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

Należy pamiętać, że ponieważ nie można ustawić wartości elementów wejściowych file , nie można przesłać pliku za pomocą tej metody.

Składanie prośby o wysłanie do ukrytego formularza

Aby wysłać zgłoszenie z formularza reaktywnego do formularza HTML, wyślemy żądanie publikowania zawierające zgłoszenie do index.html . Operacja zostanie wykonana metodą onSubmit składnika FeedbackComponent .

Jednak zanim to zrobimy, musimy stworzyć dwie rzeczy: interfejs Feedback i NetlifyFormsService . Zacznijmy od interfejsu.

 touch src/app/feedback/feedback.ts

Zawartość tego pliku będzie:

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

NetlifyFormsService będzie zawierać publiczną metodę do przesłania wpisu zwrotnego, prywatną metodę do przesłania ogólnego wpisu i inną prywatną do obsługi ewentualnych błędów. Możesz dodać inne metody publiczne dla dodatkowych formularzy.

Aby go wygenerować, uruchom następujące polecenie:

 ng gs netlify-forms/netlify-forms

Metoda submitEntry zwraca Observable<string> , ponieważ Netlify wysyła stronę HTML z alertem o powodzeniu, gdy tylko opublikujemy dane w formularzu. Oto usługa:

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

Przesłanie formularza zostanie wysłane jako HttpParams . Nagłówek ContentType powinien być dołączony do wartości application/x-www-form-urlencoded . Opcja responseType jest określona jako text , ponieważ jeśli się powiedzie, wysłanie do ukrytego formularza zwróci stronę HTML zawierającą ogólny komunikat o sukcesie z Netlify. Jeśli nie uwzględnisz tej opcji, otrzymasz błąd, ponieważ odpowiedź zostanie przetworzona jako JSON . Poniżej znajduje się zrzut ekranu ogólnego komunikatu o sukcesie Netlify.

W klasie FeedbackComponent zaimportujemy NetlifyFormsService i Router . Wpis formularza prześlemy za pomocą metody NetlifyFormsService.submitEntry . Jeśli zgłoszenie się powiedzie, przekierujemy do strony pomyślnego zgłoszenia i zresetujemy formularz. Do przekierowania użyjemy usługi Router . W przypadku niepowodzenia, właściwość errorMsg zostanie przypisana do komunikatu o błędzie i wyświetlona w formularzu.

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

Następnie wstrzyknij do konstruktora zarówno NetlifyFormsService , jak i Router .

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

Na koniec wywołaj metodę NetlifyFormsService.submitEntry w FeedbackComponent.onSubmit .

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

Utwórz udaną stronę przesyłania

Gdy użytkownik zakończy zgłoszenie, Netlify zwraca ogólny komunikat o sukcesie pokazany na ostatnim zrzucie ekranu z poprzedniej sekcji. Możesz jednak połączyć się z własną niestandardową stroną wiadomości o sukcesie. Robisz to, dodając atrybut action do ukrytego formularza HTML. Jego wartością jest względna ścieżka do Twojej niestandardowej strony sukcesu. Ta ścieżka musi zaczynać się od / i być względna do witryny głównej.

Jednak ustawienie niestandardowej strony sukcesu nie działa w przypadku korzystania z ukrytego formularza HTML. Jeśli żądanie postu do ukrytego formularza HTML powiedzie się, zwróci ogólny komunikat o sukcesie Netlify jako stronę HTML. Nie przekierowuje nawet wtedy, gdy określony jest atrybut action . Więc zamiast tego przejdziemy do strony komunikatu o sukcesie po przesłaniu przy użyciu usługi Router .

Najpierw dodajmy zawartość do SuccessComponent , który wygenerowaliśmy wcześniej. W success.component.html dodaj:

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

Aby wystylizować stronę, dodaj to do success.component.css :

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

Tak wygląda strona:

W klasie FeedbackComponent dodaliśmy już usługę Router jako import i wstrzyknęliśmy ją do konstruktora. W metodzie onSubmit , po pomyślnym zakończeniu żądania i zresetowaniu formularza, przechodzimy do strony pomyślnego przesyłania, /success . W tym celu używamy metody navigateByUrl routera.

Tworzenie strony 404

Strona 404 może nie być potrzebna, ale fajnie ją mieć. Zawartość page-not-found.component.html to:

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

Aby nadać mu styl, dodaj to do page-not-found.component.css :

 p { text-align: center; }

Tak będzie wyglądać strona 404.

Napraw routing przed wdrożeniem

Ponieważ korzystamy z usługi Router , cały nasz routing odbywa się na kliencie. Jeśli link do strony w naszej aplikacji zostanie wklejony w pasku adresu (deep link) lub nastąpi odświeżenie strony, to żądanie zostanie wysłane na nasz serwer. Serwer nie zawiera żadnej z naszych tras, ponieważ zostały one skonfigurowane we frontendzie, w naszej aplikacji. W takich przypadkach otrzymamy status 404.

Aby to naprawić, musimy powiedzieć serwerowi Netlify, aby przekierowywał wszystkie żądania na naszą stronę index.html . W ten sposób nasz router Angular poradzi sobie z nimi. Jeśli jesteś zainteresowany, możesz przeczytać więcej o tym zjawisku tutaj i tutaj.

Zaczniemy od utworzenia pliku _redirects w naszym folderze src . Plik _redirects to zwykły plik tekstowy, który określa reguły przekierowań i przepisywania dla witryny Netlify. Powinien znajdować się w katalogu witryny publikowania witryny ( dist/<app_name> ). Umieścimy go w folderze src i określimy jako zasób w pliku angular.json . Po skompilowaniu aplikacja zostanie umieszczona w dist/<app_name> .

 touch src/_redirects

Ten plik będzie zawierał poniższą regułę. Wskazuje, że wszystkie żądania kierowane do serwera powinny być przekierowywane do index.html . Dodajemy również opcję kodu statusu HTTP na końcu, aby wskazać, że te przekierowania powinny zwracać status 200 . Domyślnie zwracany jest stan 301 .

 /* /index.html 200

Ostatnią rzeczą, którą musimy zrobić, to dodać poniższą opcję w naszym angular.json er projects > {your_project_name} > architect > options > assets . Uwzględnij go w tablicy assets :

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

Wyświetl podgląd swojej aplikacji lokalnie

Przed wdrożeniem aplikacji do przesyłania opinii najlepiej jest wyświetlić jej podgląd. Dzięki temu możesz upewnić się, że Twoja witryna działa zgodnie z zamierzeniami. Możesz odkryć między innymi problemy wynikające z procesu budowania, takie jak uszkodzone ścieżki do zasobów. Najpierw musisz zbudować swoją aplikację. Następnie udostępnimy skompilowaną wersję za pomocą serwera. Użyjemy serwera lite, który jest lekkim serwerem do ponownego ładowania na żywo dla aplikacji internetowych.

Uwaga : Ponieważ aplikacja nie jest jeszcze wdrożona w Netlify, przy próbie wysłania żądania pojawi się błąd 404. Dzieje się tak, ponieważ Netlify Forms działa tylko we wdrożonych aplikacjach. Zobaczysz błąd w formularzu, jak pokazano na poniższym zrzucie ekranu, jednak będzie on działał po wdrożeniu.

1. Aby rozpocząć, zainstaluj serwer Lite:
   

    npm install lite-server --save-dev

2. Następnie w katalogu obszaru roboczego aplikacji skompiluj swoją aplikację. Aby upewnić się, że kompilacje są uruchamiane za każdym razem, gdy zmieniają się pliki, przekaż do niego flagę --watch . Po skompilowaniu aplikacji wyniki są zapisywane w katalogu wyjściowym dist/<app name> . Jeśli używasz systemu kontroli wersji, nie sprawdzaj folderu dist , ponieważ jest on generowany i służy tylko do podglądu.
   

    ng build --watch

3. Aby obsłużyć skompilowaną witrynę, uruchom lite-server w katalogu wyjściowym kompilacji.
   

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

Witryna jest teraz obsługiwana pod adresem localhost:3000 . Sprawdź go w przeglądarce i upewnij się, że działa zgodnie z oczekiwaniami, zanim rozpoczniesz jego wdrażanie.

Zastosowanie

Istnieje wiele sposobów na wdrożenie projektu Angular w Netliify Edge. Omówimy tutaj trzy:

1. Używając netlify-builder ,
2. Korzystanie z Gita i internetowego interfejsu użytkownika Netlify,
3. Korzystanie z narzędzia Netlify CLI.

1. Korzystanie netlify-builder

netlify-builder ułatwia wdrażanie aplikacji Angular za pośrednictwem Angular CLI. Aby skorzystać z tej metody, Twoja aplikacja musi zostać utworzona przy użyciu interfejsu Angular CLI w wersji 8.3.0 lub nowszej.

1. Na karcie Witryny w panelu Netlify utwórz nowy projekt. Ponieważ nie będziemy używać Git do tworzenia projektu, przeciągnij dowolny pusty folder do obszaru z kropkowaną ramką oznaczonego „Przeciągnij i upuść tutaj folder witryny” . Spowoduje to automatyczne utworzenie projektu o losowej nazwie. Możesz później zmienić tę nazwę w ustawieniach domeny witryny, jeśli chcesz.
   

   

   
   Oto, co powinieneś zobaczyć po utworzeniu projektu.
   

   

2. Zanim będziesz mógł wdrożyć tę metodę, musisz uzyskać identyfikator API projektu Netlify i osobisty token dostępu Netlify ze swojego konta. Identyfikator API projektu możesz uzyskać z ustawień witryny. W obszarze Ustawienia witryny > Ogólne > Szczegóły witryny > Informacje o witrynie znajdziesz identyfikator API swojego projektu.
   

   

   

   
   Możesz uzyskać osobisty token dostępu w ustawieniach użytkownika. W obszarze Ustawienia użytkownika > Aplikacje > Osobiste tokeny dostępu kliknij przycisk Nowy token dostępu . Po wyświetleniu monitu wprowadź opis swojego tokena, a następnie kliknij przycisk Generuj token . Skopiuj swój token. Ze względu na trwałość możesz przechowywać te wartości w pliku .env w swoim projekcie, ale nie sprawdzaj tego pliku, jeśli używasz systemu kontroli wersji.
   

   

   

   

   

3. Następnie dodaj netlify-builder do swojego projektu za pomocą ng add .
   

    ng add @netlify-builder/deploy

   Po zakończeniu instalacji zostaniesz poproszony o dodanie identyfikatora API i osobistego tokena dostępu.
   

   

   
   Dodanie ich tutaj jest opcjonalne. Możesz zignorować ten monit, ponieważ zostaną one dodane do twojego pliku angular.json , który jest zwykle zaewidencjonowany, jeśli używasz systemu kontroli wersji. Przechowywanie tego rodzaju poufnych informacji w repozytoriach kodu nie jest bezpieczne. Jeśli nie sprawdzasz tego pliku, możesz po prostu wprowadzić swój identyfikator API i osobisty token dostępu. Poniższy wpis zostanie zmodyfikowany w pliku angular.json w ustawieniach architect .
   

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

4. Pozostało tylko wdrożyć swoją aplikację, uruchamiając:
   

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

   Alternatywnie możesz umieścić to w skrypcie i uruchomić go, gdy musisz wdrożyć swoją aplikację.
   

    # 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

   To jest wynik, który powinieneś zobaczyć po uruchomieniu tego polecenia:
   

   

2. Korzystanie z Gita i internetowego interfejsu użytkownika Netlify

Jeśli kod Twojej aplikacji Angular jest hostowany na Github, Bitbucket lub Gitlab, możesz hostować projekt za pomocą internetowego interfejsu użytkownika Netlify.

1. Na karcie Witryny na pulpicie nawigacyjnym Netlify kliknij „ Nowa strona z Gita”.
   

   

2. Połącz się z usługą repozytorium kodu. Wybierz usługę, w której jest hostowany kod Twojej aplikacji. Zostaniesz poproszony o autoryzację Netlify do przeglądania Twoich repozytoriów. Będzie się to różnić w zależności od usługi.
   

   

3. Wybierz swoje repozytorium kodu.
   

   

4. Następnie określisz wdrożenia i ustawienia kompilacji. W takim przypadku wybierz gałąź, z której chcesz wdrożyć, określ polecenie build jako ng deploy --prod i katalog publikowania jako dist/<your app name> .
   

   

5. Kliknij przycisk Wdróż witrynę i gotowe.

3. Korzystanie z narzędzia Netlify CLI

1. Aby rozpocząć, zainstaluj narzędzie Netlify CLI w następujący sposób:
   

    npm install netlify-cli -g

   Jeśli instalacja się powiedzie, na terminalu powinny pojawić się następujące wyniki:
   

   

2. Następnie zaloguj się do Netlify, uruchamiając:
   

    netlify login

   Gdy uruchomisz to polecenie, przejdzie do okna przeglądarki, w którym zostaniesz poproszony o autoryzację Netlify CLI. Kliknij przycisk Authorize . Następnie możesz przystąpić do zamykania karty po przyznaniu autoryzacji.

   

   

3. Aby utworzyć nowy projekt Netlify, uruchom następujące polecenie na swoim terminalu:
   

    netlify init

   Zostaniesz poproszony o podłączenie aplikacji Angular do istniejącego projektu Netlify lub utworzenie nowego. Wybierz opcję Utwórz i skonfiguruj nową witrynę .

   

   Następnie wybierz swój zespół i nazwę witryny, którą chcesz wdrożyć. Po utworzeniu projektu narzędzie CLI wyświetli listę szczegółów witryny dla twojego projektu.
   

   

   Następnie narzędzie CLI poprosi o połączenie konta Netlify z dostawcą hostingu Git w celu skonfigurowania webhooków i wdrożenia kluczy. Nie możesz z tego zrezygnować. Wybierz opcję logowania, a następnie autoryzuj Netlify.
   

   

   Następnie zostaniesz poproszony o wprowadzenie polecenia budowania. Stosowanie:
   

    ng build --prod

   Następnie zostaniesz poproszony o podanie katalogu do wdrożenia. Wpisz dist/<app name> wraz z nazwą swojej aplikacji.
   

   

   Na końcu polecenie zakończy i wyświetli dane wyjściowe.
   

   

4. Aby wdrożyć aplikację, uruchom:
   

    netlify deploy --prod

   Użycie flagi --prod gwarantuje, że kompilacja zostanie wdrożona w środowisku produkcyjnym. Jeśli pominiesz tę flagę, polecenie netlify deploy wdroży twoją kompilację pod unikalnym adresem URL wersji roboczej, który jest używany do testowania i podglądu. Po zakończeniu wdrażania powinieneś zobaczyć następujące dane wyjściowe:
   

   

Przeglądanie przesłanych formularzy

Przesłane formularze można przeglądać w panelu Netlify w zakładce Formularze w Twojej witrynie. Możesz go znaleźć pod adresem app.netlify.com/sites/<your_site_name>/forms . Na tej stronie zostaną wyświetlone wszystkie Twoje aktywne formularze. Atrybut name, który umieściłeś w ukrytym elemencie formularza, jest nazwą formularza na pulpicie nawigacyjnym.

Po wybraniu formularza zostaną wyświetlone wszystkie zgłoszenia dla tego formularza. Możesz pobrać wszystkie wpisy jako plik CSV, oznaczyć je jako spam lub usunąć.

Wniosek

Netliify Forms umożliwia zbieranie przesłanych formularzy z Twojej aplikacji bez konieczności tworzenia lub konfigurowania zaplecza, aby to zrobić. Może to być przydatne zwłaszcza w aplikacjach, które muszą zbierać tylko ograniczoną ilość danych, takich jak informacje kontaktowe, opinie klientów, rejestracje na wydarzenia i tak dalej.

Parowanie reaktywnych formularzy Angular z formularzami Netlify pozwala na uporządkowanie modelu danych. Reaktywne formularze kątowe mają tę dodatkową zaletę, że ich model danych i elementy formularza są ze sobą zsynchronizowane. Nie polegają na renderowaniu interfejsu użytkownika.

Chociaż Netlify Forms działa tylko po wdrożeniu w Netlify Edge, platforma hostingowa jest dość solidna, zapewnia przydatne funkcje, takie jak testowanie A/B i automatyzuje tworzenie i wdrażanie aplikacji.

• Zobacz kod źródłowy tego projektu →

Możesz przeczytać więcej o używaniu Netlify z formularzami tutaj.