شروع کار با اجزای مستقل

۱. مقدمه

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک برنامه گالری عکس حیات وحش با استفاده از Angular نسخه ۱۴ خواهید ساخت. برنامه تکمیل شده مجموعه‌ای از عکس‌ها را نمایش می‌دهد و همچنین دارای یک فرم ارسال پیام برای تماس با عکاس و یک پنجره چت برای یادگیری حقایق جالب در مورد حیوانات به تصویر کشیده شده در عکس‌ها خواهد بود.

شما همه چیز را در برنامه خود با استفاده از Angular v14 و ویژگی جدید کامپوننت‌های مستقل می‌سازید.

تمام ارجاعات به چارچوب Angular و Angular CLI، Angular نسخه ۱۴ را منعکس می‌کنند. اجزای مستقل، یک ویژگی پیش‌نمایش از Angular نسخه ۱۴ هستند، بنابراین شما باید یک برنامه کاملاً جدید با استفاده از Angular نسخه ۱۴ ایجاد کنید. اجزای مستقل، روشی ساده برای ساخت برنامه‌های Angular ارائه می‌دهند. اجزای مستقل، دستورالعمل‌های مستقل و لوله‌های مستقل، با کاهش نیاز به NgModules ، تجربه نوشتن را ساده می‌کنند. اجزای مستقل قادر به بهره‌برداری کامل از اکوسیستم موجود کتابخانه‌های Angular هستند.

این اپلیکیشنی است که امروز در حال ساخت آن هستید.

درخواست تکمیل شده

آنچه یاد خواهید گرفت

  • نحوه استفاده از Angular CLI برای ایجاد یک پروژه جدید
  • نحوه استفاده از کامپوننت‌های مستقل Angular برای ساده‌سازی توسعه برنامه‌های Angular
  • نحوه ایجاد یک کامپوننت مستقل؛ که نحوه ساخت رابط کاربری و اضافه کردن منطق تجاری است.
  • نحوه بوت‌استرپ کردن یک برنامه با استفاده از یک کامپوننت مستقل
  • چگونه یک کامپوننت مستقل را به صورت تنبل بارگذاری کنیم؟
  • نحوه جاسازی یک گفتگوی چت در یک کامپوننت مستقل با استفاده از Dialogflow Messenger
  • نحوه استقرار یک برنامه Angular در Google Cloud App Engine با استفاده از Google Cloud CLI (gcloud)

آنچه شما نیاز خواهید داشت

  • یک حساب Gmail یا Google Workspace
  • آشنایی اولیه با مباحث زیر
    • HTML. نحوه ایجاد یک عنصر.
    • CSS و موارد دیگر. نحوه استفاده از یک انتخابگر CSS و ایجاد یک فایل تعریف سبک.
    • تایپ‌اسکریپت یا جاوااسکریپت. نحوه تعامل با ساختار DOM.
    • گیت و گیت‌هاب. نحوه‌ی فورک کردن و کلون کردن یک مخزن.
    • رابط خط فرمان، مانند bash یا zsh . نحوه پیمایش دایرکتوری‌ها و اجرای دستورات.

۲. تنظیمات محیطی

محیط محلی خود را تنظیم کنید

برای تکمیل این آزمایشگاه کد، باید نرم‌افزار زیر را روی رایانه محلی خود نصب کنید.

  • یک نسخه فعال LTS یا نسخه نگهداری LTS از Node.js. که برای نصب فریم‌ورک Angular و Angular CLI استفاده می‌شود.

    نسخه گره

    پشتیبانی شده توسط انگولار

    ۱۴.۱۵ یا جدیدتر

    پشتیبانی شده

    ۱۶.۱۰ یا جدیدتر

    پشتیبانی شده

    ۱۸.۱.۰

    پشتیبانی نمی‌شود

    برای تأیید نسخه Node.js در رایانه محلی خود، دستور node زیر را از یک پنجره خط فرمان اجرا کنید. 
    node -v
  • یک ویرایشگر کد یا IDE. برای باز کردن و ویرایش فایل‌ها استفاده می‌شود. Visual Studio Code یا هر ویرایشگر کد دیگری که انتخاب می‌کنید.

نصب Angular CLI

پس از پیکربندی تمام وابستگی‌ها، دستور npm زیر را برای نصب Angular CLI از طریق پنجره خط فرمان اجرا کنید.

npm install --global @angular/cli

