قم ببناء ونشر نموذج زاوي باستخدام أشكال Netlify والحافة

يتطلب إنشاء سير عمل الواجهة الأمامية والخلفية والنشر لتطبيق ما الكثير من العمل. في الحالات التي يجمع فيها تطبيقك قدرًا محدودًا فقط من عمليات إرسال البيانات من مستخدميه ، قد لا يبدو أن إنشاء خلفية كاملة يستحق الوقت والجهد. بديل لتطوير خلفية كاملة هو استخدام نماذج Netlify. في هذا البرنامج التعليمي ، سأشرح كيف يمكنك استخدام نموذج Angular التفاعلي مع Netlify Forms. نظرًا لأن نماذج Netlify لا تعمل إلا عند نشرها على Netlify ، فسأوضح أيضًا كيفية نشر تطبيقك على Netlify Edge.

مجموعة الأدوات

النموذج التفاعلي الزاوي هو نموذج يحتوي على نموذج بيانات منظم تم إنشاؤه بشكل صريح ضمن فئة مكون باستخدام موفري ReactiveFormsModule. يتم إنشاء نموذج نموذج لكل عنصر إدخال في طريقة عرض النموذج. نموذج النموذج هذا هو مثيل لفئة FormControl وهو يتتبع قيمة عنصر النموذج. نموذج النموذج غير قابل للتغيير لأنه كلما تم إجراء تغيير على النموذج ، يقوم مثيل FormControl بإرجاع نموذج بيانات جديد بدلاً من تحديث النموذج القديم. ثباته يجعل اكتشاف التغيير أكثر كفاءة ويسمح بتغيير البيانات مع المشغلين الذين يمكن ملاحظتهم. نظرًا لأن عناصر إدخال النموذج متصلة مباشرة بنماذج النماذج الخاصة بهم ، فإن التحديثات بينها متزامنة ولا تعتمد على عرض واجهة المستخدم.

Netlify عبارة عن نظام أساسي يسمح لك بإنشاء ونشر واستضافة مواقع تم إنشاؤها باستخدام تقنيات مختلفة. يمكن استضافة المواقع التي تم إنشاؤها باستخدام Angular على Netlify. يوفر Netlify بالإضافة إلى ذلك مجموعة من الأدوات التي تعمل على تبسيط ، وأتمتة ، وزيادة عمليات إنشاء ونشر هذه المواقع. سنستخدم اثنين من منتجاتها في هذا البرنامج التعليمي: Netlify Edge و Netlify Forms.

كما تم وصفه سابقًا ، تعد Netlify Forms إحدى ميزات معالجة النماذج التي تتلقى عمليات الإرسال من نماذج HTML تلقائيًا. لا يتطلب أي تكوين لمعالجة الإرسال ، مثل إنشاء واجهات برمجة التطبيقات والبرامج النصية وما إلى ذلك. تعمل هذه الميزة فقط مع النماذج الموجودة في المواقع المنشورة على Netlify. يتم تمكينه افتراضيًا ، مما يؤدي إلى تقليل التكوين المطلوب لإعداد عمليات إرسال النموذج. يتم إعداد معالجة الإرسال أثناء النشر حيث يتم تحليل ملفات HTML الخاصة بالموقع بواسطة روبوتات إنشاء Netlify.

Netlify Edge هي شبكة عالمية لتسليم التطبيقات يتم نشر المواقع والتطبيقات عليها. يوفر ميزات مثل اختبار A / B ، والتراجع ، والتشغيل المرحلي ، والطرح التدريجي. جميع عمليات النشر على Netlify Edge هي ذرية ، مما يعني أن الموقع يكون مباشرًا فقط عندما يتم تحميل / تحديث جميع الملفات وتكون التغييرات على الموقع جاهزة. بمجرد نشر الموقع ، يتم تعيين نطاق فرعي له على netlify.app عند نشره في الإنتاج. يدعم Netlify Edge أيضًا عمليات نشر المعاينة والفروع (التدريج والتطوير وما إلى ذلك).

