Angular(2 & 4)  içinde  AJAX request/ Sunucu iletişimlerimizi yönetebilmek için tıpkı Angular 1 de olduğu gibi dahili bir Http servis gelmekte. Http Service ve Observable yapısına bakacağımız bu yazıda, ilk olarak genel değişikliklerden bahsederek başlayalım.

Angular(2 ve 4 sürümünü kastedeceğiz) içinde Http servisimiz artık promise tabanlı değil Observable tabanlı bir ara katman ile çalışma imkanı sunmakta. Promise yapıyıda hala kullanabilsekde, varsayılan olarak artık Observable türü kullanılmakta.

Genel olarak Javascript ve Web tarayıcılarının sunucu iletişimini gerçekleştirdiği süreç (Ajax mimarisi açısından) Asynchronous / Asenkron bir yapı ile gerçekleşmekte. Bu yapıyı yönetmek için genelde şimdiye dek bir tanesi Javascript içinde dahili bir yapı olan Callbacks diğeri Callback ler ile çalışma zorunluğunu azaltmak ve daha okunaklı bir kod yapısı sağlamak için kullandığımız bir yapı olan Promise modelini olarak iki alternatifimiz mevcuttu.

Promise yapısı calback yapısınının bir çok zorluğunu giderse de yinede bu yapınında bazı eksiklikleri vardır. Bu durumdan dolayı Observable alt yapısıda yeni bir alternatif olarak karşımıza çıkmış oldu.(Observable kavramının kendisi yeni olmasada, bu şekilde front-end mimari de kullanılması açısından yeni bir durum söz konusu)

Kısacacası Asenkron yapı ile ilgili yeni ve yetekenli bir alternatifimiz mevcut “Observables” . Asenkron kod yapısını yönteme şekli olarak bir sıralama yapacak olursak şöyle bir sıralama yapabiliriz.

1. Callbacks 2. Promises 3. Observables

Observables kavramı ilk bakışda biraz karmaşık gözüksede aslında çok karmaşık yada yeni değil. Javascript ve Angular  dünyası açısından bakacak olursak;

” Reactive Programing (Tasarım Kalıbı) –>RxJs (Yardımcı Kütüphane ) –> Observable (Yetenekli bir javascript nesnesi/veri türü )“

, şeklinde bir hiyerarşi söz konusu diyebilriz.

Reactive Programing kavramı muhtemelen bu günlerde sıkça duyduğunuz kavramlardandır. Javascript dünyasında bu programlama modelini gerçeklemek için yada başka bir değişle Javascript in mevcut yapısında bu programlama modeli için bazı eksiklikleri kapatmak ve daha kolay bir alt yapı sağlamak için RxJs gibi yardımcı kütüphaneleri kullanmaktayız.

Angular özelinde, Reactive Programing kavramından ziyade “Observable” alt yapısı için sıkça başvuracağımız RxJs bize Asynchronous/Asenkron kod yapısı ile çalışmak için yeni ve daha kullanışlı bir imkan sağlamakta. Ve Angular 1 deki promise nesnesini “Observable” ile değiştirmekde. Http isteklerimiz sonrasında artık response/cevap nesnesini, bir Promise olarak değil Observable yapısında bir nesne olarak geri alıyor olacağız.

RxJS ve Observable yapısı, en temel haliyle yine tarayıcının XMLHttpRequest nesnesisini kullanan Http servisimiz, bu katmanın üzerine observable arayüzünü uygulayarak Async/Asenkron kod yapısı için daha yönetilebilir daha esnek bir yapı sunuyor. Başka bir değişle RxJs kütüphanesini kullanarak orjinal, XMLHttpRequest nesnesi ve Callback çalışma mantığını alıp, JQuery nin HTML/DOM yapısı için bize sunduğu zengin ve esnek yapıya benzer bir yapıyı bize asenkron kod yapımız için sağlamış oluyor.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [PonyRacerAppComponent],
  bootstrap: [PonyRacerAppComponent]
})
export class AppModule {
}

Bu import ile beraber, artık Http servisimizi istediğimiz yere Inject edebileceğiz. Örneğin;

