İçeriğe geç

Vue.js’ten C# REST API’ye Dapper ve PostgreSQL ile Veri Gönderme Rehberi

Selamlar herkese! Bugün size uzun zamandır üzerinde çalıştığım ve birçok geliştiricinin işine yarayacağına inandığım bir konudan bahsedeceğim. Hani böyle bir projeye başlarsınız ya, her şey tıkırında gider gibi durur, sonra bir bakarsınız ki ufak bir detay yüzünden bütün planlar suya düşmüş. İşte tam da bu durumu yaşamamak için Vue.js’ten C# ile yazdığımız bir REST API’ye veri gönderme konusuna Dapper ve PostgreSQL kullanarak nasıl yaklaşmalıyız, gelin birlikte inceleyelim.

Şimdi öncelikle şunu belirtmek isterim ki, bu işin tek bir doğru yolu yok tabii ki. Ama bana göre, yani benim yıllardır bu işlerle uğraşan 42 yaşındaki bir geliştirici olarak (ki blog yazmaya 20’li yaşlarımda başladım, şimdi yenisini açtım, Bursa’dan selamlar :)), en stabil ve yönetilebilir yol genelde en iyisidir. Özellikle performanslı çalışması gereken yerlerde Dapper gibi mikro ORM’ler gerçekten hayat kurtarıcı olabiliyor. PostgreSQL de zaten malum, ne kadar güçlü bir veritabanı olduğunu hepimiz biliyoruz.

Peki, Vue.js tarafında ne yapıyoruz? Genelde bir form dolduruyoruz değil mi? Kullanıcı bilgileri, ürün bilgileri, sipariş detayları… İşte bu bilgileri alıp, C# tarafındaki API’mize göndermemiz gerekiyor. Burada fetch ya da axios gibi kütüphaneleri kullanıyoruz genelde. JSON formatında veriyi hazırlayıp POST isteğiyle gönderiyoruz. Kolay gibi duruyor ama işin içine veritabanı girince işler biraz karışabiliyor. Hani bazen bir bakarsınız, veriyi göndermişsiniz ama veritabanına yanlış girmiş, ya da hiç girmemiş. İşte o zaman insanın canı sıkılıyor doğrusu.

C# tarafında ise ASP.NET Core ile yazdığımız REST API projemizde, gelen JSON verisini bir modele mapleyip, ardından Dapper kullanarak bu modeli veritabanına kaydediyoruz. Dapper’ın en sevdiğim yanı, SQL sorgularını doğrudan yazabiliyor olmanız. Bu hem performans açısından harika, hem de neyin ne olduğunu anlamanızı kolaylaştırıyor. Yani böyle karmaşık ORM’lerin otomatik oluşturduğu sorgularla uğraşmak yerine, kendi SQL’inizi yazıp Dapper ile bind ediyorsunuz. Bu arada, Dapper’ın parametre bağlama olayı da oldukça güvenli, bu da önemli bir artı.

Şimdi gelelim işin en can alıcı noktasına, yani kod örneğine. Aşağıda, Vue.js’ten gelen bir kullanıcı verisini C# API’mize alıp Dapper ile PostgreSQL’e kaydetmenin basit bir örneğini göreceksiniz. Önce yanlış yapılan bir senaryo, sonra da doğrusu nasıl olmalı, onu göstereceğim. Genelde ilk yaptığımda bir şeyleri yanlış yaparım ama sonra öğrenirim işte 🙂

Öncelikle, gelen veriyi karşılayacak bir modelimiz olmalı. Basit bir `KullaniciModel` diyelim ona. Sonra API controller’ımızda bu modeli parametre olarak alıp, bir repository ya da servis katmanında Dapper ile sorgumuzu çalıştıracağız.

Aşağıdaki kod örneğinde, önce yanlış bir yaklaşımla doğrudan string olarak SQL sorgusu yazmayı denediğimizi düşünelim. Bu hem güvenlik açığı yaratır hem de SQL injection’a davetiye çıkarır, yani pek tavsiye edilmez. Sonrasında ise doğru yöntemi, parametre kullanarak nasıl yapacağımızı göreceğiz. Bu arada, böyle SQL injection olaylarından korunmak için her zaman parametreli sorgu kullanmak en sağlam yol bence.

Şimdi ilk olarak, yanlış yapılan bir senaryoyu hayal edelim:

// YANLIŞ YAKLAŞIM: String olarak SQL sorgusu hazırlama (Güvenlik riski!) public async Task PostKullaniciYanlis(KullaniciModel kullanici) {     // BU YÖNTEM KESİNLİKLE KULLANILMAMALIDIR!     var query = $"INSERT INTO Kullanicilar (Ad, Soyad, Email) VALUES ('{kullanici.Ad}', '{kullanici.Soyad}', '{kullanici.Email}')";     using (var connection = new NpgsqlConnection(_connectionString))     {         await connection.ExecuteAsync(query);     }     return Ok("Kullanıcı eklenmeye çalışıldı (yanlış yöntemle)."); }

