Bangun Dan Terapkan Bentuk Sudut Dengan Bentuk Dan Tepi Netlify

Membuat alur kerja frontend, backend, dan penerapan aplikasi membutuhkan banyak pekerjaan. Dalam kasus di mana aplikasi Anda hanya mengumpulkan pengiriman data dalam jumlah terbatas dari penggunanya, membangun keseluruhan backend mungkin tampak tidak sepadan dengan waktu dan usaha. Alternatif untuk mengembangkan backend lengkap menggunakan Netlify Forms. Dalam tutorial ini, saya akan menjelaskan bagaimana Anda bisa menggunakan formulir reaktif Angular dengan Netlify Forms. Karena Formulir Netlify hanya berfungsi saat digunakan di Netlify, saya juga akan mengilustrasikan cara menerapkan aplikasi Anda di Netlify Edge.

Perangkat

Formulir reaktif sudut adalah formulir yang memiliki model data terstruktur yang dibuat secara eksplisit dalam kelas komponen menggunakan penyedia ReactiveFormsModule. Model formulir dibuat untuk setiap elemen input dalam tampilan formulir. Model formulir ini adalah turunan dari kelas FormControl dan melacak nilai elemen formulir. Model formulir tidak dapat diubah karena setiap kali perubahan dibuat pada model, instance FormControl mengembalikan model data baru alih-alih memperbarui model lama. Kekekalannya membuat deteksi perubahan lebih efisien dan memungkinkan perubahan data dengan operator yang dapat diamati. Karena elemen input formulir terhubung langsung ke model formulirnya, pembaruan di antara elemen tersebut bersifat sinkron dan tidak bergantung pada rendering UI.

Netlify adalah platform yang memungkinkan Anda untuk membangun, menyebarkan, dan meng-host situs yang dibangun dengan berbagai teknologi. Situs yang dibangun dengan Angular dapat dihosting di Netlify. Netlify juga menyediakan sejumlah alat yang menyederhanakan, mengotomatisasi, dan meningkatkan pembuatan dan penerapan situs-situs ini. Kami akan menggunakan dua produknya dalam tutorial ini: Netlify Edge dan Netlify Forms.

Seperti yang dijelaskan sebelumnya, Netlify Forms adalah fitur penanganan formulir yang menerima kiriman dari formulir HTML secara otomatis. Itu tidak memerlukan konfigurasi pemrosesan pengiriman, seperti membuat API, skrip, dll. Fitur ini hanya berfungsi dengan formulir di situs yang digunakan di Netlify. Ini diaktifkan secara default, semakin mengurangi konfigurasi yang diperlukan untuk mengatur pengiriman formulir. Penanganan pengiriman diatur selama penerapan di mana file HTML situs diuraikan oleh bot build Netlify.

Netlify Edge adalah jaringan pengiriman aplikasi global tempat situs dan aplikasi dipublikasikan. Ini menyediakan fitur seperti pengujian A/B, rollback, staging, dan peluncuran bertahap. Semua penerapan di Netlify Edge bersifat atomik, artinya situs hanya aktif ketika semua file telah diunggah/diperbarui dan perubahan pada situs sudah siap. Setelah sebuah situs di-deploy, itu akan diberikan subdomain di netlify.app saat di-deploy ke produksi. Netlify Edge juga mendukung pratinjau dan penyebaran cabang (pementasan, pengembangan, dll.).

Penanganan pengiriman Formulir Netlify berfungsi karena bot build mem-parsing formulir HTML di situs selama penerapan. Formulir yang dirender Javascript sisi klien seperti yang ada di situs Angular yang dikompilasi tidak akan ditemukan oleh bot ini. Jadi pengaturan normal untuk Netlify Forms tidak akan bekerja dengan Angular Forms.

Namun, ada solusi untuk ini. Untuk membuatnya menerima kiriman, formulir HTML biasa yang tersembunyi ditambahkan ke file index.html . Formulir ini berfungsi dengan bot build. Saat mengirimkan Formulir Sudut, permintaan posting dibuat ke formulir tersembunyi ini yang kemudian ditangkap oleh Formulir Netlify.

Pada artikel ini, kami akan membuat formulir reaktif. Kami juga akan mengembangkan layanan untuk membuat permintaan posting ke formulir HTML tersembunyi. Terakhir, kami akan menyebarkan aplikasi ke Netlify Edge.

