Memulai Komponen Mandiri

1. Pengantar

Yang akan Anda bangun

Dalam codelab ini, Anda akan membuat aplikasi galeri foto satwa liar menggunakan Angular v14. Aplikasi yang telah selesai akan menampilkan serangkaian foto dan juga menampilkan formulir kirim pesan untuk menghubungi fotografer dan jendela chat untuk mempelajari fakta menarik tentang hewan yang ada di foto.

Anda membangun semuanya di aplikasi menggunakan Angular v14 dan fitur komponen mandiri baru.

Semua referensi ke framework Angular dan Angular CLI mencerminkan Angular v14. Komponen mandiri adalah fitur pratinjau Angular v14, jadi Anda harus membuat aplikasi baru menggunakan Angular v14. Komponen mandiri memberikan cara yang lebih sederhana untuk membangun aplikasi Angular. Komponen mandiri, direktif mandiri, dan pipe mandiri bertujuan untuk menyederhanakan pengalaman penulisan dengan mengurangi kebutuhan akan NgModules. Komponen mandiri dapat memanfaatkan sepenuhnya ekosistem library Angular yang ada.

Ini adalah aplikasi yang Anda buat hari ini.

Aplikasi Selesai

Yang akan Anda pelajari

  • Cara menggunakan Angular CLI untuk membuat struktur project baru
  • Cara menggunakan komponen mandiri Angular untuk menyederhanakan pengembangan aplikasi Angular
  • Cara membuat komponen mandiri; yaitu cara membangun UI dan menambahkan beberapa logika bisnis
  • Cara mem-bootstrap aplikasi menggunakan komponen mandiri
  • Cara memuat komponen mandiri secara lambat
  • Cara menyematkan dialog chat dalam komponen mandiri menggunakan Dialogflow Messenger
  • Cara men-deploy aplikasi Angular ke Google Cloud App Engine menggunakan Google Cloud CLI (gcloud)

Yang akan Anda butuhkan

  • Akun Gmail atau Google Workspace
  • Pengetahuan dasar tentang subjek berikut
    • HTML. Cara membuat elemen.
    • CSS dan kurang. Cara menggunakan pemilih CSS dan membuat file definisi gaya.
    • TypeScript atau JavaScript. Cara berinteraksi dengan struktur DOM.
    • git dan GitHub. Cara melakukan fork dan meng-clone repositori.
    • Antarmuka command line, seperti bash atau zsh. Cara menjelajahi direktori dan menjalankan perintah.

2. Penyiapan lingkungan

Menyiapkan lingkungan lokal Anda

Untuk menyelesaikan codelab ini, Anda harus menginstal software berikut di komputer lokal Anda.

  • Node.js versi LTS aktif atau LTS pemeliharaan. Digunakan untuk menginstal framework Angular dan Angular CLI.

    Versi Node

    Didukung oleh Angular

    14.15 atau yang lebih baru

    Didukung

    16.10 atau yang lebih baru

    Didukung

    18.1.0

    Tidak didukung

    Untuk memverifikasi versi Node.js di komputer lokal Anda, jalankan perintah node berikut dari jendela command line.
    node -v
  • Editor kode atau IDE. Digunakan untuk membuka dan mengedit file.Visual Studio Code, atau editor kode lain pilihan Anda.

Instal Angular CLI

Setelah Anda mengonfigurasi semua dependensi, jalankan perintah npm berikut untuk menginstal Angular CLI dari jendela command line.

npm install --global @angular/cli

Untuk mengonfirmasi bahwa konfigurasi Anda sudah benar, jalankan perintah Angular berikut dari command line.

ng version

Jika perintah Angular berhasil diselesaikan, Anda akan menerima pesan yang mirip dengan screenshot berikut.

Output terminal versi Angular

Kode sumber dan gambar