تعمل معالجة إرسال نماذج Netlify لأن برامج الروبوت تقوم بتحليل نماذج HTML على الموقع أثناء النشر. لن يتم العثور على نماذج جافا سكريبت من جانب العميل مثل تلك الموجودة في مواقع Angular المجمعة بواسطة هذه الروبوتات. لذلك لن يعمل الإعداد العادي لـ Netlify Forms مع Angular Forms.

ومع ذلك ، هناك حل بديل لهذا. للحصول عليه لتلقي الطلبات ، يتم إضافة نموذج HTML عادي مخفي إلى ملف index.html . يعمل هذا النموذج مع روبوتات الإنشاء. عند إرسال النموذج الزاوي ، يتم تقديم طلب نشر إلى هذا النموذج المخفي الذي يتم التقاطه بعد ذلك بواسطة نماذج Netlify.

في هذه المقالة ، سننشئ نموذجًا تفاعليًا. سنقوم أيضًا بتطوير خدمة لتقديم طلب نشر إلى نموذج HTML المخفي. أخيرًا ، سننشر التطبيق على Netlify Edge.

مثال

لتوضيح كيفية إنشاء التطبيق ، سنأخذ مثالاً على نموذج التعليقات الشائعة في العديد من مواقع الويب. سنستخدم هذا النموذج لجمع التعليقات / الشكاوى والأسئلة والاقتراحات من مستخدمي الموقع جنبًا إلى جنب مع أسمائهم وبريدهم الإلكتروني. سنستخدمها أيضًا لجمع تصنيفهم للموقع.

متطلبات

لمتابعة هذا البرنامج التعليمي ، ستحتاج إلى حساب Netlify وتثبيت Angular CLI. إذا لم يكن لديك CLI ، فيمكنك تثبيته باستخدام npm.

 npm install -g @angular/cli

إذا لم تقم بالتسجيل للحصول على حساب Netlify حتى الآن ، فيمكنك إنشاء حساب هنا. تقدم Netlify الاشتراك من خلال Github أو Gitlab أو Bitbucket أو البريد الإلكتروني. اعتمادًا على طريقة النشر التي تختارها ، قد تكون متطلبات أخرى. سيتم ذكرها تحت كل طريقة نشر.

إعداد التطبيق

للبدء ، سننشئ التطبيق ونطلق عليه feedback . عند إنشائه ، أضف التوجيه إليه عندما يُطلب منك ذلك في المطالبات.

 ng new feedback

بعد ذلك ، سننشئ ثلاثة مكونات: نموذج التعليقات وصفحة رسالة الإرسال الناجحة وصفحة 404. تسمح لك نماذج Netlify بالانتقال إلى صفحة عند تقديم إدخال نموذج ناجح. هذا ما سنستخدم SuccessComponent من أجله.

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

بعد إنشاء المكونات ، سنضيف المسارات إلى كل صفحة في AppRoutingModule داخل ملف app-routing.module.ts .

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

سنستخدم خدمة FormBuilder لإنشاء النموذج التفاعلي الخاص بنا. هذا لأنه أكثر ملاءمة وأقل تكرارًا من استخدام عناصر تحكم النموذج الأساسية. للوصول إليه ، سنحتاج إلى تسجيل ReactiveFormsModule في ملف app.module.ts .

نظرًا لأننا سنقدم طلب نشر إلى نموذج HTML المخفي ، يتعين علينا أيضًا تسجيل HttpClientModule .

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

تابع تغيير محتويات app.component.html لمجرد الحصول على منفذ جهاز التوجيه.

 <router-outlet></router-outlet>

ستشترك الصفحات المختلفة في بعض التصميم. لذا أضف التصميم أدناه إلى 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; } }

قم بإنشاء النموذج التفاعلي

في فئة FeedbackComponent ، سنبدأ باستيراد خدمة FormBuilder التي سنستخدمها لإنشاء النموذج. سنقوم أيضًا باستيراد فئة Validators للتحقق من صحة إدخال النموذج.

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

سنقوم بعد ذلك بحقن خدمة FormBuilder عن طريق إضافتها إلى مُنشئ FeedbackComponent .

 constructor(private fb: FormBuilder) { }

