Await | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar await

Asp.Net Core uygulamalarında Google reCaptcha kullanımı

17 September 2016 Yorum yapılmamış

Bu makalede Google reCaptcha servisini Asp.Net Core uygulamasında nasıl kullanacağımızı adım adım inceleyeceğiz.

Öncelikle Google reCaptcha Admin sayfasında site ismi, adresi gibi bilgileri girerek yeni bir kayıt oluşturmamız ve eğer bilgisayarınızda .Net Core yüklü değilse yüklememiz gerekiyor.

Örnek projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidiyoruz ve aşağıdaki kodları çalıştırıyoruz;

Proje tipi olarak Empty Web Application, proje ismi olarakta asp-net-core-google-recaptcha belirleyelim.

project.json dosyasını açarak, dependencies kısmının içerisine aşağıdaki paketleri yazalım;

Paketleri indirmek için Command Prompt içerisinde dotnet restore komutunu çalıştırmamız lazım;

Şimdi Startup.cs dosyasını açalım, Configure() ve ConfigureServices() method’larının içerisini aşağıdaki şekilde değiştirelim;

Şimdi, projenin root dizininde Controllers dizini oluşturalım, içerisine HomeController.cs dosyası ekleyelim ve aşağıdaki kodları yazalım;

Artık, projenin root dizininde Views/Home dizini oluşturup, içerisine Index.cshtml dosyası ekleyebilir, aşağıdaki kodları yazabiliriz;

Html kodları içerisindeki g-recaptcha css class‘ına sahip olan elementin data-sitekey attribute değeri Google reCaptcha Admin konsolunda oluşturduğumuz kaydın SiteKey alanında yazan değer olmalı.

Kullanıcının kendini doğruladığını sunucu üzerinde de kontrol etmemiz gerekiyor, bunun için, HomeController.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

secret parametresi için, Google reCaptcha Admin konsolunda üretilen Secret Key alanının değerini kullanmamız gerekiyor.

Command Prompt açarak dotnet run komutunu yazalım ve uygulamanın çalıştığını görelim;

Artık Microsoft Edge tarayıcısını açabilir, http://localhost:5000 adresinden sayfayı görebiliriz;

Eğer Google reCaptcha için Ben robot değilim adımını yapmazsak, “Captcha doğrulanmamış“, yanlış doğrularsak, “Captcha yanlış doğrulanmış” adımları gerçekleşecek.

Tüm adımları doğru gerçekleştirirsek, “Herşey doğru” adımına gelecek.

Windows 10 UWP uygulamalarında OCR kullanımı

14 March 2016 1 yorum

Microsoft, Windows 10 uygulamaları içerisinden kullanabilmemiz için Optical Character Recognition (OCR) kütüphanelerini Universal Windows Platform (UWP) içerisine ekledi.

Böylece, Windows 10 yüklü olan tüm cihazlarda çalışabilen UWP uygulamaları Optical Character Recognition (OCR) yeteneklerine sahip olabiliyor.

Windows 10 Kasım 2015 güncellemesi ile birlikte OCR desteği 25 dil için hali hazırda sağlanıyor ve Türkçe dili de bunlardan biri.

Üstelik uygulamanın kullanılabilirliğini arttıracak bu yapıyı kodlamanız son derece kolay.

Kamerayı açarak resim çeken ve çektiği resimdeki yazıları algılayan örnek bir projeyi birlikte yapalım;

Öncelikle MainPage.xaml dosyasını açalım ve resim çekme ve resim içerisindeki yazıları bulma işini başlatacak olan Button nesnesini sayfaya ekleyelim;

<Page
	x:Class="OCROrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:OCROrnek">

	<Grid Margin="20">
		<Button Content="Tara" Click="Button_Click" />
	</Grid>

</Page>

MainPage.xaml.cs dosyası içerisinde Button_Click() methodunu oluşturalım ve OCR kütüphanelerini kullanmaya başlayalım;

private async void Button_Click(object sender, RoutedEventArgs e)
{
	var ui = new CameraCaptureUI();
	var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);

	var stream = await file.OpenAsync(FileAccessMode.Read);
	var decoder = await BitmapDecoder.CreateAsync(stream);

	var bitmap = await decoder.GetSoftwareBitmapAsync();

	var engine = OcrEngine.TryCreateFromUserProfileLanguages();
	var result = await engine.RecognizeAsync(bitmap);

	string extracted = result.Text;
}

Yukarıdaki method içerisinde öncelikle CameraCaptureUI sınıfını ve CaptureFileAsync() methodunu kullanarak uygulamamızın kamera aracılığıyla resim çekmesini sağladık. Bunun için CaptureFileAsync() method‘una CameraCaptureUIMode enum‘ından Photo değerini verdik.

Çekilen resmi OpenAsync() methodu ile açıp BitmapDecoder sınıfının CreateAsync() methoduna parametre olarak verdik. Böylece çekilen resmin hafıza içerisinde tutulduğu yere erişim sağlamış olduk.

GetSoftwareBitmapAsync() methodunu kullanarak SoftwareBitmap sınıfından bir değişken oluşturmuş, resmi bu değişken içerisinde saklamış olduk.

Artık OcrEngine sınıfının TryCreateFromUserProfileLanguages() methodu aracılığıyla kullanıcının cihazı kullandığı dilde OCR yapabileceği değişkeni oluşturabilir, RecognizeAsync() methodu ile karakter tanıma işini yaptırabiliriz.

