Meteor-Tutorial: Erstellen von Echtzeit-Webanwendungen mit Meteor

Veröffentlicht: 2022-03-11

Meteor ist ein Full-Stack-JavaScript-Framework für Web- und mobile Anwendungen. Es gibt es seit 2011 und es hat sich unter Meteor-Entwicklern einen guten Ruf als ideale, benutzerfreundliche Lösung für schnelles Prototyping erworben. In letzter Zeit haben Entwickler jedoch erkannt, dass Meteor nicht mehr nur für das Prototyping geeignet ist: Es ist bereit, für die kommerzielle Entwicklung verwendet zu werden. Mit dem Arsenal an Paketen, das es bereitstellt, der soliden Grundlage von mongoDB/node.js, auf die es sich stützt, und der Codierungsflexibilität, die es bietet; Meteor macht es einfach, robuste, sichere Echtzeit-Webanwendungen zu erstellen, die alles von der Browser-App bis zum Server oder zur Datenbank handhaben.

Dieses Meteor-Tutorial führt Sie durch die Erstellung einer einfachen Webanwendung in Meteor – einem einfachen Katalog, mit dem sich Benutzer anmelden und eine Liste von Büchern verwalten können.

Warum Meteo verwenden? Die kurze Antwort lautet: „Weil Meteor Spaß macht“. Es macht die Entwicklung von Webanwendungen einfach. Es ist leicht zu erlernen und ermöglicht es Ihnen, sich mehr auf die Funktionalität Ihrer Anwendung zu konzentrieren als auf die Grundlagen der Synchronisierung von Daten und der Bereitstellung von Seiten.

Es hat auch viele Verhaltensweisen, die bequem integriert sind. Meteor führt automatisch Live-Updates durch, sodass Datenänderungen sofort in Ihrem Browserfenster angezeigt werden und sogar Codeänderungen an der Anwendung selbst in „Echtzeit“ an alle Browser und Geräte übertragen werden. Meteor verfügt über eine integrierte Latenzkompensation, ist einfach bereitzustellen und verfügt über einfach zu installierende „Pakete“, die alle Arten von Funktionen verarbeiten.

Obwohl es sich um ein relativ neues Framework handelt, bauen bereits viele Startups Meteor-Apps, darunter relativ große Dienste wie Respondly und Telescope.

Meteor Installation und Gerüstbau

Die Installation von Meteor auf *nix-Systemen ist ein Einzeiler:

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

Obwohl es immer noch keine offizielle Unterstützung gibt, kommt ihre Vorschau für Windows gut voran. Gerüchten zufolge wird die Windows-Unterstützung mit 1.1 ausgeliefert, das im April oder Mai 2015 erscheinen soll. Wie Sie es von einem intelligenten Framework wie Meteor erwarten können, erfordert das Bootstrapping einer Anwendung den Aufruf einer einzigen Befehlszeile:

 meteor create book-list

Dadurch wird ein Verzeichnis namens „book-list“ erstellt und mit einigen Boilerplates und abhängigem Code gefüllt. Um die Anwendung auszuführen, geben Sie das neu erstellte Verzeichnis ein und führen Sie Folgendes aus:

 meteor

Öffnen Sie http://localhost:3000 in Ihrem Webbrowser und Sie sehen Folgendes:

Sie können sich auch die „Version 0“ unserer Anwendung auf MeteorPad ansehen, einer Website, die JSFiddle for Meteor: Book List: Default App ähnelt

Meteor speichert seine Ansichten in HTML-Dateien. Wenn wir „book-list.html“ öffnen, sehen wir:

 <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 verwendet „Blaze“, eine Templating-Engine, um Antworten aus diesen HTML-Dateien zu rendern. Die doppelten geschweiften Klammern sollten jedem bekannt sein, der Handlebars.js (oder andere ähnliche Templating-Engines) verwendet hat, und sie erfüllen hier eine ähnliche Funktion. Blaze untersucht die Ausdrücke in jedem Paar doppelter geschweifter Klammern und ersetzt jeden durch den Wert, den diese Ausdrücke ergeben.

