หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

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

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

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

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

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

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

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

วิธีใช้ Angular CLI เพื่อสร้างโปรเจ็กต์ใหม่
วิธีใช้คอมโพเนนต์สแตนด์อโลนของ Angular เพื่อปรับปรุงการพัฒนาแอป Angular ให้มีประสิทธิภาพยิ่งขึ้น
วิธีสร้างคอมโพเนนต์แบบสแตนด์อโลน ซึ่งเป็นวิธีการสร้าง UI และเพิ่มตรรกะทางธุรกิจ
วิธีสร้างแอปพลิเคชันโดยใช้คอมโพเนนต์แบบสแตนด์อโลน
วิธีโหลดคอมโพเนนต์แบบสแตนด์อโลนแบบ Lazy Load
วิธีฝังกล่องโต้ตอบแชทในคอมโพเนนต์แบบสแตนด์อโลนโดยใช้ 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. การตั้งค่าสภาพแวดล้อม

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

หากต้องการทํา 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

หลังจากกำหนดค่าทรัพยากร Dependency ทั้งหมดแล้ว ให้เรียกใช้คำสั่ง 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 ในแอปพลิเคชันใหม่ของคุณไม่จำเป็นสำหรับโค้ดแล็บนี้

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

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

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

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

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

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

ไปที่ไดเรกทอรี 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';
```
นำโค้ด Bootstrap ต่อไปนี้ออก เนื่องจากคุณไม่มีโมดูลแอปพลิเคชันแล้ว
```
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 โปรดทำตามโค้ดแล็บนี้ต่อเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Jimbo

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

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

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

หากต้องการสร้างคอมโพเนนต์ใหม่นี้ ให้ใช้ 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 ให้เพิ่มปุ่มลงใน 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 และโมดูล Routes 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

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

ไปที่ไดเรกทอรีโปรเจ็กต์ 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 ที่คุณเชื่อมโยงกับฟังก์ชัน Callback ของ onSubmit ได้
- ในขั้นตอนถัดไป คุณจะใช้ฟังก์ชัน Callback onSubmit ในไฟล์ feedback-and-chat.component.ts
ถัดไป คุณจะต้องเชื่อมโยงแบบฟอร์ม

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

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

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

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

ในโค้ดแล็บนี้ คุณจะใช้เฉพาะการดําเนินการต่อไปนี้

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

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

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

เพิ่ม 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 ของ Dialogflow
ชื่อแชท	ระบบจะป้อนข้อมูลไว้ให้ล่วงหน้า ระบุเนื้อหาที่จะแสดงที่ด้านบนของกล่องโต้ตอบแชท ระบบจะป้อนข้อมูลชื่อตัวแทนไว้ให้ตั้งแต่ต้น แต่คุณควรปรับแต่ง
DF-CX	บ่งบอกว่าการโต้ตอบเกิดขึ้นกับตัวแทนฝ่ายดูแลลูกค้า ตั้งค่าเป็น `true`
Intent	ระบุเหตุการณ์ที่กำหนดเองที่ใช้เพื่อเรียก Intent แรกเมื่อกล่องโต้ตอบแชทเปิดขึ้น
language-code	ระบุรหัสภาษาเริ่มต้นสำหรับ 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
```
ไอคอนแชทจะปรากฏที่ด้านล่างของหน้า
เลือกไอคอนและโต้ตอบกับ Jimbo.Jimbo เพื่อบอกข้อมูลเก๋ๆ เกี่ยวกับสัตว์
แอปพลิเคชันนี้ทำงานได้อย่างสมบูรณ์

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

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

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

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

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

สร้างโปรเจ็กต์ที่อยู่ในระบบคลาวด์ด้วย 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

โค้ดตัวอย่างในโค้ดแล็บนี้ใช้เฟรมเวิร์ก 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 ต่อและสนุกไปกับการใช้งาน

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

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

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

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