بعد ذلك ، سنحدد نموذج النموذج باستخدام طريقة group لخدمة FormBuilder المحقونة. سنضيف أيضًا خاصية errorMsg للاحتفاظ بأي أخطاء قد نواجهها عند إرسال إدخال النموذج. يتم أيضًا تضمين طريقة closeError التي ستغلق تنبيه الخطأ الذي يظهر في النموذج.

سيتم التحقق من كل عنصر تحكم في نموذج النموذج باستخدام أدوات تحقق من فئة Validators . إذا فشل أي من الإدخالات في التحقق من الصحة ، فسيكون النموذج غير صالح وسيتم تعطيل الإرسال. يمكنك اختيار إضافة أدوات تحقق متعددة إلى عنصر تحكم النموذج كما في حالة عنصر التحكم في 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 = ''; } // ... }

في نموذج المكون ( feedback.component.html ) ، سنضيف هذا.

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

لاحظ أن عنصر النموذج يجب أن يحتوي على [formGroup]="feedbackForm" المقابلة للنموذج الذي أنشأناه للتو. أيضًا ، يجب أن يكون لكل عنصر من عناصر الإدخال formControlName="" سمة تقابل عنصر التحكم في النموذج المقابل في النموذج.

لتصميم النموذج ، أضف هذا إلى 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; } }

هذا ما سيبدو عليه النموذج:

إضافة نموذج HTML مخفي

كما ذكرنا سابقًا ، نحتاج إلى إضافة نموذج HTML مخفي يمكن لروبوتات بناء نماذج Netlify تحليله. سيتم إرسال الطلبات بعد ذلك من النموذج التفاعلي الخاص بنا إلى نموذج HTML المخفي. يتم وضع نموذج HTML في ملف index.html .

يجب أن يحمل هذا النموذج نفس اسم النموذج التفاعلي. بالإضافة إلى ذلك ، يجب أن يحتوي على ثلاث سمات أخرى: netlify و netlify-honeypot hidden تبحث الروبوتات عن أي نماذج لها سمة netlify حتى يتمكن Netlify من معالجة المدخلات منها. تتم إضافة السمة netlify-honeypot لمنع إظهار حروف التحقق عند إجراء الإرسال وتمكين حماية إضافية من البريد العشوائي.

 <!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 ، فلا يمكنك تحميل ملف باستخدام هذه الطريقة.

عمل طلب نشر على النموذج المخفي

لإرسال إرسال من النموذج التفاعلي إلى نموذج HTML ، سنقوم بإرسال طلب نشر يحتوي على الإرسال إلى index.html . سيتم تنفيذ العملية بطريقة onSubmit من FeedbackComponent .

ومع ذلك ، قبل أن نتمكن من القيام بذلك ، نحتاج إلى إنشاء شيئين: واجهة Feedback و NetlifyFormsService . لنبدأ بالواجهة.

 touch src/app/feedback/feedback.ts

محتويات هذا الملف ستكون:

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

NetlifyFormsService على طريقة عامة لتقديم إدخال ملاحظات ، وطريقة خاصة لتقديم إدخال عام ، وطريقة خاصة أخرى للتعامل مع أي أخطاء. يمكنك إضافة طرق عامة أخرى لنماذج إضافية.

لإنشائه ، قم بتشغيل ما يلي:

 ng gs netlify-forms/netlify-forms

تقوم طريقة submitEntry بإرجاع ملاحظة Observable<string> لأن Netlify يرسل صفحة HTML مع تنبيه نجاح بمجرد نشر البيانات في النموذج. هذه هي الخدمة:

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

سنقوم بإرسال نموذج التقديم كـ HttpParams . يجب تضمين رأس نوع ContentType مع القيمة application/x-www-form-urlencoded . يتم تحديد خيار responseType text لأنه في حالة نجاح النشر في النموذج المخفي سيعيد صفحة HTML تحتوي على رسالة نجاح عامة من Netlify. إذا لم تقم بتضمين هذا الخيار ، فسوف تحصل على خطأ لأنه سيتم تحليل الاستجابة على أنها JSON . يوجد أدناه لقطة شاشة لرسالة نجاح Netlify العامة.