Dieses einfache Beispielprogramm hat nur zwei doppelt geschweifte Ausdrücke:

Das erste, „{{> hello}}“, weist Blaze an, eine Vorlage namens „hello“ einzufügen. Diese Vorlage wird am Ende der Datei im Abschnitt <template name="hello"> definiert.
Der zweite, „{{counter}}“, ist etwas komplizierter. Um zu sehen, woher dieser „Zähler“-Wert kommt, müssen wir „book-list.js“ öffnen:

 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 }); }

Hier sind einige Dinge erklärungsbedürftig. Zuerst die Aufteilung in „if (Meteor.isClient)“ und „if (Meteor.isServer)“. Denken Sie daran, dass Meteor ein Full-Stack-Framework ist, sodass der von Ihnen geschriebene Code sowohl auf dem Server als auch auf dem Client ausgeführt wird. Mit diesen Bedingungen können wir das einschränken: Der erste Block läuft nur auf dem Client und der zweite nur auf dem Server.

Zweitens gibt es den „Session.setDefault“-Aufruf – dieser initialisiert eine Sitzungsvariable namens „counter“ im Browser. Sitzungsvariablen verhalten sich ein bisschen wie Globals in Meteor (im Guten wie im Bösen). Diese Sitzungsvariable wird jedoch nicht direkt in „{{counter}}“ angezeigt. Stattdessen ist dieser „Zähler“-Ausdruck ein „Helfer“, der im Abschnitt „Template.hello.helpers“ definiert ist. Dieser Helfer greift einfach den Wert der Sitzungsvariablen und gibt ihn zurück.

Beachten Sie, dass der Helfer „reaktiv“ ist. Das bedeutet, dass Meteor jedes Mal, wenn sich die Sitzungsvariable ändert, automatisch diese Hilfsfunktion erneut ausführt, die darauf verweist, und Blaze den Browser automatisch mit dem neuen Inhalt aktualisiert.

Der Client-Code überwacht auch Ereignisse über „Template.hello.events“. Wir identifizieren das Ereignis nach Ereignistyp und Selektor (in diesem Fall „Klick-Schaltfläche“) und teilen Meteor dann mit, was dieses Ereignis tun soll. In diesem Fall wird die Sitzungsvariable erhöht, wodurch die Hilfsfunktion erneut ausgeführt und der Inhalt wiederum neu gerendert wird.

Statische Daten anzeigen

All dies ist gut und schön, aber es ist nicht die Meteor-Anwendung, die wir für dieses Tutorial wollen.

Beginnen wir mit der Optimierung dieser Anwendung – wir zeigen eine statische, fest codierte Liste von Büchern an. Im Moment speichern wir die Liste der Bücher in einer Sitzungsvariablen. Im „isClient“-Code verwenden wir „Template.hello.rendered“, um die Sitzungsvariable festzulegen, sobald die bookList-Vorlage gerendert wird:

 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"} ]); };

Dann geben wir diese Sitzungsvariable mit einem neuen Helfer in der „Hallo“-Vorlage zurück:

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

Und zeigen Sie es auf dem Bildschirm über variable Interpolation in der Vorlage „Hallo“ an:

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

Sie können diesen Code in Aktion auf Meteorpad: Book-List: Show Session Variable überprüfen

Das erste, was auffällt, ist, dass der Meteor-Server die Änderungen an unserer Codebasis automatisch erkannt, den neuen Code an die Clients weitergegeben und den Client zum Neuladen aufgefordert hat. Selbst nachdem wir eine Anwendung bereitgestellt haben, können wir Änderungen bereitstellen und unsere Clients automatisch über Hot-Code-Pushs aktualisieren.

Bisher bekommen wir Folgendes:

Hoppla, wir zeigen die Daten falsch an. Blaze bekommt hier Punkte für Genauigkeit (warum ja, es ist eine Reihe von Objekten), aber wir müssen etwas cleverer sein, wenn wir unsere Bücherliste auf nützliche Weise anzeigen wollen. Glücklicherweise macht es Blaze sehr einfach, mit Arrays von Daten zu arbeiten, indem die Direktive „#each“ verwendet wird:

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

In Blaze funktioniert „#each“ ein bisschen wie die „ng-repeat“-Direktive von Angular – es durchläuft die Array-Struktur, setzt den aktuellen Kontext auf das aktuelle Objekt im Array und zeigt wiederholt den HTML-Code innerhalb der „{{#each …}}“. So sieht unsere Bücherliste jetzt aus:

Auf MeteorPad: Sitzungsvariable richtig anzeigen

Etwas Aufräumen

Bevor wir fortfahren, lassen Sie uns unseren Code ein wenig aufräumen.

Meteor bietet enormen Spielraum bei der Organisation Ihrer Codebasis. Wie Sie sehen werden, gibt es nur wenige feste Regeln: Meteor findet es überall, wo Sie Ihr HTML und JavaScript ablegen. Diese Flexibilität ist nett, bedeutet aber, dass es eher an Ihnen liegt, Ihren Code sinnvoll zu organisieren, damit Sie nicht ein riesiges Durcheinander aufrechterhalten müssen.

Lassen Sie uns zunächst diese „Hallo“-Vorlage in etwas Sinnvolles umbenennen, z. B. „bookList“, und den Boilerplate-HTML durch diesen ersetzen:

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

Zweitens teilen wir die Teile „Client“ und „Server“ in separate Dateien auf. In unserem Anwendungsverzeichnis richten wir ein „client“-Unterverzeichnis und ein „server“-Unterverzeichnis ein – Meteor weiß automatisch, dass es die „/client/“-Dateien auf dem Client und die „/server/“-Dateien auf dem ausführen soll Server. Es ist eine gute Konvention, Vorlagencode in eine nach der Vorlage benannte JavaScript-Datei abzulegen, also fügen wir unseren Client-Code in „client/bookList.js“ ein. Wir können unseren derzeit leeren Server-Startup-Code in „server/startup.js“ einfügen. Lassen Sie uns zum Schluss aus dem „

Beachten Sie, dass Meteor auch nach all diesen Umstellungen immer noch automatisch alle unsere HTML- und JavaScript-Dateien findet. Solange sich eine Datei irgendwo in „/client/“ befindet, weiß Meteor, dass sie auf dem Client ausgeführt werden muss. Solange sich eine Datei irgendwo in „/server/“ befindet, weiß Meteor, dass sie auf dem Server ausgeführt werden muss. Auch hier ist es Sache des Entwicklers, die Dinge zu organisieren.

Also sollte unser Code jetzt so aussehen:

Buchliste.html:

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

client/bookList.html:

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

client/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'); } });

server/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");

Wechseln Sie im Browserfenster, das auf http://localhost:3000 zeigt, zur Entwicklerkonsole und überprüfen Sie den Wert von „Books“. Es sollte jetzt eine Mongo-Sammlung werden! Versuchen Sie, „Books.find().fetch()“ auszuführen, und Sie erhalten ein leeres Array – was sinnvoll ist, da wir ihm noch keine Bücher hinzugefügt haben. Wir können versuchen, Elemente in der Konsole hinzuzufügen:

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

Das Hinzufügen von Dingen in der Konsole ist ziemlich mühsam. Stattdessen richten wir die Dinge so ein, dass wir beim Start des Servers automatisch Fixture-Daten in die Datenbank einfügen. Gehen wir also zurück zu „server/startup.js“ und fügen Folgendes hinzu:

 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"}); } });

