02-getting-started.md.erb

---
title: Kezdeti lépések
slug: getting-started
date: 0002/01/01
number: 2
contents: Megtanulhatod, hogyan telepítheted a meteort.|Megismerheted a Meteor csomagok 5 típusát.|Megtudhatod, hogy néz ki egy Meteor alkalmazás könyvtárszerkezete.
paragraphs: 49
---

Az első benyomás mindig fontos, és a Meteor telepítése viszonylag fájdalommentes. A legtöbb esetben 5 perc alatt kész a rendszered.

Először is nyiss egy terminál blakot és írd be a következő parancsot:

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

Ez telepíteni fogja a `meteort` a rendszeredre, és máris kezdheted a munkát!

<% note do %>

### Ha *nem* szeretnéd telepíteni a Meteort

Ha nem tudod, (vagy nem akarod) telepíteni a Meteort a gépedre, érdemes kipróbálnod a [Nitrous.io](http://nitrous.io)-t.

A Nitrous.io egy szolgáltatás, amely lehetővé teszi, hogy alkalmazásokat futtass és szerkeszd a kódjukat egyszerűen egy böngészőben, mi pedig írtunk egy [rövid ismertetőt](https://www.discovermeteor.com/blog/meteor-nitrous), hogy segítsünk a kezdeti beállításokban.

Kövesd ezt az útmutatót egészen az "Installing Meteor" részig (még azt is csináld meg), majd folytathatod ezt a könyvet az "Egy egyszerű alkalmazás létrehozása" résztől.

<% end %>

### Egy egyszerű alkalmazás létrehozása

Most, hogy telepítettük a Meteort, hozzunk létre egy egyszerű alkalmazást. Ehhez a Meteor parancssori eszköztárát fogjuk használni:

~~~bash
meteor create microscope
~~~

Ez a parancs letölti a Meteort, és létrehoz egy használatra kész projektet. Amikor végzett, találnod kell egy `microscope/` könyvtárat a következő tartalommal:

~~~bash
.meteor
microscope.css
microscope.html
microscope.js
~~~

Ez az egyszerű alkalmazás, amelyet a Meteor létrehozott, jól szemléltet néhány Meteor módszert.

Igaz, nem sok mindenre képes, de máris futtathatjuk az alkalmazást. Ehhez add ki a következő parancsokat a terminálban:

~~~bash
cd microscope
meteor
~~~

Most nyisd meg a böngésződben a `http://localhost:3000/` (vagy az ezzel egyenértékű `http://0.0.0.0:3000/`) oldalt, ahol valami ilyesmit kell látnod:

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

<%= commit "2-1", "Az alap microscope projekt létrehozása." %>

Gratulálok! Elkészült és már fut is az első Meteor alkalmazásod. Ha esetleg le szeretnéd állítani, csak nyomnod kell egy `ctrl+c`-t a terminálban, ahol elindítottad.

Megjegyezném továbbá, hogy ha használod a Gitet akkor most van itt az ideje létrehozni egy repót a `git init` paranccsal.

<% note do %>

### Viszlát Meteorite

Volt idő, amikor a Meteornak szüksége volt egy külső csomagkezelőre, amit úgy hívtak, hogy Meteorite. A Meteor 0.9.0 verziója óta erre nincs többé szükség, hiszen a Meteorite szolgáltatásait beépítettük a magába a Meteorba.

Ha tehát bármilyen hivatkozást találsz a Meteorite parancssori eszközeire (`mrt`) ebben a könyvben, vagy bárhol máshol, nyugodtan kicserélheted azt a megszokott `meteor` parancsra.

<% end %>

### Egy csomag hozzáadása

Most a Meteor csomagkezelőjét fogjuk használni, hozzáadjuk a [Bootstrap](http://getbootstrap.com/) keretrendszert a projektünkhöz.

Ez semmiben nem különbözik attól, mintha a megszokott módon kézzel beágyaznánk a megfelelő CSS és JavaScript fájlokat, azzal a különbséggel, hogy rábízzuk ezt a munkát a csomag felelősére, hogy mindig naprakész maradjon.

Ha már itt tartunk, szintén hozzáadjuk az [Underscore](http://underscorejs.org/) csomagot. Az Underscore egy JavaScript függvénykönyvtár, amely nagyon hasznos tud lenni, amikor JavaScript adatstruktúrákkal kell dolgozni.

Jelenleg az `underscore` része a "hivatalos" Meteor csomagoknak, ezért nem szerepel itt a készítő neve.

~~~bash
meteor add mizzao:bootstrap-3
meteor add underscore
~~~

Megjegyeznénk, hogy a Bootstrap 3-at használjuk. Néhány képernyőkép a könyvben még egy korábbi Microscope verzióról készült, amelyben még Bootstrap 2 volt, így előfordulhat, hogy ezek egy kicsit másképp néznek ki.

<%= commit "2-2", "Hozzáadtuk a bootstrap és az underscore csomagokat." %>

Amint hozzáadtad a Bootstrap csomagot, észrevehetsz némi változást az alkalmazásunkban:

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

Ellentétben a hagyományos módszerrel, amikor kézzel ágyazunk be külső forrás fájlokat, nem kellett foglalkoznunk a linkek létrehozásával, mert a Meteor megteszi ezt helyettünk. Ez mindössze egy a sok előnyből, amelyet a csomagok használata nyújt számunkra.

<% note do %>

### Megjegyzés a csomagokhoz

Amikor csomagokról beszélünk a Meteorral kapcsolatban, érdemes pontosan fogalmazni. A Meteor 5 alap típusát értelmezi a csomagoknak.

- A Meteor központi része ún. **Meteor platform csomagokra** van bontva. Ezek minden Meteor alkalmazáshoz hozzáadódnak, és lényegében soha nem is kell foglalkoznod velük.
- Az általános Meteor csomagokat úgy hívjuk, hogy "**isopacks**", azaz izomorf csomagok (ami azt jelenti, hogy a szerveren és a kliensen is képesek működni). **A saját fejlesztésű csomagokat**, mint pl az `account-ui`, vagy az `appcache` a Meteor csapata tartja karban, és [részei a Meteornak](http://docs.meteor.com/#packages).
- **A mások által fejlesztett csomagok** olyan isopack-ek, amelyeket más felhasználók fejlesztenek és feltöltik őket a Meteor csomagszerverére. Böngészhetsz köztük az [Atmosphere](http://atmosphere.meteor.com)-en, vagy a `meteor search` paranccsal.
- **A Lokális csomagokat** te magad fejleszted és a `/packages` könyvtárban tárolhatod őket.
- **Az NPM csomagok** (Node.js Packed Modules) a Node.js-hez tartozó csomagok. Igaz, közvetlenül nem működnek a Meteorban, viszont az előbb említett csomagok használ*hat*ják őket.

<% end %>

### A meteor alkalmazások fájlstruktúrája

Mielőtt elkezdenénk kódolni, jól be kell konfigurálni a projektünket. Hogy biztosan tiszta lapról induljunk, nyissuk meg a `microscope` könyvtárat és töröljük a `microscope.html`, `microscope.js`, és `microscope.css` fájlokat.

Ezután hozzunk létre négy alkönyvtárat a `/microscope`-on belül: `/client`, `/server`, `/public`, és `/lib`.

Most hozzunk létre két üres fájlt, a `main.html`-t és a `main.js`-t a `/client` köyvtárban. Ne aggódj amiatt, hogy ezek miatt most nem fut az alkalmazás, a következő fejezetben tartalmat is kapnak.

Meg kell említenünk, hogy néhány könyvtár a fentiek közül speciális. Amikor a kódok futtatásáról van szó, a Meteor alkalmaz néhány szabályt.

- Az a kód, ami a `/server` könyvtárban van, csak a szerveren fog futni.
- Az a kód, ami a `/client` könyvtárban van, csak a kliensen fog futni.
- Minden más a kliensen és a szerveren is futni fog.
- A statikus tartalom (fontok, képek, stb) a `/public` könyvtárban található.

Szintén hasznos tudni, hogyan dönti el a Meteor, hogy milyen sorrendben töltse be a fájlokat.

- Azok, amelyek a `/lib` könyvtárban vannak, minden mást megelőznek.
- A `main.*` nevűek minden más után jönnek.
- Az összes többi fájl abc sorrendben töltődik be a fájl neve alapján.

Megjegyeznénk azért, hogy ugyan a Meteor alkalmazza ezeket a szabályokat, ez még nem jelenti azt, hogy muszáj egy előre definiált fájl struktúrát használnod az alkalmazásodhoz, akkor is, ha nem akarod. Ez a struktúra egy ajánlás, de nem kőbe vésett szabály.

Ha további részletek is érdekelnek ezzel a témával kapcsolatban, néz szét a [hivatalos doksiban](http://docs.meteor.com/#structuringyourapp)!

<% note do %>

### MVC keretrendszer a Meteor?

Ha egy másik keretrendszert, mint pl a Ruby on Rails, már használtál, talán kíváncsi vagy, hogy vajon a Meteor követi-e az MVC (Model View Controller) szerkezeti mintát.

A rövid válasz az, hogy nem. A Rails-től eltérően a Meteor nem tesz kötelezővé semmilyen előre definiált alkalmazásstruktúrát. Ebben a könyben úgy szervezzük a kódunkat, ahogy nekünk tetszik, nem igazán foglalkozunk mindenféle mozaikszavakkal.

<% end %>

### Semmi sem publikus?

Ok, hazudtunk. Igazából nincs is szükségünk a `/public` könyvtárra, egyszerűen azért, mert a Microscope-ban nincs semmilyen statikus tartalom! De mivel a legtöbb Meteor alkalmazás tartalmaz legalább egy-két képet, ezért úgy gondoltuk, fontos ezt is megemlíteni.

Ha mát itt tartunk, biztosan észrevettél egy rejtett `.meteor` könyvtárat. Itt tárolja a Meteor a saját kódját, amit általában nem ajánlatos módosítani. Igazából nem nagyon lesz szükséged arra, hogy bármikor is belenézz ebbe a könyvtárba. Két kivétel van: a `.meteor/packages` és a `.meteor/release`. Ezeket használjuk arra, hogy felsoroljuk a csomagokat, amelyeket az alkalmazásunk használ, illetve meadjuk, hogy a Meteor melyik verziót használjuk. Ha új csomagokat adsz hozzá az alkalmazáshoz, vagy megváltoztatod a használni kívánt Meteor verziót, akkor hasznos lehet ellenőrizni ezeket a fájlokat.

<% note do %>

### Aláhúzás vagy CamelCase

Az egyetlen dolog, amit el szeretnénk mondani az ősrégi aláhúzás (`my_variable`) - CamelCase (`myVariable`) vitáról, az, hogy igazából lényegtelen melyiket használod, ha következetes vagy.

Ebben a könyvben mi a CamelCase-t használjuk, mert ez az általános JavaScript stílus (elvégre JavaScript és nem java_script).

Csak két kivétel van ez alól a szabály alól: a fájlnevek, ahol aláhúzást használunk (`my_file.js`), és a CSS osztályok, ahol kötőjelet (`.my-class`). Ennek az az oka, hogy a fájlrendszeren az aláhúzás a leginkább megszokott, illetve hogy a CSS szintakszis eleve kötőjeleket használ (`font-family`, `text-align`, stb.).

<% end %>

### CSS kérdés megoldva

Ez a könyv nem a CSS-ről szól. Ezért hát, hogy ne tartsunk fel téged azzal, hogy a belemegyünk a stílus elemek részleteibe, úgy döntöttünk, hogy az egész stíluslapot a kezdetektől elérhetővé tesszük, így ezzel nem kell többet foglalkoznod.

A CSS fájlokat automatikusan betölti és minimalizálja a Meteor, így ezek más statikus tartalmakkal ellentétben nem a `/public`, hanem a `/client` könyvtárba kerülnek. Menjünk tovább és hozzuk létre a `/client/stylesheets/` könyvtárat, és abban az alábbi `style.css` fájlt.

~~~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/stylesheets/style.css" %>

<%= commit "2-3","Átszervezett fájlstruktúra." %>

<% note do %>

### A Note on CoffeeScript

Ebben a könyben mi egyszerű JavaScriptet használunk. De ha te inkább a CoffeeScriptet szereted, a Meteor ezt is lehetővé teszi. Egyszerűen add hozzá a CoffeeScript csomagot, és már használhatod is:

`meteor add coffeescript`

<% end %>