في فئة FeedbackComponent ، سنقوم باستيراد NetlifyFormsService and Router . سنقوم بإرسال إدخال النموذج باستخدام طريقة NetlifyFormsService.submitEntry . إذا تم الإرسال بنجاح ، فسنقوم بإعادة التوجيه إلى صفحة الإرسال الناجح وإعادة تعيين النموذج. سنستخدم خدمة Router لإعادة التوجيه. إذا لم تنجح ، فسيتم تعيين رسالة الخطأ للخاصية errorMsg وسيتم عرضها في النموذج.

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

بعد ذلك ، قم بحقن كل من NetlifyFormsService و Router في المنشئ.

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

أخيرًا ، اتصل بطريقة NetlifyFormsService.submitEntry في FeedbackComponent.onSubmit .

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

قم بإنشاء صفحة إرسال ناجحة

عندما يُكمل المستخدم إرسالًا ، يُرجع Netlify رسالة نجاح عامة معروضة في آخر لقطة شاشة للقسم السابق. ومع ذلك ، يمكنك الارتباط مرة أخرى بصفحة رسالة النجاح المخصصة الخاصة بك. يمكنك القيام بذلك عن طريق إضافة سمة action إلى نموذج HTML المخفي. قيمته هي المسار النسبي لصفحة النجاح المخصصة الخاصة بك. يجب أن يبدأ هذا المسار بـ / ويكون نسبيًا لموقعك الجذر.

ومع ذلك ، لا يبدو أن تعيين صفحة نجاح مخصصة يعمل عند استخدام نموذج HTML مخفي. إذا كان طلب النشر إلى نموذج HTML المخفي ناجحًا ، فسيتم إرجاع رسالة نجاح Netlify العامة كصفحة HTML. لا يتم إعادة التوجيه حتى عند تحديد سمة action . لذا بدلاً من ذلك ، سننتقل إلى صفحة رسالة النجاح بعد الإرسال باستخدام خدمة Router .

أولاً ، دعنا نضيف محتوى إلى SuccessComponent الذي أنشأناه سابقًا. في success.component.html ، أضف:

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

لتصميم الصفحة ، أضف هذا إلى success.component.css :

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

هذا ما تبدو عليه الصفحة:

في فئة FeedbackComponent ، أضفنا بالفعل خدمة Router وقمنا بحقنها في المُنشئ. في أسلوب onSubmit الخاص به ، بعد نجاح الطلب وإعادة ضبط النموذج ، ننتقل إلى صفحة الإرسال الناجحة ، /success . نستخدم طريقة navigateByUrl للموجه للقيام بذلك.

إنشاء صفحة 404

قد لا تكون صفحة 404 ضرورية ولكن من الجيد امتلاكها. ستكون محتويات page-not-found.component.html :

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

لتصميمه ، أضف هذا إلى page-not-found.component.css :

 p { text-align: center; }

هذا ما ستبدو عليه صفحة 404.

إصلاح التوجيه قبل النشر

نظرًا لأننا نستخدم خدمة Router ، فإن جميع عمليات التوجيه الخاصة بنا تتم على العميل. إذا تم لصق رابط إلى صفحة في تطبيقنا في شريط العنوان (رابط عميق) أو كان هناك تحديث للصفحة ، فسيتم إرسال هذا الطلب إلى خادمنا. لا يحتوي الخادم على أي من مساراتنا لأنه تمت تهيئتها في الواجهة الأمامية في تطبيقنا. سوف نتلقى حالة 404 في هذه الحالات.

لإصلاح ذلك ، نحتاج إلى إخبار خادم Netlify بإعادة توجيه جميع الطلبات إلى صفحة index.html الخاصة بنا. بهذه الطريقة يمكن لجهاز التوجيه الزاوي الخاص بنا التعامل معها. إذا كنت مهتمًا ، يمكنك قراءة المزيد عن هذه الظاهرة هنا وهنا.

