Bắt đầu với các Thành phần độc lập

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng thư viện ảnh về động vật hoang dã bằng Angular v14. Ứng dụng hoàn chỉnh sẽ hiển thị một bộ ảnh, kèm theo biểu mẫu gửi tin nhắn để liên hệ với nhiếp ảnh gia và cửa sổ trò chuyện để tìm hiểu những thông tin thú vị về những con vật có trong ảnh.

Bạn tạo mọi thứ trong ứng dụng bằng cách sử dụng Angular v14 và tính năng thành phần độc lập mới.

Tất cả nội dung tham chiếu đến khung Angular và Angular CLI đều phản ánh Angular phiên bản 14. Thành phần độc lập là một tính năng xem trước của Angular v14, vì vậy, bạn phải tạo một ứng dụng hoàn toàn mới bằng Angular v14. Các thành phần độc lập cung cấp một cách đơn giản để xây dựng ứng dụng Angular. Các thành phần độc lập, lệnh độc lập và quy trình độc lập nhằm đơn giản hoá trải nghiệm soạn thảo bằng cách giảm nhu cầu sử dụng NgModules. Các thành phần độc lập có thể khai thác tối đa hệ sinh thái thư viện Angular hiện có.

Đây là ứng dụng mà bạn đang xây dựng hôm nay.

Đơn đăng ký đã hoàn tất

Kiến thức bạn sẽ học được

  • Cách sử dụng Angular CLI để thiết lập một dự án mới
  • Cách sử dụng các thành phần độc lập của Angular để đơn giản hoá quá trình phát triển ứng dụng Angular
  • Cách tạo một thành phần độc lập; tức là cách tạo giao diện người dùng và thêm một số logic kinh doanh
  • Cách khởi động một ứng dụng bằng thành phần độc lập
  • Cách tải lười một thành phần độc lập
  • Cách nhúng hộp thoại trò chuyện vào một thành phần độc lập bằng Dialogflow Messenger
  • Cách triển khai ứng dụng Angular cho Google Cloud App Engine bằng Google Cloud CLI (gcloud)

Bạn cần có

  • Tài khoản Gmail hoặc Google Workspace
  • Kiến thức cơ bản về các chủ đề sau
    • HTML. Cách tạo một phần tử.
    • CSS và less. Cách sử dụng bộ chọn CSS và tạo tệp định nghĩa kiểu.
    • TypeScript hoặc JavaScript. Cách tương tác với cấu trúc DOM.
    • git và GitHub. Cách phân nhánh và nhân bản kho lưu trữ.
    • Giao diện dòng lệnh, chẳng hạn như bash hoặc zsh. Cách điều hướng các thư mục và chạy lệnh.

2. Thiết lập môi trường

Thiết lập môi trường cục bộ

Để hoàn tất lớp học lập trình này, bạn phải cài đặt phần mềm sau trên máy tính cục bộ.

  • Phiên bản LTS đang hoạt động hoặc LTS bảo trì của Node.js. Dùng để cài đặt khung Angular và Angular CLI.

    Phiên bản nút

    Được Angular hỗ trợ

    14.15 trở lên

    Có thể làm

    16.10 trở lên

    Có thể làm

    18.1.0

    Không thể làm

    Để xác minh phiên bản Node.js trên máy tính cục bộ, hãy chạy lệnh node sau đây từ cửa sổ dòng lệnh.
    node -v
  • Một trình soạn thảo mã hoặc IDE. Dùng để mở và chỉnh sửa tệp.Visual Studio Code hoặc một trình soạn thảo mã khác mà bạn chọn.

Cài đặt Angular CLI

Sau khi bạn định cấu hình tất cả các phần phụ thuộc, hãy chạy lệnh npm sau để cài đặt Angular CLI từ cửa sổ dòng lệnh.

npm install --global @angular/cli

Để xác nhận rằng cấu hình của bạn đã chính xác, hãy chạy lệnh Angular sau từ dòng lệnh.

ng version

Nếu lệnh Angular hoàn tất thành công, bạn sẽ nhận được thông báo tương tự như ảnh chụp màn hình sau.

Đầu ra thiết bị đầu cuối của phiên bản góc

Mã nguồn và hình ảnh

Bạn sẽ tạo toàn bộ ứng dụng từ đầu và lớp học lập trình từng bước này sẽ hỗ trợ bạn. Xin lưu ý rằng kho lưu trữ GitHub chứa mã hoàn chỉnh. Nếu bạn gặp khó khăn, hãy xem lại mã hoàn thiện và hình ảnh hiển thị trên trang thư viện.