Contoh

Untuk mengilustrasikan cara membangun aplikasi, kami akan mengambil contoh formulir umpan balik yang umum di banyak situs web. Kami akan menggunakan formulir ini untuk mengumpulkan komentar/keluhan, pertanyaan, dan saran dari pengguna situs beserta nama dan email mereka. Kami juga akan menggunakannya untuk mengumpulkan peringkat situs mereka.

Persyaratan

Untuk mengikuti tutorial ini, Anda memerlukan akun Netlify dan Angular CLI diinstal. Jika Anda tidak memiliki CLI, Anda dapat menginstalnya menggunakan npm.

 npm install -g @angular/cli

Jika Anda belum mendaftar untuk akun Netlify, Anda dapat membuatnya di sini. Netlify menawarkan pendaftaran melalui Github, Gitlab, Bitbucket, atau Email. Bergantung pada metode penerapan yang Anda pilih, itu mungkin persyaratan lain. Mereka akan dinyatakan di bawah setiap metode penyebaran.

Menyiapkan Aplikasi

Untuk memulai, kami akan membuat aplikasi dan menyebutnya sebagai feedback . Saat membuatnya, tambahkan perutean ke sana saat diminta dalam petunjuknya.

 ng new feedback

Selanjutnya, kami akan membuat tiga komponen: formulir umpan balik, halaman pesan pengiriman yang berhasil, dan halaman 404. Formulir Netlify memungkinkan Anda untuk menavigasi ke halaman setelah pengiriman entri formulir berhasil. Untuk itulah kita akan menggunakan SuccessComponent .

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

Setelah membuat komponen, kami akan menambahkan rute ke setiap halaman di AppRoutingModule dalam file app-routing.module.ts .

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

Kami akan menggunakan layanan FormBuilder untuk membuat formulir reaktif kami. Ini karena lebih nyaman dan tidak terlalu berulang daripada menggunakan kontrol bentuk dasar. Untuk mengaksesnya, kita perlu mendaftarkan ReactiveFormsModule di file app.module.ts .

Karena kita akan membuat permintaan posting ke formulir HTML tersembunyi, kita juga harus mendaftarkan HttpClientModule .

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

Lanjutkan untuk mengubah konten app.component.html menjadi hanya outlet router.

 <router-outlet></router-outlet>

Halaman yang berbeda akan berbagi beberapa gaya. Jadi tambahkan gaya di bawah ini ke 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; } }

Buat Formulir Reaktif

Di kelas FeedbackComponent kami, kami akan mulai dengan mengimpor layanan FormBuilder yang akan kami gunakan untuk membuat formulir. Kami juga akan mengimpor kelas Validators untuk validasi input formulir.

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

Kami kemudian akan menyuntikkan layanan FormBuilder dengan menambahkannya ke konstruktor FeedbackComponent .

 constructor(private fb: FormBuilder) { }

Selanjutnya, kita akan mendefinisikan model formulir menggunakan metode group dari layanan FormBuilder yang disuntikkan. Kami juga akan menambahkan properti errorMsg untuk menampung kesalahan yang mungkin kami temui saat mengirimkan input formulir. Juga disertakan adalah metode closeError yang akan menutup peringatan kesalahan yang ditampilkan pada formulir.

Setiap kontrol dalam model formulir akan diverifikasi menggunakan validator dari kelas Validators . Jika salah satu input gagal validasi, formulir akan menjadi tidak valid dan pengiriman akan dinonaktifkan. Anda dapat memilih untuk menambahkan beberapa validator ke kontrol formulir seperti dalam kasus kontrol 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 = ''; } // ... }

Dalam template komponen ( feedback.component.html ), kita akan menambahkan ini.

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

Perhatikan bahwa elemen formulir harus memiliki [formGroup]="feedbackForm" yang sesuai dengan model yang baru saja kita buat. Selain itu, setiap elemen input harus memiliki formControlName="" yang sesuai dengan kontrol bentuk pasangannya dalam model.

Untuk mengatur gaya formulir, tambahkan ini ke 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; } }

Ini adalah apa bentuk akan terlihat seperti:

Menambahkan Formulir HTML Tersembunyi

