Açısal sinyalleri kullanmaya başlama

1. Başlamadan önce

Açısal Sinyaller, 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 geliştirmenize yardımcı olur.

Oluşturacaklarınız

• Açısal sinyallerle eklenen üç reaktif temel öğe hakkında bilgi edineceksiniz: signal(), computed() ve effect().
• Angular Şifre oyununu desteklemek için Açısal Sinyaller özelliğini kullanın. Şifreler, verilerin şifrelenmesi ve şifrelerinin çözülmesi için kullanılan sistemlerdir. Bu oyunda kullanıcılar bir şifreyi çözmek için ipuçlarını sürükleyip bırakarak gizli mesajın kodunu çözebilir, mesajı özelleştirebilir ve URL'yi paylaşarak arkadaşlarına gizli mesajlar gönderebilirler.

Ön koşullar

• Angular ve Typescript hakkında bilgi
• Önerilen: Angular Sinyalleri kitaplığı hakkında bilgi edinmek için Rethinking Reactivity with Signals (Sinyallerle Reaktifliği Yeniden Değerlendirme) videosunu izleyin.

2. Kodu alın

Bu proje için ihtiyacınız olan her şey bir Stackblitz'de. Stackblitz, bu codelab'de çalışmak için önerilen yöntemdir. Alternatif olarak, kodu klonlayıp en sevdiğiniz geliştirme ortamında açabilirsiniz.

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

Başlamak için favori web tarayıcınızda Stackblitz bağlantısını 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'in uygulamayı otomatik olarak çalıştırması beklenir. Artık hazırsınız.

Alternatif: Depoyu klonlama ve uygulamayı sunma

VSCode veya yerel IDE kullanmak, bu codelab'de çalışmaya alternatif bir yöntemdir:

1. Yeni bir tarayıcı sekmesi açın ve https://github.com/angular/codelabs/tree/signals-get-started adresine gidin.
2. Depoyu çatallayın ve klonlayın, ardından depoya gitmek için cd codelabs/ komutunu kullanın.
3. git checkout signals-get-started komutuyla başlangıç kodu dalını kontrol edin.
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. Bir tarayıcı sekmesi açarak http://localhost:4200 adresine gidin.

3. Bütçe temel çizgisi oluşturun

Başlangıç noktanız bir Angular Şifreleme oyunu, ancak henüz çalışmıyor. Açısal sinyaller, oyunun işlevselliğini destekler.

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

1. Kodlanmış mesajı ekranda görüntüleyin.
2. Şifreyi çözmek ve gizli mesajın kodunu çözmek için tuş takımında bir harf düğmesini sürükleyip bırakın.
3. Başarıyla ulaşıldığında, mesajın daha fazla gizli mesajın kodunu çözecek şekilde nasıl güncellendiğini görün.
4. Gönderen ve İletiyi değiştirmek için Özelleştir'i ve ardından Oluştur ve Ekrandaki değerleri ve URL'nin değiştiğini görmek için URL'yi kopyalayın.
5. Bonus: URL'yi kopyalayıp yeni bir sekmeye yapıştırın veya bir arkadaşınızla paylaşın ve gönderen ile iletinin URL'de nasıl depolandığını görün.

4. İlk sinyalinizi tanımlayın

Sinyal, Angular'a değiştiğinde bunu bildirebilen bir değerdir. Bazı sinyaller doğrudan değiştirilebilir. Bazı sinyaller ise değerlerini diğer sinyallerin değerlerinden hesaplar. Sinyaller birlikte, uygulamanızda veri akışını modelleyen doğrudan bir bağımlılık grafiği oluşturur.

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

superSecretMessage türünü signal() olarak dönüştürün

superSecretMessage, oynatıcının şifresini çözdüğü gizli mesajı tanımlayan, MessageService içindeki bir değerdir. Değer, şu an için uygulamaya değişiklikleri bildirmediğinden Özelleştir düğmesi bozuktur. Bu sorunu sinyalle çözebilirsiniz.

