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ẽ tạo một ứng dụng thư viện ảnh về động vật hoang dã bằng Angular phiên bản 14. Ứng dụng hoàn chỉnh sẽ hiển thị một bộ ảnh, đồng thời có biểu mẫu gửi tin nhắn để liên hệ với nhiếp ảnh gia và một cửa sổ trò chuyện để tìm hiểu những thông tin thú vị về các loài động vật trong ảnh.

Bạn tạo mọi thứ trong ứng dụng của mình bằng Angular phiên bản 14 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. Các thành phần độc lập là một tính năng xem trước của Angular phiên bản 14, vì vậy, bạn phải tạo một ứng dụng hoàn toàn mới bằng Angular phiên bản 14. Các thành phần độc lập cung cấp một cách thức đơn giản để tạo các ứng dụng Angular. Các thành phần độc lập, chỉ thị độc lập và các pipe độc lập nhằm mục đích đơn giản hoá trải nghiệm tạo bằng cách giảm nhu cầu về NgModules. Các thành phần độc lập có thể tận dụng tối đa hệ sinh thái hiện có của các thư viện Angular.

Đây là ứng dụng mà bạn sẽ tạo 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 để tạo khung cho 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 nghiệp vụ
  • Cách khởi động một ứng dụng bằng cách sử dụng một thành phần độc lập
  • Cách tải thành phần độc lập một cách trì hoãn
  • 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 một ứng dụng Angular lên 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à sao chép một kho lưu trữ.
    • Giao diện dòng lệnh, chẳng hạn như bash hoặc zsh. Cách di chuyển giữa 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ộ.

  • Một 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 hỗ trợ

    16.10 trở lên

    Được hỗ trợ

    18.1.0

    Không được hỗ trợ

    Để 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 trong 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 đây để 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 là chính xác, hãy chạy lệnh Angular sau đây từ mộ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 một thông báo tương tự như ảnh chụp màn hình sau.

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

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ã cuối cùng. Nếu bạn gặp khó khăn, hãy xem lại mã cuối cùng và những hình ảnh xuất hiện 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ữ.

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

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

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

Sử dụng Angular CLI để tạo một 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 đây để 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 cần thiết. 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 Angular mới 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 là dư thừa đối với lớp học lập trình này.

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

Để tháo 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 của mình. Ứng dụng của bạn chỉ có một thành phần, đó là thành phần của ứng dụng. Bạn phải khai báo thành phần này dưới dạng độc lập.

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

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. Thêm tham số và giá trị sau vào danh sách đối tượng trang trí.
    standalone: true
    Tệp app.component.ts phải gần giống 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
  2. Nhập lệnh Angular sau đây để 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 lắng, bạn chỉ cần khắc phục thêm một số vấn đề nữa.

Sử dụng API bootstrapApplication

Để cho phép ứng dụng của bạn chạy mà không có 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 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 của bạn.
    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à các mô-đun phổ biến

Để sử dụng Router và các tính năng mô-đun chung khác, bạn phải nhập trực tiế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 ví dụ về mã 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 đây để biên dịch và chạy ứng dụng, đồng thời mở một 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 chạy mà không có mô-đun và có một thành phần độc lập.

  1. Tiếp theo, bạn sẽ làm đẹp ứng dụng của mình để hiển thị một số bức ả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à phải hiển thị một số bức ảnh.

Các thành phần là nền tảng cơ bản để xây dựng ứ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ác hình ảnh này có trong ứng dụng mà bạn đã tải xuống trước đó qua GitHub.

  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 được 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 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ừ ví dụ về mã sau đây.
    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ữ này.
    <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. 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 tham gia 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 giúp đơn giản hoá cách tạo ứng dụng Angular bằng cách giảm nhu cầu sử dụng NgModule. 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 tác nhân ảo.

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

Để tạo thành phần mới này, bạn 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 đây để 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 cấu trúc cơ bản 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 đó 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 mục 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 trước sang mô hình tải từng phần, trong đó mã không được gửi đến máy khách cho đến khi bạn cần. Tải từng phần là một phương pháp tuyệt vời để giảm thời gian tải trang, cải thiện hiệu suất và cải thiện trải nghiệm người dùng. Bộ định tuyến xử lý tính năng tải chậm, giống như đối với ngModule và một thành phần độc lập.

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

