Bir Full Stack Developer olarak, uygulamalarımızın hem arka ucunda hem de ön ucunda en etkili çözümleri bulmaya çalışıyoruz. Genellikle arka uçta ASP.NET Core ile güçlü, tipli ve ölçeklenebilir API’lar inşa ederken, ön uçta ise Angular’ın dinamik ve bileşen tabanlı dünyasından faydalanıyoruz.

Ancak, bu iki güçlü teknolojiyi bir araya getirmek, özellikle veri akışını yönetme konusunda bazı zorlukları beraberinde getirebiliyor. Angular’ın geleneksel reaktif programlama yaklaşımı olan RxJS, güçlü olsa da, basit senaryolar için bile abonelik yönetimi gibi ek karmaşıklıklar sunabiliyordu.

İşte tam da bu noktada, Angular dünyasına yeni bir soluk getiren Signal’dan bahsedeceğiz. Bu makalede, bir .NET geliştiricisinin gözünden, arka uçta hazırladığımız veriyi Angular’da Signal ile nasıl daha basit ve performanslı bir şekilde yöneteceğimizi göstereceğim.

1. Veri Kaynağımız: ASP.NET Core API

Her şey, Angular’ın tüketeceği bir veri kaynağı oluşturmakla başlar. Gelin, C# ile basit bir Product modeli ve bu ürünleri döndüren bir API endpoint’i oluşturalım.

Ürün Modeli (Product.cs)

Bu basit C# sınıfı, veritabanından veya herhangi bir kaynaktan gelecek ürün verisini temsil ediyor.

namespace FullStackApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Ürünleri Döndüren API EndPoint’i (ProductsController.cs)

[ApiController] ve [Route("api/[controller]")] gibi niteliklerle standart bir HTTP API'si oluşturuyoruz. [HttpGet] metodu ise ürün listesini JSON formatında döndürecektir.

using Microsoft.AspNetCore.Mvc;
using FullStackApp.Models;

namespace FullStackApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductsController : ControllerBase
    {
        private static readonly List<Product> Products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 25000.50m },
            new Product { Id = 2, Name = "Mouse", Price = 450.00m },
            new Product { Id = 3, Name = "Keyboard", Price = 800.75m },
            new Product { Id = 4, Name = "Monitor", Price = 6500.00m }
        };

        [HttpGet]
        public ActionResult<IEnumerable<Product>> Get()
        {
            return Ok(Products);
        }
    }
}

Bu ApiController ile, http://localhost:5000/api/products adresinden çağrıldığında bir ürün listesi döndüren hazır bir API endpoint’imiz var. Şimdi bu veriyi Angular tarafında nasıl tüketeceğimize bakalım.

2. Ön Uçta Veri Akışı Yönetimi: Signal ile Yeni Yaklaşım

Geleneksel Angular yaklaşımında, bu API endpoint’ini çağırmak ve gelen veriyi yönetmek için HttpClient'ın döndürdüğü Observable'a manuel olarak subscribe olmamız gerekirdi. Bu yaklaşım, abonelikleri ngOnDestroy yaşam döngüsü kancasında manuel olarak sonlandırma yükünü de beraberinde getiriyordu.

Geleneksel (RxJS) Yaklaşım:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

// Product modeli
interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({ ... })
export class ProductListComponent implements OnInit, OnDestroy {
  products: Product[] = [];
  private subscription: Subscription;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.subscription = this.http.get<Product[]>('/api/products').subscribe(data => {
      this.products = data;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe(); // Manuel abonelik yönetimi zorunluluğu
  }
}

Signal ile Yeni ve Güvenli Yaklaşım

Signal, bu süreci önemli ölçüde basitleştiriyor. Angular’ın rxjs-interop paketi sayesinde, bir Observable'ı doğrudan bir Signal'e dönüştürebiliriz. Bu sayede subscribe ve unsubscribe işlemleri otomatik olarak yönetilir.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';

// Product modeli
interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h2>Ürünler</h2>
    @if (products()) {
      <ul>
        @for (product of products(); track product.id) {
          <li>{{ product.name }} - {{ product.price | currency:'₺' }}</li>
        }
      </ul>
    } @else {
      <p>Ürünler yükleniyor...</p>
    }
  `,
  imports: [CommonModule, HttpClientModule]
})
export class ProductListComponent {
  // ASP.NET Core API'mizden gelen veri otomatik olarak Signal'e dönüştürülür.
  // toSignal, arka planda aboneliği yönetir ve bileşen yıkıldığında sonlandırır.
  products = toSignal(this.http.get<Product[]>('/api/products'));

  constructor(private http: HttpClient) {}
}

Bir .NET geliştiricisi olarak arka uçta async/await ile yaptığımız sade kodlama deneyiminin, ön uca da taşındığını gösteriyor.

3. Dinamik Filtreleme: computed()'ın Gücü

API’den çektiğimiz veriyi ön uçta filtrelemek, yaygın bir senaryodur. Signal ve computed() ikilisi, bu işlemi performanslı ve deklaratif bir şekilde yapmamızı sağlar. Kullanıcı her tuşa bastığında API’ye yeni bir istek atmak yerine, elimizdeki veriyi anlık olarak filtreleyebiliriz.

import { Component, signal, computed } from '@angular/core';
// ... diğer import'lar

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h2>Ürünler</h2>
    <input type="text" [(ngModel)]="searchQuery" placeholder="Ürün ara...">
    
    @if (filteredProducts().length > 0) {
      <ul>
        @for (product of filteredProducts(); track product.id) {
          <li>{{ product.name }} - {{ product.price | currency:'₺' }}</li>
        }
      </ul>
    } @else {
      <p>Ürün bulunamadı.</p>
    }
  `,
  imports: [CommonModule, HttpClientModule, FormsModule]
})
export class ProductListComponent {
  products = toSignal(this.http.get<Product[]>('/api/products'));
  
  searchQuery = signal('');
  
  // products veya searchQuery değiştiğinde yeniden hesaplanacak liste
  filteredProducts = computed(() => {
    const query = this.searchQuery().toLowerCase();
    const allProducts = this.products() || [];
    
    // products() bir Signal olduğu için .NET API'den gelen veriye böyle ulaşıyoruz.
    return allProducts.filter(p => p.name.toLowerCase().includes(query));
  });

  constructor(private http: HttpClient) {}
}

computed() fonksiyonu, memoization (önbellekleme) yaparak performansı artırır. Yani, searchQuery veya products değişmedikçe, filteredProducts tekrar hesaplanmaz.

Sonuç: Bir .NET Geliştiricisinin Gözünden Angular

Arka uçta ASP.NET Core’un güçlü ve tipli dünyasında yazdığımız temiz kodu, ön uçta Signal’ın getirdiği basit ve reaktif veri yönetimiyle tamamlayabiliriz.

Bu yenilikler, Angular’ı sadece hızlı değil, aynı zamanda geliştirici dostu ve bakımı kolay bir çerçeve haline getiriyor. Artık karmaşık RxJS operatörleri veya manuel abonelik yönetimi gibi zorluklar olmadan, kullanıcı deneyimine odaklanmak çok daha kolay.

Biraz Signal

Angular, başlangıcından bu yana veri ve durum yönetimini ele alma biçimini sürekli olarak geliştiriyor. İlk versiyonlardaki $scope ve ng-change ikilisinden, hayatımıza giren güçlü RxJS kütüphanesine kadar, her zaman daha iyi bir reaktiflik deneyimi arayışı içinde oldu.

Ancak, RxJS’in getirdiği güçlü operatörler ve asenkron veri akışını yönetme yeteneği, özellikle yeni başlayanlar için dik bir öğrenme eğrisi sunabiliyordu. “Subscription cehennemi :D” tabiri, her geliştiricinin bir noktada karşılaştığı bir durumdu. İşte tam bu noktada, Angular ekibi yeni bir çözümle karşımıza çıktı: Angular Signal.

Peki, Signal tam olarak nedir ve neden Angular’ın geleceği için bu kadar önemli?

Neden Önemli Bu Signal?

Basitçe ifade etmek gerekirse, Signal, değerleri güncellendiğinde bunu otomatik olarak dinleyicilere bildiren bir “sarmalayıcı”dır. Bir kutu hayal edin. Bu kutunun içine bir değer koyuyorsunuz. Kutuya ne zaman yeni bir değer koysanız, kutuya bağlı olan herkes bundan haberdar oluyor. İşte Signal tam olarak bu mantıkla çalışır.

Signal’in en önemli avantajı, declarative (bildirimsel) olmasıdır. Yani “ne yapacağını” değil, “ne olacağını” söylersiniz. RxJS’deki gibi veri akışlarını yönetmek için karmaşık operatör zincirleri kurmak yerine, sadece değerin değiştiğini belirtirsiniz.

Bu yaklaşım, üç temel fayda sağlar:

1. Daha Az Kod: Daha az “boilerplate” (kalıp) kod yazarak aynı reaktifliği elde edersiniz.
2. Kolay Öğrenme: Konsept olarak RxJS’in karmaşık operatörlerinden çok daha basittir.
3. Performans: zone.js bağımlılığını azaltarak veya tamamen ortadan kaldırarak daha performanslı ve parçalı (granular) değişiklik algılama imkanı sunar.

Temel Bileşenler

Angular Signal, reaktif bir sistem oluşturmak için üç ana fonksiyon üzerine kurulmuştur: signal(), computed() ve effect().

1. signal(): Temel Reaktif Değer

Bu, bir reaktif değer oluşturmak için kullandığımız ana fonksiyondur. Bir değerle başlatılır ve bu değeri okumak ve güncellemek için iki farklı yöntem sunar.

