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ı geliştireceksiniz. 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şturmak için basitleştirilmiş bir yol sağlar. Bağımsız bileşenler, bağımsız yönergeler ve bağımsız kanallar, NgModules ihtiyacını azaltarak yazma deneyimini kolaylaştırmayı amaçlar. Bağımsız bileşenler, mevcut Angular kitaplıkları ekosisteminden tam olarak yararlanabilir.

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

Tamamlanan 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şenlerini kullanma
  • Bağımsız bileşen oluşturma Kullanıcı arayüzünü oluşturmak ve iş mantığı ekleme
  • Bağımsız bir bileşen kullanarak bir uygulamayı önyükleme
  • Bağımsız bir bileşen geç yükleme
  • Dialogflow Messenger kullanarak bağımsız bir bileşene sohbet iletişim kutusu yerleştirme
  • Google Cloud KSA (gcloud) kullanarak Google Cloud App Engine'e Angular uygulaması dağıtma

Gerekenler

  • Gmail veya Google Workspace hesabı
  • Aşağıdaki konularla ilgili temel bilgiler
    • HTML'ye dokunun. Öğe oluşturma.
    • CSS ve daha fazlası. 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şimde bulunulacağı.
    • git ve GitHub. Depo çatallama ve klonlama.
    • bash veya zsh gibi bir 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ımı yüklemeniz gerekir.

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

    Düğüm Sürümü

    Angular tarafından destekleniyor

    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 bir komut satırı penceresinden aşağıdaki node komutunu çalıştırın.
    node -v
  • Bir 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üzenleyicidir.

Angular KSA'yı 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 bir 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.

Açısal sürümün terminal çıkışı

Kaynak kodu ve görüntüler

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. Zorlanırsanız son kodu ve galeri sayfasında görüntülenen resimleri inceleyin.

Kaynak kodu indirmek için:

  1. Tarayıcınızda aşağıdaki sayfaya gidin.
    https://github.com/angular/codelabs/tree/standalone-components
  2. 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 KSA'yı 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.

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

Angular KSA tamamlandıktan sonra yeni bir Angular çalışma alanınız ve basit bir çalıştırılmaya hazır 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 gereksiz.

Uygulama modülünü kaldırma

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

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

Uygulama modülünü sildikten sonra uygulamanızda modülünüz yok. Uygulamanızın yalnızca bir bileşeni vardır, bu bileşen uygulama bileşenidir. Bileşeni bağımsız olarak tanımlamanız gerekir.

Bağımsız bileşeninizi bildirme

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

  1. Yeni photo-gallery-app proje dizininizde src/app dizinine gidin.
  2. app.component.ts dosyasını açın.
  3. 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';
}
  4. app.component.ts dosyasını kaydedin.

Yeni bağımsız uygulamanızı derleyin

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

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

Uygulamanız derlenemedi. Merak etmeyin, birkaç şeyi daha düzeltmeniz gerekiyor.

bootstrapApplication API'yi kullanma

Uygulamanızın NgModule olmadan çalıştırılmasına izin vermek için bootstrapApplication API aracılığıyla kök bileşen olarak bağımsız bir bileşen kullanmanız gerekir.

Uygulama modülü referanslarını kaldırma

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

  1. Yeni photo-gallery-app proje dizininizdeki src dizinine gidin
  2. main.ts dosyasını açın.
  3. Artık uygulama modülünüz olmadığı için aşağıdaki içe aktarma kodunu kaldırın.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. Artık bir 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 ekleyin

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

  1. Yeni photo-gallery-app proje dizininizde src dizinine gidin.
  2. main.ts dosyasını açın.
  3. bootstrapApplication bileşenini @angular/platform-browser hizmetinden içe aktarın.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. Uygulamanızı önyüklemek için aşağıdaki kodu ekleyin.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. 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 ekleyin

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

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

  1. Yeni photo-gallery-app proje dizininizde src/app dizinine gidin.
  2. app.component.ts dosyasını açın.
  3. Gerekli modülleri bileşene aktarın.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. İç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';
}
  5. app.component.ts dosyasını kaydedin.