@Component({
  selector: 'http-service',
  template: `<h1>Http işlemleri</h1>`
})
export class PonyRacerAppComponent {

  constructor(private http: Http) {
  }

}

Yukarıda import ettiğimiz Http; sinifi aslinda tek basina istemci/sunucu ileitişimi açısından az çok bütün ihtiyaçlarımızı karşılamakta.

Fakat, Typescript ile birlikte daha iyi bir tip desteği sağlayabilmek adına Response yada Header, gibi diğer sınıflarıda daha verimli bir tip desteği için bu sürece katabilmekteyiz. HTTP sınfı ile aşağıdaki Http verbs / http methodlarını kullan imkanımız bulunmakta:

• get
• post
• put
• delete
• patch
• head

1- Get yardımıcı ile

http.get(`/urunler`)
  .subscribe(urunler => {
    this.urunler = urunler;
  });

2- base request sınıfı ile

http.request(`/urunler`, { method: RequestMethod.Get })
  .subscribe(urunler => {
    this.urunler = urunler
  });

Bu arada, http.request() metodu gibi diğer tüm kısa yol metodlarımızda(get(), post() vb. ), RequestOptions nesnesini kabul etmekte. Böylece daha düzenli ve yapısal olarak daha saglam http istekleri oluşturmamızı kolaylaştırmaktalar.  Örneğin çoğu zaman, http isteğimize bir Url parametresi eklememiz gerekecektir. Aşğıdaki http isteğine bakalım.

let siralama="sirala="+siralamaKriteri// kullanicidan bir deger aldigimizi dusunun, ornegin "enyeni" gibi
let url = "http://sunucu.com/urunler?"+siralama;
http.get(url)
  .subscribe(response => {
    console.log(response.json());
    // ürün listesi sirali olarak.
  });

Yukaridaki kullanimin yanlis bir tarafi yok sadece Typescript kullandiğimiz için , tip desteğini kullanarak daha düzenli bir şekilde yazabilriz. Örneğin yukarıdaki isteği şu şekilde de yazabiliriz.

let siralama= new URLSearchParams(); 
siralama.set('sirala',siralamaKriteri); 
let options = new RequestOptions({search: siralama});
let url ="http://sunucu.com/urunler" ;
http.get(url, options)
.subscribe(response => { 
    // ürün listesi sirali olarak. 
    console.log(response.json()); 
});

Yukarıdaki yapı daha düzenli bir alt yapı ile http isteğimizi oluşturmamıza imkan veriyor, belki biraz daha uzun ama örneğin URL encoding vb  işlemleri bizim için otomatik olarak yerine getirmiş olacak. Yukarıdaki örnekte, RequestOptions sınıfı kullanarak url parametrelerimizi tnaımladık, ama eğer işlemiz sadece query parametrelerini atamak ise, RequestOptions yerine, kısa yola olan params nesnesini kullanabiliriz.

let url ="http://sunucu.com/urunler" ;
http.get(url, {params:{siralama:'yeni' , sayfa:5}})
.subscribe(response => { 
    // ürün listesi sirali olarak. 
    console.log(response.json()); 
});

Http servislerimizde genelde http header ile de sunucuya bilgi göndermemiz gereken durum çoktur. Örneğin, Authorization token /yetkilendirme tokeni , gibi .

let headers =new Headers();
headers.append('Authorization'`Bearer ${token}`);
let url = "http://sunucu.com/urunler"
http.get(url,new RequestOptions({headers}))
  .subscribe(response => {
    // yetkilendirilmiş bir web isteği için header kullanımı
    console.log(response.json());
  });

Yukarıdaki örneklerde hep Get metodu ile istekde bulunduk, peki sunucumuza body/gövde içinde veri gönderimi yapmamız gereken durumlar ? Örneğin, bir form bilgisini Post metodu ile sunucuya gönderelim;

let yeniUrun ={
 isim:"Tabak",
 fiyat:12.25
}

http.post(url, yeniUrun)
.subscribe(response => {
    console.log(response.json());
  });

