Angular2 İle ReactiveX

Selamlar;

Bugün Reactive Extensionsların [RX] Angular2’de nasıl kullanılacağını hep beraber inceleyeceğiz. ReactiveX kısaca belirtilen diziler üzerinde asenkron ve event tabanlı işlemler yapmayı sağlayan bir kütüphanedir. En sevdiğim özelliği  observer pattern kullanan, birden çok operasyonun asenkron olarak yapılmasını sağlayan birçok platformda kullanılabilen bir kütüpahane olmasıdır. Rx Observable’lar ile neler yapılabileceğini http://rxmarbles.com/ adresinden de inceleyebilirsiniz.

Reactive

Bu bölümde RX kullanarak Angular2 ile çeşitli örnekler yapacağız. Böylece bize nasıl kolaylıklar sağlıyabileceğini hepberaber inceleyeceğiz.

Index.html: Index sayfasına eklenmesi gereken dosyalar aşağıda gösterilmiştir.

Örnek 1: Bir input alana veri girildiği zaman belli bir bekleme süresi sonunda ilgili textdeki boşluklar “-” karakteri ile değiştirilerek console’a yazılacaktır. Girilen string değerin bir çeşit Url’e dönüştürüldüğü düşünülebilir.

angular2Rx

app.component.ts’e eklenen paketler:

  • RX için eklenecek moduleler “{Observable} from ‘rxjs/Rx’” tüm paket yerine daha lightweight hali olan “{Observable} from ‘rxjs/Observable’” küçültülmüş paketi eklenmiştir. Bu paket angular2 takımı tarafından oluşturulmuştur.
  • Form içindeki Html elementlere erişebilmek için “{ControlGroup ve FormBuilder}” moduleleri eklenmiştir.
  • Ayrıca bende bazı komutlar hata verdiği için “rxjs/Rx” module de eklenmiştir. Normalde eklenmesine gerek olmamalıdır.
  • rxjs/add/operator/debounceTime” module’ü delay() yani bekleme işlemi yapılabilmesi için eklenmiştir.
  • rxjs/add/operator/filter” belirtilen source üzerinde filitreleme yapabilmek için eklenmiştir.
  • template’de “[ngFormModel]” ile ilgili form “form” değişkenine atanmıştır. Böylece bu form’a ait elemanlara erişilebilecektir.
  • input alanı “ngControl“, “search” olarak atanmıştır.
  • AppComponent sınıfının constructor’ında => “search” input alanı bulunmuştur.
  • Input alan her deger girilip silinmesinde aşağıda yazılan “search.valueChanges” event’i devreye girer. İlgili eventin sonuna eklnen “RX” methodlarından :
  1. .debounceTime(400) ile, input alana girilen her harf için işlem yapılmaması ve 400ms beklenilmesi sağlanmıştır.
  2. .map(Y=>(<string>Y).replaceAll(” “,”-“)) ile girilen text içinde ” ” karakteri “-” ile değiştirilmiştir. Burada “<string>Y” ile map(Y) nesnesi “string”‘e cast edilir.
  3. .subscribe ile en son “map()”‘lenen veri console basılır.

Index.html: Sayfasına String tipine “replaceAll()” methodu bir çeşit extension gibi “prototype” ile eklenmiştir. Bu konu ile ilgili detaylı javascript webinarımı izlemenizi tavsiye ederim. Böylece girilen tüm text’deki boşluklar “-” karakteri ile değiştirilebilecektir.

app.component.ts:

Örnek 2:  Bu örnekte “Observable” ile nasıl bir [] dizi kümesinde gezilip “map()”‘lenip sonuca varılacağını inceleyeceğiz.

date

  • Bulunulan tarihten 2 gün önce ve sonrası, yani toplam 5 günlük zaman “startDates[]” dizisine atanmıştır.
  • Observable.fromArray(startDates) ile alınan tarih dizisi içinde gezileceği belirtilir.
  • .map(date=>console.log(date)) ile içinde gezilen dizi console’a yazılır.
  • .map() return [1,2,3] yapımıştır. Bu işlemde, map’den örnek olması amacı ile konudan bağımsız [1,2,3] dizisi dönülmüştür.
  • .subscribe(x=>console.log(“x:”+x)) ile map()’den ne değer dönülür ise “subscribe”‘da o değerin alındığı, console’a yukarıdaki gibi basılarak gösterilmek istenmiştir.