Okuma: Değeri okumak için Signal değişkenini bir fonksiyon gibi çağırmanız gerekir. Yani counter değil, counter() şeklinde kullanılır. Bu parantezler, Angular'a bu değerin bir Signal olduğunu ve reaktif bir bağlamda takip edilmesi gerektiğini söyler. Yazma: Değeri güncellemek için set() veya update() metodunu kullanırız.

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Sayı: {{ count() }}</p>
    <button (click)="increment()">Arttır</button>
  `,
})
export class CounterComponent {
  // 0 değeriyle başlatılan bir Signal
  count = signal(0);

  increment() {
    // set() metodu ile değeri doğrudan değiştirebiliriz
    // this.count.set(10);

    // update() metodu ile mevcut değer üzerinden işlem yapabiliriz
    this.count.update(currentValue => currentValue + 1);
  }
}

Bu örnekte, increment() metodu tetiklendiğinde count Signal'i güncellenir. Angular, {{ count() }} ifadesinin bir Signal olduğunu anlar ve değer değiştiğinde DOM'u otomatik olarak günceller.

2. computed(): Otomatik Hesaplanan Değerler

Bazen, bir veya daha fazla Signal’in değerine bağlı olarak otomatik olarak güncellenen yeni bir değere ihtiyacınız olur. İşte computed() fonksiyonu tam da bu işe yarar. computed()'ın değeri, kendisine bağlı olan Signal'lerden biri değiştiğinde yeniden hesaplanır.

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-computed-example',
  standalone: true,
  template: `
    <p>Sayı: {{ count() }}</p>
    <p>Sayının iki katı: {{ doubleCount() }}</p>
    <button (click)="increment()">Arttır</button>
  `,
})
export class ComputedExampleComponent {
  count = signal(1);

  // count Signal'ine bağlı olarak otomatik güncellenen bir değer
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update(value => value + 1);
  }
}

Yukarıdaki kodda count Signal'i her değiştiğinde, doubleCount Signal'i otomatik olarak yeniden hesaplanır ve computed() fonksiyonu içinde bir değişiklik olduğu için şablon güncellenir.

3. effect(): Yan Etkileri (Side-effects) Tetiklemek

effect() fonksiyonu, bir veya birden fazla Signal değiştiğinde bir yan etki (side-effect) tetiklemek için kullanılır. Bu yan etkiler; loglama, bir API'ye istek atma veya DOM'u doğrudan manipüle etme gibi işlemler olabilir. effect() fonksiyonu, reaktif sistemin en temel parçası olmasına rağmen, mümkün olduğunca az kullanılması önerilir. Çünkü bileşenlerin reaktifliği genellikle HTML şablonu üzerinden sağlanır.

import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-effect-example',
  standalone: true,
  template: `
    <p>Sayı: {{ count() }}</p>
    <button (click)="increment()">Arttır</button>
  `,
})
export class EffectExampleComponent {
  count = signal(0);

  constructor() {
    // count Signal'i her değiştiğinde çalışacak bir effect
    effect(() => {
      console.log('Sayı değişti. Yeni değer:', this.count());
    });
  }

  increment() {
    this.count.update(value => value + 1);
  }
}

Bu örnekte, increment() metodu çağrıldığında count Signal'i güncellenir ve effect() içinde tanımladığımız konsol çıktısı otomatik olarak tetiklenir.

Angular’a yeni başlayanlar için akla gelen ilk soru şu olabilir: “Artık RxJS’e ihtiyacım kalmadı mı?”

Cevap oldukça net: RxJS ve Signal birbirinin alternatifi değil, tamamlayıcısıdır.

• Signal, genellikle bileşen içi durum yönetimi için mükemmeldir. Kullanıcının bir butona tıklamasıyla değişen sayacı, bir formun geçerliliğini veya bir açılır menünün durumunu yönetmek gibi basit reaktiflik ihtiyaçlarını kolayca çözer.
• RxJS ise, asenkron olay akışlarını yönetme konusunda hala bir numaradır. HTTP istekleri, WebSocket bağlantıları, kullanıcı girdilerinden oluşan karmaşık akışlar (debounce, throttle) ve stream’leri birleştirme/dönüştürme gibi işlemler için RxJS’in güçlü operatörleri vazgeçilmezdir.

Aslında, ikisini bir arada kullanmak en güçlü yaklaşımdır. Örneğin, bir API’den gelen veriyi önce RxJS ile yönetip, gelen veriyi bir Signal’e atayarak bileşen içinde reaktif bir şekilde kullanabilirsiniz:

import { Component, OnInit, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-data',
  standalone: true,
  template: `
    @if (data()) {
      <p>Kullanıcı Adı: {{ data()?.name }}</p>
    } @else {
      <p>Veri yükleniyor...</p>
    }
  `,
})
export class DataComponent implements OnInit {
  // toSignal ile Observable'ı Signal'e dönüştürüyoruz
  data = toSignal(this.http.get<{ name: string }>('https://jsonplaceholder.typicode.com/users/1'));

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // API isteği otomatik olarak yapılır ve gelen veri `data` Signal'ine atanır.
  }
}

Angular Signal, geliştiricilere zone.js'den bağımsız, daha basit ve daha performanslı bir reaktiflik modeli sunarak Angular'ın geleceğini şekillendiriyor. Bileşen içi durum yönetimini kökten sadeleştirirken, RxJS'in gücünden vazgeçmeye gerek kalmıyor.

Angular ekibinin uzun vadeli hedefi, Signal’i Angular’ın çekirdeğine daha da entegre ederek, gelecekte tamamen “Zoneless” (zone.js’siz) bir Angular dünyasının kapılarını aralamak.

Eğer hala Signal’ı denemediyseniz, Angular 17 ve sonrası projelerinizde kullanmaya başlamak için harika bir zaman. Sadece birkaç satır kodla, uygulamalarınızın ne kadar daha temiz ve okunabilir hale geldiğini göreceksiniz.

TypeScript 5.7, geliştiricilere hızlı, güçlü ve esnek bir kod yazma deneyimi sunmak için bir dizi yenilikle yayınlandı. JavaScript’e eklediği tipi belirteçleri ve hata yakalama desteği sayesinde yazılımcıların hayatını kolaylaştıran TypeScript, bu sürümde özellikle performans ve esneklik konularında önemli geliştirmeler sunuyor.

Neden TypeScript?

TypeScript, JavaScript kodlarınızı daha okunabilir ve daha az hata yapmaya yönelik bir hale getiren, JavaScript’in bir üst kümesidir. Kendi yazılım geliştirme sürecinizde TypeScript kullanarak otomatik tamamlama, refaktoring ve hata ayıklama gibi işlevlerden faydalanabilirsiniz. TypeScript’in özelliği, derleme süreci sonunda temiz ve performanslı JavaScript kodu üretmesidir.

Sürümde Neler Yeni?

Daha Hızlı Hata Yakalama

Bu sürüm, başlatılmamış değişkenlerin kullanımında hata algılamayı geliştiriyor. Daha önce özel fonksiyon yapılarında yakalanamayan bu tür hatalar artık kolayca tespit ediliyor.

Kod Örneği:

function foo() {
    let result: number

    function printResult() {
        console.log(result); // Hata: Değişken 'result' başlatılmadan kullanılmış.
    }
}

Uzantıları Otomatik Dönüştürme

Artık TypeScript, çıktı dosyalar oluştururken çok daha esnek. --rewriteRelativeImportExtensions bayrağı sayesinde .ts uzantıları doğrudan .js’e dönüştürülüyor. Bu, çoklu dosya yapıları için büyük kolaylık sağlıyor.

// TypeScript dosyasında:
import * as foo from "./foo.ts";

// JavaScript dosyasında:
import * as foo from "./foo.js";

ES2024 Desteği

Yeni ES2024 hedefiyle, TypeScript kütüphanelerinin yeni özelliklerini kullanabilirsiniz. SharedArrayBuffer ve ArrayBuffer gibi yapıların geliştirilmiş hallerini destekleyen bu sürüm, TypedArray türlerini de generic yapıya kavuşturdu.

Kod Örneği:

interface Uint8Array<TArrayBuffer extends ArrayBufferLike = ArrayBufferLike> {
    // ...
}

JSON Doğrulamaları

JSON dosyalarını import ederken type: "json" belirteci zorunlu hale geldi. Bu, çalışma zamanında yaşanabilecek hataları önceden engelliyor.

Kod Örneği:

import myConfig from "./myConfig.json" with { type: "json" };
console.log(myConfig.property);

TSServer’da Daha Akıllı Konfigürasyon

Bir dosyanın hangi tsconfig.json dosyasına ait olduğunu belirlemek artık daha kolay. Çoklu proje yapılarında bu geliştirme, esneklik ve performans artışı sağlıyor.

Performans ve Verimlilik

Node.js 22’nin yeni module.enableCompileCache() API'si sayesinde TypeScript 5.7 ile derleme süreleri çarpıcı şekilde azaldı. Yapılan testlerde, bu yeni özellik derleme hızında 2.5 katına kadar bir artış gösterdi.

Geçiş Sürecindeki Notlar

Bu sürümde, TypedArray’ler ve DOM yapılarındaki değişiklikler nedeniyle bazı eski projelerde ufak uyumluluk sorunları yaşanabilir. Ancak bu sorunlar, kütüphane güncellemeleriyle kolayca giderilebilir.

Son Söz

TypeScript 5.7, geliştiricilere daha akıllı ve verimli bir çalışma ortamı sunuyor. Performans iyileştirmeleri ve yeni özellikleriyle bu sürümü denemek için harika bir zaman! Daha fazla bilgi için TypeScript resmi sitesi adresini ziyaret edebilirsiniz.

Angular uygulamalarında veri akışını yönetmek için sıklıkla kullanılan iki önemli kavram vardır: Observable ve BehaviorSubject. Bu kavramlar, uygulamalarımızda gerçek zamanlı güncellemeler, veri paylaşımı ve karmaşık durum yönetimi gibi senaryoları ele almamıza olanak tanır. Bu makalede, Observable ve BehaviorSubject’ın ne olduğunu, aralarındaki farkları ve hangi durumlarda hangisini kullanmanız gerektiğini detaylı bir şekilde inceleyeceğiz.

Observable Nedir?

Observable, zaman içinde birden fazla değer yayımlayan bir nesnedir. Bu değerler, herhangi bir olay (tıklama, veri alımı vb.) veya belirli bir zaman aralığında tetiklenebilir. Observable’lar, veri akışını temsil etmenin güçlü bir yoludur ve genellikle asenkron işlemlerle birlikte kullanılır.

Örnek: Bir HTTP isteği ile sunucudan veri çekmek istediğimizi düşünelim. Bu istek, bir Observable olarak temsil edilebilir. İstek tamamlandığında, Observable bize bir cevap döndürür ve bu cevap, abone olan bileşenler tarafından işlenir.

Aşağıdaki kodda kullanım örneğini görebiliriz.

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// rxjs kütüphanesinden Observable'ı içe aktarırız. Observable, zaman içerisinde değişebilen değerleri temsil eder.
// Bu sayede, HTTP isteklerinin sonuçlarını yönetebiliriz.

@Injectable({ providedIn: 'root' })

export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    // getData metodu, bir Observable döndürür. Bu Observable, HTTP isteğinin sonucunu temsil eder.
    return this.http.get('https://api.sam.com/data');
    // Bu satır, belirtilen URL'ye bir HTTP GET isteği gönderir.
    // İsteğin sonucu, Observable aracılığıyla geri döndürülür.
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-component', 
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'] 
})
export class MyComponent {
  // data değişkeni, sunucudan alınan veriyi tutacak
  data: any;

  constructor(private dataService: DataService) {}
  // Bileşenin constructor'ı, DataService servisini enjekte eder.

  ngOnInit() {
    // ngOnInit yaşam döngüsü kancası, bileşen ilk kez oluşturulduğunda çağrılır.
    this.dataService.getData()
      .subscribe(response => {
        this.data = response;  // Sunucudan gelen veriyi data değişkenine atarız.
      });
  }
}

BehaviorSubject Nedir?

BehaviorSubject, Observable’ın özel bir türüdür. Diğer Observable’lardan farklı olarak, BehaviorSubject’ın başlangıç değeri vardır ve bu değeri abone olan her gözlemciye hemen gönderir. Ayrıca, yeni bir değer yayımlandığında, bu değer tüm abone olan gözlemcilere iletilir.

Örnek: Bir sayfada kullanıcı adı bilgisini saklamak istediğimizi düşünelim. Bu bilgiyi bir BehaviorSubject içinde tutabilir ve bu şekilde farklı bileşenler arasında paylaşabiliriz.

import { BehaviorSubject } from 'rxjs'; // BehaviorSubject sınıfını rxjs kütüphanesinden içe aktarır

@Injectable({ providedIn: 'root' })
export class AuthService {
  private userSubject: BehaviorSubject<string>('');
  private userSubject = new BehaviorSubject<string>(''); // Bir BehaviorSubject nesnesi oluşturulur. Bu nesne, kullanıcı adı bilgisini tutar.

  public user$ = this.userSubject.asObservable(); // BehaviorSubject'ın observable'ına erişim için bir property tanımlanır.

  setUser(username: string) {
    this.userSubject.next(username); // Yeni kullanıcı adı, BehaviorSubject'a gönderilir.
  }
}

import { Component } from '@angular/core';
import { AuthService } from './auth.service';


@Component({
  selector: 'app-login', 
  templateUrl: './login.component.html', 
  styleUrls: ['./login.component.css'] 
})
export class LoginComponent {
  // username değişkeni, kullanıcının girdiği kullanıcı adını tutar
  username: string = '';

  constructor(private authService: AuthService) {}
  // Bileşenin constructor'ı, AuthService servisini enjekte eder.

  onSubmit() {
    // Burada, kullanıcı adı ve şifre doğrulaması gibi işlemler yapılabilir.
    // Örneğin, bir HTTP isteği göndererek sunucuya kullanıcı bilgilerini gönderebilirsiniz.

    this.authService.setUser(this.username);
    // Kullanıcı adı doğrulama işlemlerinden sonra, AuthService'in setUser metodu çağrılır.
    // Bu metot, kullanıcı adını AuthService'e iletir ve AuthService bu kullanıcı adını kullanarak oturum açma işlemlerini gerçekleştirir.
  }
}

LoginComponent içerisinde, onSubmit metodu kullanıcının giriş bilgilerini onaylar ve ardından authService.setUser(username) methodunu çağırır. Bu method, kullanıcı adını userSubject isimli BehaviorSubject'a iletir.

Kullanıcı Bilgisini Abone Olma

Başka bir bileşende, userSubject tarafından yayınlanan değerlere abone olabilirsiniz. Örneğin, bir HeaderComponent içerisinde oturum açmış kullanıcıyı görüntülemek isteyebilirsiniz:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'] 
})
export class HeaderComponent implements OnInit {
  // currentUser değişkeni, oturum açmış kullanıcının adını tutar
  currentUser: string = '';

  constructor(private authService: AuthService) {}
  // Bileşenin constructor'ı, AuthService servisini enjekte eder.

  ngOnInit() {
    // ngOnInit yaşam döngüsü kancası, bileşen ilk kez oluşturulduğunda çağrılır.
    this.authService.user$.subscribe(user => {
      this.currentUser = user;
    });
  }
}

Abonelikten Çıkma

Bellek sızıntılarını önlemek için, bileşen yok edilirken user$'a abonelikten çıkılması önemlidir. Bunu ngOnDestroy yaşam döngüsü kancası içerisinde yapabilirsiniz:

ngOnDestroy() {
  // Aboneliği iptal edin
  this.subscription?.unsubscribe();
}

Observable ve BehaviorSubject Arasındaki Farklar

Hangi Durumda Hangi Kavram Kullanılmalı?

Observable

• HTTP istekleri
• Web Sockets
• Timer’lar
• Event’ler (tıklama, mouse hareketleri vb.)

BehaviorSubject

• Form verileri
• Kullanıcı oturum bilgileri
• Bileşenler arasında veri paylaşımı
• Uygulama durumu

Pratik Örnek: Form Yönetimi

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html', 
  styleUrls: ['./my-form.component.css'] 
})
export class MyFormComponent {
  // private formValueSubject = new BehaviorSubject<string>('');
  private formValueSubject = new BehaviorSubject<string>(''); // Bir BehaviorSubject nesnesi oluşturulur. Bu nesne, form değerini tutar.

  public formValue$ = this.formValueSubject.asObservable(); // BehaviorSubject'ın observable'ına erişim için bir property tanımlanır.

  onFormSubmit(value: string) {
    this.formValueSubject.next(value); // Yeni form değeri BehaviorSubject'a gönderilir.
  }
}

Bu örnekte, form verileri bir BehaviorSubject ile yönetilmektedir. Formdaki herhangi bir değişiklik, BehaviorSubject’ı günceller ve bu sayede diğer bileşenler de bu değişiklikten haberdar olur.

Observable ve BehaviorSubject, Angular uygulamalarında veri akışını yönetmek için güçlü araçlardır. Doğru kavramı doğru yerde kullanmak, uygulamanızın daha okunaklı, daha bakımı kolay ve daha performanslı olmasını sağlar. Bu makalede, bu iki kavramı temel düzeyde inceledik. Daha derinlemesine bilgi edinmek için RxJS belgelerini inceleyebilirsiniz.

• Observable, zaman içinde birden fazla değer yayımlayan bir nesnedir.
• BehaviorSubject, Observable’ın özel bir türüdür ve başlangıç değeri vardır.
• Hangi kavramı kullanacağınız, uygulamanızın gereksinimlerine bağlıdır.

Umarım bu makale, Angular’da Observable ve BehaviorSubject konularını anlamanıza yardımcı olmuştur. Bir sonraki makalede görüşmek dileğiyle :)

Entity Framework Core (EF Core) is a powerful object-relational mapper (ORM) for .NET. While it simplifies database interactions, advanced query techniques and performance optimizations are crucial for efficient and scalable applications. In this article, we’ll explore advanced EF Core querying techniques and performance improvements that mid to senior level developers can leverage.

Advanced Query Techniques

1. Eager Loading vs. Lazy Loading vs. Explicit Loading

Eager Loading: This technique loads related entities as part of the initial query. It’s useful when you know you’ll need related data. Use the Include and ThenInclude methods.

var orders = context.Orders
    .Include(o => o.Customer)
    .Include(o => o.OrderItems)
    .ThenInclude(oi => oi.Product)
    .ToList();

Lazy Loading: Entities are loaded on demand. This can be efficient for small data sets but may lead to multiple database calls for larger sets. Enable lazy loading by installing the Microsoft.EntityFrameworkCore.Proxies package and configuring it.

services.AddDbContext<YourDbContext>(options =>
    options.UseLazyLoadingProxies().UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

Explicit Loading: This technique loads related entities manually after the initial query. It offers more control over when related data is fetched.

var order = context.Orders.Find(orderId);
context.Entry(order).Collection(o => o.OrderItems).Load();

2. Filtering and Sorting

Filtering and sorting data directly in queries can significantly improve performance by reducing the amount of data processed.

var filteredOrders = context.Orders
    .Where(o => o.Status == OrderStatus.Completed)
    .OrderBy(o => o.OrderDate)
    .ToList();

3. Projections with Select

Using the Select method to project data into a specific shape reduces the amount of data retrieved and can improve performance.

var orderSummaries = context.Orders
    .Where(o => o.Status == OrderStatus.Completed)
    .Select(o => new
    {
        o.OrderId,
        o.OrderDate,
        CustomerName = o.Customer.Name,
        TotalAmount = o.OrderItems.Sum(oi => oi.Quantity * oi.UnitPrice)
    })
    .ToList();

Performance Improvements

1. Indexing

Proper indexing can significantly improve query performance. Use the HasIndex method in the OnModelCreating method to define indexes.

modelBuilder.Entity<Order>()
    .HasIndex(o => o.OrderDate);

2. Compiled Queries

EF Core allows you to compile queries for reuse, which can reduce the overhead of query compilation.

var compiledQuery = EF.CompileQuery((YourDbContext context, DateTime startDate) =>
    context.Orders.Where(o => o.OrderDate >= startDate));

var orders = compiledQuery(context, new DateTime(2023, 1, 1)).ToList();

3. No-Tracking Queries

For read-only operations, use no-tracking queries to improve performance by disabling change tracking.

var orders = context.Orders.AsNoTracking().ToList();

4. Batching and Transactions

Batching multiple operations into a single transaction can reduce the number of database round-trips and improve performance.

using (var transaction = context.Database.BeginTransaction())
{
    context.Add(new Order { /* ... */ });
    context.SaveChanges();

    context.Add(new OrderItem { /* ... */ });
    context.SaveChanges();

    transaction.Commit();
}

5. Caching

Implementing caching strategies can reduce the load on your database and improve application performance. Consider using in-memory caching or distributed caching solutions like Redis.

services.AddMemoryCache();

Conclusion

Mastering advanced querying techniques and performance optimizations with Entity Framework Core can lead to significant improvements in application efficiency and scalability. By leveraging these techniques, developers can ensure their applications are not only functional but also performant and robust.

Günümüzün yazılım geliştirme dünyasında, mikro servis mimarisi giderek daha popüler hale geliyor. Ancak, birden fazla mikro servisi yönetmek ve bunlar arasında istekleri yönlendirmek karmaşık bir süreç olabilir. İşte burada, C# geliştiricilerinin imdadına yetişen bir araç olan Ocelot devreye giriyor. Bu makalede, Ocelot’un ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu öğreneceksiniz.

Ocelot Nedir?

Ocelot, .NET ekosisteminde API ağ geçidi işlevselliği sağlamak için kullanılan bir kütüphanedir. Basitçe söylemek gerekirse, Ocelot gelen istekleri alır, bunları işler ve ardından belirli mikro servislere yönlendirir. Bu, birden fazla mikro servis kullanıldığında, istekleri yönetmeyi ve dağıtmayı kolaylaştırır.

Neden Ocelot Kullanmalıyız?

1. API Yönlendirme ve Yönetimi: Ocelot, gelen istekleri yönlendirmek ve farklı mikro servisler arasında trafiği dağıtmak için kullanılabilir. Bu, karmaşık mikro servis mimarilerini daha kolay yönetilebilir hale getirir.
2. Filtreleme ve Düzenleme: Ocelot, gelen istekleri filtreleyebilir ve düzenleyebilir. Örneğin, istekleri kimlik doğrulama veya yetkilendirme için kontrol edebilir ve isteği değiştirebilir.
3. Yük Dengeleme: Ocelot, gelen istekleri belirli mikro servisler arasında yük dengelemesi yaparak dağıtabilir. Bu, servislerin daha verimli ve dengeli bir şekilde çalışmasını sağlar.

Nerede Kullanabilirim?

1. Mikro Servis Yönetimi: Bir e-ticaret uygulaması düşünün. Bu uygulama, kullanıcıların alışveriş yapmasını sağlayan bir arayüze ve stok yönetimini sağlayan bir mikro servise sahip olabilir. Ocelot, kullanıcıların gelen isteklerini doğru mikro servise yönlendirerek bu işlemi kolaylaştırır.
2. Kimlik Doğrulama ve Yetkilendirme: Bir sosyal medya uygulaması için Ocelot, kullanıcıların giriş yaparken kimlik doğrulamasını ve yetkilendirme işlemlerini yönetebilir. Böylece, kullanıcılar doğru bir şekilde yetkilendirilmeden önce istekleri işleyebilir.
3. API Sürüm Yönetimi: Ocelot, farklı API sürümlerine sahip bir uygulamanın trafiğini yönetebilir. Bu, yeni bir API sürümüne geçiş yaparken mevcut kullanıcıları etkilemeden bu geçişi sağlar.

Örnek olarak visual studio üzerinden 3 farklı proje oluşturalım.

Burada first api ve second api projeleri için gateway kullanacağız.

Öncelikle Gateway olarak kullanılacak projeye gerekli paketi kuralım.

Paket kurulumundan sonra sıra servislerin eklenmesinde.

Program.cs altında gerekli ayarlamaları yapalım. Ayarlarda biraz sonra oluşturacağımız ocelot.json dosyasının gösterilmesi, ocelot servisine konfigurasyonun verilmesi ve alt satırlarda bulunan ocelot kullanma komutu ile işlemi tamamlayacağımızı görebilirsiniz.

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);


        builder.Services.AddControllers();
        builder.Services.AddEndpointsApiExplorer();
        builder.Services.AddSwaggerGen();
        builder.Configuration.AddJsonFile($"ocelot.json", false, true);
        builder.Services.AddOcelot(builder.Configuration);

        var app = builder.Build();

        if (app.Environment.IsDevelopment())
        {
            app.UseSwagger();
            app.UseSwaggerUI();
        }
        app.UseOcelot().Wait();

        app.UseHttpsRedirection();

        app.UseAuthorization();


        app.MapControllers();

        app.Run();
    }
}

Controller içerisinde bir metot ekleyelim. Bu metot her çağırdığımızda aslında o apinin çalıştığını bize söylemesi gerekiyor. Bu örnekte yeterli.

    [ApiController]
    [Route("api/[controller]")]
    public class FirstController : Controller
    {

        [HttpGet("Get")]

        public string Get()
        {
            return "First Api Work";
        }

    }

Aynı controller örneğini oluşturulan diğer api projesi içinde uygulayabilirsiniz.

    [ApiController]
    [Route("api/[controller]")]
    public class SecondController : Controller
    {

        [HttpGet("Get")]
        public string Get()
        {
            return "Second Api Work";
        }
    }

Şimdi Ocelot için en önemli adım olan konfigurasyon dosyasını oluşturup düzenlemeye geldik.

Bu dosya içerisinde gerekli tüm yönlendirmeleri ve sınırlandırmaları yapabiliriz.

Gateway projesinin hemen altına ocelot.json adlı bir dosya oluşturun.

{
  "Routes": [
    {
      "DownstreamPathTemplate": "/api/first/get",
      "DownstreamScheme": "https",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 7079
        }
      ],
      "UpstreamPathTemplate": "/services/{everything}",
      "UpstreamHttpMethod": [ "Get", "Post", "Put", "Delete" ]
    }
  ],
  "GlobalConfiguration": {
    "BaseUrl": "https://localhost:7015"
  }
}

Burada incelememiz gereken noktalar şöyle;

DownstreamPathTemplate

Gelen istekler hangi adrese yönlendirilecek?

DownstreamScheme

Gelen isteklerden hangi protokol kabul edilecek?

DownstreamHostAndPorts

Yönlendirdiğimiz projenin host ve port bilgileri. Burada ben gelen isteği birinci api adresime yönlendireceğim için onun bilgilerini verdim.

Kafa karıştırıcı bir tarafıda dosyanın sanki tersten yazılmış gibi olması. İlk bakışta bana biraz tuhaf gelsede anlaşılması kolay.

Dolasıyla ilk konfigurasyonlar aslında nereye yönlendireceğimiz üzerine yapılıyor. Bir sonraki adımda ise hangi istekleri yönlendireceğiz şeklinde.

UpstreamPathTemplate

Burada artık hangi istekleri yönlendireceğimizi konfigure etmeye başlıyoruz. Ben ”/services/{everything}”, şeklinde giriş yaptım. Bu şu demek oluyor: https://localhost:port/services/herhangibirsey yazdığımda bu adres beni otomatik olarak yukarıda konfigure ettiğimiz api adresine yönlendirecek.

UpstreamHttpMethod

Hangi istek tiplerini kabul edeceğimizi belirtiyoruz.

BaseUrl

Gateway projemizin host ve port bilgisi.

Şimdi projelerimizi multiple olarak ayağa kaldırarak postman üzerinden test edelim.

Görüldüğü üzere konfigurasyon dosyasında belirttiğimiz gibi gelen her isteği ilk apimize yönlendirdik. Şimdi ikinci apimiz içinde yönlendirme işlemi yapabiliriz. Bunun için tekrar json dosyasına dönüp gerekli alanları yazıyoruz.

{
  "Routes": [
    {
      "DownstreamPathTemplate": "/api/first/get",
      "DownstreamScheme": "https",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 7079
        }
      ],
      "UpstreamPathTemplate": "/services/{everything}",
      "UpstreamHttpMethod": [ "Get", "Post", "Put", "Delete" ]
    },
{
      "DownstreamPathTemplate": "/api/second/get",
      "DownstreamScheme": "https",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 7080
        }
      ],
      "UpstreamPathTemplate": "/services-second/{everything}",
      "UpstreamHttpMethod": [ "Get", "Post", "Put", "Delete" ]
    }
  ],
  "GlobalConfiguration": {
    "BaseUrl": "https://localhost:7015"
  }
}

Görüldüğü üzere Routes objesinin içerisine yapılan yeni bir tanımlama ile bu işi halledebiliyoruz. Testi bu url üzerinden gerçekleştirirsek ikinci apimizin dönüş yaptığınız görebiliriz.

Ocelotun konfigurasyon dosyası sadece bunlarla sınırlı değil. Bu makalede sadece routing konusunu işlediğimiz için bununla sınırlı bıraktım. Ocelotun başka ne gibi yetenekleri olduğuna resmi web sayfası üzerindeki okunuşu rahat olan dökümanından öğrenebilirsiniz.

Getting Started — Ocelot 22.0 documentation

Projenin kaynak adresi ->

https://github.com/sametuca/NetCoreOcelot

Angular, modern web uygulamaları geliştirmek için güçlü bir platformdur. Bununla birlikte, büyük ve karmaşık uygulamaları geliştirirken, dış API’lerle iletişim kurarken veya sunucudan veri alırken bazı zorluklarla karşılaşabiliriz. Bu noktada Angular’ın bize sunduğu HTTP Interceptor’lar devreye girer. Bu makalede, Angular’da interceptor’ların ne olduğunu, neden kullanıldığını ve nasıl uygulandığını öğreneceksiniz.

Interceptor Nedir?

Angular’da interceptor, HTTP isteklerini ve yanıtlarını ele almak için kullanılan bir araçtır. Bir HTTP isteği gönderilmeden önce veya yanıt alındıktan sonra bu isteği değiştirmemize veya manipüle etmemize olanak tanır. Örneğin, her isteğe otomatik olarak bir başlık eklemek veya hata durumunda özel bir işlem yapmak gibi işlevleri gerçekleştirebilir.

Neden Interceptor Kullanılır?

• Tek Bir Noktadan Kontrol: Interceptor’lar, uygulamanın farklı yerlerinde yapılan tüm HTTP isteklerini merkezi bir noktada ele almayı sağlar. Bu, kod tekrarını azaltır ve koddaki düzeni artırır.
• Güvenlik ve Yetkilendirme: İsteklerinizi güvenli hale getirmek ve yetkilendirme kontrolleri eklemek için interceptor’lar kullanabilirsiniz.
• Hata İşleme: Sunucudan hata yanıtları aldığınızda otomatik olarak özel işlemler gerçekleştirmenizi sağlar.
• Performans İyileştirmeleri: Önbellekleme gibi performans iyileştirmeleri için kullanılabilirler.

Nasıl Kullanılır?

Angular’da bir interceptor oluşturmak için öncelikle bir sınıf oluşturmanız gerekir. Bu sınıf, HttpInterceptor arayüzünü uygulamalı ve intercept metodunu içermelidir. Daha sonra, interceptor'ı sağladığınız HTTP istemci servisine eklemeniz gerekir.

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Burada isteği manipüle edebiliriz
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token'),
    });
    return next.handle(modifiedReq);
  }
}

Yukarıdaki kodu inceleyelim.

@Injectable()
export class MyInterceptor implements HttpInterceptor {

Bu kısım, MyInterceptor adında bir sınıf tanımlar. @Injectable() dekoratörü, sınıfın Angular enjeksiyon sistemine dahil edilebilir olduğunu belirtir. HttpInterceptor arayüzünü uygulayan bir sınıf olduğu için, interceptor'ın temel işlevselliğini sağlar.

intercept(
  req: HttpRequest<any>,
  next: HttpHandler
): Observable<HttpEvent<any>> {

Bu metod, HttpInterceptor arayüzünden gelir ve bir HTTP isteğini ele almak için kullanılır. İki parametre alır: req, işlenmesi gereken HTTP isteği ve next, işlenmiş isteği devretmek için kullanılan bir HttpHandler. Bu metodun dönüş değeri Observable<HttpEvent<any>>'dir, çünkü isteklerin sonuçlarını işlemek ve devretmek için RxJS'in Observable sınıfını kullanır.

// Burada isteği manipüle edebiliriz
const modifiedReq = req.clone({
  headers: req.headers.set('Authorization', 'Bearer token'),
});

Bu bölüm, HTTP isteğini manipüle eder. req.clone() metodu, orijinal isteği kopyalar. Ardından, bu kopyalanan isteğin başlıklarına bir Authorization başlığı ekler. Bu örnekte, bir örnek olarak "Bearer token" bir kimlik doğrulama belirtir. Bu kısmı isteğinizi isteğe göre değiştirmek için kullanabilirsiniz.

return next.handle(modifiedReq);

Bu satır, değiştirilmiş isteği next nesnesine yönlendirir. next.handle() metodu, isteği gerçekleştirmek ve yanıtı almak için kullanılır. Bu, interceptor'ın isteği değiştirmesine ve ardından değiştirilmiş isteği gerçekleştirmesine olanak tanır.

Bu şekilde, bu interceptor sınıfı, herhangi bir HTTP isteği gönderilmeden önce “Authorization” başlığını otomatik olarak ekleyecektir.

Interceptor’ı kullanmak için, providers dizininde interceptor sınıfınızı sağlamanız gerekir:

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
  ],
})
export class InterceptorModule {}

Bu şekilde, interceptor’ınız tüm HTTP isteklerini ele alacaktır.

Angular’da interceptor kullanmak, HTTP isteklerinizi ve yanıtlarınızı kontrol altına almanın güçlü bir yoludur. Güvenlik, performans, hata işleme ve daha fazlası için interceptor’lar kullanabilir ve uygulamanızın gücünü artırabilirsiniz.

Bu makalede, interceptor’ların ne olduğunu, neden kullanıldığını ve nasıl uygulandığını öğrendiniz. Artık Angular uygulamanızda interceptor’ları kullanarak daha güvenli, daha hızlı ve daha sağlam bir kod yazabilirsiniz.

Veri setleri büyüdükçe, tüm verileri bir seferde yüklemek yerine sayfa sayfa yüklemek, yani “Server Side Pagination” yani “Sunucu Taraflı Sayfalama” kullanmak, performansı ve kullanıcı deneyimini optimize etmek açısından önemli bir rol oynar.

Server Side Pagination Nedir?

Bu yöntemde, sayfalama işlemi sunucu tarafında gerçekleştirilir ve sadece mevcut sayfa için gerekli olan veriler istemciye gönderilir. Bu, kullanıcının sadece ihtiyaç duyduğu verilere odaklanmasını sağlar ve sayfa yükleme sürelerini önemli ölçüde azaltır.

Neden Server Side Pagination Kullanmalıyız?

Performans:

• Büyük veri setlerini bir seferde yüklemek, hem sunucu hem de istemci tarafında performans sorunlarına yol açabilir.
• Server Side Pagination, yalnızca görüntülenen veri miktarını minimize ederek daha hızlı sayfa yüklemeleri sağlar.

Veri Güncelliği:

• Server Side Pagination, veritabanındaki değişikliklere anında tepki gösterme yeteneği ile güncel verilerin kullanıcıya sunulmasını sağlar.

Veri Güvenliği:

• Özellikle hassas verilerle çalışıyorsanız, tüm verileri istemci tarayıcısına göndermek yerine sadece gerekli olan verileri almak, güvenlik açısından daha sağlam bir yaklaşımdır.

Angular ile Server Side Pagination Nasıl Gerçekleştirilir?

Angular, güçlü bir web uygulama çerçevesi olup, Server Side Pagination uygulamak için bir dizi araç ve yöntem sunar. Angular’ın sunduğu bileşenler, servisler ve HTTP istekleri üzerinden Server Side Pagination’ı etkili bir şekilde uygulamayı göreceğiz.

Adım adım Server Side Pagination’ı uygulamaya başlayacağız. İlk adım olarak, Angular projesinin temelini oluşturmak için gereken adımları göreceğiz.

Öncelikle server side pagination için API hizmetinin bize sunması gereken bazı özellikler olmalıdır.

Temelde bize lazım olan özelliklerin şunlar olduklarını söyleyebiliriz.

• data: Sayfanın içeriğini temsil eder.
• totalCount: Toplam öğe sayısını belirtir.
• page: Şu anki sayfa numarasını belirtir.
• pageSize: Her sayfada kaç öğe olması gerektiğini belirtir.

Bu özellikler tarafımıza sunan bir API servisini kullanarak başarılı bir şekilde server side pagination yapabiliyoruz.

Başlangıç olarak bir Angular projesi üretelim.

npm install -g @angular/cli

ng new angular-pagination-demo

cd angular-pagination-demo

ng serve

Bu komut, geliştirme sunucusunu başlatacak ve varsayılan olarak http://localhost:4200/ adresinde çalışan bir uygulama sunacaktır.

Projemizde sınıflarımızı oluşturmadan önce API hizmetine bir bakalım.

Burada konuyu çok dağıtmamak adına hali hazırda bize dummy data sunan bir api adresi kullanacağız.

Aşağıdaki sitede işimize yarayabilecek endpointler bulunmakta.

Reqres - A hosted REST-API ready to respond to your AJAX requests

Görüldüğü üzere LIST USERS’a bir GET isteği yaptığımızda bize lazım olan özelliklerle birlikte bir dönüş yapılmakta.

Bu adrese bir GET isteği yapabilmek ve bu isteği yaparken hangi modeli kullanacağımıza geçebiliriz.

Angular projemize geri dönelim ve bu isteği karşılayacak bir interface üretelim.

export interface User {
    id: number;
    first_name: string;
    last_name: string;
    email: string;
    avatar: string;
}

export interface PagedUserData{
    data: User[];
    page: number;
    per_page: number;
    total: number;
    total_pages: number;
}

export interface Project {
    name: string;
    id: number;
}

Endpointin bize dönüş değerlerine baktığımızda yukarıdaki modeller buna uygun görünmekte. Ana model olarak PagedUserData kullanacağız.

Şimdi API hizmetine ulaşacak olan servisimizi yazalım.

ng g s user

komutu ile projemizde yeni bir servis sınıfı tanımlayabiliriz.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PagedUserData } from './app/interfaces/user.interface';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }

  getUserList(pageNumber: Number, pageSize: Number): Observable<PagedUserData> {
    const url = `https://reqres.in/api/users?page=${pageNumber}&per_page=${pageSize}`;
    return this.http.get<PagedUserData>(url);
  }
}