Yeni bağımsız uygulamanızı derleyin ve çalıştırın

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. 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 giderilmeli ve derleme başarılı olacaktır. Tebrikler. Modül olmadan ve bağımsız bir bileşene sahip çalışan bir Angular uygulamasını başarıyla oluşturdunuz.

  1. Sonra, birkaç fotoğraf görüntülemek için uygulamanızı güzelleştirin.

4. Fotoğrafları göster

Yeni uygulamanız bir fotoğraf galerisi olarak tasarlandı ve birkaç fotoğraf görüntülemelidir.

Bileşenler, Angular uygulamaları için 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ı
  • Uygulama davranışı için bir TypeScript dosyası

Fotoğrafları uygulamanıza taşıyın

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

  1. GitHub projesinin src/assets dizinine gidin.
  2. 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şkilendirilmiş HTML şablon dosyasıdır.

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

  1. Yeni photo-gallery-app proje dizininizde src/app dizinine gidin.
  2. app.component.html dosyasını açın.
  3. Mevcut tüm HTML'yi silin.
  4. Aşağıdaki kod örneğinden 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
  5. app.component.html dosyasını kaydedin.

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

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

  1. Yeni photo-gallery-app proje dizininizde src dizinine gidin.
  2. styles.css dosyasını açın.
  3. Aşağıdaki kod örneğinden 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%;
  }
}
  4. styles.css dosyasını kaydet

Dizin dosyasını güncelleme

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

  1. Yeni photo-gallery-app proje dizininizde src dizinine gidin.
  2. index.html dosyasını açın.
  3. 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">
  4. index.html dosyasını kaydedin.
  5. Kodu kaydedin ve tarayıcınızı kontrol edin. Geliştirme sunucusu çalışırken, değişiklikleri kaydettiğinizde değişiklikler tarayıcıya yansıtılır.
  6. 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 bağımsız bileşen ekleme

Şimdiye kadar gördüğünüz gibi, bağımsız bileşenler, NgModules gereksinimini azaltarak Angular uygulamaları oluşturmanın basitleştirilmiş bir yolunu sağlar. 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şturacaksınız.

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

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

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. 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şendir. Dolayısıyla bir modülymüş gibi içe aktarabilirsiniz.

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

  1. Yeni photo-gallery-app proje dizininizde src/app dizinine gidin.
  2. app.component.ts dosyasını açın.
  3. Yeni bağımsız bileşeni içe aktarın.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. 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';
}
  5. app.component.ts dosyasını kaydedin.

Bileşeni geç yükleyin

Erken yükleme paradigmasından, kodun siz ihtiyaç duyana kadar istemciye gönderilmediği geç yükleme paradigmasına geçin. Geç yükleme; sayfa yükleme süresini kısaltmak, performansı iyileştirmek ve kullanıcı deneyimini iyileştirmek için ideal bir yaklaşımdır. Yönlendirici, ngModule ve bağımsız bir bileşen için aynı şekilde geç yüklemeyi yönetir.

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

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

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

  1. Yeni photo-gallery-app proje dizininizde src/app dizinine gidin.
  2. app.component.html dosyasını açın.
  3. 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>
  4. 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>
  5. app.component.html dosyasını kaydedin.

Rotalarınızı yapılandırın

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

  1. Yeni photo-gallery-app proje dizininizde src dizinine gidin.
  2. main.ts dosyasını aç
  3. 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öntemini kullanıma sundu.
    import { provideRouter, Routes } from '@angular/router';
  4. 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),
  }
]
  5. 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));
  6. main.ts dosyasını kaydedin.

Chrome Geliştirici araçlarıyla derleme ve inceleme

