Bağımsız Bileşenleri kullanmaya başlama

1. Giriş

Ne oluşturacaksınız?

Bu codelab'de, Angular v14 kullanarak bir vahşi yaşam fotoğraf galerisi uygulaması oluşturacaksınız. Tamamlanan uygulamada bir dizi fotoğraf gösterilir. Ayrıca, fotoğrafçıyla iletişime geçmek için mesaj gönderme formu ve fotoğraflarda gösterilen hayvanlar hakkında ilginç bilgiler edinmek için bir sohbet penceresi bulunur.

Uygulamanızdaki her şeyi Angular v14 ve yeni bağımsız bileşenler özelliğini kullanarak oluşturursunuz.

Angular çerçevesi ve Angular CLI ile ilgili tüm referanslar Angular v14'ü yansıtır. Bağımsız bileşenler, Angular v14'ün önizleme özelliğidir. Bu nedenle, Angular v14 kullanarak yepyeni bir uygulama oluşturmanız gerekir. Bağımsız bileşenler, Angular uygulamaları oluşturmanın basitleştirilmiş bir yolunu sunar. Bağımsız bileşenler, bağımsız yönergeler ve bağımsız borular, NgModules ihtiyacını azaltarak yazma deneyimini kolaylaştırmayı amaçlar. Bağımsız bileşenler, mevcut Angular kitaplıkları ekosisteminden tam olarak yararlanabilir.

Bugün geliştireceğiniz uygulama budur.

Tamamlanmış Başvuru

Öğrenecekleriniz

Yeni bir proje oluşturmak için Angular KSA'yı kullanma
Angular uygulamalarının geliştirilmesini kolaylaştırmak için Angular bağımsız bileşenleri kullanma
Bağımsız bileşen oluşturma (kullanıcı arayüzü oluşturma ve işletme mantığı ekleme)
Bağımsız bir bileşen kullanarak uygulamayı başlatma
Bağımsız bir bileşeni geç yükleme
Dialogflow Messenger'ı kullanarak sohbet iletişimini bağımsız bir bileşene yerleştirme
Google Cloud CLI'yı (gcloud) kullanarak Google Cloud App Engine'e Angular uygulaması dağıtma

İhtiyacınız olanlar

Gmail veya Google Workspace hesabı
Aşağıdaki konularla ilgili temel bilgiler
- HTML. Öğe oluşturma
- CSS ve daha az. CSS seçiciyi kullanma ve stil tanımı dosyası oluşturma
- TypeScript veya JavaScript. DOM yapısıyla nasıl etkileşim kurulacağı.
- git ve GitHub. Depo nasıl çatallanır ve klonlanır?
- bash veya zsh gibi komut satırı arayüzü. Dizinlerde gezinme ve komut çalıştırma

2. Ortam kurulumu

Yerel ortamınızı ayarlama

Bu codelab'i tamamlamak için yerel bilgisayarınıza aşağıdaki yazılımları yüklemeniz gerekir.

Node.js'in etkin bir LTS veya bakım LTS sürümü. Angular çerçevesini ve Angular CLI'yı yüklemek için kullanılır.

Düğüm sürümü

Angular tarafından desteklenir

14.15 veya daha yeni bir sürüm

Destekleniyor

16.10 veya daha yeni bir sürüm

Destekleniyor

18.1.0

Desteklenmiyor

Yerel bilgisayarınızdaki Node.js sürümünü doğrulamak için bir komut satırı penceresinden aşağıdaki node komutunu çalıştırın.
```
node -v
```
Kod düzenleyici veya IDE. Dosyaları açmak ve düzenlemek için kullanılır.Visual Studio Code veya tercih ettiğiniz başka bir kod düzenleyici.

Angular CLI'yı yükleme

Tüm bağımlılıkları yapılandırdıktan sonra, komut satırı penceresinden Angular CLI'yı yüklemek için aşağıdaki npm komutunu çalıştırın.

npm install --global @angular/cli

Yapılandırmanızın doğru olduğunu onaylamak için komut satırından aşağıdaki Angular komutunu çalıştırın.

ng version

Angular komutu başarıyla tamamlanırsa aşağıdaki ekran görüntüsüne benzer bir mesaj alırsınız.

Angular sürümünün terminal çıkışı

Kaynak kodu ve resimler

Uygulamanın tamamını sıfırdan oluşturursunuz ve bu adım adım codelab size yardımcı olur. GitHub deposunda son kodun bulunduğunu unutmayın. Takılırsanız son kodu ve galeri sayfasında gösterilen resimleri inceleyin.