Sınıfımızı detaylı bir şekilde inceleyelim.

Modül ve Kütüphaneler:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PagedUserData } from './app/interfaces/user.interface';

• HttpClient: Angular uygulamalarında HTTP isteklerini yönetmek için kullanılan bir modüldür.
• Injectable: Bu dekoratör, servis sınıfının bir bağımlılık olarak enjekte edilebilir olduğunu belirtir.
• Observable: RxJS kütüphanesinden gelir ve asenkron veri akışını temsil eder.
• PagedUserData: Önceki cevapta oluşturduğunuz kullanıcı verilerini ve sayfalama bilgilerini içeren arayüz.

Servis Sınıfı Tanımlama:

@Injectable({
  providedIn: 'root'
})

@Injectable dekoratörü, servis sınıfının Angular enjeksiyon sistemi tarafından yönetileceğini belirtir. providedIn: 'root' ifadesi, servisin uygulama genelinde paylaşılacağını gösterir.

Constructor ve HttpClient Enjeksiyonu:

constructor(private http: HttpClient) { }

HttpClient sınıfı, servis sınıfının constructor'ında enjekte edilir. Bu, HTTP istekleri yapmak için kullanılacaktır.

getUserList Metodu:

getUserList(pageNumber: Number, pageSize: Number): Observable<PagedUserData> {
  const url = `https://reqres.in/api/users?page=${pageNumber}&per_page=${pageSize}`;
  return this.http.get<PagedUserData>(url);
}

