Memulai Komponen Mandiri

1. Pengantar

Yang akan Anda build

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

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

Semua referensi ke framework Angular dan Angular CLI mencerminkan Angular v14. Komponen mandiri adalah fitur pratinjau Angular v14, sehingga Anda harus membuat aplikasi baru menggunakan Angular v14. Komponen mandiri menyediakan cara yang disederhanakan untuk membangun aplikasi Angular. Komponen mandiri, perintah mandiri, dan pipa 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 sedang Anda bangun.

Lamaran Kerja Selesai

Yang akan Anda pelajari

  • Cara menggunakan Angular CLI untuk membuat scaffold project baru
  • Cara menggunakan komponen mandiri Angular untuk menyederhanakan pengembangan aplikasi Angular
  • Cara membuat komponen mandiri; yaitu cara mem-build UI dan menambahkan beberapa logika bisnis
  • Cara mem-bootstrap aplikasi menggunakan komponen mandiri
  • Cara memuat lambat komponen mandiri
  • Cara menyematkan dialog chat ke 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 mengenai subjek berikut
    • HTML. Cara membuat elemen.
    • CSS dan yang lebih sedikit. 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 menavigasi direktori dan menjalankan perintah.

2. Penyiapan lingkungan

Menyiapkan lingkungan lokal Anda

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

  • 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.

Menginstal 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 final. 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, build aplikasi Galeri Foto Anda.

3. Membuat aplikasi baru

Untuk membuat aplikasi awal, selesaikan tindakan berikut.

Gunakan Angular CLI untuk membuat ruang kerja baru. Untuk mempelajari Angular CLI dan framework Angular lebih lanjut, 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. Pada 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 memiliki ruang kerja Angular baru dan aplikasi siap dijalankan yang sederhana.

Aplikasi baru Anda terstruktur seperti aplikasi Angular standar. NgModule dalam aplikasi baru Anda tidak diperlukan untuk codelab ini.

Menghapus 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 akan 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 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.

Mengompilasi aplikasi mandiri baru

Di jendela command line, selesaikan tindakan berikut.

  1. Buka direktori project photo-gallery-app baru
  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 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();
}

Menambahkan 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 melakukan 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 secara 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.

Mengompilasi dan menjalankan aplikasi mandiri baru

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. Mantap. 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

Memindahkan foto ke aplikasi Anda

Gambar disediakan dalam 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.

Membuat 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.

Membuat 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. Menyimpan 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 tercermin di browser saat Anda menyimpan.
  6. Selanjutnya, Anda akan membuat komponen mandiri baru untuk mengirim masukan dan melakukan chat dengan Jimbo. Lanjutkan codelab ini untuk mengetahui Jimbo lebih lanjut.

5. Menambahkan komponen mandiri baru

Seperti yang telah Anda lihat sejauh ini, komponen mandiri memberikan cara yang disederhanakan untuk mem-build aplikasi Angular dengan mengurangi kebutuhan akan NgModule. Di bagian berikut, Anda akan membuat komponen mandiri baru yang memungkinkan pengguna mengirim 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 cepat ke paradigma pemuatan lambat, yang kodenya 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.

Memperbarui template HTML yang terkait dengan komponen aplikasi

Untuk memuat lambat komponen mandiri, 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. Mengimpor metode provideRouter dan modul Rute. Angular v 14.2.0 telah memperkenalkan metode provideRouter baru yang memungkinkan kita untuk mengkonfigurasi satu set 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.

Mengompilasi dan meninjau dengan Chrome Developer Tools

Gunakan alat Developer Chrome 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, selesaikan tindakan berikut.

  1. Buka halaman berikut.
    http://localhost:4200
  2. Buka Chrome Developer Tools, lalu pilih tab Jaringan.
  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 Find out more about these guys! untuk merutekan ke komponen mandiri.Log akan menunjukkan bahwa komponen hanya dimuat saat Anda membuka router lengkap. Scroll ke bawah ke bagian akhir daftar untuk memeriksa apakah komponen telah dimuat. Layar Anda akan terlihat seperti screenshot berikut.Screenshot aplikasi dengan panel devtools chrome terbuka yang menunjukkan komponen yang dimuat lambat

6. Menambahkan UI untuk formulir

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

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

Menambahkan formulir ke template HTML

Tambahkan formulir ke UI untuk memungkinkan pengguna mengirim masukan.

Di editor kode, 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.

Memperbarui file gaya untuk formulir

Di editor kode, 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.

