garen.yöndem launching ...3 ...2 ...1

Windows 10’da NodeJS Development Ortamı Kurmak

24. Ekim 2017 10:00by Garen Yöndem

Önceki yazıda NodeJS’in ne olduğuna ve Node’da basit bir I/O işleminin nasıl çalıştığına göz atmıştık. Daha detaylı makalelere geçmeden önce, Windows ortamında development yapabilmemiz için ihtiyacımız olacak araçları kurmaya başlayalım.


İlk olarak Node’un resmi web sayfası, nodejs.org adresinden NodeJS runtime paketini indirip bilgisayarımıza kurmalıyız. Bu pakete önceki yazıda incelediğimiz libuv gibi temel bileşenlere ek olarak, package management sistemi olan NPM (Node Package Manager) de dahil. Böylece .NET ortamındaki NuGet veya Python ortamındaki PyPi ile yapabildiğimiz gibi third party library’leri kolayca indirerek projelerimizde kullanabiliriz.


Node ekibi 2015 yılından itibaren LTS (Long Term Support) ve Current adından iki branch yürütmeye başladı. Current sürekli yeni feature’lar eklenen versiyon. LTS ise artık olgunlaşmış, sadece bakım güncellemeleri alan versiyon oldu. Gelecek makalelerde yapacağımız örneklerde her iki versiyonu da kullanacağız. Dolayısıyla iki branch’in de son versiyonlarını bilgisayarınıza indirmenizde fayda var.


Bilgisayarınıza birden çok Node versiyonu kurmaya çalıştığınızda kurulum sırasında bir önceki versiyonu kaldırmanızı isteyecektir. Bunun üstesinden gelebilmek için kurulumu NVM (Node Version Manager) kullanarak yapmalıyız. Orijinal versiyonu Linux ve macOS için yazılmış olan NVM’in çeşitli Windows portları bulunuyor. En popüler olanlardan ikisi nvm-windows ve nodist. Orjinal NVM’e benzerliğinden ve kullanım kolaylığından dolayı nvm-windows benim tavsiyem. Nvm-Windows’u GitHub sayfasından indirebilir veya choco install nvm komutuyla chocolatey aracılığıyla kurabilirsiniz. Bunlarla uğraşmak istemiyorum, ben zaten sık sık versiyon değiştirmiyorum diyenler editörlerden bahsedeceğimiz bölüme atlayabilirler. :)


Nvm-windows kurulumunu tamamladıktan sonra konsol’a nvm yazıp yardım dokümanına ulaşabiliriz.


Windows 10’da NodeJS Development Ortamı Kurmak - garen.yondem.com


Dilediğimiz Node versiyonunu indirmek için nvm install 6.10.2 gibi versiyon numarasını eklemeli veya var olan son versiyonu indirmek için nvm install latest komutunu çalıştırmalıyız. Versiyonları sırayla kurduktan sonra nvm list komutuyla bilgisayarımızda kurulu olan Node versiyonlarını listeleyebiliriz.


Windows 10’da NodeJS Development Ortamı Kurmak - garen.yondem.com


Listede yanında yıldız olan satır şu anda aktif olan Node versiyonunu belirtiyor. Aktif versiyonu değiştirmek için nvm use (versiyon numarası) komutunu çalıştırmanız yeterli.


Editör

Gerekli kurulumları tamamladıktan sonra sıra kodumuzu yazacağımız editörü kurmaya geldi. Bilgisayarınızda Visual Studio zaten kurulu ise Node.js Tools for Visual Studio’yu kurarak hızlıca çalışmaya başlayabilirsiniz. Eğer kullanımı daha basit bir editör arıyorsanız Visual Studio Code’u indirebilirsiniz. Serinin ilerleyen yazılarında örneklerimizi benim de aktif olarak kullandığım Visual Studio Code üzerinde yapacağımız için Visual Studio Code’u tercih etmenizi tavsiye ederim.


