การเริ่มต้นใช้งานคอมโพเนนต์แบบสแตนด์อโลน

1. บทนำ

สิ่งที่คุณจะสร้าง

ในโค้ดแล็บนี้ คุณจะได้สร้างแอปพลิเคชันแกลเลอรีภาพถ่ายสัตว์ป่าโดยใช้ Angular v14 แอปพลิเคชันที่เสร็จสมบูรณ์แล้วจะแสดงชุดรูปภาพ รวมถึงมีแบบฟอร์มส่งข้อความเพื่อติดต่อช่างภาพและหน้าต่างแชทเพื่อดูข้อเท็จจริงที่น่าสนใจเกี่ยวกับสัตว์ที่อยู่ในรูปภาพ

คุณสร้างทุกอย่างในแอปพลิเคชันโดยใช้ Angular v14 และฟีเจอร์คอมโพเนนต์แบบสแตนด์อโลนใหม่

การอ้างอิงทั้งหมดถึงเฟรมเวิร์ก Angular และ Angular CLI จะแสดง Angular v14 คอมโพเนนต์แบบสแตนด์อโลนเป็นฟีเจอร์เวอร์ชันตัวอย่างของ Angular v14 ดังนั้นคุณต้องสร้างแอปพลิเคชันใหม่โดยใช้ Angular v14 คอมโพเนนต์แบบสแตนด์อโลนช่วยให้สร้างแอปพลิเคชัน Angular ได้ง่ายขึ้น คอมโพเนนต์แบบสแตนด์อโลน ไดเรกทีฟแบบสแตนด์อโลน และไปป์แบบสแตนด์อโลนมีจุดมุ่งหมายเพื่อปรับปรุงประสบการณ์การเขียนโดยลดความจำเป็นในการใช้ NgModules คอมโพเนนต์แบบสแตนด์อโลนจะใช้ประโยชน์จากระบบนิเวศของไลบรารี Angular ที่มีอยู่ได้อย่างเต็มที่

นี่คือแอปพลิเคชันที่คุณกำลังสร้างในวันนี้

ใบสมัครที่เสร็จสมบูรณ์

สิ่งที่คุณจะได้เรียนรู้

วิธีใช้ Angular CLI เพื่อสร้างโครงร่างโปรเจ็กต์ใหม่
วิธีใช้คอมโพเนนต์แบบสแตนด์อโลนของ Angular เพื่อเพิ่มประสิทธิภาพการพัฒนาแอป Angular
วิธีสร้างคอมโพเนนต์แบบสแตนด์อโลน ซึ่งเป็นวิธีสร้าง UI และเพิ่มตรรกะทางธุรกิจ
วิธีเริ่มต้นแอปพลิเคชันโดยใช้คอมโพเนนต์แบบสแตนด์อโลน
วิธีโหลดคอมโพเนนต์แบบสแตนด์อโลนแบบ Lazy Loading
วิธีฝังกล่องโต้ตอบแชทในคอมโพเนนต์แบบสแตนด์อโลนโดยใช้ Dialogflow Messenger
วิธีทําให้แอปพลิเคชัน Angular ใช้งานได้ใน Google Cloud App Engine โดยใช้ Google Cloud CLI (gcloud)

สิ่งที่คุณต้องมี

บัญชี Gmail หรือ Google Workspace
ความรู้พื้นฐานเกี่ยวกับหัวข้อต่อไปนี้
- HTML วิธีสร้างองค์ประกอบ
- CSS และน้อยกว่า วิธีใช้ตัวเลือก CSS และสร้างไฟล์คำจำกัดความสไตล์
- TypeScript หรือ JavaScript วิธีโต้ตอบกับโครงสร้าง DOM
- git และ GitHub วิธี Fork และโคลนที่เก็บ
- อินเทอร์เฟซบรรทัดคำสั่ง เช่น bash หรือ zsh วิธีไปยังไดเรกทอรีและเรียกใช้คำสั่ง

2. การตั้งค่าสภาพแวดล้อม

ตั้งค่าสภาพแวดล้อมภายใน

หากต้องการทํา Codelab นี้ให้เสร็จสมบูรณ์ คุณต้องติดตั้งซอฟต์แวร์ต่อไปนี้ในคอมพิวเตอร์เครื่องที่ใช้

Node.js เวอร์ชัน LTS ที่ใช้งานอยู่หรือ LTS ที่อยู่ระหว่างการบำรุงรักษา ใช้เพื่อติดตั้งเฟรมเวิร์ก Angular และ Angular CLI

เวอร์ชันโหนด	รองรับโดย Angular
14.15 ขึ้นไป	รองรับ
16.10 ขึ้นไป	รองรับ
18.1.0	ไม่รองรับ

หากต้องการยืนยันเวอร์ชันของ Node.js ในคอมพิวเตอร์ของคุณ ให้เรียกใช้nodeคำสั่งต่อไปนี้จากหน้าต่างบรรทัดคำสั่ง

node -v

โปรแกรมแก้ไขโค้ดหรือ IDE ใช้เพื่อเปิดและแก้ไขไฟล์ Visual Studio Code หรือตัวแก้ไขโค้ดอื่นที่คุณเลือก

ติดตั้ง Angular CLI

