02-getting-started.md.erb

---
title: Vorbereitung
slug: getting-started
date: 0002/01/01
number: 2
points: 1
photoUrl: http://www.flickr.com/photos/ikewinski/9511230392/
photoAuthor: Mike Lewinski
contents: Meteor installieren.|Erfahre mehr über die 5 Typen der Meteor-Packages.|Die Datei-Struktur einer Meteor App aufbauen.
paragraphs: 49
---

Der erste Eindruck ist entscheidend und Meteors Installationsprozess sollte relativ schmerzfrei sein. Normalerweise solltest du in weniger als 5 Minuten loslegen können.

Du kannst Meteor installieren, in dem du das Terminal öffnest und Folgendes eingibst:

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

Dies installiert das ausführbare Programm `meteor` auf deinem System und erlaubt Dir Meteor zu benutzen.

<% note do %>

### Meteor *nicht* installieren

Wenn du Meteor nicht lokal installieren kannst (oder willst), empfehlen wir dir [Nitrous.io](http://nitrous.io).

Auf Nitrous.io kannst du deine App laufen lassen und den Code direkt im Browser bearbeiten. Wir haben dazu [eine kurze Anleitung](https://www.discovermeteor.com/blog/meteor-nitrous) geschrieben, um die Installation zu vereinfachen. 

Du kannst einfach dieser Anleitung folgen bis einschließlich dem Abschnitt "Installing Meteor". Danach folgst du wieder ab dem Abschnitt "Creating a Simple App" in diesem Kapitel.

<% end %>
 
### Eine einfache App erzeugen

Nun da wir Meteor installiert haben, erstellen wir eine App. Dazu benutzen wir Meteors Kommandozeilenwerkzeug `meteor`:

~~~bash
$ meteor create microscope
~~~

Dieser Befehl lädt Meteor herunter und erstellt ein einfaches, lauffähiges Meteor Projekt für dich. Sobald es fertig ist, solltest du ein Verzeichnis `microscope/` mit folgendem Inhalt sehen:

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

Die App die Meteor für dich erstellt hat ist eine einfache Boilerplate-App, die einige einfache Strukturen enthält.

Obwohl die App noch nicht viel macht, können wir sie trotzdem starten. Um die App zu starten, wechsle zurück in das Terminal und gib Folgendes ein:

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

Öffne nun in deinem Browser die URL `http://localhost:3000/` (oder auch `http://0.0.0.0:3000/`). Du soltest nun ungefähr dies sehen:

<%= screenshot "2-1", "Meteors Hello World." %>

<%= commit "2-1", "Einfaches Microscope-Projekt erzeugt." %>

Gratuliere! Deine erste Meteor App ist nun lauffähig. Um die App wieder zu stoppen, wechsle zurück in das Terminal (in dem die App läuft) und drücke `ctrl+c`. 

Falls du Git benutzt ist das jetzt ein guter Zeitpunkt um Dein Repo mit 'git init' zu initialisieren.

<% note do %>

### Auf Wiedersehen Meteorite

Es gab eine Zeit zu der Meteor einen externen Package Manager mit dem Namen Meteorite genutzt hat. Seit Meteor Version 0.9.0 wird Meteorite nicht mehr gebraucht, da all dessen Funktionen in Meteor integriert worden sind.

Wenn Du also in diesem Buch oder auch im Netz  irgendwelche Code-Schnipsel mit dem 'mrt' Kommando findest, kannst du diese einfach mit dem 'meteor'-Befehl ersetzen.

<% end %>

### Hinzufügen einer Package

Nun werden wir Meteors Package System nutzen um das [Bootstrap](http://getbootstrap.com/) Framework zu unserem Projekt hinzuzufügen. 

Dabei passiert zunächst einmal nichts anderes, als Bootstrap auf die herkömmliche Weise hinzuzufügen, also die entsprechenden CSS und JavaScript Dateien in unser Projekt einzufügen. Der Vorteil liegt darin, dass sich nun Meteor um das Updaten dieser Package kümmert. Vielen Dank an das Mitglied der Meteor-Gemeinschaft [Andrew Mao](https://github.com/mizzao) ( “mizzao” in `mizzao:bootstrap-3` ist der Username des Authors einer Package)!

Und wenn wir schon mal dabei sind, fügen wir auch noch die [Underscore](http://underscorejs.org/) Package hinzu. Underscore ist eine JavaScript Utility Bibliothek, die sehr nützlich zur Manipulation von JavaScript Datenstrukturen ist.

Aktuell ist die 'underscore' Package Teil der "offiziellen" Meteor Packages und hat deshalb keinen Author.

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

Bitte beachte, dass wir Bootstrap **3** hinzufügen. Einige der Screenshots in diesem Buch wurden mit einer älteren Version von Microscope gemacht, die noch auf Bootstrap **2** basierte, weshalb sie vielleicht ein wenig anders aussehen. 

<%= commit "2-2", "Bootstrap und underscore Package hinzugefügt." %>

Sobald Du die Bootstrap package hinzugefügt hast, sollte sich das Aussehen der Basis-App ändern:

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

Anders als beim "traditionellen" Weg externe Assets einzubinden, mussten wir keine CSS oder JavaScript Dateien verlinken, da Meteor sich um alles kümmert! Das ist nur eine der vielen Vorteile der Meteor Packages.

<% note do %>

### Eine Anmerkung zu Packages

Wenn wir von Packages im Kontext von Meteor sprechen müssen wir etwas genauer sein. Meteor nutzt fünf Basis-Typen von Packages:

- Der Meteor-Core selbst ist in verschiedene **Meteor Plattform Packages** unterteilt. Sie sind in jeder Meteor-App integriert und du musst dich eigentlich nie um diese kümmern.
- Reguläre Meteor Packages werden "**isopacks**", oder "isomorphic packages" genannt. Das bedeutet, dass sie sowohl auf dem Client als auch auf dem Server funktionieren. **First-party packages** wie z.B. `accounts-ui` oder `appcache` werden vom Meteor Core Team gepflegt und [sind in Meteor eingebunden](http://docs.meteor.com/#packages).
- **Third-party Packages** sind isopacks die von anderen Benutzern entwickelt  und auf Meteors Package Server hochgeladen worden sind. Du kannst sie dir auf [Atmosphere](http://atmosphere.meteor.com) oder mit dem `meteor search` Befehl anschauen. 
-- **Lokale Packages** sind eigenerstellte Packages, welche du selbst erstellen und im Verzeichnis `/packages` ablegen kannst. 
- **NPM Packages** (Node.js Packaged Modules) sind Node.js-Packages. Obwohl diese nicht einfach so mit Meteor funktionieren, *können* sie von den oben genannten Typen von Packages genutzt werden.

<% end %>

### Die Datei-Struktur einer Meteor-App

Bevor wir mit dem Programmieren anfangen, müssen wir unser Projekt korrekt aufsetzen. Um einen problemlosen Build-Prozess zu gewährleisten, öffnen wir das Verzeichnis `microscope` und löschen die Dateien `microscope.html`, `microscope.js` und `microscope.css`.

Danach erstellen wir vier Verzeichnisse in `/microscope`: `/client`, `/server`, `/public` und `/lib`. 

Weiterhin legen wir die leeren Dateien `main.html` und `main.js` in `/client` an. Keine Sorge, wenn du die App dadurch vorübergehend unbrauchbar machst - wir befüllen die Dateien im nächsten Kapitel.

Erwähnt werden sollte auch, dass einige dieser Verzeichnisse speziell sind. In Bezug auf Dateien hat Meteor folgende Regeln:

- Code im Verzeichnis `/server` wird nur auf dem Server ausgeführt.
- Code im Verzeichnis `/client` läuft nur auf dem Client.
- Dateien an anderen Orten werden sowohl auf dem Client als auch auf dem Server ausgeführt.
- Deine statischen Assets (Schriften, Bilder etc.) gehören in das Verzeichnis `/public`.

Es ist auch nützlich zu wissen, in welcher Reihenfolge Meteor die Dateien einer App lädt:

- Dateien in `/lib` werden immer zuerst geladen.
- Alle `main.*` Dateien werden als Letzes geladen.
- Alle anderen Dateien werden auf Basis des Dateinamens in alphabetischer Reihenfolge geladen.

Beachte, dass obwohl Meteor diese Regeln hat, du trotzdem nicht zwingend diese vordefinierte Dateistruktur für deine App verwenden musst. Die Struktur, die wir vorschlagen ist nur ein möglicher Weg und ist nicht in Stein gemeisselt.

Lies doch auch die [offizielle Meteor Dokumentation](http://docs.meteor.com/#structuringyourapp), wenn du mehr Informationen hierzu benötigst.

<% note do %>

### Ist Meteor MVC?

Wenn du andere Frameworks wie Ruby on Rails benutzt, fragst du dich vielleicht, ob Meteor-Apps das MVC-Pattern (Model View Controller) verwenden.

Die kurze Antwort ist: Nein. Im Gegensatz zu Rails zwingt dich Meteor nicht eine vorgegeben Struktur für deine App zu nutzen. In diesem Buch strukturieren wir den Code, wie er uns am meisten Sinn macht, ungeachtet etwaiger Akronyme.


<% end %>

### Nicht öffentlich?

Ok, wir haben etwas gelogen. Wir brauchen das Verzeichnis `/public` eigentlich nicht. Dies hat den einfachen Grund, dass Microscope keine statischen Assets benutzt. Da aber die meisten anderen Meteor-Apps mindestens einige Bilder einbinden, wollen wir es kurz erwähnen.

Vielleicht hast du das versteckte Verzeichnis `.meteor` bemerkt. Dort speichert Meteor seinen eigenen Code. Dort Änderungen vorzunehmen ist normalerweise eine schlechte Idee. Grundsätzlich musst du dieses Verzeichnis nicht kennen. Die einzigen Ausnahmen sind die Dateien `.meteor/packages` und `.meteor/release'. Diese können genutzt werden, um die verwendeten Smart Packages aufzulisten und die benutzte Version von Meteor zu spezifizieren. Wenn du Packages hinzufügst oder den Meteor-Version änderst, kann es hilfreich sein, die Änderungen in diesen Dateien zu überprüfen.

<% note do %>

### Unterstriche oder CamelCase

Das Einzige, was wir zu der uralten Debatte Unterstriche (`my_variable`) vs. CamelCase (`myVariable`) sagen, ist, dass es nicht darauf ankommt welches du wählst, solange du dich für eine Variante entscheidest.

In diesem Buch verwenden wir CamelCase, da es üblicherweise so in JavaScript gemacht wird. (Schliesslich heisst es JavaScript und nicht java_script!).

Die einzige Ausnahme zu dieser Regel sind Dateinamen, in welchen Unterstriche (`my_file.js`) verwendet werden, sowie CSS Klassen die Bindestriche (`.my-class`) benutzen. Der Grund dafür ist, dass im Dateisystem Unterstriche geläufig sind, während in der CSS Syntax sich Bindestriche durchgesetzt haben (`font-family`, `text-align`, etc.).

<% end %>

### Verwendung von CSS


Dieses Buch behandelt kein CSS. Um dich nicht auch noch mit Styling-Details zu belästigen, haben wir uns entschieden, das gesamte Stylesheet von Anfang vorzugeben. darüber musst du Dir keine Sorgen machen.

CSS wird automatisch von Meteor geladen und komprimiert. Deshalb muss es im Gegensatz zu den anderen statischen Assets im Verzeichnis `/client` und nicht im Verzeichnis `/public` abgelegt werden. Erstelle nun das Verzeichnis `client/stylesheets/` und speichere die Datei `styles.css` mit folgendem Inhalt:


~~~css
.grid-block, .main, .post, .comments li, .comment-form {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  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; }

.navbar {
  margin-bottom: 10px; }
  /* line 32, ../sass/style.scss */
  .navbar .navbar-inner {
    -webkit-border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -ms-border-radius: 0px 0px 3px 3px;
    -o-border-radius: 0px 0px 3px 3px;
    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;
    -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; }
  .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;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  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","Modifizierte Datei-Struktur." %>

<% note do %>

### Eine Anmerkung zu CoffeeScript

In diesem Buch verwenden wir pures JavaScript. Solltest du CoffeeScript bevorzugen, so ist Meteor auch dazu fähig. Füge einfach das Package CoffeeScript hinzu:

`meteor add coffeescript`

<% end %>