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;

View the code on Gist.

Bu komutun şablonu;

View the code on Gist.

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

• blank
• tabs
• sidemenu

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.

Bu yıl 22 Ekim 2016 tarihinde İstanbul‘da gerçekleşen etkinlikte ben de Nesnelerin Interneti ve Azure Bulut Bilişim konularındaki seanslarda konuşmacı olarak görev aldım.

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.

Aşağıdaki youtube video‘sunda Visual Studio içerisinde bir ASP.NET MVC projesi oluşturacak, dosya upload edecek bir html sayfası oluşturacak, upload edilen resmin içerisine istediğimiz metni gizleyeceğiz.

Öncelikle Index.cshtml içerisine aşağıdaki html kodlarını yazalım;

View the code on Gist.

HomeController.cs dosyasına aşağıda kodlarını bulacağınız Index() action ekleyelim;

View the code on Gist.

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

Program.cs içerisine yazdığımız kodları aşağıda bulabilirsiniz;

View the code on Gist.

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

Aşağıdaki youtube video‘sunu izleyerek Visual Studio ve Publish Profile (publishsettings) dosyası aracılığıyla projenizi Microsoft Azure üzerine publish edebilirsiniz.

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

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

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

View the code on Gist.

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;

View the code on Gist.

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;

View the code on Gist.

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

View the code on Gist.

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

View the code on Gist.

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;

View the code on Gist.

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.

Bu makalede adım adım ilerleyerek, dotnet CLI ile projeyi oluşturacak, Visual Studio Code ile geliştirecek ve Microsoft Edge tarayıcısı ile test edeceğiz.

Öncelikle, eğer bilgisayarınızda .Net Core yüklü değilse yüklemeniz gerekiyor.

Hemen proje için yeni bir dizin oluşturalım ve Command Prompt açarak dotnet new komutu ile projeyi oluşturalım;

Projeyi oluşturduğumuz dizinde Program.cs ve project.json dosyaları oluşmuş olmalı.

Eğer SignalR ve .Net Core birlikte kullanmak istiyorsak, bu makalenin yazıldığı tarihte yayınlanmamış olan en yeni Nuget paketlerini kullanmalıyız. Bunun için gecelik derlenen paketlere erişebilmemiz lazım. Projeye Nuget.config isimli bir dosya ekleyelim ve içerisine aşağıdaki Nuget kaynaklarını yazalım;

View the code on Gist.

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

View the code on Gist.

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

Şimdi Program.cs dosyasını açalım ve Main() method’unun içerisini aşağıdaki şekilde değiştirelim;

View the code on Gist.

Program.cs dosyasının using kısmına aşağıdaki tanımlamaları da eklememiz gerekiyor;

View the code on Gist.

Satır satır inceleyecek olursak, öncelikle Application Server olarak IIS değil, Kestrel kullanacağımızı tanımlıyoruz, html, js, css, jpg gibi static dosyaların wwwroot dizininde olacağını tanımlıyoruz, uygulamanın açılışı esnasında yapılacak işleri Startup isimli class içerisine yazacağımızı tanımlıyoruz ve son olarak uygulamayı çalıştırmaya başlıyoruz.

Projeyi oluşturduğumuz dizinde Startup.cs isimli bir dosya oluşturalım ve içerisine aşağıdaki kodları yazalım;

View the code on Gist.

Böylece, WebSocket ve SignalR kullanacağımızı .Net Core uygulamamızda tanımlamış olduk.

Bir SignalR Hub‘ı oluşturmak için projeyi oluşturduğumuz dizine ChatHub.cs isimli bir dosya ekleyelim ve içine aşağıdaki kodları yazalım;

View the code on Gist.

Artık proje dizininde wwwroot isimli yeni bir dizin oluşturarak içine index.html dosyasını ekleyebiliriz, index.html dosyasının içine aşağıdaki kodları yazalım;

View the code on Gist.

Basitçe, mesajların sayfada görüntülenebilmesi için bir textarea, mesaj göndermek için bir text ve bir button ekledik. Javascript ile buton’a her tıklandığında SignalR Hub’ına mesajın gönderilmesini, SignalR Hub’ından gelen mesajların da textarea içerisinde gösterilmesini sağladık.

Command Prompt açarak dotnet run komutunu çalıştıralım;

Command Prompt penceresini kapatmadan, iki farklı Microsoft Edge tarayıcı açarak uygulamayı http://localhost:5000/index.html adresinden test edebiliriz;

Projenin kodlarını Github hesabım üzerinden dotnet-core-signalr dizininde bulabilirsiniz.

