Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

1. Giriş

Ne oluşturacaksınız?

Bu codelab'de, Angular v14'ü kullanarak vahşi yaşam fotoğraf galerisi uygulaması oluşturacaksınız. Tamamlanan uygulamada bir dizi fotoğraf gösterilir. Ayrıca uygulamada, fotoğrafçıyla iletişim kurmak için kullanabileceğiniz bir mesaj gönder formu ve fotoğraflarda gösterilen hayvanlarla ilgili ilginç bilgiler öğrenebileceğiniz bir sohbet penceresi bulunur.

Angular v14'ü ve yeni bağımsız bileşenler özelliğini kullanarak uygulamanızdaki her şeyi derlersiniz.

Angular çerçevesi ve Angular KSA'ya yapılan 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 basit bir yolunu sunar. Bağımsız bileşenler, bağımsız yönergeler ve bağımsız borular, NgModules ihtiyacını azaltarak içerik oluşturma deneyimini kolaylaştırmayı amaçlar. Bağımsız bileşenler, mevcut Angular kitaplığı ekosisteminden tam olarak yararlanabilir.

Bu, bugün oluşturduğunuz uygulamadır.

Tamamlanmış Başvuru

Öğrenecekleriniz

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

Gerekenler

Gmail veya Google Workspace hesabı
Aşağıdaki konularda temel düzeyde bilgi sahibi olma
- HTML. Öğe oluşturma.
- CSS ve daha az. CSS seçici nasıl kullanılır ve stil tanımı dosyası nasıl oluşturulur?
- TypeScript veya JavaScript. DOM yapısıyla nasıl etkileşim kurulacağı.
- git ve GitHub. Depo çatallama ve klonlama.
- 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'nin etkin bir LTS veya bakım LTS sürümü. Angular çerçevesini ve Angular CLI'yi yüklemek için kullanılır.

Düğüm sürümü

Angular tarafından desteklenir

14.15 veya daha yeni

Destekleniyor

16.10 veya daha yeni sürümler

Destekleniyor

18.1.0

Desteklenmiyor

Yerel bilgisayarınızdaki Node.js sürümünü doğrulamak için 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'yi yükleme

Tüm bağımlılıkları yapılandırdıktan sonra, aşağıdaki npm komutunu çalıştırarak Angular KSA'yı bir komut satırı penceresinden yükleyin.

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 kod ve resimler

Tüm uygulamayı sıfırdan oluşturabilirsiniz. Adım adım açıklamalı bu codelab'den yardım alabilirsiniz. GitHub deposunun son kodu içerdiğini unutmayın. Sorun yaşarsanı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

Komut satırı penceresinde, deposu çatallayın ve klonlayın.

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

3. Yeni uygulama oluşturma

İlk başlatıcı uygulamayı oluşturmak için aşağıdaki işlemleri tamamlayın.

Yeni bir çalışma alanı oluşturmak için Angular CLI'yi kullanın. Angular KSA ve Angular çerçevesi hakkında daha fazla bilgi edinmek için angular.io sayfasına 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ı ve çalıştırmaya hazır basit bir uygulamanız olur.

Yeni uygulamanız standart bir Angular uygulaması gibi yapılandırılmıştı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 bileşen (uygulama bileşeni) vardır. Bileşeni bağımsız olarak beyan etmeniz gerekir.

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

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.

Denetçiler listenize aşağıdaki parametreyi ve değeri ekleyin.

standalone: true

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

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 derlenemez. Merak etmeyin, birkaç şeyi daha düzeltmeniz gerekiyor.

bootstrapApplication API'yi kullanma

Uygulamanızın NgModule olmadan çalışmasına izin vermek için bootstrapApplication API'sini kullanarak kök bileşen olarak bağımsız bir bileşen 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 bir 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 önyükleme 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

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ı önyüklemek 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önlendiriciyi ve diğer ortak modül özelliklerini kullanmak için her modülü doğrudan bileşene aktarmanız gerekir.

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

İçe aktarma işlemlerini bileşene 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ı derleyip çalıştırma

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

Yeni photo-gallery-app proje dizininize gidin.
Uygulamayı derlemek, çalıştırmak ve bir web sunucusu açmak için aşağıdaki Angular komutunu girin. Derleme hatalarını kaldırmak 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 giderilmiş ve derleme başarılı olmalıdır. Tebrikler. Modül olmadan ve bağımsız bir 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 bir fotoğraf galerisi olarak tasarlandı ve birkaç fotoğraf görüntülemelidir.

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ı, photo-gallery-app proje dizininizdeki analogue dizinine kopyalayıp yapıştırın.

HTML şablonunu oluşturma

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

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ımlama dosyasını oluşturma

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

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

Yeni photo-gallery-app proje dizininizde src dizinine gidin.
index.html dosyasını açın.

Tüm sayfaların 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 kaydedip tarayıcınızı kontrol edin. Geliştirme sunucusu çalışırken, kaydettiğinizde değişiklikler tarayıcıya yansıtılır.
Daha sonra, 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, NgModule'lere olan ihtiyacı 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 bir temsilciyle sohbet etmesine olanak tanıyan yeni bir bağımsız bileşen oluşturursunuz.

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

