Netlify Forms And Edge ile Angular Form Oluşturun ve Dağıtın

Bir uygulamanın ön uç, arka uç ve dağıtım iş akışını oluşturmak çok fazla iş gerektirir. Uygulamanızın kullanıcılarından yalnızca sınırlı miktarda veri gönderimi topladığı durumlarda, tam bir arka uç oluşturmak zaman ve çabaya değmeyebilir. Tam bir arka uç geliştirmeye bir alternatif, Netlify Forms kullanmaktır. Bu eğitimde, Netlify Forms ile bir Angular reaktif formu nasıl kullanabileceğinizi açıklayacağım. Netlify Formları yalnızca Netlify'da dağıtıldığında çalıştığından, uygulamanızı Netlify Edge'de nasıl dağıtacağınızı da göstereceğim.

Araç Takımı

Angular reaktif form, ReactiveFormsModule sağlayıcıları kullanılarak bir bileşen sınıfı içinde açıkça oluşturulmuş yapılandırılmış bir veri modeline sahip bir formdur. Form görünümündeki her girdi öğesi için bir form modeli oluşturulur. Bu form modeli, FormControl sınıfının bir örneğidir ve form öğesinin değerini takip eder. Form modeli değişmez çünkü modelde her değişiklik yapıldığında FormControl örneği eski modeli güncellemek yerine yeni bir veri modeli döndürür. Değişmezliği, değişiklik tespitini daha verimli hale getirir ve gözlemlenebilir operatörlerle veri değişikliğine izin verir. Form girdi öğeleri doğrudan form modellerine bağlı olduğundan, aralarındaki güncellemeler eşzamanlıdır ve UI işlemeye dayanmaz.

Netlify, çeşitli teknolojilerle oluşturulmuş siteler oluşturmanıza, dağıtmanıza ve barındırmanıza olanak tanıyan bir platformdur. Angular ile oluşturulan siteler Netlify'da barındırılabilir. Netlify ayrıca, bu sitelerin yapılarını ve dağıtımlarını basitleştiren, otomatikleştiren ve artıran bir dizi araç sağlar. Bu eğitimde iki ürününü kullanacağız: Netlify Edge ve Netlify Forms.

Daha önce açıklandığı gibi, Netlify Forms, HTML formlarından gönderimleri otomatik olarak alan bir form işleme özelliğidir. API'ler, komut dosyaları vb. oluşturma gibi herhangi bir gönderim işleme yapılandırması gerektirmez. Bu özellik yalnızca Netlify'da dağıtılan sitelerdeki formlarla çalışır. Varsayılan olarak etkindir ve form gönderimlerini ayarlamak için gereken yapılandırmayı daha da azaltır. Gönderim işleme, bir sitenin HTML dosyalarının Netlify'ın derleme botları tarafından ayrıştırıldığı dağıtım sırasında ayarlanır.

Netlify Edge, sitelerin ve uygulamaların yayınlandığı küresel bir uygulama dağıtım ağıdır. A/B testi, geri alma, hazırlama ve aşamalı sunum gibi özellikler sağlar. Netlify Edge'deki tüm dağıtımlar atomiktir, yani bir site yalnızca tüm dosyalar yüklendiğinde/güncellendiğinde ve sitedeki değişiklikler hazır olduğunda yayındadır. Bir site dağıtıldığında, üretime dağıtıldığında netlify.app üzerinde bir alt etki alanı atanır. Netlify Edge ayrıca önizleme ve şube dağıtımlarını (hazırlama, geliştirme vb.) destekler.

Netlify Forms gönderme işleme, derleme botları dağıtım sırasında bir sitedeki HTML formlarını ayrıştırdığı için çalışır. Derlenmiş Angular sitelerdekiler gibi istemci tarafı Javascript ile oluşturulmuş formlar bu botlar tarafından bulunmayacaktır. Bu nedenle, Netlify Forms için normal kurulum, Angular Forms ile çalışmayacaktır.

Ancak bunun için bir çalışma var. Gönderimleri almasını sağlamak için, index.html dosyasına gizli bir düz HTML formu eklenir. Bu form, derleme botlarıyla çalışır. Angular Formu gönderirken, Netlify Forms tarafından yakalanan bu gizli forma bir gönderi isteği yapılır.

Bu yazımızda reaktif bir form oluşturacağız. Ayrıca gizli HTML formuna gönderi isteğinde bulunmak için bir hizmet geliştireceğiz. Son olarak, uygulamayı Netlify Edge'e dağıtacağız.