superSecretMessage uygulamasını sinyal yaparak mesajın ne zaman değiştiğini bildiğinize bağlı olarak uygulamanın bazı bölümlerine bildirim gönderebilirsiniz. Bir iletişim kutusundaki mesajı özelleştirdiğinizde, uygulamanın geri kalanını yeni mesajla güncellemek için bir sinyal ayarlamış olursunuz.

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

1. superSecretMessage öğesini yeniden etkinleştirmek için service.message.ts dosyasında Sinyaller kitaplığını kullanın:

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

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

Bu işlemle, otomatik olarak @angular/core kaynağından signal öğesini içe aktarmanız istenir. Sayfayı yenilerseniz daha önce superSecretMessage bölümüne başvurduğunuz yerlerde hatalarla karşılaşabilirsiniz. Bunun nedeni, string olan superSecretMessage türünü SettableSignal<string> olarak değiştirmiş olmanızdır. Tüm superSecretMessage referanslarını Signals API'yi kullanacak şekilde değiştirerek bu sorunu düzeltebilirsiniz. Değeri nerede okuduğunuzdan bağımsız olarak Sinyal alıcıyı superSecretMessage() çağırın. Değeri yazdığınız her yerde, mesajın yeni değerini belirlemek için SettableSignal üzerinde .set API'yi kullanın.

2. secret-message.ts ve service.message.ts dosyalarında, tüm superSecretMessage referanslarını 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 inceleyin

• Uygulamanızda iki sinyal daha olduğuna dikkat edin:

src/app/cipher/service.cipher.ts

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

CipherService, bir cipher sinyalini tanımlar. Bu sinyal, alfabedeki bir harfin anahtar/değer çiftlerinin yeni bir cipher harfiyle rastgele eşlenmesidir. Bunu mesajı karıştırmak ve oynatıcının klavyede başarılı bir eşleşme bulup bulmadığını belirlemek için kullanırsınız.

Ayrıca, oynatıcı şifreyi çözerken ekleyeceğiniz, kodu başarıyla çözülmüş anahtar/değer çiftlerinin bir decodedCipher sinyaline de sahipsiniz.

Angular'ın Sinyal kitaplığı tasarımının benzersiz ve güçlü bir özelliği, her yerde tepkiyi verebilmenizdir. Sinyalleri bir kez uygulamanın hizmetlerinde tanımladınız. Bu sinyalleri şablonda, bileşenlerde, ardışık düzenlerde, diğer hizmetlerde veya uygulama kodu yazabileceğiniz her yerde kullanabilirsiniz. Bunlar sınırlı veya bileşen kapsamına bağlı değildir.

Değişiklikleri doğrulama

• Uygulamanın çalışması için gerçekleştirmeniz gereken bir adım daha var. Şimdilik yeni superSecretMessage cihazınızın nasıl ayarlandığını görmek için uygulamanızın farklı bölümlerine bir console.log() eklemeyi deneyin.

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

Birçok durumda, kendinizi mevcut değerlerden türettiğinizi görebilirsiniz. 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 açık bir şekilde ifade edebilirsiniz.

solvedMessage türünü computed() olarak dönüştürün

solvedMessage, decodedCipher sinyali kullanılarak kodlanmış secretMessage değerini kodu çözülmüş olarak çevirir.

Bu çok havalı bir özellik. Çünkü, hesaplanan başka bir hesaplamaya göre hesaplanan bir değer türetdiğinizi görebilirsiniz. Bu nedenle, eşlenen reaktif bağlam içindeki bir sinyal değiştiğinde, bağımlılıklar bildirilir.

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

solvedMessage öğesini hesaplanan yaparak 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 öğesini bir computed() biçimine dönüştürmek için her bir dosyadaki TODO(2): Define your first computed() yorumunun altında aşağıdaki adımları uygulayın:

1. solvedMessage öğesini yeniden etkinleştirmek için service.message.ts dosyasında Sinyaller kitaplığını kullanın:

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

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