Bu yeni bileşeni oluşturmak için tekrar Angular CLI'yi 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 iskeleti 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şendir. Bu nedenle, modül gibi içe aktarmanız yeterlidir.

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

İstenmeden yükleme paradigmasından, ihtiyacınız olana kadar kodun müşteriye gönderilmediği yavaş yükleme paradigmasına geçin. Geç yükleme, sayfanın yüklenme süresini azaltmak, performansı ve kullanıcı deneyimini iyileştirmek için mükemmel bir yaklaşımdır. Yönlendirici, ngModule ve bağımsız bileşenler için aynı olan gecikmeli yüklemeyi yönetir.

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

Bağımsız bileşeni yavaş yüklemek için kullanıcının seçmesi durumunda bileşeni etkinleştiren bir düğmeyi kullanıcı arayüzüne ekleyin.

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çma
provideRouter yöntemini ve Rotalar modülünü içe aktarın. Angular 14.2.0 sürümü, uygulama için bir dizi rota yapılandırmamıza olanak tanıyan yeni bir provideRouter yöntemi kullanıma sunmuştur.
```
import { provideRouter, Routes } from '@angular/router';
```

Aşağıdaki kod snippet'ini kopyalayıp içe aktarma işlemleri 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 yavaş 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.
feedback-and-chat bileşenini değil, birkaç dosyayı görüntülemek için sayfayı yenileyin.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 adamlar 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 belirtir. Bileşenin yüklenip yüklenmediğini kontrol etmek için listenin sonuna gidin. Ekranınız aşağıdaki ekran görüntüsüyle eşleşmelidir.

6. Formun kullanıcı arayüzünü ekleme

Geri bildirim gönderme formunda üç giriş kullanıcı arayüzü alanı ve alt kısımda bir düğme bulunur. Üç giriş kullanıcı arayüzü alanı; tam ad, gönderenin e-posta adresi ve yorumlardır.

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

Formu HTML şablonuna ekleyin

Kullanıcıları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 derlenemez. Endişelenmeyin, formu bağlamanız gerekiyor.
Şimdilik aşağıdaki öğeleri inceleyebilirsiniz.
- contactForm öğesini form öğesine ve ngSubmit etkinlik bağlamasına bağlamak için formGroup özellik bağlamasını kullanıyorsunuz.
- FormGroup direktifi, form öğesi tarafından yayınlanan gönderme etkinliğini dinler. Ardından FormGroup yönü, onSubmit geri çağırma işlevine bağlayabileceğiniz bir ngSubmit etkinliği yayınlar.
- Daha sonraki bir adımda, feedback-and-chat.component.ts dosyasında onSubmit geri çağırma işlevini uygularsınız.
Ardından formu bağlayacaksınız.

7. Forma etkinlik işleme ekleyin

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

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

Bileşenle ilişkili oluşturulan DOM yapısından kullanıcı girişini ayrıştırın.
Spam gönderen botları önlemek için kullanıcı girişini doğrulayın. Bu doğrulama işleminde Captcha veya benzer bir mekanizma kullanılabilir.
Belirli bir e-posta adresine e-posta gönderin.
Kullanıcıya samimi bir mesaj gösterin.

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

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

Becerilerinizi sınamalı ve dördünü de uygulamalısınız.

