بدء استخدام المكونات المستقلة

1. مقدمة

ما ستنشئه

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

يمكنك إنشاء كل شيء في تطبيقك باستخدام الإصدار 14 من Angular وميزة المكوّنات المستقلة الجديدة.

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

هذا هو التطبيق الذي ستنشئه اليوم.

ما ستتعلمه

• كيفية استخدام واجهة سطر الأوامر Angular لإنشاء بنية مشروع جديد
• كيفية استخدام مكوّنات Angular المستقلة لتبسيط عملية تطوير تطبيقات Angular
• كيفية إنشاء مكوّن مستقل، أي كيفية إنشاء واجهة المستخدم وإضافة بعض منطق النشاط التجاري
• كيفية بدء تشغيل تطبيق باستخدام مكوّن مستقل
• كيفية التحميل الكسول لمكوّن مستقل
• كيفية تضمين مربّع حوار في مكوّن مستقل باستخدام Dialogflow Messenger
• كيفية نشر تطبيق Angular على Google Cloud App Engine باستخدام Google Cloud CLI (gcloud)

المتطلبات

• حساب Gmail أو Google Workspace
• الإلمام بأساسيات المواضيع التالية
  • HTML كيفية إنشاء عنصر
  • CSS and less. كيفية استخدام أداة اختيار لغة CSS وإنشاء ملف تعريف نمط
  • ‫TypeScript أو JavaScript كيفية التفاعل مع بنية نموذج المستند (DOM)
  • ‫git وGitHub كيفية إنشاء نسخة طبق الأصل من مستودع واستنساخه
  • واجهة سطر الأوامر، مثل bash أو zsh كيفية التنقّل في الدلائل وتشغيل الأوامر

2. إعداد البيئة

إعداد البيئة المحلية

لإكمال هذا الدرس التطبيقي حول الترميز، يجب تثبيت البرامج التالية على جهاز الكمبيوتر المحلي.

• إصدار LTS نشط أو إصدار LTS للصيانة من Node.js يُستخدَم لتثبيت إطار عمل Angular وAngular CLI.

  إصدار Node	متوافق مع Angular
  ‫14.15 أو إصدار أحدث	متاح
  ‫16.10 أو إصدار أحدث	متاح
  18.1.0	غير متاح

  للتحقّق من إصدار Node.js على جهاز الكمبيوتر، شغِّل الأمر node التالي من نافذة سطر الأوامر.

  node -v
  

• أداة تعديل الرموز أو بيئة تطوير متكاملة يُستخدم لفتح الملفات وتعديلها، مثل Visual Studio Code أو أي أداة تعديل رموز أخرى تختارها.

تثبيت واجهة سطر الأوامر في Angular

بعد ضبط جميع التبعيات، شغِّل الأمر npm التالي لتثبيت Angular CLI من نافذة سطر الأوامر.

npm install --global @angular/cli

للتأكّد من صحة الإعدادات، شغِّل أمر Angular التالي من سطر الأوامر.

ng version

في حال اكتمال أمر Angular بنجاح، ستتلقّى رسالة مشابهة للقطة الشاشة التالية.

رمز المصدر والصور

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

لتنزيل رمز المصدر

1. في المتصفّح، انتقِل إلى الصفحة التالية.

   https://github.com/angular/codelabs/tree/standalone-components
   

2. في نافذة سطر الأوامر، أنشئ نسخة من المستودع واستنسِخها.

في الخطوة التالية، أنشئ تطبيق "معرض الصور".

3- إنشاء تطبيق جديد

لإنشاء تطبيق البداية الأولي، أكمِل الإجراءات التالية.

استخدِم واجهة سطر الأوامر Angular CLI لإنشاء مساحة عمل جديدة. لمزيد من المعلومات حول Angular CLI وإطار عمل Angular، انتقِل إلى angular.io.

إنشاء مشروع جديد

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. أدخِل أمر Angular التالي لإنشاء مشروع Angular جديد باسم photo-gallery-app.

   ng new photo-gallery-app
   

2. في كل طلب، اقبل الخيار التلقائي.سيثبّت إطار عمل Angular الحِزم والتبعيات المطلوبة. قد تستغرق هذه العملية بضع دقائق.

بعد اكتمال عملية Angular CLI، سيكون لديك مساحة عمل جديدة في Angular وتطبيق بسيط جاهز للتشغيل.

تم تصميم تطبيقك الجديد على غرار تطبيق Angular عادي. إنّ NgModule في تطبيقك الجديد غير ضروري في هذا الدرس التطبيقي حول الترميز.

إزالة وحدة التطبيق

لإزالة وحدة التطبيق، أكمل الإجراء التالي.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. احذف الملف app.module.ts.

بعد حذف وحدة التطبيق، لن يكون لديك أي وحدة في تطبيقك. يحتوي تطبيقك على مكوّن واحد فقط، وهو مكوّن التطبيق. يجب الإفصاح عن المكوّن على أنّه مستقل.

تعريف المكوّن المستقل

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف app.component.ts.
3. أضِف المَعلمة والقيمة التاليتَين إلى قائمة أدوات التزيين.

   standalone: true
   

   يجب أن يتطابق ملف app.component.ts بشكل كبير مع مثال الرمز التالي.

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     standalone: true
   })
   export class AppComponent {
     title = 'photo-gallery-app';
   }
   