Gördüğünüz gibi, post metoduna  (yada put medotuda olabilir) adres bilgimizden sonra ikinci parametre olarak geçtiğimiz  veri,  isteğin body/gövdesine eklenmiş oldu.

OBSERVABLES

Angular 2 icinde  Http servis kullanımı açısından “Observable” kavramına bakarak devam edelim. Http servisi açısından diyorum çünkü, Observable yapısı sadece http isteklerimiz için değil, Angular içinde bir çok fakrlı şekilde kullanma imkanımız var. İlk olarak, bundan önce(Angular 1 ve Jquery dahil) kullandığımız promise yapısını kısaca hatırlayalım,

$http.get("http://sunucu.com/urunler")
success(function(res) {
 console.log(res);
})
.error(function(err) {
    console.log(err);
});

Yukarıdaki http request yapısı ile, http isteğimizi sunucuya gönderiyor ve eğer istek başarılıysa, gelen sonuç ile birlikte çalıştırabileceğimiz callback metodumuzu “success()” çalışmasını sağlıyorduk. Eğer istek başarısız ise diğer callback metodumumuz “error()” çalışıyordu. Diğer bir alternatif olan “Q” benzeri daha gelişmis promise yapılarınıda şu şekilde kullanıyorduk ;

var deferred = $q.defer();
$http.get('http://sunucu.com')
    .then(function (response) {
        deferred.resolve(response.data);
    })
   .catch(funnction{
    deferred.reject(response);
    })
 return deferred.promise;

let url ="http://sunucu.com/urunler"
http.get(url, options)
  .subscribe(response => { 
    // ürün listesi sirali olarak.
    console.log(response.json());
  });<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

http.get(url, options)
.map(response => response.json()) // veriye abone olmadan once json donusumunu yap
 .subscribe( // veri artik javascript nesnesi, bu haline abone ol
   (urunler) => {console.log(urunler)}, //abone olunan veriyi kullan (onNext callback)
   (err) => {console.log(`Hata : ${err}`)}, // hata kontrolu (onError callback)
   () => {console.log("islem tamam")}// (onCompleted callback)
 );

http.get(url, options)
.retry(3) // hata durumunda 3 kereye kadar tekrar dene
.map(response => response.json()) 
 .subscribe( 
   (urunler) => {console.log(urunler)},
   (err) => {console.log(`Hata : ${err}`)}, 
   () => {console.log("islem tamam")}
 );

Birden fazla Http isteğini beraber yapmak istediğimiz durumlarda yada bir birine paralel isteklerde de kolay bir çalışma imkani sunuyor Observable yapımız.

 Observable.forkJoin( 
        http.get(url).map((response) => response.json()),
        http.get(url2)
        .retry(2)
        .map((response) => response.json())
        .delay(100)
    ).subscribe(
      data => {
        this.urunler = data[0]
        this.indirimdekiUrunler = data[1]
      },
      err => console.error(err)
    );

Angular cli ile ornek bir proje olusturup sayfa1 isminde bir component olusturalim, sayfa1 componentimizin icerigi baslangicta asagidaki gibi:

<div class="col-md-12" style="margin:20px;">

  <h2>Kategoriler</h2>
  <div *ngIf="secilenKategoriler.length > 0 ;  else kategoriYok">

  </div>
  <hr>
  <h3>Kategori Ekle</h3>
  <form>
    <div class="form-group">
      <label> Kategori ara</label>
      <input type="text" class="form-control">
    </div>
  </form>
</div>

<ng-template #kategoriYok>
  <div class="alert alert-warning">
    <h5>Henuz bir kategori secilmedi</h5>
  </div>
</ng-template><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

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

@Component({
  selector: 'app-sayfa1',
  templateUrl: './sayfa1.component.html',
  styleUrls: ['./sayfa1.component.css']
})
export class Sayfa1Component implements OnInit {
  secilenKategoriler = []
  constructor() { }

  ngOnInit() {
  }

}

İhtiyaçlarımızı kısaca sıralayacak olursak,