หลังจากกำหนดค่าการขึ้นต่อกันทั้งหมดแล้ว ให้เรียกใช้คำสั่ง npm ต่อไปนี้เพื่อติดตั้ง Angular CLI จากหน้าต่างบรรทัดคำสั่ง

npm install --global @angular/cli

หากต้องการยืนยันว่าการกำหนดค่าถูกต้อง ให้เรียกใช้คำสั่ง Angular ต่อไปนี้จากบรรทัดคำสั่ง

ng version

หากคำสั่ง Angular ทำงานเสร็จสมบูรณ์ คุณควรได้รับข้อความที่คล้ายกับภาพหน้าจอต่อไปนี้

เอาต์พุตเทอร์มินัลของเวอร์ชัน Angular

ซอร์สโค้ดและรูปภาพ

คุณสร้างแอปพลิเคชันทั้งหมดตั้งแต่ต้น และ Codelab แบบทีละขั้นนี้จะช่วยคุณ โปรดทราบว่าที่เก็บ GitHub มีโค้ดสุดท้าย หากติดขัด ให้ตรวจสอบโค้ดสุดท้ายและรูปภาพที่แสดงในหน้าแกลเลอรี

วิธีดาวน์โหลดซอร์สโค้ด

ในเบราว์เซอร์ ให้ไปที่หน้าต่อไปนี้
```
https://github.com/angular/codelabs/tree/standalone-components
```
ในหน้าต่างบรรทัดคำสั่ง ให้แยกและโคลนที่เก็บ

ในขั้นตอนถัดไป ให้สร้างแอปพลิเคชันแกลเลอรีรูปภาพ

3. สร้างแอปพลิเคชันใหม่

หากต้องการสร้างแอปพลิเคชันเริ่มต้นครั้งแรก ให้ดำเนินการต่อไปนี้

ใช้ Angular CLI เพื่อสร้างพื้นที่ทํางานใหม่ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Angular CLI และเฟรมเวิร์ก Angular ได้ที่ angular.io

สร้างโปรเจ็กต์ใหม่

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ป้อนคำสั่ง Angular ต่อไปนี้เพื่อสร้างโปรเจ็กต์ Angular ใหม่ชื่อ photo-gallery-app
```
ng new photo-gallery-app
```
ยอมรับตัวเลือกเริ่มต้นในแต่ละพรอมต์ เฟรมเวิร์ก Angular จะติดตั้งแพ็กเกจและการอ้างอิงที่จำเป็น กระบวนการนี้อาจใช้เวลาสักครู่

หลังจาก Angular CLI ทำงานเสร็จแล้ว คุณจะมีพื้นที่ทำงาน Angular ใหม่และแอปพลิเคชันที่พร้อมใช้งานอย่างง่าย

แอปพลิเคชันใหม่ของคุณมีโครงสร้างเหมือนกับแอปพลิเคชัน Angular มาตรฐาน NgModule ในแอปพลิเคชันใหม่ของคุณไม่จำเป็นสำหรับ Codelab นี้

นำโมดูลแอปพลิเคชันออก

หากต้องการนำโมดูลแอปพลิเคชันออก ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ลบไฟล์ app.module.ts

หลังจากลบโมดูลแอปพลิเคชันแล้ว คุณจะไม่มีโมดูลในแอปพลิเคชัน แอปพลิเคชันของคุณมีคอมโพเนนต์เดียวเท่านั้น ซึ่งก็คือคอมโพเนนต์ของแอปพลิเคชัน คุณต้องประกาศคอมโพเนนต์เป็นแบบสแตนด์อโลน

ประกาศคอมโพเนนต์แบบสแตนด์อโลน

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ app.component.ts

เพิ่มพารามิเตอร์และค่าต่อไปนี้ลงในรายการตกแต่ง

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

บันทึกไฟล์ app.component.ts

คอมไพล์แอปพลิเคชันแบบสแตนด์อโลนใหม่

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์แอปพลิเคชันใหม่
```
ng serve
```

แอปพลิเคชันของคุณควรคอมไพล์ไม่สำเร็จ ไม่ต้องกังวล คุณเพียงแค่ต้องแก้ไขอีก 2-3 อย่าง

ใช้ bootstrapApplication API

หากต้องการอนุญาตให้แอปพลิเคชันทำงานโดยไม่มี NgModule คุณต้องใช้คอมโพเนนต์แบบสแตนด์อโลนเป็นคอมโพเนนต์รูทโดยใช้ bootstrapApplication API

