Açısal sinyalleri kullanmaya başlama

1. Başlamadan önce

Angular Signals, bildiğiniz ve sevdiğiniz Angular'a üç reaktif temel öğe ekleyerek geliştirme sürecinizi basitleştirir ve varsayılan olarak daha hızlı uygulamalar oluşturmanıza yardımcı olur.

Ne oluşturacaksınız?

• Angular Signals ile kullanıma sunulan üç reaktif temel öğe (signal(), computed() ve effect()) hakkında bilgi edinirsiniz.
• Angular Cipher oyununa güç katmak için Angular Signals'ı kullanın. Şifreler, verileri şifrelemek ve şifrelerini çözmek için kullanılan sistemlerdir. Bu oyunda kullanıcılar, ipuçlarını sürükleyip bırakarak şifre çözüp gizli mesajları deşifre edebilir, mesajı özelleştirebilir ve arkadaşlarına gizli mesajlar göndermek için URL'yi paylaşabilir.

Ön koşullar

• Angular ve Typescript bilgisi
• Önerilen: Angular Signals kitaplığı hakkında bilgi edinmek için Rethinking Reactivity with Signals (Sinyallerle Reaktiviteyi Yeniden Düşünme) başlıklı videoyu izleyin.

2. Kodu alın

Bu proje için ihtiyacınız olan her şey Stackblitz'de yer alır. Bu codelab'i tamamlamak için Stackblitz'i kullanmanızı öneririz. Alternatif olarak, kodu klonlayıp en sevdiğiniz geliştirme ortamında açabilirsiniz.

Stackblitz'i açın ve uygulamayı çalıştırın.

Başlamak için Stackblitz bağlantısını tercih ettiğiniz web tarayıcısında açın:

1. Yeni bir tarayıcı sekmesi açın ve https://stackblitz.com/edit/io-signals-codelab-starter?file=src%2Fcipher%2Fservice.cipher.ts,src%2Fsecret-message%2Fservice.message.ts&service.massage.ts adresine gidin.
2. Kendi düzenlenebilir çalışma alanınızı oluşturmak için Stackblitz'i çatallayın. Stackblitz uygulamayı otomatik olarak çalıştırır ve kullanmaya başlayabilirsiniz.

Alternatif: Depoyu klonlayın ve uygulamayı sunun

Bu codelab'i tamamlamak için VSCode veya yerel bir IDE kullanabilirsiniz:

1. Yeni bir tarayıcı sekmesi açın ve https://github.com/angular/codelabs/tree/signals-get-started adresine gidin.
2. Depoyu çatallayıp klonlayın ve cd codelabs/ komutunu kullanarak depoya gidin.
3. git checkout signals-get-started komutuyla başlangıç kodu dalını inceleyin.
4. Kodu VSCode'da veya tercih ettiğiniz IDE'de açın.
5. Sunucuyu çalıştırmak için gereken bağımlılıkları yüklemek üzere npm install komutunu kullanın.
6. Sunucuyu çalıştırmak için ng serve komutunu kullanın.
7. http://localhost:4200 adresine gitmek için bir tarayıcı sekmesi açın.

3. Temel bir değer belirleme

Başlangıç noktanız bir Angular Cipher oyunu ancak henüz çalışmıyor. Angular Signals, oyunun işlevselliğini destekleyecek.

Başlamak için oluşturacağınız uygulamanın tamamlanmış sürümünü inceleyin: Angular Signals Cypher.

1. Kodlanmış mesajı ekranda görüntüleyin.
2. Şifreyi çözmek ve gizli mesajı deşifre etmek için tuş takımındaki bir harf düğmesini sürükleyip bırakın.
3. Başarılı olduğunda, mesajın gizli mesajın daha fazlasını çözmek için nasıl güncellendiğini görün.
4. Gönderen ve Mesaj'ı değiştirmek için Özelleştir'i, ekrandaki değerleri ve URL'nin değiştiğini görmek için Oluştur ve URL'yi Kopyala'yı tıklayın.
5. Bonus: URL'yi kopyalayıp yeni bir sekmeye yapıştırın veya bir arkadaşınızla paylaşın. Ardından, gönderenin ve mesajın URL'de nasıl saklandığını görün.