Anda akan membuat seluruh aplikasi dari awal dan codelab langkah demi langkah ini akan membantu Anda. Perlu diingat bahwa repositori GitHub berisi kode akhir. Jika Anda mengalami kesulitan, tinjau kode akhir dan gambar yang ditampilkan di halaman galeri.

Untuk mendownload kode sumber.

  1. Di browser Anda, buka halaman berikut.
    https://github.com/angular/codelabs/tree/standalone-components
  2. Di jendela command line, lakukan fork dan clone repositori.

Pada langkah berikutnya, bangun aplikasi Galeri Foto Anda.

3. Buat aplikasi baru

Untuk membuat aplikasi awal, selesaikan tindakan berikut.

Gunakan Angular CLI untuk membuat ruang kerja baru. Untuk mempelajari lebih lanjut Angular CLI dan framework Angular, buka angular.io.

Membuat project baru

Di jendela command line, selesaikan tindakan berikut.

  1. Masukkan perintah Angular berikut untuk membuat project Angular baru bernama photo-gallery-app.
    ng new photo-gallery-app
  2. Di setiap perintah, terima pilihan default.Framework Angular akan menginstal paket dan dependensi yang diperlukan. Proses ini mungkin memerlukan waktu beberapa menit.

Setelah Angular CLI selesai, Anda akan memiliki ruang kerja Angular baru dan aplikasi sederhana yang siap dijalankan.

Aplikasi baru Anda disusun seperti aplikasi Angular standar. NgModule di aplikasi baru Anda tidak diperlukan untuk codelab ini.

Hapus modul aplikasi

Untuk menghapus modul aplikasi, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Hapus file app.module.ts.

Setelah menghapus modul aplikasi, Anda tidak memiliki modul di aplikasi. Aplikasi Anda hanya memiliki satu komponen, yaitu komponen aplikasi. Anda harus mendeklarasikan komponen sebagai mandiri.

Mendeklarasikan komponen mandiri

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Buka file app.component.ts.
  3. Tambahkan parameter dan nilai berikut ke daftar dekorator Anda.
    standalone: true
    File app.component.ts harus sangat cocok dengan contoh kode berikut.
    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. Simpan file app.component.ts.

Kompilasi aplikasi mandiri baru Anda

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda
  2. Masukkan perintah Angular berikut untuk mengompilasi aplikasi baru Anda.
    ng serve

Aplikasi Anda akan gagal dikompilasi. Jangan khawatir, Anda hanya perlu memperbaiki beberapa hal lagi.

Menggunakan bootstrapApplication API

Agar aplikasi Anda dapat berjalan tanpa NgModule, Anda harus menggunakan komponen mandiri sebagai komponen root menggunakan bootstrapApplication API.

Menghapus referensi ke modul aplikasi

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src di direktori project photo-gallery-app baru Anda
  2. Buka file main.ts.
  3. Hapus kode impor berikut, karena Anda tidak lagi memiliki modul aplikasi.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Hapus kode bootstrap berikut, karena Anda tidak lagi memiliki modul aplikasi.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    File main.ts harus cocok dengan contoh kode berikut.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

Tambahkan komponen bootstrapApplication

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src di direktori project photo-gallery-app baru Anda.
  2. Buka file main.ts.
  3. Impor komponen bootstrapApplication dari layanan @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Tambahkan kode berikut untuk mem-bootstrap aplikasi Anda.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. Impor komponen dan library yang diperlukan.
    import { AppComponent } from './app/app.component';
    File main.ts harus cocok dengan contoh kode berikut.
    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));

Menambahkan router dan modul umum

Untuk menggunakan Router dan fitur modul umum lainnya, Anda harus mengimpor setiap modul langsung ke dalam komponen.

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Buka file app.component.ts.
  3. Impor modul yang diperlukan ke dalam komponen.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. Tambahkan impor di komponen.
    imports: [CommonModule, RouterModule],
    File app.component.ts harus cocok dengan contoh kode berikut.
    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. Simpan file app.component.ts.