นำการอ้างอิงโมดูลแอปพลิเคชันออก

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ main.ts
นำรหัสการนำเข้าต่อไปนี้ออก เนื่องจากคุณไม่มีโมดูลแอปพลิเคชันอีกต่อไป
```
import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
```
นำโค้ดการเริ่มต้นระบบต่อไปนี้ออก เนื่องจากคุณไม่มีโมดูลแอปพลิเคชันอีกต่อไป
```
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

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ main.ts
นำเข้าคอมโพเนนต์ bootstrapApplication จากบริการ @angular/platform-browser
```
import { bootstrapApplication } from '@angular/platform-browser';
```
เพิ่มโค้ดต่อไปนี้เพื่อเริ่มต้นแอปพลิเคชัน
```
bootstrapApplication(AppComponent).catch(err => console.error(err));
```

นำเข้าคอมโพเนนต์และไลบรารีที่จำเป็น

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 และโมดูลอื่นๆ ที่ใช้กันทั่วไป คุณต้องนำเข้าแต่ละโมดูลไปยังคอมโพเนนต์โดยตรง

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ app.component.ts

นําเข้าโมดูลที่จําเป็นลงในคอมโพเนนต์

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

เพิ่มการนำเข้าในคอมโพเนนต์

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

บันทึกไฟล์ app.component.ts

คอมไพล์และเรียกใช้แอปพลิเคชันแบบสแตนด์อโลนใหม่

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และเรียกใช้แอปพลิเคชัน รวมถึงเปิดเว็บเซิร์ฟเวอร์ คุณอาจต้องปิด IDE ก่อนเรียกใช้แอปพลิเคชันเพื่อนำข้อผิดพลาดในการคอมไพล์ออก
```
ng serve
```

เซิร์ฟเวอร์การพัฒนาควรทำงานบนพอร์ต 4200 ข้อผิดพลาดก่อนหน้าทั้งหมดควรหายไป และการคอมไพล์ควรสำเร็จ ทำได้ดีมาก คุณสร้างแอปพลิเคชัน Angular ที่ทำงานได้โดยไม่ต้องมีโมดูลและมีคอมโพเนนต์แบบสแตนด์อโลนเรียบร้อยแล้ว

จากนั้นคุณจะตกแต่งแอปพลิเคชันเพื่อแสดงรูปภาพบางส่วน

4. แสดงรูปภาพ

แอปพลิเคชันใหม่ของคุณได้รับการออกแบบมาให้เป็นแกลเลอรีรูปภาพและควรแสดงรูปภาพบางส่วน

คอมโพเนนต์เป็นองค์ประกอบหลักที่ใช้สร้างแอป Angular คอมโพเนนต์มี 3 ด้านหลัก

ไฟล์ HTML สำหรับเทมเพลต
ไฟล์ CSS สำหรับสไตล์
ไฟล์ TypeScript สำหรับลักษณะการทำงานของแอป

ย้ายรูปภาพไปยังแอปพลิเคชัน

รูปภาพจะอยู่ในแอปพลิเคชันที่คุณดาวน์โหลดจาก GitHub ไว้ก่อนหน้านี้

ไปที่ไดเรกทอรี src/assets ของโปรเจ็กต์ GitHub
คัดลอกและวางไฟล์ลงในไดเรกทอรี analogue ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app

สร้างเทมเพลต HTML

ไฟล์ app.component.html คือไฟล์เทมเพลต HTML ที่เชื่อมโยงกับคอมโพเนนต์ AppComponent

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ app.component.html
ลบ HTML ที่มีอยู่ทั้งหมด

คัดลอกและวาง 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

บันทึกไฟล์ app.component.html

สร้างไฟล์คำจำกัดความสไตล์

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ styles.css

คัดลอกและวาง 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%;
  }
}

บันทึกไฟล์ styles.css

อัปเดตไฟล์ดัชนี

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ index.html
เพิ่มแบบอักษร Raleway เพื่ออนุญาตให้ทุกหน้าสืบทอดแบบอักษรนี้
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
บันทึกไฟล์ index.html
บันทึกโค้ดและตรวจสอบเบราว์เซอร์ เมื่อเซิร์ฟเวอร์การพัฒนาทำงานอยู่ การเปลี่ยนแปลงจะแสดงในเบราว์เซอร์เมื่อคุณบันทึก
ต่อไปคุณจะสร้างคอมโพเนนต์แบบสแตนด์อโลนใหม่เพื่อส่งความคิดเห็นและแชทกับ Jimbo ทำตาม Codelab นี้ต่อไปเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Jimbo

5. เพิ่มคอมโพเนนต์แบบสแตนด์อโลนใหม่

ดังที่ได้เห็นไปแล้ว คอมโพเนนต์แบบสแตนด์อโลนช่วยให้สร้างแอปพลิเคชัน Angular ได้ง่ายขึ้นโดยลดความจำเป็นในการใช้ NgModules ในส่วนต่อไปนี้ คุณจะสร้างคอมโพเนนต์แบบสแตนด์อโลนใหม่ที่ช่วยให้ผู้ใช้ส่งความคิดเห็นและแชทกับตัวแทนเสมือนได้

สร้างคอมโพเนนต์แบบสแตนด์อโลนใหม่

หากต้องการสร้างคอมโพเนนต์ใหม่นี้ ให้ใช้ Angular CLI อีกครั้ง

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่

ป้อนคำสั่ง 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 ก่อน

ซึ่งเป็นคอมโพเนนต์แบบสแตนด์อโลน คุณจึงเพียงแค่นำเข้าเหมือนกับเป็นโมดูล

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ app.component.ts
นำเข้าคอมโพเนนต์แบบสแตนด์อโลนใหม่
```
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
```

อัปเดตการนำเข้าในคอมโพเนนต์

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

บันทึกไฟล์ app.component.ts

โหลดคอมโพเนนต์แบบ Lazy Loading

เปลี่ยนจากกระบวนทัศน์การโหลดแบบกระตือรือร้นเป็นกระบวนทัศน์การโหลดแบบเลื่อน ซึ่งจะไม่ส่งโค้ดไปยังไคลเอ็นต์จนกว่าคุณจะต้องการ การโหลดแบบ Lazy Loading เป็นแนวทางที่ยอดเยี่ยมในการลดเวลาในการโหลดหน้าเว็บ ปรับปรุงประสิทธิภาพ และปรับปรุงประสบการณ์ของผู้ใช้ เราเตอร์จะจัดการการโหลดแบบ Lazy Loading ซึ่งเหมือนกันสำหรับ ngModule และคอมโพเนนต์แบบสแตนด์อโลน

อัปเดตเทมเพลต HTML ที่เชื่อมโยงกับคอมโพเนนต์ของแอปพลิเคชัน

หากต้องการโหลดคอมโพเนนต์แบบสแตนด์อโลนแบบ Lazy Loading ให้เพิ่มปุ่มลงใน UI ซึ่งจะเปิดใช้งานคอมโพเนนต์เมื่อผู้ใช้เลือกเท่านั้น

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src/app ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ app.component.html
เลื่อนไปที่ส่วนท้ายของไฟล์ แล้วเพิ่มตัวอย่างโค้ดต่อไปนี้ก่อนปิดองค์ประกอบ article
```
<a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet> 
```

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>

บันทึกไฟล์ app.component.html

กำหนดค่าเส้นทาง

ในโปรแกรมแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรี src ในไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ main.ts
นำเข้าเมธอด provideRouter และโมดูลเส้นทาง Angular v 14.2.0 ได้เปิดตัวเมธอด provideRouter ใหม่ ซึ่งช่วยให้เรากำหนดค่าชุดเส้นทางสำหรับแอปพลิเคชันได้
```
import { provideRouter, Routes } from '@angular/router';
```

คัดลอกและวางข้อมูลโค้ดต่อไปนี้ระหว่างการนำเข้ากับคำสั่ง if

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

คัดลอกและวางข้อมูลโค้ดต่อไปนี้ แล้วแทนที่เมธอด 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));

บันทึกไฟล์ main.ts

คอมไพล์และตรวจสอบด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อตรวจสอบว่าเฟรมเวิร์ก Angular โหลดคอมโพเนนต์แบบ Lazy Loading อย่างไร

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และเรียกใช้แอปพลิเคชัน รวมถึงเปิดเว็บเซิร์ฟเวอร์
```
ng serve
```
เซิร์ฟเวอร์การพัฒนาควรทำงานบนพอร์ต 4200

ในเบราว์เซอร์ ให้ดำเนินการต่อไปนี้

ไปที่หน้าต่อไปนี้
```
http://localhost:4200
```
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แล้วเลือกแท็บเครือข่าย
รีเฟรชหน้าเว็บเพื่อแสดงไฟล์หลายไฟล์ แต่ไม่ใช่คอมโพเนนต์ feedback-and-chat หน้าจอของคุณควรตรงกับภาพหน้าจอด้านล่าง
เลือกปุ่มดูข้อมูลเพิ่มเติมเกี่ยวกับบุคคลเหล่านี้เพื่อกำหนดเส้นทางไปยังคอมโพเนนต์แบบสแตนด์อโลน บันทึกควรระบุว่าระบบจะโหลดคอมโพเนนต์ก็ต่อเมื่อคุณเข้าถึงเราเตอร์แบบเต็ม เลื่อนลงไปที่ท้ายรายการเพื่อตรวจสอบว่าโหลดคอมโพเนนต์แล้ว หน้าจอของคุณควรตรงกับภาพหน้าจอด้านล่าง

6. เพิ่ม UI สำหรับแบบฟอร์ม

แบบฟอร์มส่งความคิดเห็นมีช่อง UI สำหรับป้อนข้อมูล 3 ช่องและปุ่มที่ด้านล่าง ฟิลด์ UI สำหรับป้อน 3 รายการ ได้แก่ ชื่อและนามสกุล อีเมลของผู้ส่ง และความคิดเห็น

หากต้องการรองรับ UI ให้เพิ่มแอตทริบิวต์ formControlName ในองค์ประกอบ input ที่เชื่อมโยงกับตัวควบคุมแบบฟอร์ม contactForm แต่ละรายการที่เชื่อมโยงกับช่อง UI อินพุตทั้ง 3 ช่อง

เพิ่มแบบฟอร์มลงในเทมเพลต HTML

เพิ่มแบบฟอร์มลงใน UI เพื่อให้ผู้ใช้ส่งความคิดเห็นได้

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไฟล์ feedback-and-chat.component.html
นำ HTML ที่มีอยู่ออก

คัดลอกและวาง 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>

บันทึกไฟล์ feedback-and-chat.component.html

อัปเดตไฟล์สไตล์สำหรับแบบฟอร์ม

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไฟล์ feedback-and-chat.component.css

คัดลอกและวาง 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;
  }
}

บันทึกไฟล์ feedback-and-chat.component.css

รวบรวมข้อมูลการอัปเดต UI สำหรับแบบฟอร์ม

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และเรียกใช้แอปพลิเคชัน รวมถึงเปิดเว็บเซิร์ฟเวอร์
```
ng serve
```
แอปพลิเคชันของคุณควรคอมไพล์ไม่สำเร็จ ไม่ต้องกังวล คุณต้องผูกแบบฟอร์ม
ในตอนนี้ โปรดตรวจสอบรายการต่อไปนี้
- คุณใช้การเชื่อมโยงพร็อพเพอร์ตี้ formGroup เพื่อเชื่อมโยง contactForm กับองค์ประกอบ form และการเชื่อมโยงเหตุการณ์ ngSubmit
- คําสั่ง FormGroup จะรอเหตุการณ์การส่งที่องค์ประกอบ form ปล่อยออกมา จากนั้นคำสั่ง FormGroup จะปล่อยเหตุการณ์ ngSubmit ที่คุณเชื่อมโยงกับฟังก์ชันเรียกกลับ onSubmit ได้
- ในขั้นตอนถัดไป คุณจะใช้ฟังก์ชันเรียกกลับ onSubmit ในไฟล์ feedback-and-chat.component.ts
จากนั้นคุณจะเชื่อมโยงแบบฟอร์ม

7. เพิ่มการจัดการเหตุการณ์ลงในแบบฟอร์ม

UI สำหรับแบบฟอร์มส่งความคิดเห็นเสร็จสมบูรณ์แล้ว แต่ยังไม่มีการโต้ตอบ การจัดการอินพุตของผู้ใช้ด้วยแบบฟอร์มเป็นรากฐานของแอปพลิเคชันทั่วไปหลายๆ แอป

ในสถานการณ์จริง คุณต้องใช้ตรรกะทางธุรกิจเพื่อดำเนินการต่อไปนี้ให้เสร็จสมบูรณ์

แยกวิเคราะห์อินพุตของผู้ใช้จากโครงสร้าง DOM ที่แสดงผลซึ่งเชื่อมโยงกับคอมโพเนนต์
ตรวจสอบอินพุตของผู้ใช้ ซึ่งรวมถึง CAPTCHA หรือกลไกที่คล้ายกันเพื่อหลีกเลี่ยงไม่ให้บ็อตส่งสแปม
ส่งอีเมลไปยังอีเมลที่กำหนด
แสดงข้อความที่เป็นมิตรกลับไปยังผู้ใช้

ใน Codelab นี้ คุณจะใช้เฉพาะการดำเนินการต่อไปนี้

แยกวิเคราะห์อินพุตของผู้ใช้จากโครงสร้าง DOM ที่แสดงผลซึ่งเชื่อมโยงกับคอมโพเนนต์
แสดงข้อความที่เป็นมิตรกลับไปยังผู้ใช้

คุณควรท้าทายทักษะของตนเองและดำเนินการทั้ง 4 อย่าง

เพิ่มโมเดลแบบฟอร์มส่งข้อความลงในคอมโพเนนต์

สร้างและเพิ่มโมเดลแบบฟอร์มส่งความคิดเห็นในคลาสคอมโพเนนต์ โมเดลแบบฟอร์มจะกำหนดสถานะของแบบฟอร์ม FormBuilder มีวิธีที่สะดวกในการสร้างการควบคุม UI

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไฟล์ feedback-and-chat.component.ts
นำเข้าบริการ FormBuilder และโมดูล ReactiveModule จากแพ็กเกจ @angular/forms บริการนี้มีวิธีที่สะดวกในการสร้างการควบคุม ในขั้นตอนถัดไป เราจะใช้ฟังก์ชัน inject ดังนั้นเราจึงต้องนำเข้าฟังก์ชันดังกล่าวจาก @angular/core ด้วย
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```
นำเข้าโมดูล ReactiveFormsModule
```
imports: [CommonModule,ReactiveFormsModule],
```
นำตัวสร้างต่อไปนี้ออก
```
constructor() { }
```
แทรกFormBuilder service ผ่านฟังก์ชัน inject ที่อยู่ใต้ลายเซ็นของคลาส
```
private formBuilder = inject(FormBuilder);
```
ใช้วิธี group จากบริการ FormBuilder เพื่อสร้างโมเดลฟอร์มเพื่อรวบรวมชื่อ อีเมล และความคิดเห็นจากผู้ใช้
สร้างพร็อพเพอร์ตี้ contactForm ใหม่และใช้วิธีการ group เพื่อตั้งค่าเป็นโมเดลแบบฟอร์ม โมเดลแบบฟอร์มประกอบด้วยช่อง name, email และ comments
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
กำหนดเมธอด onSubmit เพื่อจัดการแบบฟอร์ม ในสถานการณ์จริง เมธอด onSubmit จะช่วยให้ผู้ใช้ส่งข้อความความคิดเห็นไปยังช่างภาพได้โดยใช้อีเมลที่ส่งไปยังอีเมลที่กำหนด ในโค้ดแล็บนี้ คุณจะแสดงข้อมูลที่ผู้ใช้ป้อน ใช้เมธอด reset เพื่อรีเซ็ตแบบฟอร์ม และแสดงข้อความสำเร็จที่ใช้งานง่าย