• Neler anlatacağız
• İnternet Nedir?
• Sunucu, IIS, DNS Nedir?
• Başlangıç
• Web Forms Elemanları
• Web Forms ile Javascript Arasındaki Fark
• MVC Nedir-1
• MVC Nedir-2
• Viewbag
• Model
• Yeni Bir Kayıt Giriş
• Veritabanı-1
• Veritabanı-2
• WCF Service Yazımı ve Kullanımı-1
• WCF Service Yazımı ve Kullanımı-2

AçıkAkademi için bu eğitim setini çekmemizi sağlayan sevgili arkadaşım Ümit Batu‘ya da teşekkür ederim.

• Açılış
• C# Hakkında
• Visual Studio
• İlk Proje
• Rakamsal Veri Tipleri-1
• Rakamsal Veri Tipleri-2
• Tarihsel Veri Tutabilen Değişkenler-1
• Tarihsel Veri Tutabilen Değişkenler-2
• Liste Tipinde Değişkenler
• For Döngüsü
• ForEach Döngüsü
• Switch
• Sınıflar ve Öğeler
• Özellikler ve Enumlar
• Metodlar
• C# Eğitiminden En İyi Nasıl Faydalanabilirim?

AçıkAkademi için bu eğitim setini çekmemizi sağlayan sevgili arkadaşım Ümit Batu‘ya da teşekkür ederim.

Her sene üniversitelerin yaz tatiline girmesiyle Microsoft tarafından bir Yaz Okulu etkinliği gerçekleştiriliyor.

Son birkaç yıldır olduğu gibi bu yıl da Microsoft Yaz Okuluna eğitmen olarak katıldım.

05 Ağustos 2016, 12 Ağustos 2016, 23 Ağustos 2016 ve 24 Ağustos 2016 tarihlerinde Microsoft Türkiye ofisinde gerçekleştirdiğim seanslarda Universal Windows Platform, Microsoft Azure, HTML, Javascript, CSS ve Asp.Net MVC konularında eğitimler verdim.

Tüm Yaz Okulu öğrencilerine, beni sabırla dinledikleri için teşekkür ediyor, özverili katılımlarından dolayı da tebrik ediyorum.

Her yıl topluluk üyesi eğitim merkezlerinin katılabildiği bir yarışma organize eder ve her ülkenin kazananını uluslararası arenada yarıştırır.

Topluluğun Türkiye üyesi olan BilgeAdam, 29 Temmuz 2016 tarihinde Maslak ofisinde LLPA Battle Turkey (LLPA Türkiye Yarışması) yarışmasını gerçekleştirdi.

14 katılımcı‘nın katıldığı yarışmayı ben kazandım ve uluslararası yarışmada Türkiye‘yi temsil etme hakkı kazandım.

C# kurallarına göre, bir proje diğer projeyi referans olarak görüyorsa public erişim belirleyicili (access modifier) olan class‘lara erişebilir. internal access modifier olan class‘lara ise referans olarak gören projeden erişilemez, sadece tanımlandığı projeden erişilebilir.

Göstermesi, anlatmasından kolay olacak sanırım.

Hemen Visual Studio 2015 açalım ve yeni bir Console Application projesi oluşturalım;

Solution‘a sağ tuşla tıklayalım ve Add Project menüsünden bir tane Class Library ekleyelim ve Class1.cs dosyasının ismini VeritabaniErisimi.cs olacak şekilde değiştirelim;

Yeni oluşturduğumuz Class Library projesini Console Application projesinin referans‘larına ekleyelim;

Böylece solution‘ımız aşağıdaki gibi gözükmeli;

VeritabaniErisimi.cs dosyasını açalım ve VeritabaniErisimi class‘ının erişim belirleyicisini (Access Modifier) internal yapalım.

View the code on Gist.

Console Application projesindeki Program.cs dosyasını açar ve içerisinden VeritabaniErisimi isimli class‘a erişmek istersek, internal access modifier‘ına sahip olduğu için erişemeyeceğiz.

View the code on Gist.

Bu noktada proje derlenemez ve ‘VeritabaniErisimi’ is inaccessible due to its protection level hatası verir.

Çünkü; internal access modifier‘ına sahip class‘lar sadece kendi projelerinde kullanılabilir, erişebilirlerdir. Kendi projelerinin dışından erişilemezler.

Eğer istersek, Kutuphane isimli Class Library‘deki internal access modifier‘ına sahip sınıfların başka projelerden de erişilebilir olmasını sağlayabiliriz.

Bunun için namespace üstünde InternalsVisibleTo Attribute‘ünü kullanmamız lazım.

Öncelikle VeritabaniErisimi.cs dosyasını açalım (aslında Kutuphane projesindeki herhangi bir csharp dosyasını açsak olur) ve using kısmına System.Runtime.CompilerServices ekleyelim, namespace üzerine de [assembly: InternalsVisibleTo(“PROJEADI”)] yazalım.