Bu işlemle, otomatik olarak @angular/core kaynağından computed öğesini içe aktarmanız istenir. Sayfayı yenilerseniz daha önce solvedMessage bölümüne başvurduğunuz yerlerde hatalarla karşılaşabilirsiniz. Bunun nedeni, string olan superSecretMessage türünü bir işlev olan Signal<string> olarak değiştirmenizdir. Tüm solvedMessage referanslarını solvedMessage() olarak değiştirerek bu sorunu düzeltebilirsiniz.

2. secret-message.ts dosyasında, tüm solvedMessage başvurularını 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 öğesinin aksine, solvedMessage bir SettableSignal değildir ve değerini doğrudan değiştiremezsiniz. Bunun yerine, bağımlılık sinyallerinden (secretMessage ve decodedCipher) biri güncellendiğinde de değeri güncel tutulur.

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

• Uygulamanızda hesaplanan iki değer daha olduğuna dikkat edin:

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 çözmek için çalıştıkları cipher tarafından kodlanan secretMessage hesaplanan superSecretMessage öğesini tanımlar.

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

Değişiklikleri doğrulama

superSecretMessage sinyal olduğu ve solvedMessage hesaplandığına göre uygulama sorunsuz çalışır. Oyunun işlevlerini test edin:

1. Şifreyi çözmek ve gizli mesajın kodunu çözmek için CipherComponent içindeki bir LetterKeyComponent öğesine LetterGuessComponent sürükleyip bırakın.
2. Gizli mesajın kodunu çözerken SecretMessageComponent özelliğinin nasıl güncellendiğini görün.
3. Gönderen ve İletiyi değiştirmek için Özelleştir'i ve ardından Oluştur ve Ekrandaki değerleri ve URL'nin değiştiğini görmek için URL'yi kopyalayın.
4. Bonus: URL'yi kopyalayıp yeni bir sekmeye yapıştırın veya bir arkadaşınızla paylaşın ve gönderen ile iletinin URL'de nasıl depolandığını görün.

6. İlk efektinizi ekleyin()

Bir sinyalin yeni bir değeri olduğunda bir şeyin gerçekleşmesini isteyebilirsiniz. effect() ile değişen sinyallere yanıt olarak bir işleyici işlevi planlayabilir ve çalıştırabilirsiniz.

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

Artık uygulama çalıştığına göre, şifre çözülüp gizli mesajın şifresi çözüldükten sonra konfeti ekleyerek biraz eğlence ekleyebilirsiniz.

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

1. cipher.ts dosyasında, iletinin 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 hesaplanan değere nasıl bağlı olduğuna dikkat edin: this.messages.superSecretMessage() ve this.messages.solvedMessage().

Efekt, konfeti işlevini reaktif bir bağlamda planlamanıza yardımcı olur. Böylece, bağımlılıkları güncellendiğinde bu işlevi takip edebilir ve yeniden değerlendirebilirsiniz.

Değişiklikleri doğrulama

• Şifreyi çözmeyi deneyin (ipucu: Daha hızlı test etmek için iletiyi kısa bir şekilde değiştirebilirsiniz!). Konfetiler, ilk effect() için sizi tebrik edecek.

7. Tebrikler!

Angular Şifreniz artık gizli mesajların kodunu çözmeye ve paylaşmaya hazır. Angular Ekibi için bir mesajınız mı var? Kodu çözebilmemiz için sosyal medya hesaplarımızı @Angular adresine etiketleyin. 🎉

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

Daha fazla bilgi

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

• Bağımsız Bileşenleri kullanmaya başlama
• Angular ve Firebase ile web uygulaması derleme

Şu materyalleri okuyun:

• Angular.io
• Rethinking Reactivity with Signals (Sinyallerle Reaktifliği Yeniden Değerlendirme) (Google I/O 2023)
• Angular'daki yenilikler (Google I/O 2023)