เพิ่ม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();
  }
}

บันทึกไฟล์ feedback-and-chat.component.ts

รวบรวมและแสดงโมเดลแบบฟอร์มส่งความคิดเห็น

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และเรียกใช้แอปพลิเคชัน รวมถึงเปิดเว็บเซิร์ฟเวอร์
```
ng serve
```
เซิร์ฟเวอร์การพัฒนาควรทำงานบนพอร์ต 4200

ในเบราว์เซอร์ ให้ดำเนินการต่อไปนี้

ไปที่หน้าต่อไปนี้
```
http://localhost:4200
```
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แล้วเลือกแท็บคอนโซล
ป้อนค่าในกล่องข้อความชื่อเต็ม อีเมล และความคิดเห็น
เลือกปุ่มส่ง ข้อความแสดงความสำเร็จควรปรากฏในหน้าเว็บ
ตรวจสอบว่าค่าแสดงในแท็บคอนโซล หน้าจอของคุณควรตรงกับภาพหน้าจอต่อไปนี้คุณติดตั้งใช้งานโค้ดเพื่อเพิ่มแบบฟอร์มส่งข้อความไปยัง UI ของคอมโพเนนต์และแยกวิเคราะห์ข้อมูลที่ผู้ใช้ป้อนเรียบร้อยแล้ว
จากนั้นฝังกล่องโต้ตอบแชทเพื่อให้ผู้เข้าชมแอปพลิเคชันพูดคุยกับ Jimbo ได้ จิมโบเป็นโคอาล่าที่จะมาบอกข้อเท็จจริงเจ๋งๆ เกี่ยวกับสัตว์ป่าให้คุณได้รู้