• getUserList metodu, kullanıcı verilerini çekmek için HTTP GET isteği yapar.
• pageNumber ve pageSize parametreleri, hangi sayfanın ve sayfadaki öğe sayısının alınacağını belirler.
• http.get<PagedUserData>(url): HTTP GET isteği yapar ve bu isteğin tipini PagedUserData olarak belirtir. Bu, RxJS tarafından sağlanan bir Observable döner.

Sıra bu servisimizi kullanacak olan user-list adındaki componentimizi oluşturmaya geldi.

ng g c user-list

Komutu ile yeni bir angular componenti oluşturuyoruz.

Bu işlemden hemen sonra app.component.html dosyasına ekleme yapabiliriz. Selector kısmına dikkat edin. Sizde app-user-list olabilir.

<user-list></user-list>
<router-outlet></router-outlet>

Projemizde Material bileşenlerini kullanacağız. Material kurulumu içinde küçük bir kod yazalım.

ng add @angular/material

Material dökümanı için ->

user-list.component.ts

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { merge, Observable, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { UserService } from 'src/userservice.service';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { User, PagedUserData } from '../interfaces/user.interface';

@Component({
  selector: 'user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent {

  dataSource = new MatTableDataSource<User>();
  @ViewChild('paginator') paginator: MatPaginator;

  pageSizes = [3, 5, 7];
  totalData: number = 7;
  isLoading = false;

  displayedColumns: string[] = [
    'id',
    'first_name',
    'last_name',
    'email',
    'avatar',
  ];
  UserData: User[];

  constructor(private userService: UserService, private cdr: ChangeDetectorRef) { }

  getUserListTableData$(pageNumber: number, pageSize: number): Observable<PagedUserData> {
    return this.userService.getUserList(pageNumber, pageSize);
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;

    merge(this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoading = true;
          return this.getUserListTableData$(
            this.paginator.pageIndex + 1,
            this.paginator.pageSize
          ).pipe(catchError(() => observableOf(null)));
        }),
        map((userTableData) => {
          if (userTableData == null) return [];
          this.totalData = userTableData.total;
          this.isLoading = false;
          return userTableData.data;
        })
      )
      .subscribe((userData) => {
        this.UserData = userData;
        this.dataSource = new MatTableDataSource(this.UserData);
        this.cdr.detectChanges();
      });
  }

}

