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ı:
|
1 2 3 4 5 6 7 |
SaveSeatData() { let SeatDataList:Array<Seat> = []; this.SeatList.forEach( resultList => resultList.forEach(seat => SeatDataList.push(seat)) ); this.service.PostSeatData(SeatDataList.filter(list=>list.isChange==true)); } |
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ı:
|
1 2 3 4 5 |
<td><b>Block Sütün Sayısı:</b></td> <td><input type="text" [(ngModel)]="ColumnCount"> <input type="button" class="button" [disabled]="RowCount==null || RowCount=='' || ColumnCount==null || ColumnCount==''" value="Gönder" (click)="DrawSeat()"> </td> |
(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.
|
1 2 3 |
<div> <seat [SeatDataList]="SeatList" (ChangeSeatInfo)="ChangeSeat($event)"></seat> </div> |
SeatComponent.ts(Child): User control amaçlı kullanılan Seat class’a ait codelar.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export class SeatComponent implements OnInit { constructor() { } seatData @Input() SeatDataList(_seatData) { this.seatData = _seatData }; @Output() ChangeSeatInfo = new EventEmitter(); ngOnInit() { } public triggerEvent(seat) { var data = seat; this.ChangeSeatInfo.emit(data); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public PostSeatData(data) { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); let body = JSON.stringify(data); console.log(body); return this.http.post('http://localhost:5000/api/Service', body, options) .subscribe(result => console.log(result), err => console.log("Err:" + err), () => console.log("All Data Post") ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Mvc; namespace ticketservice.Controllers { [EnableCors("MyPolicy")] [Route("api/[controller]")] public class ServiceController : Controller { // GET api/values [HttpGet] public JsonResult Get() { return Json(new List<SeatInfo>(){ new SeatInfo() { ID = 1, Name = "Açık" }, new SeatInfo() { ID = 2, Name = "Satış" }, new SeatInfo() { ID = 3, Name = "VIP" }, new SeatInfo() { ID = 4, Name = "Pasif" } }); } // GET api/values/5 [HttpGet("{id}")] public string Get(int id) { return "value"; } // POST api/values [HttpPost] public void Post([FromBody]List<Seat> SeatList) { var data = SeatList; } } } |
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.
bir sonraki seminer ne zaman olacak :)