8. เพิ่มบทสนทนาในแชท

ใช้ประโยชน์จากประสบการณ์การใช้งานอินเทอร์เฟซแบบสนทนา เช่น Dialogflow CX หรือแพลตฟอร์มที่คล้ายกัน เอเจนต์ Dialogflow CX คือเอเจนต์เสมือนที่จัดการการสนทนาพร้อมกันกับมนุษย์ ซึ่งเป็นโมดูลการทำความเข้าใจภาษาธรรมชาติที่จดจำความแตกต่างของภาษามนุษย์และแปลข้อความหรือเสียงของผู้ใช้ปลายทางระหว่างการสนทนาเป็นข้อมูลที่มีโครงสร้างซึ่งแอปและบริการต่างๆ สามารถเข้าใจได้

เราได้สร้างเอเจนต์เสมือนตัวอย่างให้คุณใช้แล้ว สิ่งที่คุณต้องทำในแล็บนี้คือเพิ่มกล่องโต้ตอบแชทลงในคอมโพเนนต์แบบสแตนด์อโลนเพื่อให้ผู้ใช้แอปพลิเคชันโต้ตอบกับบ็อตได้ สำหรับข้อกำหนดนี้ คุณจะใช้ Dialogflow Messenger ซึ่งเป็นการผสานรวมที่สร้างไว้ล่วงหน้าซึ่งมีหน้าต่างกล่องโต้ตอบที่ปรับแต่งได้ เมื่อเปิดแล้ว กล่องโต้ตอบแชทจะปรากฏที่ด้านขวาล่างของหน้าจอและทริกเกอร์เจตนาต้อนรับเริ่มต้นของตัวแทน บ็อตจะทักทายผู้ใช้และเริ่มการสนทนา