4. احفظ ملف app.component.ts.

تجميع تطبيقك المستقل الجديد

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد
2. أدخِل أمر Angular التالي لتجميع تطبيقك الجديد.

   ng serve
   

يجب أن يتعذّر تجميع تطبيقك. لا داعي للقلق، ما عليك سوى إصلاح بعض المشاكل الأخرى.

استخدام واجهة برمجة التطبيقات bootstrapApplication

للسماح بتشغيل تطبيقك بدون NgModule، عليك استخدام مكوّن مستقل كمكوّن أساسي باستخدام واجهة برمجة التطبيقات bootstrapApplication.

إزالة الإشارات إلى وحدة التطبيق

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src في دليل مشروع photo-gallery-app الجديد
2. افتح ملف main.ts.
3. أزِل رمز الاستيراد التالي، لأنّه لم يعُد لديك وحدة تطبيق.

   import { AppModule } from './app/app.module';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   

4. أزِل رمز الإعداد الأوّلي التالي، لأنّه لم يعُد لديك وحدة تطبيق.

   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   يجب أن يتطابق ملف main.ts مع مثال الرمز التالي.

   import { enableProdMode } from '@angular/core';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   

إضافة مكوّن bootstrapApplication

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف main.ts.
3. استورِد مكوّن bootstrapApplication من خدمة @angular/platform-browser.

   import { bootstrapApplication } from '@angular/platform-browser';
   

4. أضِف الرمز التالي لتشغيل تطبيقك.

   bootstrapApplication(AppComponent).catch(err => console.error(err));
   

5. استورِد المكوّن والمكتبات المطلوبة.

   import { AppComponent } from './app/app.component';
   

   يجب أن يتطابق ملف main.ts مع مثال الرمز التالي.

   import { enableProdMode } from '@angular/core';
   import { bootstrapApplication } from '@angular/platform-browser';
   import { AppComponent } from './app/app.component';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   bootstrapApplication(AppComponent).catch(err => console.error(err));
   

إضافة جهاز توجيه ووحدات شائعة

لاستخدام "الموجّه" وميزات الوحدات النمطية الشائعة الأخرى، عليك استيراد كل وحدة نمطية مباشرةً إلى المكوّن.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف app.component.ts.
3. استورِد الوحدات المطلوبة إلى المكوّن.

   import { CommonModule } from '@angular/common';
   import { RouterModule } from '@angular/router';
   