Angular çerçevesinin, bileşeni nasıl geç 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.

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamayı derlemek, ç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.

  1. Aşağıdaki sayfaya gidin.
    http://localhost:4200
  2. Chrome Geliştirici Araçları'nı açın ve Ağ sekmesini seçin.
  3. 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.Chrome geliştirici araçları panelinin açık olduğu uygulama ekran görüntüsü
  4. 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 belirtmelidir. 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.Chrome geliştirici araçları panelinin açık olduğu ve geç yüklenen bileşeni gösteren uygulama ekran görüntüsü

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

Geri bildirim gönderme formunda üç giriş kullanıcı arayüzü alanı ve alt tarafta bir düğme bulunur. Üç giriş kullanıcı arayüzü alanı; tam ad, gönderen 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ı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.

  1. feedback-and-chat.component.html dosyasına gidin.
  2. Mevcut HTML'yi kaldırın.
  3. Aşağıdaki kod örneğinden 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>
  4. feedback-and-chat.component.html dosyasını kaydedin.

Form için stil dosyasını güncelleme

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

  1. feedback-and-chat.component.css dosyasına gidin.
  2. Aşağıdaki kod örneğinden 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;
  }
}
  3. feedback-and-chat.component.css dosyasını kaydedin.

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

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamayı derlemek, ç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.
  3. Ş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 yönergesi, form öğesi tarafından yayınlanan submit etkinliğini dinler. Daha sonra, FormGroup yönergesi 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ına onSubmit geri çağırma işlevini uygularsınız.
  4. Ardından formu bağlarsınız.

7. Forma etkinlik işleme ekleme

Geri bildirim gönder formunun kullanıcı arayüzü tamamlandı ancak etkileşim eksik. Formlarda kullanıcı girişlerini yönetmek birçok yaygın uygulamanın temelini oluşturur.

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

  1. Kullanıcı girişini, bileşenle ilişkili oluşturulan DOM yapısından ayrıştırın.
  2. Bot'ların spam yapmasını önlemek için Captcha veya benzer bir mekanizma içeren kullanıcı girişini doğrulayın.
  3. Belirli bir e-posta adresine e-posta gönderin.
  4. Kullanıcıya samimi bir mesaj gösterin.

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

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

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

Mesaj formu gönderme 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.

  1. feedback-and-chat.component.ts dosyasına gidin.
  2. @angular/forms paketinden FormBuilder hizmetini ve ReactiveModule modülünü içe aktarın. Bu hizmet, kontrol oluşturmak için uygun yöntemler sağlar. Sonraki adımda inject işlevinden yararlanacağız. Bu nedenle, bu işlevi de @angular/core kaynağından içe aktarmamız gerekecek.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. ReactiveFormsModule modülünü içe aktarın.
    imports: [CommonModule,ReactiveFormsModule],
  4. Aşağıdaki oluşturucuyu kaldırın.
    constructor() { }
  5. FormBuilder hizmetini, sınıf imzasının hemen altındaki inject işlevi aracılığıyla ekleyin.
    private formBuilder = inject(FormBuilder);
    . 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.
  6. Yeni contactForm özelliğini 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 belirtilen e-posta adresine gönderilen 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.
  7. Yeni onSubmit yöntemini ekleyin ve başlattıktan sonra showMsg değişkenini 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();
  }
}
  8. feedback-and-chat.component.ts dosyasını kaydedin.