Kompilasi dan jalankan aplikasi mandiri baru Anda

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan menjalankan aplikasi serta membuka server web. Anda mungkin perlu menutup IDE sebelum menjalankan aplikasi untuk menghapus error kompilasi.
    ng serve

Server pengembangan Anda harus berjalan di port 4200. Semua error sebelumnya akan hilang dan kompilasi akan berhasil. Bagus sekali. Anda telah berhasil membuat aplikasi Angular yang berjalan tanpa modul dan dengan komponen mandiri.

  1. Selanjutnya, Anda akan mempercantik aplikasi untuk menampilkan beberapa foto.

4. Menampilkan foto

Aplikasi baru Anda dirancang untuk menjadi galeri foto dan harus menampilkan beberapa foto.

Komponen adalah elemen penyusun inti untuk aplikasi Angular. Komponen memiliki 3 aspek utama.

  • File HTML untuk template
  • File CSS untuk gaya
  • File TypeScript untuk perilaku aplikasi

Pindahkan foto ke aplikasi Anda

Gambar disediakan di aplikasi yang sebelumnya Anda download dari GitHub.

  1. Buka direktori src/assets project GitHub.
  2. Salin dan tempel file ke direktori analogue di direktori project photo-gallery-app Anda.

Buat template HTML

File app.component.html adalah file template HTML yang terkait dengan komponen AppComponent.

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Buka file app.component.html.
  3. Hapus semua HTML yang ada.
  4. Salin dan tempel HTML dari contoh kode berikut.
    <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. Simpan file app.component.html.

Buat file definisi gaya

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src di direktori project photo-gallery-app baru Anda.
  2. Buka file styles.css.
  3. Salin dan tempel CSS dari contoh kode berikut.
    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. Simpan file styles.css

Memperbarui file indeks

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src di direktori project photo-gallery-app baru Anda.
  2. Buka file index.html.
  3. Tambahkan font Raleway agar semua halaman dapat mewarisinya.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. Simpan file index.html.
  5. Simpan kode dan periksa browser Anda. Dengan server pengembangan yang berjalan, perubahan akan ditampilkan di browser saat Anda menyimpan.
  6. Selanjutnya, Anda akan membuat komponen mandiri baru untuk mengirimkan masukan dan memulai percakapan dengan Jimbo. Lanjutkan codelab ini untuk mengetahui lebih lanjut Jimbo.

5. Menambahkan komponen mandiri baru

Seperti yang telah Anda lihat sejauh ini, komponen mandiri memberikan cara yang lebih sederhana untuk membangun aplikasi Angular dengan mengurangi kebutuhan NgModules. Di bagian berikut, Anda akan membuat komponen mandiri baru yang memungkinkan pengguna mengirimkan masukan dan melakukan chat dengan agen virtual.

Membuat komponen mandiri baru

Untuk membuat komponen baru ini, Anda menggunakan Angular CLI lagi.

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk membuat komponen baru bernama feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    Tabel berikut menjelaskan bagian-bagian perintah.

    Bagian

    Detail

    ng

    Menentukan semua perintah Angular CLI untuk framework Angular

    generate component

    Membuat perancah untuk komponen baru

    feedback-and-chat

    Nama komponen

    --standalone

    Memberi tahu framework Angular untuk membuat komponen mandiri

Mengimpor komponen mandiri baru

Untuk menggunakan komponen mandiri baru, Anda harus menambahkannya terlebih dahulu ke array imports dalam file app.components.ts.

Ini adalah komponen mandiri, jadi Anda cukup mengimpornya seolah-olah itu adalah modul.

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Buka file app.component.ts.
  3. Impor komponen mandiri baru.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. Perbarui impor di komponen.
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    File app.component.ts harus cocok dengan contoh kode berikut.
    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. Simpan file app.component.ts.

Memuat komponen secara lambat

