Share
Meteor ist weit mehr als ein schnelles Prototyping-Tool, aber es eignet sich hervorragend für das Prototyping. In diesem Lernprogramm werden wir den Prozess der Umwandlung eines einfachen HTML-Drahtgitters in eine funktionale Anwendung in einer überraschend einfachen Anzahl von Schritten durchlaufen.
Wir erstellen ein einfaches Drahtgitter einer Chatroom-Anwendung. Der Prozess, den wir zu demonstrieren versuchen, beginnt mit einem reinen HTML / CSS-Drahtmodell, das zur Vereinfachung in Meteor ausgeführt wird und das dank der einfachen Meteor-Entwicklung sehr leicht in eine echte Anwendung umgewandelt werden kann.
Hinweis: Dieses Tutorial basiert auf The Meteor Book, einer nächsten Schritt-für-Schritt-Anleitung zum Erstellen von Meteor-Apps. In diesem Buch erfahren Sie, wie Sie eine komplette Social-News-Site für mehrere Benutzer (z. B. Reddit oder Digg) erstellen, angefangen bei der Einrichtung von Benutzerkonten und Benutzerberechtigungen bis hin zur Verwaltung von Abstimmungen und Ranglisten in Echtzeit.
Ein vorhergehendes Meteor-Tutorial hier auf Nettuts + zeigte, wie man Meteor installiert und eine einfache Anwendung mit Hilfe von Meteor Befehlszeilentool. In diesem Tutorial machen wir etwas anders und verwenden Meteorit.
Meteorite ist ein von der Community erstellter Wrapper für Meteor, der es uns ermöglicht, Nicht-Kernpakete zu verwenden, die von anderen Mitgliedern der Meteor-Community erstellt wurden. Obwohl für Meteor selbst ein integriertes Paketsystem von Drittanbietern geplant ist, gibt es zum Zeitpunkt der Erstellung dieses Berichts keine Unterstützung, da die Menge der Pakete, die vom Meteor-Kernteam unterstützt werden, gesperrt ist. Daher wurde Meteorite geschaffen, um es uns (der Community) zu ermöglichen, diese Einschränkung zu umgehen und unsere Pakete auf Atmosphere, dem Meteor-Paket-Repository, zu veröffentlichen.
Für dieses Tutorial werden wir einige dieser Community-geschriebenen Pakete verwenden, also müssen wir Meteorite verwenden. Lassen Sie uns zunächst mit npm installieren.
Hinweis: Auf Ihrem System muss eine Kopie von Node und npm installiert sein. Wenn Sie Hilfe bei diesem Vorgang benötigen, ist die Installationsanleitung von Meteorite ein guter Anfang.
npm Meteorite -g installieren
Unter Windows ist das Einrichten etwas komplizierter. Wir haben ein ausführliches Tutorial auf unserer Website geschrieben, um Ihnen zu helfen.
Jetzt, wo Meteorit installiert ist, verwenden wir die mrt Befehlszeilenprogramm (das für uns installiert wird) anstelle von Meteor. Also lasst uns anfangen! Wir erstellen eine App:
mrt Chat erstellen
Um unsere Wireframe-App zu erstellen, verwenden wir einige Basispakete, mit denen wir einfach angelegte Seiten schnell entwickeln und zwischen ihnen routen können. Lassen Sie uns jetzt die Pakete hinzufügen:
mrt add bootstrap-aktualisiert mrt add font-awesome mrt add router
Nachdem wir nun ein paar schöne Stylings für unsere App gefunden haben, können wir ein Modell des Landeschirms erstellen. Löschen Sie die ursprünglichen HTML-, CSS- und JS-Dateien, die von Meteor erstellt wurden, und erstellen Sie die folgenden beiden Dateien in a Klient Verzeichnis (wir machen noch nichts auf dem Server).
(Alternativ können Sie auch die Schritte aus diesem Repository befolgen.)
Plaudern > zimmerWillkommen beim Meteor Chat
Bitte wählen Sie einen Raum zum Chatten aus oder erstellen Sie einen neuen
client / chat.html
var rooms = [name: 'Meteor Talk', Mitglieder: 3, last_activity: 'vor 1 Minute', Name: 'Meteor Development', Mitglieder: 2, zuletztAktivität: 'Vor 5 Minuten', Name: 'Meteor Core', Mitglieder: 0, Letzte_Aktivität: 'Vor 3 Tagen']; Template.rooms.helpers (rooms: rooms);
client / chat.js
Nachdem Sie dies hinzugefügt haben, sollten Sie die folgende einfache Anwendung (falls falsch) sehen, wenn Sie zu http: // localhost: 3000 wechseln:
Die Daten in der Tabelle der Räume sind Fest Daten, die wir manuell eingegeben haben client / chat.js, Der Vorteil dieses Ansatzes besteht jedoch darin, dass wir HTML in unserem Drahtgittermodell wiederholen können, ohne dass es ausgeschnitten und eingefügt werden muss (was fast überall eine schlechte Idee ist)..
Lassen Sie uns nun eine zweite Seite zusammenstellen. Wir werden den Router verwenden, um zwischen zwei Seitenvorlagen auszuwählen. eine mit der Begrüßungsnachricht und die andere mit einer Meldungsliste für den ausgewählten Raum.
Beginnen wir mit dem Hinzufügen einiger einfacher Routen. Der Router ordnet URLs den Namen der Vorlagen zu. Unser Fall ist ziemlich einfach. Folgendes fügen wir hinzu:
Accentsconagua
Meteor.Router.add ('/': 'home', '/ rooms /: id': 'room'); client / chat.js
> zimmer renderPageWillkommen beim Meteor Chat
Bitte wählen Sie einen Raum zum Chatten aus oder erstellen Sie einen neuen
client / chat.html
Wir nehmen das renderPage Helfer in unserer HTML-Datei, um anzugeben, wo die ausgewählte Vorlage gezeichnet werden soll. Auf diese Weise können wir zwischen den beiden URLs navigieren und den Inhalt auf der rechten Seite ändern. Standardmäßig sehen wir die 'Zuhause' Vorlage, die der Route zugeordnet ist /, und zeigt uns eine nette Nachricht.
Wenn wir eine Vorlage aus der 'Zimmer' routen und einige Links zu bestimmten Räumen hinzufügen, können wir jetzt den Links folgen:
Name
client / chat.html 'Räume' Vorlage
Willkommen in einem Chatroom!
client / chat.html
Dies funktioniert, weil der Router URLs wie localhost: 3000 / rooms / 7 auf die 'Zimmer' Vorlage. Im Moment betrachten wir nicht die ID (in diesem Fall 7), aber wir werden es bald tun!
Nachdem wir einen URL-Chatroom geleitet haben, zeichnen wir einen Chat im Raum. Auch hier machen wir immer noch Spaß, also erstellen wir weiterhin gefälschte Daten in unserer JavaScript-Datei und zeichnen sie mit Handlebars:
var rooms = [Name: 'Meteor Talk', Mitglieder: 3, last_activity: 'Vor 1 Minute', Nachrichten: [Autor: 'Tom', Text: 'Hi there Sacha!', Autor: 'Sacha' , Text: 'Hey Tom, wie geht es dir?', Autor: 'Tom', Text: 'Danke!',], Name: 'Meteor Development', Mitglieder: 2, zuletztAktivität: 'Vor 5 Minuten', Name: 'Meteor Core', Mitglieder: 0, Letzte_Aktivität: 'Vor 3 Tagen']; Template.room.helpers (room: rooms [0]);
client / chat.js
Wir haben also einige Chat-Daten zum ersten Raum hinzugefügt, und wir werden sie einfach (für den Moment) auf der Raumvorlage rendern. So:
#mit RaumWillkommen bei name
#undeine Nachrichten
/mit/jeder author: Text
client / chat.html
Voila! Eine Arbeitsdemonstration unserer Chatroom-Anwendung:
Jetzt kommt der lustige Teil; Wir haben ein einfaches Drahtgitter aus statischen Daten entwickelt, aber dank der Leistungsfähigkeit von Meteor Sammlungen, Wir können es in kürzester Zeit funktionsfähig machen.
Denken Sie daran, dass eine Collection die Daten zwischen dem Browser und dem Server synchronisiert, diese Daten in eine Mongo-Datenbank auf dem Server schreibt und sie an alle anderen verbundenen Clients verteilt. Das klingt genau so, wie wir es für einen Chatraum brauchen!
Zuerst fügen wir eine Sammlung auf dem Client und dem Server hinzu und fügen einige einfache Fixture-Daten hinzu:
(Hinweis: Wir legen die Sammlungsdatei in der lib / Verzeichnis, so dass der Code sowohl auf dem Client als auch auf dem Server verfügbar ist.)
var Rooms = new Meteor.Collection ('Räume'); if (Meteor.isServer && Rooms.find (). count () == 0) var rooms = [name: 'Meteor Talk', Mitglieder: 3, last_activity: 'vor 1 Minute', Meldungen: [author: "Tom", Text: "Hallo Sacha!", Autor: 'Sacha', Text: 'Hey Tom, wie geht es dir?', Autor: 'Tom', Text: 'Guten Dank!', ], Name: 'Meteor Development', Mitglieder: 2, zuletztAktivität: 'Vor 5 Minuten', Name: 'Meteor Core', Mitglieder: 0, Letzte_Aktivität: 'Vor 3 Tagen']; _.each (Räume, Funktion (Raum) Rooms.insert (Raum);); lib / Collections.js
Wir haben unsere Daten in die Sammlung verschoben, sodass wir sie nicht mehr manuell mit unseren Vorlagen-Helfern verbinden müssen. Stattdessen können wir einfach das herausgreifen, was wir aus der Sammlung wollen:
Meteor.Router.add ('/': 'home', '/ rooms /: id': function (id) Session.set ('currentRoomId', id); return 'room'); Template.rooms.helpers (rooms: function () return Rooms.find ();); Template.room.helpers (room: function () return Rooms.findOne (Session.get ('currentRoomId')); client / chat.js
Wir haben hier ein paar Änderungen vorgenommen; Erstens verwenden wir Rooms.find () alle Räume auswählen, die in den Raum übergehen sollen 'Räume' Vorlage. Zweitens in der 'Zimmer' Vorlage wählen wir nur das Einzelzimmer aus, das uns interessiert (Rooms.findOne ()), um die korrekte Sitzung durchzuleiten Ich würde.
Warten Sie mal! Was ist die Sitzung? Wie haben wir das bestanden? Ich würde? Die Sitzung ist Meteors globaler Speicher von Anwendungsstatus. Der Inhalt der Sitzung sollte alles enthalten, was Meteor wissen muss, um die Anwendung genau in demselben Zustand wiederzugeben, in dem sie sich gerade befindet.
Eine der Hauptaufgaben des Routers besteht darin, die Sitzung in einen solchen Zustand zu versetzen, wenn URLs analysiert werden. Aus diesem Grund können wir Routing-Funktionen als Endpunkte für URLs bereitstellen. und wir verwenden diese Funktionen, um Sitzungsvariablen basierend auf dem Inhalt der URL festzulegen. In unserem Fall ist der einzige Status, den unsere App erfordert, in welchem Raum wir uns gerade befinden - den wir aus der URL heraus analysieren und in der App speichern 'currentRoomId' Sitzungsvariable. Und es funktioniert!
Schließlich müssen wir unsere Links richtig machen. so können wir tun:
Name
client / chat.html
Nun, da wir eine Sammlung mit unseren Raumdaten haben, können wir sie nach Belieben ändern. Wir können neue Chats zu einem Raum hinzufügen:
Rooms.update (Session.get ('currentRoomId'), $ push: messages: author: 'Sacha', Text: 'Gut zu hören ...'); 
Oder wir können sogar einen neuen Raum hinzufügen:
Rooms.insert (name: 'A New Room', Mitglieder: 0, last_activity: 'Never');
Die nächste Herausforderung besteht darin, die Formulare zu verdrahten, um solche Transformationen durchzuführen, die wir dem Leser (oder vielleicht dem nächsten Tutorial) als Übung überlassen.!
Wenn Sie mehr über Meteor erfahren möchten, lesen Sie unser nächstes Buch!