4. İlk sinyalinizi tanımlama()

Sinyal, Angular'a değiştiği zamanı söyleyebilen bir değerdir. Bazı sinyaller doğrudan değiştirilebilirken bazıları değerlerini diğer sinyallerin değerlerinden hesaplar. Sinyaller birlikte, verilerin uygulamanızda nasıl aktığını modelleyen yönlendirilmiş bir bağımlılık grafiği oluşturur.

Angular, hangi bileşenlerin değişiklik algılaması yapması gerektiğini bilmek veya tanımladığınız effect işlevlerini yürütmek için sinyallerden gelen bildirimleri kullanabilir.

superSecretMessage öğesini signal() öğesine dönüştürme

superSecretMessage, oyuncunun şifresini çözeceği gizli mesajı tanımlayan MessageService içindeki bir değerdir. Şu anda değer, uygulamaya değişiklikler hakkında bildirim göndermediği için Özelleştir düğmesi çalışmıyor. Bu sorunu bir sinyalle çözebilirsiniz.

superSecretMessage öğesini sinyal haline getirerek, mesajın ne zaman değiştiğini bilmeye bağlı olan uygulama bölümlerini bilgilendirebilirsiniz. İletiyi bir iletişim kutusunda özelleştirdiğinizde, uygulamanın geri kalanını yeni iletiyle güncellemek için sinyali ayarlarsınız.

İlk sinyalinizi tanımlamak için her dosyadaki TODO(1): Define your first signal() yorumunun altında aşağıdaki adımları uygulayın:

1. service.message.ts dosyasında, superSecretMessage öğesini reaktif hale getirmek için Signals kitaplığını kullanın:

src/app/secret-message/service.message.ts

superSecretMessage = signal(
  'Angular Signals are in developer preview in v16 today!'
);

Bu işlem, signal dosyasını @angular/core konumundan içe aktarmanızı otomatik olarak ister. Sayfayı yenilerseniz daha önce superSecretMessage simgesine başvurduğunuz yerlerde hatalarla karşılaşabilirsiniz. Bunun nedeni, superSecretMessage türünü string olarak değiştirmenizdir.SettableSignal<string> superSecretMessage ile ilgili tüm referansları Signals API'yi kullanacak şekilde değiştirerek bu sorunu düzeltebilirsiniz. Değeri okuduğunuz her yerde Signal getter superSecretMessage() öğesini çağırın. Değeri yazdığınız her yerde, mesajın yeni değerini ayarlamak için SettableSignal üzerinde .set API'sini kullanın.

2. secret-message.ts ve service.message.ts dosyalarında, superSecretMessage ile ilgili tüm referansları superSecretMessage() olarak güncelleyin:

src/app/secret-message/secret-message.ts

// Before
this.messages.superSecretMessage
this.messages.superSecretMessage = message;

// After
this.messages.superSecretMessage()
this.messages.superSecretMessage.set(message);

src/app/secret-message/service.message.ts

// Before
this.superSecretMessage

// After
this.superSecretMessage()

Diğer iki sinyali keşfedin

• Uygulamanızda iki sinyal daha olduğunu fark edeceksiniz:

src/app/cipher/service.cipher.ts

cipher = signal(this.createNewCipherKey());
decodedCipher = signal<CipherKey[]>([]);

CipherService, cipher sinyalini tanımlar. Bu sinyal, alfabenin bir harfinin anahtar/değer çiftlerinin rastgele oluşturulmuş bir eşlemesidir ve yeni bir cipher harfiyle eşlenir. Bu, mesajı karıştırmak ve oyuncunun klavyede başarılı bir eşleşme bulup bulmadığını belirlemek için kullanılır.

Ayrıca, oyuncu şifreyi çözerken ekleyeceğiniz başarıyla çözülmüş anahtar-değer çiftlerinin decodedCipher sinyaline de sahip olursunuz.