การใช้งานต่อไปนี้จะแชร์ข้อเท็จจริงที่น่าสนใจเกี่ยวกับสัตว์ป่ากับผู้ใช้ การติดตั้งใช้งานอื่นๆ สำหรับเอเจนต์เสมือนอาจรองรับกรณีการใช้งานที่ซับซ้อนสำหรับลูกค้า (เช่น เจ้าหน้าที่คอลเซ็นเตอร์ที่เป็นมนุษย์) หลายบริษัทใช้เอเจนต์เสมือนเป็นช่องทางการสื่อสารหลักกับเว็บไซต์ของบริษัท

เพิ่ม Dialogflow Messenger ลงในคอมโพเนนต์

เช่นเดียวกับแบบฟอร์ม กล่องโต้ตอบแชทควรแสดงเมื่อโหลดคอมโพเนนต์แบบสแตนด์อโลนเท่านั้น

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไฟล์ feedback-and-chat.component.ts

คัดลอกและวางองค์ประกอบ 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	ระบุเหตุการณ์ที่กำหนดเองที่ใช้เพื่อทริกเกอร์ความตั้งใจแรกเมื่อเปิดกล่องโต้ตอบแชท
รหัสภาษา	ระบุรหัสภาษาเริ่มต้นสำหรับ Intent แรก
สถานที่	ระบุภูมิภาคที่คุณติดตั้งใช้งานตัวแทน

บันทึกไฟล์ feedback-and-chat.component.ts

แสดงโมเดลแบบฟอร์มส่งความคิดเห็น

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์แอปพลิเคชัน
```
ng serve
```
แอปพลิเคชันของคุณควรคอมไพล์ไม่สำเร็จ บรรทัดคำสั่งควรแสดงข้อความแสดงข้อผิดพลาดต่อไปนี้
จากนั้นเพิ่มสคีมาที่กำหนดเอง

เพิ่มสคีมาที่กำหนดเองลงในคอมโพเนนต์แบบสแตนด์อโลน

องค์ประกอบ df-messanger ไม่ใช่องค์ประกอบที่รู้จัก ซึ่งเป็นคอมโพเนนต์เว็บที่กำหนดเอง ข้อความแสดงข้อผิดพลาดจากเฟรมเวิร์ก Angular แนะนำให้คุณเพิ่ม CUSTOM_ELEMENTS_SCHEMA ลงในคอมโพเนนต์แบบสแตนด์อโลนทั้ง 2 รายการเพื่อไม่ให้ข้อความแสดง

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไฟล์ feedback-and-chat.component.ts