Để tải mã nguồn xuống.

  1. Trong trình duyệt, hãy chuyển đến trang sau.
    https://github.com/angular/codelabs/tree/standalone-components
  2. Trong cửa sổ dòng lệnh, hãy phân nhánh và sao chép kho lưu trữ.

Trong bước tiếp theo, hãy tạo ứng dụng Thư viện ảnh của bạn.

3. Tạo ứng dụng mới

Để tạo ứng dụng khởi động ban đầu, hãy hoàn thành các thao tác sau.

Sử dụng Giao diện dòng lệnh (CLI) của Angular để tạo không gian làm việc mới. Để tìm hiểu thêm về Angular CLI và khung Angular, hãy truy cập vào angular.io.

Tạo dự án mới

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Nhập lệnh Angular sau để tạo một dự án Angular mới có tên là photo-gallery-app.
    ng new photo-gallery-app
  2. Ở mỗi lời nhắc, hãy chấp nhận lựa chọn mặc định.Khung Angular sẽ cài đặt các gói và phần phụ thuộc bắt buộc. Quá trình này có thể mất vài phút.

Sau khi Angular CLI hoàn tất, bạn sẽ có một không gian làm việc mới trong Angular và một ứng dụng đơn giản sẵn sàng chạy.

Ứng dụng mới của bạn có cấu trúc giống như một ứng dụng Angular tiêu chuẩn. NgModule trong ứng dụng mới của bạn không cần thiết cho lớp học lập trình này.

Xoá mô-đun ứng dụng

Để xoá mô-đun ứng dụng, hãy hoàn tất thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Xoá tệp app.module.ts.

Sau khi xoá mô-đun ứng dụng, bạn sẽ không có mô-đun nào trong ứng dụng. Ứng dụng của bạn chỉ có một thành phần, đó là thành phần ứng dụng. Bạn phải khai báo thành phần này là độc lập.

Khai báo thành phần độc lập

Trong một trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp app.component.ts.
  3. Thêm tham số và giá trị sau vào danh sách các trình trang trí.
    standalone: true
    Tệp app.component.ts phải khớp gần như hoàn toàn với ví dụ về mã sau.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  4. Lưu tệp app.component.ts.

Biên dịch ứng dụng độc lập mới

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới của bạn
  2. Nhập lệnh Angular sau để biên dịch ứng dụng mới.
    ng serve

Ứng dụng của bạn sẽ không biên dịch được. Đừng lo, bạn chỉ cần khắc phục một vài vấn đề nữa.

Sử dụng API Tự khởi động

Để cho phép ứng dụng chạy mà không cần NgModule, bạn phải sử dụng một thành phần độc lập làm thành phần gốc bằng cách sử dụng API bootstrapApplication.

Xoá các tệp tham chiếu đến mô-đun ứng dụng

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src trong thư mục dự án photo-gallery-app mới
  2. Mở tệp main.ts.
  3. Xoá mã nhập sau đây vì bạn không còn mô-đun ứng dụng nữa.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Xoá mã khởi động sau đây vì bạn không còn mô-đun ứng dụng nữa.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    Tệp main.ts phải khớp với ví dụ về mã sau.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

Thêm thành phần bootstrapApplication

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp main.ts.
  3. Nhập thành phần bootstrapApplication từ dịch vụ @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Thêm mã sau để khởi động ứng dụng.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Nhập thành phần và các thư viện bắt buộc.
    import { AppComponent } from './app/app.component';
    Tệp main.ts phải khớp với ví dụ về mã sau.
    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));

Thêm bộ định tuyến và mô-đun phổ biến

Để sử dụng Trình định tuyến và các tính năng mô-đun phổ biến khác, bạn phải trực tiếp nhập từng mô-đun vào thành phần.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp app.component.ts.
  3. Nhập các mô-đun bắt buộc vào thành phần.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Thêm các lệnh nhập vào thành phần.
    imports: [CommonModule, RouterModule],
    Tệp app.component.ts phải khớp với mã ví dụ sau.
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. Lưu tệp app.component.ts.

Biên dịch và chạy ứng dụng độc lập mới

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để biên dịch và chạy ứng dụng cũng như mở máy chủ web. Bạn có thể cần đóng IDE trước khi chạy ứng dụng để xoá mọi lỗi biên dịch.
    ng serve

Máy chủ phát triển của bạn phải chạy trên cổng 4200. Tất cả lỗi trước đó sẽ biến mất và quá trình biên dịch sẽ thành công. Tốt lắm! Bạn đã tạo thành công một ứng dụng Angular có thể chạy mà không cần mô-đun và với một thành phần độc lập.

  1. Tiếp theo, bạn sẽ làm đẹp ứng dụng để hiển thị một số ảnh.

