Meteor Tutorial: Tworzenie aplikacji internetowych w czasie rzeczywistym za pomocą Meteor

Opublikowany: 2022-03-11

Meteor to pełna platforma JavaScript dla aplikacji internetowych i mobilnych. Istnieje od 2011 roku i zyskał dobrą reputację wśród programistów Meteor jako idealne, łatwe w użyciu rozwiązanie do szybkiego prototypowania. Jednak ostatnio programiści zdali sobie sprawę, że Meteor nie służy już tylko do prototypowania: jest gotowy do użycia w rozwoju komercyjnym. Dzięki arsenałowi pakietów, który zapewnia, solidnej podstawie mongoDB/node.js, na której opiera się, oraz oferowanej elastyczności kodowania; Meteor ułatwia tworzenie solidnych, bezpiecznych aplikacji internetowych czasu rzeczywistego, obsługujących wszystko, od aplikacji przeglądarki po serwer lub bazę danych.

Ten samouczek Meteor przeprowadzi Cię przez proces tworzenia podstawowej aplikacji internetowej w Meteor - prosty katalog, który pozwala użytkownikom logować się i zarządzać listą książek.

Dlaczego warto korzystać z Meteora? Krótka odpowiedź brzmi: „ponieważ Meteor jest fajny”. To sprawia, że tworzenie aplikacji internetowych jest proste. Jest łatwy do nauczenia i pozwala skupić się bardziej na funkcjonalności aplikacji niż na podstawach synchronizowania danych i udostępniania stron.

Ma również wiele wygodnych wbudowanych zachowań. Meteor automatycznie wykonuje aktualizacje na żywo, więc zmiany danych pojawiają się natychmiast w oknie przeglądarki, a nawet zmiany kodu w samej aplikacji są przesyłane do wszystkich przeglądarek i urządzeń w „czasie rzeczywistym”. Meteor ma wbudowaną kompensację opóźnień, jest łatwy do wdrożenia i ma łatwe do zainstalowania „pakiety”, które obsługują wszelkiego rodzaju funkcje.

Mimo że jest to stosunkowo nowy framework, wiele start-upów już buduje aplikacje Meteor, w tym stosunkowo duże usługi, takie jak Respondly i Telescope.

Montaż i rusztowanie Meteor

Instalacja Meteora na systemach *nix jest jednowierszowa:

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

Chociaż nadal nie ma oficjalnego wsparcia, ich podgląd dla systemu Windows idzie dobrze. Plotki głoszą, że wsparcie dla Windows będzie dostępne w wersji 1.1, która ma się ukazać w kwietniu lub maju 2015 roku. Jak można się spodziewać po inteligentnym frameworku, takim jak Meteor, uruchomienie aplikacji wymaga wywołania jednego wiersza polecenia:

 meteor create book-list

Spowoduje to utworzenie katalogu o nazwie „lista książek” i wypełnienie go pewnym szablonem i kodem zależnym. Aby uruchomić aplikację, wejdź do nowo utworzonego katalogu i wykonaj:

 meteor

Otwórz http://localhost:3000 w swojej przeglądarce, a zobaczysz następujące informacje:

Możesz również sprawdzić „wersję 0” naszej aplikacji na MeteorPad, witrynie podobnej do JSFiddle for Meteor: Book List: Default App

Meteor przechowuje swoje widoki w plikach HTML. Jeśli otworzymy „book-list.html”, zobaczymy:

 <head> <title>book-list</title> </head> <body> <h1>Welcome to Meteor!</h1> {{> hello}} </body> <template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p> </template>

Meteor używa „Blaze”, silnika szablonów, do renderowania odpowiedzi z tych plików HTML. Podwójne nawiasy klamrowe powinny być znane każdemu, kto używał Handlebars.js (lub innego podobnego silnika szablonów) i pełnią tutaj podobną funkcję. Blaze sprawdza wyrażenia wewnątrz każdej pary podwójnych nawiasów klamrowych i zastępuje je wartością, którą te wyrażenia dają.