นำเข้าสคีมา CUSTOM_ELEMENTS_SCHEMA

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

เพิ่ม 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]
})

...

คอมโพเนนต์เว็บ 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);
}
```
บันทึกไฟล์ feedback-and-chat.component.ts

รวบรวมและแสดงกล่องโต้ตอบแชทที่อัปเดตแล้ว

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และเรียกใช้แอปพลิเคชัน รวมถึงเปิดเว็บเซิร์ฟเวอร์
```
ng serve
```
เซิร์ฟเวอร์การพัฒนาควรทำงานบนพอร์ต 4200

ในเบราว์เซอร์ ให้ดำเนินการต่อไปนี้

ไปที่หน้าต่อไปนี้
```
http://localhost:4200
```
ไอคอนแชทควรปรากฏที่ด้านล่างของหน้า
เลือกไอคอนแล้วโต้ตอบกับจิมโบ จิมโบจะให้ข้อมูลที่น่าสนใจเกี่ยวกับสัตว์
แอปพลิเคชันทำงานได้อย่างสมบูรณ์

9. ทำให้แอปพลิเคชันใช้งานได้ใน Google App Engine

แอปพลิเคชันทำงานในเครื่องของคุณ ขั้นตอนถัดไปและขั้นตอนสุดท้ายของ Codelab นี้คือการนำไปใช้งานใน Google App Engine

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google App Engine ได้ที่ App Engine

ตั้งค่าสภาพแวดล้อมสำหรับ Google App Engine

หากคุณมีคุณสมบัติตรงตามเงื่อนไขทั้งหมดต่อไปนี้อยู่แล้ว ให้ข้ามขั้นตอนถัดไปและดำเนินการติดตั้งใช้งานแอปพลิเคชัน

สร้างโปรเจ็กต์ Cloud ด้วย App Engine
เปิดใช้ Cloud Build API
ติดตั้ง Google Cloud CLI

ดำเนินการต่อไปนี้ให้เสร็จสมบูรณ์

ลงชื่อเข้าใช้บัญชี Gmail หรือ Google Workspace หากยังไม่มีบัญชี ให้สร้างบัญชี Google
เปิดใช้การเรียกเก็บเงินใน Cloud Console เพื่อให้คุณใช้ทรัพยากรและ API ของระบบคลาวด์ได้ ดูข้อมูลเพิ่มเติมได้ที่สร้าง แก้ไข หรือปิดบัญชีสำหรับการเรียกเก็บเงินใน Cloud ด้วยตนเอง
สร้างโปรเจ็กต์ Google Cloud เพื่อเก็บทรัพยากรแอปพลิเคชัน App Engine และทรัพยากรอื่นๆ ของ Google Cloud ดูข้อมูลเพิ่มเติมได้ที่การสร้างและจัดการโปรเจ็กต์
เปิดใช้ Cloud Build API ใน Cloud Console ดูข้อมูลเพิ่มเติมได้ที่เปิดใช้สิทธิ์เข้าถึง API
ติดตั้ง Google Cloud CLI และเครื่องมือบรรทัดคำสั่ง gcloud ดูข้อมูลเพิ่มเติมได้ที่ติดตั้ง gcloud CLI
เริ่มต้น Google Cloud CLI และตรวจสอบว่าได้กำหนดค่า gcloud ให้ใช้โปรเจ็กต์ Google Cloud ที่คุณต้องการติดตั้งใช้งานแล้ว ดูข้อมูลเพิ่มเติมได้ที่การเริ่มต้น gcloud CLI

สร้างแอปพลิเคชันแบบสแตนด์อโลน

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่ง Angular ต่อไปนี้เพื่อคอมไพล์และสร้างแอปพลิเคชันเวอร์ชันที่พร้อมใช้งานจริง
```
ng build
```

ระบบจะสร้างแอปพลิเคชันเวอร์ชันที่พร้อมใช้งานจริงในไดเรกทอรีย่อย dist ของไดเรกทอรีโปรเจ็กต์ photo-gallery-app

10. ทําให้แอปพลิเคชันใช้งานได้โดยใช้เฟรมเวิร์ก Express.js

โค้ดตัวอย่างใน Codelab นี้ใช้เฟรมเวิร์ก Express.js เพื่อจัดการคำขอ HTTP คุณอาจใช้เฟรมเวิร์กเว็บที่ต้องการก็ได้

ติดตั้งเฟรมเวิร์ก Express.js

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ป้อนคำสั่งต่อไปนี้เพื่อติดตั้งเฟรมเวิร์ก Express.js
```
npm install express --save
```

กำหนดค่าเว็บเซิร์ฟเวอร์

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
สร้างserver.jsไฟล์ใหม่

คัดลอกและวางโค้ดต่อไปนี้

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

บันทึกไฟล์ server.js

แนบเว็บเซิร์ฟเวอร์

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
เปิดไฟล์ package.json
แก้ไขคำสั่งเริ่มต้นเพื่อเรียกใช้โหนดในไฟล์ 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 คือจุดแรกเข้าสำหรับแอปพลิเคชัน
บันทึกไฟล์ package.json

กำหนดค่า App Engine

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
สร้างapp.yamlไฟล์ใหม่
คัดลอกและวางโค้ดต่อไปนี้
```
runtime: nodejs16
service: default
```
ข้อมูลในไฟล์ app.yaml จะระบุการกำหนดค่าสำหรับ App Engine คุณเพียงแค่ต้องระบุรันไทม์และบริการ
บันทึกไฟล์ app.yaml

อัปเดตรายการละเว้นของ gcloud

สร้างไฟล์ .gcloudignore เพื่อให้มั่นใจว่าจะไม่มีการอัปโหลดไดเรกทอรี node_modules ระบบจะไม่สามารถอัปโหลดไฟล์ที่แสดงอยู่ในไฟล์ .gcloudignore

ในตัวแก้ไขโค้ด ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
สร้าง.gcloudignoreไฟล์ใหม่

คัดลอกและวางโค้ดต่อไปนี้

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

บันทึกไฟล์ .gcloudignore

เริ่มต้นแอปพลิเคชัน

ก่อนที่จะติดตั้งใช้งานแอปพลิเคชัน ให้เริ่มต้นใช้งานด้วยโปรเจ็กต์ของคุณและเลือกภูมิภาคที่เชื่อมโยง

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่งต่อไปนี้เพื่อเริ่มต้นแอปพลิเคชัน
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
เมื่อได้รับข้อความแจ้ง ให้เลือกภูมิภาคที่คุณต้องการวางแอปพลิเคชัน App Engine

ทำให้แอปพลิเคชันใช้งานได้

ในหน้าต่างบรรทัดคำสั่ง ให้ดำเนินการต่อไปนี้

ไปที่ไดเรกทอรีโปรเจ็กต์ photo-gallery-app ใหม่
ป้อนคำสั่งต่อไปนี้เพื่อทำให้แอปพลิเคชันใช้งานได้
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
ที่พรอมต์ ให้ยืนยันการดำเนินการ หลังจากที่คำสั่งการติดตั้งใช้งาน gcloud เสร็จสมบูรณ์แล้ว ระบบจะแสดง URL เพื่อเข้าถึงแอปพลิเคชัน
ป้อนคำสั่งต่อไปนี้เพื่อเปิดแท็บใหม่ในเบราว์เซอร์
```
gcloud app browse
```

11. ขอแสดงความยินดี

ยินดีด้วย คุณสร้างแกลเลอรีรูปภาพตัวอย่างโดยใช้ Angular v14 และทำให้ใช้งานได้บน App Engine เรียบร้อยแล้ว

คุณทดลองใช้ฟีเจอร์คอมโพเนนต์แบบสแตนด์อโลนและการโหลดแบบ Lazy Loading คุณสร้างฟีเจอร์ส่งข้อความแบบฟอร์มเพื่อแสดงความคิดเห็น นอกจากนี้ คุณยังเพิ่มกล่องโต้ตอบแชทกับตัวแทนเสมือน Dialogflow CX โดยใช้ Dialogflow Messenger ได้สำเร็จด้วย ทำได้ดีมาก

ขั้นตอนถัดไป

ตอนนี้คุณได้สร้างแอปพลิเคชันพื้นฐานเสร็จแล้ว ให้ปรับปรุงแอปพลิเคชันโดยใช้แนวคิดต่อไปนี้

แบบฟอร์มไม่ได้ส่งความคิดเห็นจริง ให้ปรับโครงสร้างใหม่เพื่อเพิ่มตรรกะทางธุรกิจในการส่งอีเมล
ในสถานการณ์จริง คุณควรตรวจสอบอินพุตของผู้ใช้และรวม Captcha หรือกลไกที่คล้ายกันเพื่อหลีกเลี่ยงการส่งสแปมของบ็อต
สร้าง Agent ใหม่และดูวิธีออกแบบโฟลว์การสนทนาใน Dialogflow CX

ทดลองใช้เฟรมเวิร์ก Angular ต่อไปและสนุกกับการใช้งาน

ล้างข้อมูลและลบโปรเจ็กต์ที่อยู่ในระบบคลาวด์

คุณจะเก็บโปรเจ็กต์ Cloud ไว้หรือลบออกก็ได้เพื่อหยุดการเรียกเก็บเงินสำหรับทรัพยากรทั้งหมดที่ใช้ในโปรเจ็กต์

ในเบราว์เซอร์ ให้ดำเนินการต่อไปนี้

ลงชื่อเข้าใช้บัญชี Gmail หรือ Google Workspace
ในคอนโซล Google Cloud ให้เลือกปุ่มการตั้งค่า IAM และผู้ดูแลระบบ
ในหน้า IAM และผู้ดูแลระบบ ให้เลือกแท็บจัดการทรัพยากร
ในหน้าจัดการทรัพยากร ให้ไปที่โปรเจ็กต์ที่ต้องการลบแล้วเลือกโปรเจ็กต์นั้น เลือกปุ่มลบเพื่อเปิดหน้าต่างกล่องโต้ตอบ
ในหน้าต่างกล่องโต้ตอบ ให้ป้อนรหัสโปรเจ็กต์ เลือกปุ่มปิดเพื่อลบโปรเจ็กต์