4. Hiển thị ảnh

Ứng dụng mới của bạn được thiết kế để trở thành một thư viện ảnh và sẽ hiển thị một số ảnh.

Thành phần là các khối xây dựng cốt lõi cho ứng dụng Angular. Các thành phần có 3 khía cạnh chính.

  • Tệp HTML cho mẫu
  • Tệp CSS cho các kiểu
  • Tệp TypeScript cho hành vi của ứng dụng

Di chuyển ảnh vào ứng dụng của bạn

Hình ảnh được cung cấp trong ứng dụng mà bạn đã tải xuống từ GitHub trước đó.

  1. Chuyển đến thư mục src/assets của dự án GitHub.
  2. Sao chép và dán các tệp vào thư mục analogue trong thư mục dự án photo-gallery-app.

Tạo mẫu HTML

Tệp app.component.html là tệp mẫu HTML liên kết với thành phần AppComponent.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp app.component.html.
  3. Xoá tất cả HTML hiện có.
  4. Sao chép và dán HTML từ ví dụ về mã sau.
    <article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article
  5. Lưu tệp app.component.html.

Tạo tệp định nghĩa kiểu

Trong một trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp styles.css.
  3. Sao chép và dán CSS từ mã ví dụ sau.
    article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
  4. Lưu tệp styles.css

Cập nhật tệp chỉ mục

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp index.html.
  3. Thêm phông chữ Raleway để cho phép tất cả các trang kế thừa phông chữ đó.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Lưu tệp index.html.
  5. Lưu mã và kiểm tra trình duyệt của bạn. Khi máy chủ phát triển đang chạy, các thay đổi sẽ được phản ánh trong trình duyệt khi bạn lưu.
  6. Tiếp theo, bạn sẽ tạo một thành phần độc lập mới để gửi ý kiến phản hồi và trò chuyện với Jimbo. Hãy tiếp tục lớp học lập trình này để tìm hiểu thêm về Jimbo.

5. Thêm một thành phần độc lập mới

Như bạn đã thấy cho đến nay, các thành phần độc lập cung cấp một cách đơn giản để xây dựng ứng dụng Angular bằng cách giảm nhu cầu sử dụng NgModules. Trong các phần sau, bạn sẽ tạo một thành phần độc lập mới cho phép người dùng gửi ý kiến phản hồi và trò chuyện với một nhân viên hỗ trợ ảo.

Tạo thành phần độc lập mới

Để tạo thành phần mới này, bạn sẽ sử dụng lại Angular CLI.

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để tạo một thành phần mới có tên là feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    Bảng sau đây mô tả các phần của lệnh.

    Phần

    Thông tin chi tiết

    ng

    Xác định tất cả các lệnh Angular CLI cho khung Angular

    generate component

    Tạo khung cho một thành phần mới

    feedback-and-chat

    Tên của thành phần

    --standalone

    Yêu cầu khung Angular tạo một thành phần độc lập

Nhập thành phần độc lập mới

Để sử dụng thành phần độc lập mới, trước tiên, bạn phải thêm thành phần này vào mảng imports trong tệp app.components.ts.

Đây là một thành phần độc lập, vì vậy, bạn chỉ cần nhập thành phần này như thể đó là một mô-đun.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp app.component.ts.
  3. Nhập thành phần độc lập mới.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Cập nhật các lệnh nhập trong thành phần.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    Tệp app.component.ts phải khớp với ví dụ về mã sau.
    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. Lưu tệp app.component.ts.

Tải từng phần thành phần

Chuyển từ mô hình tải nhanh sang mô hình tải lười, trong đó mã không được gửi đến ứng dụng cho đến khi bạn cần. Tải từng phần là một phương pháp hiệu quả để giảm thời gian tải trang, cải thiện hiệu suất và trải nghiệm người dùng. Bộ định tuyến xử lý tải từng phần, giống như đối với ngModule và một thành phần độc lập.

Cập nhật mẫu HTML liên kết với thành phần ứng dụng

Để tải từng phần thành phần độc lập, hãy thêm một nút vào giao diện người dùng chỉ kích hoạt thành phần đó khi người dùng chọn thành phần đó.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src/app trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp app.component.html.
  3. Di chuyển đến cuối tệp rồi thêm ví dụ về mã sau trước khi đóng phần tử article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. Tệp app.component.html phải khớp với ví dụ về mã sau.
    <article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>
  5. Lưu tệp app.component.html.