Ten prosty przykładowy program ma tylko dwa wyrażenia z podwójnymi nawiasami klamrowymi:

Pierwszy, „{{> hello}}”, mówi Blaze, aby dołączył szablon o nazwie „hello”. Szablon ten jest zdefiniowany na dole pliku, w sekcji <template name=”hello”>.
Drugi, „{{counter}}”, jest nieco bardziej skomplikowany. Aby zobaczyć, skąd pochodzi ta wartość „licznika”, musimy otworzyć „book-list.js”:

 if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.hello.helpers({ counter: function () { return Session.get('counter'); } }); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }

Niektóre rzeczy wymagają wyjaśnienia tutaj. Po pierwsze, podział na „if (Meteor.isClient)” i „if (Meteor.isServer)”. Przypomnij sobie, że meteor to framework typu full-stack, więc kod, który piszesz, jest uruchamiany zarówno na serwerze, jak i na kliencie. Te warunki pozwalają nam to ograniczyć: pierwszy blok działa tylko na kliencie, a drugi tylko na serwerze.

Po drugie, mamy wywołanie „Session.setDefault” — inicjuje ono w przeglądarce zmienną sesji o nazwie „counter”. Zmienne sesji działają trochę jak globalne w Meteorze (na dobre i na złe). Jednak ta zmienna sesji nie pojawia się bezpośrednio w „{{counter}}”. Zamiast tego wyrażenie „licznik” to „pomocnik”, który jest zdefiniowany w sekcji „Template.hello.helpers”. Ten helper po prostu pobiera wartość zmiennej sesji i zwraca ją.

Zauważ, że pomocnik jest „reaktywny”. Oznacza to, że za każdym razem, gdy zmienna sesji ulegnie zmianie, Meteor automatycznie ponownie uruchomi tę funkcję pomocniczą, która się do niej odwołuje, a Blaze automatycznie zaktualizuje przeglądarkę o nową zawartość.

Kod klienta monitoruje również zdarzenia poprzez „Template.hello.events”. Identyfikujemy zdarzenie według typu zdarzenia i selektora (w tym przypadku „kliknij przycisk”), a następnie mówimy Meteorowi, co to zdarzenie powinno zrobić. W takim przypadku zmienna sesji jest zwiększana, co powoduje ponowne uruchomienie funkcji pomocniczej i ponowne renderowanie treści.

Wyświetlanie danych statycznych

Wszystko to jest dobre i dobre, ale nie jest to aplikacja Meteor, której chcemy w tym samouczku.

Zacznijmy ulepszać tę aplikację — wyświetlimy statyczną, zakodowaną na stałe listę książek. Na razie ukryjemy listę książek w zmiennej sesji. W kodzie „isClient” użyjemy „Template.hello.rendered”, aby ustawić zmienną sesji zaraz po wyrenderowaniu szablonu bookList:

 Template.hello.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); };

Następnie zwracamy tę zmienną sesji z nowym pomocnikiem w szablonie „hello”:

 Template.hello.helpers({ books: function () { return Session.get('books'); } });

I wyświetl go na ekranie za pomocą interpolacji zmiennych w szablonie „hello”:

 <template name="hello"> <h3>Here are your books:</h3> {{ books }} </template>

Możesz sprawdzić ten kod w akcji na Meteorpadzie: Lista książek: Pokaż zmienną sesji

Pierwszą rzeczą, którą należy zauważyć, jest to, że serwer Meteor automatycznie wykrył zmiany w naszej bazie kodu, przesłał nowy kod do klientów i poprosił klienta o ponowne załadowanie. Nawet po wdrożeniu aplikacji możemy wdrażać zmiany i automatycznie aktualizować naszych klientów za pomocą hot-code push.

Do tej pory otrzymujemy:

Ups, niepoprawnie wyświetlamy dane. Blaze dostaje tutaj punkty za dokładność (dlaczego tak, to jest tablica obiektów), ale będziemy musieli być nieco sprytniejsi, jeśli chcemy wyświetlić naszą listę książek w użyteczny sposób. Na szczęście Blaze bardzo ułatwia pracę z tablicami danych za pomocą dyrektywy „#each”:

 <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL>