Angular'ın Signals kitaplığı tasarımının benzersiz ve güçlü bir özelliği, her yerde tepkisellik sunabilmenizdir. Sinyalleri uygulamanın hizmetlerinde bir kez tanımlarsınız ve bunları şablonda, bileşenlerde, borularda, diğer hizmetlerde veya uygulama kodu yazabileceğiniz herhangi bir yerde kullanabilirsiniz. Bir bileşen kapsamıyla sınırlı veya bağlı değildir.

Değişiklikleri doğrulama

• Uygulamanın çalışması için bir adım daha atmanız gerekiyor. Şimdilik yeni superSecretMessage'nizin nasıl ayarlandığını görmek için uygulamanızın farklı bölümlerine console.log() eklemeyi deneyin.

5. İlk computed() işlevinizi tanımlayın

Çoğu durumda, mevcut değerlerden durum türetmeniz gerekebilir. Bağımlı değer değiştiğinde türetilmiş durumun güncellenmesi daha iyidir.

computed() ile değerini diğer sinyallerden alan bir sinyali bildirimsel olarak ifade edebilirsiniz.

solvedMessage öğesini computed() öğesine dönüştürme

solvedMessage, decodedCipher sinyalini kullanarak secretMessage değerini kodlanmış biçimden kodlanmamış biçime çevirir.

Bu, başka bir hesaplanmış değere dayalı olarak hesaplanmış bir değer elde ettiğinizi görebildiğiniz için çok kullanışlıdır. Böylece, eşlenmiş reaktif bağlamdaki bir sinyal her değiştiğinde bağımlılıklar bilgilendirilir.

Şu anda secretMessage, decodedCipher veya superSecretMessage değerlerini değiştirdiğinizde solvedMessage güncellenmez. Bu nedenle, oyuncu şifreyi çözdüğünde ekranda güncellemeler görmüyorsunuz.

solvedMessage öğesini hesaplanmış hale getirerek reaktif bir bağlam oluşturursunuz. Böylece, mesajı güncellediğinizde veya şifreyi çözdüğünüzde izlenen bağımlılıklardan durum güncellemesi elde edebilirsiniz.

solvedMessage dosyasını computed() dosyasına dönüştürmek için her dosyadaki TODO(2): Define your first computed() yorumu altında aşağıdaki adımları uygulayın:

1. service.message.ts dosyasında, solvedMessage öğesini reaktif hale getirmek için Signals kitaplığını kullanın:

src/app/secret-message/service.message.ts

solvedMessage = computed(() =>
  this.translateMessage(
    this.secretMessage(), 
    this.cipher.decodedCipher()
  )
);

Bu işlem, computed dosyasını @angular/core konumundan içe aktarmanızı otomatik olarak ister. Sayfayı yenilerseniz daha önce solvedMessage simgesine başvurduğunuz yerlerde hatalarla karşılaşabilirsiniz. Bunun nedeni, superSecretMessage türünü string olan işlevden Signal<string> olan işleve değiştirmenizdir. solvedMessage ile ilgili tüm referansları solvedMessage() olarak değiştirerek bu sorunu düzeltebilirsiniz.

2. secret-message.ts dosyasında, solvedMessage ile ilgili tüm referansları solvedMessage() olarak güncelleyin:

src/app/secret-message/secret-message.ts

// Before
<span *ngFor="let char of this.messages.solvedMessage.split(''); index as i;" [class.unsolved]="this.messages.solvedMessage[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

// After
<span *ngFor="let char of this.messages.solvedMessage().split(''); index as i;" [class.unsolved]="this.messages.solvedMessage()[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

superSecretMessage'dan farklı olarak solvedMessage'nin SettableSignal olmadığını, yani değerini doğrudan değiştiremeyeceğinizi unutmayın. Bunun yerine, bağımlılık sinyallerinden (secretMessage ve decodedCipher) herhangi biri güncellendiğinde değeri güncel tutulur.

Diğer iki computed() işlevi keşfedin

• Uygulamanızda hesaplanmış iki değer daha olduğunu unutmayın:

src/app/secret-message/service.message.ts

secretMessage = computed(() => 
  this.translateMessage(
    this.superSecretMessage(),
    this.cipher.cipher()
  )
);

src/app/cipher/service.cipher.ts