Định cấu hình tuyến

Trong một trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục src trong thư mục dự án photo-gallery-app mới.
  2. Mở tệp main.ts
  3. Nhập phương thức provideRouter và mô-đun Routes (Tuyến). Angular phiên bản 14.2.0 đã giới thiệu một phương thức provideRouter mới cho phép chúng ta định cấu hình một tập hợp các tuyến đường cho ứng dụng.
    import { provideRouter, Routes } from '@angular/router';
  4. Sao chép và dán đoạn mã sau đây giữa các lệnh nhập và câu lệnh if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Sao chép và dán đoạn mã sau rồi thay thế phương thức bootstrapApplication.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    Tệp main.ts phải khớp với mã ví dụ sau đây.
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

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

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
  6. Lưu tệp main.ts.

Biên dịch và xem lại bằng Công cụ cho nhà phát triển Chrome

Sử dụng Công cụ cho nhà phát triển Chrome để xem cách khung Angular tải từng phần thành phần.

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để biên dịch và chạy ứng dụng cũng như mở máy chủ web.
    ng serve
    Máy chủ phát triển của bạn sẽ chạy trên cổng 4200.

Trong trình duyệt, hãy hoàn tất các thao tác sau.

  1. Chuyển đến trang sau.
    http://localhost:4200
  2. Mở Công cụ cho nhà phát triển Chrome rồi chọn thẻ Mạng.
  3. Làm mới trang để hiển thị một số tệp, nhưng không phải thành phần feedback-and-chat.Màn hình của bạn phải khớp với ảnh chụp màn hình sau.Ảnh chụp màn hình ứng dụng trong bảng điều khiển Công cụ cho nhà phát triển của Chrome đang mở
  4. Chọn nút Tìm hiểu thêm về những người này! để chuyển đến thành phần độc lập.Nhật ký sẽ cho biết rằng thành phần này chỉ được tải khi bạn nhấn vào trình định tuyến đầy đủ. Di chuyển xuống cuối danh sách để kiểm tra xem thành phần đã được tải hay chưa. Màn hình của bạn phải khớp với ảnh chụp màn hình sau.Ảnh chụp màn hình ứng dụng với bảng điều khiển công cụ phát triển Chrome đang mở, minh hoạ thành phần tải lười

6. Thêm giao diện người dùng cho biểu mẫu

Biểu mẫu gửi ý kiến phản hồi có 3 trường giao diện người dùng để nhập thông tin và một nút ở dưới cùng. Ba trường nhập trên giao diện người dùng là họ tên đầy đủ, địa chỉ email của người gửi và nhận xét.

Để hỗ trợ giao diện người dùng, hãy thêm thuộc tính formControlName vào phần tử input để liên kết với từng thành phần điều khiển biểu mẫu contactForm liên kết với từng trường trong số 3 trường đầu vào trên giao diện người dùng.

Thêm biểu mẫu vào mẫu HTML

Thêm một biểu mẫu vào giao diện người dùng để cho phép người dùng gửi ý kiến phản hồi.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến tệp feedback-and-chat.component.html.
  2. Xoá HTML hiện có.
  3. Sao chép và dán HTML từ ví dụ về mã sau.
    <article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>
  4. Lưu tệp feedback-and-chat.component.html.

