Microsoft Angular, .Net Core 2 ve Azure MeetUp

Selamlar,

20 Eylül Çarşamba günü iş çıkışı akşam saatlerinde Microsoft Türkiye binasında Engin Polat ile birlikte Asp.Net Core, Angular ve Azure konuları üzerine çok keyifli bir etkinlik yaptık. Genel geçer konsept yerine, her zamanki gibi 2 saat planlanıp, gece 10’a kadar süren live coding şeklinde bir Meetup oldu .

Öncelikle .Net Core ile bir web application oluşturduk. “ng new web” Azure üzerinde önceden oluşturduğumuz DB üzerine, .Net Core ile yazdığımız DbContext sınıfımız ile Pocolarımızın, tablo olarak oluşturulması sağlanmıştır. Bu işlem Azure tarafında oluşturulan live Db connection ile birlikte, Startup.cs’deki “app.Run(async (context) =>” ile “EnsureCreated()” methodunda gerçekleştirilmiştir. Bir diğer dikkat edilmesi gereken durum, işlerin cross platform yürümesi için Entity Framework Core’un kullanılması gerektiğidir.
İlgili tabloların oluşturulmasından sonra, proje için gerekli WebApi servisleri oluşturulmuştur. Bir şirket içinde, ilgili projelerde çalışan personel bilgilerinin düzenlendiği bir ekran yapılacaktır. Bunun için ilgili listeleme ve güncelleme sayfalarına ait webapi servisleri “Cross-Origin”‘e, “Startup.cs”‘de aşağıdaki gibi izin verilerek oluşturulmuştur.

 

Bütün işlemler bitirildikten sonra, tüm webservisleri Azure üzerinde oluşturulan bir web application’a, azure üzerinden indirlen publish profile dosyası sayesinde, Visual Studio 2017 idesi ile atılmıştır.

  /project/list ==>                                  /employee/list  ==>

Daha sonra front taraf için “angular-cli” ile bir angular projesi oluşturulmuştur. Görsel işler için bootstrap kullanılmıştır. Öncelikle karşılama ekranı hazırlanmıştır. Bir başlık ve çalışanların listelendiği bir combo, ayrıca ilgili çalışan, listeden seçildiği zaman detay bilgisi proje combosu ile birlikte ekrana basılır. Bu seneryo için gerekli listeleme servisleri, Azure üzerinden çekilen webapi servislerinden faydalanılarak yazılmış ve ilgili “AppComponent”‘a dependency injection ile constructorda eklenmiştir.

Seçilen çalışana göre getirilen detay bilgisi, güncellenirken “Form Validation” kullanılmıştır.” <form></form>” tagları arasında yazılan html elementlerden “requried” olarak tanımlı olanlar’ın ilgili kurala uyup uymadıkları ==>”form.invalid” tanımlaması ile kontrol edilir. Buna göre güncelle buttonu [disabled] olur ya da olmaz ==>”[disabled]=”form.invalid” class=”btn btn-success”

Publish:

Person combosunda seçilen kişiye göre, detayın çekilmesi ve bilgilerin güncellenmesi işlemlerinden sonra bu sefer de ilgili angular proje “ng build” komutu ile “dist” klasörüne publish edilir. Ayrıca ilgili folder altına aşağıdaki “web.config” dosyası da eklenerek, ftp yolu ile Azure’a atılır.

web.config: Amaç, başlangıç sayfasının “index.html” olduğunun belirtilmesidir.

Geldik bir seminerin daha sonuna. Seminer sırasında fikirlerini paylaşmaktan çekinmeyen, geç saatlere kadar kalıp bizimle kod yazan, var olan kodlar ü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/polatengin/dublin

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

3 Cevaplar

  1. erkan dedi ki:

    merhaba izlemek istiyoruz video çekimi yapıldımı ?

Bir Cevap Yazın

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