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

Arşiv

Etiketlenen yazılar npm

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.


npm, yeoman, nuget, bower, grunt Nedir?

26 September 2016 1 yorum

Uzun süredir sıklıkla duyduğum, npm nedir? grunt nedir? nuget ile bower arasında ne fark var? yeoman’a neden ihtiyaç duyarız? sorularını aşağıdaki video ile cevaplamaya çalıştım.

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

SASS (scss dosyaları) nedir?

03 February 2016 Yorum yapılmamış

Web tabanlı uygulamalarda html sayfalarını göze daha hoş gözükür hale getirmek ve kullanılabilirliği artırmak için css stillerini kullanırız.

Web tabanlı uygulama geliştirirken genelde uygulamaya özel renkler, fontlar, görseller, vs kullanırız. Bu renkleri, fontları, görselleri, vs css dosyalarının içerisinde sürekli kullanmamız gerekir.

Örneğin, uygulamamızda linklerin kırmızı gözükmesini istiyorsak css dosyasına uygun stili yazarız, butonların da kırmızı gözükmesi gerekirse, css dosyasına yeni bir stil ekleyerek gene kırmızı rengi kullanmamız gerekir.

Yukarıdaki örnekten devam edecek olursak, kırmızı renk ve tonları css dosyalarında belki onlarca defa kullanılmış olacak.

Eğer uygulamanın kırmızı değil, mavi tema ile gözükmesini istersek css dosyalarını açıp, kırmızı renk kodlarını mavi ile değiştirmemiz, kırmızı rengin tonlarına karşılık gelen mavi tonlarını bulup css dosyalarındaki stilleri güncellememiz gerekecek.

Eğer css dosyasının başında değişkenler, fonksiyonlar tanımlayabilseydik ve stillerde bu değişkenleri, fonksiyonları kullanabilseydik, değişiklikleri çok daha kolay yapabilecektik.

SASS ve LESS, tam olarak bu sorunu çözmeye çalışıyorlar.

Bu makalede SASS‘ın nasıl çalıştığını inceleyeceğiz, hemen örnek projemizi oluşturmak istediğimiz dizini Visual Studio Code ile açıyoruz ve içerisinde index.html ve package.json dosyalarını oluşturuyoruz;

index.html dosyasının içeriği;

<html>
	<head>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<header>
			<h1>Örnekler ile SASS</h1>
		</header>
		<article>
			<p>Bu örnekte SASS'ın nasıl kullanıldığını inceliyoruz</p>
		</article>
	</body>
</html>

package.json dosyasının içeriği;

{
	"name": "polatengin-sass-ornek",
	"description": "SASS Örnek Projesi",
	"version": "1.0.0",
	"private": true
}

Eğer daha önce kurulumunu yapmadıysak node-sass paketini npm üzerinden kurmamız gerekiyor. Eğer aşağıdaki komutu daha önce çalıştırdıysanız, tekrar çalıştırmaya gerek yok.

npm install -g node-sass

package.json dosyasına eklenebilecek scripts bölümü ile npm aracının birden fazla komutu, parametreleri ile birlikte bir defada çalıştırmasını sağlayabiliriz, aşağıdaki scripts parçasını ekleyelim;

"scripts": {
	"build-sass": "node-sass --include-path scss scss/main.scss css/style.css"
}

Böylece npm run build-sass komutunu çalıştırabileceğiz ve node-sass bizim için scss/main.scss dosyasını derleyip, css/style.css adı ile kaydedecek. Denemek için hemen Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki kodu çalıştıralım;

npm run build-sass

Projemizin olduğu dizinde css dizininin oluşturulduğunu ve içerisine style.css dosyasının eklendiğini görebiliriz, henüz scss/main.scss dosyası boş olduğu için css/style.css dosyasının içerisi de boş.

html dosyasını tarayıcıda açıp içeriğini görebilmek için bir web server‘a ihtiyacımız olacaktır, eğer bilgisayarınıza daha önce bir web server kurmadıysanız, npm üzerinden http-server web server‘ını kurabiliriz;

npm install -g http-server

Eğer daha önce yukarıdaki kodu çalıştırdıysanız, tekrar çalıştırmanıza gerek yok.

Artık aşağıdaki komutu çalıştırarak http-server web server‘ını çalıştırabiliriz;