Beralih dari paradigma pemuatan awal ke paradigma pemuatan lambat, yang mana kode tidak dikirim ke klien hingga Anda membutuhkannya. Pemuatan lambat adalah pendekatan yang bagus untuk mengurangi waktu pemuatan halaman, meningkatkan performa, dan meningkatkan pengalaman pengguna. Router menangani pemuatan lambat, yang sama untuk ngModule dan komponen mandiri.

Perbarui template HTML yang terkait dengan komponen aplikasi

Untuk memuat komponen mandiri secara lambat, tambahkan tombol ke UI yang hanya mengaktifkan komponen saat pengguna memilihnya.

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src/app di direktori project photo-gallery-app baru Anda.
  2. Buka file app.component.html.
  3. Scroll ke akhir file dan tambahkan contoh kode berikut sebelum Anda menutup elemen article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. File app.component.html harus cocok dengan contoh kode berikut.
    <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. Simpan file app.component.html.

Mengonfigurasi rute

Di editor kode, selesaikan tindakan berikut.

  1. Buka direktori src di direktori project photo-gallery-app baru Anda.
  2. Buka file main.ts.
  3. Impor metode provideRouter dan modul Routes. Angular v 14.2.0 telah memperkenalkan metode provideRouter baru yang memungkinkan kita mengonfigurasi serangkaian rute untuk aplikasi.
    import { provideRouter, Routes } from '@angular/router';
  4. Salin dan tempel cuplikan kode berikut di antara impor dan pernyataan if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. Salin dan tempel cuplikan kode berikut, lalu ganti metode bootstrapApplication.
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    File main.ts harus cocok dengan contoh kode berikut.
    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. Simpan file main.ts.

Kompilasi dan tinjau dengan Chrome Developer Tools

Gunakan Chrome Developer Tools untuk meninjau cara framework Angular memuat komponen secara lambat.

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan menjalankan aplikasi serta membuka server web.
    ng serve
    Server pengembangan Anda harus berjalan di port 4200.

Di browser Anda, selesaikan tindakan berikut.

  1. Buka halaman berikutnya.
    http://localhost:4200
  2. Buka Chrome Developer Tools dan pilih tab Network.
  3. Muat ulang halaman untuk menampilkan beberapa file, tetapi bukan komponen feedback-and-chat.Layar Anda harus cocok dengan screenshot berikut.Screenshot aplikasi dengan panel Chrome DevTools terbuka
  4. Pilih tombol Cari tahu lebih lanjut tentang mereka! untuk membuka komponen mandiri.Log harus menunjukkan bahwa komponen hanya dimuat saat Anda membuka perute lengkap. Scroll ke bagian bawah daftar untuk memeriksa apakah komponen telah dimuat. Layar Anda harus cocok dengan screenshot berikut.Screenshot aplikasi dengan panel Chrome DevTools terbuka yang menunjukkan komponen yang dimuat secara lambat

6. Tambahkan UI untuk formulir

Formulir kirim masukan memiliki tiga kolom input UI dan tombol di bagian bawah. Tiga kolom input UI adalah nama lengkap, alamat email pengirim, dan komentar.

Untuk mendukung UI, tambahkan atribut formControlName dalam elemen input yang terikat ke setiap kontrol formulir contactForm yang terkait dengan setiap tiga kolom input UI.

Tambahkan formulir ke template HTML

Tambahkan formulir ke UI untuk memungkinkan pengguna mengirimkan masukan.

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka file feedback-and-chat.component.html.
  2. Hapus HTML yang ada.
  3. Salin dan tempel HTML dari contoh kode berikut.
    <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. Simpan file feedback-and-chat.component.html.

