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

1. معرفی

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

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

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

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

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

برنامه تکمیل شده

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

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

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

  • یک حساب Gmail یا Google Workspace
  • دانش اولیه در مورد موضوعات زیر
    • HTML. نحوه ایجاد یک عنصر
    • CSS و کمتر. نحوه استفاده از انتخابگر 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
  • یک ویرایشگر کد یا IDE. برای باز کردن و ویرایش فایل ها استفاده می شود. کد ویژوال استودیو یا ویرایشگر کد دیگری به انتخاب شما.

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. در یک پنجره خط فرمان، مخزن را فورک و کلون کنید.

در مرحله بعد اپلیکیشن Photo Gallery خود را بسازید.

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

ماژول برنامه را حذف کنید

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

  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 API استفاده کنید

برای اینکه به برنامه خود اجازه دهید بدون 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 { 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. یک جزء مستقل جدید اضافه کنید

همانطور که تاکنون مشاهده کردید، کامپوننت های مستقل با کاهش نیاز به 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

    داربست را برای یک جزء جدید ایجاد می کند

    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 v 14.2.0 یک روش 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 ذخیره کنید.

کامپایل و بررسی با ابزارهای برنامه‌نویس Chrome

از ابزارهای برنامه‌نویس Chrome برای بررسی نحوه بارگیری کامپوننت توسط چارچوب Angular استفاده کنید.

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

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

در مرورگر خود، اقدامات زیر را انجام دهید.

  1. به صفحه زیر بروید.
    http://localhost:4200
  2. ابزارهای برنامه‌نویس Chrome را باز کنید و برگه شبکه را انتخاب کنید.
  3. صفحه را بازخوانی کنید تا چندین فایل نمایش داده شود، اما نه مؤلفه feedback-and-chat صفحه شما باید با تصویر تصویر زیر مطابقت داشته باشد. اسکرین شات برنامه با پانل ابزارهای توسعه کروم باز است
  4. اطلاعات بیشتر درباره این بچه ها را انتخاب کنید! دکمه مسیریابی به کامپوننت مستقل. گزارش باید نشان دهد که کامپوننت تنها زمانی بارگذاری می شود که به روتر کامل ضربه بزنید. برای بررسی بارگیری مؤلفه، به انتهای لیست بروید. صفحه شما باید با تصویر زیر مطابقت داشته باشد. اسکرین شات برنامه با پانل ابزارهای توسعه کروم باز است که مؤلفه بارگذاری شده تنبل را نشان می دهد

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

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

برای پشتیبانی از رابط کاربری، یک ویژگی 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 را ذخیره کنید.

به روز رسانی UI فرم را کامپایل کنید

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

  1. به فهرست پروژه جدید photo-gallery-app خود بروید.
  2. دستور Angular زیر را برای کامپایل و اجرای برنامه و باز کردن وب سرور وارد کنید.
    ng serve
    برنامه شما باید کامپایل نشود. نگران نباشید، باید فرم را صحافی کنید.
  3. در حال حاضر موارد زیر را مرور کنید.
    • شما از binding خاصیت formGroup برای اتصال contactForm به عنصر form و اتصال رویداد ngSubmit استفاده می کنید.
    • دستورالعمل FormGroup به رویداد ارسال ارسال شده توسط عنصر form گوش می دهد. سپس، دستور FormGroup یک رویداد ngSubmit را منتشر می کند که می توانید آن را به تابع پاسخ به تماس onSubmit متصل کنید.
    • در مرحله بعد، تابع پاسخ به تماس onSubmit را در فایل feedback-and-chat.component.ts پیاده سازی می کنید.
  4. در مرحله بعد، شما می خواهید فرم را صحافی کنید.

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

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

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

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

در این کد لبه، شما فقط اقدامات زیر را اجرا می کنید.

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

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

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

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

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

  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 را باز کنید و تب Console را انتخاب کنید.
  3. هر مقداری را در کادر متنی نام کامل ، ایمیل و نظرات وارد کنید.
  4. دکمه ارسال را انتخاب کنید. یک پیام موفقیت آمیز باید در صفحه نمایش داده شود.
  5. نمایش مقادیر در برگه کنسول را تأیید کنید. صفحه نمایش شما باید با تصویر تصویر زیر مطابقت داشته باشد. پنجره مرورگر با کنسولی که داده های json را در فرم وارد کرده است شما با موفقیت کدی را برای افزودن فرم ارسال پیام به رابط کاربر مؤلفه و تجزیه ورودی های کاربر پیاده سازی کردید.
  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 را انتخاب می کنید، ایجاد می کند.

    صفت

    جزئیات

    شناسه عامل

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

    عنوان چت

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

    df-cx

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

    قصد

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

    زبان-کد

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

    محل

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

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

9. برنامه را در Google App Engine قرار دهید

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

برای کسب اطلاعات بیشتر درباره Google App Engine، به App Engine مراجعه کنید.

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

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

  • یک پروژه Cloud با App Engine ایجاد کرد
  • Cloud Build API را فعال کرد
  • Google Cloud CLI را نصب کرد

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

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

اپلیکیشن مستقل خود را بسازید

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

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

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

10. برنامه خود را با استفاده از چارچوب Express.js مستقر کنید

کد نمونه در این codelab از چارچوب 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

11. تبریک می گویم

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

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

مراحل بعدی

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

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

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

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

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

در مرورگر خود، اقدامات زیر را انجام دهید.

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