http-server

İstediğimiz tarayıcıyı açarak http://localhost:8080 adresine gidersek, aşağıdaki ekranı görmemiz lazım;

index.html dosyasında css/style.css dosyasını link elementi ile eklediğimiz için şu anda scss/main.scss dosyasına SASS kodlarını yazmaya başlayabiliriz.

scss/main.scss dosyasını açalım ve değişkenlerimizi tanımlayalım;

$arkaplan: #03a9f4;
$yazi: #9c27b0;
$yazi-tipi: "Helvetica";

Değişkenlerimizin isimlerini $ işareti ile başlatıyoruz, böylece SASS derleyici css dosyasını oluşturacağı zaman, $ işareti ile başlayan isimlerin değişken olduğunu anlayabiliyor. Değişkenleri kullanmak için main.scss dosyasına aşağıdaki kodları ekleyelim;

body {
	background-color: $arkaplan;
}
header {
	color: $yazi;
	font-family: $yazi-tipi;
	margin-left: 10px;
}
article {
	color: $yazi;
	font-family: $yazi-tipi;
	padding: 15px;
}

Böylece body elementinin background-color özelliği $arkaplan değişkeninin değerine, header elementinin color özelliği $yazi değişkeninin değerine, font-family özelliği $yazi-tipi değişkeninin değerine, margin-left özelliği sabit 15px değerine, article elementinin color özelliği $yazi değişkeninin değerine, font-family özelliği $yazi-tipi değişkeninin değerine, padding özelliği sabit 15px değerine sahip olacak.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	font-family: "Helvetica";
	padding: 15px;
}

SASS dosyalarında öntanımlı bazı fonksiyonları da kullanabiliriz, örneğin yukarıdaki örnekte yeralan article elementinin arkaplan renginin sayfanın arkaplan renginden biraz daha açık bir renge sahip olmasını istiyorsak, article elementinin stil‘ine aşağıdaki kodu ekleyebiliriz;

background-color: lighten($arkaplan, 15%);

Böylece article elementinin background-color özelliği, $arkaplan değişkeninin değerinin %15 daha açık rengine sahip olacak. lighten() fonksiyonu ilk parametresinde renk değerini, ikinci parametresinde açık hale getirme miktarını alır.

Benzer şekilde darken() fonksiyonu ilk parametresinde aldığı renk değerini ikinci parametresinde aldığı miktar kadar koyu hale getirebilir.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	background-color: #47c4fd;
	font-family: "Helvetica";
	padding: 15px;
}

Yukarıdaki scss/main.scss dosyasında hem header hem de article elementinin color ve font-family özelliklerinin olduğunu ve aynı değerlere sahip olduklarını görüyoruz. SASS dosyalarında tanımlayabileceğimiz @mixin değişkenleri sayesinde birden fazla stil özelliğine tek bir değişkende birleştirebilir, istediğimiz yerde @import tanımlaması ile kullanabiliriz;

@mixin renk-font {
	color: $yazi;
	font-family: $yazi-tipi;
}
header {
	@include renk-font;
	margin-left: 10px;
}
article {
	@include renk-font;
	background-color: lighten($arkaplan, 15%);
	padding: 15px;
}

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #9c27b0;
	font-family: "Helvetica";
	background-color: #47c4fd;
	padding: 15px;
}

Hatta, istersek @mixin değişkenlerinin parametre(ler) almasını da sağlayabiliriz;

@mixin renk-font($renk) {
	color: $renk;
	font-family: $yazi-tipi;
}

@include ile stillere eklediğimiz yerleri de aşağıdaki gibi değiştirelim;

header {
	@include renk-font($yazi);
	margin-left: 10px;
}
article {
	@include renk-font(darken($arkaplan, 15%));
	background-color: lighten($arkaplan, 15%);
	padding: 15px;
}

Böylece renk-font isimli @mixin değişkenimiz $renk parametresi ile aldığı renk bilgisini kullanacak. header elementinde $yazi değişkenini kullanıyoruz, article elementinde darken() methoduna $arkaplan değişkeninin değerini vererek oluşan rengi kullanıyoruz.

http-server web server‘ını kapatalım, önce SASS dosyasını css dosyasına dönüştürelim (derleyelim) ve http-server web server‘ını tekrar çalıştıralım;

npm run build-sass