1. Kategoriler başlığı altında , arama sonrası seçtiğimiz kategorileri listeleyeceğiz.
2. kategori arama işlemimiz için ilgili text box da ki her değişikliği takip edeceğiz
3. textbox dan aldiğimiz değeri sunucuya göndereceğiz
4. sunucudan gelecek değerler içinden kullanıcımız secim yapabilecek
5. Seçilen değerleri tekrar sunucumuza göndereceğiz.

Süreç ilk başta genel olarak çok zor gözükmesede, aslında düşünmemiz gereken bir çok durum var, ilk olarak textbox için sürekli değişimi takip etmemiz lazım dedik ordan başlayalım.

Observable yapısını, sadece http istekleri için değil, hemen hemen tüm asenkron işlemlerimiz için kullanabileceğimiz den bahsetmiştik. Bizim örneğimizde, textbox tarafından fırlatılacak her türlü event / olayı , örneğin click, focus, change vs. bir stream haline getirebilir ve bu stream e abone olabiliriz.

Angular bu yapıyı bize bir üst seviye soyutlama ile sunduğu içinde, sıfırdan kendi Observable nesnemizi oluşturmamıza gerek yok, bir kaç küçük directive ile textbox ı bir reactive stream e yani abone olabielceğimiz bir akışa döndürebilmekteyiz.

İlk yapmamız gereken, textbox ı reactive bir forma dönüştürmek, bunun için ilk olarak html form elementimize ilgili directive leri ekleyerek devam edelim böylece Angular ın bize sunduğu reactive form yapısı ile Obervable nesnelerimizi otamatik olarak oluşturmuş olacağız.

İlk değişikliğimiz html tarafında,

<div class="col-md-12" style="margin:20px;">

  <h2>Kategoriler</h2>
  <div *ngIf="secilenKategoriler.length > 0 ;  else kategoriYok">

  </div>
  <hr>
  <h3>Kategori Ekle</h3>
  <form [formGroup]="aramaFormu">
    <div class="form-group" >
      <label> Kategori ara</label>
      <input formControlName="aramaDegeri" type="text" class="form-control">
    </div>

    <button class="btn btn-sm btn-success">Kaydet</button>
  </form>
</div>

<ng-template #kategoriYok>
  <div class="alert alert-warning">
    <h5>Henuz bir kategori secilmedi</h5>
  </div>
</ng-template>

Form etiketimize ilk olarak [formGroup]="aramaFormu" şeklinde, formGroup directive ini ekledik. Böylece, aramaFormu isminde bir reactive formumuz oldu. Bu forma artık componentimiz içinde erişebileceğiz.

Sonraki adımda ise, arama işlemini yapacağımız textboxa bir formControl directive atadık formControlName="aramaDegeri" böylece, bu textbox ı da reactive bir form control a dönüştürmüş olduk. (Bu yazıda, angular form işlemlerine detaylı değinmeyeceğiz, form üzerinden örneğimize devam etmemizin nedeni, Obervable yapısının farklı kullanım şekillerinide görebilmek)

Şimdi, kod tarafında formumuza ve ilgili değişkene bir observable olarak erişme zamanı. Componentimiz de ilgili değişiklikleri yaparak devam edelim;

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

@Component({
  selector: 'app-sayfa1',
  templateUrl: './sayfa1.component.html',
  styleUrls: ['./sayfa1.component.css']
})
export class Sayfa1Component implements OnInit {
  secilenKategoriler = []

  aramaCtrl = new FormControl("")
  aramaFormu:FormGroup

  constructor(private fb:FormBuilder) {
    this.aramaFormu = fb.group({
      'aramaDegeri' : this.aramaCtrl
    })
  }

  ngOnInit() {
  }

}

component içinde, biri form control (textbox a karşılık) , diğeride formGroup(formun tamamı yöntebileceğimiz) iki yeni değişken tanımladık. Angular ile form işlemlerinın bu yazının ana konusu olmadığını tekrar hatırlattıktan sonra, ihtiyaç listemizdeki ilk sorunu çözebiliriz.