برای تأیید صحت پیکربندی خود، دستور Angular زیر را از خط فرمان اجرا کنید.

ng version

اگر دستور Angular با موفقیت انجام شود، باید پیامی مشابه تصویر زیر دریافت کنید.

خروجی ترمینال نسخه انگولار

کد منبع و تصاویر

شما کل برنامه را از ابتدا ایجاد می‌کنید و این آزمایشگاه کد گام به گام به شما کمک می‌کند. به خاطر داشته باشید که مخزن GitHub شامل کد نهایی است. اگر در جایی گیر کردید، کد نهایی و تصاویر نمایش داده شده در صفحه گالری را مرور کنید.

برای دانلود کد منبع.

  1. در مرورگر خود، به صفحه زیر بروید. 
    https://github.com/angular/codelabs/tree/standalone-components
  2. در یک پنجره خط فرمان، مخزن را fork و clone کنید.

در مرحله بعد، برنامه گالری عکس خود را بسازید.

۳. یک برنامه جدید ایجاد کنید

برای ایجاد برنامه اولیه شروع، مراحل زیر را انجام دهید.

از Angular CLI برای ایجاد یک فضای کاری جدید استفاده کنید. برای کسب اطلاعات بیشتر در مورد Angular CLI و چارچوب Angular، به angular.io مراجعه کنید.

ایجاد یک پروژه جدید

در یک پنجره خط فرمان، مراحل زیر را انجام دهید.

  1. دستور Angular زیر را برای ایجاد یک پروژه Angular جدید با نام photo-gallery-app وارد کنید. 
    ng new photo-gallery-app
  2. در هر درخواست، گزینه پیش‌فرض را بپذیرید. چارچوب Angular بسته‌ها و وابستگی‌های مورد نیاز را نصب می‌کند. این فرآیند ممکن است چند دقیقه طول بکشد.

پس از اتمام رابط خط فرمان (CLI) انگولار، شما یک فضای کاری انگولار جدید و یک برنامه ساده و آماده اجرا دارید.

برنامه جدید شما مانند یک برنامه استاندارد 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

برنامه شما نباید کامپایل شود. نگران نباشید، فقط باید چند نکته دیگر را اصلاح کنید.

از API برنامه bootstrap استفاده کنید

برای اینکه برنامه شما بتواند بدون NgModule اجرا شود، باید از یک کامپوننت مستقل به عنوان کامپوننت ریشه با استفاده از bootstrapApplication API استفاده کنید.

حذف ارجاعات به ماژول برنامه

در یک ویرایشگر کد، مراحل زیر را انجام دهید.

  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) کنید. 
    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));

اضافه کردن روتر و ماژول‌های رایج

برای استفاده از Router و سایر ویژگی‌های رایج ماژول، باید هر ماژول را مستقیماً به کامپوننت import کنید.

در یک ویرایشگر کد، مراحل زیر را انجام دهید.

  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. در مرحله بعد، شما قصد دارید برنامه خود را برای نمایش برخی از عکس‌ها زیباسازی کنید.

۴. عکس‌ها را نمایش دهید

برنامه جدید شما به عنوان یک گالری عکس طراحی شده است و باید تعدادی عکس نمایش دهد.

کامپوننت‌ها بلوک‌های سازنده‌ی اصلی برنامه‌های Angular هستند. کامپوننت‌ها سه جنبه‌ی اصلی دارند.

  • یک فایل HTML برای قالب
  • یک فایل CSS برای استایل‌ها
  • یک فایل TypeScript برای رفتار برنامه

عکس‌ها را به برنامه خود منتقل کنید

تصاویر در برنامه‌ای که قبلاً از گیت‌هاب دانلود کرده‌اید، ارائه شده‌اند.

  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. در مرحله بعد، شما یک کامپوننت مستقل جدید برای ارسال بازخورد و چت با جیمبو ایجاد خواهید کرد. برای کسب اطلاعات بیشتر در مورد جیمبو، این codelab را ادامه دهید.

۵. یک کامپوننت مستقل جدید اضافه کنید

همانطور که تاکنون دیده‌اید، کامپوننت‌های مستقل با کاهش نیاز به NgModules، روشی ساده برای ساخت برنامه‌های Angular ارائه می‌دهند. در بخش‌های بعدی، یک کامپوننت مستقل جدید ایجاد می‌کنید که به کاربر امکان ارسال بازخورد و چت با یک عامل مجازی را می‌دهد.