Karmaşıkmı geldi? :) Biraz bakalım. Öncelikle constructorda bir servis enjeksiyonu yaparak biraz önce oluşturduğumuz servisi inject ediyoruz.

Sonrasında getUserListTableData fonksiyonu ile servisimize ulaşacak ve önyüzden topladığımız verileri args olarak gönderebileceğiz.

ngAfterViewInit metodu, bileşenin view (görünüm) bileşeninin oluşturulduktan ve görüntülendikten hemen sonra çalıştırılır.

Dolasıyla tablo işleyişini bu fonksiyonun içerisine yazabiliriz.

merge(this.paginator.page): MatPaginator'daki sayfa değişikliklerini izleyen bir Observable oluşturur. Yani, sayfalandırıcıda bir değişiklik olduğunda bu değişiklikleri yakalayabiliriz.

pipe(...) ve switchMap(() => {...}): Bu kısımda, sayfa değiştikçe çalışacak olan işlemler tanımlanır.

• switchMap: Her sayfa değişikliğinde, getUserListTableData$ metodunu çağırır. Bu metot, servis aracılığıyla kullanıcı listesi verilerini getirir.
• catchError(() => observableOf(null)): Eğer bir hata olursa, bu hatayı yakalar ve null ile birlikte bir Observable döner.

map((userTableData) => {...}): getUserListTableData$ metodunun döndüğü veriyi işler.

• if (userTableData == null) return [];: Eğer veri yoksa, boş bir dizi döndürür.
• this.totalData = userTableData.total;: Toplam veri sayısını günceller.
• this.isLoading = false;: Yükleniyor durumunu kapatır.
• return userTableData.data;: Kullanıcı verilerini döndürür.

.subscribe((userData) => {...}): En sonunda, bu işlemleri dinlemek üzere bir subscribe işlemi gerçekleştirilir.

• this.UserData = userData;: Kullanıcı verilerini günceller.
• this.dataSource = new MatTableDataSource(this.UserData);: MatTableDataSource'ı günceller.
• this.cdr.detectChanges();:

Değişiklik dedektörünü çalıştırır, böylece Angular, component'in durumundaki değişiklikleri algılar ve günceller.

Bir sonraki adımda; bu komponent içerisinde kullanacağımız bileşenleri modül olarak eklememizde gerekmekte.

Modülleri isterseniz tek tek app.module sayfasını içerisine ekleyebilir istersenizde daha düzenli olması için ayrı bir modül sınıfı yazarak, ana modül sınıfınızda bu sınıfı gösterebilirsiniz.

mt-components.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatCardModule } from '@angular/material/card';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
    declarations: [],
    imports: [
        MatTableModule,
        CommonModule,
        MatInputModule,
        MatSelectModule,
        MatCardModule,
        MatSortModule,
        MatPaginatorModule,
        MatProgressBarModule,
    ],
    exports: [
        MatTableModule,
        MatInputModule,
        MatSelectModule,
        MatCardModule,
        MatSortModule,
        MatPaginatorModule,
        MatProgressBarModule,
    ],
})
export class MaterialComponentsModule { }

Oluşturulan modül dosyasını ana modül dosyamıza referans edelim.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UserListComponent } from './user-list/user-list.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MaterialComponentsModule } from 'src/shared/metarial-components.module';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatTableModule,
    MatPaginatorModule,
    MaterialComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

imports dizisinin en alt satırında MaterialComponentsModule olarak referans ettik.

Artık Material Components’e ait çeşitli araçları kullanabileceğiz.

Material component gerekli değil. Çok daha farklı yapılar kullanarakta tablolar oluşturabilir ve yönetebilirsiniz. Material yapısıda gördüğüm kadarıyla popüler ve şık görünmekte.

Şimdi önyüz tasarımımızı yapalım.

