Posts by "emre"

Angular 2 Development Environment (Çalışma Ortamı) Kurulumu

Angular 2 ile proje yapmaya başlamadan önce Development Environment yani çalışma ortamınızı kurmanız gerekmektedir. Angular 2′ yi javascript ile yazıyorsanız, bu kurulumlar çok sade şekilde bitiyor, lakin typescript ile yazıyorsanız, biraz ince ayar yapmamız ve typescript e bağlı konfigürasyon ve terimleri öğreneceğiz.

Not : “javascript ile yazıyorsanız” ne demek arkadaşım, angular zaten javascript framework’ ü değil mi ? diyorsanız, elbetteki js framework’ ü, fakat “typescript” ile de yazılıp javascript’ e dönüştürülebiliyor.

Kurulum rehberini 2 ye ayırdım, js ve typescript için, typescript ile yazanlar direk olarak typescript bölümüne geçsinler.

Önemli Açıklama : Aşağıdaki anlatımlarda nodejs kullanıldığını göreceksiniz. Typescript ile yazanlar için nodejs zorunlu, çünkü typescript kodunu javascript’ e çevireceğiz fakat direk javascript ile yazanlar için nodejs tam olarak şart değil, aşağıda kütüphaneleri nodejs’ in npm’ i ile yüklüyoruz fakat bu kütüphaneleri internetten bulup kendileri de elle ekleyebilirler. LAKİN, olay sadece kütüphaneleri elde etmek değil. Angular yazarken, nodejs ile yazılmış pek çok modül sizin yardımcınız olacaktır. Bu yüzden nodejs’ e ısınmanızı tavsiye ederim.

Angular 2′ yi javascript ile yazanlar için Development Environment (Çalışma Ortamı) Kurulumu;

  • Proje klasörünüze girin ve aşağıdaki dosyayı package.json ismiyle kaydedin.

  • Henüz bilgisayarınızda nodejs kurulu değilse, http://angulartr.com/node-js-kurulumu-nvm-ile/ adresinden kurun.
  • Proje klasörünüzün içindeyken aşağıdaki komutu, komut satırından uygulayarak, package.json içinde belirtmiş olduğumuz (dependencies) kütüphaneleri yükleyin.
  • Yüklemeler tamamlandıktan sonra, index.html adından bir dosya açın ve içeriği aşağıda verdiğim örnekten doldurun. Doldurun diyorum çünkü siz bu işlemi yaparken javascript dosyalarının ismi değişmiş olabilir. Kendinize göre düzenlersiniz.

  • app.component.js ve main.js dosyaları sizde şuan bulunmuyor, bunları projenizi yazmaya başlarken oluşturacaksınız, fakat ben şimdiden size gösteriyorum ki , bu dosyaları oluşturduğunuzda koymanız gereken yerin kütüphanelerden sonra olduğunu farkedesiniz.
  • Tebrikler işlemler tamam.

 

Angular 2′ yi typescript ile yazanlar için Development Environment (Çalışma Ortamı) Kurulumu;

  • Proje klasörünüze girin ve aşağıdaki dosyayı tsconfig.json ismiyle kaydedin.

Dosya isminden de anlaşılacağı üzere “typescript” için konfigürasyonlar yapıyoruz. Bu konfigürasyonlara başka bir konuda uzunca değineceğiz, fakat compilerOptions objesinin target’ inin es5 olduğuna dikkat çekerim, bu şu demek, kodumuz “typescript” ten javascript’ e compile olurken, es5 syntax’ ına yani tarayıcıların bugün resmi olarak desteklediği javascript versiyonuna compile olacak. Bu sayede angular 2 projemiz, tarayıcımızda çalışabilir olacak. Diğer ayarlarda çok önemli fakat ileride değineceğiz.

  • typings.json isminde bir dosya açın ve içine aşağıdakileri ekleyin

Bu dosyaya da ileriki konularda değineceğiz.

  • package.json adında bir dosya oluşturun ve içine aşağıdakileri ekleyin