InternalsVisibelTo attribute‘ünün parametresi olan PROJEADI, internal access modifier‘ına sahip class‘ların görünür olmasını istediğimiz projelerin adı olmalı. Örneğin;

View the code on Gist.

Bunun için istediğimiz nesnelerin stillerini (Style) değiştirmemiz gerekir.

Hemen yeni bir proje oluşturalım ve stilleri nasıl değiştireceğimizi inceleyelim;

Projeyi oluşturduktan sonra, MainPage.xaml dosyasını açalım ve içerisini aşağıdaki şekilde değiştirelim;

View the code on Gist.

Stilini değiştirmek istediğimiz nesnenin özelliklerini kullanarak farklı gözükmesini sağlayabiliyoruz. Örneğin, sayfaya bir Button nesnesi ekleyerek aşağıdaki özelliklerini değiştirebilir, ekranda varsayılan halinden farklı gözükmesini sağlayabiliriz;

• Background
• Foreground
• BorderBrush
• Margin
• Padding

Sonuç aşağıdaki gibi olmalı;

AspNet Core 1.0 projelerinde Kestrel Application Server’ın çalışacağı adresi değiştirmek isteyebilirsiniz.

Hemen örnek proje oluşturacağımız dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidiyoruz ve aşağıdaki kodları çalıştırıyoruz;

View the code on Gist.

Yeni oluşturduğumuz projeyi çalıştırmak için aşağıdaki komutu çalıştırmamız yeterli;

dotnet run

Proje http://localhost:5000 adresinden çalışmaya başlayacak, istediğimiz tarayıcıyı açarak http://localhost:5000 adresi aracılığıyla projeyi kullanabileceğiz.

Program.cs dosyası içerisinde yeralan Main() methoduna aşağıdaki kod parçasını ekleyecek olursak projenin çalıştırılacağı adresleri değiştirebiliriz;

View the code on Gist.

Main() methodu aşağıdaki gibi bir hale gelmiş olmalı;

View the code on Gist.

Ben de App Services konulu oturumum ile etkinlikte yer aldım.

Etkinliğe ilgi gösteren tüm katılımcılara teşekkür ederim.

Ben de bu etkinlik çerçevesinde Universal Windows Platform Development, Azure Development ve Unity3D Game Development konularında oturumlar düzenledim.

Beni bu etkinliğe davet eden sevgili Fatih Kocamaz hocama ve etkinliğe katılan tüm öğrenci arkadaşlarıma teşekkür ediyorum.

Hemen yeni bir html dosyası oluşturalım ve aşağıdaki kodları yazalım;

View the code on Gist.

Böylece sayfa üzerinde 400px x 400px alanında oluşturduğumuz canvas elementi üzerine mouse kullanarak çizim yapabileceğiz.

Ben de tüm gün boyunca etkinliğe katılan IYTE öğrencilerine Azure App Services konulu hands-on (uygulamalı) anlatım yaptım.

Etkinliğe katılan tüm katılımcılara teşekkür ederim.

Uygulamada Session yapılandırmak için basitçe web.config dosyasına aşağıdaki elementi eklememiz yeterlidir;

View the code on Gist.

timeout attribute ile kaç dakika boyunca kullanıcı işlem yapmazsa session‘daki değişkenlerinin temizleneceğini belirliyoruz.

mode attribute ile session değişkenlerinin tutulacağı yeri belirliyoruz. Seçenekler;

InProc
Uygulamanın çalıştığı sunucunun RAM hafızasında. Uygulama, çalıştığı sunucunun RAM hafızasına çok hızlı erişebileceği için tek sunuculu ortamlarda genellikle bu seçenek tercih edilir.

View the code on Gist.

StateServer
Uygulamanın çalıştığı sunucunun veya başka bir sunucunun RAM hafızasında. Session bilgileri hala RAM’de tutulduğu için hızlı erişilebilir, birden fazla sunuculu ortamlarda session bilgileri ortak bir yerde tutulduğu için genellikle bu seçenek tercih edilir. Örneğin, uygulamamız 2 sunucuda çalışıyorsa, kullanıcının session değişkenleri Sunucu1’de oluştuğunda Sunucu2 için böyle bir kullanıcı hiç varolmayacaktır. Eğer kullanıcının herhangi bir isteği Sunucu2 sunucusuna yönlenecek olursa, Sunucu2 bu isteği işleyemeyecektir. Bu sorunu çözmek için session bilgilerini Sunucu1 veya Sunucu2 üzerinde tutmak yerine, ortak bir StateServer üzerinde tutabiliriz.