Windows 10’da NodeJS Development Ortamı Kurmak - garen.yondem.com


Editör tercihimizi ve kurulumumuzu da yaptıktan sonra NodeJS development ortamımız artık hazır. Sıradaki yazıda benzer ortamı macOS’te nasıl kurabileceğimize bakacağız. Görüşmek üzere!

Visual Studio 2015’te XAML Formatını Değiştirmek

2. Ağustos 2015 11:00by Garen Yöndem

Burada paylaşma fırsatı bulamadığım son zamanlarda, Android uygulamaları geliştiren ekiplerde yer almaya ve dolayısıyla Java + Android Studio kullanmaya başladım. Bundan sonra giriş seviyesinde de olsa Android ve Java tecrübelerimi ve maceralarımı da fırsat buldukça paylaşmaya çalışacağım. Fakat bugün Android Studio’da kullanmaya alıştıktan sonra kendimi daha rahat hissettiğim ve aynı ortamı Visual Studio’da da yaratmaya çalıştığım, XML ve XAML kod formatlama özelliğinden bahsedeceğim.


Bahsettiğim özellik esasında kodun görünüşünü değiştirmekten ötesi değil. Android Studio kullanmış olanlar zaten biliyordur, o ortam için varsayılan ayar bu şekilde (yanılmıyorsam). Layout yani XML kodlarına baktığınızda XML elementlerinin her property’si bir satırdan oluşuyor. Bu davranış layout kodunun dosya boyutunu oldukça büyütüyor ancak, kodu çok daha okunaklı ve aradığınız property’i bulmanızı kolay kılıyor.


Bu özelliği Visual Studio 2015’te etkinleştirmek için; Tools > Options > Text Editor > XAML > Formatting > Spacing yolunu takip ettikten sonra ulaşacağınız aşağıdaki pencerede, her property’yi ayrı satıra yerleştirme özelliğini bulabilirsiniz.


Visual Studio 2015’te XAML Formatını Değiştirmek - garen.yondem.com


Ayarlamayı kaydettikten sonra mevcut XAML sayfalarında Edit > Advanced > Format Document seçeneğini seçerek kodu aşağıdaki şekilde formatlayabilirsiniz.


Visual Studio 2015’te XAML Formatını Değiştirmek - garen.yondem.com


Görüşmek üzere

Visual Studio Task List (Görev Listesi)

31. Ekim 2014 12:00by Garen Yöndem

Geliştirdiğimiz bireysel projelerde veya yıllarca geliştirilmesine devam edilen kurumsal uygulamalarda sık sık kodların arasında comment’ler görmeye veya görmeyi ummaya :) alışığız. Commentler çoğu zaman algoritmaların veya kodun akışının anlaşılabilmesi için kritik önem taşımaktadır. Her ne kadar mantıklı ve tutarlı isimlendirmelerle okunabilir ve kolay anlaşılabilir kod yazmak mümkün olsa da felaket senaryolarında comment yazmak can simidi görevi üstlenebiliyor.


Peki, yapılan eylemi anlatmanın dışında, yapılacak eylemi anlatmak için ne kullanmalı? Bu durumda işin rengi biraz değişiyor ve farklı ihtiyaçlar beliriyor. Bu ihtiyaçlardan bazıları; yapılacak iş projenin neresinde?, yapılacakların listesi nerede?, işlerin öncelik sırası nasıl?.


Visual Studio Task List (Görev Listesi) - garen.yondem.com


Visual Studio’da tam da bu tip ihtiyaçların giderilmesini hedefleyen ancak pek az developerın kullandığı Task List (Görev Listesi) penceresi mevcut. Task List penceresine Visual Studio menüsünden “View > Task List” yolunu takip ederken ulaşabilirsiniz.


Visual Studio Task List (Görev Listesi) - garen.yondem.com