4. أضِف عمليات الاستيراد في المكوّن.

   imports: [CommonModule, RouterModule],
   

   يجب أن يتطابق ملف app.component.ts مع مثال الرمز التالي.

   import { Component } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { RouterModule } from '@angular/router';
   
   @Component({
     selector: 'app-root',
     imports: [CommonModule, RouterModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     standalone: true
   })
   export class AppComponent {
     title = 'photo-gallery-app';
   }
   

5. احفظ ملف app.component.ts.

تجميع تطبيقك المستقل الجديد وتشغيله

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق وتشغيله وفتح خادم ويب. قد تحتاج إلى إغلاق بيئة التطوير المتكاملة (IDE) قبل تشغيل تطبيقك لإزالة أي أخطاء في التجميع.

   ng serve
   

يجب أن يعمل خادم التطوير على المنفذ 4200. يجب أن تكون جميع الأخطاء السابقة قد تمت إزالتها وأن تتم عملية التجميع بنجاح. أحسنت لقد أنشأت بنجاح تطبيق Angular يعمل بدون وحدة ومع مكوّن مستقل.

1. بعد ذلك، ستعمل على تحسين تطبيقك لعرض بعض الصور.

4. عرض الصور

تم تصميم تطبيقك الجديد ليكون معرض صور ويجب أن يعرض بعض الصور.

المكوّنات هي الوحدات الأساسية لتطبيقات Angular. تتضمّن المكوّنات 3 جوانب رئيسية.

• ملف HTML للنموذج
• ملف CSS للأنماط
• ملف TypeScript لسلوك التطبيق

نقل الصور إلى تطبيقك

يتم توفير الصور في التطبيق الذي سبق أن نزّلته من GitHub.

1. انتقِل إلى الدليل src/assets في مشروع GitHub.
2. انسخ الملفات والصِقها في الدليل analogue ضمن دليل مشروع photo-gallery-app.

إنشاء نموذج HTML

ملف app.component.html هو ملف نموذج HTML المرتبط بالمكوّن AppComponent.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف app.component.html.
3. احذف كل رموز HTML الحالية.
4. انسخ رمز HTML من مثال الرمز التالي وألصِقه.

   <article>
       <h1>Above and below the Ocean</h1>
           <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
           <section>
               <section class="row">
                   <div class="column">
                     <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                     <img src="/assets/49413271167_22a504c3fa_w.jpg">
                     <img src="/assets/47099018614_5a68c0195a_w.jpg">
                   </div>
                   <div class="column">
                     <img src="/assets/41617221114_4d5473251c_w.jpg">
                     <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                     <img src="/assets/46972303215_793d32957f_c.jpg">
                   </div>
                   <div class="column">
                     <img src="/assets/45811905264_be30a7ded6_w.jpg">
                     <img src="/assets/44718289960_e83c98af2b_w.jpg">
                     <img src="/assets/46025678804_fb8c47a786_w.jpg">
                   </div>
                 </section>
           </section>
   </article
   

5. احفظ ملف app.component.html.

إنشاء ملف تعريف النمط

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف styles.css.
3. انسخ CSS من مثال الرمز التالي وألصِقه.

   article {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     font-family: 'Raleway';
   }
   
   h1 {
     color: #4479BA;
     text-align: center;
     font-size: xx-large;
   }
   
   h2 {
     color: rgb(121, 111, 110);
     text-align: center;
   }
   
   .row {
     display: flex;
     flex-wrap: wrap;
     padding: 0 4px;
   }
   
   /*   Create four equal columns that sits next to each other */
   .column {
     flex: 25%;
     padding: 0 4px;
   }
   
   .column img {
     margin-top: 8px;
     vertical-align: middle;
     width: 100%;
   }
   
   .link_button {
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     border: solid 1px #20538D;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
     background: #4479BA;
     color: #FFF;
     padding: 8px 12px;
     text-decoration: none;
     margin-top: 50px;
     font-size: large;
   }
   
   @media screen and (max-width: 800px) {
     .column {
       flex: 50%;
       max-width: 50%;
     }
   }
   
   @media screen and (max-width: 600px) {
     .column {
       flex: 100%;
       max-width: 100%;
     }
   }
   
   

4. احفظ ملف styles.css

تعديل ملف الفهرس

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف index.html.
3. أضِف خط Raleway للسماح لجميع الصفحات باستخدامه.

   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
   

4. احفظ ملف index.html.
5. احفظ الرمز وتحقّق من متصفّحك. عند تشغيل خادم التطوير، تظهر التغييرات في المتصفّح عند الحفظ.
6. بعد ذلك، ستنشئ مكونًا مستقلاً جديدًا لإرسال الملاحظات والدردشة مع Jimbo. تابِع هذا الدرس التطبيقي حول الترميز لمعرفة المزيد عن Jimbo.

5- إضافة مكوّن مستقل جديد

كما رأيت حتى الآن، توفّر المكوّنات المستقلة طريقة مبسطة لإنشاء تطبيقات Angular من خلال تقليل الحاجة إلى NgModules. في الأقسام التالية، ستنشئ مكوّنًا مستقلاً جديدًا يتيح للمستخدم إرسال الملاحظات والدردشة مع وكيل افتراضي.

إنشاء مكوّن مستقل جديد

لإنشاء هذا المكوّن الجديد، عليك استخدام Angular CLI مرة أخرى.

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لإنشاء مكوّن جديد باسم feedback-and-chat.

   ng generate component feedback-and-chat --standalone
   

   يوضّح الجدول التالي أجزاء الأمر.

   الجزء	التفاصيل
   ng	تحديد جميع أوامر Angular CLI لإطار عمل Angular
   generate component	إنشاء بنية أساسية لمكوّن جديد
   feedback-and-chat	اسم المكوّن
   --standalone	يطلب من إطار عمل Angular إنشاء مكوّن مستقل

استيراد المكوّن المستقل الجديد

لاستخدام المكوّن المستقل الجديد، عليك أولاً إضافته إلى مصفوفة imports في ملف app.components.ts.

هذا مكوِّن مستقل، لذا ما عليك سوى استيراده كما لو كان وحدة.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف app.component.ts.
3. استورِد المكوّن المستقل الجديد.

   import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
   

4. عدِّل عمليات الاستيراد في المكوّن.

   imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
   

   يجب أن يتطابق ملف app.component.ts مع مثال الرمز التالي.

   import { CommonModule } from '@angular/common';
   import { Component } from '@angular/core';
   import { RouterModule } from '@angular/router';
   import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
   
   @Component({
     selector: 'app-root',
     imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     standalone: true
   })
   export class AppComponent {
     title = 'photo-gallery-app';
   }
   

5. احفظ ملف app.component.ts.

تحميل المكوّن بأسلوب "التحميل الكسول"

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

تعديل نموذج HTML المرتبط بمكوّن التطبيق

لتحميل المكوّن المستقل بشكل غير متزامن، أضِف زرًا إلى واجهة المستخدم لا يفعّل المكوّن إلا عندما يحدّده المستخدم.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src/app في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف app.component.html.
3. انتقِل إلى نهاية الملف وأضِف مثال الرمز التالي قبل إغلاق العنصر article.

   <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
   <router-outlet></router-outlet> 
   

4. يجب أن يتطابق ملف app.component.html مع مثال الرمز التالي.

   <article>
       <h1>Above and below the Ocean</h1>
       <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
       <section>
           <section class="row">
               <div class="column">
                   <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                   <img src="/assets/49413271167_22a504c3fa_w.jpg">
                   <img src="/assets/47099018614_5a68c0195a_w.jpg">
               </div>
               <div class="column">
                   <img src="/assets/41617221114_4d5473251c_w.jpg">
                   <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                   <img src="/assets/46972303215_793d32957f_c.jpg">
               </div>
               <div class="column">
                   <img src="/assets/45811905264_be30a7ded6_w.jpg">
                   <img src="/assets/44718289960_e83c98af2b_w.jpg">
                   <img src="/assets/46025678804_fb8c47a786_w.jpg">
               </div>
           </section>
       </section> 
       <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
       <router-outlet></router-outlet>
   </article>
   

5. احفظ ملف app.component.html.

ضبط مساراتك

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الدليل src في دليل مشروع photo-gallery-app الجديد.
2. افتح ملف main.ts
3. استورِد طريقة provideRouter ووحدة "المسارات". قدّمت Angular الإصدار 14.2.0 طريقة provideRouter جديدة تتيح لنا ضبط مجموعة من مسارات التطبيق.

   import { provideRouter, Routes } from '@angular/router';
   

4. انسخ مقتطف الرمز التالي وألصقه بين عمليات الاستيراد وعبارة if.

   const routes = [
     {
       path: 'feedback-and-chat',
       loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
     }
   ]
   

5. انسخ مقتطف الرمز التالي وألصقه واستبدِل طريقة bootstrapApplication.

   bootstrapApplication(AppComponent, {
     providers: [
       provideRouter(routes)
     ]
   }).catch(err => console.error(err));
   

   يجب أن يتطابق ملف main.ts مع مثال الرمز التالي.

   import { enableProdMode } from '@angular/core';
   import { bootstrapApplication } from '@angular/platform-browser';
   import { provideRouter, Routes } from '@angular/router';
   import { AppComponent } from './app/app.component';
   import { environment } from './environments/environment';
   
   const routes = [
     {
       path: 'feedback-and-chat',
       loadComponent: () => 
         import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
     }
   ]
   
   if (environment.production) {
     enableProdMode();
   }
   
   bootstrapApplication(AppComponent, {
     providers: [
       provideRouter(routes)
     ]
   }).catch(err => console.error(err));
   

6. احفظ ملف main.ts.

تجميع الموارد ومراجعتها باستخدام "أدوات مطوّري برامج Chrome"

استخدِم "أدوات مطوّري برامج Chrome" لمراجعة طريقة التحميل الكسول للمكوّن في إطار عمل Angular.

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق وتشغيله وفتح خادم ويب.

   ng serve
   

   يجب تشغيل خادم التطوير على المنفذ 4200.

في المتصفّح، أكمِل الإجراءات التالية.

1. الانتقال إلى الصفحة التالية

   http://localhost:4200
   

2. افتح أدوات مطوّري برامج Chrome واختَر علامة التبويب الشبكة.
3. أعِد تحميل الصفحة لعرض عدة ملفات، ولكن ليس المكوّن feedback-and-chat.يجب أن تتطابق شاشتك مع لقطة الشاشة التالية.
4. انقر على الزر مزيد من المعلومات عن هؤلاء الأشخاص للانتقال إلى المكوّن المستقل.يجب أن يشير السجلّ إلى أنّه لا يتم تحميل المكوّن إلا عند النقر على جهاز التوجيه الكامل. انتقِل للأسفل إلى نهاية القائمة للتأكّد من تحميل المكوّن. يجب أن تتطابق شاشتك مع لقطة الشاشة التالية.

6. إضافة واجهة المستخدم للنموذج

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

لإتاحة واجهة المستخدم، أضِف السمة formControlName في العنصر input الذي يرتبط بكل عنصر تحكّم في النموذج contactForm مرتبط بكل حقل من حقول واجهة المستخدم الثلاثة.

إضافة النموذج إلى نموذج HTML

أضِف نموذجًا إلى واجهة المستخدم للسماح للمستخدم بإرسال الملاحظات.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الملف feedback-and-chat.component.html.
2. أزِل رمز HTML الحالي.
3. انسخ رمز HTML من مثال الرمز التالي وألصِقه.

   <article>    
       <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
       <section class="container">
           <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
               <div class="row" *ngIf="showMsg">
                   <div class="row">
                       <p>
                           <strong>Thanks for your message!</strong>
                       </p>
                   </div>
               </div>
               <div class="row">
                   <div class="col-25">
                       <label for="name">Full Name</label>
                   </div>
                   <div class="col-75">
                       <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                   </div>
               </div>
               <div class="row">
                   <div class="col-25">
                       <label for="lemail">Email</label>
                   </div>
                   <div class="col-75">
                       <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                   </div>
               </div>
               <div class="row">
                   <div class="col-25">
                       <label for="comments">Comments</label>
                   </div>
                   <div class="col-75">
                       <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                   </div>
               </div>
               <div class="row">
                 <button type="submit" class="submit">Submit</button>
               </div>
           </form>
       </section>
   </article>
   

4. احفظ ملف feedback-and-chat.component.html.

تعديل ملف الأنماط للنموذج

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الملف feedback-and-chat.component.css.
2. انسخ CSS من مثال الرمز التالي وألصِقه.

   /*   Style inputs, select elements and textareas */
   input[type=text], select, textarea{
     width: 100%;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     resize: vertical;
   }
   
   /*   Style the label to display next to the inputs */
   label {
     padding: 12px 12px 12px 0;
     display: inline-block;
   }
   
   /*   Style the submit button */
   button {
     background-color: #4479BA;
     color: white;
     padding: 12px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     float: right;
     font-size: medium;
     font-family: 'Raleway';
   }
   
   /*   Style the container */
   .container {
     border-radius: 5px;
     background-color: #f2f2f2;
     padding: 20px;
     width: 100%;
   }
   
   /*   Floating column for labels: 25% width */
   .col-25 {
     float: left;
     width: 25%;
     margin-top: 6px;
   }
   
   /*   Floating column for inputs: 75% width */
   .col-75 {
     float: left;
     width: 75%;
     margin-top: 6px;
   }
   
   /*   Clear floats after the columns */
   .row:after {
     content: "";
     display: table;
     clear: both;
   }
   
   /*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
   @media screen and (max-width: 600px) {
     .col-25, .col-75, input[type=submit] {
       width: 100%;
       margin-top: 0;
     }
   }
   

3. احفظ ملف feedback-and-chat.component.css.

تجميع تعديل واجهة المستخدم للنموذج

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق وتشغيله وفتح خادم ويب.

   ng serve
   

   يجب أن يتعذّر تجميع تطبيقك. لا تقلق، عليك ربط النموذج.
3. في الوقت الحالي، راجِع العناصر التالية.
   • يمكنك استخدام ربط الخاصية formGroup لربط contactForm بالعنصر form وربط الحدث ngSubmit
   • يستمع الأمر FormGroup إلى حدث الإرسال الذي يصدره العنصر form. بعد ذلك، يُصدر توجيه FormGroup حدث ngSubmit يمكنك ربطه بدالّة رد الاتصال onSubmit.
   • في خطوة لاحقة، ستنفّذ دالة رد الاتصال onSubmit في الملف feedback-and-chat.component.ts.
4. بعد ذلك، عليك ربط النموذج.

7. إضافة معالجة الأحداث إلى النموذج

اكتملت واجهة المستخدم الخاصة بنموذج إرسال الملاحظات، ولكنها لا تتضمّن التفاعل. تُعد معالجة إدخالات المستخدمين باستخدام النماذج حجر الزاوية في العديد من التطبيقات الشائعة.

في سيناريو حقيقي، عليك تنفيذ منطق النشاط التجاري لإكمال الإجراءات التالية.

1. حلل البيانات التي أدخلها المستخدم من بنية نموذج المستند (DOM) المعروضة والمرتبطة بالمكوّن.
2. التحقّق من صحة البيانات التي يُدخلها المستخدم، بما في ذلك اختبار CAPTCHA أو آلية مشابهة لتجنُّب استخدام أسلوب غير مرغوب فيه من قِبل برامج التتبُّع.
3. إرسال رسالة إلكترونية إلى عنوان بريد إلكتروني محدّد
4. عرض رسالة ودّية للمستخدم

في هذا الدرس التطبيقي حول الترميز، ستنفّذ الإجراءات التالية فقط.

1. حلل البيانات التي أدخلها المستخدم من بنية نموذج المستند (DOM) المعروضة والمرتبطة بالمكوّن.
2. عرض رسالة ودّية للمستخدم

عليك اختبار مهاراتك وتنفيذ جميع الإجراءات الأربعة.

إضافة نموذج إرسال الرسالة إلى المكوّن

أنشئ نموذج إرسال الملاحظات والآراء وأضِفه في فئة المكوّن. يحدّد نموذج النموذج حالة النموذج. تقدّم خدمة FormBuilder طرقًا سهلة لإنشاء عنصر تحكّم في واجهة المستخدم.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الملف feedback-and-chat.component.ts.
2. استورِد خدمة FormBuilder ووحدة ReactiveModule من حزمة @angular/forms. توفّر هذه الخدمة طرقًا ملائمة لإنشاء عناصر التحكّم. في الخطوة التالية، سنستخدم الدالة inject، لذا علينا استيرادها أيضًا من @angular/core.

   import { Component, inject, OnInit } from '@angular/core';
   import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
   

3. استورِد وحدة ReactiveFormsModule.

   imports: [CommonModule,ReactiveFormsModule],
   

4. أزِل الدالة الإنشائية التالية.

   constructor() { }
   

5. أدرِج خدمة FormBuilder من خلال الدالة inject أسفل توقيع الفئة مباشرةً.

   private formBuilder = inject(FormBuilder);
   

   استخدِم طريقة group من خدمة FormBuilder لإنشاء نموذج استمارة من أجل جمع الاسم وعنوان البريد الإلكتروني والتعليقات من المستخدم.
6. أنشئ السمة contactForm الجديدة واستخدِم الطريقة group لضبطها على نموذج نموذج.يحتوي نموذج النموذج على الحقول name وemail وcomments.

   contactForm = this.formBuilder.group({
     fullname: '',
     email: '',
     comments: ''
   });
   

   حدِّد طريقة onSubmit للتعامل مع النموذج.في سيناريو حقيقي، تتيح طريقة onSubmit للمستخدم إرسال رسالة ملاحظات إلى المصوّر باستخدام رسالة إلكترونية يتم إرسالها إلى عنوان بريد إلكتروني محدّد.في هذا الدرس التطبيقي حول الترميز، ستعرض بيانات أدخلها المستخدم، وتستخدم طريقة reset لإعادة ضبط النموذج، وتعرض رسالة نجاح سهلة الاستخدام.
7. أضِف طريقة onSubmit الجديدة واضبط المتغيّر showMsg على true بعد تهيئته.

   showMsg: boolean = false;
   
   onSubmit(): void {
     console.log('Your feedback has been submitted', this.contactForm.value);
     this.showMsg = true;
     this.contactForm.reset();
   }
   

   يجب أن يتطابق ملف feedback-and-chat.component.ts مع مثال الرمز التالي.

   import { Component, inject, OnInit } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
   
   @Component({
     selector: 'app-feedback-and-chat',
     standalone: true,
     imports: [CommonModule, ReactiveFormsModule],
     templateUrl: './feedback-and-chat.component.html',
     styleUrls: ['./feedback-and-chat.component.css']
   })
   export class FeedbackAndChatComponent {
   
     showMsg: boolean = false;
     private formBuilder = inject(FormBuilder);
   
     contactForm = this.formBuilder.group({
       fullname: '',
       email: '',
       comments: ''
     });
   
     ngOnInit(): void {
     }
   
     onSubmit(): void {
       console.log('Your feedback has been submitted', this.contactForm.value);
       this.showMsg = true;
       this.contactForm.reset();
     }
   }
   

8. احفظ ملف feedback-and-chat.component.ts.

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

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق وتشغيله وفتح خادم ويب.

   ng serve
   

3. يجب أن يعمل خادم التطوير على المنفذ 4200.

في المتصفّح، أكمِل الإجراءات التالية.

1. الانتقال إلى الصفحة التالية

   http://localhost:4200
   

2. افتح أدوات مطوّري برامج Chrome واختَر علامة التبويب وحدة التحكّم.
3. أدخِل أي قيم في مربّعات النص الاسم الكامل والبريد الإلكتروني والتعليقات.
4. انقر على الزر إرسال.من المفترض أن تظهر رسالة نجاح على الصفحة.
5. تأكَّد من عرض القيم في علامة التبويب وحدة التحكّم.يجب أن تتطابق شاشتك مع لقطة الشاشة التالية.لقد نفّذت الرمز بنجاح لإضافة نموذج إرسال رسالة إلى واجهة مستخدم المكوّن وتحليل إدخالات المستخدم.
6. بعد ذلك، يمكنك تضمين مربّع حوار للدردشة للسماح لزوّار التطبيق بالتحدّث مع Jimbo. "جيمبو" هو دب كوالا يعلّمك بعض الحقائق الرائعة عن الحياة البرية.

8. إضافة نافذة حوار محادثة

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

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

تشارك عملية التنفيذ التالية حقائق مسلّية عن الحياة البرية مع المستخدم. قد تتناول عمليات التنفيذ الأخرى للوكلاء الافتراضيين حالات استخدام معقّدة للعملاء (مثل وكيل مركز الاتصال البشري). تستخدم العديد من الشركات وكيلًا افتراضيًا كقناة أساسية للتواصل مع الموقع الإلكتروني للشركة.

إضافة Dialogflow Messenger إلى المكوّن

وكما هو الحال مع النموذج، يجب ألا يظهر مربّع حوار المحادثة إلا عند تحميل المكوّن المستقل.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الملف feedback-and-chat.component.ts.
2. انسخ عنصر df-messenger والصقه في أي مكان في الصفحة ضمن مثال الرمز التالي.

   <df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
                 chat-title="Chat with Jimbo!"
                 df-cx="true"
                 intent="messanger-welcome-event"
                 language-code="en"
                 location="us-central1"></df-messenger>
   

   تنشئ خدمة Dialogflow السمات الخاصة بالعنصر df-messenger عند اختيار عملية الدمج مع Dialogflow Messenger.

   السمة	التفاصيل
   agent-id	تتم تعبئة هذا الحقل تلقائيًا. تحدّد هذه السمة المعرّف الفريد لوكيل Dialogflow.
   chat-title	تتم تعبئة هذا الحقل تلقائيًا. تحدّد هذه السمة المحتوى الذي سيتم عرضه في أعلى مربّع حوار المحادثة. تتم تعبئة هذا الحقل مسبقًا باسم الوكيل، ولكن عليك تخصيصه.
   df-cx	تشير إلى أنّ التفاعل يتم مع وكيل CX. اضبط القيمة على true.
   intent	تحدّد هذه السمة الحدث المخصّص المستخدَم لتشغيل الغرض الأول عند فتح مربّع حوار المحادثة.
   language-code	تحدّد هذه السمة رمز اللغة التلقائي للنية الأولى.
   الموقع	تحدّد هذه السمة المنطقة التي تنشر فيها الوكيل.

3. احفظ ملف feedback-and-chat.component.ts.

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

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق.

   ng serve
   

   يجب أن يتعذّر تجميع تطبيقك. يجب أن تعرض سطر الأوامر رسالة الخطأ التالية.
3. بعد ذلك، أضِف مخططًا مخصّصًا.

إضافة مخطط مخصّص إلى المكوّن المستقل

العنصر df-messanger ليس عنصرًا معروفًا. وهو مكوّن ويب مخصّص. تشير رسالة الخطأ من إطار عمل Angular إلى أنّه عليك إضافة CUSTOM_ELEMENTS_SCHEMA إلى كل من المكوّنات المستقلة لإخفاء الرسالة.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى الملف feedback-and-chat.component.ts.
2. استورِد مخطط CUSTOM_ELEMENTS_SCHEMA.

   import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
   

3. أضِف CUSTOM_ELEMENTS_SCHEMA إلى قائمة المخططات.

   schemas: [CUSTOM_ELEMENTS_SCHEMA]
   

   يجب أن يتطابق ملف feedback-and-chat.component.ts مع مثال الرمز التالي.

   import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
   
   @Component({
     selector: 'app-feedback-and-chat',
     standalone: true,
     imports: [CommonModule,ReactiveFormsModule],
     templateUrl: './feedback-and-chat.component.html',
     styleUrls: ['./feedback-and-chat.component.css'],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   })
   
   ...
   

4. يتطلّب مكوّن الويب df-messanger برنامج JavaScript يجب إدراجه فقط عند تحميل مكوّن الملاحظات والدردشة. لهذا الغرض، سنضيف الرمز ذي الصلة إلى طريقة ngOnInit()‎ التي ستحمّل نص الدردشة اللازم لتفعيل العنصر .

   ngOnInit() {
       // Load the chat script, which activates the `<df-messenger>` element.
       const script = document.createElement('script');
       script.async = true;
       script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
       document.head.appendChild(script);
   }
   

5. احفظ ملف feedback-and-chat.component.ts.

تجميع مربّع حوار المحادثة المعدَّل وعرضه

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع التطبيق وتشغيله وفتح خادم ويب.

   ng serve
   

   يجب تشغيل خادم التطوير على المنفذ 4200.

في المتصفّح، أكمِل الإجراءات التالية.

1. الانتقال إلى الصفحة التالية

   http://localhost:4200
   

   من المفترض أن يظهر رمز المحادثة في أسفل الصفحة.
2. انقر على الرمز وتفاعل مع Jimbo الذي يقدّم معلومات رائعة عن الحيوانات.
3. يجب أن يكون التطبيق يعمل بشكل كامل.

9- نشر التطبيق على Google App Engine

يتم تشغيل التطبيق على جهازك. الخطوة التالية والأخيرة في هذا الدرس التطبيقي حول الترميز هي نشر التطبيق على Google App Engine.

لمزيد من المعلومات عن Google App Engine، اطّلِع على App Engine.

إعداد بيئتك لاستخدام Google App Engine

إذا كنت تستوفي جميع الشروط التالية، يمكنك تخطّي الخطوات التالية والمتابعة لنشر التطبيق.

• تم إنشاء مشروع على السحابة الإلكترونية باستخدام App Engine
• تم تفعيل Cloud Build API
• تثبيت Google Cloud CLI

أكمِل الإجراءات التالية.

1. سجِّل الدخول إلى حسابك على Gmail أو Google Workspace. إذا لم يكن لديك حساب، يمكنك إنشاء حساب Google.
2. فعِّل الفوترة في Cloud Console للسماح لك باستخدام موارد Cloud وواجهات برمجة التطبيقات. لمزيد من المعلومات، يُرجى الاطّلاع على إنشاء حساب فوترة للخدمة الذاتية على Cloud أو تعديله أو إغلاقه.
3. أنشئ مشروعًا على السحابة الإلكترونية لتخزين موارد تطبيق App Engine وموارد Google Cloud الأخرى. لمزيد من المعلومات، يُرجى الاطّلاع على إنشاء المشاريع وإدارتها.
4. فعِّل Cloud Build API في Cloud Console. لمزيد من المعلومات، يُرجى الاطّلاع على تفعيل الوصول إلى واجهة برمجة التطبيقات.
5. ثبِّت Google Cloud CLI وأداة سطر الأوامر gcloud. لمزيد من المعلومات، يُرجى الاطّلاع على تثبيت gcloud CLI.
6. ابدأ Google Cloud CLI وتأكَّد من إعداد gcloud لاستخدام مشروع على السحابة الإلكترونية الذي تريد تفعيله. لمزيد من المعلومات، اطّلِع على إعداد gcloud CLI.

إنشاء تطبيقك المستقل

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل أمر Angular التالي لتجميع إصدار جاهز للإصدار العلني من التطبيق وإنشائه.

   ng build
   

يتم إنشاء إصدار التطبيق الجاهز للنشر في الدليل الفرعي dist لدليل مشروع photo-gallery-app.

10. نشر تطبيقك باستخدام إطار عمل Express.js

يستخدم نموذج الرمز البرمجي في هذا الدرس التطبيقي إطار عمل Express.js للتعامل مع طلبات HTTP. يمكنك استخدام إطار عمل الويب المفضّل لديك.

تثبيت إطار عمل Express.js

في نافذة سطر الأوامر، أكمِل الإجراء التالي.

1. أدخِل الأمر التالي لتثبيت إطار عمل Express.js.

   npm install express --save
   

ضبط إعدادات خادم الويب

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أنشئ ملف server.js جديدًا.
3. انسخ الرمز التالي والصقه.

   const express = require("express");
   const path = require("path");
   
   // Running PORT is set automatically by App Engine
   const port = process.env.PORT || 3000;
   const app = express();
   
   const publicPath = path.join(__dirname, "/dist/photo-gallery-app");
   
   app.use(express.static(publicPath));
   
   app.get("*", (req, res) => {
     res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
   });
   
   app.listen(port, () => {
     console.log(`Server is up on ${port}`);
   });
   

4. احفظ ملف server.js.

ربط خادم الويب

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. افتح ملف package.json.
3. عدِّل أمر البدء لتشغيل العقدة في ملف server.js.

   "name": "photo-gallery-app",
     "version": "0.0.0",
     "scripts": {
       "ng": "ng",
       "start": "node server.js",
       "build": "ng build",
       "watch": "ng build --watch --configuration development",
       "test": "ng test"
     },
   

   السمة start هي نقطة الدخول إلى تطبيقك.
4. احفظ ملف package.json.

إعداد App Engine

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أنشئ ملف app.yaml جديدًا.
3. انسخ الرمز التالي والصقه.

   runtime: nodejs16
   service: default
   

   تحدّد المعلومات الواردة في ملف app.yaml إعدادات App Engine. ما عليك سوى تحديد وقت التشغيل والخدمة.
4. احفظ ملف app.yaml.

تعديل قائمة التجاهل في gcloud

لضمان عدم تحميل الدليل node_modules، أنشئ ملف .gcloudignore. لا يتم تحميل الملفات المُدرَجة في ملف .gcloudignore.

في أداة تعديل الرموز، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أنشئ ملف .gcloudignore جديدًا.
3. انسخ الرمز التالي والصقه.

   # This file specifies files that are *not* uploaded to Google Cloud
   # using gcloud. It follows the same syntax as .gitignore, with the addition of
   # "#!include" directives (which insert the entries of the given .gitignore-style
   # file at that point).
   #
   # For more information, run:
   #   $ gcloud topic gcloudignore
   #
   .gcloudignore
   # If you would like to upload your .git directory, .gitignore file or files
   # from your .gitignore file, remove the corresponding line
   # below:
   .git
   .gitignore
   
   # Node.js dependencies:
   node_modules/
   

4. احفظ ملف .gcloudignore.

إعداد تطبيقك

قبل نشر التطبيق، عليك إعداده باستخدام مشروعك واختيار منطقة مرتبطة به.

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل الأمر التالي لتهيئة تطبيقك.

   gcloud app create --project=[YOUR_PROJECT_ID]
   

3. في الطلب، اختَر المنطقة التي تريد تحديد موقع تطبيق App Engine فيها.

نشر تطبيقك

في نافذة سطر الأوامر، أكمِل الإجراءات التالية.

1. انتقِل إلى دليل مشروع photo-gallery-app الجديد.
2. أدخِل الأمر التالي لنشر تطبيقك.

   gcloud app deploy --project=[YOUR_PROJECT_ID]
   

3. في الطلب، أكِّد الإجراء.بعد اكتمال أمر النشر gcloud بنجاح، سيتم عرض عنوان URL للوصول إلى تطبيقك.
4. أدخِل الأمر التالي لفتح علامة تبويب جديدة في المتصفّح.

   gcloud app browse
   

   

11. تهانينا

تهانينا لقد أنشأت معرض صور نموذجية باستخدام Angular الإصدار 14 ونشرته بنجاح على App Engine.

لقد جرّبت ميزة المكوّن المستقل والتحميل الكسول. أنشأت ميزة إرسال الرسائل المستندة إلى النماذج لتقديم الملاحظات والتعليقات. أضفت أيضًا بنجاح حوارًا مع وكيل افتراضي في Dialogflow CX باستخدام Dialogflow Messenger. أحسنت

الخطوات التالية

بعد إكمال التطبيق الأساسي، حسِّنه باستخدام الأفكار التالية.

• لا يرسل النموذج الملاحظات فعليًا، لذا أعِد تصميمه لإضافة منطق النشاط التجاري لإرسال رسالة إلكترونية.
• في سيناريو واقعي، يجب التحقّق من بيانات أدخلها المستخدم وتضمين اختبار CAPTCHA أو آلية مشابهة لتجنُّب استخدام أسلوب غير مرغوب فيه.
• إنشاء وكيل جديد والتعرّف على كيفية تصميم مسارات المحادثات في Dialogflow CX

ننصحك بمواصلة تجربة إطار عمل Angular والاستمتاع به.

تنظيف مشروعك على السحابة الإلكترونية وحذفه

يمكنك الاحتفاظ بمشروعك على السحابة الإلكترونية أو حذفه لإيقاف الفوترة مقابل جميع الموارد المستخدَمة في المشروع.

في المتصفّح، أكمِل الإجراءات التالية.

1. سجِّل الدخول إلى حسابك على Gmail أو Google Workspace.
2. في وحدة تحكّم Google Cloud، انقر على الزر إعدادات "إدارة الهوية وإمكانية الوصول".
3. في صفحة إدارة الهوية وإمكانية الوصول والمشرف، اختَر علامة التبويب إدارة الموارد.
4. في صفحة إدارة الموارد، انتقِل إلى المشروع الذي تريد حذفه واختَره، ثم انقر على زر حذف لفتح نافذة حوار.
5. في نافذة مربّع الحوار، أدخِل رقم تعريف المشروع. انقر على الزر إيقاف لحذف المشروع.