user-list.component.ts

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <td mat-cell *matCellDef="let usr">{{ usr[column] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let usrRow; columns: displayedColumns"></tr>
</table>
<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
<mat-paginator #paginator [length]="totalData" [pageSizeOptions]="pageSizes" showFirstLastButtons></mat-paginator>

Şimdi önyüzün nasıl göründüğüne bir bakalım.

Proje repo

GitHub - sametuca/ng-serverside-pagination

Makalemiz burada son buluyor. Okuduğunuz için teşekkür ederim. Bir sonraki makalede görüşmek üzere. Hoşçakalın..

Yukarıda gördüğünüz gibi 3 bölümden oluşan bir biletten bahsediyoruz.

Header

Genel olarak jwt türü ve algoritması(RSA, SHA256) hakkında bilgi verir.

Payload

En önemli verilerin tutulduğu teknik olarak güvenceye almak istediklerimizin yer aldığı (tokenin süresi, kullanıcı ait bilgiler gibi) bilgiler içerir.

Signature

Son kısım ise aynı zamanda base64url kodlu olan imzadır. header, payload, key ve son olarak header kısmında belirtilen algoritmanın işlenmiş halidir. Sunucu bu yol ile header veya payload kısmında bir değişilik olup olmadığını ve doğru kişiden mi geldiğini kontrol eder.

Peki JWT Nasıl Çalışır?

Örnek olarak bir e-ticaret sitesine kullanıcı bilgileriniz ile giriş yapacaksınız. İlk adımda bilgileriniz sunucu tarafında kontrol edilir eğer kullanıcı bilgileriniz doğru ise sunucu tarafında tutulan secret-key ile size bir token üretilir. Bu token size gönderilir ve yeni bir sunucu tarafına yapılacak olan istekte sunucuya token ile gidersiniz. Sunucu token’ı public key ile çözer.

Daha iyi anlaşılması için aşağıda ki görseli inceleyebiliriz.

Peki sıfırdan JWT ile yetkilendirme kullanan bir api uygulaması yazarak işe başlayalım.

Projemiz .Net Core Web API projesi olacak. Konunun dışına çıkmamak adına pattern kullanmayacağız. İlk olarak projemizi oluşturalım. Devamında klasörlerimizi oluşturalım.

hemen sonra gerekli paketleri nuget üzerinden kurabiliriz. Paketler dotnet6'a uygun olarak kurulduğundan siz kendi .net sürümünüze uygun olanı seçmelisiniz.

İlk olarak daha sonra tekrar dönmeyelim diye ileride kullanacağımız sınıflarımızı oluşturalım. Uygulamada 3 farklı rol olacak.

1. Administrator
2. Moderator
3. User

Bu rolleri bir enum içerisinde tutacağız. İlgili sınıfı oluşturalım.

public class Authorization
    {
        public enum Roles
        {
            Administrator,
            Moderator,
            User
        }
        public const string default_username = "user";
        public const string default_email = "user@secureapi.com";
        public const string default_password = "Pa$$w0rd.";
        public const Roles default_role = Roles.User;
    }

Görüldüğü üzere default olarak verilen değerler var. Bu değerleri bir sonra ki adımlarda kullanacağız.

Sıra context sınıflarımızı oluşturmaya geldi. 2 adet context sınıfımız olacak. Biliyoruz ki context sınıfları veritabanı ile uygulamamız arasında köprü görevi gören bir yapıdır. İlk olarak bu yapıya ihtiyacımız var.

public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options):base(options)
        {
}
    }

görüldüğü üzere IdentityDbContext base olarak alınmış ve bu sınıf generic. İçerisine ise ApplicationUser sınıfını verdik. Bu sınıf MsIdentity kütüphanesinde custom kullanıcı bilgilerini kullanmamız için gerekli. Yeni bir sınıf oluşturalım ve adını ApplicationUser olarak belirleyelim.

public class ApplicationUser : IdentityUser
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

Dikkat ederseniz IdentityUser sınıfından kalıtım alarak bu sınıfı genişlettik. Sadece ek olarak first ve last name bilgilerinide kullanacağımız için gerekli 2 alanı eklemiş bulunuyoruz. Daha fazla field eklenebilir orası size kalmış. Sıra ikinci context sınıfımıza geldi. Bu sınıfımız uygulamamız ayağa kalktığı anda veritabanına default değerler gönderecek. Bir çok projede Seed şeklinde kullanılmaktadır.

Yeni bir sınıf oluşturalım ve adını ApplicationDbContextSeed olarak belirleyelim.

public class ApplicationDbContextSeed
    {
        public static async Task SeedEssentialAsync(UserManager<ApplicationUser> userManager,
            RoleManager<IdentityRole> roleManager)
        {
            //Seed roles
            await roleManager.CreateAsync(new IdentityRole(Authorization.Roles.Administrator.ToString()));
            await roleManager.CreateAsync(new IdentityRole(Authorization.Roles.Moderator.ToString()));
            await roleManager.CreateAsync(new IdentityRole(Authorization.Roles.User.ToString()));
//Seed Default User
            var defaultUser = new ApplicationUser { UserName =Authorization.default_username, 
                Email = Authorization.default_email,
                EmailConfirmed=true,
                PhoneNumberConfirmed = true,
            };
            if (userManager.Users.All(u=>u.Id!=defaultUser.Id))
            {
                await userManager.CreateAsync(defaultUser, Authorization.default_password);
                await userManager.AddToRoleAsync(defaultUser, Authorization.default_role.ToString());
            }
        }
    }

Bu sınıfta ise, Identity ile kullanıma açık olan UserManager<ApplicationUser> sınıfına biraz önce oluşturduğumuz sınıfı verdik. Aynı zamanda roller ile de çalışacağımız için hazır olarak gelen RoleManager<IdentityRole> sınıfımızı generic olarak veriyoruz. Sonrasında roller ile daha detaylı işlemler yapacağız. Ancak bu adım için yeterli.

Sınıfımızı incelersek; asenkron şekilde 3 farklı rol eklenmekte. Bu rolleri default olarak daha önce oluşturduğumuz sınıfta ki değerleri veriyoruz. Rol ve kullanıcı bilgilerini default olarak setledikten sonra son aşamada veritabanında bu kaydın aynısının var olup olmadığını kontrol ediyor eğer yok ise kaydediyoruz.

if (userManager.Users.All(u=>u.Id!=defaultUser.Id))
            {
                await userManager.CreateAsync(defaultUser, Authorization.default_password);
                await userManager.AddToRoleAsync(defaultUser, Authorization.default_role.ToString());
            }

Oluşturduğumuz yapıları Code First yöntemi ile veritabanına yansıtmamız gerekiyor. İlk olarak AppSettings.json dosyasının içerisine aşağıda gördüğünüz alanın size uygun halini yazınız.

"ConnectionStrings": {
    "DevConnection": "Data Source=localhost;Initial Catalog=SecureDb;Integrated Security=True"
  },

Appsettings.json dosyasındayken JWT için gerekli olan anahtar ve geçerlilik süresini de burada tutabileceğimizden geri dönmemek adına şimdi yazabiliriz.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DevConnection": "Data Source=localhost;Initial Catalog=SecureDb;Integrated Security=True"
  },
  "JWT": {
    "key": "C1CF4B7DC4C4175B6618DE4F55CA4",
    "Issuer": "SecureApi",
    "Audience": "SecureApiUser",
    "DurationInMinutes": 60
  }
}

appsettings.json dosyası altında işimiz bittikten sonra migration işlemine başlayalım.

Bir sonra ki sınıfımız ise bir kullanıcıya rol eklemesi yapılırken kullanacağımız sınıf. Bu sınıf içerisinde kullanıcıya ait olan mail, şifre ve rol bilgisini tutacak. Tools \ NuGet Package Manager \ Package Manager Console ' u açalım ve aşağıda ki 2 kodu sırasıyla yazalım. Oluşabilecek bir hata da Entity Framework varlığını ve versiyonunu kontrol etmenizi tavsiye ederim.

Add-Migration Initial

Update-Database

Artık gerekli tablolarımız veritabanımıza yansıtıldı. Şimdi sınıflarımızı oluşturmaya devam edelim.

Kullanıcının ilk olarak sistemde kayıtlı olduğunu bilmemiz var ise rollerini görmemiz gerekir. sonrasında ise authorization işlemi gerçekleştirilecektir.

Yeni bir sınıf oluşturalım ve adını AuthenticationModel olarak belirleyelim.

public struct AuthenticationModel
    {
        public string Message { get; set; }
        public bool IsAuthenticated { get; set; }
        public string UserName { get; set; }
        public string Email { get; set; }
        public List<string> Roles { get; set; }
        public string Token { get; set; }
    }

public class AddRoleModel
    {
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
        [Required]
        public string Role { get; set; }
    }

Şimdi sıra geldi bir JWT sınıfı oluşturmaya. JWT ile ilgili bize gerekli olan verileri tutacak bir sınıf gerekmekte. Yeni bir sınıf oluşturup adını JWT olarak belirleyelim.

public class JWT
    {
        public string Key { get; set; }
        public string Issuer { get; set; }
        public string Audience { get; set; }
        public double DurationInMinutes { get; set; }
    }

Anahtar ve bu biletin geçerlilik süresi vs. üzerinde işlem yapmamız için gerekli alanları yazıyoruz.

Eklememiz gereken bir başka sınıf ise RegisterModel. Bu sınıfı ile bir kullanıcının sisteme kayıt olması aşamasında kullanacağız.

public class RegisterModel
    {
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string UserName { get; set; }
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
    }

Alanların gerekli olduğunu belirtmek için Required ile işaretlediğimizden emin olalım.

Yukarıda bahsettiğim gibi kullanıcının bilgilerinin doğruluğunu kontrol ettikten sonra kullanıcıya token vermemiz gerektiği. Bu sebeple kullanıcının mail ve şifresi üzerinde işlem yapabileceğimiz bir modele ihtiyacımız var. Yeni bir sınıf oluşturalım ve adını TokenRequestModel olarak belirleyelim.

public class TokenRequestModel
    {
        [Required]
        public string Email { get; set; }
        [Required]
        public string Password { get; set; }
    }

Kullanıcı bu bilgileri kullanarak token isteğinde bulunabilecek. Artık sıra geldi servisimizi yazmaya. Bir interface üretelim ve kullanacağımız metot imzalarını yazalım.

public interface IUserService
    {
        Task<string> RegisterAsync(RegisterModel model);
        Task<AuthenticationModel> GetTokenAsync(TokenRequestModel model);

        Task<string> AddRoleAsync(AddRoleModel model);
    }

1. Kullanıcının sisteme üye olması için gereken ve kullanıcıdan bir RegisterModel bekleyen metot.
2. Kullanıcının bilgilerini doğruladıktan sonra ona bir AuthenticationModel içerisinde Token döneceğimiz ve kendisinden TokenRequestModel beklediğimiz metot.
3. Kullanıcıya rol bazlı işlem yapmak için AddRoleModel sınıfını beklediğimiz metot.

Şimdi bu oluşturduğumuz arayüzü yeni bir sınıf oluşturarak implement edelim.