Cập nhật tệp kiểu cho biểu mẫu

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến tệp feedback-and-chat.component.css.
  2. Sao chép và dán CSS từ đoạn mã ví dụ sau.
    /*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
  3. Lưu tệp feedback-and-chat.component.css.

Biên dịch nội dung cập nhật giao diện người dùng cho biểu mẫu

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để biên dịch và chạy ứng dụng cũng như mở máy chủ web.
    ng serve
    Ứng dụng của bạn sẽ không biên dịch được. Đừng lo, bạn cần liên kết biểu mẫu.
  3. Hiện tại, hãy xem xét các mục sau.
    • Bạn sử dụng tính năng liên kết thuộc tính formGroup để liên kết contactForm với phần tử form và liên kết sự kiện ngSubmit
    • Lệnh FormGroup theo dõi sự kiện gửi do phần tử form phát ra. Sau đó, lệnh FormGroup sẽ phát ra một sự kiện ngSubmit mà bạn có thể liên kết với hàm gọi lại onSubmit.
    • Ở bước sau, bạn sẽ triển khai hàm callback onSubmit trong tệp feedback-and-chat.component.ts
  4. Tiếp theo, bạn sẽ liên kết biểu mẫu.

7. Thêm tính năng xử lý sự kiện vào biểu mẫu

Giao diện người dùng cho biểu mẫu gửi ý kiến phản hồi đã hoàn tất, nhưng thiếu tính năng tương tác. Xử lý dữ liệu đầu vào của người dùng bằng biểu mẫu là nền tảng của nhiều ứng dụng phổ biến.

Trong trường hợp thực tế, bạn cần triển khai logic nghiệp vụ để hoàn tất các thao tác sau.

  1. Phân tích cú pháp dữ liệu đầu vào của người dùng từ cấu trúc DOM đã kết xuất được liên kết với thành phần.
  2. Xác thực hoạt động đầu vào của người dùng, bao gồm hình ảnh xác thực (captcha) hoặc một cơ chế tương tự để tránh bot gửi nội dung không liên quan.
  3. Gửi email đến một địa chỉ email được chỉ định.
  4. Hiển thị một thông báo thân thiện cho người dùng.

Trong lớp học lập trình này, bạn chỉ triển khai các thao tác sau.

  1. Phân tích cú pháp dữ liệu đầu vào của người dùng từ cấu trúc DOM đã kết xuất được liên kết với thành phần.
  2. Hiển thị một thông báo thân thiện cho người dùng.

Bạn nên thử thách các kỹ năng của mình và thực hiện cả bốn hành động.

Thêm mô hình biểu mẫu gửi tin nhắn vào thành phần

Tạo và thêm mô hình gửi biểu mẫu phản hồi trong lớp thành phần. Mô hình biểu mẫu xác định trạng thái của biểu mẫu. Dịch vụ FormBuilder cung cấp các phương thức thuận tiện để tạo thành phần điều khiển giao diện người dùng.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến tệp feedback-and-chat.component.ts.
  2. Nhập dịch vụ FormBuilder và mô-đun ReactiveModule từ gói @angular/forms. Dịch vụ này cung cấp các phương thức thuận tiện để tạo các thành phần điều khiển. Trong bước tiếp theo, chúng ta sẽ tận dụng hàm inject, vì vậy chúng ta cần nhập hàm đó từ @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Nhập mô-đun ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Xoá hàm khởi tạo sau đây.
    constructor() { }
  5. Chèn dịch vụ FormBuilder thông qua hàm inject ngay bên dưới chữ ký lớp.
    private formBuilder = inject(FormBuilder);
    Sử dụng phương thức group từ dịch vụ FormBuilder để tạo mô hình biểu mẫu nhằm thu thập tên, địa chỉ email và nhận xét của người dùng.
  6. Tạo thuộc tính contactForm mới và sử dụng phương thức group để đặt thuộc tính đó thành mô hình biểu mẫu.Mô hình biểu mẫu chứa các trường name, email và comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Xác định phương thức onSubmit để xử lý biểu mẫu.Trong trường hợp thực tế, phương thức onSubmit cho phép người dùng gửi thông báo phản hồi cho nhiếp ảnh gia bằng email gửi đến địa chỉ email đã chỉ định.Trong lớp học lập trình này, bạn cho thấy thông tin người dùng nhập vào, sử dụng phương thức reset để đặt lại biểu mẫu và hiển thị thông báo thành công thân thiện với người dùng.
  7. Thêm phương thức onSubmit mới và đặt biến showMsg thành true sau khi khởi tạo.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    Tệp feedback-and-chat.component.ts phải khớp với ví dụ về mã sau.
    import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}
  8. Lưu tệp feedback-and-chat.component.ts.

Biên dịch và hiển thị mô hình biểu mẫu gửi phản hồi

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để biên dịch và chạy ứng dụng cũng như mở máy chủ web.
    ng serve
  3. Máy chủ phát triển của bạn sẽ chạy trên cổng 4200.

Trong trình duyệt, hãy hoàn tất các thao tác sau.

  1. Chuyển đến trang sau.
    http://localhost:4200
  2. Mở Công cụ dành cho nhà phát triển Chrome rồi chọn thẻ Bảng điều khiển.
  3. Nhập giá trị bất kỳ vào hộp văn bản Tên đầy đủ, Email và Nhận xét.
  4. Chọn nút Gửi.Thông báo thành công sẽ xuất hiện trên trang.
  5. Xác minh các giá trị hiển thị trong thẻ Console (Bảng điều khiển). Màn hình của bạn phải khớp với ảnh chụp màn hình sau.Cửa sổ trình duyệt có bảng điều khiển hiển thị dữ liệu json đã nhập vào biểu mẫuBạn đã triển khai thành công mã để thêm biểu mẫu send message (gửi thông báo) vào giao diện người dùng của thành phần và phân tích cú pháp dữ liệu đầu vào của người dùng.
  6. Tiếp theo, bạn nhúng một hộp thoại trò chuyện để cho phép khách truy cập ứng dụng trò chuyện với Jimbo. Jimbo là một chú gấu túi, qua đó bạn sẽ tìm hiểu được một số thông tin thú vị về động vật hoang dã.

8. Thêm hộp thoại trò chuyện

Tận dụng kinh nghiệm về giao diện trò chuyện, chẳng hạn như Dialogflow CX hoặc các nền tảng tương tự. Nhân viên hỗ trợ Dialogflow CX là một nhân viên hỗ trợ ảo xử lý các cuộc trò chuyện đồng thời với con người. Đây là mô-đun hiểu ngôn ngữ tự nhiên, nhận ra các sắc thái của ngôn ngữ con người và dịch văn bản hoặc âm thanh của người dùng cuối trong cuộc trò chuyện thành dữ liệu có cấu trúc mà các ứng dụng và dịch vụ có thể hiểu được.

Chúng tôi đã tạo một trợ lý ảo mẫu để bạn sử dụng. Việc bạn cần làm trong lớp học lập trình này là thêm hộp thoại trò chuyện vào thành phần độc lập để cho phép người dùng ứng dụng tương tác với bot. Để đáp ứng yêu cầu này, bạn sẽ tận dụng Dialogflow Messenger, một tính năng tích hợp sẵn cung cấp cửa sổ hộp thoại có thể tuỳ chỉnh. Khi mở, hộp thoại trò chuyện sẽ xuất hiện ở phía dưới bên phải màn hình và kích hoạt ý định chào mừng mặc định của trợ lý. Bot chào người dùng và bắt đầu cuộc trò chuyện.

Cách triển khai sau đây sẽ chia sẻ với người dùng những thông tin thú vị về động vật hoang dã. Các phương thức triển khai khác cho nhân viên hỗ trợ ảo có thể giải quyết các trường hợp sử dụng phức tạp cho khách hàng (chẳng hạn như nhân viên hỗ trợ trực điện thoại). Nhiều công ty sử dụng trợ lý ảo làm kênh chính để giao tiếp với trang web của công ty.

Thêm Dialogflow Messenger vào thành phần của bạn

Giống như biểu mẫu, hộp thoại trò chuyện sẽ chỉ hiển thị khi thành phần độc lập được tải.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến tệp feedback-and-chat.component.ts.
  2. Sao chép và dán phần tử df-messenger trong mã ví dụ sau vào bất kỳ vị trí nào trên trang.
    <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 tạo các thuộc tính cho phần tử df-messenger khi bạn chọn tích hợp Dialogflow Messenger.

    Thuộc tính

    Thông tin chi tiết

    agent-id

    Được điền sẵn. Chỉ định giá trị nhận dạng duy nhất của tác nhân Dialogflow.

    tiêu đề tin nhắn trò chuyện

    Được điền sẵn. Chỉ định nội dung hiển thị ở đầu hộp thoại trò chuyện. Ban đầu, trường này được điền sẵn tên của nhân viên hỗ trợ, nhưng bạn nên tuỳ chỉnh trường này.

    df-cx

    Cho biết rằng hoạt động tương tác này diễn ra với một nhân viên hỗ trợ CX. Đặt giá trị thành true.

    cơ chế

    Chỉ định sự kiện tuỳ chỉnh dùng để kích hoạt ý định đầu tiên khi hộp thoại trò chuyện mở ra.

    language-code

    Chỉ định mã ngôn ngữ mặc định cho ý định đầu tiên.

    vị trí

    Chỉ định khu vực mà bạn triển khai nhân viên hỗ trợ.

  3. Lưu tệp feedback-and-chat.component.ts.

Hiển thị mô hình biểu mẫu gửi phản hồi

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau để biên dịch ứng dụng.
    ng serve
    Ứng dụng của bạn có thể sẽ không biên dịch được. Dòng lệnh sẽ hiển thị thông báo lỗi sau.Thông báo lỗi df-messenger
  3. Tiếp theo, hãy thêm giản đồ tuỳ chỉnh.

Thêm giản đồ tuỳ chỉnh vào thành phần độc lập

Phần tử df-messanger không phải là phần tử đã biết. Đây là một Thành phần web tuỳ chỉnh. Thông báo lỗi từ khung Angular cho thấy bạn phải thêm CUSTOM_ELEMENTS_SCHEMA vào cả hai thành phần độc lập để loại bỏ thông báo đó.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến tệp feedback-and-chat.component.ts.
  2. Nhập giản đồ CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Thêm CUSTOM_ELEMENTS_SCHEMA vào danh sách giản đồ.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    Tệp feedback-and-chat.component.ts phải khớp với mã ví dụ sau.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...
  4. Thành phần web df-messenger yêu cầu một javascript chỉ được chèn khi thành phần phản hồi và trò chuyện được tải. Để thực hiện mục đích này, chúng ta sẽ thêm mã liên quan vào phương thức ngOnInit(). Phương thức này sẽ tải tập lệnh trò chuyện cần thiết để kích hoạt phần tử .
    ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}
  5. Lưu tệp feedback-and-chat.component.ts.

Biên dịch và hiển thị hộp thoại trò chuyện đã cập nhật

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau đây để biên dịch và chạy ứng dụng rồi mở máy chủ web.
    ng serve
    Máy chủ phát triển của bạn sẽ chạy trên cổng 4200.

Trên trình duyệt, hãy hoàn thành các thao tác sau.

  1. Chuyển đến trang sau.
    http://localhost:4200
    Biểu tượng trò chuyện sẽ xuất hiện ở cuối trang.
  2. Chọn biểu tượng và tương tác với Jimbo.Jimbo cung cấp cho bạn những thông tin thú vị về động vật.Ứng dụng hiển thị cửa sổ trò chuyện với bot tin nhắn phản hồi
  3. Ứng dụng hoạt động với đầy đủ chức năng.

9. Triển khai ứng dụng cho Google App Engine

Ứng dụng đang chạy cục bộ trên máy của bạn. Bước tiếp theo và cũng là bước cuối cùng của lớp học lập trình này là triển khai ứng dụng đó lên Google App Engine.

Để tìm hiểu thêm về Google App Engine, hãy xem bài viết App Engine.

Thiết lập môi trường cho Google App Engine

Nếu bạn đã đáp ứng tất cả các điều kiện sau, hãy bỏ qua các bước tiếp theo và tiến hành triển khai ứng dụng.

  • Tạo dự án Cloud bằng App Engine
  • Đã bật Cloud Build API
  • Đã cài đặt Google Cloud CLI

Hoàn tất các thao tác sau.

  1. Đăng nhập vào tài khoản Gmail hoặc Google Workspace của bạn. Nếu bạn chưa có, hãy tạo Tài khoản Google.
  2. Bật tính năng thanh toán trong Cloud Console để cho phép bạn sử dụng các API và tài nguyên trên Google Cloud. Để tìm hiểu thêm, hãy xem bài viết Tạo, sửa đổi hoặc đóng tài khoản tự phục vụ trong Cloud Billing.
  3. Tạo một dự án Google Cloud để lưu trữ tài nguyên ứng dụng App Engine và các tài nguyên khác trên Google Cloud. Để tìm hiểu thêm, hãy xem bài viết Tạo và quản lý dự án.
  4. Bật API Cloud Build trong Cloud Console. Để tìm hiểu thêm, hãy xem bài viết Bật quyền truy cập vào API.
  5. Cài đặt Google Cloud CLI và công cụ dòng lệnh gcloud. Để tìm hiểu thêm, hãy xem phần Cài đặt gcloud CLI.
  6. Khởi chạy Google Cloud CLI và đảm bảo gcloud được định cấu hình để sử dụng dự án Google Cloud mà bạn muốn triển khai. Để tìm hiểu thêm, hãy xem nội dung Khởi chạy giao diện dòng lệnh (CLI) của gcloud.

Tạo ứng dụng độc lập

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh Angular sau đây để biên dịch và tạo phiên bản ứng dụng sẵn sàng phát hành công khai.
    ng build

Phiên bản sẵn sàng phát hành của ứng dụng được tạo trong thư mục con dist của thư mục dự án photo-gallery-app.

10. Triển khai ứng dụng bằng khung Express.js

Mã mẫu trong lớp học lập trình này sử dụng khung Express.js để xử lý các yêu cầu HTTP. Bạn có thể sử dụng khung web mà bạn muốn.

Cài đặt khung Express.js

Trong cửa sổ dòng lệnh, hãy hoàn tất thao tác sau.

  1. Nhập lệnh sau để cài đặt khung Express.js.
    npm install express --save

Định cấu hình máy chủ web

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Tạo tệp server.js mới.
  3. Sao chép và dán mã sau.
    const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});
  4. Lưu tệp server.js.

Đính kèm máy chủ web

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Mở tệp package.json.
  3. Sửa đổi lệnh bắt đầu để chạy nút trong tệp 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"
  },
    Thuộc tính start là điểm truy cập cho ứng dụng của bạn.
  4. Lưu tệp package.json.

Định cấu hình App Engine

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Tạo tệp app.yaml mới.
  3. Sao chép và dán mã sau.
    runtime: nodejs16
service: default
    Thông tin trong tệp app.yaml chỉ định cấu hình cho App Engine. Bạn chỉ cần chỉ định thời gian chạy và dịch vụ.
  4. Lưu tệp app.yaml.

Cập nhật danh sách bỏ qua gcloud

Để đảm bảo thư mục node_modules của bạn không được tải lên, hãy tạo một tệp .gcloudignore. Các tệp được liệt kê trong tệp .gcloudignore sẽ không được tải lên.

Trong trình soạn thảo mã, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Tạo tệp .gcloudignore mới.
  3. Sao chép và dán mã sau.
    # This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/
  4. Lưu tệp .gcloudignore.

Khởi chạy ứng dụng

Trước khi triển khai ứng dụng, hãy khởi chạy ứng dụng cùng với dự án của bạn rồi chọn một khu vực liên kết.

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh sau để khởi chạy ứng dụng.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Khi được nhắc, hãy chọn khu vực mà bạn muốn đặt ứng dụng App Engine.

Triển khai ứng dụng

Trong cửa sổ dòng lệnh, hãy hoàn tất các thao tác sau.

  1. Chuyển đến thư mục dự án photo-gallery-app mới.
  2. Nhập lệnh sau để triển khai ứng dụng.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. Khi được nhắc, hãy xác nhận hành động.Sau khi hoàn tất lệnh triển khai gcloud, lệnh này sẽ hiển thị một URL để truy cập vào ứng dụng của bạn.
  4. Nhập lệnh sau để mở một thẻ mới trong trình duyệt.
    gcloud app browse
    Kết quả trên bảng điều khiển của quá trình triển khai ứng dụng gcloud và truy cập vào trình duyệt ứng dụng glcoud

11. Xin chúc mừng

Chúc mừng bạn! Bạn đã tạo một thư viện ảnh mẫu bằng Angular phiên bản 14 và đã triển khai thành công thư viện ảnh này trên App Engine.

Bạn đã thử nghiệm tính năng thành phần độc lập và tính năng tải từng phần. Bạn đã tạo tính năng gửi tin nhắn dựa trên biểu mẫu để cung cấp ý kiến phản hồi và nhận xét. Bạn cũng đã thêm thành công một hộp thoại trò chuyện với một nhân viên hỗ trợ ảo Dialogflow CX thông qua Dialogflow Messenger. Tốt lắm!

Các bước tiếp theo

Giờ đây, bạn đã hoàn thành ứng dụng cơ bản, hãy cải thiện ứng dụng bằng cách sử dụng các ý tưởng sau.

  • Biểu mẫu này không thực sự gửi phản hồi, hãy tái cấu trúc biểu mẫu để thêm logic nghiệp vụ nhằm gửi email.
  • Trong trường hợp thực tế, bạn nên xác thực dữ liệu đầu vào của người dùng và đưa vào một Captcha hoặc cơ chế tương tự để tránh bot gửi thư rác
  • Tạo một nhân viên hỗ trợ mới và tìm hiểu cách thiết kế luồng trò chuyện trong Dialogflow CX

Hãy tiếp tục thử nghiệm với khung Angular và tận hưởng niềm vui.

Dọn dẹp và xoá dự án trên Google Cloud

Bạn có thể giữ lại dự án trên Google Cloud hoặc xoá dự án đó để ngừng tính phí cho tất cả tài nguyên được sử dụng trong dự án.

Trong trình duyệt, hãy hoàn tất các thao tác sau.

  1. Đăng nhập vào tài khoản Gmail hoặc Google Workspace của bạn.
  2. Trong bảng điều khiển của Google Cloud.Hãy chọn nút Chế độ cài đặt quản trị và quản lý danh tính và quyền truy cập (IAM).
  3. Trên trang IAM và Quản trị.Chọn thẻ Quản lý tài nguyên.
  4. Trên trang Quản lý tài nguyên.Chuyển đến dự án mà bạn muốn xoá rồi chọn dự án đó.Chọn nút Xoá để mở cửa sổ thoại.
  5. Trên cửa sổ hộp thoại.Nhập mã dự án.Chọn nút Shut down (Tắt) để xoá dự án.