Kaynak kodunu indirmek için.

Tarayıcınızda aşağıdaki sayfaya gidin.

https://github.com/angular/codelabs/tree/standalone-components

Bir komut satırı penceresinde depoyu çatallayın ve klonlayın.

Sonraki adımda, Fotoğraf Galerisi uygulamanızı oluşturun.

3. Yeni uygulama oluşturma

İlk başlangıç uygulamasını oluşturmak için aşağıdaki işlemleri tamamlayın.

Yeni bir çalışma alanı oluşturmak için Angular CLI'ı kullanın. Angular CLI ve Angular çerçevesi hakkında daha fazla bilgi edinmek için angular.io adresine gidin.

Yeni proje oluştur

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

photo-gallery-app adlı yeni bir Angular projesi oluşturmak için aşağıdaki Angular komutunu girin.
```
ng new photo-gallery-app
```
Her istemde varsayılan seçimi kabul edin.Angular çerçevesi, gerekli paketleri ve bağımlılıkları yükler. Bu işlem birkaç dakika sürebilir.

Angular CLI tamamlandıktan sonra yeni bir Angular çalışma alanınız ve çalışmaya hazır basit bir uygulamanız olur.

Yeni uygulamanız, standart bir Angular uygulaması gibi yapılandırılır. Yeni uygulamanızdaki NgModule, bu codelab için gereksizdir.

Uygulama modülünü kaldırma

Uygulama modülünü kaldırmak için aşağıdaki işlemi tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.module.ts dosyasını silin.

Uygulama modülünü sildikten sonra uygulamanızda modül kalmaz. Uygulamanızda yalnızca bir uygulama bileşeni var. Bileşeni bağımsız olarak beyan etmeniz gerekir.

Bağımsız bileşeninizi tanımlama

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.component.ts dosyasını açın.

Aşağıdaki parametreyi ve değeri süsleme listenize ekleyin.

standalone: true

app.component.ts dosyası, aşağıdaki kod örneğiyle neredeyse aynı olmalıdır.

import { Component } from '@angular/core';

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

app.component.ts dosyasını kaydedin.

Yeni bağımsız uygulamanızı derleme

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Yeni uygulamanızı derlemek için aşağıdaki Angular komutunu girin.
```
ng serve
```

Uygulamanız derlenememelidir. Endişelenmeyin, sadece birkaç şeyi daha düzeltmeniz gerekiyor.

bootstrapApplication API'sini kullanma

Uygulamanızın NgModule olmadan çalışmasına izin vermek için bootstrapApplication API'sini kullanarak bağımsız bir bileşeni kök bileşen olarak kullanmanız gerekir.

Uygulama modülüne yapılan referansları kaldırma

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src dizinine gidin.
main.ts dosyasını açın.

Artık uygulama modülünüz olmadığından aşağıdaki içe aktarma kodunu kaldırın.

import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Artık uygulama modülünüz olmadığından aşağıdaki bootstrap kodunu kaldırın.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

main.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

bootstrapApplication bileşenini ekleme

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src dizinine gidin.
main.ts dosyasını açın.
bootstrapApplication bileşenini @angular/platform-browser hizmetinden içe aktarın.
```
import { bootstrapApplication } from '@angular/platform-browser';
```

Uygulamanızı başlatmak için aşağıdaki kodu ekleyin.

bootstrapApplication(AppComponent).catch(err => console.error(err));

Bileşeni ve gerekli kitaplıkları içe aktarın.

import { AppComponent } from './app/app.component';

main.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

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));

Yönlendirici ve ortak modüller ekleme

Yönlendirici'yi ve diğer yaygın modül özelliklerini kullanmak için her modülü doğrudan bileşene aktarmanız gerekir.

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.component.ts dosyasını açın.

Gerekli modülleri bileşene aktarın.

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

Bileşene içe aktarmaları ekleyin.

imports: [CommonModule, RouterModule],

app.component.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

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

app.component.ts dosyasını kaydedin.

Yeni bağımsız uygulamanızı derleme ve çalıştırma

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derleyip çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin. Derleme hatalarını gidermek için uygulamanızı çalıştırmadan önce IDE'nizi kapatmanız gerekebilir.
```
ng serve
```