Wenn jetzt der Server startet und keine Daten vorhanden sind, fügen wir die Fixture-Daten hinzu. Wir können dies überprüfen, indem wir zu unserem Terminal zurückkehren, den Meteor-Server stoppen und diesen Befehl ausführen:

 meteor reset

Hinweis: Sie werden diesen Befehl selten brauchen, da er die von Meteor verwendete Datenbank zurücksetzt – dh löscht . Wenn Ihre Meteor-Anwendung über Benutzerdaten in der Datenbank verfügt, sollten Sie diesen Befehl nicht ausführen. Aber in diesem Fall löschen wir einfach alle Testdaten, die wir haben.

Jetzt starten wir den Server neu:

 meteor

Beim Start führt Meteor die Startroutine aus, stellt fest, dass die Datenbank leer ist, und fügt die Fixture-Daten hinzu. Wenn wir an dieser Stelle zur Konsole gehen und „Books.find().fetch()“ eingeben, erhalten wir die fünf Bücher, die wir zuvor hatten.

Für diesen Schritt müssen nur noch die Bücher auf dem Bildschirm angezeigt werden. Glücklicherweise ist das so einfach wie das Ersetzen von „return Session.get('books');“ mit folgendem im „Bücher“-Helfer:

 return Books.find();

Und wir sind wieder im Geschäft! Die Anwendung zeigt jetzt Daten von einem Datenbankcursor statt von der Sitzungsvariablen an.

Überprüfen Sie es auf MeteorPad: Umzug in die Datenbank

Sicherheitsbedenken

Ich werde dies voranstellen, indem ich sage: „Tu das nicht“.

Was würde Ihrer Meinung nach passieren, wenn jemand diese App in seinem Browser startet, zur Konsole geht und „Books.remove({})“ eingibt?

Die Antwort lautet: Sie würden die Sammlung auslöschen.

Das ist also ein ziemlich großes Sicherheitsproblem – unsere Benutzer haben zu viel Zugriff auf unsere Datenbank. Jeder Client kann auf die gesamte Datenbank zugreifen. Darüber hinaus kann jeder Client Änderungen an der gesamten Datenbank vornehmen, einschließlich der Datenlöschung „.remove({})“.

Das ist nicht gut, also beheben wir es.

Meteor verwendet sogenannte „Pakete“, um Funktionalität hinzuzufügen. Was Module für Node.js und Edelsteine für Ruby sind, sind Pakete eine gebündelte Funktionalität für Meteor. Es gibt Pakete für alle möglichen Dinge. Sehen Sie sich Atmosphäre.js an, um das verfügbare Angebot zu durchsuchen.

Die standardmäßige Meteor-App, die wir mit „meteor create“ erstellt haben, enthält zwei Pakete namens „autopublish“ und „insecure“. Das erste Paket sorgt dafür, dass Clients automatisch auf die gesamte Datenbank zugreifen können, und das zweite sorgt dafür, dass Benutzer alle Aktionen für diese Datenbank ausführen können.

Lassen Sie uns diese entfernen. Wir können das tun, indem wir Folgendes aus dem App-Verzeichnis ausführen:

 meteor remove autopublish insecure

Wenn das erledigt ist, sehen Sie, dass die Buchlistendaten vom Bildschirm verschwinden (da Sie keinen Zugriff mehr darauf haben), und wenn Sie versuchen, „Books.insert“ aufzurufen, erhalten Sie den Fehler: „Einfügen fehlgeschlagen : Zugriff verweigert". Auf MeteorPad: Sicherheits-Overkill

Wenn Sie nichts anderes aus diesem Meteor-Tutorial mitnehmen, denken Sie bitte an Folgendes: Wenn Sie eine Meteor-App bereitstellen, stellen Sie sicher, dass Sie die Pakete „autopublish“ und „insecure“ entfernen. Meteor hat viele gute Sicherheitsvorkehrungen, aber alle sind umsonst, wenn Sie diese beiden Pakete installiert lassen.