Örnek vermek

Uygulamanın nasıl oluşturulacağını göstermek için birçok web sitesinde yaygın olan bir geri bildirim formu örneğini alacağız. Bu formu, site kullanıcılarından adları ve e-posta adresleri ile birlikte yorum/şikayet, soru ve önerileri toplamak için kullanacağız. Bunu, sitenin derecelendirmesini toplamak için de kullanacağız.

Gereksinimler

Bu öğreticiyi takip etmek için bir Netlify hesabına ve yüklü Angular CLI'ye ihtiyacınız olacak. CLI'niz yoksa, npm kullanarak kurabilirsiniz.

 npm install -g @angular/cli

Henüz bir Netlify hesabına kaydolmadıysanız, buradan bir tane oluşturabilirsiniz. Netlify, Github, Gitlab, Bitbucket veya E-posta yoluyla kayıt imkanı sunar. Hangi dağıtım yöntemini seçtiğinize bağlı olarak, bunlar başka gereksinimler olabilir. Her dağıtım yöntemi altında belirtilecektir.

Uygulamayı Ayarlama

Başlamak için uygulamayı oluşturacağız ve buna feedback diyeceğiz. Oluştururken, istemlerde istendiğinde yönlendirme ekleyin.

 ng new feedback

Ardından, üç bileşen oluşturacağız: bir geri bildirim formu, başarılı bir gönderi mesajı sayfası ve bir 404 sayfası. Netlify Forms, başarılı form girişi gönderiminin ardından bir sayfaya gitmenizi sağlar. SuccessComponent için kullanacağız.

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

Bileşenleri oluşturduktan sonra, app-routing.module.ts routing.module.ts dosyasındaki AppRoutingModule her sayfaya yolları ekleyeceğiz.

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

Reaktif formumuzu oluşturmak için FormBuilder hizmetini kullanacağız. Bunun nedeni, temel form denetimlerini kullanmaktan daha uygun ve daha az tekrarlı olmasıdır. Buna erişmek için, app.module.ts dosyasına ReactiveFormsModule kaydetmemiz gerekecek.

Gizli HTML formuna bir gönderi isteği yapacağımız için, HttpClientModule da kaydetmemiz gerekiyor.

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

Yalnızca yönlendirici çıkışına sahip olmak için app.component.html içeriğini değiştirmeye devam edin.

 <router-outlet></router-outlet>

Farklı sayfalar bazı stilleri paylaşacak. Bu yüzden aşağıdaki stili style.css dosyasına ekleyin.

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

Reaktif Formu Oluşturun

FeedbackComponent Bileşeni sınıfımızda, formu oluşturmak için kullanacağımız FormBuilder hizmetini içe aktararak başlayacağız. Form girişi doğrulaması için Validators sınıfını da içe aktaracağız.

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

Daha sonra FormBuilder hizmetini FeedbackComponent yapıcısına ekleyerek enjekte edeceğiz.

 constructor(private fb: FormBuilder) { }

Ardından, enjekte edilen FormBuilder hizmetinin group yöntemini kullanarak form modelini tanımlayacağız. Ayrıca, form girişini gönderirken karşılaşabileceğimiz hataları tutmak için bir errorMsg özelliği ekleyeceğiz. Ayrıca, formda görüntülenen hata uyarısını kapatacak bir closeError yöntemi de dahildir.

Form modelindeki her kontrol, Validators sınıfından doğrulayıcılar kullanılarak doğrulanacaktır. Girişlerden herhangi biri doğrulamayı geçemezse, form geçersiz olacak ve gönderim devre dışı bırakılacaktır. email denetimi durumunda olduğu gibi bir form denetimine birden çok doğrulayıcı eklemeyi seçebilirsiniz.

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

Bileşenin şablonunda ( feedback.component.html ), bunu ekleyeceğiz.

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

Form öğesinin, az önce oluşturduğumuz modele karşılık gelen [formGroup]="feedbackForm" özniteliğine sahip olması gerektiğini unutmayın. Ayrıca, girdi öğelerinin her biri, modeldeki karşı form denetimine karşılık gelen bir formControlName="" özniteliğine sahip olmalıdır.

Forma stil vermek için bunu feedback.component.css ekleyin.

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

Bu form şöyle görünecek:

Gizli HTML Formu Ekleme

Daha önce belirtildiği gibi, Netlify Forms derleme botlarının ayrıştırabileceği gizli bir HTML formu eklememiz gerekiyor. Gönderiler daha sonra reaktif formumuzdan gizli HTML formuna gönderilecektir. HTML formu index.html dosyasına yerleştirilir.