ایجاد یک کامپوننت مستقل جدید

برای ایجاد این کامپوننت جدید، دوباره از Angular CLI استفاده می‌کنید.

در یک پنجره خط فرمان، مراحل زیر را انجام دهید.

  1. به دایرکتوری پروژه جدید photo-gallery-app خود بروید.
  2. دستور Angular زیر را برای ایجاد یک کامپوننت جدید به نام feedback-and-chat وارد کنید.
    ng generate component feedback-and-chat --standalone
    جدول زیر بخش‌های مختلف این دستور را شرح می‌دهد.

    قسمت

    جزئیات

    ng

    تمام دستورات Angular CLI را برای چارچوب Angular تعریف می‌کند.

    generate component

    داربست (scaffolding) را برای یک کامپوننت جدید ایجاد می‌کند.

    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 و ماژول Routes را وارد کنید. Angular نسخه ۱۴.۲.۰ یک متد جدید provideRouter معرفی کرده است که به ما امکان می‌دهد مجموعه‌ای از مسیرها را برای برنامه پیکربندی کنیم. 
    import { provideRouter, Routes } from '@angular/router';
  4. قطعه کد زیر را بین importها و عبارت 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 را ذخیره کنید.

کامپایل و بررسی با ابزارهای توسعه‌دهنده کروم

از ابزارهای توسعه‌دهنده کروم برای بررسی نحوه بارگذاری تنبل کامپوننت توسط فریم‌ورک انگولار استفاده کنید.

در یک پنجره خط فرمان، مراحل زیر را انجام دهید.

  1. به دایرکتوری پروژه جدید photo-gallery-app خود بروید.
  2. دستور Angular زیر را برای کامپایل و اجرای برنامه و باز کردن یک وب سرور وارد کنید.
    ng serve
    سرور توسعه شما باید روی پورت 4200 اجرا شود.

در مرورگر خود، مراحل زیر را انجام دهید.

  1. به صفحه زیر بروید. 
    http://localhost:4200
  2. ابزارهای توسعه‌دهنده کروم را باز کنید و تب شبکه (Network) را انتخاب کنید.
  3. صفحه را رفرش کنید تا چندین فایل نمایش داده شود، اما کامپوننت feedback-and-chat نمایش داده نشود. تصویر صفحه شما باید با تصویر زیر مطابقت داشته باشد. اسکرین‌شات برنامه با پنل devtools کروم باز است
  4. دکمه‌ی « درباره‌ی این افراد بیشتر بدانید!» را انتخاب کنید تا به کامپوننت مستقل هدایت شوید. گزارش باید نشان دهد که کامپوننت فقط زمانی بارگذاری می‌شود که روتر را به طور کامل فعال کنید. به انتهای لیست بروید تا بررسی کنید که کامپوننت بارگذاری شده است. صفحه‌ی شما باید با تصویر زیر مطابقت داشته باشد. تصویر برنامه با پنل devtools کروم که کامپوننت lazy loaded را نشان می‌دهد.

۶. رابط کاربری فرم را اضافه کنید

فرم ارسال بازخورد دارای سه فیلد رابط کاربری ورودی و یک دکمه در پایین است. سه فیلد رابط کاربری ورودی عبارتند از نام کامل، آدرس ایمیل فرستنده و نظرات.

برای پشتیبانی از رابط کاربری، یک ویژگی 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
    برنامه شما نباید کامپایل شود. نگران نباشید، باید فرم را bind کنید.
  3. فعلاً موارد زیر را مرور کنید.
    • شما از مقیدسازی ویژگی formGroup برای مقیدسازی contactForm به عنصر form و از مقیدسازی رویداد ngSubmit استفاده می‌کنید.
    • دستورالعمل FormGroup به رویداد ارسال (submit) که توسط عنصر form منتشر می‌شود، گوش می‌دهد. سپس، دستورالعمل FormGroup یک رویداد ngSubmit منتشر می‌کند که می‌توانید آن را به تابع فراخوانی onSubmit متصل کنید.
    • در مرحله بعد، تابع فراخوانی onSubmit را در فایل feedback-and-chat.component.ts پیاده‌سازی می‌کنید.
  4. در مرحله بعد، فرم را bind خواهید کرد.

۷. اضافه کردن مدیریت رویداد به فرم

رابط کاربری فرم ارسال بازخورد کامل است، اما فاقد تعامل است. مدیریت ورودی کاربر با فرم‌ها، سنگ بنای بسیاری از برنامه‌های رایج است.