Angular , formControl ile, textbox ı artık bir Observable olarak dinlememize hazırladı. Yapmamız gereken tek şey, control üzerindeki değişikliklere abone olmak. Componentimiz sayfaya yazdırılıp, artık her şey hazır hale geldiğinde , textbox üzerinde olacak her türlü değişikliği dinlemeye başlayabiliriz, bunun içinde, en ideal nokta olan OnInit metodunu kullanacağız.

ngOnInit i aşağıdaki gibi düzenleyelim,

  ngOnInit() {
    this.aramaCtrl.valueChanges
      .subscribe(_val => console.log(_val))
  }

bu değişiklikten sonra, artık tetbox üzerindeki her değişiklik (Obervable olarak) abone olunabilir durumda. Bunun için, ilgili control ün valueChanges özelliğine(angualr tarafından otomatik her control için oluşturulacak Obervable) .subscribe() çağrısı ile abone olmamız yeterli .

Abone olduktan sonra, gelen her değişikliği şimdilik console ekranına yazdırıyoruz.

Görüntüde, değişiklileri alıp console yazdırdık ama bazı sorunlarımız var örneğin, textbox da bir değer olmasada, boşluk tuşuna bastığımda abonelik devam ediyor. Ve , çok hızlı yazdığımdada abonelik üzerindne akış devam ediyor. gerçek hayatta, ilk oalrak textbox da geçerli bir değer varsa abonelik başlatmamız daha uygun olacaktır.

Akışa abone olmadan önce verinin istediğimiz düzende olduğundan emin olmak için bazı filitreleri ekleyerek devam edelim. örneğin çok hızlı yazmayla ilgili bir sorunumuz, kullanıcı ne kadar hızlı yazarsa yazsın biz işi biraz ağırdan alalım, ve yaklaşık 250-300 mili saniye aralıkla değişiklikleri alalım, sonrasında, boşluk ve bizim için geçersiz olacak “örneğin sayılar” gibi değerleride filitreleyelim

Yeni haliyle aboneliğimiz,

ngOnInit() {
    this.aramaCtrl.valueChanges
      .debounceTime(250)
      .filter(_val => _val != false)
      .filter(_val => isNaN(_val))
      .subscribe(_val => console.log(_val))
  }

eğer sadece boşluk değeri yada harf yerine sayi girmeye çalışırsak, otomatik olarak bu değişiklik bizim için filitre edilecek. Ayrıca, kullanıcı çok hızlı yazsada, belirli bir süre duraklama ekledik.

Bu şekilde dilediğimiz kadar filitre ekleyebilmekteyiz. Şimdi veri artık istediğimiz kıvamda ozaman artık, aldığımız bu değerleri, http servisi ile , sunucuya gönderip, gelen sunucu kullanıcıya seçilmek üzere sunabiliriz.

İlk olarak yeni bir metod yazarak http işlemini gerçekleşitirelim. Bunun için öncelikle, http servisini componentimize Inject etmemiz gerekmekte.

import {Http} from "@angular/http";

http servisimizi import ettikten sonra, constructor icinde de injection kismini yapmak zorundayiz. Böylece, htp servisimizi kullanabileceğiz.

 constructor(private fb:FormBuilder , private http:Http) {
    this.aramaFormu = fb.group({
      'aramaDegeri' : this.aramaCtrl
    })
  }<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

ve metodumuz,

  private aramaYap(searchTerm:string) :Observable<any>{
    let url = `http://localhost:3000/api/categories/search`;
    return this.http.get(url, {params:{search:searchTerm}})
      .map(_res => _res.json())
  }

Metodumuz, parametre olarak aldığı değeri, bir url query parametesine çevirip, sunucumuza yollamakta, gelen cevabıda, json a çevirip geri döndürmekte. Burda önemli bir nokta, değeri değil Observable bir akımı olarak döndürüyor olmamız.

Şimdi elimizdei http requestlerimizi yazpıp bir Observable döndüren metodumuz oldu, artık bu yeni Observable ı bir önceki arama control ü ile birleştirebiliriz. Birleştirmekten kastımız nedir diye soracak olursak, basitçe şöyle diyebiliriz ;