Bu form, reaktif formla aynı ada sahip olmalıdır. Ek olarak, üç özellik daha içermelidir: netlify , netlify-honeypot ve hidden . Botlar, Netlify'ın onlardan gelen girdileri işleyebilmesi için netlify özniteliğine sahip tüm formları arar. Bir gönderim yapıldığında captcha'ların gösterilmesini önlemek için netlify-honeypot özniteliği eklenir ve ekstra spam koruması sağlar.

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

file giriş öğelerinin değerini ayarlayamayacağınız için bu yöntemi kullanarak dosya yükleyemeyeceğinizi not etmek önemlidir.

Gizli Forma Gönderi İsteği Yapma

Reaktif formdan HTML formuna bir gönderi göndermek için, index.html gönderimi içeren bir gönderi talebi yapacağız. İşlem, FeedbackComponent onSubmit yönteminde gerçekleştirilecektir.

Ancak, bunu yapmadan önce iki şey oluşturmamız gerekiyor: Feedback arabirimi ve NetlifyFormsService . Arayüzle başlayalım.

 touch src/app/feedback/feedback.ts

Bu dosyanın içeriği şöyle olacaktır:

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

NetlifyFormsService , geri bildirim girişi göndermek için genel bir yöntem, genel bir giriş göndermek için özel bir yöntem ve herhangi bir hatayı işlemek için başka bir özel yöntem içerecektir. Ek formlar için başka genel yöntemler ekleyebilirsiniz.

Oluşturmak için aşağıdakileri çalıştırın:

 ng gs netlify-forms/netlify-forms

submitEntry yöntemi, bir Observable<string> döndürür, çünkü Netlify, forma veri gönderdiğimizde bir başarı uyarısı içeren bir HTML sayfası gönderir. Bu hizmet:

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

Form gönderimini HttpParams olarak göndereceğiz. ContentType için bir başlık application/x-www-form-urlencoded değerine eklenmelidir. responseType seçeneği text olarak belirtilir, çünkü başarılı olursa gizli forma gönderme Netlify'dan genel bir başarı mesajı içeren bir HTML sayfası döndürür. Bu seçeneği eklemezseniz, yanıt JSON olarak ayrıştırılacağı için bir hata alırsınız. Aşağıda, genel Netlify başarı mesajının bir ekran görüntüsü bulunmaktadır.

FeedbackComponent sınıfında, NetlifyFormsService ve Router içe aktaracağız. Form girişini NetlifyFormsService.submitEntry yöntemini kullanarak göndereceğiz. Gönderim başarılı olursa, başarılı gönderim sayfasına yönlendirileceğiz ve formu sıfırlayacağız. Yönlendirme için Router hizmetini kullanacağız. Başarısız olursa, errorMsg özelliğine hata mesajı atanır ve formda görüntülenir.

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

Bundan sonra, yapıcıya hem NetlifyFormsService hem de Router enjekte edin.

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

Son olarak, FeedbackComponent.onSubmit içindeki NetlifyFormsService.submitEntry yöntemini çağırın.

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

Başarılı Bir Gönderi Sayfası Oluşturun

Bir kullanıcı bir gönderiyi tamamladığında, Netlify önceki bölümün son ekran görüntüsünde gösterilen genel bir başarı mesajı verir. Ancak, kendi özel başarı mesajı sayfanıza geri bağlantı verebilirsiniz. Bunu, gizli HTML formuna action niteliğini ekleyerek yaparsınız. Değeri, özel başarı sayfanızın göreli yoludur. Bu yol / ile başlamalı ve kök sitenize göre olmalıdır.

Ancak özel bir başarı sayfası ayarlamak, gizli bir HTML formu kullanırken işe yaramıyor gibi görünüyor. Gizli HTML formuna gönderilen istek başarılı olursa, genel Netlify başarı mesajını bir HTML sayfası olarak döndürür. Bir action özniteliği belirtildiğinde bile yeniden yönlendirme yapmaz. Bunun yerine, Router hizmetini kullanarak bir gönderimden sonra başarı mesajı sayfasına gideceğiz.

İlk olarak, daha önce oluşturduğumuz SuccessComponent içerik ekleyelim. success.component.html ekleyin:

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

Sayfanın stilini belirlemek için, bunu success.component.css ekleyin:

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

Bu, sayfanın nasıl göründüğü:

FeedbackComponent sınıfında, Router hizmetini içe aktarma olarak zaten ekledik ve yapıcıya enjekte ettik. onSubmit yönteminde, istek başarılı olduktan ve form sıfırlandıktan sonra, başarılı gönderim sayfasına /success success'e gideriz. Bunu yapmak için navigateByUrl yöntemini kullanırız.

404 Sayfasını Oluşturma

404 sayfası gerekli olmayabilir ama olması güzel. page-not-found.component.html şöyle olacaktır:

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

Stil vermek için bunu page-not-found.component.css :

 p { text-align: center; }

404 sayfası böyle görünecek.

Dağıtımdan Önce Yönlendirmeyi Düzeltin

Router hizmetini kullandığımız için tüm yönlendirmelerimiz istemcide yapılır. Uygulamamızdaki bir sayfanın bağlantısı adres çubuğuna (derin bağlantı) yapıştırılırsa veya bir sayfa yenilenirse, bu istek sunucumuza gönderilir. Sunucu, uygulamamızda ön uçta yapılandırıldıkları için rotalarımızdan hiçbirini içermiyor. Bu durumlarda bir 404 durumu alırız.

Bunu düzeltmek için Netlify sunucusuna tüm istekleri index.html sayfamıza yönlendirmesini söylemeliyiz. Bu şekilde Angular yönlendiricimiz bunları halledebilir. Eğer ilgileniyorsanız, bu fenomen hakkında daha fazla bilgiyi buradan ve buradan okuyabilirsiniz.

src klasörümüzde bir _redirects dosyası oluşturarak başlayacağız. _redirects dosyası, Netlify sitesi için yeniden yönlendirme ve yeniden yazma kurallarını belirten bir düz metin dosyasıdır. Site yayınlama sitesi dizininde ( dist/<app_name> ) bulunmalıdır. Onu src klasörüne yerleştireceğiz ve angular.json dosyasında bir varlık olarak belirteceğiz. Uygulama derlendiğinde, dist/<app_name> içine yerleştirilecektir.

 touch src/_redirects