Geliştirme sunucunuz 4200 bağlantı noktasında çalışmalıdır. Önceki tüm hatalar giderilmeli ve derleme başarılı olmalıdır. Tebrikler. Modül olmadan ve bağımsız bileşenle çalışan bir Angular uygulamasını başarıyla oluşturdunuz.

Ardından, uygulamanızı güzelleştirerek bazı fotoğrafları göstereceksiniz.

4. Fotoğrafları görüntüleme

Yeni uygulamanız, fotoğraf galerisi olarak tasarlanmış ve bazı fotoğrafları göstermesi gerekiyor.

Bileşenler, Angular uygulamalarının temel yapı taşlarıdır. Bileşenlerin 3 ana yönü vardır.

Şablon için bir HTML dosyası
Stiller için bir CSS dosyası
Uygulamanın davranışı için bir TypeScript dosyası

Fotoğrafları uygulamanıza taşıma

Resimler, daha önce GitHub'dan indirdiğiniz uygulamada sağlanır.

GitHub projesinin src/assets dizinine gidin.
Dosyaları kopyalayıp photo-gallery-app proje dizininizdeki analogue dizinine yapıştırın.

HTML şablonunu oluşturma

app.component.html dosyası, AppComponent bileşeniyle ilişkili HTML şablon dosyasıdır.

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.component.html dosyasını açın.
Mevcut tüm HTML'yi silin.

Aşağıdaki kod örneğindeki HTML'yi kopyalayıp yapıştırın.

<article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article

app.component.html dosyasını kaydedin.

Stil tanımı dosyasını oluşturma

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src dizinine gidin.
styles.css dosyasını açın.

Aşağıdaki kod örneğindeki CSS'yi kopyalayıp yapıştırın.

article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

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

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

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

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

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

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

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

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

styles.css dosyasını kaydetme

