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

Arşiv

Etiketlenen yazılar template

ionicframework ile cross-platform uygulama geliştirirken emulator kullanımı

26 October 2016 Yorum yapılmamış

ionicframework ile htmljavascriptcss (hatta typescript ve sass) kullanarak cross-platform uygulama geliştirebiliyoruz.

Cross-Platform projemizi tamamen ücretsiz ve tüm platformlarda varolan Visual Studio Code editorü ile geliştirebiliyoruz.

Visual Studio Code ile geliştirdiğimiz ionicframework projesini nasıl debug edebileceğimizi ve emulator‘u nasıl kullanabileceğimizi inceleyeceğiz.

Öncelikle projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki kodları çalıştıralım;

Bu komutun şablonu;

Proje şablonu olarak aşağıdaki hazır template’lerden birini belirleyebilirsiniz;

Proje oluşturulduktan sonra Visual Studio Code ile ilgili dizini açalım ve projenin dosyalarını aşağıdaki gibi gördüğümüzden emin olalım;

Sol taraftaki panelden Debug butonuna tıklayalım ve Debug Panel‘i açalım;

Ayarlar butonuna (Debug Panel‘de gözüken çark simgeli buton) bastığımızda gelen Select Environment seçeneklerinden Cordova seçeneğini seçiyoruz.

Böylece sistemimizde bulunan emulatorlerden istediğimiz bir tanesini seçerek ve yeşil çalıştır butonuna basarak projeyi emulator üzerinden debug etmeye başlayabiliriz;

Projeyi emulator üzerinde debug etmeye başladığımız andan itibaren Visual Studio Code içerisinde emulator‘ün çeşitli sensorlerine sahte sinyaller gönderebileceğimiz bir panel açılıyor.

Böylece istediğimiz sensörlere istediğimiz değerleri göndererek, farklı durumlarda uygulamamızın cihazda çalışmasını simule edebiliriz.

Angular js nedir? Angular js 2 nedir?

02 October 2016 1 yorum

Angular js ve yeni versiyonu olan Angular js 2 arasındaki farklara hızlıca bakacak, yeni bir Angular js 2 projesi oluşturacak, browser içerisinde görüntüleyeceğiz.

Aşağıdaki youtube video‘sunda npm üzerinden angular-cli paketini indirecek, yeni bir Angular js 2 projesi oluşturacağız. Typescript ile bir Angular js 2 component‘ının nasıl yapılandırıldığını görecek, template‘in ne demek olduğuna bakacak, metadata‘nın ne olduğunu öğrenecek, bir Angular js 2 application‘ının bileşenlerini inceleyeceğiz.

Video‘da kullandığım PowerPoint sunumuna aşağıdan erişebilirsiniz.


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.

AspNet Core 1.0 MVC6 projesine InMemory Caching desteği eklemek

07 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Asp.Net Kategorisindeki diğer makalelerimi okumanızı tavsiye ederim.

Caching (önbellekleme) sayesinde elde etmesi uzun sürecek verilere çok daha hızlı bir şekilde ulaşabiliriz.

Hemen yeni bir Asp.Net Core 1.0 MVC 6 projesi oluşturalım ve InMemory Caching ekleyelim.

Öncelikle ö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;

yo aspnet
// Empty Application seçeneğini seçiyoruz
// Projeye inmemorycaching ismini veriyoruz

cd inmemorycaching
code .

Visual Studio Code açıldıktan sonra project.json dosyasını açıyor ve içindeki dependencies kısmına aşağıdaki satırı ekliyoruz;

"Microsoft.AspNet.Mvc": "6.0.0-rc1-final"

Böylece Empty Application tipindeki AspNet Core uygulamamıza MVC 6 paketini kullanacağımızı söylemiş olduk. Fakat paket henüz projemizin olduğu dizine indirilmedi. Bunun için Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde aşağıdaki kodu çalıştırıyoruz;

dnu restore

Artık Startup.cs dosyasını açabilir ve projemizde Mvc kullanmaya başlayabiliriz. Öncelikle ConfigureServices() methodu içerisinde uygulamamıza Mvc‘yi tanıtıyoruz;