Warum also schließt Meteor diese Pakete überhaupt automatisch ein, wenn sie ein solches Sicherheitsrisiko darstellen? Der Grund dafür ist, dass diese beiden Pakete insbesondere Anfängern den Einstieg erleichtern - Sie können die Datenbank einfach von der Konsole eines Browsers aus debuggen und optimieren. Aber es ist eine gute Praxis, Autopublish und Insecure so schnell wie möglich aufzugeben.

Veröffentlichen und abonnieren

Also haben wir diese klaffende Sicherheitslücke geschlossen, aber wir haben zwei Probleme eingeführt. Erstens haben wir jetzt keinen Zugriff auf die Datenbank. Zweitens haben wir keine Möglichkeit, mit der Datenbank zu interagieren.

Lassen Sie uns hier das erste Problem angehen. Meteor bietet sicheren Zugriff auf eine Datenbank, indem der Server eine Teilmenge der Datenbank „veröffentlicht“ und der Client diese Veröffentlichung „abonniert“.

Zuerst erstellen wir „/server/publications.js“:

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

Und wir erstellen „/client/subscriptions.js“:

 Meteor.subscribe('books');

Schauen Sie es sich auf MeteorPad an: Veröffentlichen und abonnieren

Der Server „veröffentlicht“ einen Cursor, der Zugriff auf alle Daten hat, und der Client am anderen Ende „abonniert“ ihn. Der Client verwendet dieses Abonnement, um eine gespiegelte Kopie der Datenbank mit allen Daten des Cursors zu füllen. Wenn wir auf „Books.find().fetch()“ zugreifen, sehen wir alle fünf Objekte, und wir sehen sie wie zuvor auf dem Bildschirm angezeigt.

Der Unterschied besteht jetzt darin, dass es wirklich einfach ist, den Zugriff der Clients einzuschränken. Versuchen Sie, die Publikation „find()“ auf eine Teilmenge der Daten umzustellen:

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

Jetzt sieht der Kunde immer nur drei der fünf Bücher, und es gibt keine Möglichkeit, an den Rest zu gelangen. Dies ist nicht nur ein großer Sicherheitsvorteil (ich kann die Bankkonten aller anderen nicht sehen), sondern Sie können es auch verwenden, um Daten zu verteilen und eine Überlastung eines Clients zu vermeiden.

Neue Bücher hinzufügen

Wir haben gesehen, wie man Clients auf begrenzte, sichere Weise Lesezugriff auf die Datenbank gewährt. Schauen wir uns nun das zweite Problem an: Wie lassen wir Benutzer die Datenbank ändern, ohne ihnen zu erlauben, alles zu tun, was sie wollen? Das Entfernen des unsicheren Pakets hat dazu geführt, dass Clients überhaupt keinen Zugriff mehr haben - versuchen wir erneut, das Hinzufügen von Büchern zuzulassen. In Meteor tun wir dies, indem wir dem Server eine „Methode“ hinzufügen. Lassen Sie uns eine Methode, die ein neues Buch hinzufügt, zu „/lib/collections/books.js“ hinzufügen:

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

Wie Sie sehen können, nimmt dies „bookData“ auf – in diesem Fall ist das ein Objekt mit den Feldern „title“ und „author“ – und fügt es der Datenbank hinzu. Sobald Ihr Client neu lädt, können wir diese Methode vom Client aus aufrufen. Sie können zur Konsole gehen und Folgendes eingeben:

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

Und schwupps! Sie erhalten ein weiteres Buch auf der Bücherliste. Die Verwendung der Konsole ist unerträglich umständlich, also fügen wir am Ende der Vorlage „bookList“ ein einfaches Formular hinzu, mit dem wir neue Bücher hinzufügen können:

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

Und wir können das mithilfe eines Ereignisfalls mit JavaScript verbinden, wie wir es in der ursprünglichen Testanwendung hatten:

 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}) } });

