02-getting-started.md.erb

---
title: Ξεκινώντας
slug: getting-started
date: 0002/01/01
number: 2
contents: Εγκαταστήστε το Meteor.|Μάθετε για τους 5 τύπους πακέτων Meteor.|Ρυθμίστε τη δομή των φακέλων μιας εφαρμογής Meteor.
paragraphs: 53
---

Οι πρώτες εντυπώσεις είναι σημαντικές, και η διαδικασία εγκατάστασης του Meteor είναι σχετικά ανώδυνη. Στις περισσότερες περιπτώσεις θα είστε έτοιμοι σε λιγότερο από 5 λεπτά.

Ξεκινώντας, μπορούμε να εγκαταστήσουμε το Meteor ανοίγοντας ένα παράθυρο τερματικού και πληκτρολογώντας:

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

Αυτή η εντολή θα εγκαταστήσει το εκτελέσιμο αρχείο του Meteor στο σύστημά σας και θα είστε έτοιμοι να το χρησιμοποιήσετε.

<% note do %>

### Χρήση του Meteor *χωρίς* εγκατάσταση

Αν δεν μπορείτε (ή δεν θέλετε) να εγκαταστήσετε το Meteor τοπικά, σας προτείνουμε το [Nitrous.io](http://nitrous.io).

Το Nitrous.io είναι μια υπηρεσία που σας επιτρέπει να εκτελείτε εφαρμογές και να τροποποιείτε τον κώδικά τους μέσα από τον φυλλομετρητή σας. Έχουμε ετοιμάσει ένα [σύντομο οδηγό](https://www.discovermeteor.com/blog/meteor-nitrous) που θα σας βοηθήσει να ξεκινήσετε.

Μπορείτε απλά να ακολουθήσετε τον οδηγό αυτό μέχρι και την ενότητα "Installing Meteor", και στη συνέχεια να επιστρέψετε σε αυτό το βιβλίο, στην ενότητα "Δημιουργώντας μια Απλή Εφαρμογή" αυτού του κεφαλαίου.

<% end %>

### Δημιουργώντας μια Απλή Εφαρμογή

Τώρα που έχουμε εγκαταστήσει το Meteor, ας δημιουργήσουμε μια εφαρμογή. Για να το κάνουμε αυτό, χρησιμοποιούμε το εργαλείο εντολών του Meteor:

~~~bash
meteor create microscope
~~~

Αυτή η εντολή θα κατεβάσει το Meteor και θα δημιουργήσει μια απλή εφαρμογή Meteor για εσάς. Όταν ολοκληρωθεί η διαδικασία, θα πρέπει να δείτε ένα νέο φάκελο με το όνομα `microscope/`, ο οποίος περιλαμβάνει τα εξής αρχεία:

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

Η εφαρμογή που δημιούργησε για εσάς το Meteor είναι πολύ απλή και επιδεικνύει μερικά βασικά στοιχεία.

Παρότι η εφαρμογή δεν κάνει πολλά πράγματα, μπορούμε να την εκτελέσουμε. Για να γίνει αυτό, επιστρέψτε στο παράθυρο τερματικού και πληκτρολογήστε:

~~~bash
cd microscope
meteor
~~~

Τώρα ανοίξτε το φυλλομετρητή σας και επισκεφτείτε τη σελίδα `http://localhost:3000/` (ή το ισοδύναμο `http://0.0.0.0:3000/`) και θα πρέπει να δείτε κάτι σαν αυτό:

<%= screenshot "2-1", "Το Hello World του Meteor." %>

<%= commit "2-1", "Δημιουργήθηκε το αρχικό σχέδιο για το microscope." %>

Συγχαρητήρια! Η πρώτη σας εφαρμογή Meteor λειτουργεί. Αν θέλετε να σταματήσετε την εφαρμογή, πηγαίνετε στο παράθυρο τερματικού στο οποίο εκτελείται και πατήστε `ctrl+c`.

Σημειώστε επίσης ότι αν χρησιμοποιείτε το Git, τώρα είναι καλή στιγμή να αρχικοποιήσετε την αποθήκη σας με την εντολή `git init`.

<% note do %>

### Αντίο Meteorite

Για πολύ καιρό το Meteor βασιζόταν σε ένα εξωτερικό διαχειριστή πακέτων που ονομαζόταν Meteorite. Από την έκδοση 0.9.0 και μετά το Meteor απέκτησε το δικό του σύστημα διαχείρισης πακέτων και το Meteorite δεν χρειάζεται πια.

Συνεπώς αν συναντήσετε αναφορές στην εντολη `mrt` του Meteorite σε αυτό το βιβλίο ή οπουδήποτε αλλού, μπορείτε με ασφάλεια να το αντικαταστήσετε με την εντολή `meteor`.

<% end %>

### Προσθέτοντας ένα Πακέτο

Τώρα θα χρησιμοποιήσουμε το σύστημα πακέτων του Meteor για να προσθέσουμε το προγραμματιστικό πλαίσιο [Bootstrap](http://getbootstrap.com/) στην εφαρμογή μας.

Αυτό δεν έχει διαφορά από το να προσθέσουμε χειροκίνητα το Bootstrap με τα CSS και JavaScript αρχεία του. Εμείς όμως βασιζόμαστε στο μέλος της κοινότητας Meteor [Andrew Mao](https://github.com/mizzao) (το “mizzao” στο `mizzao:bootstrap-3` είναι το όνομα χρήστη του δημιουργού του πακέτου) για να διατηρεί το πακέτο ενημερωμένο.

Και όσο ασχολούμαστε με αυτό, θα προσθέσουμε και το πακέτο [Underscore](http://underscorejs.org/). Το Underscore είναι μια βιβλιοθήκη εργαλείων JavaScript, και είναι χρήσιμη για την διαχείριση δομών δεδομένων της JavaScript.

Προς το παρόν, το πακέτο `underscore` ανήκει ακόμα στα "επίσημα" πακέτα του Meteor, γι' αυτό δεν έχει ως πρόθεση το όνομα του δημιουργού:

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

Σημειώστε ότι προσθέτουμε το Bootstrap **3**. Κάποιες από τις εικόνες σε αυτό το βιβλίο λήφθηκαν με μια παλιότερη έκδοση του Microscope, η οποία χρησιμοποιούσε το Bootstrap **2**, με αποτέλεσμα να εμφανίζονται λίγο διαφορετικά.

<%= commit "2-2", "Προστέθηκαν τα πακέτα bootstrap και underscore." %>

Μόλις προσθέσετε το πακέτο Bootstrap θα παρατηρήσετε μια αλλαγή στη βασική εφαρμογή σας:

<%= screenshot "2-1b", "Με το Bootstrap." %>

Αντίθετα με τον παραδοσιακό τρόπο εισαγωγής εξωτερικών στοιχείων (πχ <link rel="stylesheet" type="text/css" href="...">), δεν χρειάστηκε να συνδέσουμε κανένα αρχείο CSS ή JavaScript στην εφαρμογή μας, γιατί το Meteor το φροντίζει για εμάς! Κι αυτό είναι ένα μόνο από τα πλεονεκτήματα των πακέτων του Meteor.

<% note do %>

### Μια σημείωση για τα Πακέτα

Όταν μιλάμε για πακέτα στο περιβάλλον του Meteor, είναι σημαντικό να είμαστε συγκεκριμένοι. Το Meteor χρησιμοποιεί πέντε βασικούς τύπους πακέτων:

- Ο πυρήνας του Meteor χωρίζεται σε διαφορετικά **πακέτα πλατφόρμας Meteor**. Συμπεριλαμβάνονται σε κάθε εφαρμογή Meteor, και δεν θα χρειαστεί να ανησυχήσετε γι' αυτά.
- Τα κάνονικά πακέτα Meteor είναι γνωστά και σαν “**isopacks**”, ή ισομορφικά πακέτα (σημαίνει ότι λειτουργούν τόσο στο περιβάλλον Πελάτη όσο και στο περιβάλλον Διακομιστή). Τα **επίσημα πακέτα** όπως το `accounts-ui` ή το `appcache` συντηρούνται από την βασική ομάδα του Meteor και [συμπεριλαμβάνονται με το Meteor](http://docs.meteor.com/#packages).
- Τα **ανεπίσημα πακέτα** είναι απλά isopacks που αναπτύσσονται από άλλους χρήστες και φιλοξενούνται στον διακομιστή πακέτων του Meteor. Μπορείτε να τα δείτε στο [Atmosphere](http://atmosphere.meteor.com) ή με την εντολή `meteor search`.
- Τα **τοπικά πακέτα** είναι αυτά που φτιάχνετε μόνοι σας και τα τοποθετείτε στο φάκελο `/packages`.
- Τα **πακέτα NPM** (Node.js Packaged Modules) είναι πακέτα του Node.js. Παρότι δεν λειτουργούν άμεσα στο Meteor, *μπορούν* να χρησιμοποιηθούν από τους προηγούμενους τύπους πακέτων.

<% end %>

### Η Δομή των Αρχείων μιας εφαρμογής Meteor

Προτού ξεκινήσουμε να γράφουμε κώδικα, πρέπει να σχεδιάσουμε την εφαρμογή μας σωστά. Για να διασφαλίσουμε ότι ξεκινάμε με καθαρό περιβάλλον, ανοίξτε το φάκελο `microscope` και διαγράψτε τα αρχεία `microscope.html`, `microscope.js`, και `microscope.css`.

Τώρα, δημιουργήστε τέσσερις φακέλους μέσα στο `/microscope`: `/client`, `/server`, `/public`, and `/lib`.

Στη συνέχεια, θα δημιουργήσουμε τα κενά αρχεία `main.html` και `main.js` μέσα στον φάκελο `/client`. Μην ανησυχείτε αν αυτό χαλάει την εφαρμογή σας προς το παρόν, θα αρχίσουμε να τα γεμίζουμε στο επόμενο κεφάλαιο.

Θα πρέπει να αναφέρουμε ότι τα ονόματα των φακέλων που δημιουργήσαμε δεν είναι τυχαία. Κι αυτό γιατί όσον αφορά την εκτέλεση του κώδικα, το Meteor έχει μερικούς κανόνες:

- Ο κώδικας στο φάκελο `/server` εκτελείται μόνο στο περιβάλλον Διακομιστή.
- Ο κώδικας στο φάκελο `/client` εκτελείται μόνο στο περιβάλλον Πελάτη.
- Οτιδήποτε άλλο εκτελείται και στα δύο περιβάλλοντα.
- Τα στατικά στοιχεία (fonts, images, etc.) τοποθετούνται στο φάκελο `/public`.

Επίσης είναι χρήσιμο να γνωρίζετε τον τρόπο με τον οποίο το Meteor αποφασίζει με ποια σειρά θα φορτώσει τα αρχεία σας:

- Τα αρχεία στο φάκελο `/lib` φορτώνονται *πριν* από οτιδήποτε άλλο.
- Τα αρχεία με όνομα `main.*` φορτώνονται μετά από οτιδήποτε άλλο.
- Όλα τα άλλα αρχεία φορτώνονται με αλφαβητική σειρά.

Σημειώστε ότι παρότι το Meteor έχει αυτούς τους κανόνες, δεν σας υποχρεώνει να χρησιμοποιήσετε κάποια συγκεκριμένη δομή αρχείων. Συνεπώς η δομή που χρησιμοποιούμε είναι βάσει της δικής μας προτίμησης, αν θέλετε την ακολουθείτε.

Σας προτείνουμε να διαβάσετε την [επίσημη τεκμηρίωση του Meteor](http://docs.meteor.com/#structuringyourapp) αν θέλετε περισσότερες λεπτομέρειες για το θέμα.

<% note do %>

### Το Meteor ακολουθεί το μοτίβο MVC;

Αν έρχεστε στο Meteor από άλλα προγραμματιστικά πλαίσια όπως το Ruby on Rails, πιθανώς αναρωτιέστε αν οι εφαρμογές Meteor υιοθετούν το μοτίβο MVC (Model View Controller).

Η σύντομη απάντηση είναι όχι. Αντίθετα με το Rails, το Meteor δεν επιβάλει κάποια συγκεκριμένη δομή στην εφαρμογή σας. Συνεπώς σε αυτό το βιβλίο θα οργανώσουμε τον κώδικα με τρόπο που εξυπηρετεί εμάς, χωρίς να ασχολούμαστε με ακρονύμια.

<% end %>

### Χωρίς public;

Εντάξει, είπαμε ψέματα. Δεν χρειαζόμαστε πραγματικά τον φάκελο `public/` για τον απλό λόγο ότι το Microscope δεν χρησιμοποιεί στατικά στοιχεία! Επειδή όμως οι περισσότερες άλλες εφαρμογές Meteor περιλαμβάνουν τουλάχιστον μερικές εικόνες, σκεφτήκαμε ότι ήταν σημαντικό να το καλύψουμε και αυτό.

Παρεπιπτόντως, μπορεί να προσέξατε ένα κρυφό φάκελο `.meteor`. Το Meteor αποθηκεύει εδώ τον δικό του κώδικα, και είναι μάλλον κακή ιδέα να κάνετε μεταβολές στα αρχεία του. Για την ακρίβεια, δεν χρειάζεται ποτέ να ασχοληθείτε με αυτόν τον φάκελο. Η μόνη εξαίρεση σ' αυτό είναι τα αρχεία `.meteor/packages` και `.meteor/release`, τα οποία περιέχουν ένα κατάλογο με τα έξυπνα πακέτα της εφαρμογής σας και την έκδοση του Meteor που χρησιμοποιείτε αντίστοιχα. Όταν προσθέτε πακέτα ή αλλάζετε έκδοση του Meteor, μπορεί να χρειαστεί να ελέγξετε τις αλλαγές σε αυτά τα αρχεία.

<% note do %>

### Underscores vs CamelCase

Το μόνο πράγμα που θα πούμε για την "αιώνια" διαμάχη μεταξύ underscore (`my_variable`) και camelCase (`myVariable`) είναι ότι δεν έχει ιδιαίτερη σημασία ποιο από τα δύο προτιμάτε, αρκεί να επιλέξετε από την αρχή ένα και να το διατηρήσετε μέχρι το τέλος.

Σε αυτό το βιβλίο χρησιμοποιούμε camelCase γιατί είναι αρκετά συνηθισμένο στην JavaScript (άλλωστε γράφεται JavaScript όχι java_script!).

Η μόνη εξαίρεση σε αυτόν τον κανόνα είναι τα ονόματα των αρχείων, τα οποία χρησιμοποιούν underscores (`my_file.js`), και οι CSS classes, οι οποίες χρησιμοποιούν hyphens (`.my-class`). Ο λόγος γι' αυτό είναι ότι στο σύστημα αρχείων τα underscores είναι περισσότερο συνηθισμένα, ενώ η σύνταξη της CSS ήδη χρησιμοποιεί hyphens (`font-family`, `text-align`, etc.).

<% end %>

### Τακτοποιώντας την CSS

Αυτό το βιβλίο δεν είναι για την CSS. Για να μην κάνουμε παρένθεση σε κάθε κεφάλαιο, αποφασίσαμε να τακτοποιήσουμε όλη τη stylesheet από την αρχή και να μην ασχοληθούμε ξανά μαζί της.

Η CSS φορτώνεται αυτόματα και ελαχιστοποιείται από το Meteor, οπότε σε αντίθεση με τα άλλα στατικά στοιχεία την τοποθετούμε στο φάκελο `/client` όχι στο `/public`. Δημιουργήστε τώρα ένα φάκελο `client/stylesheets/`, και μέσα σε αυτόν δημιουργήστε το αρχείο `style.css` με το εξής περιεχόμενο:

~~~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 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","Αναδιαμορφώθηκε η δομή των αρχείων." %>

<% note do %>

### Μια σημείωση για την CoffeeScript

Σε αυτό το βιβλίο χρησιμοποιούμε καθαρή JavaScript. Αν όμως προτιμάτε την CoffeeScript, το Meteor σας παρέχει την ευκολία. Απλά προσθέστε το πακέτο CoffeeScript και είστε έτοιμοι:

`meteor add coffeescript`

<% end %>