Jak zacząć

2

procent przetłumaczone

W tym rozdziale dowiesz się:

  • Jak zainstalować Meteor & Meteorite.
  • O 5 typach pakietów Meteor'a.
  • O ustawieniu strukturę plików twojej aplikacji.
  • 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:

    $ 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.

    Nie instalowanie Meteora

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

    Nitrous.io to serwis pozwalający Ci uruchamiać aplikacje i edytować ich kod w twojej przeglądarce, napisaliśmy krótki poradnik 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.

    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, 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:

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

    $ npm install -g meteorite
    

    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:

    $ sudo -H npm install -g meteorite
    

    Możesz poczytać więcej o tym problemie w dokumentacji Meteorite.

    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.

    ### 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.

    Tworzenie prostej aplikacji

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

    $ 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:

    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:

    $ 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:

    Meteor's Hello World.
    Meteor’s Hello World.

    Zatwierdź 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 do projektu:

    $ mrt add bootstrap
    

    Zatwierdź 2-2

    Added bootstrap package.

    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 (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. 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.

    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.

    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.

    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.

    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.).

    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:

    .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);
    }
    
    client/stylesheets/style.css

    Zatwierdź 2-3

    Re-arranged file structure.

    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