Kocaeli Universitesi .Net Core 2, Azure, Angular IT Fest 2017
Selamlar,
4 Ekim Çarşamba günü Kocaeli Üniversitesinde Engin Polat ile birlikte Angular, Azure ve Asp.Net Core konuları üzerine çok keyifli bir etkinlik yaptık. Yine canlı canlı yazdığımız kodlar ile öğrencilerin ufkunu bir nebze olsun açmak istedik.
Visual Studio 2017 üzerinde .Net Core ile bir web application oluşturduk. Aslında bu bir WebApi servisidir. İlgili Modellerimizi ve DBContextimizi aşağıdaki gibi oluşturuduk.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace api.Models { public class KocaeliDataContext : DbContext { public DbSet<Employee> Employees { get; set; } public DbSet<Project> Projects { get; set; } protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) { base.OnConfiguring(optionsBuilder); optionsBuilder.UseSqlServer("Server=tcp:kocaelisqlserver.database.windows.net,1433;Initial Catalog=Kocaeli;Persist Security Info=False;User ID=******;Password=******;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"); } } } |
Azure üzerinde önceden oluşturduğumuz “Kocaeli” database’i üzerine, .Net Core ile yazdığımız yukarıdaki DbContext sınıfımız ile Pocolarımızın, tablo olarak Sql üzerinde 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. Ayrıca cross platform yani ilgili servislerin client side tarafından da çağrılabilmesi için Entity Framework Core paketinin kurulması ve aşağıdaki gibi izinlerin verilmesi gerekmektedir.
|
1 2 3 4 5 6 |
app.UseCors(configure => { configure.AllowAnyHeader(); configure.AllowAnyMethod(); configure.AllowAnyOrigin(); }); |
İlgili servisler oluşturulduktan sonra front taraf için ilgili angular web sayfası, “angular cli” ile soldaki komut sayesinde oluşturulur. İlgili datalar, Azure üzerinde yayımlanan web servisleri ile doldurulur ve güncellenir. Görsel öğeler için bootstrap kullanılmıştır. Kaydetme işleminde “Form Validation” kullanılmış ve requeried olan fieldlara göre Güncelle buttonu tıklanamaz “[disabled]” hale getirilmiştir.
Proje içerisindeki servisler, modeller ve ana sayfanın farklı folderlar altında dağıtık bir mimari ile oluşturulması çok önemlidir. Ayrıca database ile olan tüm veri alışverişinin “json” formatında olması işleri daha da kolaylaştırmaktadır. Son olarak eklenen herbir component ve services’in “app.modules.ts”‘de de tanımlanması gerekmektedir.
|
1 2 3 4 5 6 7 8 |
public GetEmployeeList() { return this.http.get(employeeListUrl) .map(result => result.json()); } public GetProjectList() { return this.http.get(projectListUrl) .map(result => result.json()); } |
Geldik bir seminerin daha sonuna. Seminer sırasında fikirlerini paylaşmaktan çekinmeyen, sordukları sorular ile konuları daha ilginç bir hale getiren ve etkinlik sonundaki güzel hediyelerinden dolayı yukarıdaki ekibe, teşekkürü bir borç bilirim.
Yeni bir seminerde görüşmek üzere hepinize hoşçakalın.
Son Yorumlar