Evet, yukarıdaki gibi bir şey yaparsanız, başınız ağrıyabilir. SQL injection olayı bir yana, veriyi doğru bir şekilde bind etmediğiniz için sorunlar yaşarsınız. Neyse efendim, şimdi gelelim doğru yönteme. Parametre bağlama olayı burada devreye giriyor.

Şimdi doğru ve güvenli yöntemi gösterelim:

// DOĞRU YAKLAŞIM: Parametreli sorgu ile Dapper kullanımı public async Task PostKullaniciDogru(KullaniciModel kullanici) {     using (var connection = new NpgsqlConnection(_connectionString))     {         var query = @"INSERT INTO Kullanicilar (Ad, Soyad, Email) VALUES (@Ad, @Soyad, @Email)";         await connection.ExecuteAsync(query, kullanici); // Dapper modeli direkt parametre olarak alıyor!     }     return Ok("Kullanıcı başarıyla eklendi."); }

Ne güzel değil mi? Sadece bir parametre ekleyerek kodumuz hem daha güvenli hem de daha okunaklı hale geldi. Dapper, direkt olarak `KullaniciModel` nesnesini alıp, içindeki property’leri sorgudaki `@Ad`, `@Soyad`, `@Email` gibi parametrelerle eşleştiriyor. Bu kadar basit!

Tabii bu sadece temel bir örnek. Gerçek projelerde daha karmaşık sorgular, transaction’lar, hata yönetimi gibi konular da devreye girecektir. Ama ana mantık bu. Vue.js’ten JSON gönder, C# API’de modeli al, Dapper ile güvenli bir şekilde veritabanına kaydet. Bu arada, bu tarz veri gönderme işlemleri için genelde bir API Gateway de kullanılıyor olabilir, ama o başka bir konu 🙂

Sonuç olarak, Vue.js ile C# REST API’nize veri gönderirken Dapper ve PostgreSQL kullanmak, performans ve güvenlik açısından harika bir kombinasyon sunuyor. Önemli olan doğru yöntemleri bilmek ve uygulamak. Eğer siz de bu tarz projeler yapıyorsanız, bana göre bu yaklaşım oldukça mantıklı.

Bu arada, eğer daha detaylı bilgi almak isterseniz, Dapper’ın kendi dokümantasyonuna şuradan göz atabilirsiniz: Dapper GitHub. PostgreSQL ile ilgili genel bilgilere de buradan ulaşabilirsiniz: PostgreSQL Resmi Sitesi.

Bana göre bu yöntem, özellikle çok fazla veri işleyen ve performansın kritik olduğu projelerde fark yaratacaktır. Unutmayın, teknoloji sürekli gelişiyor ve biz de bu gelişmelere ayak uydurarak en iyi çözümleri bulmaya çalışıyoruz. Umarım bu yazı işinize yaramıştır!

Bir de şunu eklemek isterim, bazen böyle basit bir işlem bile saatlerce sürebiliyor, hani insan kafayı yiyor ama sonra çözümü çok basitmiş diyorsunuz ya, işte bu da öyle bir şeydi sanırım. 🙂 Neyse, kodu deneyin, görün farkı.

Umarım bu yazı, Vue.js ve C# geliştiricileri için faydalı olmuştur. Hatalardan ders çıkarmak ve doğru çözümleri uygulamak en önemlisi. Hadi bakalım, kodlama dünyasında başarılar!

Bu arada, eğer merak ederseniz, bu konuyu anlatan YouTube’da da bolca kaynak bulabilirsiniz. Ama benim anlattığım gibi basit ve pratik bir anlatım bulmak zor olabilir, ne de olsa yılların tecrübesi 🙂

Sanırım bu kadar yeterli. Herkese iyi kodlamalar!

Neticede, bu tarz teknolojileri bir arada kullanmak gerçekten keyifli ve sonuçları da tatmin edici oluyor.

Kendi deneyimime göre, bu tür bir entegrasyonun en büyük avantajı, hem frontend tarafında esneklik sağlaması hem de backend tarafında yüksek performanslı veri işleme gücü sunması.

Yani şey gibi… nasıl anlatsam tam bilmiyorum ama

Bu arada, eğer bu konuyu daha detaylı incelemek isterseniz, Google’da aratarak da pek çok örneğe ulaşabilirsiniz.

Bana göre, teknolojinin nimetlerinden faydalanmak ve bunları projelerimize doğru şekilde entegre etmek hepimizin görevi.

Ne güzel değil mi?