Örnek 3: Bu örnekde Observable ile nasıl sürekli belli bir zaman aralığında bir kendisinin “interval()” ile çağırılabileceği incelenmiştir.

Interval

  • Observal.interval(1000) ile observal kendini her 1 sn’de bir çağırmaktadır.
  • .map() ve .subscribe() ile ilgili yazı ve sayı dizisi console’a yukarıda görüldüğü gibi basılmaktadır.

Örnek 4: Bu örnekde 2 farklı “Observable” nesnesi aynı MsSql’de olduğu gibi birleştirilip(union) alias verilmiştir.

Untitled

  • .forkJoin() methodu ile 2 observable birleştirilmiştir.
  • .map() ile ilgili observable nesneleri “Object” bir nesneye “user” ve “tweets” propertysi olarak atanmıştır.
  • .subscribe() methodu ile ilgili result “Object” console’a basılmıştır.

Örnek 5: Bu örneğimizde Wikipedia’dan arama işlemini Angular2 ve Observable kullanarak başta basit yazılan bir örneği, sürekli geliştirip hepberaber inceleyeceğiz.

WikipediaService.ts: Öncelikle arama amaçlı aşağıdaki services yazılır. Amaç istenen “Term“‘e göre wikipedia’dan arama yapabilmektir. Bunun için “URLSearchParams” kullanılmış ve dönüş tipini Json’a convert etmek için “Jsonp” kütüphaneleri kullanılmıştır.

app.component.ts(1) : Ekelenecek tüm module’ler aşağıda gösterilmiştir. Kullanılacak RX modulleri ve Observable, JSONP_PROVİDERS: Wikipedia’dan çekilecek olan data Json tipindedir,

custom yazılan “WikipediaService”, Control directive’i ve Component module leridir.

app.component.ts(2): Aşağıda arama yapılacak “input” alan tanımlanmıştır. Property binding olarak “[ngFormControl]=’term’” kullanılmıştır. Böylece AppComponent sınıfında ilgili html elemente “term” olarak ulaşılacaktır. Çekilen tüm data”items”‘a atanacaktır. “*ngFor” ile gezilip ekrana basılacaktır. İlgili JSONP ve WikipediaServices providerları yine burada sayfaya eklenmiştir.

app.component.ts(3): 

  • AppComponent sınıfında  çekilecek items: “Array<string>” olarak tanımlanmıştır. Serach yapılacak “term=new Control()” olarak tanımlanmıştır.
  • constructor()’da yazılmış olan custom “WikipediaService” alınmıştır.
  • term.valueChanges” eventinde, yani input alana değer girilip çıkarıldığı zaman ilgili event tetiklenir.
  • debounceTime(400): Her girilen harf için işlem yapılmaması için delay konmuştur. Yani belli bir süre bekleme yapılmıştır.
  • distinctUntilChanged(): Önceden aranan bir term için tekrardan bir arama yapılmaması için bu method eklenmiştir.
  • subscribe((term:string)=> Girilen term string’e cast edilir.
  • this.wikipediaService.search(term).subscribe(items => this.items = items))  Wikipedia’da search edilen term sonuçları items dizisine aktarılır. Böylece ilgili dizi gezilerek arama sonuçları ekrana basılır.

app.component.ts(4) Geliştirme: 

  • items: Observable<Array<string>>” Items nesnesi Observable bir array nesnesi olarak atanır.
  • “WikipediaSearch” servisinden dönen değerler doğrudan “this.items =“‘a aktarılır.
  • switchMap” ile tüm dönen değerler async olarak items’a maplenir.

