02-getting-started.md.erb

---
title: Jak zacząć
slug: getting-started
date: 0002/01/01
number: 2
contents: Jak zainstalować Meteor & Meteorite.|O 5 typach pakietów Meteor'a.|O ustawieniu strukturę plików twojej aplikacji.
paragraphs: 49
---

Pierwsze wrażenie jest ważne - dlatego proces instalacji Meteora powinien być stosunkowo łatwy. W większości przypadków Meteor będzie gotowy do działania w mniej niż pięć minut.

Aby zacząć, możemy go zainstalować otwierając okno terminala i wpisując:

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

To zainstaluje konsolowe narzędzie `meteor` w twoim systemie. Od tej pory będziesz mógł zacząć używać Meteora.

<% note do %>

### *Nie* instalowanie Meteora

Jeżeli nie możesz (albo nie chcesz) instalować Meteor'a lokalnie, polecamy spróbować [Nitrous.io](http://nitrous.io).

Nitrous.io to serwis pozwalający Ci uruchamiać aplikacje i edytować ich kod w twojej przeglądarce, napisaliśmy [krótki poradnik](https://www.discovermeteor.com/2013/10/04/meteor-nitrous/) aby pomóc ci w konfiguracji.

Możesz także wykonwać tę instrukcję aż do sekcji "Instalacja Meteor'a i Meteorite" (włącznie), i następnie przejść przez książkę ponownie rozpoczynając od sekcji "Tworzenie prostej aplikacji" z tego rozdziału.

<% end %>
 
### Meteorite

Zważając na fakt, iż Meteor nie wspiera jeszcze pakietów firm trzecich, Tom Coleman (jeden z autorów tej książki) wraz z kilkoma innymi członkami społeczności stworzyli [Meteorite](http://oortcloud.github.com/meteorite/), wrapper dla Meteor'a. Meteorite zajmuje się także instalacją Meteor'a i podłączeniem dowolnego pakietu ktory możesz znaleźć.

Jako że będziemy polegać na pakietach firm trzecich dla niektórych funkcjonalności Microscope'a, zainstalujmy Meteorite.

### Instalacja Meteorite

Musisz się upewnić że node i git są zainstalowane na twoim komputerze. Zainstaluj je w standardowy sposób dla twojego systemu operacyjnego, lub sprawdź te łącza:
 
- [strona do pobrania Node](http://nodejs.org/download/)
- [strona do pobrania Git](http://git-scm.com/downloads)

Następnie, zainstalujmy Meteorite. Jest to pakiet [npm](https://npmjs.org/) (ang Node Package Module, standarowy format modułów Node'a), instalujemy go za pomocą:

~~~bash
$ npm install -g meteorite
~~~

<% note do %>

### Błedy uprawnień?

Na niektórych komputerach możesz potrzebować uprawnień root'a aby zainstalować Meteorite. Aby uniknąć problemów, upewnij się że używasz `sudo -H`:

~~~bash
$ sudo -H npm install -g meteorite
~~~

Możesz poczytać więcej o tym problemie w [dokumentacji Meteorite](https://github.com/oortcloud/meteorite/blob/master/README.md#permission-woes).

<% end %>

To wszystko! Od tego momentu Meteorite będzie się wszystkim zajmował.

Notka: nie ma jeszcze obsługie Meteorite dla Windows, ale możesz spojrzeć na [nasz przewodnik dla Windows](http://themeteorbook.com/2013/03/20/using-meteor-and-atmopshere-on-windows/).

<% note do %>

  ### `mrt` vs `meteor`
  
Meteorite zainstaluje komendę `mrt`, którą będziemy używać do isntalacji pakietów dla naszej aplikacji. Jednakże kiedy chcemy uruchomić nasz serwer, nadal używamy komendy `meteor`.
  
<% end %>

### Tworzenie prostej aplikacji

Teraz, kiedy mam zainstalowany Meteorite, stwórzmy aplikację. Aby to zrobić, używamy komendy wiersza poleceń Meteorite'a `mrt`:

~~~bash
$ mrt create microscope
~~~

Ta komenda ściągnie Meteor'a i dokona podstawowej konfiguracji, gotowego do użycia projektu Meteor'a. Kiedy skończy, powinieneś widzieć katalog `microscope/`, zawierający następujące pliki:

~~~bash
microscope.css  
microscope.html 
microscope.js   
smart.json 
~~~

Aplikacja którą Meteor dla ciebie stworzył jest to prosty kod, który prezentuje kilka prostych wzorców.

Mimo, iż nasza aplikacja nie robi zbyt wiele, możemy ją uruchomić. Aby uruchomić aplikację, wejdź do terminala i napisz:

~~~bash
$ cd microscope
$ meteor
~~~

Teraz wpisz w swojeje przeglądarce adres `http://localhost:3000/` (lub odpowiednik `http://0.0.0.0:3000/`) i powinieneś zobaczyć mniej więcej coś takiego: 


<%= screenshot "2-1", "Meteor's Hello World." %>

<%= commit "2-1", "Created basic microscope project." %>

Gratulacje! Twoja pierwsza aplikacja w Meteor'ze działa. Przy okazji, aby ją zatrzymać wszystko co musisz zrobić to w oknie terminala i w zakładce gdzie aplikacja jest uruchomiona nacisnąć `ctrl+c`.

### Dodawanie pakietu

Użyejmy teraz Meteorite, aby dodać smart package, który pozwoli na dołączenie =[Bootstrap](http://getbootstrap.com/) do projektu:

~~~bash
$ mrt add bootstrap
~~~

<%= commit "2-2", "Added bootstrap package." %>

<% note do %>

### Notka o Pakietach

Kiedy mówimy o pakietach w kontekście Meteor'a, warto pomówić o szczegółach. Meteor używa pięciu typów pakietów:

- Rdzeń Meteor'a jako takie jest podzielone na **rdzenne pakiety**. Są one zawarte w każdej aplikacji Meteor'a i pradopobonie nigdy nie będziesz musiał się o nie martwić.
- Meteor **pakiety smart** (ang. smart packages) są grupą [około 37 pakietów](http://docs.meteor.com/#packages) (możesz zobaczyć całą listę za pomocą `meteor list`), które są dostarczane razem z Meteor'em i możesz je opcjonalnie zaimportować do swojej aplikacji. Możesz dodać je nawet, gdy nie używasz Meteorite, za pomocą `meteor add packagename`.
- **Pakiety lokalne** to pakeity które możesz swtorzyć sam i włożyć je do katalogu `/packages`. Także nie potrzebujesz Meteorite by z nich korzystać.
- **pakiety smart Atmosphere** to pakiety do Meteor'a trzecich firmy znajdujące się na [Atmosphere](http://atmosphere.meteor.com). By je importować i używać potrzebny jest Meteorite.
- **pakiety NPM** (Node Packaged Modules) to pakiety Node.js. Mimo, iż nie współpracują one od razu z Meteorem w stanie w jakim są dostarczane, *mogą* być używane przez wyżej wymienione typy pakietów.

<% end %>

### Struktura plików aplikacji Meteor

Zanim zaczniemy pisać kod, musimy skonfigurować prawidłowo nasz projekt. Aby wyczyścić naszą strukturę, otwórz katalog `microscope` i usuń  `microscope.html`, `microscope.js`, and `microscope.css`.

Następnie, stwórz pięc katalogów w `/microscope`: `/client`, `/server`, `/public`, `/lib`, and `/collections` oraz puste pliki `main.html` and `main.js` w katalogu `/client`. Nie przejmuj się jeżeli zepsuje to chwilowo aplikację, uzupełnimy te pliki w następnym rozdziale.

Powinniśmy wspomnieć, że niektóre z tych katalogów ma specjalne właściwości. Jeżeli chodzi o pliki, Meteor posiada następujące reguły:

- Kod zawarty w katalogu `/server` uruchamiany jest tylko po stronie serwera.
- Kod zawarty w katalogu `/client` uruchamiany jest tylko po stronie klienta.
- Wszystko inne uruchamiane jest zarówno po stronie serwera jak i klienta.
- Pliki w katalogu `/lib` są ładowane jako pierwsze.
- Pliki `main.*` są ładowane na końcu.
- Twoje zasoby statyczne (czcionki, obrazki, itd.) powinny być umieszczone w katalogu `/public`.

Warto zauważyć, że mimo, iż Meteor posiada te reguły, nie zmusza cię do używania jakiejkolwiek predefiniowanej struktury katalogów dla Twojej aplikacji. Tak więc struktura którą proponujemy jest naszym sposobem pisania aplikacji, a nie sztywnymi regułami.

Jeżeli chcesz poznać więcej szczegółów, zachęcamy by zapoznać się z [oficjalną dokumentacją Meteor'a](http://docs.meteor.com/#structuringyourapp).

<% note do %>

### Czy Meteor jest frameworkiem MVC?

Jeżeli używałeś wcześniej innych frameworków, takich jak Ruby on Rails, możesz się zastanawiać czy Meteor zaadoptował wzorzec MVC

Krótka odpowiedź to: nie. W przeciwieństwie do Rails'ów, Meteor nie narzuca żadnej predefiniowanej struktury dla Twojej aplikacji. Także w tej książce poprostu układamy kod w sposób, który ma dla nas największy sens, nie martwiąc się przy tym za bardzo o akronimy.

<% end %>

### Nie ma katalogu public?

Ok, skłamaliśmy. Nie potrzebujemy katalogu `public/` z tego prostego powodu że Microscope nie potrzebuje żadnych statycznych zasobów. Ale odkąd większość aplikacji napisanych w Meteor'ze zawiera co najmniej kilka obrazków, uznaliśmy że warto poruszyć ten temat.

Przy okazji, mogłeś już zauważyć ukryty katalog `.meteor`. To jest miejsce w którym Meteor przechowuje swój własny kod - modyfikacja rzeczy znajdujących się tam to zazwyczaj bardzo zły pomysł. Prawdę ówiąc nie potrzebujesz nigdy zaglądać do tego katalogu. Jedynym wyjątkiem są pliki `.meteor/packages` and `.meteor/release`, które odpowiednio są używane do wylistowania twoich pakietów i wersji Meteor'a którą używasz. Kiedy dodajesz pakiet albo zmieniasz wersję Meteor'a, może być pomocne sprawdzenie zmian w tych plikach.

<% note do %>

### Podkreślenia vs CamelCase

Jedyne co mamy do powiedzenia na temat debaty pomiędzy podkreśleniami (`my_variable`) kontra camelCase (`myVariable`) jest to że naprawdę nie ma znaczenia którą konwencję przyjmiesz, jeżeli tylko się do niej konsekwentnie stosujesz.

W tej książce używamy camelCase, ponieważ jest to zwyczajowy zapis JavaScript'u (koniec końców, jest to JavaScript, a nie java_script!).

Jedynym wyjątkiem do tej reguły są nazwy plików, które będą używały podkreśleń (`moj_plik.js`) i klas CSS, które używają myślników (`.moja-klasa`). Powodem tego jest to, że podkreślniki są powszechnie spotykane w systemie plików, a składnia CSS używa myślników (`font-family`, `text-align`, itd.).

<% end %>

### Zatroszcz się o CSS

To nie jest książka o CSS. Aby nie zwalniać zajmując się szczegółami styli, zdecydowaliśmy zrobić cały zestaw styli dostępny od początku, tak żebyś nie musiał się nim przejmować od początku.

CSS automatycznie jest zminimalizowany i załadowany przez Meteor'a, i w odróżnieniu do innych statycznych zasobów idzie do katalogu `/client`, a nie `/public`, także włóż do pliku `style.css`:

~~~css
.grid-block, .main, .post, .comments li, .comment-form {
    background: #fff;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
body {
    background: #eee;
    color: #666666;
}
.navbar { margin-bottom: 10px }
.navbar .navbar-inner {
    border-radius: 0px 0px 3px 3px;
}
#spinner { height: 300px }
.post {
    *zoom: 1;
    -webkit-transition: all 300ms 0ms;
    -webkit-transition-delay: ease-in;
    -moz-transition: all 300ms 0ms ease-in;
    -o-transition: all 300ms 0ms ease-in;
    transition: all 300ms 0ms ease-in;
    position: relative;
    opacity: 1;
}
.post:before, .post:after {
    content: "";
    display: table;
}
.post:after { clear: both }
.post.invisible { opacity: 0 }
.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);
}
~~~
<%= caption "client/stylesheets/style.css" %>

<%= commit "2-3","Re-arranged file structure." %>

<% note do %>

### Informacja CoffeeScript

W tej książce będziemy pisać w czystym JavaScript. Jeżeli preferujesz CoffeeScript, Meteor umożliwia użycie go. Po prostu dodaj pakiet CoffeeScript:

`mrt add coffeescript`

<% end %>