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.
|
1 2 3 4 5 6 |
app.UseCors((builder) => { builder.AllowAnyHeader(); builder.AllowAnyMethod(); builder.AllowAnyOrigin(); }); |
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.
|
1 |
<input type="button" value="Güncelle" [disabled]="selectedEmployee==null || form.invalid" class="btn btn-success" (click)="UpdateEmployee()"> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<configuration> <system.webServer> <rewrite> <rules> <rule name="redirect all requests" stopProcessing="true"> <match url="^(.*)$" ignoreCase="false" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" /> </conditions> <action type="Rewrite" url="index.html" appendQueryString="true" /> </rule> </rules> </rewrite> </system.webServer> </configuration> |
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
merhaba izlemek istiyoruz video çekimi yapıldımı ?
Hayır malesef yapılmadı.
Ama şehir dışında olanlar için bakalım bir plan yapalım…
bora abi iyi günler öncelikle yazılarınızı sürekli takip ediyorum ve sayenizde birçok sey öğrendim. Şu anki konu ile alakası yok fakat bir soru sormak istiyorum. Web application projelerinde application state de global olarak veri tutabiliyoruz. Peki azure uygulamalarında windows azure application state mevcut mudur. Yoksa normal web uygulamarında ki global olarak veri tutabildiğimiz kullanımlara karşılık gelen azure da bir kullanım şekli var mıdır ? Teşekkürler…