02-getting-started.md.erb

---
title: Başlarken
slug: getting-started
date: 0002/01/01
number: 2
contents: >-
  Meteor Kurulumu. | Meteor paketlerinin 5 farklı tipini öğreniyoruz. | Meteor
  uygulamanızın dosya yapısını ayarlayalım.
paragraphs: 49
published: true
---

 İlk izlenimler her zaman çok önemlidir, ve Meteor'un kurulumu da nispeten sancısız olmalı. Çoğu durumda uygulamanın kurulumu ve ayağa kalkması 5 dakikadan daha kısa sürer.

 Meteor'a başlarken, eğer Mac OS veya Linux kullanıyorsanız terminal penceresini açın ve şunları yazın:

~~~bash
$ curl https://install.meteor.com | sh
~~~

Eğer Windows kullanıyorsanız, Meteor sitesindeki [kurulum rehberini](https://www.meteor.com/install) inceleyebilirsiniz.

Bu işlem sisteminize `meteor` çalıştırılabilir dosyasını kuracak ve kullanıma hazır hale getirecek.

<% note do %>

### Meteor'un Kurmadan

Eğer meteor'u lokale kuramıyorsan (ya da kurmak istemiyorsan) sana [Nitrous.io](http://nitrous.io)'a bir göz atmanı öneriyoruz.

Nitrous.io uygulamanı hızlıca ayağa kaldırabildiğin ve kodlarını tarayıcıda düzenleyebildiğin bir servistir, ve biz ayarlarını nasıl yapacağın hakkında sana yardımcı olabilecek [kısa bir açıklama](https://www.discovermeteor.com/blog/meteor-nitrous) hazırladık.

Bu rehberi ve "Meteor kurulumu" bölümünü takip ettikten sonra bu bölümdeki "Basit bir uygulama yaratmak" (“Creating a Simple App”) kısmına geçebilirsin.

<% end %>

### Basit bir uygulama yaratmak

Şu an meteor kurulumunu tamamladık, hadi bir uygulama yaratalım. Yapmamız gereken Meteor'un komut satırını kullanmak:

~~~bash
meteor create microscope
~~~

Bu komut meteoru indirecek ve basit kurulumunu hazırlayacak. Herşey tamamlandıktan sonra göreceğin dizin şu şekilde olmalı `microscope/` ve aşağıdaki dizinleri/dosyaları içermeli:

~~~bash
 .meteor
 client
 | main.css
 | main.html
 | main.js
 server
 | main.js
 .gitignore
 package.json
~~~

Meteor tarafından oluşturulan bu basit uygulama aslında size basit bir Meteor uygulamasının parçalarını gösteren bir boilerplate (örnek) uygulamadır.

Bu uygulamanın aslında çok bir özelliği olmasa da, çalıştırılabilir bir uygulamadır. Çalıştırmak için komut satırına gidip şunu yazabilirsiniz:

~~~bash
cd microscope
meteor
~~~

Şimdi tarayıcınızda `http://localhost:3000/` (ya da `http://0.0.0.0:3000/`) adresini açarak bu örnek uygulamayı test edebilirsiniz:

<%= screenshot "2-1", "Meteor'un Hello World uygulaması." %>

<%= commit "2-1", "Basit microscope projesi oluşturuldu." %>

Tebrikler! İlk Meteor uygulamanızı yaptınız. Bu arada, uygulamanızı durdurmak için komut satırında `ctrl+c` ye basabilirsiniz.

Eğer Git kullanıyorsanız, uygulamanızı repo ya sabitlemek için tam zamanı. Bunun için monut satırında `git init` yazmanız yeterli.

<% note do %>

### Güle güle Meteorite

Bir zamanlar Meteor projesi Meteorite isimli harici bir paket yöneticisi kullanıyordu. Meteor versiyon 0.9.0 dan beri, bu araç Meteor'un içine gömüldüğü için harici bir paket yöneticisine gerek kalmamıştır.

Eğer Meteor ile ilgili materyallere göz atarken Meteorite'nin `mrt` komut satırı aracı ile ilgili herhangi bir referansa rastlarsanız, bu komutu güvenli bir şekilde `meteor` komutu ile değiştirebilirsiniz.

<% end %>


### Paket ekleyelim

Şimdi Meteor'un paket yöneticisini kullanarak [Bootstrap](http://getbootstrap.com/) framework'ünü projemize ekleyeceğiz.

Aslında bu yapacağımız işlemin, paket yöneticisi kullanarak Bootstrap'i güncel tutmak dışında CSS ve JavaScript dosyalarını elle eklemekten çok ta farkı yok.

`bootstrap` paketi `twbs` kullanıcısı tarafından yaratılmıştır, dolayısı ile bu paketi kurabilmek için paketin tam adı (`kullanıcı_adı:paket_adı`) `twbs:bootstrap` tir.

~~~bash
meteor add twbs:bootstrap
~~~

Burada kullandığımız Bootstrap versiyon 3 tür, fakat bazı ekran görüntüleri eski versiyon Meteorite kullanılarak hazırlandığından Bootstrap versiyon 2 ye ait olup biraz farklı görünebilir.

Aynı zamanda daha sonra çok işimize yarayacak olan [Session](http://docs.meteor.com/#/full/session) paketini de ekleyeceğiz:
 
 ~~~bash
 meteor add session
 ~~~
 
 Session paketi ilk-parti Meteor paketi olmasına rağmen, yeni Meteor uygulamaları için default olarak geçerli kılınmamıştır, bunu manuel olarak yapmamız gerekir. 
 
Şimdi oluşturduğumuz projemizde hangi paketleri kullandığımızı öğrenmek için tam zamanı. Aşağıda görüldüğü gibi, biraz önce eklediğimiz pakete ek olarak, Meteor varsayılan birkaç paketle yüklü olarak geliyor. Bunları öğrenmek için `.meteor` dizinindeki `versions` dosyasının içeriğine bakalım:

```
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base             # Packages every Meteor app needs to have
mobile-experience       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
blaze-html-templates    # Compile .html files into Meteor Blaze views
reactive-var			# Tracker için Reactive değişkeni
session                 # Client-side reactive dictionary for your app
jquery                  # Helpful client-side library
tracker                 # Meteor's client-side reactive programming library

standard-minifier-css   # CSS minifier run for production mode
standard-minifier-js	# JS minifier run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.
ecmascript              # Enable ECMAScript2015+ syntax in app code

autopublish             # Publish all data to the clients (for prototyping)
insecure                # Allow all DB writes from clients (for prototyping)

session

twbs:bootstrap
```

Bu liste size biraz karmaşık gelebilir, fakat burada gördüğünüz tüm paketleri şimdilik gözardı edebilirsiniz. Sadece kendi eklediğimiz paket olan `twbs:bootstrap` in varlığını teyit etmemiz yeterli.

Ayrıca gördüğünüz gibi tüm paket isimleri `twbs:bootstrap` paketinde olduğu gibi kullanıcı ismini içermeyebiliyor. Bunun sebebi, bu paketlerin resmi Meteor paketleri olmasındandır.

<%= commit "2-2", "Bootstrap paketi eklendi" %>

Bootstrap paketini ekler eklemez basit uygulamamızın görünümünün değiştiğini farkedeceksiniz:

<%= screenshot "2-1b", "With Bootstrap." %>

Gördüğünüz gibi klasik yöntemle sayfamıza veya sayfalarımıza stil ve script dosyalarını elle eklemedik. Bu işi Meteor'un bizim yerimize kolayca yaptığını gördük. Bu, Meteor paketleri kullanmanın avantajlarından sadece biri.

### NPM Paketleri

Paketlerden bahsetmişken, repo muzda package.json dosyasını görmüşsünüzdür:

~~~js
 {
   "name": "microscope",
   "private": true,
   "scripts": {
     "start": "meteor run"
   },
   "dependencies": {
     "meteor-node-stubs": "~0.2.0"
   }
 }
 +~~~

Bu dosya NPM den indirilmesi gereken paketleri konuşlandırmak için kullanılır, aynen `.meteor/packages` dosyasının Meteor tarafından indirilmesi gereken paketleri konuşlandırması gibi. Aralarındaki en büyük fark, NPM in `package.json` dosyasını otomatik olarak işlememesidir. NPM için paket ekleyip çıkarırken bunu manuel olarak  yapmanız gerekir:

~~~bash
 npm install
~~~

<% note do %>

### Paketler konusunda bir not

Meteor paketlerinden bahsederken, Meteor'a özgü bazı önemli konuları ele almakta yarar var. Meteor beş farklı temel paket tipi kullanır:

- `meteor-base` paketi: **Meteor'un ana çekirdeğidir** ve Meteor uygulamaları bu paket olmadan çalışamaz.
- **İlk parti paketleri** Meteor'la birlikte gelirler. Bunlardan bazıları, `mongo` ve `session`, yeni uygulamarın içine varsayılan paketler olarak konulur, ancak ihtiyaç olmadığı durumlarda silinebilir. `check` ve `http` paketleri ise tam tersine mutlaka gereklidir.
- **Yerel paketler** uygulamanıza özeldir ve yerel dosya sisteminizde `/packages` dizininde bulunurlar.
- **Atmosphere paketleri** Meteor'un online paket reposu olan [Atmosphere](http://atmosphere.meteor.com) sisteminde yayınlanan özel isteğe bağlı üçüncü parti paketleridir. Bu paketlerin tümü `yaratıcı_adı:paket_adı` isimlendirmesi taşırlar.
- Son olarak, **NPM paketleri** Node.js paketleridir. Uygulamanızın paket listesine  dahil olamazlar, onun yerine uygulamanızın `package.json` dosyası içerisinde listelenirler.

<% end %>

### Meteor uygulamaları için dosya yapısı

Kod yazmaya başlamadan önce projemizi doğru bir şekilde oluşturmalıyız. Bundan dolayı temiz bir build e sahip olmak için `client` dizinindeki `main.html` ve `main.js` dosyalarını, `server` dizinindeki `main.js` dosyalarını silelim.

Sonraki adımda, `/microscope` dizini altında iki yeni dizin oluşturalım: `/public`  ve `/lib`.

Uygulamanız bu aşamada çalışmasa da sorun değil, bir sonraki bölümde bu dosyaların içini dolduracağız.

Biraz önce oluşturduğumuz dizinlerin bazılarının özel olduğunu söylememiz lazım. Sebebi, Meteor kodları çalışırken bazı kurallara uyar:

- `/server` dizinindeki kodlar sadece sunucu tarafında çalışır.
- `/client` dizinindeki kodlar sadece istemci tarafında çalışır.
- Diğer tüm kodlar hem sunucu hem de istemci tarafında çalışabilir.
- Statik dosyalarınız (font, resim, vb) `/public` dizininde bulunmalıdır.

Aynı zamanda şunu bilmelisiniz ki, kodlarınızın hangi sırayla yükleneceğine Meteor karar verir:

- `/lib` dizinindeki tüm dosyalar *herşeyden önce* yüklenir.
- `main.*` olarak isimlendirilen tüm dosyalar *herşeyden sonra* yüklenir.
- Diğer tüm dosyalar ise isimlerine göre alfabetik olarak yüklenirler.

Meteor tüm bu kurallara uymasına rağmen dosya sisteminizin nasıl olacağına karışmaz. Burada tavsiye edilen proje dosya yapısı tamamen bizim kullandığımız yöntemdir, kesinlikle uymak zorunda değilsiniz.

Dosya yapısı hakkında daha fazla bilgi için [resmi Meteor dökümantasyonuna](http://docs.meteor.com/#structuringyourapp) bakmanızı tavsiye ederiz.

<% note do %>

### Meteor'un mimarisi MVC mi?

Eğer daha önce Ruby on Rails gibi bir framework üzerinde çalıştıysanız Meteor uygulamalarının da MVC (Model View Controller) paternini kullanıp kullanmadığını merak ediyor olmalısınız.

Cevabı kısaca hayır. Meteor Rails gibi sizi önceden belirlenmiş bir dosya/dizin sistemine zorlamıyor. Bu kitapta biz akronimlere ve diğer mimarilere çok takılmadan, kodlarımızı mümkün olacak en anlamlı dosya/dizin sistemiyle oluşturmayı seçtik.

<% end %>

### /public dizini gerçekten gerekli mi?

Aslında bu dizine gerçekten ihiyaç yok, çünkü Microscope aslında statik dosya kullanmıyor. Fakat, herhangi bir Meteor uygulaması en azından bir kaç resim kullanacağı için, bu dizinin işlerimizi kolaylaştıracağını düşündük.

Bu arada, `.meteor` isimli gizli bir dizini farketmiş olmalısınız. Bu dizin Meteor'un kendi kodlarını içerir ve buradaki herhangi bir kodu değiştirmek pek iyi bir fikir sayılmaz. Bu sebeple, bu dizinle genelde hiç işiniz olmayacak. Tek istisna `.meteor/packages` ve `.meteor/release` dosyaları olabilir, çünkü bu dosyalardan ilki akıllı paketlerinizi, diğeri de versiyon numaralarını tutar. Projenize paket eklediğinizde veya Meteor release'ini değiştirdiğinizde bu dosyaları kontrol edip herşeyin yolunda gittiğini kontrol edebilirsiniz.

<% note do %>

### Değişken isimlendirme

Kodlarınızda değişkenleri nasıl isimlendirmeniz gerektiğini size bırakıyoruz. İsterseniz değişken veya fonksiyonlarınızı isimlendirirken kelimeleri `_` (alt çizgi) ile ayırın (örnek: `my_variable`), ya da isterseniz **camel case** diye adlandırılan sistemi kullanın (örnek: `myVariable`), önemli olan kodlarınızın okunurluğu ve kalitesi açısından hangisini seçtiyseniz projeniz boyunca buna bağlı kalın.

Bu kitapta biz camel case sistemini kullanıyoruz, çünkü bu JavaScript dilinin doğasına daha uygun (neticede dilin ismi JavaScript, java_script değil, öyle değil mi?)

Belki buna tek istisna -genel kullanıma daha uygun olması bakımından- dosya ve stil isimleri olabilir. Dosyaları isimlendirirken alt çizgi kullanıyoruz (örneğin `my_file.js`), ve stil'lerimizi isimlendirirken de tire kullanıyoruz (örneğin `.my-class`). Zaten CSS sentaksında kelimeler tire ile ayrılmıştır, `font-family` ve `text-align` örneklerinde olduğu gibi, bu kurala da uymuş oluyoruz.

<% end %>

### CSS

CSS bu kitabın konusu değil. Bu yüzden sizi yavaşlatmamak için tüm kitap boyunca kullanacağımız stil dosyasını baştan belirleyip kullanıma hazır hale getirmeye karar verdik.

CSS Meteor tarafından otomatik olarak yüklenip küçültülür ve sıkıştırılır (minify), bundan dolayı `/public` dizini yerine `/client` dizinine koyulması gerekir. Şimdi `client/stylesheets/` dizini oluşturup aşağıdaki stil tanımlarını `style.css` dosyası içerisine koyup dosyayı kaydedelim:

~~~css
.grid-block, .main, .post, .comments li, .comment-form {
  background: #fff;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

body {
  background: #eee;
  color: #666666; }

#main {
  position: relative;
}
.page {
  position: absolute;
  top: 0px;
  width: 100%;
}

.navbar {
  margin-bottom: 10px; }
  /* line 32, ../sass/style.scss */
  .navbar .navbar-inner {
    border-radius: 0px 0px 3px 3px; }

#spinner {
  height: 300px; }

.post {
  /* For modern browsers */
  /* For IE 6/7 (trigger hasLayout) */
  *zoom: 1;
  position: relative;
  opacity: 1; }
  .post:before, .post:after {
    content: "";
    display: table; }
  .post:after {
    clear: both; }
  .post.invisible {
    opacity: 0; }
  .post.instant {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none; }
  .post.animate{
    -webkit-transition: all 300ms 0ms;
    -moz-transition: all 300ms 0ms ease-in;
    -o-transition: all 300ms 0ms ease-in;
    transition: all 300ms 0ms ease-in; }
  .post .upvote {
    display: block;
    margin: 7px 12px 0 0;
    float: left; }
  .post .post-content {
    float: left; }
    .post .post-content h3 {
      margin: 0;
      line-height: 1.4;
      font-size: 18px; }
      .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px; }
      .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa; }
    .post .post-content p {
      margin: 0; }
  .post .discuss {
    display: block;
    float: right;
    margin-top: 7px; }

.comments {
  list-style-type: none;
  margin: 0; }
  .comments li h4 {
    font-size: 16px;
    margin: 0; }
    .comments li h4 .date {
      font-size: 12px;
      font-weight: normal; }
    .comments li h4 a {
      font-size: 12px; }
  .comments li p:last-child {
    margin-bottom: 0; }

.dropdown-menu span {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #bbb;
  white-space: nowrap; }

.load-more {
  display: block;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px; }
  .load-more:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1); }

.posts .spinner-container{
  position: relative;
  height: 100px;
}

.jumbotron{
  text-align: center;
}
.jumbotron h2{
  font-size: 60px;
  font-weight: 100;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

.errors{
  position: fixed;
  z-index: 10000;
  padding: 10px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
}
.alert {
          animation: fadeOut 2700ms ease-in 0s 1 forwards;
  -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
     -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
  width: 250px;
  float: right;
  clear: both;
  margin-bottom: 5px;
  pointer-events: auto;
}
~~~
<%= caption "client/main.css" %>

<%= commit "2-3","Dosya yapısı yeniden düzenlendi." %>

<% note do %>

### Bir not da CoffeeScript için

Bu kitapta kodlarımızı herhangi bir ön işlemci (pre-processor) olmadan direk JavaScript söz dizimi ile yazacağız. Fakat eğer CoffeeScript kullanmak isterseniz Meteor bunu sizin için daha önceden düşündü. Sadece aşağıdaki komutu yazın ve Meteor sizin için bunu otomatik olarak eklesin:

`meteor add coffeescript`

<% end %>