View the code on Gist.

SQL Server
Tıpkı StateServer seçeneği gibi çalışır, farklı olarak session bilgileri RAM hafızada tutulmaz, SqlServer‘da oluşturulan tablolarda tutulur. StateServer‘a göre daha yavaştır (veritabanında sorgulama, kayıt ekleme, güncelleme adımları da araya girdiği için)

Fakat StateServer kapanıp açılacak olursa, RAM hafıza temizleneceği için, session bilgileri kaybolur, SqlServer‘da ise, kaybolmaz.

View the code on Gist.

Etkinliği organize eden ve beni davet eden sevgili Ünsal Atasoy arkadaşıma ve katılan herkese teşekkür ederim.

Fakat mouse ile ilgili birden fazla events (olaylar) mevcut ve aralarındaki farkları bilmekte fayda var.

Aşağıdaki liste ile mouse events (olaylar) arasındaki farkları görebilirsiniz;

mousedown
Mouse butonlarından birine basıldığında gerçekleşir. Parametrede yer alan button özelliği eğer 0 ise sol buton, 1 ise orta buton, 2 ise sağ buton basılmıştır.

mouseup
Basılan Mouse butonu bırakıldığında gerçekleşir.

mouseclick
Mouse butonuna basılması ve bırakılması durumunda gerçekleşir.

mouseenter
Mouse, bir Html elementin üzerine geldiğinde gerçekleşir.

mouseleave / mouseout
Mouse, bir Html elementin üzerinden çıktığında gerçekleşir. Html element, başka bir element içeriyorsa, mouseleave event (olay) içerilen elementin üzerine geldiğinde gerçekleşmez, mouseout event (olay) gerçekleşir.

mouseover / mousemove
Mouse, bir Html elementin üzerinden geçerken gerçekleşir. Eğer Html element başka bir elementin içindeyse veya içerisinde başka elementler varsa da mouseover event (olay) gerçekleşir. Mouse ilgili elementin üzerinde gezdikçe mouseover event (olay) sadece bir defa gerçekleşir, mousemove event (olay) her seferinde gerçekleşir.

Ben de 22 Nisan 2016 tarihinde Azure App Services konulu bir hands-on (uygulamalı) oturum ile katılımcılara Azure platformunun yazılım geliştiriciler için kolaylıklarını anlattım.

Etkinliğe katılan herkese teşekkür ederim.

Bu makale ile adım adım ilerleyerek, cihazın Camera gösüntüsünü video element içerisinde gösteren bir sayfa oluşturacağız, hemen yeni bir html dosyası oluşturalım ve içine aşağıdaki kodları yazalım;

View the code on Gist.

Sayfaya bir video element ekleyeceğiz, Javascript aracılığı ile cihazın Camera görüntüsünü alacak, video element içerisinde göstereceğiz. Bunun için aşağıdaki kodları <body></body> element içerisine ekleyelim;

View the code on Gist.

Böylece, sayfa açıldığında navigator nesnesinin getUserMedia method’unu kullanarak cihazın Camera görüntüsüne ulaşmayı deniyoruz.

Not : Eğer audio filtresine false değeri yerine true değeri verirsek sesleri de almaya başlarız.

Eğer camera‘ya başarılı bir şekilde erişebilirsek, window.URL.createObjectURL() methodu ile Camera‘nın görüntüsünü istediğimiz video element içerisinde oynatmaya başlayabiliyoruz.

Sayfa ilk açıldığında kullanıcıdan Camera‘ya erişmek için izin istenir.

Gerekli izin verildikten sonra Camera görüntüsü, ilgili video element içerisinde oynatılmaya başlanır.

Eğer Camera görüntüsünü durdurmak istiyorsak, stream‘in stop() methodunu çağırmamız yeterli.

Ayrıca, CSS3 stillerini kullanarak Camera görüntüsü üzerine efekt‘ler de uygulayabiliriz. Bakınız, HTML5 video element CSS3 ile efekt uygulamak

Eğer Camera görüntüsünün çözünürlüğünü değiştirmek istersek, navigator.getUserMedia() methodunun ilk parametresinde basitçe video: true yazmak yerine, istediğimiz çözünürlüğü aşağıdaki gibi belirtiyoruz;

View the code on Gist.

Türkiye‘de İstanbul ve Ankara‘da bir tam gün boyunca sektör tecrübesi olan uzmanlarca gerçekleştirilen Global Azure Bootcamp içerisinde ben de Asp.Net Core 1.0 ile Yüksek Performanslı Web Uygulamaları konulu oturum gerçekleştirdim.

Etkinliğe katılan herkese teşekkür ederim, etkinlik duyuru görselini aşağıda bulabilirsiniz.