Elimizdeki ilk observable olan, arama kutusu(textbox) ile ikinci obervable olan aramaYap metodunu bir noktada bileştirmek, . Bizim örneğimizde, “textbox ı takip et, değerleri filitrele ve değeri bir sonraki observable a aktar, oda aramasını yapsın ve sonucu bana getir” demiş oluyoruz.

Bunun için , RxJs ile gelen .flatMap() meodunu kullanabiliriz.

 ngOnInit() {
    this.aramaCtrl.valueChanges
      .debounceTime(250)
      .filter(_val => _val != false)
      .filter(_val => isNaN(_val))
      .flatMap(_val => this.aramaYap(_val))
      .subscribe(_val => console.log(_val))
  }

RxJs içinde kullanılabilir olan diğer operatörlere bu adesten bakabilirsiniz.

Bir iki küçük ihtiyacı daha karşılayıp örneğimizi bitirebiliriz, gelen sonuçları ekrana yazdırmak la başlayalım. Öncelikle html taragında küçük bir değişiklik yapalım. Form kısmına küçük bir ekleme yapalım

<div class="col-md-12" style="margin:20px;">

  <h2>Kategoriler</h2>
  <div *ngIf="secilenKategoriler.length > 0 ;  else kategoriYok">
    <label *ngFor="let kat of secilenKategoriler" (click)="kategoriSil(kat)" class="badge badge-pill badge-warning">
      {{kat?.name}}
    </label>
  </div>
  <hr>
  <h3>Kategori Ekle</h3>
  <form [formGroup]="aramaFormu">
    <div class="form-group" >
      <label> Kategori ara</label>
      <input formControlName="aramaDegeri" type="text" class="form-control">
    </div>
    <hr>
    <button *ngIf="gelenKategoriler.length > 0" ngFor="let kategori of gelenKategoriler" (click)="kategoriEkle(kategori)" class="btn btn-sm btn-succes">
      {{kategori?.name}}
    </button>
    <hr>
    <button class="btn btn-sm btn-success">Kaydet</button>
  </form>
</div>

<ng-template #kategoriYok>
  <div class="alert alert-warning">
    <h5>Henuz bir kategori secilmedi</h5>
  </div>
</ng-template>

component tarafında da bir kaç değişikliğe ihityacımız var öncelikle gelen kategorileri tutacak bir dizi ve kategorinin seçilmesi/kaldırılması durumunda yapmamız gereken işlemi tanımlayacağımiz 2 metod ile componentimizin son hali;

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

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';


import {Http, RequestOptions} from "@angular/http";
import {Observable} from "rxjs";

@Component({
  selector: 'app-sayfa1',
  templateUrl: './sayfa1.component.html',
  styleUrls: ['./sayfa1.component.css']
})
export class Sayfa1Component implements OnInit {
  secilenKategoriler = []
  gelenKategoriler =[]

  aramaCtrl = new FormControl("")
  aramaFormu:FormGroup

  constructor(private fb:FormBuilder , private http:Http) {
    this.aramaFormu = fb.group({
      'aramaDegeri' : this.aramaCtrl
    })
  }

  ngOnInit() {
    this.aramaCtrl.valueChanges
      .debounceTime(250)
      .filter(_val => _val != false)
      .filter(_val => isNaN(_val))
      .flatMap(_val => this.aramaYap(_val))
      .subscribe(_val => this.gelenKategoriler =_val)
  }

  private aramaYap(searchTerm:string) :Observable<any>{
    let url = `http://localhost:3000/api/categories/search`;

    return this.http.get(url, {params:{search:searchTerm}})
      .map(_res => _res.json().categories)
  }

  private kategoriEkle(kategori){
    this.secilenKategoriler.push(kategori)
    this.aramaCtrl.setValue("")
    this.gelenKategoriler = this.gelenKategoriler.filter(_k => _k._id != kategori._id)
  }
  private kategoriSil(kategori){
    this.secilenKategoriler = this.secilenKategoriler.filter(_k => _k._id != kategori._id)
  }

}

Bu yazımızda, genel olarak, angular http servisini observable yapısını tanımaya çalıştık.

Serinin bir sonraki yazısında görüşmek dileğiyle.