Seperti yang dinyatakan sebelumnya, kita perlu menambahkan formulir HTML tersembunyi yang dapat diurai oleh bot pembuatan Netlify Forms. Kiriman kemudian akan dikirim dari formulir reaktif kami ke formulir HTML tersembunyi. Formulir HTML dimasukkan ke dalam file index.html .

Formulir ini harus memiliki nama yang sama dengan formulir reaktif. Selain itu, harus berisi tiga atribut lain: netlify , netlify-honeypot , dan hidden . Bot mencari formulir apa pun yang memiliki atribut netlify sehingga Netlify dapat memproses input darinya. netlify-honeypot ditambahkan untuk mencegah captcha ditampilkan saat pengiriman dilakukan dan memungkinkan perlindungan spam ekstra.

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

Penting untuk dicatat bahwa karena Anda tidak dapat menyetel nilai elemen input file , Anda tidak dapat mengunggah file menggunakan metode ini.

Membuat Permintaan Posting Ke Formulir Tersembunyi

Untuk mengirim kiriman dari formulir reaktif ke formulir HTML, kami akan membuat permintaan kiriman yang berisi kiriman ke index.html . Operasi akan dilakukan dalam metode onSubmit dari FeedbackComponent .

Namun, sebelum kita dapat melakukannya, kita perlu membuat dua hal: antarmuka Feedback dan NetlifyFormsService . Mari kita mulai dengan antarmuka.

 touch src/app/feedback/feedback.ts

Isi dari file ini akan menjadi:

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

NetlifyFormsService akan berisi metode publik untuk mengirimkan entri umpan balik, metode pribadi untuk mengirimkan entri generik, dan metode privat lainnya untuk menangani kesalahan apa pun. Anda dapat menambahkan metode publik lainnya untuk formulir tambahan.

Untuk membuatnya, jalankan yang berikut ini:

 ng gs netlify-forms/netlify-forms

Metode submitEntry mengembalikan Observable<string> karena Netlify mengirimkan halaman HTML dengan peringatan sukses setelah kami memposting data ke formulir. Ini adalah layanannya:

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

Kami akan mengirimkan pengiriman formulir sebagai HttpParams . Header untuk ContentType harus disertakan dengan nilai application/x-www-form-urlencoded . Opsi responseType ditentukan sebagai text karena jika berhasil, memposting ke formulir tersembunyi akan mengembalikan halaman HTML yang berisi pesan sukses umum dari Netlify. Jika Anda tidak menyertakan opsi ini, Anda akan mendapatkan kesalahan karena respons akan diuraikan sebagai JSON . Di bawah ini adalah tangkapan layar dari pesan sukses Netlify generik.

Di kelas FeedbackComponent , kita akan mengimpor NetlifyFormsService dan Router . Kami akan mengirimkan entri formulir menggunakan metode NetlifyFormsService.submitEntry . Jika pengiriman berhasil, kami akan mengarahkan ulang ke halaman pengiriman yang berhasil dan mengatur ulang formulir. Kami akan menggunakan layanan Router untuk pengalihan. Jika tidak berhasil, properti errorMsg akan diberikan pesan kesalahan dan ditampilkan pada formulir.

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

Setelah itu, NetlifyFormsService dan Router di konstruktor.

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

Terakhir, panggil metode NetlifyFormsService.submitEntry di FeedbackComponent.onSubmit .

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

Buat Halaman Pengiriman yang Berhasil

Ketika pengguna menyelesaikan pengiriman, Netlify mengembalikan pesan sukses umum yang ditunjukkan pada tangkapan layar terakhir dari bagian sebelumnya. Namun, Anda dapat menautkan kembali ke halaman pesan sukses kustom Anda sendiri. Anda melakukan ini dengan menambahkan atribut action ke formulir HTML tersembunyi. Nilainya adalah jalur relatif ke halaman sukses kustom Anda. Jalur ini harus dimulai dengan / dan relatif terhadap situs root Anda.

Namun, menyetel halaman sukses khusus tampaknya tidak berfungsi saat menggunakan formulir HTML tersembunyi. Jika permintaan posting ke formulir HTML tersembunyi berhasil, itu mengembalikan pesan sukses Netlify generik sebagai halaman HTML. Itu tidak mengarahkan bahkan ketika atribut action ditentukan. Jadi alih-alih kita akan menavigasi ke halaman pesan sukses setelah pengiriman menggunakan layanan Router .