سنبدأ بإنشاء ملف _redirects في مجلد src الخاص بنا. ملف _redirects هو ملف نصي عادي يحدد قواعد إعادة التوجيه وإعادة الكتابة لموقع Netlify. يجب أن تكون موجودة في دليل موقع نشر الموقع ( dist/<app_name> ). سنضعه في مجلد src ونحدده كأصل في ملف angular.json . عندما يتم تجميع التطبيق ، سيتم وضعه في dist/<app_name> .

 touch src/_redirects

سيحتوي هذا الملف على القاعدة أدناه. يشير إلى أنه يجب إعادة توجيه جميع الطلبات إلى الخادم إلى index.html . نضيف أيضًا خيار رمز حالة HTTP في النهاية للإشارة إلى أن عمليات إعادة التوجيه هذه يجب أن تعرض الحالة 200 . بشكل افتراضي ، يتم إرجاع حالة 301 .

 /* /index.html 200

آخر شيء يتعين علينا القيام به هو إضافة الخيار أدناه في مشاريعنا angular.json und er projects > {your_project_name} > architect > options > assets . قم بتضمينه في مصفوفة assets :

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

معاينة التطبيق الخاص بك محليًا

قبل أن تتمكن من نشر تطبيق الملاحظات ، من الأفضل معاينته. يتيح لك هذا التأكد من أن موقعك يعمل بالشكل الذي كنت تقصده. قد تكتشف المشكلات الناتجة عن عملية الإنشاء مثل المسارات المقطوعة إلى الموارد من بين أشياء أخرى. أولاً ، سيتعين عليك إنشاء تطبيقك. سنقوم بعد ذلك بتقديم النسخة المترجمة باستخدام الخادم. سنستخدم خادم لايت وهو خادم إعادة تحميل مباشر خفيف الوزن لتطبيقات الويب.

ملاحظة : نظرًا لأن التطبيق لم يتم نشره على Netlify حتى الآن ، فستتلقى خطأ 404 عندما تحاول تقديم طلب النشر. هذا لأن نماذج Netlify تعمل فقط على التطبيقات المنشورة. سترى خطأ في النموذج كما هو موضح في لقطة الشاشة أدناه ، ولكنه سيعمل بمجرد نشره.

1. للبدء ، قم بتثبيت lite-server:
   

    npm install lite-server --save-dev

2. بعد ذلك ، داخل دليل مساحة عمل التطبيق الخاص بك ، قم ببناء التطبيق الخاص بك. للتأكد من تشغيل البنيات في كل مرة تتغير فيها ملفاتك ، مرر علامة --watch إليها. بمجرد تجميع التطبيق ، تتم كتابة النتائج في دليل الإخراج dist/<app name> . إذا كنت تستخدم نظام تحكم في الإصدار ، فتأكد من عدم إيداع مجلد dist لأنه تم إنشاؤه ولأغراض المعاينة فقط.
   

    ng build --watch

3. لخدمة الموقع المترجم ، قم بتشغيل lite-server مقابل دليل إخراج البناء.
   

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

يتم تقديم الموقع الآن على localhost:3000 . تحقق من ذلك على متصفحك وتأكد من أنه يعمل بالشكل المتوقع قبل أن تبدأ في نشره.

تعيين

هناك عدة طرق يمكنك من خلالها نشر مشروع Angular الخاص بك على Netlify Edge. سنغطي ثلاثة هنا:

1. باستخدام netlify-builder ،
2. باستخدام Git وواجهة مستخدم ويب Netlify ،
3. استخدام أداة Netlify CLI.

1. استخدام netlify-builder

يسهل netlify-builder نشر تطبيقات Angular من خلال Angular CLI. لاستخدام هذه الطريقة ، يجب إنشاء تطبيقك باستخدام Angular CLI v8.3.0 أو أعلى.

1. من علامة التبويب " المواقع " في لوحة معلومات Netlify الخاصة بك ، قم بإنشاء مشروع جديد. نظرًا لأننا لن نستخدم Git لإنشاء مشروع ، اسحب أي مجلد فارغ إلى منطقة الحدود المنقطة التي تحمل علامة "اسحب وأفلت مجلد موقعك هنا" . سيؤدي هذا تلقائيًا إلى إنشاء مشروع باسم عشوائي. يمكنك تغيير هذا الاسم ضمن إعدادات نطاق الموقع لاحقًا إذا كنت ترغب في ذلك.
   

   

   
   هذا ما يجب أن تراه بمجرد إنشاء مشروعك.
   

   

2. قبل أن تتمكن من النشر باستخدام هذه الطريقة ، ستحتاج إلى الحصول على معرف واجهة برمجة تطبيقات مشروع Netlify ورمز وصول شخصي لـ Netlify من حسابك. يمكنك الحصول على معرف API للمشروع من إعدادات الموقع. ضمن إعدادات الموقع> عام> تفاصيل الموقع> معلومات الموقع ، ستجد معرف API الخاص بمشروعك.
   

   

   

   
   يمكنك الحصول على رمز وصول شخصي في إعدادات المستخدم الخاصة بك. في إعدادات المستخدم> التطبيقات> رموز الوصول الشخصية ، انقر على زر رمز وصول جديد . عند المطالبة ، أدخل وصف الرمز المميز الخاص بك ، ثم انقر فوق الزر إنشاء رمز . انسخ رمزك المميز. من أجل الثبات ، يمكنك تخزين هذه القيم في ملف .env داخل مشروعك ولكن لا تقم بإيداع هذا الملف إذا كنت تستخدم نظام تحكم في الإصدار.
   

   

   

   

   

3. بعد ذلك ، أضف netlify-builder إلى مشروعك باستخدام ng add .
   

    ng add @netlify-builder/deploy

   بمجرد الانتهاء من التثبيت ، سيُطلب منك إضافة معرف API ورمز الوصول الشخصي.
   

   

   
   اختياري إضافة هذه هنا. يمكنك تجاهل هذه المطالبة لأنها ستتم إضافتها إلى ملف angular.json الذي يتم إيداعه عادةً إذا كنت تستخدم نظام تحكم في الإصدار. ليس من الآمن تخزين هذا النوع من المعلومات الحساسة في مستودعات الكود. إذا كنت لا تقوم بإيداع هذا الملف ، يمكنك فقط إدخال معرف API الخاص بك ورمز الوصول الشخصي. سيتم تعديل الإدخال أدناه في ملف angular.json الخاص بك ضمن إعدادات architect .
   

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

4. كل ما تبقى هو نشر التطبيق الخاص بك عن طريق تشغيل:
   

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

   بدلاً من ذلك ، يمكنك وضع هذا في برنامج نصي وتشغيله عندما تحتاج إلى نشر تطبيقك.
   

    # 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

   هذا هو الإخراج الذي يجب أن تراه بمجرد تشغيل هذا الأمر:
   

   

2. استخدام Git وواجهة مستخدم ويب Netlify

إذا كان رمز تطبيق Angular الخاص بك مستضافًا على Github أو Bitbucket أو Gitlab ، فيمكنك استضافة المشروع باستخدام واجهة مستخدم الويب الخاصة بـ Netlify.

1. من علامة التبويب " المواقع " في لوحة تحكم Netlify الخاصة بك ، انقر فوق الزر " زر موقع جديد من Git ".
   

   

2. الاتصال بخدمة مستودع التعليمات البرمجية. اختر الخدمة حيث يتم استضافة رمز التطبيق الخاص بك. سيُطلب منك تخويل Netlify لعرض مستودعاتك. هذا سوف يختلف من خدمة إلى أخرى.
   

   

3. اختر مستودع الكود الخاص بك.
   

   

4. بعد ذلك ، ستحدد عمليات النشر وإنشاء الإعدادات. في هذه الحالة ، حدد الفرع الذي ترغب في النشر منه ، وحدد أمر الإنشاء كـ ng deploy --prod النشر على أنه dist/<your app name> .
   

   

5. انقر فوق الزر " نشر الموقع " وبذلك تكون قد انتهيت.

3. استخدام أداة Netlify CLI

1. للبدء ، قم بتثبيت أداة Netlify CLI كما يلي:
   

    npm install netlify-cli -g

   إذا نجح التثبيت ، يجب أن ترى هذه النتائج على جهازك الطرفي:
   

   

2. بعد ذلك ، قم بتسجيل الدخول إلى Netlify عن طريق تشغيل:
   

    netlify login

   عند تشغيل هذا الأمر ، سينتقل إلى نافذة متصفح حيث سيُطلب منك ترخيص Netlify CLI. انقر فوق الزر " Authorize ". يمكنك بعد ذلك المتابعة لإغلاق علامة التبويب بمجرد منح الإذن.

   

   

3. لإنشاء مشروع Netlify جديد ، قم بتشغيل ما يلي على جهازك الطرفي:
   

    netlify init

   سيُطلب منك إما توصيل تطبيق Angular الخاص بك بمشروع Netlify حالي أو إنشاء واحد جديد. اختر خيار إنشاء وتهيئة موقع جديد .

   

   بعد ذلك ، حدد فريقك واسمًا للموقع الذي ترغب في نشره. بمجرد إنشاء المشروع ، ستقوم أداة CLI بإدراج تفاصيل الموقع الخاصة بمشروعك.
   

   

   بعد ذلك ، ستطالبك أداة CLI بتوصيل حساب Netlify الخاص بك بموفر استضافة Git لتكوين خطافات الويب ونشر المفاتيح. لا يمكنك الانسحاب من هذا. حدد خيارًا لتسجيل الدخول ثم قم بتفويض Netlify.
   

   

   بعد ذلك ، سيُطلب منك إدخال أمر بناء. يستخدم:
   

    ng build --prod

   بعد ذلك ، سيُطلب منك تقديم دليل للنشر. أدخل dist/<app name> التطبيق الخاص بك.
   

   

   في نهاية ذلك ، سيكتمل الأمر ويعرض هذا الإخراج.
   

   

4. لنشر التطبيق ، قم بتشغيل:
   

    netlify deploy --prod

   يضمن استخدام علامة --prod نشر الإصدار في الإنتاج. إذا حذفت هذه العلامة ، فسيقوم الأمر netlify deploy الخاص بك إلى مسودة عنوان URL فريد يتم استخدامه للاختبار والمعاينة. بمجرد اكتمال النشر ، يجب أن ترى هذا الإخراج:
   

   

عرض عمليات إرسال النموذج

يمكن عرض عمليات إرسال النماذج على لوحة معلومات Netlify ضمن علامة التبويب " نماذج " في موقعك. يمكنك العثور عليه على app.netlify.com/sites/<your_site_name>/forms . في هذه الصفحة ، سيتم سرد جميع النماذج النشطة الخاصة بك. سمة الاسم التي تضعها في عنصر النموذج المخفي هي اسم النموذج على لوحة المعلومات.

بمجرد تحديد نموذج ، سيتم سرد جميع عمليات الإرسال لهذا النموذج. يمكنك اختيار تنزيل جميع الإدخالات كملف CSV أو تمييزها كبريد عشوائي أو حذفها.

خاتمة

تسمح لك نماذج Netlify بجمع إرسال النموذج من تطبيقك دون الحاجة إلى إنشاء أو تكوين خلفية خلفية للقيام بذلك. يمكن أن يكون هذا مفيدًا بشكل خاص في التطبيقات التي تحتاج فقط إلى جمع كمية محدودة من البيانات مثل معلومات الاتصال وتعليقات العملاء والاشتراكات في الأحداث وما إلى ذلك.

يتيح لك إقران النماذج التفاعلية الزاويّة مع نماذج Netlify هيكلة نموذج البيانات الخاص بك. تتميز الأشكال التفاعلية الزاويّة بميزة إضافية تتمثل في وجود نموذج بيانات وعناصر نموذجية متزامنة مع بعضها البعض. لا يعتمدون على عرض واجهة المستخدم.

على الرغم من أن نماذج Netlify لا تعمل إلا عند نشرها على Netlify Edge ، إلا أن النظام الأساسي للاستضافة قوي جدًا ويوفر ميزات مفيدة مثل اختبار A / B وأتمتة عمليات إنشاء التطبيقات ونشرها.

• انظر الكود المصدري لهذا المشروع →

يمكنك متابعة قراءة المزيد حول استخدام Netlify مع النماذج الخاصة بك هنا.