public class UserService : IUserService
    {
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly RoleManager<IdentityRole> _roleManager;
        private readonly JWT _jwt;
        public UserService(UserManager<ApplicationUser> userManager, RoleManager<IdentityRole> roleManager, IOptions<JWT> jwt)
        {
            _userManager = userManager;
            _roleManager = roleManager;
            _jwt = jwt.Value;
        }

Kullanacağımız metotları doldurmadan önce gerekli DI işlemlerini yapıyoruz. UserManager ve RoleManager sınıfları ile gelen kullanıcı bilgilerini doğrulayacağız. IOption ile JWT modeline uygun olarak appsettings.json içerisinde oluşturduğumuz alanlara ulaşabiliriz.

İlk fonksiyonumuz Register. Bu fonksiyon ile kullanıcı sisteme kayıt olabilecek

public async Task<string> RegisterAsync(RegisterModel model)
        {
//ApplicationUser sınıfının instancesini alarak içerisini gelen modeldeki bilgilere göre doldurduk. Bu işlemi yapmamızın sebebi userManager sınıfı bizden parametre olarak bu modeli beklemektedir.
            var user = new ApplicationUser
            {
                UserName = model.UserName,
                Email = model.Email,
                FirstName = model.FirstName,
                LastName = model.LastName,

            };

            var userWithSameEmail = await _userManager.FindByEmailAsync(model.Email);
            if (userWithSameEmail == null)
            {
                var result = await _userManager.CreateAsync(user, model.Password);
                if (result.Succeeded)
                {
                    await _userManager.AddToRoleAsync(user, Authorization.default_role.ToString());
                }
                return $"User Registered {user.UserName}";
            }
            else
            {
                return $"Email {user.Email } is already registered.";
            }


        }

1. ApplicationUser sınıfının instancesini alarak içerisini gelen modeldeki bilgilere göre doldurduk. Bu işlemi yapmamızın sebebi userManager sınıfı bizden parametre olarak bu modeli beklemektedir.
2. Kullanıcının mail adresi ile varlığının kontrolünü sağlıyoruz.

3.Eğer kullanıcı yok ise artık kayıt işlemine başlayabiliriz. Bu durumda ilk olarak kullanıcı bilgisini FindByEmailAsync metodu ile kontrol ediyoruz. CreateAsync metoduna göndererek kullanıcıyı oluşturuyoruz. Oluşturulan kullanıcıya bir rol ataması için AddToRoleAsync metoduna default rol bilgisini veriyoruz.

“AddRoleAsync” metodumuz henüz hazır değil. Kullanıcıya rol ekleme işlemleri için aşağıda ki gibi metodu dolduralım.

public async Task<string> AddRoleAsync(AddRoleModel model)
        {
            var user = await _userManager.FindByEmailAsync(model.Email);
            if (user==null)
            {
                return $"No Accounts Registered with {model.Email}.";
            }
            if(await _userManager.CheckPasswordAsync(user,model.Password))
            {
                var roleExists = Enum.GetNames(typeof(Authorization.Roles))
                    .Any(x => x.ToLower() == model.Role.ToLower());
                if (roleExists)
                {
                    var validRole = Enum.GetValues(typeof(Authorization.Roles)).Cast<Authorization.Roles>()
                        .Where(x => x.ToString().ToLower() == model.Role.ToLower())
                        .FirstOrDefault();

                    await _userManager.AddToRoleAsync(user, validRole.ToString());
                    return $"Added {model.Role} to user {model.Email}.";
                }
                return $"Role {model.Role} not found.";
            }
            return $"Incorrect Credentials for user {user.Email}.";
        }

Register işlemlerinde yapılanların bir benzerini burada yaparak ilk kullanıcıyı bulup sonrasında rol eklemesi yapıyoruz.

Sıra en önemli aşama olan kullanıcıya token üretmede.

public async Task<AuthenticationModel> GetTokenAsync(TokenRequestModel model)
        {
            AuthenticationModel authenticationModel;
            var user = await _userManager.FindByEmailAsync(model.Email);
            if (user == null)
                return new AuthenticationModel { IsAuthenticated = false, Message = $"No Accounts Registered with { model.Email }." };

            if (await _userManager.CheckPasswordAsync(user, model.Password))
            {
                JwtSecurityToken jwtSecurityToken = await CreateJwtToken(user);

                authenticationModel = new AuthenticationModel
                {
                    IsAuthenticated = true,
                    Message = jwtSecurityToken.ToString(),
                    UserName = user.UserName,
                    Token = new JwtSecurityTokenHandler().WriteToken(jwtSecurityToken),
                    Email = user.Email,
                };
                var rolesList = await _userManager.GetRolesAsync(user).ConfigureAwait(false);
                authenticationModel.Roles = rolesList.ToList();
                return authenticationModel;
            }
            else
            {
                 authenticationModel = new AuthenticationModel()
            {
                IsAuthenticated = false,
                Message = $"Incorrect Credentials for user {user.Email}."
            };
            }


            return authenticationModel;
        }

1. İlk olarak gelen modelde ki email bilgisine bakarak kullanıcının verilerini veritabanından çekiyoruz. Sonrasında şifre kontrolü yapıyoruz. Eğer bilgiler doğru ise yeni bir JwtSecurityToken instance alıp bunu CreateJwtToken metodundan dönecek olan token modeli ile dolduruyoruz.

Oluşturduğumuz AuthenticationModel içerisine kullanıcı ile ilgili token ve diğer bilgileri yazıyoruz.

Burada kullandığımız CreateJwtToken metodunu dolduralım.

private async Task<JwtSecurityToken> CreateJwtToken(ApplicationUser user)
        {
            var userClaims = await _userManager.GetClaimsAsync(user);
            var roles = await _userManager.GetRolesAsync(user);
            var roleClaims = new List<Claim>();
            for (int i = 0; i < roles.Count; i++)
            {
                roleClaims.Add(new Claim("roles", roles[i]));
            }
            var claims = new[]
            {
                new Claim(JwtRegisteredClaimNames.Sub, user.UserName),
                new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
                new Claim(JwtRegisteredClaimNames.Email, user.Email),
                new Claim("uid", user.Id)
            }
            .Union(userClaims)
            .Union(roleClaims);
            var symmetricSecurityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwt.Key));
            var signingCredentials = new SigningCredentials(symmetricSecurityKey, SecurityAlgorithms.HmacSha256);
            var jwtSecurityToken = new JwtSecurityToken(
                issuer: _jwt.Issuer,
                audience: _jwt.Audience,
                claims: claims,
                expires: DateTime.UtcNow.AddMinutes(_jwt.DurationInMinutes),
                signingCredentials: signingCredentials);
            return jwtSecurityToken;
        }

Rollerde dahil olmak üzere kullanıcı ile ilgili bilgilerini alıyoruz. Bir kullanıcının birden fazla rolü olabileceğinden döngü ile kontrol ediyoruz. Sonrasında kullanıcının username, email ve benzersiz bir anahtar oluşturup Claim dizisine ekliyoruz. Son bölümdeappsettings içerisinden key bilgisini okuyarak SymmetricSecurityKey oluşturuyoruz. Hemen altında credantial için oluşturduğumuz anahtar ve kullanacağımız algoritmayı yazıyoruz. Token oluşturmaya hazır hale geldiğinde yeni bir JwtSecurityToken modeli oluşturup bunu geri dönüyoruz.

Bir sonra ki aşamada Controller oluşturup yaptıklarımızı test etmek kaldı. İlk olarak sadece Authorize olan kullanıcılara bir değer döndürdüğümüz controller ve action oluşturalım. Controllerimiz route ayarlarını unutmayalım.

[Route("api/[controller]")]
    [ApiController]
    public class SecuredController : Controller
    {
        [HttpGet]
        public IActionResult GetSecuredData()
        {
            return Ok("This Secured Data is available only for Authenticated Users.");
        }
    }

Bir sonra ki adımda servisimi call edeceğimiz Controlleri oluşturuyoruz. Controllerimiz route ayarlarını unutmayalım.

[Route("api/[controller]")]
    [ApiController]

    public class UserController : ControllerBase
    {
        private readonly IUserService _userService;
        public UserController(IUserService userService)
        {
            _userService = userService;
        }


        [HttpPost("register")]
        public async Task<ActionResult> ResultAsync(RegisterModel register)
        {
            var result = await _userService.RegisterAsync(register);
            return Ok(result);
        }

        [HttpPost("token")]
        public async Task<IActionResult> GetTokenAsync(TokenRequestModel model)
        {
            var result = await _userService.GetTokenAsync(model);
            return Ok(result);
        }

        [HttpPost("addrole")]
        public async Task<IActionResult> AddRoleAsync(AddRoleModel model)
        {
            var result = await _userService.AddRoleAsync(model);
            return Ok(result);
        }
    }

Tabi ki unutmadan startup.cs içerisinde gerekli konfigurasyonları yapmak zorundayız.

public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            //AppSettings konfigurasyonu
            services.Configure<JWT>(Configuration.GetSection("JWT"));

            //DI User Service
            services.AddIdentity<ApplicationUser, IdentityRole>().AddEntityFrameworkStores<ApplicationDbContext>();
            services.AddScoped<IUserService, UserService>();

            //DB Contextin eklenmesi
            services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(
                    Configuration.GetConnectionString("DevConnection"),
                    b => b.MigrationsAssembly(typeof(ApplicationDbContext).Assembly.FullName)));

            // JWT
            services.AddAuthentication(options =>
            {
                options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
            })
                .AddJwtBearer(o =>
                {
                    o.RequireHttpsMetadata = false;
                    o.SaveToken = false;
                    o.TokenValidationParameters = new TokenValidationParameters
                    {
                        ValidateIssuerSigningKey = true,
                        ValidateIssuer = true,
                        ValidateAudience = true,
                        ValidateLifetime = true,
                        ClockSkew = TimeSpan.Zero,
                        ValidIssuer = Configuration["JWT:Issuer"],
                        ValidAudience = Configuration["JWT:Audience"],
                        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JWT:Key"]))
                    };
                });
            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "sametuca_dev_jwt_v1", Version = "v1" });
            });
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "sametuca_dev_jwt_v1"));
            }

            app.UseHttpsRedirection();

            app.UseRouting();
            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }

Startup ayarlarımızda bittiğine göre artık uygulamamızı Postman üzerinden test edebiliriz.

Ben bu tip işlemlerde genel olarak Postman kullanmaktayım. Sizler farklı bir araç kullanabilirsiniz.

Postman Resmi Web Sitesi

Uygulamayı başlatın ve Postmanüzerinden aşağıda ki görseldeki seçeneklere göre post isteği atın.

User Registered hashcodemakale şeklinde mesajı gördük. Artık bu isimde bir kullanıcımız sistemde. Şimdi Token ile zenginleştirelim.

Artık kullanıcımıza ait sistem tarafından üretilmiş bir Token bulunmakta. Peki bu Tokeni nasıl kullanacağız? Hatırlarsanız sadece Authorize olmuş kullanıcıları kabul ettiğimiz bir Action vardı. Şimdi ona Token bilgimiz ile bir GET isteğinde bulunalım.

İşlem bu kadar. Umarım yardımcı olabilmişimdir. Zaman ayırdığınız için teşekkürler. Bir sonraki makalede görüşmek üzere sağlıcakla kalın..

Elasticsearch

Elasticsearch’e baktığımızda açık kaynaklı arama ve analiz motoru olduğunu görüyoruz.

Kullanım senaryolarında, büyük miktardaki verileri hızlı bir şekilde depolamamıza, aramamıza ve analiz etmek olabilir. Özellikle büyük ölçekli veri arama senaryoları için kullanılır.

Çalışma Mantığı

Elasticsearch’in çalışma mantığı, bir dizi belgeyi alıp bunları bir indeks içinde depolamasına dayanır. Her belgenin birden çok alanı olabilir ve Elasticsearch, bu alanlara hızlı bir şekilde erişim sağlamak için bir ters indeksleme yapısı kullanır.

Ters İndeksleme

Ters indeksleme, veri depolama ve arama süreçlerini optimize etmek için kullanılan bir yöntemdir. Geleneksel bir indeksleme yönteminin tersine, ters indeksleme, her bir terimin hangi belgede bulunduğunu takip etmek için bir veri yapısı kullanır.

Bir belgenin içeriğini indekslemek için, ters indeksleme işleminde şu adımlar izlenecektir.

1. Belgenin içeriği parçalara ayrılır. Örneğin, bir cümledeki her kelime ayrı bir terim olarak kabul edilir.
2. Her terim, hangi belgede bulunduğunu referans etmek için bir veri yapısı içinde saklanır.
3. Veri yapısında, her terimle ilişkili belgelerin listesi tutulur. Bu liste, ilgili belgenin konumunu veya diğer bilgilerini içerebilir.

Ters indeksleme, arama sorgularını hızlandırmak için kullanılır. Arama sırasında, istenen terimlerle eşleşen belgelerin listesine hızlı bir şekilde erişilir ve döndürülebilir. Ters indeksleme ayrıca arama sorgularında filtreleme, sıralama ve diğer işlemleri de kolaylaştırır.