در یک سناریوی واقعی، برای تکمیل اقدامات زیر باید منطق کسب و کار را پیاده‌سازی کنید.

  1. ورودی کاربر را از ساختار DOM رندر شده مرتبط با کامپوننت تجزیه و تحلیل کنید.
  2. ورودی کاربر را اعتبارسنجی کنید، که شامل یک کپچا یا مکانیزم مشابه برای جلوگیری از ارسال هرزنامه توسط ربات‌ها می‌شود.
  3. ارسال ایمیل به آدرس ایمیل تعیین شده.
  4. یک پیام دوستانه به کاربر نمایش دهید.

در این آزمایشگاه کد، شما فقط اقدامات زیر را پیاده‌سازی می‌کنید.

  1. ورودی کاربر را از ساختار DOM رندر شده مرتبط با کامپوننت تجزیه و تحلیل کنید.
  2. یک پیام دوستانه به کاربر نمایش دهید.

شما باید مهارت‌های خود را به چالش بکشید و هر چهار اقدام را اجرا کنید.

مدل فرم ارسال پیام را به کامپوننت اضافه کنید

مدل فرم ارسال بازخورد را در کلاس کامپوننت ایجاد و اضافه کنید. مدل فرم، وضعیت فرم را تعیین می‌کند. سرویس FormBuilder متدهای مناسبی برای ایجاد یک کنترل رابط کاربری ارائه می‌دهد.

در ویرایشگر کد خود، مراحل زیر را انجام دهید.

  1. به فایل feedback-and-chat.component.ts بروید.
  2. سرویس FormBuilder و ماژول ReactiveModule را از پکیج @angular/forms وارد (import) کنید. این سرویس متدهای مناسبی برای تولید کنترل‌ها ارائه می‌دهد. در مرحله بعدی از تابع inject استفاده خواهیم کرد، بنابراین باید آن را نیز از @angular/core وارد (import) کنیم. 
    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. ابزارهای توسعه‌دهنده کروم را باز کنید و تب کنسول را انتخاب کنید.
  3. هر مقداری را در کادرهای متنی نام کامل ، ایمیل و نظرات وارد کنید.
  4. دکمه ارسال را انتخاب کنید. یک پیام موفقیت‌آمیز باید روی صفحه نمایش داده شود.
  5. مقادیر نمایش داده شده در برگه کنسول را بررسی کنید. صفحه نمایش شما باید با تصویر زیر مطابقت داشته باشد. پنجره مرورگر با کنسولی که داده‌های json وارد شده در فرم را نمایش می‌دهد شما با موفقیت کد مربوط به افزودن فرم ارسال پیام به رابط کاربری کامپوننت و تجزیه ورودی‌های کاربر را پیاده‌سازی کردید.
  6. در مرحله بعد، شما یک گفتگوی چت تعبیه می‌کنید تا بازدیدکنندگان برنامه بتوانند با جیمبو صحبت کنند. جیمبو یک کوآلا است که از او حقایق جالبی در مورد حیات وحش می‌آموزید.

۸. اضافه کردن دیالوگ چت

از تجربه کار با رابط‌های مکالمه‌ای، مانند Dialogflow CX یا پلتفرم‌های مشابه، بهره ببرید. یک عامل Dialogflow CX یک عامل مجازی است که مکالمات همزمان با انسان‌ها را مدیریت می‌کند. این یک ماژول درک زبان طبیعی است که ظرافت‌های زبان انسان را تشخیص می‌دهد و متن یا صدای کاربر نهایی را در طول مکالمه به داده‌های ساختاریافته‌ای تبدیل می‌کند که برنامه‌ها و سرویس‌ها قادر به درک آن هستند.

یک عامل مجازی نمونه برای استفاده شما ایجاد شده است. کاری که باید در این آزمایش انجام دهید این است که یک گفتگوی چت به کامپوننت مستقل اضافه کنید تا کاربران برنامه بتوانند با ربات تعامل داشته باشند. برای این نیاز، از پیام‌رسان Dialogflow ، یک یکپارچه‌سازی از پیش ساخته شده که یک پنجره گفتگوی قابل تنظیم ارائه می‌دهد، استفاده خواهید کرد. وقتی باز می‌شود، گفتگوی چت در سمت راست پایین صفحه نمایش ظاهر می‌شود و قصد خوشامدگویی پیش‌فرض عامل را فعال می‌کند. ربات به کاربر خوشامد می‌گوید و مکالمه را آغاز می‌کند.

