FSMV Üni. Asp.Net Core, TypeScript ve Angular 4 Semineri

Selamlar,

13 Mayıs 2017 Cumartesi günü FSMV Üniversitesinde tam günlük bir workshop yaptık. Modern javascript frameworklerinin hayatımızdaki yeri, cross platform’un önemi ve front tarafta nasıl object oriented yazılabileceğini inceledik. Bu sayede de code okunaklığının büyük projeler üzerinde etkisini hep beraber tartıştık. Ve son olarak bu konuları içeren uçtan uca bir projeyi hep beraber codeladık.

 

Yazılan uygulamanın Cross Platform olması adına, Mac Osx ortamında Visual Studio Code idesi ile uygulama geliştirilmiştir. Yine cross platform amaçlı backend webapi servisleri için Asp.Net Core kullanılmıştır. Son olarak ön yüz için modern javascript framework’ü olan Angular 4 ve Typescript 2 kullanılmıştır. Ön yüzde Css amaçlı bootstrap ve Source Code olarak da Github kullanılmıştır.

Webapi servicesleri ile ön yüz tarafında dolacak combolara ait datalar json şeklinde dönülmüştür. Bu işlem sırasında sıklık ile karşılaşılan cors problemine takılınılmıştır. Bu neden ile webapi servisine, farklı bir domainin client’ından erişilmesi için izin verilmiştir. Angular tarafında tamamen Model kavramı ile çalışılmıştır. Böylece Html element nesneleri üzerinden değil doğrudan model üzerinden çalışılarak, toplu işlemler herbir nesne için tektek değil, bağlı oldukları model üzerinden kümülatif olarak yapılmıştır.

Örnek Code Parçası:

Görsel tarafda html elementlerin stylelarının model’e bağmlı olarak nasıl değiştirilebileceği incelenmiştir.

Örnek Code Parçası:

(Dry) pirensiplerine uyularak yazılan html bloğu, başka yerlerde de kullanılmak üzere user control’e dönüştürülmüş ve böylece ayrı bir component olarak farklı yerlerden çağrılması sağlanmıştır. Parametre olarak ilgili model component’e “@Input()” ile gönderilmiştir. Gene aynı şekilde, ilgi componentden kullanıldığı yere “@Output()” ile ilgili event tetiklenerek istenen değerler geri dönülmüştür.

app.component.html(Parent): SeatComponent’ın AppComponent’da kullanılma şekli.

SeatComponent.ts(Child): User control amaçlı kullanılan Seat class’a ait codelar.

Aşağıda üzerinde sadece işlem yapılan data filitrelenip WebApi servisine post edilmiştir. Bu işlem için harici yazılmış servisler kullanılmıştır.

Service: Asp.Net Core Web Api servisine post işlemi yapan örnek code.

Aşağıda Asp.Net Core ile Cross platform yazılan WebApi servisinin codeları gözükmektedir. İlgili servisler Kestrel web sunucusu üzerinden, Osx ortamında yayımlanmaktadır.

 

Bu güzel seminere, üstelik tam bir cumartesi gününü yiyip katılan tüm arkadaşlara teşekkür eder, onlar için faydalı olmasını temenni ederim.

Geldik bir seminerin daha sonuna:) Yeni bir seminerde daha görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. murat dedi ki:

    bir sonraki seminer ne zaman olacak :)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir