Günümüzde Angular gibi modern web geliştirme araçları, farklı kaynaklardan veri alırken veri formatlarının çeşitliliğiyle karşılaşabilir. Bu durumda, uygulama içindeki veri yönetimini kolaylaştırmak ve tutarlılık sağlamak için "normalizer" önemli bir rol oynar.

Angular normalizerlar genellikle özelleştirilmiş kullanım alanları için uygulanan ve genel olarak belirli bir kütüphane veya özellik olarak sunulan bir yapı değildir.

 

Normalizer Nedir ?

 

     Normalizer, Angular projelerinde genelde HTTP istekleri ile elde edilen veri yapılarını düzenlemek, manipüle etmek, sadeleştirmek ya da standart formata getirmek için kullanılır. Bu yapıyı kullanmamızın amacı; verilerin istemci tarafında daha kullanışlı hale getirilmesini sağlamak ve uygulama içerisindeki tutarlılığı sağlamaktır. Veri normalizasyonu veri yapılarının belirli bir düzene konması ve optimize edilmesi sürecini temsil eder. Bu süreçte genellikle ilişkisel veritabanlarında kullanılan normalizasyon ilkelerine benzer şekilde, veriyi belirli bir düzene, kalıba sokma ve tekrar eden verileri azaltmak için kullanılan bir tekniktir. Verileri bir dizi kurala göre daha basit ve tutarlı bir yapıya dönüştürür. Bu verilerin daha verimli bir şekilde depolanmasını ve kullanılmasını sağlar.

Kısacası Normalizerlar, gelen veri yapılarını işleyerek istenilen formata getiren ve bu sayede uygulama içindeki veri yönetimini kolaylaştıran araçlardır.

 

Normalizer hangi yöntemler ile kullanılabilir ? 

 

   Normalizerlar daha çok backend iletişimi, REST API kullanımı, veri manipülasyonu veya state management sistemleri (örneğin, Redux gibi) içinde özelleştirilmiş veri yapılarının kullanılması gereken durumlarda  devreye girer.

Angularda normalizer’ın NGXS , RxJs, Reducer, NGRX yapılarıyla çeşitli kullanımları mevcuttur fakat yaptığı iş genel manada veriyi manipüle ederek daha sade ve daha kullanılabilir bir yapıya dönüştürmektir.

 

Normalizer Kullanım Amacı Nedir ? 

 

   Angular uygulamalarında normalizer genellikle şu amaçlarla kullanılır:

  • Veri Yapısını düzenleme:

API'lerden alınan veriler farklı formatlarda karşımıza çıkabilir. Normalizer kullanarak, bu verileri istenen formatta uygulama içinde kullanılabilir hale dönüştürerek veri yönetimini kolaylaştırır.

  • Gereksiz Bilgileri ve tekrarlanan verileri Temizleme:

API'den alınan veriler bazen gereksiz veya tekrar eden bilgiler içerebilir. Normalizer, bu durumda veri setinde bir sadeleştirmeye giderek veri setini istenen formata getirebilir.

  • Veri Tipi Dönüşümü:

Gelen verilerin tipleri (string, number, boolean vb.)bazen uygulama için uygun olmayabilir. Normalizerlar, veri tiplerini uygulamaya uygun formatta olacak şekilde dönüştürerek veri uyumluluğunu sağlar.

  • Verilerin daha verimli bir şekilde kullanılması ve depolanması

 

Normalizer örnek kullanımı 

 

import { HttpClient } from "@angular/common/http";
import { map } from "rxjs";
import { User } from "./user";


export function normalizeData(data : any) : User[] {
    return data .map((item : any) => {
        return {
            id : item.id,
            name : item.full.name,
            email : item.email
        }
    })
}

Bu şekilde normalizerlar, gelen verilerin uygun formatta olmasını sağlayarak uygulama içindeki veri yönetimini kolaylaştırır.

 

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

    getData(){
    return this.http.get('USERS_API_URL').pipe(
        map((data : any) => normalizeData(data))
    )
    }
}

Bir kullanıcı listesi apiden alınıyor ve normalizer ile gelen verileri uygun formata dönüştürüyor.

 

Reactive Forms ile Normalizer kullanımı 

 

Reactive Forms nedir ?

 

   Reactive Forms, Angular'da kullanıcı girişi gibi formların işlenmesi için kullanılan ve formdaki değişiklikleri sürekli olarak takip eden bir yapıdır. Bu yapı, normalizer ile birlikte kullanılarak formdaki verilerin işlenmesi, dönüştürülmesi veya doğrulanması gibi işlemlerde oldukça etkili olabilir.

 

Reactive Forms ve Normalizer 

 

   Angular'da Reactive Forms yapısı, özellikle kullanıcı girişi gibi formların işlenmesi için kullanılan ve formdaki değişiklikleri sürekli olarak takip eden bir yapıdır. Bu yapı, formdaki herhangi bir değişiklikte formun geçerlilik durumunu, değerlerini veya durumunu anında takip edebilir. Reactive Forms, gelen verilerin uygun formata dönüştürülmesi, doğrulanması veya manipülasyonu gibi işlemlerde Normalizer'larla birlikte sıkça kullanılır.