پیاده‌سازی زیر حقایق جالبی در مورد حیات وحش را با کاربر به اشتراک می‌گذارد. پیاده‌سازی‌های دیگر برای عامل‌های مجازی ممکن است موارد استفاده پیچیده‌ای را برای مشتریان (مانند یک عامل مرکز تماس انسانی) برطرف کنند. بسیاری از شرکت‌ها از یک عامل مجازی به عنوان کانال اصلی ارتباط با وب‌سایت شرکت استفاده می‌کنند.

پیام‌رسان Dialogflow را به کامپوننت خود اضافه کنید

مانند فرم، کادر محاوره‌ای چت فقط باید زمانی نمایش داده شود که کامپوننت مستقل بارگذاری شده باشد.

در ویرایشگر کد خود، مراحل زیر را انجام دهید.

  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 Messenger را انتخاب می‌کنید، Dialogflow ویژگی‌های عنصر df-messenger را تولید می‌کند.

    ویژگی

    جزئیات

    شناسه عامل

    پیش از توزیع. شناسه منحصر به فرد عامل Dialogflow را مشخص می‌کند.

    عنوان چت

    پیش‌پراکنده. محتوایی را که در بالای کادر محاوره‌ای چت نمایش داده می‌شود، مشخص می‌کند. در ابتدا با نام نماینده شما پیش‌پراکنده شده است، اما باید آن را سفارشی کنید.

    df-cx

    نشان می‌دهد که تعامل با یک عامل CX است. مقدار را روی true تنظیم کنید.

    قصد

    رویداد سفارشی مورد استفاده برای اجرای اولین intent هنگام باز شدن کادر گفتگو را مشخص می‌کند.

    کد زبان

    کد زبان پیش‌فرض را برای اولین intent مشخص می‌کند.

    مکان

    منطقه‌ای را که عامل را در آن مستقر می‌کنید، مشخص می‌کند.

  3. فایل feedback-and-chat.component.ts را ذخیره کنید.

نمایش مدل فرم ارسال بازخورد

در یک پنجره خط فرمان، مراحل زیر را انجام دهید.

  1. به دایرکتوری پروژه جدید photo-gallery-app خود بروید.
  2. برای کامپایل برنامه، دستور Angular زیر را وارد کنید.
    ng serve
    برنامه شما نباید کامپایل شود. خط فرمان باید پیام خطای زیر را نمایش دهد. پیام خطای df-messenger
  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 به یک جاوا اسکریپت نیاز دارد که فقط باید هنگام بارگذاری کامپوننت‌های بازخورد و چت تزریق شود. برای این منظور، کد مربوطه را به متد 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. آیکون را انتخاب کنید و با جیمبو تعامل داشته باشید. جیمبو حقایق جالبی در مورد حیوانات ارائه می‌دهد. برنامه‌ای که پنجره چت را با پاسخ ربات پیام‌رسان نمایش می‌دهد
  3. برنامه کاملاً کاربردی است.

۹. برنامه را در Google App Engine مستقر کنید

این برنامه به صورت محلی روی دستگاه شما اجرا می‌شود. کاری که شما به عنوان مرحله بعدی و آخرین مرحله از این آزمایشگاه کد می‌خواهید انجام دهید، استقرار آن در Google App Engine است.

برای کسب اطلاعات بیشتر در مورد موتور برنامه گوگل، به موتور برنامه مراجعه کنید.

محیط خود را برای Google App Engine تنظیم کنید

اگر از قبل تمام شرایط زیر را دارید، مراحل بعدی را رد کنید و به استقرار برنامه ادامه دهید.

  • یک پروژه ابری با App Engine ایجاد کردم
  • API ساخت ابری را فعال کرد
  • رابط خط فرمان گوگل کلود (Google Cloud CLI) را نصب کردم