Açılacak pencere ana hatlarıyla dropdown menüden ulaşabileceğiniz User Tasks ve Comments kısımlarından oluşuyor. User Tasks kısmında projenizle ilgili görevlerin listesine ulaşabilirsiniz. Yeni görev oluşturmak için sağ üstteki butonu kullanmalısınız. Görevi tanımladıktan/yazdıktan sonra üzerine sağ tıklayarak öncelik sırasını da belirleyebilirsiniz. Görevi tamamladıktan sonra ise yapmanız gerekeni yukarıdaki ekran görüntüsünden anlamışsınızdır. :)


Visual Studio Task List (Görev Listesi) - garen.yondem.com


Comments kısmı ise bende olduğu gibi size de User Taks kısmından daha kullanışlı gelebilir. Çünkü size kodun herhangi bir yerine bıraktığınız not’la ilgili, bulunduğu sayfa ve satır gibi daha detaylı veriler sunuyor. Ayrıca comment’in üzerine çift tıklayarak doğrudan commentin bulunduğu yere ulaşmanız mümkün.


Visual Studio’da önceden tanımlanmış ve Task List’in indeksleyebildiği üç adet comment keyword'ü mevcut. Bunlar; TODO:, HACK: ve UNDONE:. Ancak bu üç keyword’ün yanı sıra kendi custom keyword’lerinizi de tanımlayabilirsiniz


Visual Studio Task List (Görev Listesi) - garen.yondem.com


Task List için tanımlanmış keyword’lere Visual Studio menüsünden "Tools > Options > Environment > Task List" yolunu takip ederek ulaşabilirsiniz. Yeni bir keyword oluşturmak için öncelikle ismini belirlemeniz gerekiyor, ardından “Add” butonu aktif hale gelerek yeni keyword’ünüzü listeye eklemenize imkan sağlıyor.


Visual Studio Task List (Görev Listesi) - garen.yondem.com


Yeni keyword’ü ekledikten sonra onu da diğer keywordler gibi kullanmaya başlayabilirsiniz. Ancak bu aşamada özellikle şirket içi keyword oluşturmak isteyenlerin dikkat etmesi gerek bir konu var. Tanımlanan keyword’ler sadece local Visual Studio’da geçerli olacak. Dolayısıyla projeyi takım arkadaşınız kendi bilgisayarında açtığı zaman veya farklı senaryolarda proje farklı bir Visual Studio ortamında açıldığı zaman, Task List sizin oluşturduğunuz keyword ile yazdığınız commentlere ulaşamayacak. Ne yazık ki bu problemi aşmanın en sistematik yolu da Visual Studio ayarlarını export ederek diğer Visual Studio’ya taşımak.


Görüşmek üzere, takipte kalın!

Visual Studio 2013 HTML Editöründe Design ve Split View Butonlarını Açmak

3. Nisan 2014 09:00by Garen Yöndem

Visual Studio 2013 kullanmaya başladıysanız ve web geliştirme projeleriyle uğraşıyorsanız HTML editöründeki değişiklikleri takip etmişsinizdir. Genel olarak değişiklikleri AngularJS desteği ve isimlerinin başları aria, data gibi olan pek çok property’nin intellisense’de gruplanması olarak özetlemek mümkün. Fakat pek çok kişinin sık sık kullandığı Design ve Code view arasında hızlı geçiş yapmanızı sağlayan butonların arayüzden default olarak kaldırılmış olması gibi ufak düzenlemeler de mevcut.


Dolayısıyla benim gibi pek çoğunuz da Visual Studio 2013’ü ilk açtığında bu şoku yaşamışsınızdır. Ancak telaşlanmanıza gerek yok çünkü daha önce de bahsettiğimiz gibi, bu durum Visual Studio 2013’deki çalışma alanınızın default (fabrika) ayarlarının değişmiş olmasından kaynaklanıyor.


İlk olarak projenizdeki herhangi bir HTML dosyasına sağ tıklayarak açılan menüden "Open With…" penceresini açmalısınız.


Visual Studio 2013 HTML Editöründe Design ve Split View Butonlarını Açmak - garen.yondem.com