Dizin dosyasını güncelleme

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src dizinine gidin.
index.html dosyasını açın.
Tüm sayfaların bu yazı tipini devralmasına izin vermek için Raleway yazı tipini ekleyin.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
```
index.html dosyasını kaydedin.
Kodu kaydedin ve tarayıcınızı kontrol edin. Geliştirme sunucusu çalışırken değişiklikler kaydedildiğinde tarayıcıya yansıtılır.
Ardından, geri bildirim göndermek ve Jimbo ile sohbet etmek için yeni bir bağımsız bileşen oluşturacaksınız. Jimbo hakkında daha fazla bilgi edinmek için bu codelab'e devam edin.

5. Yeni bir bağımsız bileşen ekleme

Şimdiye kadar gördüğünüz gibi, bağımsız bileşenler NgModules ihtiyacını azaltarak Angular uygulamaları oluşturmanın basitleştirilmiş bir yolunu sunar. Aşağıdaki bölümlerde, kullanıcının geri bildirim göndermesine ve sanal temsilciyle sohbet etmesine olanak tanıyan yeni bir bağımsız bileşen oluşturacaksınız.

Yeni bir bağımsız bileşen oluşturma

Bu yeni bileşeni oluşturmak için Angular CLI'yı tekrar kullanırsınız.

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.

feedback-and-chat adlı yeni bir bileşen oluşturmak için aşağıdaki Angular komutunu girin.

ng generate component feedback-and-chat --standalone

Aşağıdaki tabloda komutun bölümleri açıklanmaktadır.

Bölüm	Ayrıntılar
`ng`	Angular çerçevesi için tüm Angular CLI komutlarını tanımlar.
`generate component`	Yeni bir bileşen için iskele oluşturur.
`feedback-and-chat`	Bileşenin adı
`--standalone`	Angular çerçevesine bağımsız bir bileşen oluşturmasını söyler.

Yeni bağımsız bileşeni içe aktarma

Yeni bağımsız bileşeni kullanmak için önce app.components.ts dosyasındaki imports dizisine eklemeniz gerekir.

Bu bağımsız bir bileşen olduğundan, modül gibi içe aktarmanız yeterlidir.

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.component.ts dosyasını açın.

Yeni bağımsız bileşeni içe aktarın.

import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

Bileşendeki içe aktarma işlemlerini güncelleyin.

imports: [CommonModule, RouterModule, FeedbackAndChatComponent],

app.component.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

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

app.component.ts dosyasını kaydedin.

Bileşeni geç yükleme

Kodu, ihtiyacınız olana kadar istemciye gönderilmeyen bir geç yükleme paradigmasına geçin. Geç yükleme, sayfa yükleme süresini kısaltmak, performansı artırmak ve kullanıcı deneyimini iyileştirmek için harika bir yaklaşımdır. Yönlendirici, ngModule ve bağımsız bir bileşen için aynı olan tembel yüklemeyi işler.

Uygulama bileşeniyle ilişkili HTML şablonunu güncelleme

Bağımsız bileşeni geç yüklemek için kullanıcı yalnızca bileşeni seçtiğinde etkinleştiren bir düğmeyi kullanıcı arayüzüne ekleyin.

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src/app dizinine gidin.
app.component.html dosyasını açın.

Dosyanın sonuna gidin ve article öğesini kapatmadan önce aşağıdaki kod örneğini ekleyin.

<a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>

app.component.html dosyası aşağıdaki kod örneğiyle eşleşmelidir.

<article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>

app.component.html dosyasını kaydedin.

Rotalarınızı yapılandırma

Bir kod düzenleyicide aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininizdeki src dizinine gidin.
main.ts dosyasını açın.
provideRouter yöntemini ve Routes modülünü içe aktarın. Angular v 14.2.0, uygulama için bir dizi rota yapılandırmamıza olanak tanıyan yeni bir provideRouter yöntemi sunmuştur.
```
import { provideRouter, Routes } from '@angular/router';
```

Aşağıdaki kod snippet'ini kopyalayıp içe aktarmalar ile if ifadesi arasına yapıştırın.

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

Aşağıdaki kod snippet'ini kopyalayıp yapıştırın ve bootstrapApplication yöntemini değiştirin.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

main.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

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

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

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

main.ts dosyasını kaydedin.

Chrome Geliştirici Araçları ile derleme ve inceleme

Angular çerçevesinin bileşeni nasıl tembel yüklediğini incelemek için Chrome Geliştirici Araçları'nı kullanın.

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derleyip çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin.
```
ng serve
```
Geliştirme sunucunuz 4200 bağlantı noktasında çalışmalıdır.

Tarayıcınızda aşağıdaki işlemleri tamamlayın.

Aşağıdaki sayfaya gidin.
```
http://localhost:4200
```
Chrome Geliştirici Araçları'nı açın ve Ağ sekmesini seçin.
Sayfayı yenilediğinizde feedback-and-chat bileşeni hariç birkaç dosya gösteriliyor.Ekranınız aşağıdaki ekran görüntüsüyle eşleşmelidir.
Bağımsız bileşene yönlendirmek için Bu kişiler hakkında daha fazla bilgi edinin düğmesini seçin.Günlük, bileşenin yalnızca tam yönlendiriciye ulaştığınızda yüklendiğini belirtmelidir. Bileşenin yüklendiğini kontrol etmek için listenin sonuna gidin. Ekranınız aşağıdaki ekran görüntüsüne benzemelidir.

6. Form için kullanıcı arayüzünü ekleyin

Geri bildirim gönderme formunda üç giriş kullanıcı arayüzü alanı ve altta bir düğme bulunur. Giriş için kullanılan üç kullanıcı arayüzü alanı; tam ad, gönderen e-posta adresi ve yorumlardır.

Kullanıcı arayüzünü desteklemek için üç giriş kullanıcı arayüzü alanının her biriyle ilişkili her contactForm form denetimine bağlanan bir input öğesine formControlName özelliği ekleyin.

Formu HTML şablonuna ekleme

Kullanıcının geri bildirim göndermesine izin vermek için kullanıcı arayüzüne bir form ekleyin.

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

feedback-and-chat.component.html dosyasına gidin.
Mevcut HTML'yi kaldırın.

Aşağıdaki kod örneğindeki HTML'yi kopyalayıp yapıştırın.

<article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>

feedback-and-chat.component.html dosyasını kaydedin.

Formun stil dosyasını güncelleme

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

feedback-and-chat.component.css dosyasına gidin.

Aşağıdaki kod örneğindeki CSS'yi kopyalayıp yapıştırın.

/*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

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

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

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

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

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

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

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

feedback-and-chat.component.css dosyasını kaydedin.

Form için kullanıcı arayüzü güncellemesini derleme

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derleyip çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin.
```
ng serve
```
Uygulamanız derlenememelidir. Endişelenmeyin, formu bağlamanız gerekir.
Şimdilik aşağıdaki öğeleri inceleyin.
- formGroup özellik bağlamasını kullanarak contactForm öğesini form öğesine ve ngSubmit etkinlik bağlamasına bağlarsınız.
- FormGroup yönergesi, form öğesi tarafından yayınlanan gönderme etkinliğini dinler. Ardından, FormGroup yönergesi, onSubmit geri çağırma işlevine bağlayabileceğiniz bir ngSubmit etkinliği yayınlar.
- Daha sonraki bir adımda, onSubmit geri çağırma işlevini feedback-and-chat.component.ts dosyasında uygularsınız.
Ardından formu bağlayacaksınız.

7. Forma etkinlik işleme ekleme

Geri bildirim gönder formunun kullanıcı arayüzü tamamlanmış ancak etkileşim eksik. Formlarla kullanıcı girişini işlemek, birçok yaygın uygulamanın temelini oluşturur.

Gerçek bir senaryoda, aşağıdaki işlemleri tamamlamak için işletme mantığını uygulamanız gerekir.

Kullanıcı girişini, bileşenle ilişkili oluşturulmuş DOM yapısından ayrıştırın.
Kullanıcı girişini doğrulayın. Bu işlem, botların spam göndermesini önlemek için Captcha veya benzer bir mekanizmayı içerir.
Belirlenen e-posta adresine e-posta gönderme
Kullanıcıya samimi bir mesaj gösterin.

Bu codelab'de yalnızca aşağıdaki işlemleri uygulayacaksınız.

Kullanıcı girişini, bileşenle ilişkili oluşturulmuş DOM yapısından ayrıştırın.
Kullanıcıya samimi bir mesaj gösterin.

Becerilerinizi test etmeli ve dört işlemi de uygulamalısınız.

Bileşene ileti gönderme formu modeli ekleme

Geri bildirim gönderme formu modelini oluşturun ve bileşen sınıfına ekleyin. Form modeli, formun durumunu belirler. FormBuilder hizmeti, kullanıcı arayüzü denetimi oluşturmak için kullanışlı yöntemler sunar.

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

feedback-and-chat.component.ts dosyasına gidin.
@angular/forms paketinden FormBuilder hizmetini ve ReactiveModule modülünü içe aktarın. Bu hizmet, kontroller oluşturmak için kullanışlı yöntemler sunar. Sonraki adımda inject işlevinden yararlanacağız. Bu nedenle, @angular/core işlevini de @angular/core'dan içe aktarmamız gerekiyor.
```
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
```

ReactiveFormsModule modülünü içe aktarın.

imports: [CommonModule,ReactiveFormsModule],

Aşağıdaki oluşturucuyu kaldırın.
```
constructor() { }
```
Sınıf imzasının hemen altındaki inject işlevi aracılığıyla FormBuilder hizmetini yerleştirin.
```
private formBuilder = inject(FormBuilder);
```
Bir kullanıcının adını, e-posta adresini ve yorumlarını toplamak için FormBuilder hizmetindeki group yöntemini kullanarak bir form modeli oluşturun.
Yeni contactForm mülkünü oluşturun ve bunu bir form modeline ayarlamak için group yöntemini kullanın.Form modeli name, email ve comments alanlarını içerir.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Formu işlemek için bir onSubmit yöntemi tanımlayın.Gerçek bir senaryoda onSubmit yöntemi, kullanıcının belirlenmiş bir e-posta adresine gönderilen bir e-posta iletisini kullanarak fotoğrafçıya geri bildirim iletisi göndermesine olanak tanır.Bu codelab'de kullanıcı girişlerini görüntüler, formu sıfırlamak için reset yöntemini kullanır ve kullanıcı dostu bir başarı mesajı gösterirsiniz.

Yeni onSubmit yöntemini ekleyin ve showMsg değişkenini başlatma işleminden sonra true olarak ayarlayın.

showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}

feedback-and-chat.component.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

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

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

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

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}

feedback-and-chat.component.ts dosyasını kaydedin.

Geri bildirim gönderme formu modelini derleme ve görüntüleme

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derleyip çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin.
```
ng serve
```
Geliştirme sunucunuz 4200 bağlantı noktasında çalışmalıdır.

Tarayıcınızda aşağıdaki işlemleri tamamlayın.

Aşağıdaki sayfaya gidin.
```
http://localhost:4200
```
Chrome Geliştirici Araçları'nı açın ve Konsol sekmesini seçin.
Tam Ad, E-posta ve Yorumlar metin kutularına değer girin.
Gönder düğmesini seçin.Sayfada bir başarı mesajı gösterilir.
Değerlerin Konsol sekmesinde gösterildiğini doğrulayın.Ekranınız aşağıdaki ekran görüntüsüyle eşleşmelidir. Bileşen kullanıcı arayüzüne mesaj gönderme formu eklemek ve kullanıcı girişlerini ayrıştırmak için kodu başarıyla uyguladınız.
Ardından, uygulama ziyaretçilerinin Jimbo ile konuşmasına olanak tanımak için bir sohbet diyaloğu yerleştirirsiniz. Jimbo, doğal yaşamla ilgili ilginç bilgiler öğrenebileceğiniz bir koala.

8. Sohbet diyaloğu ekleme

Dialogflow CX veya benzer platformlar gibi sohbet arayüzleriyle ilgili deneyimlerden yararlanma Dialogflow CX aracısı, insanlarla eşzamanlı sohbetleri yöneten bir sanal aracıdır. Bu modül, insan dilinin nüanslarını tanıyan ve bir sohbet sırasında son kullanıcı metnini veya sesini uygulamaların ve hizmetlerin anlayabileceği yapılandırılmış verilere çeviren bir doğal dil anlama modülüdür.

Kullanmanız için örnek bir sanal ajan oluşturuldu. Bu laboratuvarda yapmanız gereken, uygulama kullanıcılarının botla etkileşim kurmasına olanak tanımak için bağımsız bileşene bir sohbet diyaloğu eklemektir. Bu şart için, özelleştirilebilir bir iletişim kutusu sağlayan önceden oluşturulmuş bir entegrasyon olan Dialogflow Messenger'ı kullanacaksınız. Açıldığında sohbet iletişim kutusu ekranın sağ alt tarafında görünür ve temsilcinin varsayılan karşılama amacını tetikler. Bot, kullanıcıyı karşılar ve bir görüşme başlatır.

Aşağıdaki uygulama, kullanıcılara yaban hayatı hakkında eğlenceli bilgiler veriyor. Sanal temsilciler için diğer uygulamalar, müşterilerin karmaşık kullanım alanlarını (ör. bir müşteri hizmetleri temsilcisi) ele alabilir. Birçok şirket, şirket web sitesiyle iletişim kurmak için birincil kanal olarak sanal temsilci kullanır.

Dialogflow Messenger'ı bileşeninize ekleme

Form gibi, sohbet iletişim kutusu da yalnızca bağımsız bileşen yüklendiğinde gösterilmelidir.

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

feedback-and-chat.component.ts dosyasına gidin.

Aşağıdaki kod örneğindeki df-messenger öğesini kopyalayıp sayfanın herhangi bir yerine yapıştırın.

<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 Messenger entegrasyonunu seçtiğinizde Dialogflow, df-messenger öğesinin özelliklerini oluşturur.

Özellik	Ayrıntılar
agent-id	Önceden doldurulur. Dialogflow temsilcisinin benzersiz tanımlayıcısını belirtir.
chat-title	Önceden doldurulur. Sohbet iletişim kutusunun üst kısmında gösterilecek içeriği belirtir. Başlangıçta temsilcinizin adıyla önceden doldurulur ancak özelleştirmeniz gerekir.
df-cx	Etkileşimin bir CX temsilcisiyle olduğunu gösterir. Değeri `true` olarak ayarlayın.
amaç	Sohbet iletişim kutusu açıldığında ilk amacı tetiklemek için kullanılan özel etkinliği belirtir.
language-code	İlk amaç için varsayılan dil kodunu belirtir.
konum	Temsilciyi dağıttığınız bölgeyi belirtir.

feedback-and-chat.component.ts dosyasını kaydedin.

Geri bildirim gönderme formu modelini görüntüleme

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derlemek için aşağıdaki Angular komutunu girin.
```
ng serve
```
Uygulamanız derlenememelidir. Komut satırında aşağıdaki hata mesajı gösterilmelidir.
Ardından, özel bir şema ekleyin.

Bağımsız bileşene özel şema ekleme

df-messanger öğesi bilinen bir öğe değil. Bu, özel bir web bileşenidir. Angular çerçevesinden gelen hata mesajı, mesajı bastırmak için her iki bağımsız bileşene de CUSTOM_ELEMENTS_SCHEMA eklemeniz gerektiğini belirtiyor.

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

feedback-and-chat.component.ts dosyasına gidin.

CUSTOM_ELEMENTS_SCHEMA şemasını içe aktarın.

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';

CUSTOM_ELEMENTS_SCHEMA şemasını şema listesine ekleyin.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

feedback-and-chat.component.ts dosyası aşağıdaki kod örneğiyle eşleşmelidir.

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

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

...

df-messanger web bileşeni, yalnızca geri bildirim ve sohbet bileşeni yüklendiğinde yerleştirilmesi gereken bir JavaScript gerektirir. Bu amaçla, öğesini etkinleştirmek için gereken sohbet komut dosyasını yükleyecek olan ngOnInit() yöntemine ilgili kodu ekleyeceğiz.

ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}

feedback-and-chat.component.ts dosyasını kaydedin.

Güncellenen sohbet iletişim kutusunu derleyip görüntüleme

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derleyip çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin.
```
ng serve
```
Geliştirme sunucunuz 4200 bağlantı noktasında çalışmalıdır.

Tarayıcınızda aşağıdaki işlemleri tamamlayın.

Aşağıdaki sayfaya gidin.
```
http://localhost:4200
```
Sayfanın alt kısmında bir sohbet simgesi görünür.
Simgeyi seçip Jimbo ile etkileşime geçin.Jimbo, hayvanlarla ilgili ilginç bilgiler verir.
Uygulama tamamen işlevsel olmalıdır.

9. Uygulamayı Google App Engine'e dağıtma

Uygulama, makinenizde yerel olarak çalışıyor. Bu codelab'in sonraki ve son adımı olarak uygulamayı Google App Engine'e dağıtmanız gerekir.

Google App Engine hakkında daha fazla bilgi edinmek için App Engine başlıklı makaleyi inceleyin.

Google App Engine için ortamınızı ayarlama

Aşağıdaki koşulların tümünü zaten karşılıyorsanız sonraki adımları atlayıp uygulamayı dağıtmaya devam edin.

App Engine ile bir Cloud projesi oluşturduysanız
Cloud Build API'yi etkinleştirmiş olmanız gerekir.
Google Cloud CLI'yı yüklediyseniz

Aşağıdaki işlemleri tamamlayın.

Gmail veya Google Workspace hesabınızda oturum açın. Hesabınız yoksa Google Hesabı oluşturun.
Cloud kaynaklarını ve API'lerini kullanabilmek için Cloud Console'da faturalandırmayı etkinleştirin. Daha fazla bilgi için Self servis Cloud Faturalandırma Hesabınızı oluşturma, değiştirme veya kapatma başlıklı makaleyi inceleyin.
App Engine uygulama kaynaklarınızı ve diğer Google Cloud kaynaklarınızı barındırmak için bir Google Cloud projesi oluşturun. Daha fazla bilgi için Proje oluşturma ve yönetme başlıklı makaleyi inceleyin.
Cloud Console'da Cloud Build API'yi etkinleştirin. Daha fazla bilgi için API'ye erişimi etkinleştirme başlıklı makaleyi inceleyin.
Google Cloud CLI'yı ve gcloud komut satırı aracını yükleyin. Daha fazla bilgi için gcloud CLI'yı yükleme başlıklı makaleyi inceleyin.
Google Cloud CLI'yı başlatın ve gcloud'un, dağıtım yapmak istediğiniz Google Cloud projesini kullanacak şekilde yapılandırıldığından emin olun. Daha fazla bilgi için gcloud CLI'yı başlatma başlıklı makaleyi inceleyin.

Bağımsız uygulamanızı oluşturma

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamanın derlenip üretime hazır sürümünün oluşturulması için aşağıdaki Angular komutunu girin.
```
ng build
```

Uygulamanın üretime hazır sürümü, photo-gallery-app proje dizininizin dist alt dizininde oluşturulur.

10. Express.js çerçevesini kullanarak uygulamanızı dağıtma

Bu codelab'deki örnek kod, HTTP isteklerini işlemek için Express.js çerçevesini kullanır. Tercih ettiğiniz web çerçevesini kullanabilirsiniz.

Express.js çerçevesini yükleme

Bir komut satırı penceresinde aşağıdaki işlemi tamamlayın.

Express.js çerçevesini yüklemek için aşağıdaki komutu girin.
```
npm install express --save
```

Web sunucunuzu yapılandırma

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Yeni bir server.js dosyası oluşturun.

Aşağıdaki kodu kopyalayıp yapıştırın.

const express = require("express");
const path = require("path");

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

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

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

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

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});

server.js dosyasını kaydedin.

Web sunucunuzu ekleme

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
package.json dosyasını açın.

Başlatma komutunu, düğümü server.js dosyasında çalıştıracak şekilde değiştirin.

"name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

start özelliği, uygulamanızın giriş noktasıdır.

package.json dosyasını kaydedin.

App Engine'i yapılandırma

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Yeni bir app.yaml dosyası oluşturun.
Aşağıdaki kodu kopyalayıp yapıştırın.
```
runtime: nodejs16
service: default
```
app.yaml dosyasındaki bilgiler, App Engine'in yapılandırmasını belirtir. Yalnızca çalışma zamanını ve hizmeti belirtmeniz gerekir.
app.yaml dosyasını kaydedin.

gcloud yoksayılanlar listesini güncelleme

node_modules dizininizin yüklenmemesi için bir node_modules dosyası oluşturun..gcloudignore .gcloudignore dosyanızda listelenen dosyalar yüklenmez.

Kod düzenleyicinizde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Yeni bir .gcloudignore dosyası oluşturun.

Aşağıdaki kodu kopyalayıp yapıştırın.

# This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/

.gcloudignore dosyasını kaydedin.

Uygulamanızı başlatma

Uygulamayı dağıtmadan önce projenizle başlatın ve ilişkili bir bölge seçin.

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamanızı başlatmak için aşağıdaki komutu girin.
```
gcloud app create --project=[YOUR_PROJECT_ID]
```
İstendiğinde App Engine uygulamanızı yerleştirmek istediğiniz bölgeyi seçin.

Uygulamanızı dağıtma

Komut satırı penceresinde aşağıdaki işlemleri tamamlayın.

Yeni photo-gallery-app proje dizininize gidin.
Uygulamanızı dağıtmak için aşağıdaki komutu girin.
```
gcloud app deploy --project=[YOUR_PROJECT_ID]
```
İstemde işlemi onaylayın.gcloud dağıtım komutu başarıyla tamamlandıktan sonra uygulamanıza erişmek için bir URL gösterilir.
Tarayıcınızda yeni bir sekme açmak için aşağıdaki komutu girin.
```
gcloud app browse
```

11. Tebrikler

Tebrikler. Angular v14 kullanarak örnek bir fotoğraf galerisi oluşturdunuz ve bunu App Engine'e başarıyla dağıttınız.

Bağımsız bileşen özelliği ve geç yükleme ile denemeler yaptınız. Geri bildirim ve yorum göndermek için form tabanlı bir mesaj gönderme özelliği oluşturdunuz. Ayrıca, Dialogflow Messenger'ı kullanarak Dialogflow CX sanal aracısıyla sohbet diyaloğu eklemeyi de başarıyla tamamladınız. Tebrikler.

Sonraki adımlar

Temel başvuruyu tamamladığınıza göre aşağıdaki fikirlerden yararlanarak başvurunuzu daha iyi hale getirebilirsiniz.

Form aslında geri bildirim göndermiyor. E-posta gönderme iş mantığını eklemek için formu yeniden düzenleyin.
Gerçek hayattaki bir senaryoda, kullanıcı girişini doğrulamanız ve botların spam göndermesini önlemek için bir Captcha veya benzer bir mekanizma eklemeniz gerekir.
Yeni bir temsilci oluşturma ve Dialogflow CX'te sohbet akışları tasarlama

Angular çerçevesiyle denemeler yapmaya ve eğlenmeye devam edin.

Cloud projenizi temizleme ve silme

Cloud projenizi tutabilir veya projede kullanılan tüm kaynaklar için faturalandırmayı durdurmak üzere silebilirsiniz.

Tarayıcınızda aşağıdaki işlemleri tamamlayın.

Gmail veya Google Workspace hesabınızda oturum açın.
Google Cloud Console'da IAM ve Yönetici Ayarları düğmesini seçin.
IAM ve Yönetici sayfasında Kaynakları yönetin sekmesini seçin.
Kaynakları yönet sayfasında, silmek istediğiniz projeye gidin ve projeyi seçin. Sil düğmesini seçerek bir iletişim penceresi açın.
İletişim kutusunda proje kimliğini girin. Projeyi silmek için Kapat düğmesini seçin.

Düğüm sürümü	Angular tarafından desteklenir
14.15 veya daha yeni bir sürüm	Destekleniyor
16.10 veya daha yeni bir sürüm	Destekleniyor
18.1.0	Desteklenmiyor