Mesaj gönderme formu modelini bileşene ekleme

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

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, kontrol oluşturmak için kullanışlı yöntemler sunar. Sonraki adımda inject işlevinden yararlanacağız. Bu nedenle, @angular/core'dan bu işlevi de 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 kurucuyu kaldırın.
```
constructor() { }
```
Sınıf imzasının hemen altındaki inject işlevi aracılığıyla FormBuilder hizmetini ekleyin.
```
private formBuilder = inject(FormBuilder);
```
Bir kullanıcının adını, e-posta adresini ve yorumlarını toplamak için bir form modeli oluşturmak üzere FormBuilder hizmetinden group yöntemini kullanın.
Yeni contactForm mülkünü oluşturun ve group yöntemini kullanarak bir form modeline ayarlayın.Form modeli name, email ve comments alanlarını içerir.
```
contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
```
Formu işlemek için onSubmit yöntemi tanımlayın.Gerçek bir senaryoda onSubmit yöntemi, kullanıcının belirlenen e-posta adresine gönderilen bir e-posta mesajını kullanarak fotoğrafçıya geri bildirim mesajı göndermesine olanak tanır.Bu codelab'de kullanıcı girişlerini gösterir, 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şlattıktan 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 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
```
Chrome Geliştirici Araçları'nı açıp Konsol sekmesini seçin.
Tam Ad, E-posta ve Yorumlar metin kutularına herhangi bir değer girin.
Gönder düğmesini seçin.Sayfada bir başarı mesajı gösterilir.
Konsol sekmesinde gösterilen değerleri 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önder 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 izin vermek için bir sohbet iletişim kutusu yerleştirin. Jimbo, vahşi yaşam hakkında ilginç bilgiler veren bir koala.

8. Sohbet diyaloğu ekleme

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

Kullanabileceğiniz bir örnek sanal temsilci oluşturuldu. Bu laboratuvarda, uygulama kullanıcılarının bot ile etkileşim kurmasını sağlamak için bağımsız bileşene bir sohbet iletişim kutusu eklemeniz gerekir. Bu şart için, özelleştirilebilir bir iletişim kutusu sağlayan önceden oluşturulmuş bir entegrasyon olan Dialogflow Messenger'dan yararlanırsınız. Sohbet iletişim kutusu açıldığında ekranın sağ alt tarafında görünür ve temsilcinin varsayılan karşılama niyetini tetikler. Bot, kullanıcıyı selamlar ve bir sohbet başlatır.

Aşağıdaki uygulamada, vahşi yaşamla ilgili eğlenceli bilgiler kullanıcıyla paylaşılmaktadır. Sanal aracılar için diğer uygulamalar, müşteriler için karmaşık kullanım alanlarını (ör. gerçek bir müşteri temsilcisi) ele alabilir. Birçok şirket, şirket web sitesiyle birincil iletişim kanalı olarak sanal temsilci kullanır.

Bileşeninize Dialogflow Messenger'ı 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 bunu özelleştirmeniz gerekir.
df-cx	Etkileşimin bir CX aracısıyla 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 intent 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 derlenemez. Komut satırında aşağıdaki hata mesajı gösterilir.
Ardından, özel bir şema ekleyin.

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

df-messanger öğesi bilinen bir öğe değil. Özel bir Web Bileşeni'dir. Angular çerçevesinden gelen hata mesajı, mesajı engellemek için her iki bağımsız bileşene de CUSTOM_ELEMENTS_SCHEMA eklemeniz gerektiğini belirtir.

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

Şema listesine CUSTOM_ELEMENTS_SCHEMA öğesini 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 eklenmesi gereken bir JavaScript gerektirir. Bu amaçla, ilgili kodu ngOnInit() yöntemine ekleyeceğiz. Bu kod, öğesini etkinleştirmek için gereken sohbet komut dosyasını yükleyecek.

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çin ve Jimbo ile etkileşime geçin.Jimbo, hayvanlarla ilgili ilginç bilgiler sağlar.
Uygulama tamamen işlevseldir.

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

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

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

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

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

App Engine ile Cloud projesi oluşturuldu
Cloud Build API etkinleştirildi
Google Cloud CLI'yi yüklemiş olmanız gerekir.

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

Gmail veya Google Workspace hesabınızda oturum açın. Hesabınız yoksa Google Hesabınızı 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ıracak 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 KSA'yı ve gcloud komut satırı aracını yükleyin. Daha fazla bilgi için gcloud CLI'yi yükleme başlıklı makaleyi inceleyin.
Google Cloud KSA'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 edinmek için gcloud KSA'yı başlatma bölümüne bakın.

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.
Uygulamayı derlemek ve üretime hazır bir sürümü oluşturmak 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. Uygulamanızı Express.js çerçevesini kullanarak dağıtma

Bu kod laboratuvarındaki ö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.

server.js dosyasındaki düğümü çalıştırmak için start komutunu 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 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üklenmediğinden emin olmak için bir .gcloudignore dosyası oluşturun. .gcloudignore dosyanızda listelenen dosyalar yüklenmiyor.

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ı ilk kullanıma hazırlayın

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ın bulunmasını 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şebileceğiniz 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ğini ve geç yüklemeyi denediniz. Geri bildirim ve yorum sağlamak için form tabanlı bir mesaj gönderme özelliği oluşturdunuz. Ayrıca Dialogflow Messenger'ı kullanarak Dialogflow CX sanal aracıyla bir sohbet diyaloğu da başarıyla eklediniz. Tebrikler.

Sonraki adımlar

Temel uygulamayı tamamladığınıza göre aşağıdaki fikirleri kullanarak uygulamayı iyileştirin.

Form aslında geri bildirim göndermiyor. E-posta göndermek için iş mantığını eklemek üzere yeniden yapılandırın.
Gerçek hayatta, botların spam göndermesini önlemek için kullanıcı girişini doğrulamanız ve bir Captcha veya benzer bir mekanizma eklemeniz gerekir.
Yeni bir aracı oluşturun ve Dialogflow CX'te görüşme akışları tasarlamayı öğrenin

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

Cloud projenizi temizleme ve silme

Cloud projenizi saklayabilir veya projede kullanılan tüm kaynakların faturalandırılmasını durdurmak için silebilirsiniz.

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

Gmail veya Google Workspace hesabınızda oturum açın.
Google Cloud konsolunda 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. Bir iletişim penceresi açmak için Sil düğmesini seçin.
İ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	Destekleniyor
16.10 veya daha yeni sürümler	Destekleniyor
18.1.0	Desteklenmiyor