Daha sonra HTML (Web Forms) Editörünü HTML dosyalarınız için varsayılan editörünüz olarak belirleyerek, çalışma alanınıza Design ve Split view butonlarını geri getirebilirsiniz.


Visual Studio 2013 HTML Editöründe Design ve Split View Butonlarını Açmak - garen.yondem.com


Böylece benim gibi siz de tasarım ve kod görünümü arasında sık sık geçiş yapanlardansanız, kendinize Visual Studio 2013’te de alışmış olduğunuz Visual Studio 2012 çalışma ortamını oluşturmuş olacaksınız.


Görüşmek üzere!

Windows Phone Simulation Dashboard

25. Temmuz 2013 10:00by Garen Yöndem

Simulation Dashboard’dan bahsetmeye başlamadan önce simülatör ve emülatör arasındaki farka kısaca göz atalım. Gerçek hayat koşullarını sanal ortamda canlandıran araçlara simülatör deniyor. Emülatörler ise kendi kaynaklarını kullanarak farklı sistemleri taklit eden araçlardır. Örnek olarak Windows Phone Emulator’ın çalışma şeklini ele alalım. Visual Studio’da uygulamanızı debug ettiğinizde Hyper-V ile bilgisayarınızın donanımını yansıtarak sanal bir makine oluşturur ve Windows Phone arayüzünü taklit eder. Sonuç olarak emülatör arka planda bilgisayarınızla aynı işlem gücüne sahip olmuş olur. (Simülatörler hiçbir zaman yalancılık yapmaz :) )


Windows Phone Emulator arayüzünden ulaşılamadığı için pek çok Windows Phone developer’ın Simulation Dashboard’dan ne yazık ki haberi yok. Simulation Dashboard’a Tools sekmesinden veya Quick Launch bar’dan ulaşabilirsiniz.


Windows Phone Simulation Dashboard Context Menu - garen.yondem.com

Windows Phone 8 SDK’in parçası olarak kurulan bu yeni araç şimdilik sadece üç özellik sunuyor. Ağ bağlantısı simülasyonu (Network Simulation), cihazın ekranını kilitleme (Lock Screen) ve takvim anımsatıcısı tetikleme (Reminders). Umarım gelecek SDK güncellemelerinde donanımsal simülasyonlar da eklenir.


Windows Phone Simulation Dashboard - garen.yondem.com

Network Simulation

Network Simulation özelliği ile emülatörün bağlantı hızı ve kalitesini simüle edebilir, uygulamanızın düşük bağlantı veya sinyal koşullarındaki performansını gözlemleyebilirsiniz. Özellikle uygulamanızın interneti kullandığı anlarda yaşanan bağlantı kopukluklarını simüle etmek ve sonuçlarını görme için faydalı olacaktır.


Lock Screen

Windows Phone cihazlarda ekran kilitlendiğinde işletim sistemi uyku moduna geçiyor. Eğer siz uygulamanızın arka planda çalışır halde kalması için kod kısmında gereken ayarları yapmadıysanız ekran kilidi tekrar açılana kadar uygulamanız deaktif durumda bekleyecektir. Bu ani deaktivasyon ve aktivasyon durumuna uygulamanızın nasıl tepki vereceğini görmek için Lock Screen simülasyonunu kullanabilirisiniz.


Windows Phone Simulation Dashboard Simulated Reminder - garen.yondem.com

Reminders

Simulation Dashboard’un sunduğu diğer önemli özellik ise anımsatıcı (Reminder) tetikleyebiliyor olmanız. Uygulamanızın deaktive olmasına yol açan tek sebep cihazın ekranın kilitlenmesi değil. Alarm, Reminder ve gelen telefon araması gibi durumlarda da uygulamanız kısmen deaktive oluyor. Bu tip senaryoları da emülatörünüzde test edebilmeniz için Reminder tetikleme özelliği faydalı olacaktır.


Görüşmek üzere, takipte kalın!