W Blaze „#each” działa trochę jak dyrektywa Angulara „ng-repeat” — iteruje po strukturze tablicy, ustawiając bieżący kontekst na bieżący obiekt w tablicy i wielokrotnie wyświetlając kod HTML wewnątrz „{{#each”. …}}”. Tak teraz wygląda nasza lista książek:

W MeteorPad: pokaż zmienną sesji poprawnie

Trochę sprzątania

Zanim przejdziemy dalej, uporządkujmy trochę nasz kod.

Meteor zapewnia ogromną swobodę w organizacji bazy kodu. Jak zobaczysz, jest tylko kilka twardych i szybkich reguł: gdziekolwiek umieścisz swój kod HTML i JavaScript, Meteor go znajdzie. Ta elastyczność jest fajna, ale oznacza to, że bardziej na Tobie ciąży obowiązek organizowania kodu w sposób, który ma sens, więc nie utkniesz w gigantycznym, nieuporządkowanym bałaganie.

Najpierw zmieńmy nazwę tego szablonu „hello” na coś znaczącego, na przykład „bookList”, i zastąpmy szablonowy kod HTML następującym:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body> <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

Po drugie, podzielmy części „klient” i „serwer” na osobne pliki. W naszym katalogu aplikacji skonfigurujemy podkatalog „klient” i podkatalog „serwer” - Meteor będzie wiedział automatycznie, że należy uruchomić pliki „/client/” na kliencie, a pliki „/server/” na serwer. Dobrą konwencją jest umieszczanie kodu szablonu w pliku JavaScript nazwanym tak, jak szablon, więc umieśćmy kod naszego klienta w „client/bookList.js”. Możemy umieścić nasz aktualnie pusty kod uruchamiania serwera w „server/startup.js”. Na koniec wyjdźmy z „

Pamiętaj, że nawet po tym całym przełączaniu Meteor nadal automatycznie znajdzie wszystkie nasze pliki HTML i JavaScript. Dopóki plik znajduje się gdzieś w „/client/”, Meteor będzie wiedział, że należy go uruchomić na kliencie. Dopóki plik znajduje się gdzieś w „/server/”, meteor będzie wiedział, że ma go uruchomić na serwerze. Ponownie, to od programisty zależy, czy wszystko będzie zorganizowane.

Więc teraz nasz kod powinien wyglądać tak:

lista-książek.html:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body>

klient/bookList.html:

 <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

klient/bookList.js:

 Template.bookList.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); }; Template.bookList.helpers({ books: function () { return Session.get('books'); } });

