26 Ağustos 2018 Pazar

Cluj ve Untold Festival Gezi Notları

Uzunca bir süredir bir paylaşım yapmadığımı fark ettim ve birkaç hafta önce yapmış olduğum Romanya seyahati ile ilgili bir şeyler yazmanın güzel bir başlangıç olacağını düşündüm.

Hatırı sayılır bir elektronik müzik festivali olan Untold Festival, 2-5 Ağustos 2018 tarihleri arasında dördüncü kez Romanya'nın Cluj şehrinde düzenlendi. Daha önce Creamfields, Ultra, Global Gathering, Amsterdam Music Festival gibi pek çok elektronik müzik festivalinde bulundum ve Untold'un bir videosu ile karşılaşınca bu festivale de katılmanın çok faklı bir deneyim olacağını düşündüm. Ağustos seyahati için planlarımı daha Nisan ayında tamamlamıştım: festival bileti, uçak bileti, kalacak yer vs. Bu arada İstanbul'dan Cluj'a gidecek iseniz; bir tek Atatürk Havalimanından ve THY seferleri bulunmaktadır.

Gelelim seyahat detaylarına. Cluj'a iniş yaptıktan sonra taksi ile kalacağımız Hotel Stil'e geçtik. Gideceğiniz yere taksi ile gitmekten çekinmeyin. Cluj'da taksi fiyatları oldukça uygun ve taksicilerin kazıklamak gibi bir niyeti yok. 40 RON(yaklaşık 60 TL)'a otele getirdi bizi taksici. Bu arada RON(Romanya Lei)'un TRY ile geçmiş paritesini karşılaştırdığımda şöyle bir tablo çıktı: şu anda 1 RON = 1.25 TL iken 2017'de 1 RON = 0.75 TL imiş. Son bir yıla ait bu karşılaştırma TL'nin yalnızca USD, EUR, GBP gibi para birimlerine karşı değil, globalde ne kadar değer kaybettiğinin bir göstergesi. Her şeye rağmen Romanya'da seyahat ucuza geliyor. Herhangi bir batı ülkesinde yapacağınız seyahatten çok daha rahat yiyip içebiliyorsunuz. Cluj Transilvanya bölgesinde yer alan bir şehir. Genç ve öğrenci nüfusu fazla. Yerel halkı çok iyi olmasa da size yardımcı olabilecek kadar İngilizce biliyor. Beklentimin üzerinde bir İngilizce seviyesi ile karşılaştım açıkçası. Cluj halkı ise gerçekten çok yardımsever ve iyi insanlar. Gitmeden önce biraz çekiniyordum doğrusu; kaba saba muamelelerle karşılaşabilir, hırsızlık vakaları olabilir veya kazıklanma gibi ihtimalleri düşünüyordum. Ancak oraya ayak bastıktan sonra ve zaman geçtikçe bu tedirginliğin yersiz olduğunu anladım. Yerel halk o kadar sevecen ve yardımsever ki çok şaşırdım doğrusu. Harika beş gün geçirdik diyebilirim.

Untold 4 gün sürdü. 9 farklı sahnede yaklaşık 250 farklı DJ ve grup çaldı. Her türden elektronik müzik türünü dinleme fırsatınız oluyor. Tek kelime ile mükemmeldi. Her açıdan: organizasyon, dj'ler, festival alanı, temizlik, görevliler, yeme içme... Piyasada en çok bilinen Tomorrowland'e çok sağlam bir rakip olacaktır, eminim. Festivalde her şey en ince ayrıntısına kadar çok iyi düşünülmüştü. On binlerce kişinin katıldığı böyle bir festivalde dört gün bu kaliteyi koruyabilmek büyük iş gerçekten.


Bir günümüzün öğlen birkaç saatini de Cluj'den yaklaşık 35 km uzaklıkta bulunan Turda tuz madeninde(Salina Turda) geçirdik. Cluj merkezden 100-120 RON civarı bir fiyatla taksi ile gidebilirsiniz. Giderken biz minibüs ve Turda'dan da taksi kullandık ama toplu taşıma oldukça karışık ve sıkıntılı gerçekten. Gitmeyi düşünürseniz taksiyi kullanmanızı öneririm. Salina Turda, şu anda aktif olarak çalışmayan, dünyanın en eski tuz madenlerinden. Duvarlarında tuzların oluşturduğu desenler çok güzel gerçekten. Ayrıca içerisi bayağı soğuk, 10 derecenin altında. Gidecek olanlar yanına muhakkak uzun kollu bir şey alsın. Özetle; Salina Turda'yı beğendim ama ulaşım sırasında çektiğim çile, yaptığımız harcamalar ve beklentilerime değdi mi diye sorarsanız; hayır :)

