เกี่ยวกับ Codelab นี้
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หากต้องการยืนยันเวอร์ชันของ Node.js ในคอมพิวเตอร์เครื่องที่ใช้ ให้เรียกใช้คำสั่ง
เวอร์ชันโหนด
รองรับโดย Angular
14.15 ขึ้นไป
รองรับ
16.10 ขึ้นไป
รองรับ
18.1.0
ไม่รองรับ
node
ต่อไปนี้จากหน้าต่างบรรทัดคำสั่งnode -v
- เครื่องมือแก้ไขโค้ดหรือ IDE ใช้สำหรับเปิดและแก้ไขไฟล์ Visual Studio Code หรือตัวแก้ไขโค้ดอื่นตามต้องการ
ติดตั้ง Angular CLI
หลังจากกำหนดค่าทรัพยากร Dependency ทั้งหมดแล้ว ให้เรียกใช้คำสั่ง npm
ต่อไปนี้เพื่อติดตั้ง Angular CLI จากหน้าต่างบรรทัดคำสั่ง
npm install --global @angular/cli
หากต้องการยืนยันว่าการกําหนดค่าถูกต้อง ให้เรียกใช้คําสั่ง Angular ต่อไปนี้จากบรรทัดคําสั่ง
ng version
หากคําสั่ง 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
ในตัวอย่างโค้ดต่อไปนี้ลงที่ใดก็ได้ในหน้า Dialogflow จะสร้างแอตทริบิวต์สําหรับองค์ประกอบ<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>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: defaultapp.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 และผู้ดูแลระบบ ให้เลือกแท็บจัดการทรัพยากร
- ในหน้าจัดการทรัพยากร ให้ไปที่โปรเจ็กต์ที่ต้องการลบแล้วเลือกโปรเจ็กต์นั้น เลือกปุ่มลบเพื่อเปิดหน้าต่างโต้ตอบ
- ในหน้าต่างโต้ตอบ ให้ป้อนรหัสโปรเจ็กต์ เลือกปุ่มปิดเพื่อลบโปรเจ็กต์