Mengompilasi 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
    • Perintah FormGroup memproses peristiwa pengiriman yang dimunculkan oleh elemen form. Kemudian, perintah FormGroup akan memunculkan peristiwa ngSubmit yang dapat Anda kaitkan ke fungsi callback onSubmit.
    • Pada langkah berikutnya, Anda akan mengimplementasikan fungsi callback onSubmit di 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 dasar 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 yang terkait dengan komponen.
  2. Validasi input pengguna, yang mencakup Captcha atau mekanisme serupa untuk menghindari spam bot.
  3. Mengirim email ke alamat email yang ditetapkan.
  4. Tampilkan pesan yang ramah kepada pengguna.

Dalam codelab ini, Anda hanya menerapkan tindakan berikut.

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

Anda harus menguji keterampilan Anda dan menerapkan keempat tindakan tersebut.

Menambahkan 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, 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 sehingga 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. Masukkan 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: ''
});
    Menentukan 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 ditetapkan.Dalam codelab ini, Anda akan menampilkan input pengguna, menggunakan metode reset untuk mereset formulir, dan menampilkan pesan sukses 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.

Mengompilasi dan 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 dan menjalankan aplikasi serta membuka server web.
    ng serve
  3. Server pengembangan Anda akan berjalan pada port 4200.

Di browser, selesaikan tindakan berikut.

  1. Buka halaman berikut.
    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 Konsol.Layar Anda akan cocok dengan screenshot berikut.Jendela browser dengan konsol yang menampilkan data JSON yang dimasukkan ke dalam formulirAnda 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 seekor koala, yang akan memberi tahu Anda beberapa fakta keren tentang satwa liar.

8. Menambahkan dialog chat

Manfaatkan pengalaman dengan antarmuka percakapan, seperti Dialogflow CX atau platform serupa. Agen Dialogflow CX adalah agen virtual yang menangani percakapan serentak dengan manusia. 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.

Contoh agen virtual 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, yakni integrasi bawaan yang menyediakan jendela dialog yang dapat disesuaikan. Saat dibuka, dialog chat akan muncul di sisi kanan bawah layar dan memicu intent sambutan default agen. Bot akan 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 layanan telepon manusia). Banyak perusahaan menggunakan agen virtual sebagai saluran komunikasi utama dengan situs perusahaan.

Menambahkan Messenger Dialogflow ke komponen Anda

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

Di editor kode, 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 menghasilkan atribut untuk elemen df-messenger saat Anda memilih integrasi Dialogflow Messenger.

    Atribut

    Detail

    agent-id

    Terisi otomatis. Menentukan ID unik agen Dialogflow.

    chat-title

    Terisi 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 intent pertama saat dialog chat dibuka.

    language-code

    Menentukan kode bahasa default untuk intent 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 diketahui. Ini adalah Komponen Web kustom. Pesan error dari framework Angular menyarankan Anda harus menambahkan CUSTOM_ELEMENTS_SCHEMA ke kedua komponen mandiri untuk menyembunyikan pesan.

Di editor kode, 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 hanya boleh dimasukkan saat komponen masukan dan chat 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.

Mengompilasi dan menampilkan 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 akan berjalan pada port 4200.

Di browser, selesaikan tindakan berikut.

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

9. Men-deploy aplikasi ke Google App Engine

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

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

Menyiapkan lingkungan Anda 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.
  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.
  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 Melakukan inisialisasi gcloud CLI.

Mem-build 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 versi aplikasi yang siap produksi.
    ng build

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

10. Men-deploy aplikasi 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

Di editor kode, 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.

Melampirkan server web

Di editor kode, 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, 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 yang diabaikan gcloud

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

Di editor kode, 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.

Melakukan inisialisasi aplikasi

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. Saat diminta, pilih region tempat Anda ingin menemukan 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 deployment aplikasi gcloud dan memasuki penjelajahan aplikasi glcoud

11. Selamat

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

Anda telah bereksperimen dengan fitur komponen mandiri dan pemuatan lambat. Anda telah 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. Mantap.

Langkah berikutnya

Setelah menyelesaikan aplikasi dasar, tingkatkan kualitasnya menggunakan ide-ide berikut.

  • Formulir tersebut tidak benar-benar mengirim masukan, memfaktorkan ulang untuk menambahkan logika bisnis untuk mengirim email.
  • Dalam skenario dunia nyata, Anda harus memvalidasi input pengguna dan menyertakan Captcha atau mekanisme serupa untuk menghindari spam bot
  • Membuat agen baru dan mempelajari cara mendesain alur percakapan di Dialogflow CX

Terus bereksperimen dengan framework Angular dan bersenang-senanglah.

Membersihkan dan menghapus project Cloud

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

Di browser, 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 Manage resources.
  4. Di halaman Manage resources.Buka project yang ingin Anda hapus, lalu pilih project tersebut.Pilih tombol Delete untuk membuka jendela dialog.
  5. Di jendela dialog.Masukkan project ID.Pilih tombol Shut down untuk menghapus project.