Son olarak, OcrResult tipindeki değişkenin Text özelliği ile taranan resmin içerisindeki yazıları string tipinde elde edebiliriz.

Ben aşağıdaki görseli kullanarak bir tarama yaptırdım ve sonucu aşağıya yazdım;

Bir mum diğerini tutuşturmakla, kendinden bir şey kaybetmez. Mevlana Celaleddin-i Rumi

Windows 10 UWP uygulamasında Log için Slack kullanmak

22 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page
	x:Class="SlackLogger.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SlackLogger">

	<StackPanel Background="#1abc9c" Padding="10">
		<TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" />
		<TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" />
		<TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" />
		<TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" />
		<Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" />
	</StackPanel>

</Page>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
	var client = new HttpClient();

	var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

	await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}

Böylece Gönder butonuna basıldığında Slack‘te oluşturduğumuz public channel‘ın web service‘ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte Ad Soyad (EMail) : Message formatında bilgiyi Windows.Web.Http namespace‘i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

Gönder butonuna bastığımızda, Slack, aşağıdaki notification‘ı gösterecek;

Eğer Slack‘teki public channel‘ın sayfasını açacak olursak, orada da mesajı görebileceğiz;

Windows 10 UWP uygulamalarında ön veya arka kamera’nın görüntüsünü almak

26 January 2016 Yorum yapılmamış

Windows 10 UWP uygulamalarında cihazda bulunan ön veya arka kamera’dan birinin görüntüsünü alarak ekranda göstermek isteyebiliriz.

Örneğin, daha kaliteli olduğu için arka kamera‘nın görüntüsünü alıp üzerine filtre uygulayarak ekranda önizleme yaptırabiliriz.

Aynı şekilde ön kamera‘nın görüntüsünü ekranda göstererek kullanıcının aynaya bakıyormuş gibi uygulamayı kullanmasını sağlayabiliriz.

Hemen Visual Studio‘yu açarak yeni bir proje oluşturalım ve nasıl yapabildiğimize bakalım.

Windows kategorisinden Blank App (Universal Windows) proje template’ini seçerek, projeme bir isim veriyorum;

2-00

Solution Explorer‘dan erişebildiğim Package.appxmanifest dosyasına çift tıklayarak açıyoruz.

2-01

Capabilities tab’ında yeralan WebCam ve Microphone kutucuklarını işaretliyoruz;

2-02

MainPage.xaml dosyasını açıyor ve sayfaya bir CaptureElement nesnesi ekliyoruz;

MainPage.xaml.cs dosyasını açıyor ve OnNavigatedTo methodunu override ediyoruz. Böylece MainPage sayfasına gelindiğinde yapılacak işleri yazabileceğimiz bir method‘umuz oluyor;

OnNavigatedTo methodunda sırasıyla şunları yapıyoruz;

  • Uygulamanın çalıştığı cihazda bulunan ve video kaydetme yeteneğine sahip olan cihazların listesini alıyoruz
  • Bu cihaz listesinden ön panel‘de olanları filtreliyoruz
  • Eğer ön panelde bir video kaydedici cihaz varsa, bu cihazın Id bilgisi üzerinden cihaza erişiyoruz
  • Eriştiğimiz cihaz’ın önizlemesini MainPage.xaml dosyasında tanımladığımız CaptureElement nesnesi üzerinde göstermeye başlıyoruz

Eğer ön kamera‘nın değilde, arka kamera‘nın görüntüsünü göstermek isteseydik camera değişkenine aşağıdaki şekilde değer ataması yapmamız gerekecekti;

Windows 8 uygulamasında seçilen resmin hakim rengini bulma

09 June 2015 Yorum yapılmamış

Uygulamalarımızda sıklıkla resimler kullanırız ve bir resimde hakim olan (en çok kullanılan) rengi bulmak ve uygulama içerisinde kullanabilmek çok faydalı olabilir.

Resmi hafızaya yükledikten sonra pixel pixel üzerinde gezip her pixel‘in değerlerini toplayıp ve ortalamasını alarak hakim rengi bulabiliriz. Fakat aşağıda kodlarını paylaşacağım yöntem ile bu işi çok daha hızlı ve az hafıza gerektiren bir şekilde gerçekleştirebiliriz.

Öncelikle hakim rengini bulacağımız resim dosyasını StorageFile sınıfının GetFileFromApplicationUriAsync() methodunu kullanarak bir değişkene alıyoruz;

var file = await StorageFile.GetFileFromApplicationUriAsync(imageUri);

Şimdi dosyayı açacak, BitmapDecoder nesnesi oluşturacak, resim dosyasını GetPixelDataAsync() methodunu kullanarak 1×1 boyuta boyutlandıracak, 1×1 boyutlu yeni resmin renk değerini okuyacağız;

using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
	var decoder = await BitmapDecoder.CreateAsync(stream);

	var transform = new BitmapTransform { ScaledHeight = 1, ScaledWidth = 1 };

	var pixels = await decoder.GetPixelDataAsync(
			BitmapPixelFormat.Rgba8,
			BitmapAlphaMode.Ignore,
			transform,
			ExifOrientationMode.IgnoreExifOrientation,
			ColorManagementMode.DoNotColorManage);

	var bytes = pixels.DetachPixelData();

	var dominantColor = Color.FromArgb(255, bytes[0], bytes[1], bytes[2]);
}

Örnek resim ile kullandığımızda aşağıdaki sonucu elde etmeliyiz;

Kaynak : #WinRT : how to easily get the dominant color of a picture