Pertama, mari tambahkan konten ke SuccessComponent yang kita buat sebelumnya. Di success.component.html , tambahkan:

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

Untuk menata halaman, tambahkan ini ke success.component.css :

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

Ini tampilan halamannya:

Di kelas FeedbackComponent , kami telah menambahkan layanan Router sebagai impor dan memasukkannya ke dalam konstruktor. Dalam metode onSubmit -nya, setelah permintaan berhasil dan formulir telah diatur ulang, kami menavigasi ke halaman pengiriman yang berhasil, /success . Kami menggunakan metode navigateByUrl dari router untuk melakukan itu.

Membuat Halaman 404

Halaman 404 mungkin tidak diperlukan tetapi bagus untuk dimiliki. Isi dari page-not-found.component.html adalah:

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

Untuk menatanya, tambahkan ini ke page-not-found.component.css :

 p { text-align: center; }

Seperti inilah tampilan halaman 404.

Perbaiki Perutean Sebelum Penerapan

Karena kami menggunakan layanan Router , semua perutean kami dilakukan pada klien. Jika tautan ke halaman di aplikasi kami ditempelkan di bilah alamat (tautan dalam) atau ada penyegaran halaman, permintaan itu akan kami kirimkan ke server kami. Server tidak berisi rute kami karena mereka dikonfigurasi di frontend, di aplikasi kami. Kami akan menerima status 404 dalam kasus ini.

Untuk memperbaikinya, kita perlu memberitahu server Netlify untuk mengarahkan semua permintaan ke halaman index.html kita. Dengan cara ini router Angular kami dapat menanganinya. Jika Anda tertarik, Anda dapat membaca lebih lanjut tentang fenomena ini di sini dan di sini.

Kita akan mulai dengan membuat file _redirects di folder src kita. File _redirects adalah file teks biasa yang menentukan aturan redirect dan rewrite untuk situs Netlify. Itu harus berada di direktori situs penerbitan situs ( dist/<app_name> ). Kami akan menempatkannya di folder src dan menentukannya sebagai aset di file angular.json . Saat aplikasi dikompilasi, itu akan ditempatkan di dist/<app_name> .

 touch src/_redirects