اقدامات زیر را تکمیل کنید.

  1. وارد حساب Gmail یا Google Workspace خود شوید. اگر ندارید، حساب Google خود را ایجاد کنید .
  2. فعال کردن صورتحساب در کنسول ابری به شما امکان می‌دهد از منابع ابری و APIها استفاده کنید. برای کسب اطلاعات بیشتر، به بخش «ایجاد، تغییر یا بستن حساب صورتحساب ابری سلف سرویس» مراجعه کنید.
  3. یک پروژه Google Cloud ایجاد کنید تا منابع برنامه App Engine و سایر منابع Google Cloud خود را در آن نگهداری کنید. برای کسب اطلاعات بیشتر، به ایجاد و مدیریت پروژه‌ها مراجعه کنید.
  4. فعال کردن Cloud Build API در کنسول ابری. برای کسب اطلاعات بیشتر، به فعال کردن دسترسی به API مراجعه کنید.
  5. رابط خط فرمان گوگل کلود و ابزار خط فرمان gcloud را نصب کنید. برای کسب اطلاعات بیشتر، به نصب رابط خط فرمان gcloud مراجعه کنید.
  6. رابط خط فرمان گوگل کلود (Google Cloud CLI) را مقداردهی اولیه کنید و مطمئن شوید که gcloud برای استفاده از پروژه گوگل کلودی که می‌خواهید در آن مستقر شوید، پیکربندی شده است. برای کسب اطلاعات بیشتر، به مقداردهی اولیه رابط خط فرمان گوگل کلود (gcloud CLI) مراجعه کنید.

برنامه مستقل خود را بسازید

در یک پنجره خط فرمان، مراحل زیر را انجام دهید.

  1. به دایرکتوری پروژه جدید photo-gallery-app خود بروید.
  2. دستور Angular زیر را برای کامپایل و ایجاد یک نسخه آماده برای تولید برنامه وارد کنید. 
    ng build

نسخه آماده تولید برنامه در زیرشاخه dist از دایرکتوری پروژه photo-gallery-app شما ایجاد می‌شود.

۱۰. برنامه خود را با استفاده از چارچوب 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. دستور start را برای اجرای گره در فایل 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 را ذخیره کنید.

پیکربندی موتور برنامه

در ویرایشگر کد خود، مراحل زیر را انجام دهید.

  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
    خروجی کنسول از برنامه gcloud و ورود به مرور برنامه glcoud

۱۱. تبریک

تبریک می‌گویم. شما یک گالری عکس نمونه با استفاده از Angular v14 ایجاد کردید و با موفقیت آن را در App Engine مستقر کردید.

شما با ویژگی کامپوننت مستقل و بارگذاری تنبل آزمایش کردید. شما یک ویژگی ارسال پیام مبتنی بر فرم برای ارائه بازخورد و نظرات ایجاد کردید. همچنین با موفقیت یک گفتگوی چت با یک عامل مجازی Dialogflow CX با استفاده از مسنجر Dialogflow اضافه کردید. آفرین.

مراحل بعدی

حالا که برنامه‌ی اصلی را تکمیل کرده‌اید، با استفاده از ایده‌های زیر آن را بهبود ببخشید.

  • این فرم در واقع بازخورد ارسال نمی‌کند، آن را برای اضافه کردن منطق تجاری جهت ارسال ایمیل، بازسازی کنید.
  • در یک سناریوی دنیای واقعی، شما باید ورودی کاربر را اعتبارسنجی کنید و یک کپچا یا مکانیزم مشابه را برای جلوگیری از ارسال هرزنامه توسط ربات‌ها در نظر بگیرید.
  • یک عامل جدید ایجاد کنید و یاد بگیرید که چگونه جریان‌های مکالمه را در Dialogflow CX طراحی کنید

به آزمایش با چارچوب Angular ادامه دهید و لذت ببرید.

پروژه ابری خود را پاک و حذف کنید

شما می‌توانید پروژه ابری خود را نگه دارید یا آن را حذف کنید تا پرداخت هزینه تمام منابع مورد استفاده در پروژه متوقف شود.

در مرورگر خود، مراحل زیر را انجام دهید.

  1. وارد حساب Gmail یا Google Workspace خود شوید.
  2. در کنسول گوگل کلود ، دکمه‌ی تنظیمات مدیریت و دسترسی به اطلاعات (IAM & Admin Settings) را انتخاب کنید.
  3. در صفحه IAM & Admin. تب مدیریت منابع را انتخاب کنید.
  4. در صفحه مدیریت منابع. به پروژه‌ای که می‌خواهید حذف کنید بروید و آن را انتخاب کنید. دکمه حذف را انتخاب کنید تا یک پنجره محاوره‌ای باز شود.
  5. در پنجره‌ی محاوره‌ای، شناسه‌ی پروژه را وارد کنید. برای حذف پروژه، دکمه‌ی خاموش کردن (Shut down) را انتخاب کنید.