Normalizerlar, Reactive Forms ile birleştirilerek formdaki verilerin işlenmesi sağlanır. Bu işlemler arasında, gelen verilerin uygun formata dönüştürülmesi veya formdan gelen verilerin API'ye gönderilmeden önce uygun hale getirilmesi gibi durumlar bulunabilir. Özellikle, form verilerinin API'ye gönderilirken normalizerlar kullanılarak verilerin doğru formatta sunulması sağlanabilir.

   Reactive Forms yapısı ve normalizerlar bir araya geldiğinde, kullanıcı girişi, veri gönderimi gibi senaryolarda tutarlılık ve kolaylık sağlanabilir. Bu kombinasyon, veri yönetiminde etkili bir araç seti sunar ve form verilerinin yönetimi, doğrulanması veya dönüştürülmesi gibi durumlarda büyük ölçüde kullanışlıdır.

Kısacası, Reactive Forms yapısı ve normalizerlar, Angular uygulamalarında veri yönetimi süreçlerini düzenlemek ve optimize etmek için güçlü bir kombinasyon oluşturur.

 

Gerçek hayatta kullanımına örnek :

  Normalizer, formdaki verileri önceden belirlenmiş bir şekilde düzenleme veya dönüştürme işlevini ifade eder. Bu örnekte, özel bir normalizer kullanarak bir metin alanındaki girişi büyük harfe dönüştüreceğiz.

 

İlk olarak, app.module.ts dosyasında ReactiveFormsModule'ı içe aktardığınızdan emin olun:

import {ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports: [ReactiveFormsModule],

})
export class AppModule { }

 

Sonra, bir form oluşturarak normalizer'ı uygulayabiliriz. Örneğin,  app.component.ts dosyasında şu kodu kullanabilirsiniz. Ben normalizer adında bir component oluşturdum.

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

  function uppercaseNormalizer(control: FormControl) {
  const value = control.value as string;
  const uppercasedValue = value.toUpperCase();
  return { uppercase: uppercasedValue }; // Dönüştürülmüş değeri içeren özel bir nesne
}
@Component({
  selector: 'app-normalizer',
  templateUrl: './normalizer.component.html',
  styleUrls: ['./normalizer.component.css']
})
export class NormalizerComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myInput: ['', [Validators.required], [uppercaseNormalizer]],
    });
  }
  onSubmit() {
    // Form gönderildiğinde yapılacak işlemler
    console.log(this.myForm.value);
  }

}

Bu örnekte, uppercaseNormalizer adlı bir normalizer fonksiyonu oluşturduk. Bu fonksiyon, bir form kontrolündeki değeri alır, büyük harfe dönüştürür ve dönüştürülmüş değeri içeren özel bir nesne döner. FormGroup içinde bu normalizer'ı kullanarak bir form kontrolü oluşturduk ve bu kontrolü bir metin alanına bağladık. Ayrıca, formu submit ettiğimizde onSubmit fonksiyonu çağrılır ve formdaki değerler konsola yazdırılır.

 

Bu örnek, normalizer'ın nasıl kullanılacağını gösterir. Normalizer'ları, özellikle form verilerini önceden işlemek veya dönüştürmek istediğiniz durumlarda kullanabilirsiniz.

 

Kazanımlar 

 

  • Tutarlılık ve Kolaylık: Veri yapılarının normalizasyonu, uygulama içinde tutarlılık sağlar ve veri yönetimini kolaylaştırır. Verilerin belirli bir formata getirilmesi ve düzenlenmesi, veri manipülasyonu süreçlerini basitleştirir.

 

  • Performans Artışı: Düzenlenmiş veri yapıları, veri işleme süreçlerini hızlandırabilir ve uygulama performansını artırabilir. Tekrar eden verilerin azaltılması, veritabanı performansını da olumlu yönde etkiler.

 

Sonuç 

 

   Normalizer, gelen verilerin işlenmesi ve düzenlenmesi için uygulanan güzel bir kullanımdır. veri yapılarını yönetirken tutarlılık, düzen sağlar ve bazı durumlarda uygulama performansını artırabilir. örnek bir senaryo bulmak için Angular ile veri işleme, HTTP istekleri ve RxJS operatörleri üzerine yoğunlaşan kaynakları incelemeniz yararlı olabilir. Bu kaynaklar, normalizerların nasıl kullanılabileceği konusunda ipuçları sağlayabilir.

Daha detaylı bilgi sahibi olmak yada örnekleri incelemek isterseniz Angular belgeleri, Medium gibi blog platformlarındaki yazılar, GitHub'daki örnek projeler ve Stack Overflow gibi topluluk forumları normalizerlarla ilgili bazı örneklere ulaşabilirsiniz.

 

 Umarım keyifli bir okuma olmuştur. Faydalı olması dileğiyle  :)