Geri bildirim gönderme formu modelini derleyin ve görüntüleyin

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

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

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

  1. Aşağıdaki sayfaya gidin.
    http://localhost:4200
  2. Chrome Geliştirici Araçları'nı açın ve Konsol sekmesini seçin.
  3. Tam Ad, E-posta ve Yorumlar metin kutularına değerler girin.
  4. Gönder düğmesini seçin.Sayfada bir başarı mesajı görünecektir.
  5. Konsol sekmesinde görüntülenen değerleri doğrulayın.Ekranınız aşağıdaki ekran görüntüsüyle eşleşmelidir.Forma girilen json verilerini gösteren konsolun yer aldığı tarayıcı penceresiBileşenin kullanıcı arayüzüne bir mesaj gönder formu eklemek ve kullanıcı girişlerini ayrıştırmak için kodu başarıyla uyguladınız.
  6. Daha sonra, uygulama ziyaretçilerinin Jimbo ile konuşmasına izin vermek için bir sohbet iletişim kutusu yerleştirebilirsiniz. Jimbo, vahşi yaşam hakkında muhteşem bilgiler öğrendiğiniz bir koala.

8. Sohbet diyalogu ekle

Dialogflow CX gibi sohbet arayüzleri veya benzer platformlardaki deneyiminizden yararlanın. Dialogflow CX aracısı, insanlarla eşzamanlı olarak konuşmaları yürüten 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.

Zaten kullanmanız için örnek bir sanal aracı oluşturuldu. Bu laboratuvarda yapmanız gereken, 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 eklemektir. Bu gereksinim için özelleştirilebilir bir iletişim penceresi sağlayan önceden oluşturulmuş bir entegrasyon olan Dialogflow Messenger'dan yararlanacaksı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ılara yönelik diğer uygulamalar, müşteriler için karmaşık kullanım alanlarına (ör. gerçek bir çağrı merkezi temsilcisi) yönelik olabilir. Birçok şirket, şirket web sitesiyle birincil iletişim kanalı olarak sanal aracıyı kullanır.

Bileşeninize Dialogflow Messenger'ı ekleme

Formda olduğu gibi, sohbet iletişim kutusu yalnızca bağımsız bileşen yüklendiğinde görüntülenmelidir.

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

  1. feedback-and-chat.component.ts dosyasına gidin.
  2. 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 öğesi için özellikler oluşturur.

    Özellik

    Ayrıntılar

    temsilci kimliği

    Önceden doldurulur. Dialogflow aracısının benzersiz tanımlayıcısını belirtir.

    sohbet-başlığı

    Önceden doldurulur. Sohbet iletişim kutusunun en üstünde görüntülenecek içeriği belirtir. Başlangıçta aracınızın adı ö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.

    dil kodu

    İlk amaç için varsayılan dil kodunu belirtir.

    konum

    Aracıyı dağıtacağınız bölgeyi belirtir.

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

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

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. 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.df-messenger hata mesajı
  3. 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 alınan hata mesajı, mesajı engellemek için her iki bağımsız bileşene de CUSTOM_ELEMENTS_SCHEMA eklemeniz gerektiğini gösterir.

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

  1. feedback-and-chat.component.ts dosyasına gidin.
  2. CUSTOM_ELEMENTS_SCHEMA şemasını içe aktarın.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. Ş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]
})

...
  4. 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, 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);
}
  5. feedback-and-chat.component.ts dosyasını kaydedin.

Güncellenmiş sohbet iletişim kutusunu derleyin ve görüntüleyin

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamayı derlemek, ç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.

  1. Sonraki sayfaya gidin.
    http://localhost:4200
    . Sayfanın alt kısmında bir sohbet simgesi görünecektir.
  2. Simgeyi seçin ve Jimbo ile etkileşimde bulunun.Jimbo, hayvanlarla ilgili ilginç bilgiler sunuyor.Messenger bot&#39;unun yanıt verdiği sohbet penceresini gösteren uygulama
  3. 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 yapmak istediğiniz şey, codelab'i Google App Engine'e dağıtmaktır.