File ini akan berisi aturan di bawah ini. Ini menunjukkan bahwa semua permintaan ke server harus diarahkan ke index.html . Kami juga menambahkan opsi kode status HTTP di bagian akhir untuk menunjukkan bahwa pengalihan ini harus mengembalikan status 200 . Secara default, status 301 dikembalikan.

 /* /index.html 200

Hal terakhir yang harus kita lakukan adalah menambahkan opsi di bawah ini di angular.json kami di bawah er projects > {your_project_name} > architect > options > assets . Sertakan dalam array assets :

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

Pratinjau Aplikasi Anda Secara Lokal

Sebelum Anda dapat menerapkan aplikasi umpan balik, yang terbaik adalah melihat pratinjaunya. Ini memungkinkan Anda untuk memastikan situs Anda berfungsi seperti yang Anda inginkan. Anda mungkin menemukan masalah yang dihasilkan dari proses pembangunan seperti jalur rusak ke sumber daya antara lain. Pertama, Anda harus membangun aplikasi Anda. Kami kemudian akan menyajikan versi yang dikompilasi menggunakan server. Kami akan menggunakan lite-server yang merupakan server live-reload ringan untuk aplikasi web.

Catatan : Karena aplikasi ini belum digunakan di Netlify, Anda akan mendapatkan kesalahan 404 saat mencoba membuat permintaan posting. Ini karena Formulir Netlify hanya berfungsi pada aplikasi yang digunakan. Anda akan melihat kesalahan pada formulir seperti yang ditunjukkan pada tangkapan layar di bawah, namun, itu akan berfungsi setelah Anda menerapkannya.

1. Untuk memulai, instal lite-server:
   

    npm install lite-server --save-dev

2. Selanjutnya, dalam direktori ruang kerja aplikasi Anda, buat aplikasi Anda. Untuk memastikan build dijalankan setiap kali file Anda berubah, teruskan flag --watch ke sana. Setelah aplikasi dikompilasi, hasilnya ditulis ke direktori keluaran dist/<app name> . Jika Anda menggunakan sistem kontrol versi, pastikan untuk tidak memeriksa folder dist karena dibuat dan hanya untuk tujuan pratinjau.
   

    ng build --watch

3. Untuk melayani situs yang dikompilasi, jalankan lite-server terhadap direktori keluaran build.
   

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

Situs ini sekarang disajikan di localhost:3000 . Lihat di browser Anda dan pastikan itu berfungsi seperti yang diharapkan sebelum Anda memulai penerapannya.

Penyebaran

Ada beberapa cara Anda dapat menerapkan proyek Angular Anda ke Netlify Edge. Kami akan membahas tiga di sini:

1. Menggunakan netlify-builder ,
2. Menggunakan Git dan UI web Netlify,
3. Menggunakan alat Netlify CLI.

1. Menggunakan netlify-builder

netlify-builder memfasilitasi penerapan aplikasi Angular melalui Angular CLI. Untuk menggunakan metode ini, aplikasi Anda harus dibuat menggunakan Angular CLI v8.3.0 atau lebih tinggi.

1. Dari tab Situs di dasbor Netlify Anda, buat proyek baru. Karena kita tidak akan menggunakan Git untuk membuat proyek, seret folder kosong apa pun ke area batas bertitik bertanda "Seret dan letakkan folder situs Anda di sini" . Ini akan secara otomatis membuat proyek dengan nama acak. Anda dapat mengubah nama ini di bawah pengaturan domain situs nanti jika Anda mau.
   

   

   
   Inilah yang akan Anda lihat setelah proyek Anda dibuat.
   

   

2. Sebelum Anda dapat menerapkan menggunakan metode ini, Anda harus mendapatkan ID API proyek Netlify dan token akses pribadi Netlify dari akun Anda. Anda bisa mendapatkan ID API proyek dari pengaturan situs. Di bawah Pengaturan Situs > Umum > Detail Situs > Informasi Situs, Anda akan menemukan ID API proyek Anda.
   

   

   

   
   Anda bisa mendapatkan token akses pribadi di pengaturan pengguna Anda. Pada Pengaturan Pengguna > Aplikasi > Token akses pribadi , klik tombol Token Akses Baru . Saat diminta, masukkan deskripsi token Anda, lalu klik tombol Generate Token . Salin token Anda. Demi kegigihan, Anda dapat menyimpan nilai-nilai ini dalam file .env dalam proyek Anda, tetapi jangan periksa file ini jika Anda menggunakan sistem kontrol versi.
   

   

   

   

   

3. Selanjutnya, tambahkan netlify-builder ke proyek Anda menggunakan ng add .
   

    ng add @netlify-builder/deploy

   Setelah selesai menginstal, Anda akan diminta untuk menambahkan ID API dan token akses pribadi.
   

   

   
   Ini opsional untuk menambahkan ini di sini. Anda dapat mengabaikan perintah ini karena akan ditambahkan ke file angular.json Anda yang biasanya diperiksa jika Anda menggunakan sistem kontrol versi. Tidak aman untuk menyimpan informasi sensitif semacam ini pada kode repo. Jika Anda tidak memeriksa file ini, Anda bisa memasukkan ID API dan token akses pribadi Anda. Entri di bawah ini akan dimodifikasi dalam file angular.json Anda di bawah pengaturan architect .
   

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

4. Yang tersisa hanyalah menerapkan aplikasi Anda dengan menjalankan:
   

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

   Atau, Anda bisa memasukkan ini ke dalam skrip dan menjalankannya saat Anda perlu men-deploy aplikasi Anda.
   

    # 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

   Ini adalah output yang akan Anda lihat setelah Anda menjalankan perintah ini:
   

   

2. Menggunakan Git Dan UI Web Netlify

Jika kode aplikasi Angular Anda dihosting di Github, Bitbucket, atau Gitlab, Anda dapat menghosting proyek menggunakan UI web Netlify.

1. Dari tab Situs di dasbor Netlify Anda, klik tombol “ Situs baru dari tombol Git”.
   

   

2. Hubungkan ke layanan repositori kode. Pilih layanan tempat kode aplikasi Anda dihosting. Anda akan diminta untuk mengotorisasi Netlify untuk melihat repositori Anda. Ini akan berbeda dari layanan ke layanan.
   

   

3. Pilih repositori kode Anda.
   

   

4. Selanjutnya, Anda akan menentukan penerapan dan pengaturan build. Dalam hal ini, pilih cabang tempat Anda ingin menerapkan, tentukan perintah build sebagai ng deploy --prod dan direktori publish sebagai dist/<your app name> .
   

   

5. Klik tombol Deploy Site dan selesai.

3. Menggunakan Alat CLI Netlify

1. Untuk memulai, instal alat Netlify CLI sebagai berikut:
   

    npm install netlify-cli -g

   Jika instalasi berhasil, Anda akan melihat hasil ini di terminal Anda:
   

   

2. Selanjutnya, masuk ke Netlify dengan menjalankan:
   

    netlify login

   Ketika Anda menjalankan perintah ini, itu akan menavigasi ke jendela browser di mana Anda akan diminta untuk mengotorisasi CLI Netlify. Klik tombol Authorize . Anda kemudian dapat melanjutkan untuk menutup tab setelah otorisasi diberikan.

   

   

3. Untuk membuat proyek Netlify baru, jalankan yang berikut di terminal Anda:
   

    netlify init

   Anda akan diminta untuk menghubungkan aplikasi Angular Anda ke proyek Netlify yang ada atau membuat yang baru. Pilih opsi Buat & konfigurasikan situs baru .

   

   Selanjutnya, pilih tim Anda dan nama untuk situs yang ingin Anda terapkan. Setelah proyek dibuat, alat CLI akan mencantumkan detail situs untuk proyek Anda.
   

   

   Setelah itu, alat CLI akan meminta Anda untuk menghubungkan akun Netlify Anda ke penyedia hosting Git untuk mengonfigurasi webhook dan menerapkan kunci. Anda tidak dapat memilih keluar dari ini. Pilih opsi untuk masuk lalu otorisasi Netlify.
   

   

   Selanjutnya, Anda akan diminta untuk memasukkan perintah build. Menggunakan:
   

    ng build --prod

   Setelah itu, Anda akan diminta untuk menyediakan direktori untuk disebarkan. Masukkan dist/<app name> dengan nama aplikasi Anda.
   

   

   Pada akhirnya, perintah akan selesai dan menampilkan output ini.
   

   

4. Untuk menerapkan aplikasi, jalankan:
   

    netlify deploy --prod

   Menggunakan flag --prod memastikan bahwa build di-deploy ke produksi. Jika Anda menghilangkan tanda ini, perintah netlify deploy akan menerapkan build Anda ke URL draf unik yang digunakan untuk pengujian dan pratinjau. Setelah penerapan selesai, Anda akan melihat output ini:
   

   

Melihat Pengiriman Formulir

Pengiriman formulir dapat dilihat di dasbor Netlify di bawah tab Formulir di situs Anda. Anda dapat menemukannya di app.netlify.com/sites/<your_site_name>/forms . Di halaman ini, semua formulir aktif Anda akan terdaftar. Atribut nama yang Anda letakkan di elemen formulir tersembunyi adalah nama formulir di dasbor.

Setelah Anda memilih formulir, semua kiriman untuk formulir itu akan terdaftar. Anda dapat memilih untuk mengunduh semua entri sebagai file CSV, menandainya sebagai spam, atau menghapusnya.

Kesimpulan

Netlify Forms memungkinkan Anda mengumpulkan pengiriman formulir dari aplikasi Anda tanpa harus membuat atau mengonfigurasi backend untuk melakukannya. Ini bisa berguna terutama di aplikasi yang hanya perlu mengumpulkan data dalam jumlah terbatas seperti informasi kontak, umpan balik pelanggan, pendaftaran acara, dan sebagainya.

Memasangkan formulir reaktif Angular dengan formulir Netlify memungkinkan Anda menyusun model data Anda. Bentuk reaktif sudut memiliki manfaat tambahan karena model data dan elemen formulirnya sinkron satu sama lain. Mereka tidak bergantung pada rendering UI.

Meskipun Netlify Forms hanya berfungsi saat digunakan di Netlify Edge, platform hostingnya cukup kuat, menyediakan fitur yang berguna seperti pengujian A/B, dan mengotomatiskan pembuatan dan penerapan aplikasi.

• Lihat kode sumber untuk proyek ini →

Anda dapat melanjutkan membaca lebih lanjut tentang menggunakan Netlify dengan formulir Anda di sini.