Bu açıklama yeterli olmadı mı? O zaman kısa bir ara verip şu makaleyi okuyabilirsiniz.

https://codingexplained.com/coding/elasticsearch/understanding-the-inverted-index-in-elasticsearch

Devam edersek, yeni başlayanlar için, Elasticsearch’i şu şekilde düşünebilirsiniz:

Bir kitaplığa benzer. Kitaplığınızda birçok kitap bulunur ve bu kitapların içindeki bilgilere hızlı bir şekilde erişmek istersiniz. Elasticsearch, kitapların dizinlenmiş bir sıralama ve kategorilendirme sistemine sahip olduğu bir kitaplık gibidir. İstediğiniz bilgiyi hızlıca bulabilir ve aradığınızı bulmanızı kolaylaştırır.

Elasticsearch, genellikle büyük ölçekli veritabanları, web siteleri, uygulamalar ve log analizleri gibi veri yoğun alanlarda kullanılır. Verileri kolayca arayabilir, filtreleyebilir ve sıralayabilirsiniz.

Elasticsearch, dağıtık bir yapıya sahiptir, bu da performansı ve ölçeklenebilirliği artırır. Verilerinizi birden fazla sunucuda saklayabilir ve yüksek kullanılabilirlik sağlayabilirsiniz.

Özetlemek gerekirse, Elasticsearch büyük miktardaki verileri hızlı bir şekilde aramanıza, analiz etmenize ve keşfetmenize olanak tanıyan açık kaynaklı bir arama ve analiz motorudur. Verileri düzenlemek, aramak ve analiz etmek için kullanışlıdır ve genellikle büyük ölçekli veritabanları ve analitik senaryolarında kullanılır.

Elasticsearch Kurulum

Projemizde elasticsearch kullanmak için ilk olarak resmi web sitesinden indirmemiz gerekmekte.

https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.8.2-windows-x86_64.zip

İndirilen dosyayı arşiveden çıkarın.

Arşiveden çıkarılan klasörün içerisindeki config klasörüne gidin.

elasticsearch.yaml dosyasını bir metin editörü ile açın.

xpack.security.enabled: true

satırını

xpack.security.enabled: false

olarak değiştirin.

Bu durumda elasticSearch kimlik doğrulama işlemini atlamış olacağız. Bunu yapmamızın sebebi bu anlatımın henüz giriş seviyesinde olmasından dolayı güvenlik aşamalarının ilerleyen seviyelere uygun olması.

Şimdi tekrar elasticsearch anaklasörüne gidin ve bin klasörünü açın.

Resimde işaretlediğim elasticsearch.bat dosyasını yönetici olarak çalıştırınız.

Kısa bir süre yükleme gerçekleşecek ve http://localhost:9200 adresine erişim hazır olacaktır.

Bu adrese gittiğinizde şu JSON verisi ile karşılaşıyorsanız kurulum sorunsuz gerçekleşmiştir.

Elasticsearch sistem kurulumu tamamlandığına göre artık uygulama geliştirme tarafına geçebiliriz.

Uygulama Geliştirme

Visual Studio IDE üzerinden çalışma yapacağım. Eğer siz farklı bir IDE kullanıyorsanız orada Console APP üretmeniz ilk aşama için yeterli.

Proje oluşturulduktan sonra elasticsearch ile iletişim kurabilmek için gerekli bir paket kurmamız lazım.

NEST Paketi Nedir? Ne İşe Yarar?

NEST, Elasticsearch ile etkileşimde bulunmak için kullanılan resmi bir .NET istemci kitaplığıdır. Elasticsearch ile veri indeksleme, sorgulama, güncelleme, silme gibi işlemleri gerçekleştirmenizi sağlar.

NEST, Elasticsearch sorgularınızı ve veri işlemlerinizi daha kolay bir şekilde yapabilirsiniz. NEST, C#’ın özelliklerinden yararlanarak Elasticsearch ile etkileşimi basitleştirir ve daha okunabilir ve sürdürülebilir kod yazmanıza olanak tanır.

NEST Kurulum

Projede kullanacağınız NuGet paketlerini yönetmek için NuGet Paket Yöneticisi’ni açın.

• Visual Studio’da “Tools” menüsünden “NuGet Package Manager” seçeneğini seçin ve ardından “Manage NuGet Packages for Solution” seçeneğini tıklayın.

1. NuGet Paket Yöneticisi’nde, “Browse” sekmesine geçin.
2. Arama kutusuna “NEST” yazın ve arama yapın.
3. Sonuçlar arasından “NEST” paketini bulun ve “Install” (Yükle) düğmesine tıklayın.

Kodlama kısmında satır satır ne yapabileceğimize bir bakalım.

İlk olarak paket kurulumundan sonra bir node üretip elasticsearch sunucusuna erişim sağlayacak temsili bir nesne olmalı.

 var node = new Uri("http://localhost:9200");

Bir sonraki satırda ihtiyacımız olan URI nesnesini kullanarak bir ConnectionSettings nesnesi oluşturmak.

ConnectionSettings

ConnectionSettings, Elasticsearch istemcisine bağlantı ayarlarını sağlar

Bu nesne ile belirtilen Uri, elasticsearch sunucusuna bağlanır.

var settings = new ConnectionSettings(node)

Noktalı virgülü unuttumuğumu düşünmeyin bu kodun devamında çeşitli set işlemleri yapacağız.

Bir sonraki satırda Elasticsearch için varsayılan dizini “sametuca-medium” olarak ayarlıyoruz. Bu, Elasticsearch sunucusunda yapılan birçok işlemde varsayılan dizinin bu değeri kullanacağı anlamına gelir.

 .DefaultIndex("sametuca-medium")

Bir satır aşağı inerek “DisableDirectStreaming” yöntemi çağrılarak doğrudan akışı devre dışı bırakır. Bu, Elasticsearch ile iletişimde doğrudan akışın kullanılmayacağı ve istemcinin verileri tamponlayacağı anlamına gelir.

.DisableDirectStreaming();

Şimdi şuana kadar yazdığımız koda bir bakarsak;

var node = new Uri("http://localhost:9200");
            var settings = new ConnectionSettings(node)
                .DefaultIndex("sametuca-medium")
                .DisableDirectStreaming();

Şimdi bize lazım olan ConnectionSettings nesnesini kullanarak bir elasticClient nesnesi oluşturmak. Bu nesne elasticsearch ile etkileşim için gereklidir.

var client = new ElasticClient(settings);

Bir sonraki adımda artık elasticsearch tarafına gönderilecek belgeyi oluşturmamız gerkeiyor.

Bu belge elasticsearch’e gönderilecek verileri temsi edecektir.

 var document = new MyDocument
            {
                Id = 1,
                Title = "Örnek Belge 1",
                Content = "Elasticsearch medium makalesi için örnek - sametuca"
            };

Bir sonraki adımda daha önce oluşturduğumuz client örneği ile document adlı belgeyi elasticsearch’e ekleyeceğiz.

var indexResponse = client.IndexDocument(document);

IndexDocument fonksiyonu, parametre olarak dizine eklenecek belgeyi alır ve geriye bir IndexResponse döner. Bu response üzerinden belgenin eklenip eklenmediğini öğrenebiliriz.

client.IndexDocument(document);
yöntemi aracılığıyla gönderilen belge JSON formatında Elasticsearch'e iletilir.

Bunun dışında eklenirken bir problem yaşarsak bununla ilgili detaylarıda içerecektir.

if (indexResponse.IsValid)
            {
                Console.WriteLine("Belge başarıyla indekslendi.");
            }
            else
            {
                Console.WriteLine("Belge indekslenirken hata oluştu: " + indexResponse.DebugInformation);
            }

indexResponse.IsValid kontrolüyle işlemin sonucuna göre aksiyon alabiliriz.

Bu aşamadan sonra bir sorun olmazsa belge eklenecektir. Peki belge eklendikten sonra bu belge için bir query yazabilirmiyiz?

var searchResponse = client.Search<MyDocument>(s => s
                .Index("sametuca-medium")
                .Query(q => q
                    .Match(m => m
                        .Field(f => f.Title)
                        .Query("Elasticsearch medium makalesi için örnek - sametuca")
                    )
                )
            );

Kodu incelediğimizde “sametuca-medium” dizinindeki Title alanında "Elasticsearch" kelimesiyle eşleşen belgeleri arıyoruz. Arama sonucu, nesne olarak döndürülür. Bu nesne, Elasticsearch'ten dönen arama sonucunu içermektedir.

if (searchResponse.IsValid)
            {
                Console.WriteLine("Arama sonuçları:");
                foreach (var hit in searchResponse.Hits)
                {
                    Console.WriteLine("Id: " + hit.Id);
                    Console.WriteLine("Content: " + hit.Source.Content);
                    Console.WriteLine();
                }
            }
            else
            {
                Console.WriteLine("Arama yapılırken hata oluştu: " + searchResponse.DebugInformation);
            }

            Console.ReadLine();

sorguda problem yoksa searchResponse nesnesinin Hits özelliğini kontrol ediyoruz.

Hits

Hits, Elasticsearch’ten dönen arama sonuçlarını temsil eden bir özelliktir. ISearchResponse<T> arayüzünde bulunur.

Uygulama kodları hazır ise artık çalıştırabiliriz. Sonuç aşağıdaki gibi görünecektir.

Kodların tamamı ise şu şekildedir.

using Nest;

namespace elasticsearch_dotnet
{
    public class MyDocument
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Content { get; set; }
    }
    internal class Program
    {
        static void Main(string[] args)
        {
            var node = new Uri("http://localhost:9200");
            var settings = new ConnectionSettings(node)
                .DefaultIndex("sametuca-medium")
                .DisableDirectStreaming();
            var client = new ElasticClient(settings);

            var document = new MyDocument
            {
                Id = 1,
                Title = "Örnek Belge 1",
                Content = "Elasticsearch medium makalesi için örnek - sametuca"
            };

            
            var indexResponse = client.IndexDocument(document);

            if (indexResponse.IsValid)
            {
                Console.WriteLine("Belge başarıyla indekslendi.");
            }
            else
            {
                Console.WriteLine("Belge indekslenirken hata oluştu: " + indexResponse.DebugInformation);
            }

            
            var searchResponse = client.Search<MyDocument>(s => s
                .Index("sametuca-medium")
                .Query(q => q
                    .Match(m => m
                        .Field(f => f.Title)
                        .Query("Elasticsearch medium makalesi için örnek - sametuca")
                    )
                )
            );

            //bir hata olduğunda detaylı bilgi alabiliriz. 
            //var res = searchResponse.DebugInformation;
            //Console.WriteLine(res);

            if (searchResponse.IsValid)
            {
                Console.WriteLine("Arama sonuçları:");
                foreach (var hit in searchResponse.Hits)
                {
                    Console.WriteLine("Id: " + hit.Id);
                    Console.WriteLine("Content: " + hit.Source.Content);
                    Console.WriteLine();
                }
            }
            else
            {
                Console.WriteLine("Arama yapılırken hata oluştu: " + searchResponse.DebugInformation);
            }

            Console.ReadLine();
        }
    }
}

Projenin kaynağına buradan ulaşabilirsiniz.

Bu makale yazılırken yararlanılan kaynaklar
https://www.elastic.co/guide/en/elasticsearch/reference/current/elasticsearch-intro.html

• An Elasticsearch Tutorial for .NET Developers | Toptal®
• Connecting to Elasticsearch with C#

https://codingexplained.com/coding/elasticsearch/understanding-the-inverted-index-in-elasticsearch