http-server

css/style.css dosyasını açarsak, içerisinde aşağıdaki stillerin tanımlı olduğunu görebiliriz;

body {
	background-color: #03a9f4;
}
header {
	color: #9c27b0;
	font-family: "Helvetica";
	margin-left: 10px;
}
article {
	color: #0275a8;
	font-family: "Helvetica";
	background-color: #47c4fd;
	padding: 15px;
}

Asp.Net Core 1.0 ile web uygulama geliştirmeye başlamak

28 January 2016 7 yorum

Yeni adı ile Asp.Net Core 1.0 (eski adı Asp.Net 5) üzerinde geliştirdiğimiz web uygulamaları hem Windows hem MacOS işletim sisteminde hem de Linux işletim sisteminde çalıştırılabiliyor. Cross-Platform denilen bu tarz uygulamaları genelde cross-platform araçlar ile geliştiririz.

Microsoft, Asp.Net Core 1.0 ile web uygulamaları geliştirebilmemiz için ücretsiz olarak Visual Studio Code aracını da sağlıyor ve Visual Studio Code cross-platform çalışabilen bir uygulama geliştirme aracıdır.

Bu makale ile Visual Studio Code kullanarak Asp.Net Core 1.0 projeleri nasıl oluşturulur inceleyeceğiz ve ilk Merhaba Dünya uygulamamızı oluşturacağız.

Öncelikle Command Prompt (Windows) veya Terminal (MacOS, Linux) penceresi açıyoruz;

Projeyi oluşturmak istediğimiz dizine giderek komut satırına

yo aspnet

yazarak çalıştırıyoruz. Böylece Yeoman kullanarak Asp.Net Core 1.0 projesi oluşturacağız.

Eğer bilgisayarda Yeoman kurulu değilse yukarıdaki kod çalışmayacaktır. Öncelikle Command Prompt (Windows) veya Terminal (MacOS, Linux) penceresi içerisinde aşağıdaki kodu çalıştırarak yo aracını kurabilirsiniz;

npm install -g yo

Eğer bilgisayarda npm kurulu değilse, Node.js anasayfasından indirerek kurabilirsiniz.

Yeoman aspnet komutunu çalıştırırken bize ne tip bir proje oluşturmak istediğimizi sorar, listeden Empty Application seçeneğini seçebiliriz.

Yeoman çalışmaya devam ederken projemize vermek istediğimiz ismi sorar, bu makalede ben aspnetcoreornek ismini verdim;

Böylece Yeoman projeyi istediğimiz dizinde oluşturmuş oldu.

Komut satırında projenin dizinine giderek

dnu restore

komutunu çalıştırıyoruz. Böylece projedeki project.json dosyasında tanımlı olan paketler proje dizinine indiriliyor. Eğer bu komutu çalıştırmazsak, uygulamanın ihtiyaç duyduğu paketler eksik olacak ve uygulama çalışmayacak.

Proje kodlarını açmak için bir editöre ihtiyacımız var. Visual Studio Code cross-platform Asp.Net projeleri geliştirmek için gene cross-platform geliştirilmiş bir araç.

code .

komutunu çalıştırarak proje dizinini Visual Studio Code ile açıyoruz;

Visual Studio Code açıldığında soldaki panelde proje dizininde yeralan dosyalar listeleniyor.

project.json dosyası içerisine bakarsak, projenin çalışabilmek için ihtiyaç duyduğu paketlerin listesini görebiliriz.

Aynı şekilde Startup.cs dosyasını açacak olursak, gelen her request için yapılacak işleri görebiliriz. Empty Application projesi oluşturduğumuzdan gelen her request için geriye Hello World! döndürülüyor;

Projeyi bir tarayıcı içerisinde görmek istiyorsak projenin dizininde

dnx web

komutunu çalıştırmalıyız. Böylece http://localhost:5000 adresi üzerinde proje çalışmaya başlayacak.

Microsoft Edge, Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera, vs gibi bir tarayıcıyı açıp adres satırına http://localhost:5000 yazacak olursak Hello World! cevabının görüntülendiğini görebiliriz;

Aslında gelen her request için Hello World! sonucunu döndürdüğümüzden, http://localhost:5000 ile başlayan hangi adrese gidersek gidelim hep aynı Hello World! sonucunu göreceğiz;