Sie können dies auf MeteorPad: Methods in Aktion sehen

Als wir unsicher und automatisch veröffentlicht hatten, konnten Kunden auf die gesamte Datenbank zugreifen und diese ändern. Ohne unsichere und automatische Veröffentlichung, aber mit Veröffentlichungen, Abonnements und Methoden können Clients auf kontrollierte Weise auf die Datenbank zugreifen und mit ihr interagieren.

Nebenbei bemerkt: Sie können Sicherheitsprobleme in Meteor auch angehen, indem Sie „Erlauben- und Verweigern-Regeln“ verwenden. Mehr über diese und einige Gründe, warum ich stattdessen den oben genannten Ansatz bevorzuge, finden Sie unter discovermeteor.com.

Benutzerauthentifizierung

Es sieht vielleicht so aus, als wären wir gerade zu unserem Ausgangspunkt zurückgekehrt, aber es gibt einen wichtigen Unterschied: Es ist jetzt wirklich einfach für uns, den Zugriff auf die Datenbank einzuschränken. Um zu sehen, wie das funktioniert, versuchen wir, Benutzer zu dieser App hinzuzufügen. Wir fügen unserer App ein Anmeldesystem hinzu, und anstatt alle Clients mit einer systemweiten Liste von Büchern arbeiten zu lassen, werden wir dafür sorgen, dass jeder Benutzer nur seine eigene Bücherliste hinzufügen oder lesen kann.

Gehen Sie in das App-Verzeichnis und installieren Sie zwei Pakete:

 meteor add accounts-ui accounts-password

Dort. Sie haben der App gerade ein Anmeldesystem hinzugefügt. Jetzt müssen wir nur noch die Login-Benutzeroberfläche zu book-list.html hinzufügen. Setzen Sie diese einzelne Zeile oben auf den Körper:

 {{> loginButtons}}

Sie sollten oben auf dem Bildschirm eine Anmeldeaufforderung sehen:

Beachten Sie, dass Sie nach einer E-Mail-Adresse und einem Passwort gefragt werden, wenn Sie auf den Anmeldelink klicken. Wir können das auf ein einfaches Anmeldesystem mit Benutzername/Passwort umstellen, indem wir „/client/config.js“ mit folgendem Inhalt erstellen:

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

An diesem Punkt können Sie „Meteor.userId()“ in die Konsole eingeben und es wird „null“ zurückgegeben. Sie können versuchen, auf den Link zu klicken, um ein Konto zu erstellen. Der Aufruf von „Meteor.userId()“ sollte nun einen ID-String zurückgeben. Der Server hat Zugriff auf dieselben Informationen (als „this.userId“), daher ist es trivial, die Methode „Bücher hinzufügen“ dazu zu bringen, dass sich der Benutzer anmeldet und ein userID-Feld enthält:

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

Jetzt bleibt nur noch, den Client einzuschränken und nur die Bücher anzuzeigen, die dieser Benutzer hinzugefügt hat. Wir nutzen die Fähigkeit der Veröffentlichung, einzugrenzen, worauf der Kunde Zugriff hat:

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

