Üsküdar Üni. Coding Summit Seminer – Asp.Net Core, TypeScript, VSCode ve Angular 4
Selamlar,
7 Mayıs 2017 Cumartesi günü Üsküdar Üniversitesi Bilişim Kulübünün düzenlediği seminere konuşmacı olarak katıldım. Baştan sonra bir projeyi, hep beraber codeladık. En başta OsX yani Cross Platform üzerinde, ilgili proje için önceden kurulması gereken uygulamalar ve yapılması gereken adımlar teker teker gösterilmiştir.
Yazılan Web Uygulmasının ön yüzü için TypeScript 2.0 üzerinde Angular 4 javascript framework’ü koşturulmuştur. Bu aşamada Typescript ile Class yapısı, Inheritance, Dependency Injection, string methodlarda not null özellikleri, iş hayatından gerçekçi bir seneryo codelanarak incelenmiştir. Böylece front tarafda, Angular 4 ve bunun gibi modern javascript frameworkleri ile karşımıza çıkan model kavramı, html elementlerin bind edilmesi ve style özelliklerinin belirlenmesi örnekler ile incelenmiştir. Ayrıca DRY(Don’t repeat your self) presibine uymak amaçlı, nasıl user control yapıldığı ve böylece aynı code’un tekrar edilmesinin önüne nasıl geçildiği gösterilmiştir. Daha sonra ilgil Component’a “@Input()” ile nasıl data atanacağı örnek ile gösterilmiştir.
Örnek User Control Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component, OnInit, Input } from '@angular/core'; @Component({ moduleId: module.id, selector: 'blockseat', templateUrl: 'blockseat.component.html', styleUrls: ['./blockseat.component.css'] }) export class BlockSeatComponent implements OnInit { constructor() { } seatDataList; @Input() SeatDataList(_seatDataList) { this.seatDataList = _seatDataList }; ngOnInit() { } } |
Backend tarafda Asp.Net Core ile WebApi servisleri oluşturulmuş ve front tarafdaki dropdown list’ler bu servislerden çeşitli sorunlar çözülerek doldurulmuştır. Böyelece Kestrel üzerinden OSX işletim sistemi üzerinde yayımlanan Cross Platform WebApi servisinin nasıl Angular4 tarafında çağrıldığını ve sayfanın yüklenme zamanında, ilgili html elementlerin nasıl doldurulduğu canlı örnekler üzerinde incelenmiştir.
Son olarak da gerçek iş hayatında kullanılan algoritmaların, amaca uygun olarak Angular tarafında, Typescript yardımı ile nasıl codelandığı ve istenen amaca göre nasıl bir sonuç verdiği canlı yazılan code örnekleri ile görülmüştür.
Örnek Algoritma Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
SeatList = []; public DrawSeats() { this.SeatList = []; let rowSeatList = []; let rowCounter = 0; for (var i = 0; i < this.RowCount; i++) { rowSeatList = []; for (var c = 0; c < this.ColumnCount; c++) { rowCounter += 1; rowSeatList.push(new Seat(rowCounter, i)); } this.SeatList.push(rowSeatList); } } |
Uzun bir seminer günün son 2 saatini bana ayırarak, akşamın geç saatlerine kadar seminere olan özverili katkılarınızdan dolayı tüm katılımcıları kutlar, seminer sonrasındaki anlamlı hediyeniz olan adıma dikilmiş fidan için, ayrıca hepinize çok teşekkür ederim.
Yeni bir seminerde görüşmek üzere hoşçakalın, esen kalın.
Son Yorumlar