serwer/startup.js:

 Meteor.startup(function () { // code to run on server at startup }); ~~~ Check it out on MeteorPad: [Initial Code Cleanup](http://meteorpad.com/pad/MwvMcsBAzfbWwEXp3/Book-List:%20Initial%20Code%20Cleanup) Verify that everything's running correctly by checking the browser window and then we're good to move on to the next step. ## Using the Database in Meteor The Meteor server runs on top of a MongoDB database. In this section of our tutorial, we will move the static list of books out of the session variable and into that database. First, delete the Template.bookList.rendered code, so that we're no longer putting stuff into that session variable. Next, we should add that list of books to the database as fixture data when the server initializes. As you'd expect for MongoDB, Meteor stores data in "collections". So, we'll create a new collection for our books. To keep things simple we will name it "books". It turns out that both the client and the server will want to know about this collection, so we'll put this code in a new subfolder: "/lib/". Meteor knows automatically that files in "/lib/" run on the client and the server. We'll create a file called "lib/collections/books.js", and give it just one line of code: ~~~ js Books = new Meteor.Collection("books");

W oknie przeglądarki wskazanym na http://localhost:3000 przejdź do konsoli programisty i sprawdź wartość „Książki”. Teraz powinna to być kolekcja Mongo! Spróbuj uruchomić „Books.find().fetch()”, a otrzymasz pustą tablicę – co ma sens, ponieważ nie dodaliśmy do niej jeszcze żadnych książek. Możemy spróbować dodać do niego elementy w konsoli:

 Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"})

Dodawanie rzeczy w konsoli jest dość żmudne. Zamiast tego ustawimy wszystko tak, aby po uruchomieniu serwera automatycznie wstawialiśmy dane urządzeń do bazy danych. Wróćmy więc do „server/startup.js” i dodajmy to:

 Meteor.startup(function () { if (!Books.findOne()) { Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"}); Books.insert({title: "1984", author: "George Orwell"}); Books.insert({title: "The Lord of the Rings", author: "JRR Tolkien"}); Books.insert({title: "The Catcher in the Rye", author: "JD Salinger"}); Books.insert({title: "The Great Gatsby", author: "F. Scott Fitzgerald"}); } });

Teraz, gdy serwer się uruchomi, jeśli nie ma żadnych danych, dodamy dane urządzeń. Możemy to zweryfikować, wracając do naszego terminala, zatrzymując serwer meteor i uruchamiając to polecenie:

 meteor reset

Uwaga: rzadko będziesz potrzebować tego polecenia, ponieważ resetuje - tj. czyści - bazę danych używaną przez Meteor. Jeśli twoja aplikacja Meteor ma w bazie danych jakieś dane użytkownika, nie powinieneś uruchamiać tego polecenia. Ale w tym przypadku po prostu usuniemy wszelkie dane testowe, które posiadamy.

Teraz ponownie uruchomimy serwer:

 meteor

Po uruchomieniu Meteor uruchomi procedurę startową, zobaczy, czy baza danych jest pusta i doda dane urządzenia. W tym momencie, jeśli przejdziemy do konsoli i wpiszemy „Books.find().fetch()”, otrzymamy pięć książek, które mieliśmy wcześniej.

Wszystko, co pozostało na tym etapie, to wyświetlenie książek na ekranie. Na szczęście jest to tak proste, jak zastąpienie „return Session.get('books');” z następującym pomocnikiem „książki”:

 return Books.find();

I wracamy do pracy! Aplikacja wyświetla teraz dane z kursora bazy danych, a nie ze zmiennej sesji.

Sprawdź to na MeteorPad: Przejście do bazy danych

Obawy dotyczące bezpieczeństwa

Poprzem to, mówiąc: „nie rób tego”.

Jak myślisz, co by się stało, gdyby ktoś uruchomił tę aplikację w swojej przeglądarce, wszedł do konsoli i wpisał „Books.remove({})”?

Odpowiedź brzmi: zniszczyliby kolekcję.

Jest to więc dość duży problem z bezpieczeństwem - nasi użytkownicy mają zbyt duży dostęp do naszej bazy danych. Każdy klient może uzyskać dostęp do całej bazy danych. Co więcej, każdy klient może wprowadzić dowolne zmiany w całej bazie danych, w tym usunięcie danych „.remove({})”.

To nie jest dobre, więc naprawmy to.

Meteor używa tak zwanych „pakietów” w celu dodania funkcjonalności. Czym są moduły dla Node.js, a klejnoty dla Rubiego, pakiety są dołączoną funkcjonalnością dla Meteora. Są pakiety na różne rzeczy. Aby sprawdzić, co jest dostępne, wejdź na atmosphere.js.

Domyślna aplikacja meteor, którą stworzyliśmy za pomocą „meteor create” zawiera dwa pakiety o nazwie „autopublish” i „insecure”. Pierwszy pakiet sprawia, że klienci mają automatyczny dostęp do całej bazy danych, a drugi sprawia, że użytkownicy mogą wykonywać dowolne akcje na tej bazie danych.

Usuńmy je. Możemy to zrobić, uruchamiając następujące polecenie z katalogu aplikacji:

 meteor remove autopublish insecure

Gdy to zrobisz, zobaczysz, że dane listy książek znikną z ekranu (ponieważ nie masz już do nich dostępu), a jeśli spróbujesz wywołać „Books.insert”, zobaczysz błąd: „insert failed : Brak dostępu". Na MeteorPad: przesadne bezpieczeństwo

Jeśli nie wyciągniesz nic więcej z tego samouczka Meteor, pamiętaj o tym: podczas wdrażania aplikacji Meteor pamiętaj, aby usunąć pakiety, które są automatycznie publikowane i niezabezpieczone. Meteor ma wiele dobrych środków bezpieczeństwa, ale wszystkie są na nic, jeśli zostawisz te dwa zainstalowane pakiety.

Dlaczego więc Meteor w ogóle automatycznie dołącza te pakiety, jeśli stanowią one takie zagrożenie dla bezpieczeństwa? Powodem jest to, że szczególnie początkującym, te dwa pakiety ułatwiają rozpoczęcie pracy - możesz łatwo debugować i modyfikować bazę danych z konsoli przeglądarki. Ale dobrą praktyką jest jak najszybsze porzucenie automatycznego publikowania i niezabezpieczenia.

Publikuj i subskrybuj

Więc naprawiliśmy tę lukę w zabezpieczeniach, ale wprowadziliśmy dwa problemy. Po pierwsze, nie mamy teraz dostępu do bazy danych. Po drugie, nie mamy możliwości interakcji z bazą danych.

Zajmijmy się tutaj pierwszym problemem. Meteor zapewnia bezpieczny dostęp do bazy danych, ponieważ serwer „publikuje” podzbiór bazy danych, a klient „subskrybuje” tę publikację.

Najpierw utwórzmy „/server/publications.js”:

 Meteor.publish('books', function() { return Books.find({}); });

I stworzymy „/client/subscriptions.js”:

 Meteor.subscribe('books');

Sprawdź to na MeteorPad: Publikuj i subskrybuj

Serwer „publikuje” kursor, który ma dostęp do wszystkich danych, a klient „subskrybuje” go po drugiej stronie. Klient używa tej subskrypcji do wypełnienia kopii lustrzanej bazy danych wszystkimi danymi kursora. Kiedy uzyskujemy dostęp do „Books.find().fetch()”, widzimy wszystkie pięć obiektów i widzimy je wyświetlane na ekranie, jak poprzednio.

Różnica polega teraz na tym, że naprawdę łatwo jest ograniczyć dostęp klientów. Spróbuj przełączyć publikację „find()” na podzbiór danych:

 Meteor.publish('books', function() { return Books.find({}, {limit:3}); });

Teraz klient widzi tylko trzy z pięciu książek, a do pozostałych nie ma możliwości. Jest to nie tylko wielki dobrodziejstwo dla bezpieczeństwa (nie widzę kont bankowych wszystkich innych), ale możesz go użyć do rozsyłania danych i uniknięcia przeciążenia klienta.

Dodawanie nowych książek

Widzieliśmy, jak w ograniczony i bezpieczny sposób zapewnić klientom dostęp do bazy danych w trybie odczytu. Przyjrzyjmy się teraz drugiemu problemowi: jak pozwolić użytkownikom zmieniać bazę danych, nie pozwalając im robić czegokolwiek, czego chcą? Pozbycie się niepewnego pakietu spowodowało, że klienci w ogóle nie mają do niego dostępu - spróbujmy ponownie zezwolić na dodawanie książek. W meteor robimy to poprzez dodanie „metody” do serwera. Dodajmy metodę, która dodaje nową książkę do „/lib/collections/books.js”:

 Meteor.methods({ addBook: function(bookData) { var bookID = Books.insert(bookData); return bookID; } });

Jak widać, pobiera to „bookData” – w tym przypadku jest to obiekt z polami „tytuł” i „autor” – i dodaje go do bazy danych. Po ponownym załadowaniu klienta możemy wywołać tę metodę z klienta. Możesz przejść do konsoli i wpisać coś takiego:

 Meteor.call('addBook', {title: "A Tale of Two Cities", author: "Charles Dickens"})

I gotowe! Dostajesz kolejną książkę na liście książek. Korzystanie z konsoli jest nieznośnie toporne, więc śmiało dodajmy prosty formularz na końcu szablonu „bookList”, który pozwoli nam dodawać nowe książki:

 <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form>

I możemy podłączyć to do JavaScript za pomocą przypadku zdarzenia, tak jak w oryginalnej aplikacji testowej:

 Template.bookList.events({ "submit .add-book": function(event) { event.preventDefault(); // this prevents built-in form submission Meteor.call('addBook', {title: event.target.title.value, author: event.target.author.value}) } });

Możesz to zobaczyć w akcji na MeteorPad: Metody

Kiedy mieliśmy niepewne i automatyczne publikowanie, klienci mogli uzyskać dostęp do całej bazy danych i zmienić ją. Teraz zniknęły niepewne i automatyczne publikacje, ale dzięki publikacjom, subskrypcjom i metodom klienci mogą uzyskać dostęp do bazy danych i wchodzić z nią w interakcje w kontrolowany sposób.

Na marginesie: możesz również rozwiązać problemy z bezpieczeństwem w Meteor, używając „reguł zezwalania i odmowy”. Możesz dowiedzieć się więcej o tych i niektórych powodach, dla których wolę powyższe podejście zamiast na stronie discovermeteor.com.

Uwierzytelnianie użytkownika

Może się wydawać, że właśnie cofnęliśmy się do miejsca, w którym zaczęliśmy, ale jest jedna ważna różnica: teraz naprawdę łatwo jest nam ograniczyć dostęp do bazy danych. Aby zobaczyć, jak to działa, spróbuj dodać użytkowników do tej aplikacji. Dodamy system logowania do naszej aplikacji, a następnie zamiast zmuszać wszystkich klientów do pracy z jedną listą książek obejmujących cały system, sprawimy, że każdy użytkownik będzie mógł dodawać lub czytać tylko własną listę książek.

Przejdź do katalogu aplikacji i zainstaluj dwa pakiety:

 meteor add accounts-ui accounts-password

Tam. Właśnie dodałeś system logowania do aplikacji. Teraz wystarczy dodać interfejs logowania do book-list.html. Umieść tę pojedynczą linię na górze ciała:

 {{> loginButtons}}

Powinieneś zobaczyć monit logowania u góry ekranu:

Zauważ, że jeśli klikniesz link logowania, zostaniesz poproszony o podanie adresu e-mail i hasła. Możemy przełączyć to na prosty system logowania nazwa użytkownika/hasło, tworząc „/client/config.js” z następującymi w nim:

 Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" });

W tym momencie możesz wpisać „Meteor.userId()” w konsoli, a zwróci „null”. Możesz spróbować kliknąć link, aby utworzyć konto. Wywołanie „Meteor.userId()” powinno teraz zwrócić ciąg identyfikatora. Serwer ma dostęp do tej samej informacji (jako „this.userId”), więc trywialne jest sprawienie, aby metoda „dodaj książki” wymuszała zalogowanie użytkownika i zawierała pole userID:

 Meteor.methods({ addBook: function(bookData) { if (this.userId) { bookData.userID = this.userId; var bookID = Books.insert(bookData); return bookID; } } });

Teraz pozostaje tylko ograniczyć klienta, pokazując tylko książki, które dodał ten użytkownik. Wykorzystujemy możliwość publikacji do zawężenia tego, do czego klient ma dostęp:

 Meteor.publish('books', function() { return Books.find({userID: this.userId}); });

Teraz publikacja wyszukuje tylko książki tego konkretnego użytkownika. Możemy nawet uzyskać dostęp do identyfikatora użytkownika z wyrażeń Blaze jako „{{currentUser}}”; i możemy tego użyć, z dyrektywą „{{#if}}” (która robi dokładnie to, co myślisz), aby wyświetlać dane tylko wtedy, gdy użytkownik jest zalogowany:

 <template name="bookList"> {{#if currentUser}} <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form> {{else}} <h3>Please log in to see your books</h3> {{/if}} </template>

Sprawdź ostateczny wynik na MeteorPad: Użytkownicy

Zastosowanie

Teraz możemy wdrożyć tę aplikację Meteor w Internecie. Robimy to, przechodząc do katalogu aplikacji na terminalu i wykonując:

 meteor deploy <your app's name>.meteor.com

Pamiętaj, aby zastąpić „<nazwa Twojej aplikacji>” rzeczywistą, krótką nazwą wystąpienia aplikacji. Uruchomienie tego polecenia spowoduje wyświetlenie monitu o założenie konta w Meteor, a następnie umieszczenie nowej aplikacji na serwerach testowych Meteor, dzięki czemu można ją wypróbować w Internecie.

Aby uzyskać szybkie demo, to rozwiązanie meteor.com jest wszystkim, czego potrzebujesz. Zespół Meteor nie ogłosił żadnych wyraźnych limitów pamięci lub przepustowości na swoich serwerach. Jedynym godnym uwagi ograniczeniem jest to, że jeśli Twoja aplikacja nie będzie używana przez dłuższy czas, witryna potrwa kilka sekund, aby uruchomić się dla następnego użytkownika.

To powiedziawszy, meteor.com nie jest przeznaczony do użytku komercyjnego. Ale kiedy przechodzisz do produkcji, istnieją firmy oferujące platformę jako usługę, takie jak Modulus i Digital Ocean, które ułatwiają wdrażanie aplikacji Meteor. Jeśli chcesz wdrożyć aplikację meteor na własny serwer, „meteor up” również ułatwi ten proces.

Następne kroki

Gratulacje! W swoim dążeniu do nauki Meteora stworzyłeś i wdrożyłeś bardzo prostą aplikację internetową Meteor działającą w czasie rzeczywistym. Oczywiście to tylko mały pierwszy krok do całego wszechświata funkcji i funkcjonalności. Jeśli podoba Ci się to, co widziałeś do tej pory, gorąco polecam Your First Meteor Application autorstwa Davida Turnbulla, który prowadzi czytelników przez tworzenie bardziej skomplikowanej aplikacji, z większą ilością informacji o funkcjach meteorów. Jest dostępny jako książka Kindle za niewielką cenę oraz jako darmowy plik PDF na stronie internetowej Turnbull.

Będziesz także chciał poznać pakiety dostępne dla Meteora. Dziewięć razy na dziesięć, odpowiedź na pytanie „jak mam zrobić <x> w Meteorze?” to „jest na to pakiet”. „Jak dodać routing do mojej aplikacji?” Używasz Żelaznego Routera. „Jak zapewnić interfejs API RESTful?” Korzystasz z RESTivusa. „Jak uwzględnić testy jednostkowe?” Używasz prędkości. „Jak dodać walidacje schematu?” Używasz Collection2. Możesz łatwo zgubić się na Atmosphere.js patrząc na wszystkie dostępne pakiety.

Dlaczego nie korzystać z Meteora?

Jak widać z tego samouczka, Meteor jest prosty i przyjemny do pisania aplikacji, ale byłbym niedbały, gdybym nie wspomniał o wadach.

Meteor jest wciąż stosunkowo niedojrzały. W październiku zeszłego roku osiągnął wersję 1.0, co prowadzi do pewnych problemów. Jeśli chcesz zrobić coś niejasnego, możliwe, że nikt jeszcze nie napisał pakietu dla tej funkcjonalności. Pakiety, które istnieją, są bardziej podatne na błędy, po prostu dlatego, że nie istniały wystarczająco długo, aby rozwiązać wszystkie problemy.

Skalowanie może być również nieco nieznane w Meteorze. Istnieje wiele witryn Meteor, które skalują się do rozsądnej liczby użytkowników, ale niewiele bardzo dużych witryn - nic takiego jak Facebook czy LinkedIn, z dziesiątkami lub setkami milionów użytkowników.

Jednak w przypadku większości aplikacji Meteor jest idealnym wyborem, ponieważ jest szansą na skrócenie czasu opracowywania i uczestniczenie w rozpoczęciu czegoś wielkiego.