public void ConfigureServices(IServiceCollection services)
{
	services.AddMvc();
}

Bu noktada Configure() methodu içerisinde Mvc‘yi kullanabilir, yapılandırabiliriz;

app.UseMvc(routes =>
{
	routes.MapRoute(
		name: "default",
		template: "{controller=Home}/{action=Index}"
	);
});

AspNet Core 1.0 üzerinde geliştirdiğimiz projemizde artık MVC 6 yapılandırıldı.

İlk action methodumuzu yazmak için projenin olduğu dizinde Controllers dizini oluşturalım. Bunun için aşağıdaki komutları Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde çalıştırabiliriz;

mkdir Controllers

Visual Studio Code editörüne dönerek Controllers dizininde HomeController.cs dosyasını oluşturuyoruz ve içerisine Index() methodunu aşağıdaki gibi yazıyoruz;

using Microsoft.AspNet.Mvc;

namespace inmemorycaching.Controllers
{
	public class HomeController : Controller
	{
		public string Index()
		{
			return "";
		}
	}
}

Bu noktaya kadar http://localhost:5000 adresine girdiğimizde boş bir sayfa ile karşılaşacağımız uygulamayı hazırladık.

project.json dosyasını açalım ve dependencies kısmına aşağıdaki paketi ekleyelim;

"Microsoft.Extensions.Caching.Memory": "1.0.0-rc1-final"

Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinde aşağıdaki kodu çalıştıralım;

dnu restore

Artık projemizde caching (önbellekleme) yapabiliriz. Öncelikle Startup.cs dosyasını tekrar açalım ve ConfigureServices() methodunun içini aşağıdaki gibi değiştirelim;

services.AddCaching().AddMvc();

Şimdi HomeController.cs dosyasını açıp aşağıdaki şekilde güncelleyebiliriz;

public class HomeController : Controller
{
	private IMemoryCache cache;

	public HomeController(IMemoryCache _cache)
	{
		cache = _cache;
	}

	public string Index()
	{
		var start = DateTime.Now;

		IEnumerable<int> rakamlar;

		if(!cache.TryGetValue("Rakamlar", out rakamlar))
		{
			rakamlar = Enumerable.Range(1, 10000);

			cache.Set("Rakamlar", rakamlar);
		}

		return $"10.000 öğeli listenin elde edilme süresi : {(DateTime.Now - start).TotalMilliseconds} ms.";
	}
}

Öncelikle HomeController sınıfı içinde IMemoryCache tipinde cache değişkenini tanımladık.

using kısmına Microsoft.Extensions.Caching.Memory namespace’ini eklemeyi unutmamalıyız.

HomeController sınıfının constructor‘ında IMemoryCache tipinde bir parametre aldık ve cache değişkeninde sakladık.

Index() action methodunda içerisinde 10.000 adet rakam saklayacağımız değişkenimizi tanımlıyoruz.

cache değişkeninin TryGetValue() methodu aracılığı ile liste değişkenini cache‘teki liste ile doldurmaya çalışıyoruz.

Eğer dolduramazsak, cache‘e 10.000 rakamlı değişkeni ekliyoruz.

Index() action method’unun başında ve sonunda aldığımız iki zaman değişkeni aracılığı ile arada geçen zamanı hesaplıyoruz ve ekranda gösteriyoruz.

http://localhost:5000 adresine ilk ziyaretimizde 10.000 elemanlı diziye yaklaşık 6 saniye içerisinde ulaşabildiğimizi görüyoruz.

Takip eden ziyaretlerimizde ise 0 milisaniye içerisinde aynı diziye ulaşabiliyoruz;

IMemoryCache interface‘inde tanımlı olan Set() methodu ile cache‘e eklediğimiz nesnenin belli bir süre sonra otomatik olarak cache‘ten silinmesini istiyorsak, MemoryCacheEntryOptions sınıfından yeni bir instance çıkartıp, SetAbsoluteExpiration() methoduna istediğimiz süreyi TimeSpan tipinde vermeliyiz;

cache.Set("Rakamlar", rakamlar, new MemoryCacheEntryOptions().SetAbsoluteExpiration(TimeSpan.FromMinutes(30)));

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;