Jetzt findet die Publikation nur Bücher von diesem bestimmten Benutzer. Wir können sogar auf die userId von Blaze-Ausdrücken als „{{currentUser}}“ zugreifen; und wir können dies mit einer „{{#if}}“-Anweisung (die genau das tut, was Sie denken) verwenden, um Daten nur anzuzeigen, wenn der Benutzer angemeldet ist:

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

Sehen Sie sich das Endergebnis auf MeteorPad: Users an

Einsatz

Jetzt können wir diese Meteor-Anwendung im Internet bereitstellen. Wir tun dies, indem wir auf einem Terminal in das Anwendungsverzeichnis gehen und Folgendes ausführen:

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

Stellen Sie sicher, dass Sie „<Name Ihrer App>“ durch einen tatsächlichen Kurznamen für die Anwendungsinstanz ersetzen. Wenn Sie diesen Befehl ausführen, werden Sie aufgefordert, ein Konto bei Meteor einzurichten, und dann wird Ihre neue Anwendung auf den Testservern von Meteor bereitgestellt, damit Sie sie im Internet ausprobieren können.

Für eine schnelle Demo ist diese meteor.com-Lösung alles, was Sie brauchen. Das Meteor-Team hat keine expliziten Beschränkungen für Speicherplatz oder Bandbreite auf seinen Servern angekündigt. Die einzige bemerkenswerte Einschränkung besteht darin, dass die Website einige Sekunden braucht, um für den nächsten Benutzer hochzufahren, wenn Ihre App längere Zeit nicht verwendet wird.

Allerdings ist meteor.com nicht für den kommerziellen Gebrauch bestimmt. Aber wenn Sie in die Produktion gehen, gibt es Plattform-as-a-Service-Unternehmen wie Modulus und Digital Ocean, die die Bereitstellung von Meteor-Apps einfach machen. Wenn Sie eine Meteor-App auf Ihrem eigenen Server bereitstellen möchten, macht „meteor up“ auch diesen Prozess unkompliziert.

Nächste Schritte

Glückwünsche! In Ihrem Bestreben, Meteor zu lernen, haben Sie jetzt eine sehr einfache Echtzeit-Meteor-Webanwendung erstellt und bereitgestellt. Offensichtlich ist dies nur ein kleiner erster Schritt in ein ganzes Universum von Features und Funktionen. Wenn Ihnen gefällt, was Sie bisher gesehen haben, empfehle ich Ihnen wärmstens Your First Meteor Application von David Turnbull, das die Leser durch die Erstellung einer komplizierteren Anwendung führt und dabei weitere Informationen zu Meteor-Features enthält. Es ist als Kindle-Buch zu einem kleinen Preis und als kostenloses PDF auf der Website von Turnbull erhältlich.

Sehen Sie sich auch die Pakete an, die für Meteor verfügbar sind. In neun von zehn Fällen ist die Antwort auf „Wie mache ich <x> in Meteor?“ ist „dafür gibt es ein Paket“. „Wie füge ich Routing zu meiner Anwendung hinzu?“ Sie verwenden Iron Router. „Wie stelle ich eine RESTful-API bereit?“ Sie verwenden RESTivus. „Wie füge ich Unit-Tests hinzu?“ Sie verwenden Velocity. „Wie füge ich Schemavalidierungen hinzu?“ Sie verwenden Collection2. Sie können sich leicht auf Atmosphere.js verlieren, wenn Sie sich alle verfügbaren Pakete ansehen.

Warum nicht Meteor verwenden?

Wie Sie in diesem Tutorial sehen können, ist Meteor einfach und macht Spaß, Anwendungen zu schreiben, aber ich wäre nachlässig, wenn ich die Nachteile nicht erwähnen würde.

Meteor ist noch relativ unreif. Es erreichte im vergangenen Oktober 1,0, und das führt zu einigen Problemen. Wenn Sie etwas Undurchsichtiges tun möchten, hat möglicherweise noch niemand ein Paket für diese Funktionalität geschrieben. Die Pakete, die existieren, haben eher Fehler, einfach weil sie noch nicht lange genug auf dem Markt sind, um alle Probleme aufzuspüren.

Skalierung kann auch bei Meteor etwas unbekannt sein. Es gibt viele Meteor-Sites, die sich auf eine angemessene Anzahl von Benutzern skalieren lassen, aber nur wenige sehr große Sites – nichts in der Größenordnung von Facebook oder LinkedIn, mit Dutzenden oder Hunderten Millionen von Benutzern.

Für die meisten Anwendungen ist Meteor jedoch die perfekte Wahl, da es eine Chance ist, die Entwicklungszeit zu verkürzen und am Beginn von etwas Großartigem teilzuhaben.