Để tải thành phần độc lập một cách trì hoãn, hãy thêm một nút vào giao diện người dùng. Nút này chỉ kích hoạt thành phần khi người dùng chọ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 đây trước khi bạn đó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 các tuyến đườ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. Nhập phương thức provideRouter và mô-đun Tuyến đường. 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 nhóm 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 câu lệnh nhập và 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 ví dụ về mã sau.
    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 xét 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 xét cách khung Angular tải thành phần một cách trì hoã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 đây để biên dịch và chạy ứng dụng, đồng thời mở một máy chủ web.
    ng serve
    Máy chủ phát triển của bạn phải 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 tiếp theo.
    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 hiển thị 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 có 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 truy cập vào bộ đị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 có bảng điều khiển Chrome DevTools đang mở, minh hoạ thành phần được tải từng phần

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 nhập dữ liệu trên giao diện người dùng và một nút ở dưới cùng. Ba trường nhập liệu 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 một thuộc tính formControlName trong một phần tử input liên kết với từng chế độ điều khiển biểu mẫu contactForm được liên kết với từng trường trong số 3 trường nhập liệu 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ừ ví dụ về mã sau đây.
    /*   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 đây để biên dịch và chạy ứng dụng, đồng thời mở một máy chủ web.
    ng serve
    Ứng dụng của bạn sẽ không biên dịch được. Đừng lo lắng, 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 dù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
    • Chỉ thị FormGroup theo dõi sự kiện gửi do phần tử form phát ra. Sau đó, chỉ thị FormGroup sẽ phát ra một sự kiện ngSubmit mà bạn có thể liên kết với hàm callback onSubmit.
    • Trong một 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 phần tương tác. Xử lý hoạt động đầ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 hoạt động đầu vào của người dùng từ cấu trúc DOM được hiển thị 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 cả Captcha hoặc một cơ chế tương tự để tránh tình trạng bot gửi nội dung rác.
  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 hoạt động đầu vào của người dùng từ cấu trúc DOM được hiển thị 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 kỹ năng của mình và thực hiện cả 4 hành động này.

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 biểu mẫu gửi phản hồi vào 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 một thành phần điều khiển trê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 chế độ kiểm soát. Trong bước tiếp theo, chúng ta sẽ tận dụng hàm inject, vì vậy, chúng ta cũng 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ột mô hình biểu mẫu nhằm thu thập tên, địa chỉ email và bình luận 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 này thành một 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 cách gửi nội dung email đến một địa chỉ email được chỉ định.Trong lớp học lập trình này, bạn sẽ hiển thị thông tin đầu vào của người dùng, 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 ý kiến 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 đây để biên dịch và chạy ứng dụng, đồng thời mở một máy chủ web.
    ng serve
  3. Máy chủ phát triển của bạn phải 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 tiếp theo.
    http://localhost:4200
  2. Mở Công cụ cho nhà phát triển trên Chrome rồi chọn thẻ Bảng điều khiển.
  3. Nhập bất kỳ giá trị nào vào hộp văn bản Họ và tên, 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ị xuất hiện 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 được 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 tin nhắn) vào giao diện người dùng 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ẽ học đượ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 sử dụng các giao diện đàm thoại, 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ột mô-đun tìm hiểu ngôn ngữ tự nhiên, có khả năng nhận biết 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.

Một nhân viên hỗ trợ ảo mẫu đã được tạo sẵn để bạn sử dụng. Trong lớp học này, bạn cần thêm một 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 công cụ tích hợp được tạo sẵn cung cấp cửa sổ hộp thoại có thể tuỳ chỉnh. Khi được mở, hộp thoại trò chuyện sẽ xuất hiện ở phía dưới cùng 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.

Sau đây là cách triển khai để chia sẻ những thông tin thú vị về động vật hoang dã với người dùng. Các cách triển khai khác cho trợ lý ả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 tổng đài). Nhiều công ty sử dụng một tác nhân ảo làm kênh liên lạc chính với trang web của công ty.

Thêm Dialogflow Messenger vào thành phần

Giống như biểu mẫu, hộp thoại trò chuyện chỉ được 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 ví dụ về mã sau đây 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 nhân viên hỗ trợ ảo Dialogflow.

    chat-title

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

    df-cx

    Cho biết rằng lượt tương tác là 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 được mở.

    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 tác nhân.

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

Hiển thị mô hình biểu mẫu gửi ý kiến 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 đây để biên dịch ứng dụng.
    ng serve
    Ứng dụng của bạn sẽ không biên dịch được. Dòng lệnh sẽ hiển thị thông báo lỗi sau đây.Thông báo lỗi df-messenger
  3. Tiếp theo, hãy thêm một 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à một 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 biết bạn phải thêm CUSTOM_ELEMENTS_SCHEMA vào cả hai thành phần độc lập để ngăn thông báo này xuất hiệ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 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 lược đồ.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    Tệp feedback-and-chat.component.ts phải khớp với ví dụ về mã 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-messanger 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. Vì mục đích này, chúng ta sẽ thêm mã có 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, đồng thời mở một máy chủ web.
    ng serve
    Máy chủ phát triển của bạn phải 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 tiếp theo.
    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 này và tương tác với Jimbo.Jimbo sẽ cung cấp những thông tin thú vị về động vật.Ứng dụng hiển thị cửa sổ trò chuyện có bot nhắn tin đang 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 lên Google App Engine

Ứng dụng đang chạy cục bộ trên máy của bạn. Trong 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, bạn sẽ triển khai ứng dụng lên Google App Engine.

Để tìm hiểu thêm về Google App Engine, hãy xem phần 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 một dự án trên đám mây bằng App Engine
  • Đã bật API Cloud Build
  • Đã 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ó tài khoản, 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 tài nguyên và API trên đám mây. Để 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 Cloud Billing tự thiết lập.
  3. Tạo một dự án trên Google Cloud để lưu trữ các 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 phần 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 phần Cho phép 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 động Google Cloud CLI và đảm bảo gcloud được định cấu hình để sử dụng dự án trên Google Cloud mà bạn muốn triển khai. Để tìm hiểu thêm, hãy xem phần Khởi động CLI 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 một phiên bản sẵn sàng phát hành của ứng dụng.
    ng build

Phiên bản sẵn sàng phát hành công khai 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à mình 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 một 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 khởi động để 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 một 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ó trong tệp .gcloudignore của bạn 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 một 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 tạo ứng dụng bằng dự án của bạn và chọn một khu vực đượ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 của bạn.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. Tại dấu nhắc, hãy xác nhận hành động.Sau khi lệnh triển khai gcloud hoàn tất thành công, 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ả xuất ra trên bảng điều khiển của lệnh gcloud app deploy và khi nhập lệnh glcoud app browse

11. Xin chúc mừng

Xin chúc mừng. 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 đó 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 một 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à bình luận. Bạn cũng đã thêm thành công một hộp thoại trò chuyện với nhân viên hỗ trợ ảo Dialogflow CX bằng Dialogflow Messenger. Tốt lắm!

Các bước tiếp theo

Giờ đây, khi đã hoàn tất ứ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 thực sự không gửi ý kiến phản hồi, hãy tái cấu trúc biểu mẫu để thêm logic nghiệp vụ gửi email.
  • Trong trường hợp thực tế, bạn nên xác thực hoạt động đầu vào của người dùng và thêm một Captcha hoặc cơ chế tương tự để tránh tình trạng bot gửi nội dung 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

Tiếp tục thử nghiệm với khung Angular và tận hưởng.

Dọn dẹp và xoá dự án trên đám mây

Bạn có thể giữ lại dự án trên đám mây hoặc xoá dự án đó để ngừng tính phí cho tất cả tài nguyên được 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 Google Cloud, hãy chọn nút IAM & Admin Settings (IAM và chế độ cài đặt quản trị).
  3. Trên trang IAM & Admin (Quản trị và quản lý danh tính và quyền truy cập), hãy chọn thẻ Quản lý tài nguyên.
  4. Trên trang Quản lý tài nguyên, hãy chuyển đến dự án mà bạn muốn xoá rồi chọn dự án đó. Chọn nút Xoá để mở một cửa sổ hộp thoại.
  5. Trên cửa sổ hộp thoại, hãy nhập mã dự án. Chọn nút Tắt để xoá dự án.