Google App Engine hakkında daha fazla bilgi edinmek için App Engine'e bakın.

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

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

  • App Engine ile Cloud projesi oluşturuldu
  • Cloud Build API etkinleştirildi
  • Google Cloud CLI yüklendi

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

  1. Gmail veya Google Workspace hesabınızda oturum açın. Hesabınız yoksa Google Hesabınızı oluşturun.
  2. Cloud kaynaklarını ve API'lerini kullanabilmek için Cloud Console'da faturalandırmayı etkinleştirin. Daha fazla bilgi edinmek için Self servis Cloud Faturalandırma hesabınızı oluşturma, değiştirme veya kapatma başlıklı makaleyi inceleyin.
  3. App Engine uygulama kaynaklarınızı ve diğer Google Cloud kaynaklarınızı saklamak için bir Google Cloud projesi oluşturun. Daha fazla bilgi için Proje oluşturma ve yönetme başlıklı makaleyi inceleyin.
  4. Cloud Console'da Cloud Build API'yi etkinleştirin. Daha fazla bilgi için API'ye erişimi etkinleştirme bölümüne bakın.
  5. Google Cloud KSA'yı ve gcloud komut satırı aracını yükleyin. Daha fazla bilgi edinmek için gcloud KSA'yı yükleme başlıklı makaleye göz atın.
  6. 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ı derleme

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamanın derlemeye hazır sürümünü derlemek ve 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 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.

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

Web sunucunuzu yapılandırın

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Yeni bir server.js dosyası oluşturun.
  3. 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}`);
});
  4. server.js dosyasını kaydedin.

Web sunucunuzu ekleyin

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. package.json dosyasını açın.
  3. Düğümü server.js dosyasında ç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.
  4. package.json dosyasını kaydedin.

App Engine'i yapılandırma

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Yeni bir app.yaml dosyası oluşturun.
  3. 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.
  4. app.yaml dosyasını kaydedin.

gcloud yoksayma listesini güncelleme

node_modules dizininizin yüklenmediğinden emin olmak için bir .gcloudignore dosyası oluşturun. .gcloudignore dosyanızda listelenen dosyalar yüklenmedi.

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Yeni bir .gcloudignore dosyası oluşturun.
  3. 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/
  4. .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.

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamanızı başlatmak için aşağıdaki komutu girin.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. İstemde, App Engine uygulamanızı bulmak istediğiniz bölgeyi seçin.

Uygulamanızı dağıtma

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

  1. Yeni photo-gallery-app proje dizininize gidin.
  2. Uygulamanızı dağıtmak için aşağıdaki komutu girin.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. İ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österir.
  4. Tarayıcınızda yeni bir sekme açmak için aşağıdaki komutu girin.
    gcloud app browse
    gcloud app Distribution&#39;ın konsol çıkışı ve glcoud uygulamasına göz atma girişi

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 bir Dialogflow CX sanal aracısıyla başarıyla bir sohbet diyaloğu eklediniz. Tebrikler.

Sonraki adımlar

Artık temel uygulama işlemini tamamladığınıza göre, aşağıdaki fikirlerden yararlanarak uygulamayı iyileştirebilirsiniz.

  • Form aslında geri bildirim göndermiyor. Formu yeniden düzenleyerek e-posta göndermek için iş mantığı ekleyin.
  • Gerçek hayattan bir senaryoda, kullanıcı girişini doğrulamalı ve botların spam yapmasını önlemek için Captcha ya da benzer bir mekanizmaya yer vermelisiniz.
  • Yeni bir aracı oluşturun ve Dialogflow CX'te görüşme akışları tasarlamayı öğrenin

Angular çerçevesini denemeye devam edin ve eğlenin.

Cloud projenizi temizleme ve silme

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

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

  1. Gmail veya Google Workspace hesabınızda oturum açın.
  2. Google Cloud konsolunda IAM ve Yönetici Ayarları düğmesi.
  3. IAM ve Yönetici sayfasında.Kaynakları yönet sekmesini seçin.
  4. Kaynakları yönetin sayfasında.Silmek istediğiniz projeye gidin ve projeyi seçin.Bir iletişim penceresi açmak için Sil düğmesini seçin.
  5. İletişim penceresinde, proje kimliğini girin. Projeyi silmek için Kapat düğmesini seçin.