app.component.ts(5) Template Geliştirme: “switchMap” ile yapılan async mapleme sonucu  “*ngFor” ile yapılan aramaya “| async” pipe’ı eklenerek asenkron bir şekilde ilgili items[] dizisinde gezilir ve arama sonuçları sayfaya basılır.

Angular2Search

 app.component.ts Full:

Source Code: http://www.borakasmer.com/projects/angular2.rar

Örnek 6: Bunu evde denemeyin:) Bu örnekde belirtilen bir text içindeki kelimeler aralarındaki boşluk karakterine göre sıra ile alınmakta ve harf harf bir input alana girilmektedir. Her kelimenin sonucunde Wikipedia’dan arama yapılmakta ve bulunun sonuç listesi ekrana basılmaktadır.

Örnek Url: http://angular2search.azurewebsites.net/

CustomSearch

  • Öncelikle ilgili paketler import ile yüklenir.
  • Template kısımda aynı yukarıdaki örnek de olduğu gibi arama sonucunu tutan “items” async olarak gezilip ekrana basılmaktadır.
  • randomInterval içinde gezilecek text’in length’i boyutunda bir dizi olarak atanır.
  • .concatMap() tüm elemanları iterable tek bir diziye atılması sağlanır. Bu örnkte boşluk karakterine kadar olan tüm karakterleri tekbir diziye koymayı yani herbir kelimeyi almaya yarar.
  • delay() belli bir zaman, uygulamayı bekletmeye yarar. Çekilen herbir kelimenin harflerinin, aynı typing yapılıyormuşçasına girilmesini sağlar.
  • .zip() dizi elemanlarını birleştirip tek bir result’a döndürür.
  • .scan() ile boşluk karakterine kadar ilgili karakterlerin uç uca toplanması sağlanmıştır.
  • .share() ile boşluk karakteri gelene kadar işlemin devam etmesine, boşluk yada null dönülmesi durumunda yeni kelime için tüm işlemin başa dönülmesi sağlanmıştır.
  • .map() ile herbir çekilen harf input alana atanır.
  • .debounceTime() herbir işlem, yani arama arasına zaman konulmuştur.
  • .distinctUntilChanged() aynı kelimenin aranmaması sağlanmıştır
  • .switchMap() ilgili servis girilen harflerden oluşan “$term” yani kelime wikipedia’da aranır. Dönen liste “items[]” string dizisine atanir. Ve böylece çekilen arama sonucu ekrana basılmış olur.

Source Code: https://github.com/borakasmer/Angular2SearchAtWikipedia

Son söz olarak ReactiveX yani rxjs kütüpahanesinin Angular2 ile ne kadar kullanışlı ve güçlü olduğunu; asenkron olarak servislerden nasıl yararlanılabileceğini ve diziler üzerinde nasıl işlmeler yapılabileceğini hep beraber gördük. Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Kaynaklar : ng-book2 The Complete Book on AngularJS2 https://angular.io/, https://egghead.io, Mosh Hamedani(Angular 2 with TypeScript for Beginners The Pragmatic Guide) …

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

4 Cevaplar

  1. ERHAN İLZE dedi ki:

    Hocam, tüm makalelerin çok iyi çok şey öğreniyorum.Lütfen yazılarına böyle devam et . Eline emeğine sağlık. Çok teşekkür ediyorum.

    • borsoft dedi ki:

      Böyle güzel yorumların için teşekkür ederim Erhan.
      İşine yaradı ise ne mutlu bana. Yazıyorum vakit buldukça:)

      İyi çalışmalar.

  2. Erhan İLZE dedi ki:

    Tekrar merhaba Hocam,

    Bir sorum olacak angular 2 ile alakalı. Sadece ilgili component te kullanmak için lazım olan bir javascript dosyasını component yüklendiğinde nasıl yükleyebilirim. İndex.html de eklemek istemiyorum çünkü her zaman lazım olmayacak.

    Teşekkürler.

    • borsoft dedi ki:

      Selamlar Erhan,

      Bu soruya Chat ortamında cevapladım. İsteyen ordan bakabilir :)

      Hoşçakalın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.