Bu dosya aşağıdaki kuralı içerecektir. Sunucuya yapılan tüm isteklerin index.html yeniden yönlendirilmesi gerektiğini belirtir. Ayrıca, bu yönlendirmelerin 200 durumu döndürmesi gerektiğini belirtmek için sonuna bir HTTP durum kodu seçeneği ekledik. Varsayılan olarak, bir 301 durumu döndürülür.

 /* /index.html 200

Yapmamız gereken son şey, angular.json und er projects > {your_project_name} > architect > options > assets aşağıdaki seçeneği eklemektir. Bunu assets dizisine dahil edin:

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

Uygulamanızı Yerel Olarak Önizleyin

Geri bildirim uygulamasını dağıtmadan önce önizleme yapmak en iyisidir. Bu, sitenizin istediğiniz gibi çalıştığından emin olmanızı sağlar. Diğer şeylerin yanı sıra kaynaklara giden bozuk yollar gibi oluşturma sürecinden kaynaklanan sorunları ortaya çıkarabilirsiniz. İlk olarak, uygulamanızı oluşturmanız gerekecek. Daha sonra bir sunucu kullanarak derlenmiş sürümü sunacağız. Web uygulamaları için hafif bir canlı yeniden yükleme sunucusu olan lite-server'ı kullanacağız.

Not : Uygulama henüz Netlify'da dağıtılmadığından, gönderi isteğinde bulunmaya çalıştığınızda 404 hatası alırsınız. Bunun nedeni, Netlify Forms'un yalnızca dağıtılan uygulamalar üzerinde çalışmasıdır. Aşağıdaki ekran görüntüsünde gösterildiği gibi formda bir hata göreceksiniz, ancak dağıttıktan sonra çalışacaktır.

1. Başlamak için lite-server'ı kurun:
   

    npm install lite-server --save-dev

2. Ardından, uygulamanızın çalışma alanı dizini içinde uygulamanızı oluşturun. Dosyalarınız her değiştiğinde derlemelerin çalıştırıldığından emin olmak için --watch bayrağını ona iletin. Uygulama derlendikten sonra sonuçlar dist/<app name> çıktı dizinine yazılır. Bir sürüm kontrol sistemi kullanıyorsanız, oluşturulduğundan ve yalnızca önizleme amaçlı olduğundan dist klasörünü kontrol etmediğinizden emin olun.
   

    ng build --watch

3. Derlenmiş siteye hizmet vermek için lite-server derleme çıktı dizinine karşı çalıştırın.
   

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

Site artık localhost:3000 adresinde sunulmaktadır. Tarayıcınızda kontrol edin ve dağıtımına başlamadan önce beklendiği gibi çalıştığından emin olun.

dağıtım

Angular projenizi Netlify Edge'de dağıtmanın birden çok yolu vardır. Burada üçünü ele alacağız:

1. netlify-builder kullanarak,
2. Git ve Netlify web kullanıcı arayüzünü kullanarak,
3. Netlify CLI aracını kullanma.

1. netlify-builder kullanma

netlify-builder, Angular CLI aracılığıyla Angular uygulamalarının dağıtımını kolaylaştırır. Bu yöntemi kullanmak için uygulamanızın Angular CLI v8.3.0 veya üstü kullanılarak oluşturulmuş olması gerekir.

1. Netlify kontrol panelinizin Siteler sekmesinden yeni bir proje oluşturun. Git'i bir proje oluşturmak için kullanmayacağımız için, herhangi bir boş klasörü "Site klasörünüzü buraya sürükleyip bırakın" olarak işaretlenmiş noktalı kenarlıklı alana sürükleyin. Bu otomatik olarak rastgele bir ada sahip bir proje oluşturacaktır. Bu adı daha sonra dilerseniz sitenin alan adı ayarları altından değiştirebilirsiniz.
   

   

   
   Projeniz oluşturulduktan sonra görmeniz gereken şey budur.
   

   

2. Bu yöntemi kullanarak konuşlandırmadan önce, hesabınızdan Netlify projesinin API kimliğini ve bir Netlify kişisel erişim belirtecini almanız gerekir. Proje API kimliğini site ayarlarından alabilirsiniz. Site Ayarları > Genel > Site Ayrıntıları > Site Bilgileri altında projenizin API Kimliğini bulacaksınız.
   

   

   

   
   Kullanıcı ayarlarınızda kişisel bir erişim belirteci alabilirsiniz. Kullanıcı Ayarları > Uygulamalar > Kişisel erişim belirteçleri 'nde Yeni Erişim Simgesi düğmesini tıklayın. İstendiğinde, simgenizin açıklamasını girin ve ardından Belirteç Oluştur düğmesini tıklayın. Simgenizi kopyalayın. Kalıcılık adına, bu değerleri projenizdeki bir .env dosyasında saklayabilirsiniz, ancak bir sürüm kontrol sistemi kullanıyorsanız bu dosyayı kontrol etmeyin.
   

   

   

   

   

3. Ardından, ng add kullanarak projenize netlify-builder ekleyin.
   

    ng add @netlify-builder/deploy

   Yükleme tamamlandıktan sonra API kimliğini ve kişisel erişim belirtecini eklemeniz istenecektir.
   

   

   
   Bunları buraya eklemek isteğe bağlıdır. Bir sürüm kontrol sistemi kullanıyorsanız, genellikle teslim edilen angular.json dosyanıza ekleneceği için bu istemi yok sayabilirsiniz. Bu tür hassas bilgileri kod depolarında saklamak güvenli değildir. Bu dosyayı teslim etmiyorsanız, API kimliğinizi ve kişisel erişim jetonunuzu girmeniz yeterlidir. Aşağıdaki giriş, angular.json dosyanızda architect ayarları altında değiştirilecektir.
   

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

4. Geriye kalan tek şey, aşağıdakileri çalıştırarak uygulamanızı dağıtmaktır:
   

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

   Alternatif olarak, bunu bir komut dosyasına koyabilir ve uygulamanızı dağıtmanız gerektiğinde çalıştırabilirsiniz.
   

    # 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

   Bu komutu çalıştırdığınızda görmeniz gereken çıktı şudur:
   

   

2. Git ve Netlify Web Kullanıcı Arayüzünü Kullanma

Angular uygulamanızın kodu Github, Bitbucket veya Gitlab'da barındırılıyorsa projeyi Netlify'ın web kullanıcı arayüzünü kullanarak barındırabilirsiniz.

1. Netlify kontrol panelinizdeki Siteler sekmesinden “ Git'ten yeni site ”düğmesi.
   

   

2. Bir kod deposu hizmetine bağlanın. Uygulama kodunuzun barındırıldığı hizmeti seçin. Depolarınızı görüntülemek için Netlify'ı yetkilendirmeniz istenecektir. Bu hizmetten hizmete farklılık gösterecektir.
   

   

3. Kod deponuzu seçin.
   

   

4. Ardından, dağıtımları ve derleme ayarlarını belirleyeceksiniz. Bu durumda, dağıtmak istediğiniz dalı seçin, build komutunu ng deploy --prod olarak ve yayın dizinini dist/<your app name> olarak belirtin.
   

   

5. Siteyi Dağıt düğmesini tıklayın ve işiniz bitti.

3. Netlify CLI Aracını Kullanma

1. Başlamak için Netlify CLI aracını aşağıdaki gibi kurun:
   

    npm install netlify-cli -g

   Kurulum başarılı olursa, terminalinizde şu sonuçları görmelisiniz:
   

   

2. Ardından, aşağıdakileri çalıştırarak Netlify'da oturum açın:
   

    netlify login

   Bu komutu çalıştırdığınızda, Netlify CLI'yi yetkilendirmenizin isteneceği bir tarayıcı penceresine gidecektir. Authorize düğmesini tıklayın. Yetki verildikten sonra sekmeyi kapatmaya devam edebilirsiniz.

   

   

3. Yeni bir Netlify projesi oluşturmak için terminalinizde aşağıdakileri çalıştırın:
   

    netlify init

   Angular uygulamanızı mevcut bir Netlify projesine bağlamanız veya yeni bir tane oluşturmanız istenecektir. Yeni bir site oluştur ve yapılandır seçeneğini belirleyin.

   

   Ardından, ekibinizi ve dağıtmak istediğiniz site için bir ad seçin. Proje oluşturulduktan sonra, CLI aracı projeniz için site ayrıntılarını listeleyecektir.
   

   

   Bundan sonra CLI aracı, web kancalarını yapılandırmak ve anahtarları dağıtmak için Netlify hesabınızı bir Git barındırma sağlayıcısına bağlamanızı ister. Bundan vazgeçemezsiniz. Giriş yapmak için bir seçenek belirleyin ve ardından Netlify'ı yetkilendirin.
   

   

   Ardından, bir derleme komutu girmeniz istenecektir. Kullanmak:
   

    ng build --prod

   Ardından, dağıtılacak bir dizin sağlamanız istenecektir. dist/<app name> girin.
   

   

   Bunun sonunda, komut bu çıktıyı tamamlayacak ve gösterecektir.
   

   

4. Uygulamayı dağıtmak için şunu çalıştırın:
   

    netlify deploy --prod

   --prod bayrağının kullanılması, derlemenin üretime dağıtılmasını sağlar. Bu bayrağı atlarsanız, netlify deploy komutu, yapınızı test etmek ve önizlemek için kullanılan benzersiz bir taslak URL'ye dağıtır. Dağıtım tamamlandıktan sonra şu çıktıyı görmelisiniz:
   

   

Form Gönderimlerini Görüntüleme

Form gönderimleri, sitenizin Formlar sekmesi altındaki Netlify panosunda görüntülenebilir. Bunu app.netlify.com/sites/<your_site_name>/forms adresinde bulabilirsiniz. Bu sayfada tüm aktif formlarınız listelenecektir. Gizli form öğesine koyduğunuz name niteliği, gösterge tablosundaki formun adıdır.

Bir form seçtiğinizde, o form için tüm gönderiler listelenecektir. Tüm girişleri CSV dosyası olarak indirmeyi, spam olarak işaretlemeyi veya silmeyi seçebilirsiniz.

Çözüm

Netlify Forms, bunu yapmak için bir arka uç oluşturmak veya yapılandırmak zorunda kalmadan uygulamanızdan form gönderimi toplamanıza olanak tanır. Bu, özellikle iletişim bilgileri, müşteri geri bildirimleri, etkinlik kayıtları vb. gibi yalnızca sınırlı miktarda veri toplaması gereken uygulamalarda yararlı olabilir.

Angular reaktif formları Netlify formlarıyla eşleştirmek, veri modelinizi yapılandırmanıza olanak tanır. Açısal reaktif formlar, veri modellerinin ve form öğelerinin birbiriyle senkronize olması gibi ek bir avantaja sahiptir. UI oluşturma işlemine güvenmezler.

Netlify Forms yalnızca Netlify Edge'de dağıtıldığında çalışsa da barındırma platformu oldukça sağlamdır, A/B testi gibi kullanışlı özellikler sağlar ve uygulama oluşturma ve dağıtımlarını otomatikleştirir.

• Bu proje için kaynak koduna bakın →

Netlify'ı formlarınızla kullanma hakkında daha fazla bilgiyi buradan okuyabilirsiniz.