unsolvedAlphabet = computed(() =>
  ALPHABET.filter(
    (letter) => !this.decodedCipher().find((guess) => guess.value === letter)
  )
);

MessageService, oyuncuların çözmeye çalıştığı cipher tarafından kodlanan secretMessage hesaplanmış bir superSecretMessage tanımlar.

CipherService, unsolvedAlphabet hesaplanmışını tanımlar. Bu, oyuncunun çözmediği tüm harflerin listesidir ve decodedCipher içindeki çözülmüş şifre anahtarlarının listesinden türetilir.

Değişiklikleri doğrulama

superSecretMessage bir sinyal, solvedMessage ise hesaplanmış bir değer olduğundan uygulama çalışır. Oyunun işlevlerini test edin:

1. Şifreyi çözmek ve gizli mesajı deşifre etmek için LetterGuessComponent simgesini CipherComponent içindeki LetterKeyComponent simgesinin üzerine sürükleyip bırakın.
2. Gizli mesajın daha fazla bölümünü çözdükçe SecretMessageComponent simgesinin nasıl güncellendiğini görün.
3. Gönderen ve Mesaj'ı değiştirmek için Özelleştir'i, ekrandaki değerleri ve URL'nin değiştiğini görmek için Oluştur ve URL'yi Kopyala'yı tıklayın.
4. Bonus: URL'yi kopyalayıp yeni bir sekmeye yapıştırın veya bir arkadaşınızla paylaşın. Ardından, gönderenin ve mesajın URL'de nasıl saklandığını görün.

6. İlk efektinizi ekleyin()

Bir sinyal yeni bir değere sahip olduğunda belirli bir şeyin gerçekleşmesini isteyebilirsiniz. effect() ile, değişen sinyallere yanıt olarak bir işleyici işlevini planlayabilir ve çalıştırabilirsiniz.

Şifre çözüldüğünde konfeti ekleme

Uygulama artık işlevsel olduğuna göre, şifre çözüldüğünde ve gizli mesajın kodu çözüldüğünde konfeti ekleyerek eğlence katabilirsiniz.

Konfeti eklemek için TODO(3): Add your first effect() yorumu altında aşağıdaki adımları uygulayın:

1. cipher.ts dosyasında, mesajın kodu çözüldüğünde konfeti eklemek için bir efekt planlayın:

src/app/cipher/cipher.ts

import * as confetti from 'canvas-confetti';

ngOnInit(): void {
  ...

  effect(() => {
    if (this.messages.superSecretMessage() === this.messages.solvedMessage()) {
      var confettiCanvas = document.getElementById('confetti-canvas');
      confetti.create()(confettiCanvas, { particleCount: 100 });
    }
  });
}

Bu etkinin bir sinyale ve hesaplanmış bir değere (this.messages.superSecretMessage() ve this.messages.solvedMessage()) bağlı olduğuna dikkat edin.

Effect, bağımlılıkları güncellendiğinde izlemek ve yeniden değerlendirmek için konfeti işlevini reaktif bir bağlamda planlamanıza yardımcı olur.

Değişiklikleri doğrulama

• Şifreyi çözmeyi deneyin (ipucu: Daha hızlı test etmek için mesajı kısa bir şeyle değiştirebilirsiniz). İlk effect() için konfeti patlatılarak tebrik edilirsiniz.

7. Tebrikler!

Angular Cipher'ınız artık gizli mesajları çözmeye ve paylaşmaya hazır! Angular Ekibi'ne mesaj göndermek mi istiyorsunuz? Çözebilmemiz için sosyal medya hesabımızı @Angular olarak etiketleyin. 🎉

Artık Angular araç kutunuzda, geliştirme sürecinizi basitleştirmek ve varsayılan olarak daha hızlı uygulamalar oluşturmak için üç yeni reaktif temel öğe var.

Daha fazla bilgi

Şu codelab'lere göz atın:

• Bağımsız bileşenleri kullanmaya başlama
• Angular ve Firebase ile web uygulaması oluşturma

Aşağıdaki materyalleri okuyun:

• Angular.io
• Sinyallerle Reaktiviteyi Yeniden Düşünme (Google I/O 2023)
• Angular'daki yenilikler (Google I/O 2023)