Perbarui file gaya untuk formulir

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka file feedback-and-chat.component.css.
  2. Salin dan tempel CSS dari contoh kode berikut.
    /*   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. Simpan file feedback-and-chat.component.css.

Kompilasi update UI untuk formulir

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan menjalankan aplikasi serta membuka server web.
    ng serve
    Aplikasi Anda akan gagal dikompilasi. Jangan khawatir, Anda perlu mengikat formulir.
  3. Untuk saat ini, tinjau item berikut.
    • Anda menggunakan binding properti formGroup untuk mengikat contactForm ke elemen form dan binding peristiwa ngSubmit
    • Direktif FormGroup memproses peristiwa submit yang dipancarkan oleh elemen form. Kemudian, direktif FormGroup memancarkan peristiwa ngSubmit yang dapat Anda ikat ke fungsi callback onSubmit.
    • Pada langkah berikutnya, Anda akan menerapkan fungsi callback onSubmit dalam file feedback-and-chat.component.ts
  4. Selanjutnya, Anda akan mengikat formulir.

7. Menambahkan penanganan peristiwa ke formulir

UI untuk formulir kirim masukan sudah selesai, tetapi interaksinya tidak ada. Menangani input pengguna dengan formulir adalah fondasi dari banyak aplikasi umum.

Dalam skenario sebenarnya, Anda perlu menerapkan logika bisnis untuk menyelesaikan tindakan berikut.

  1. Mengurai input pengguna dari struktur DOM yang dirender dan terkait dengan komponen.
  2. Validasi input pengguna, yang mencakup Captcha atau mekanisme serupa untuk menghindari spam bot.
  3. Mengirim email ke alamat email yang ditentukan.
  4. Menampilkan pesan yang ramah kembali kepada pengguna.

Dalam codelab ini, Anda hanya akan menerapkan tindakan berikut.

  1. Mengurai input pengguna dari struktur DOM yang dirender dan terkait dengan komponen.
  2. Menampilkan pesan yang ramah kembali kepada pengguna.

Anda harus menguji kemampuan Anda dan menerapkan keempat tindakan tersebut.

Tambahkan model formulir kirim pesan ke komponen

Buat dan tambahkan model formulir kirim masukan di class komponen. Model formulir menentukan status formulir. Layanan FormBuilder menyediakan metode praktis untuk membuat kontrol UI.

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka file feedback-and-chat.component.ts.
  2. Impor layanan FormBuilder dan modul ReactiveModule dari paket @angular/forms. Layanan ini menyediakan metode yang mudah untuk membuat kontrol. Pada langkah berikutnya, kita akan memanfaatkan fungsi inject, jadi kita juga perlu mengimpornya dari @angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. Impor modul ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. Hapus konstruktor berikut.
    constructor() { }
  5. Suntikkan layanan FormBuilder melalui fungsi inject tepat di bawah tanda tangan class.
    private formBuilder = inject(FormBuilder);
    Gunakan metode group dari layanan FormBuilder untuk membuat model formulir guna mengumpulkan nama, alamat email, dan komentar dari pengguna.
  6. Buat properti contactForm baru dan gunakan metode group untuk menyetelnya ke model formulir.Model formulir berisi kolom name, email, dan comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    Tentukan metode onSubmit untuk menangani formulir.Dalam skenario nyata, metode onSubmit memungkinkan pengguna mengirimkan pesan masukan kepada fotografer menggunakan pesan email yang dikirim ke alamat email yang ditentukan.Dalam codelab ini, Anda akan menampilkan input pengguna, menggunakan metode reset untuk mereset formulir, dan menampilkan pesan berhasil yang mudah digunakan.
  7. Tambahkan metode onSubmit baru dan tetapkan variabel showMsg ke true setelah melakukan inisialisasi.
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    File feedback-and-chat.component.ts harus cocok dengan contoh kode berikut.
    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. Simpan file feedback-and-chat.component.ts.

Kompilasi dan tampilkan model formulir kirim masukan

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan menjalankan aplikasi serta membuka server web.
    ng serve
  3. Server pengembangan Anda harus berjalan di port 4200.

Di browser Anda, selesaikan tindakan berikut.

  1. Buka halaman berikutnya.
    http://localhost:4200
  2. Buka Chrome Developer Tools dan pilih tab Console.
  3. Masukkan nilai apa pun ke dalam kotak teks Nama Lengkap, Email, dan Komentar.
  4. Pilih tombol Kirim.Pesan berhasil akan ditampilkan di halaman.
  5. Verifikasi nilai yang ditampilkan di tab Console.Layar Anda harus cocok dengan screenshot berikut.Jendela browser dengan konsol yang menampilkan data json yang dimasukkan ke dalam formulirAnda telah berhasil menerapkan kode untuk menambahkan formulir kirim pesan ke UI komponen dan mengurai input pengguna.
  6. Selanjutnya, Anda menyematkan dialog chat untuk memungkinkan pengunjung aplikasi berbicara dengan Jimbo. Jimbo adalah koala, yang akan mengajari Anda beberapa fakta menarik tentang satwa liar.

8. Menambahkan dialog chat

Memanfaatkan pengalaman dengan antarmuka percakapan, seperti Dialogflow CX atau platform serupa. Agen Dialogflow CX adalah agen virtual yang menangani percakapan serentak dengan manusia. Modul ini adalah modul pemahaman bahasa alami yang mengenali nuansa bahasa manusia dan menerjemahkan teks atau audio pengguna akhir selama percakapan ke data terstruktur yang dapat dipahami oleh aplikasi dan layanan.

Agen virtual contoh telah dibuat untuk Anda gunakan. Yang perlu Anda lakukan di lab ini adalah menambahkan dialog chat ke komponen mandiri agar pengguna aplikasi dapat berinteraksi dengan bot. Untuk persyaratan ini, Anda akan memanfaatkan Dialogflow Messenger, integrasi bawaan yang menyediakan jendela dialog yang dapat disesuaikan. Saat dibuka, dialog chat akan muncul di sisi kanan bawah layar dan memicu maksud sambutan default agen. Bot menyapa pengguna dan memulai percakapan.

Implementasi berikut membagikan fakta menarik tentang satwa liar kepada pengguna. Implementasi lain untuk agen virtual dapat menangani kasus penggunaan yang kompleks bagi pelanggan (seperti agen pusat panggilan manusia). Banyak perusahaan menggunakan agen virtual sebagai saluran komunikasi utama dengan situs perusahaan.

Tambahkan Dialogflow Messenger ke komponen Anda

Seperti formulir, dialog chat hanya boleh ditampilkan saat komponen mandiri dimuat.

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka file feedback-and-chat.component.ts.
  2. Salin dan tempel elemen df-messenger dalam contoh kode berikut di mana saja ke dalam halaman.
    <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 membuat atribut untuk elemen df-messenger saat Anda memilih integrasi Dialogflow Messenger.

    Atribut

    Detail

    agent-id

    Diisi otomatis. Menentukan ID unik agen Dialogflow.

    chat-title

    Diisi otomatis. Menentukan konten yang akan ditampilkan di bagian atas dialog chat. Awalnya diisi otomatis dengan nama agen Anda, tetapi Anda harus menyesuaikannya.

    df-cx

    Menunjukkan bahwa interaksi dilakukan dengan agen CX. Tetapkan nilai ke true.

    maksud

    Menentukan peristiwa kustom yang digunakan untuk memicu maksud pertama saat dialog chat dibuka.

    language-code

    Menentukan kode bahasa default untuk maksud pertama.

    lokasi

    Menentukan region tempat Anda men-deploy agen.

  3. Simpan file feedback-and-chat.component.ts.

Menampilkan model formulir kirim masukan

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi aplikasi.
    ng serve
    Aplikasi Anda akan gagal dikompilasi. Command line akan menampilkan pesan error berikut.Pesan error df-messenger
  3. Selanjutnya, tambahkan skema kustom.

Menambahkan skema kustom ke komponen mandiri

Elemen df-messanger bukan elemen yang dikenal. Ini adalah Komponen Web kustom. Pesan error dari framework Angular menunjukkan bahwa Anda harus menambahkan CUSTOM_ELEMENTS_SCHEMA ke komponen mandiri untuk menyembunyikan pesan tersebut.

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka file feedback-and-chat.component.ts.
  2. Impor skema CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Tambahkan CUSTOM_ELEMENTS_SCHEMA ke daftar skema.
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    File feedback-and-chat.component.ts harus cocok dengan contoh kode berikut.
    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. Komponen web df-messanger memerlukan javascript yang harus disisipkan hanya saat komponen chat dan masukan dimuat. Untuk tujuan ini, kita akan menambahkan kode yang relevan ke metode ngOnInit() yang akan memuat skrip chat yang diperlukan untuk mengaktifkan elemen .
    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. Simpan file feedback-and-chat.component.ts.

Kompilasi dan tampilkan dialog chat yang diperbarui

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan menjalankan aplikasi serta membuka server web.
    ng serve
    Server pengembangan Anda harus berjalan di port 4200.

Di browser Anda, selesaikan tindakan berikut.

  1. Buka halaman berikutnya.
    http://localhost:4200
    Ikon chat akan muncul di bagian bawah halaman.
  2. Pilih ikon dan berinteraksi dengan Jimbo.Jimbo memberikan fakta menarik tentang hewan.Aplikasi yang menampilkan jendela chat dengan respons bot messenger
  3. Aplikasi berfungsi sepenuhnya.

9. Men-deploy aplikasi ke Google App Engine

Aplikasi berjalan secara lokal di komputer Anda. Yang ingin Anda lakukan sebagai langkah berikutnya dan terakhir dari codelab ini adalah men-deploy-nya ke Google App Engine.

Untuk mempelajari Google App Engine lebih lanjut, lihat App Engine.

Menyiapkan lingkungan untuk Google App Engine

Jika Anda sudah memenuhi semua kondisi berikut, lewati langkah berikutnya dan lanjutkan untuk men-deploy aplikasi.

  • Membuat project Cloud dengan App Engine
  • Mengaktifkan Cloud Build API
  • Menginstal Google Cloud CLI

Selesaikan tindakan berikut.

  1. Login ke akun Gmail atau Google Workspace Anda. Jika Anda belum memilikinya, buat Akun Google Anda.
  2. Aktifkan penagihan di Cloud Console agar Anda dapat menggunakan resource dan API Cloud. Untuk mempelajari lebih lanjut, lihat Membuat, mengubah, atau menutup akun Penagihan Cloud layanan mandiri Anda.
  3. Buat project Google Cloud untuk menyimpan resource aplikasi App Engine dan resource Google Cloud lainnya. Untuk mempelajari lebih lanjut, lihat Membuat dan mengelola project.
  4. Aktifkan Cloud Build API di Cloud Console. Untuk mempelajari lebih lanjut, lihat Mengaktifkan akses ke API.
  5. Instal Google Cloud CLI dan alat command line gcloud. Untuk mempelajari lebih lanjut, lihat Menginstal gcloud CLI.
  6. Lakukan inisialisasi Google Cloud CLI dan pastikan gcloud dikonfigurasi untuk menggunakan project Google Cloud yang menjadi tujuan deployment Anda. Untuk mempelajari lebih lanjut, lihat bagian Melakukan inisialisasi gcloud CLI.

Membangun aplikasi mandiri

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah Angular berikut untuk mengompilasi dan membuat aplikasi versi siap produksi.
    ng build

Versi aplikasi yang siap produksi dibuat di subdirektori dist dari direktori project photo-gallery-app Anda.

10. Men-deploy aplikasi Anda menggunakan framework Express.js

Kode contoh dalam codelab ini menggunakan framework Express.js untuk menangani permintaan HTTP. Anda dapat menggunakan framework web pilihan Anda.

Menginstal framework Express.js

Di jendela command line, selesaikan tindakan berikut.

  1. Masukkan perintah berikut untuk menginstal framework Express.js.
    npm install express --save

Mengonfigurasi server web Anda

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Buat file server.js baru.
  3. Salin dan tempel kode berikut.
    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. Simpan file server.js.

Lampirkan server web Anda

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Buka file package.json.
  3. Ubah perintah mulai untuk menjalankan node di file 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"
  },
    Atribut start adalah titik entri untuk aplikasi Anda.
  4. Simpan file package.json.

Mengonfigurasi App Engine

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Buat file app.yaml baru.
  3. Salin dan tempel kode berikut.
    runtime: nodejs16
service: default
    Informasi dalam file app.yaml menentukan konfigurasi untuk App Engine. Anda hanya perlu menentukan runtime dan layanan.
  4. Simpan file app.yaml.

Memperbarui daftar abaikan gcloud

Untuk memastikan bahwa direktori node_modules Anda tidak diupload, buat file .gcloudignore. File yang tercantum dalam file .gcloudignore Anda tidak diupload.

Di editor kode Anda, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Buat file .gcloudignore baru.
  3. Salin dan tempel kode berikut.
    # 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. Simpan file .gcloudignore.

Lakukan inisialisasi aplikasi Anda

Sebelum men-deploy aplikasi, lakukan inisialisasi dengan project Anda dan pilih region terkait.

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah berikut untuk melakukan inisialisasi aplikasi Anda.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. Pada perintah, pilih region tempat Anda ingin menempatkan aplikasi App Engine.

Men-deploy aplikasi Anda

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru Anda.
  2. Masukkan perintah berikut untuk men-deploy aplikasi Anda.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. Pada perintah, konfirmasi tindakan.Setelah perintah deployment gcloud berhasil diselesaikan, perintah tersebut akan menampilkan URL untuk mengakses aplikasi Anda.
  4. Masukkan perintah berikut untuk membuka tab baru di browser Anda.
    gcloud app browse
    Output konsol gcloud app deploy dan memasukkan gcloud app browse

11. Selamat

Selamat. Anda telah membuat galeri foto contoh menggunakan Angular v14 dan berhasil men-deploy-nya di App Engine.

Anda bereksperimen dengan fitur komponen mandiri dan pemuatan lambat. Anda membuat fitur kirim pesan berbasis formulir untuk memberikan masukan dan komentar. Anda juga berhasil menambahkan dialog chat dengan agen virtual Dialogflow CX menggunakan Dialogflow Messenger. Bagus sekali.

Langkah berikutnya

Setelah menyelesaikan aplikasi dasar, tingkatkan kualitasnya menggunakan ide berikut.

  • Formulir sebenarnya tidak mengirimkan masukan, refaktorkan untuk menambahkan logika bisnis guna mengirim email.
  • Dalam skenario dunia nyata, Anda harus memvalidasi input pengguna dan menyertakan Captcha atau mekanisme serupa untuk menghindari spam bot
  • Buat agen baru dan pelajari cara mendesain alur percakapan di Dialogflow CX

Teruslah bereksperimen dengan framework Angular dan bersenang-senanglah.

Membersihkan dan menghapus project Cloud Anda

Anda dapat mempertahankan project Cloud atau menghapusnya untuk menghentikan penagihan atas semua resource yang digunakan dalam project tersebut.

Di browser Anda, selesaikan tindakan berikut.

  1. Login ke akun Gmail atau Google Workspace Anda.
  2. Di konsol Google Cloud.Pilih tombol IAM & Admin Settings.
  3. Di halaman IAM & Admin.Pilih tab Kelola resource.
  4. Di halaman Kelola resource.Buka project yang ingin Anda hapus, lalu pilih project tersebut.Pilih tombol Hapus untuk membuka jendela dialog.
  5. Di jendela dialog.Masukkan project ID.Pilih tombol Shut down untuk menghapus project.