Bu dosya çok önemli bir dosya, dependencies kısmı zaten klasik, ihtiyacımız olan kütüphaneleri yükleyecek. scripts kısmı ise bizim elimiz kolumuz olacak. package.json dosyası bir npm dosyasıdır. “npm komutIsmi” ni komut satırına yazdığımızda, scripts objesinin değerlerine bakar ve uygular. Şimdi tek tek açıklayalım;

  • “npm start” komutu; ilk olarak tsc komutunu uygular ve “typescript” ile yazdığımız kodumuzu javascript’ e çevirir. Tabi kafasına göre çevirmez!!!!! Yukarıda tsconfig.json dosyasında verdiğimiz konfigürasyona göre çevirir. Bu kısımda es5 olarak seçtiğimize dikkat çekmiştik !!!! Ardından tsc komutunu “w” parametresi ile tekrar çalıştırır. “w” parametresi nedir ? w yani watch kelimesinin kısaltması. bu parametre ile, typescript ile yazdığımız tüm dosyalar tsconfig.json dosyasında exclude edilmişler hariç, sürekli izlenir ve herhangi bir değişiklikte anında javascript e compile olur. ve bu işlemlere paralel olarak “npm run lite” komutu sayesinde de, ufak çapta bir server çalıştırılmış olur ki bu server üzerinden projemizi izleyeceğiz. lite-server nasıl bişey derseniz https://www.npmjs.com/package/lite-server adresinden inceleyebilirsiniz.
  • Şimdi “npm install” komutunu uygulayın ve package.json dosyasında belirleşmiş olduğumuz kurulumlar gerçekleşsin. Bu sırada komut satırında kırmızı renkli hatalar alırsanız çok önemsemeyin. Ben demiyorum bunu https://angular.io/docs/ts/latest/quickstart.html#!#npm-errors-and-warnings adresinde Google diyor.
  • Artık geliştirme ortamımız hazır.
  • Tebrikler.

Neden Unit Test Yazılmalı ?

Yazılım geliştirirken pek çoğumuzun başına gelmiştir, üzerinde saatler hatta günler harcadığınız bir geliştirmeyi test ederken hiç umulmadık yerlerden hata verdiğini ve bir hatayı düzeltirken, başka bir noktanın bozulduğuna tanıklık etmişsinizdir. Bu hataları düzeltmek için harcadığınız zaman sizin için tamamiyle zarar olabilir. Hatta, hatalı yazdığınız bir kod parçasına bağlı çalışan bir başka kod parçasıda doğal olarak hatalı kurgu üzerine kurulmuş olabilir. Bu yüzden, kodumuzun her bir birimini yani unit’ ini tek tek test edebilir olmalıyız ki, her adımda sağlam temeller üzerine kod yazabilelim. Continue reading

PM2 ile kolayca NodeJS Cluster Yapısı Kurmak

Herkesin bildiği üzere NodeJS, Google Chrome’ un JavaScript runtime‘ ı üzerinde kurulmuş bir platformdur. V8 Engine, dolayısıyla NodeJS Single Thread çalışmaktadır. Bu sebeple multi-core sistemlerinizin kapasitesini kullanamamaktasınız. Çok çekirdekli bir sunucuya sahip olup, çalıştırdığınız NodeJS uygulamasının neden sunucunuzun tüm işlemci gücünü kullanamadığına da bu sayede cevap vermiş oluyoruz.  Continue reading

PushCrew ile sitenize Chrome push notifications ekleyin

Chrome push notifications henüz yeni yeni kullanılmaya başlanmış bir özellik. Fakat hemen servis haline gelmiş. https://pushcrew.com/ adlı girişim, bu özelliği size servis olarak veriyor ve 1 dakikayı aşmayan bir sürede, sitenize entegre edebiliyorsunuz. Bu iş nasıl oluyor ??? diyenler https://apidemo.pushcrew.com/ adresine girin, tarayıcınız tam ekran modunda olmasın ! Trigger Opt-in butonuna basın ve sizden istenen izinlerin hepsini ÇEKİNMEDEN ! onaylayın. Ardından en alttaki mesaj kutusundaki title ve mesaj değerlerini istediğiniz gibi değiştirip Send Notification butona basın ve izleyin. Ekranın sağ üst köşesinde, aşağıdaki gibi bir notification belirecek. Continue reading

Angular 2 ve React Kapışması

Dikkat : Single Page Application yada AngularJS konusunda herhangi bir fikriniz yoksa, öncelikle http://angulartr.com/angularjs-nedir/ konusunu incelemenizi tavsiye ederim.

Angular JS ve React her ikiside open source projelerdir. AngularJS bir Framework, React ise kütüphanedir. Her iki ile de Single Page Application yapılabilmektedir. 2015 yılı, hem Angular JS hemde React için adeta parlama yılı oldu. 6 yaşındaki AngularJS artık büyük projelerde güvenle kullanılmaya başlandı. Standart haline gelmeye başladı ve 6 yılın tecrübesi ile 2.versiyonu hazırlandı. Şuan beta versiyonunda. http://angulartr.com/angular-2-beta-versiyonu-yayinlandi-buyuk-degisiklikler-yapildi/ adresinden detayları alabilirsiniz. Continue reading