İstanbul Coders Asp.Net Core Angular4 ve TypeScript Semineri
Selamlar,
18 Mayıs 2017 Perşembe günü iş çıkışı akşam saatlerinde İstanbul Coders’ın ayarladığı seminere konuşmacı olarak katıldım. 2 saat planlanan ama akşamın geç saatlerine kadar süren çok keyifli bir workshop yaptık. Genel geçer konsept yerine Angular4’e derinlemesine bir bakış attık. Typescript ile OOP nasıl yazılabilir, Clean Code nasıl olmalıdır ve son olarak bizden sonra code’a bakacak arkadaş nasıl en iyi şekilde var olan süreci ve codeları anlayabileceğini ,angular üzerinde canlı canlı örnke yazarak irdeledik. Asp.Net Core ile OsX işletim sistemi üstünde Cross Platform WebApi servisleri yazdık. Daha sonra Code Review yapıp yazdığımız codeları daha performanslı bir hale getirdik.
İlk başta Angular 4 ile model kavramı üzerinde durduktan sonra, Typescript ile bu model kavramının OOP kullanılarak nasıl arka tarafta, yani “.ts” uzantılı dosyalarda yazılabileceğini inceledik. Yine TypeScript’in gücü ile servislerde Dependency Injection nasıl kullanılır detaylıca gördükten sonra, Inheritance ve dry(don’t repeat yourself) gibi kavramlar canlı örnek üzerinde incelenmiştir.
Angular 4 tarafında two-way binding, model kavramı ile html elementlerin Stylelarının dinamik değişimi, User Control kullanımı, Servisler ve lazy load işlemleri incelenen ana konu başlıklarıdır.
Bu projede bir stadyumdaki bir bloğa ait koltuklar, belirlenen parametrelere göre dizilmiş, daha sonra herbir koltuk için üzerinde işlem yapılmış, işlem yapılabilecek kalemler Asp.Net Core ile bir webapi servisinden combobox’a doldurulmuştur. Daha sonra dizilen bu koltuklardan, sadece üzerinde işlem yapılanlar yazılan WebApi servisinde ki başka bir methoda post edilmiştir.
Asp.Net Core servis tarafında ServiceController.cs: Aşağıda görüldüğü gibi “Get()” methodunda List of SeatInfo “List<SeatInfo>”, yani tüm koltuklar geri dönülmüş. “Post()” methodunda da yine List of SeatInfo “List<SeatInfo>” yani sadece işlem yapılan koltuklar alınmıştı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> data) { List<Seat> result = data; } } } |
Angular tarafında ilgili WebApi servisine Get ve Post yapan DataService.ts: Aşağıda WebApi servisinde çekilen tüm koltuklar json olarak geri dönülmüştür. Post işleminde de Headers’ın Content-Type’ı json olarak belirtilmiş ve sadece değişim olan data yani “Array<Seat>” post edilmiştir.
|
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 41 42 43 44 |
import { Injectable } from '@angular/core'; import { Http, RequestOptions,Headers } from "@angular/http"; import "rxjs/add/operator/map"; const url: string = "http://localhost:5050/api/" @Injectable() export class DataService { constructor(private http: Http) { } public GetSeatInfoList() { return this.http.get(url + "service") .map(result => result.json()); } public ChangeSeatInfoByID(id: number) { switch (id) { case 1: { return "./src/Images/green.png"; } case 2: { return "./src/Images/red.png"; } case 3: { return "./src/Images/blue.png"; } case 4: { return "./src/Images/gray.png"; } } } public PostData(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:5050/api/Service', body, options) .subscribe(result => console.log(result), err => console.log("Err:" + err), () => console.log("All Data Post") ); } } |
Aşağıdaki ekran çıktısında görüldüğü gibi WebServisinden dolan combobox, koltuklar üzerinde yapılabilecek işlemleri sıralamaktadır. Sırlanan koltuklar projenin başka bir yerinde de kullanılabileceği için (Dry) prensibinden yola çıkılarak aşağıda görüldüğü gibi “seat” şeklinde ayrı bir component içinde tanımlanmıştır.
Listelenecek koltuk datası kullanıldığı yani parent’ı olan “AppComponent” sayfasından “@Input() SeatDataList()” ile, güncel data bilgisini almaktadır. Tıklanma anında da ilgili koltuk, comboxdan seçilen işlem tipine göre, ilgili rengi almaktadır. Tıklanma durumunda hangi koltuğun tıklandığını “@Output() ChangeSeat” eventi ile dışarıya aktarılmaktadır.
seat.component.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Seat } from "Models/Seat"; @Component({ moduleId: module.id, selector: 'seat', templateUrl: 'seat.component.html', styleUrls: ['./seat.component.css'] }) export class SeatComponent implements OnInit { constructor() { } seatList; @Input() SeatDataList(_seatList) { this.seatList = _seatList }; @Output() ChangeSeat = new EventEmitter(); ngOnInit() { } public triggerEvent(seat: Seat) { this.ChangeSeat.emit(seat); } } |
Aşağıda “SeatComponent”‘ın “app.component.html”‘de nasıl çağrıldığı gösterilmektedir.
|
1 |
<seat [SeatDataList]="SeatList" (ChangeSeat)="ChangeSeatCSS($event)"></seat> |
İşte o akşamki efsane ekip:)
Geldik bir seminerin daha sonuna. Seminer sırasında fikirlerini paylaşmaktan çekinmeyen, geç saatlere kadar kalıp benimle code yazan, var olan codelar üzerinde iyileştirmeler yapan yukarıdaki ekibe, teşekkürü bir borç bilirim.
Yeni bir seminerde görüşmek üzere hepinize hoşçakalın.
Source Code: https://github.com/borakasmer/Asp.Net-Core-Angular4-TypeScript
tşk edr hocam :)