Cluj seyahatime dâir anlatacaklarım özetle bu kadar. Söylenebilecek daha çok şey var ama kesinlikle fırsatınız olursa sizin de gidip bu güzel şehri ziyaret etmenizi öneririm. Hele ki elektronik müzik seviyorsanız, Untold'u şiddetle tavsiye ediyorum, emin olun pişman olmayacaksınız.

30 Aralık 2014 Salı

AngularJS - i18n

Hazırlayacağımız web uygulamasında yerelleştirme sıkça istenen özelliklerden biridir. Metin tercümesi, tarih, zaman, para birimi vs. bunlardan bazılarıdır. Ben bu girdide metin tercümesinin nasıl yapılacağından bahsedeceğim.
Angular'da bu işi yapmak için ben angular-translate'i öneririm. Kullanımı oldukça basit. Aşağıda yer alan örnekte de uygulamanızda nasıl kullanabileceğinizden kısaca bahsedeceğim.
Burada .js ve html kodunun sadece bir kısmına değineceğim. Uygulama üzerinde buradan çalışabilirsiniz.

script.js

  • angular-translate script'ini html'imize ekledikten sonra,istenen metinlerin tercüme edilebilmesi için 'pascalprecht.translate' şeklinde modülümüze bağımlılık olarak ekliyoruz.
  • i18nApp.config(['$translateProvider', şeklinde $translateProvider'i config fonksiyonuna inject ediyoruz.
  • $translateProvider.translations şeklinde ise; her bir dile karşılık gelecek metinleri key: value çifleri şeklinde tanımlıyoruz. Dikkat edecek olursak: 'nav.button.home' text key'i 'en' için 'Home' value olarak tanımlanmışken; 'tr' için 'Anasayfa' şeklinde tanımlanmıştır.
  • $translateProvider.use("en"); şeklinde ise öntanımlı dil olarak 'en' kullanacağını belirtiyoruz. Mevcut kullanılan dili öğrenmek için ise $translateProvider.use(); şeklinde bir çağırım yeterli olacaktı.

app.html

  • {{languageOption.text | translate}} Tercüme için dikkat edilecek olan nokta burası. Bind ettiğimiz $scope değişkeninin yanına | translate şeklinde bir ekleme yapılarak ilgili metnin tercüme edilebilir olduğunu belirtiyoruz
1. http://angular-translate.github.io/

25 Aralık 2014 Perşembe

Hata: npm ERR! peerinvalid The package yo does not satisfy its siblings' peerDependencies

npm(Node package manager) ile generator-angular modülünü kurmak istediğimde "npm ERR! peerinvalid The package yo does not satisfy its siblings' peerDependencies" içeren bir hata mesajı alıyor iseniz; izlememiz gereken adımlar:

1: Remove Yeoman

$ npm uninstall -g yo

2: Clear NPM Cache

$ npm cache clean

3: Upgrade NPM to latest version

$ npm install -g npm

4: Install Yeoman

$ npm install -g yo

5: Install Angular generator

$ npm install -g generator-angular

Referans: http://stackoverflow.com/questions/25618226/cant-install-yeoman-on-windows-8-npm-err-peerinvalid-the-package-yo-does-not

19 Kasım 2014 Çarşamba

AngularJS - Factory, Service ve Provider

Tıpkı benim gibi AngularJS'e yeni başlayanlar için belki de en çok kafa karışıklığına neden olan konulardan birisi; Factory, Service ve Provider'dir. Bunların tam olarak ne işe yaradığı, hangi durumlarda ve nasıl kullanıldığı, kısıtlamaları vs. oldukça karışık görünür. Anladığım kadarıyla burada toparlamaya çalışacağım.
AngularJS'de sayfa yenilendiğinde veya yönlendirme yapıldığında controller'ların içeriği silinir. Bu nedenle, uygulama genelinde kullanılacak nesnelere erişimi mümkün kılmak için Service'ler kullanılır. Angular'da Service oluşturulması ve kaydedilmesi 3 yolla gerçekleştirilebilir.

1. Factory
Syntax: module.factory( 'factoryName', functionName );
factoryName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın çağırımındaki değer geri döndürülür.
2. Service
Syntax: module.service( 'serviceName', functionName );
serviceName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait bir instance geri döndürülür. new functionName() diyebiliriz.
3. Provider
Syntax: module.provider( 'providerName', functionName );
providerName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın $get methodunun çağırımındaki değer geri döndürülür.
Provider, Service ve Factory'e göre daha karışık görünmesine rağmen onlardan çok daha fazla avantajı vardır. Uygulama henüz başlamadığında, module configuration yapıldığı esnâda Provider'lar kullanılabilir. Aslında Angular Provider'ı tanımakta, Factory ve Service ise Provider'ı sadece miras almaktadır.

Aşağıda bu konuda basit bir örnek bulunmaktadır. Ben .js kodu üzerinde duracağım. Örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

Yukarıdaki örnekte ilk olarak MyFunc isminde bir constructor fonksiyonu tanımlanıyor. Öntanımlı olarak fonksiyon içerisinde name değişkenine 'Factory' atanıyor. $get fonksiyonunda ise 'Provider' atanıyor. Constructor fonksiyonuna ve $get fonksiyonuna girişte console'a log yazdırılıyor. Aşağıdaki ekran görüntüsünden de görüleceği üzere; Provider kullanımında, constructor çağırımından sonra çağırılan $get() fonksiyonunda işlem yapılıyor. Yukarıda bahsettiğim gibi; bu fonksiyon configuration safhasında çağırıldığı için sadece Provider kullanımında bu log basılıyor.
Daha sonra myService, myFactory ve myProvider isminde service, factory ve provider oluşturuluyor.
myModule.controller('myController', [ '$scope', 'myService', 'myFactory', 'myProvider', function($scope, myService, myFactory, myProvider)... kullanımında ise; service, factory ve provider myController oluşturulurken inject ediliyor.

Not: Şu ana kadar paylaştığım Angular uygulamaların tamamına da buradan erişebilirsiniz.

Referanslar

13 Kasım 2014 Perşembe

AngularJS Bootcamp

VNGRS'in düzenlediği AngularJS Bootcamp etkinliği, 22-23 Kasım'da YTÜ Beşiktaş Yerleşkesi, Oditoryum'da yapılacaktır. AngularJS meraklısı iseniz; tam 2 gün boyunca, temelden ileri seviyeye kadar pek çok eğitimin verileceği bu etkinliği kaçırmamanızı öneririm.
Katılmayı düşünürseniz etkinlik sayfasından ücretsiz kaydınızı gerçekleştirebilirsiniz.

AngularJS - $http.get(*.json) parsing error

Harici bir Json dosyasını $scope verisi olarak olarak kullanmak istediğinizde; Developer Console'da SyntaxError: Unexpected token e at Object.parse (native) şeklinde bir hata alıyorsanız, bunun sebebi Json içeriğinin Angular'ın parse edebileceği şekilde düzenlenmemiş olmamasıdır.

Hata görüntüsü aşağıdaki gibidir:


Hatalı Json içeriğinin aşağıdaki şekilde olduğunu varsayalım:
 teams = [ {
"name": "Barcelona",
"country": "Spain",
"teamUrl": "http://tr.wikipedia.org/wiki/FC_Barcelona",
"flagUrl": "http://cd1.dibujos.net/dibujos/pintados/201237/escudo-del-f.c.-barcelona-deportes-escudos-de-futbol-pintado-por-martinb-9769813.jpg",
fanCount: 36619000
}];
Hatanın olası sebepleri şunlardır:

  1. Object dizisi bir değişkene atanmamalıdır. Yani teams = ... olmamalıdır.
  2. Object attribute isimleri ve değerleri " arasına alınmalıdır. Yani fanCount: 36619000 yerine "fanCount": "36619000" olmalıdır.
  3. Dizi tanımlamasından sonra ; kullanılmamalıdır.
Yukarıdaki hatalı json içeriğinin düzeltilmiş hâli şu şekildedir:
 [{
"name": "Barcelona",
"country": "Spain",
"teamUrl": "http://tr.wikipedia.org/wiki/FC_Barcelona",
"flagUrl": "http://cd1.dibujos.net/dibujos/pintados/201237/escudo-del-f.c.-barcelona-deportes-escudos-de-futbol-pintado-por-martinb-9769813.jpg",
"fanCount": "36619000"
}]

12 Kasım 2014 Çarşamba

AngularJS - Filters

Bu yazıda, Angular'da sıkça kullanılan filtreleme bileşenlerinden bahsedeceğim. Bununla birlikte, Angular directive'leri içerisinde expression kullanımı ve harici bir dosyanın da scope verisi olarak kullanımı da örnek uygulamada yer alan konulardır.
Filtreleme bileşeşenleri,verinin istenilen şekilde kullanıcıya görüntülenmesi için kullanılan elemanlardır. Angular'da sıkça kullanılan filter'lara "orderBy" ve "filter"ı örnek verebiliriz. Mevcut filter component listesine ve ayrıntılı açıklamalarına [1]'den göz atabilirsiniz.
Filter'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.
Ben daha çok HTML kodu üzerinde duracağım. Ayrıntılı olarak yukarıdaki bağlantıdan göz atabilirsiniz.

var module1 = angular.module('module1',[]);

module1.controller('controller1',function($scope, $http){
 $http.get('teams.json').success(function(data){
  $scope.teams = data;
 });
 
 $scope.sortBy = 'fanCount';
 $scope.reverse = true;
});

Yukarıdaki Javascript kodunda module1 isminde bir module, onun üzerinde controller1 isminde bir controller ve bu controller scope'unda da teams isminde bir değişken oluşturuluyor. teams içeriği ise, teams.json dosyasındaki veri ile dolduruluyor.
Ayrıca sıralamanın neye göre yapılacağını belirten sortBy ve artan/azalan şekilde sıralanacağını belirten reverse isminde değişkenler de $scope'da tanımlanıyor.

<html ng-app="module1">




AngularJS Filters Example


 
Team Flag Country Fans Page
{{team.name}} {{team.country}} {{team.fanCount | number}} Details
</html>
İlk olarak üzerinde durmak istediğim konu: Angular .js'inin kaynağı olarak
cdnjs üzerinde bulunan sürümü kullanılıyor. cdnjs, üzerinde popüler tüm javascript kütüphanelerini barından bir cdn(Content Delivery Network) hizmetidir.
ng-controller="controller1": html'deki bu element'in içerisindeki tüm elementler için, ilgili .js'de oluşturulan controller1 isimli controller'ın kullanılacağı anlamına geliyor.
ng-model="searchText": filtreleme için kullanılacak elementler'den biri olan text field için controller scope'unda bir bir model oluşturuyor. Kısaca bu text field searchText olarak ifade ediliyor ve erişim bu isimle yapılacak.
ng-repeat="team in teams | filter:searchText: gösterilen veriler searchText değerine göre filtrelenerek gösterilecektir.
| orderBy:sortBy:reverse: filtrelenmiş veriler $scope'da tanımlanan sortBy'a göre sıralanacaktır. Bu değerler ilgili .json dosyasındaki object attribute isimleri olabilmektedir. reverse ise orderBy filter'ına gönderilecek ikinci parameterdir(true|false) ve sıralamanın artan veya azalan olduğunu belirtmek için kullanılır.
ng-click="sortBy='name'; reverse=!reverse": burada javascript expression'larının da Angular directive'leri içerisinde kullanılabildiği görülmektedir. İlgili element'e tıklandığında $scope üzerindeki sortBy parameresi set ediliyor ve yukarıda bahsettiğim gibi sıralama bu attribute'a göre yapılıyor. Buna ek olarak; reverse attribute'u bir önceki state'inin tersi şeklinde set ediliyor ve artan/azalan sıralama bu şekilde belirleniyor. Angular expression'lar ile ilgili detaylı bilgiye [2]'den ulaşabilirsiniz.

Referanslar