Meteor is veel meer dan een snelle prototyping tool, maar het is zeker geweldig voor prototyping. In deze zelfstudie doorlopen we het proces van het eenvoudig omzetten van een eenvoudig HTML-draadframe in een functionele toepassing in een verrassend eenvoudig aantal stappen.

We zullen een eenvoudig draadframe van een chatroomtoepassing maken. Het proces dat we proberen aan te tonen is om te beginnen met een puur HTML / CSS-draadframe, gedaan in Meteor voor gemak, dat dan heel gemakkelijk kan worden omgezet in een echte applicatie, dankzij het gemak van Meteor-ontwikkeling.

Notitie: Deze tutorial is aangepast van The Meteor Book, een aankomende stapsgewijze handleiding voor het opnieuw bouwen van Meteor-apps. Het boek zal je helpen bij het bouwen van een complete multi-user sociale nieuwssite (denk aan Reddit of Digg), beginnend bij het instellen van gebruikersaccounts en gebruikersrechten, helemaal tot het beheren van real-time stemmen en ranglijsten.

---

Een meer gecompliceerde app instellen

Een eerdere Meteor-tutorial hier op Nettuts + liet zien hoe Meteor te installeren en een eenvoudige applicatie te bouwen met behulp van de meteoor opdrachtregelprogramma. In deze zelfstudie gaan we dingen een beetje anders doen en Meteorite gebruiken.

Meteorite is een door de community gemaakte wrapper voor Meteor waarmee we niet-kernpakketten kunnen gebruiken die zijn gemaakt door andere leden van de Meteor-community. Hoewel er een ingebouwd pakket van derden is gepland voor Meteor zelf, is er vanaf het moment van schrijven geen ondersteuning, maar blokkeer de verzameling pakketten die door het kernteam van Meteor worden ondersteund. Dus Meteorite is gemaakt om ons (de gemeenschap) in staat te stellen deze beperking te omzeilen en onze pakketten te publiceren op Atmosphere, de Meteor-pakketrepository.

Voor deze zelfstudie gebruiken we enkele van die geschreven communitypakketten, dus we moeten Meteorite gebruiken. Om te beginnen, laten we het installeren, met behulp van npm.

Opmerking: u moet een kopie van Node en npm op uw systeem hebben geïnstalleerd. Als u hulp nodig hebt bij dit proces, is de installatie-instructies van Meteorite een goed begin.

 npm installeert Meteorite -g

Als je Windows gebruikt, is het instellen van dingen een beetje ingewikkelder. We hebben een gedetailleerde zelfstudie op onze site geschreven om u te helpen.

Nu Meteorite is geïnstalleerd, gebruiken we de mrt opdrachtregelprogramma (dat het voor ons installeert) in plaats van meteoor. Dus laten we beginnen! We zullen een app maken:

 mrt maak een chat

---

Pakketten en wireframes

Om onze wireframe-app te maken, zullen we een aantal basispakketten gebruiken waarmee we snel snel en eenvoudig pagina's kunnen opstellen en kunnen routeren. Laten we de pakketten nu toevoegen:

 mrt voeg bootstrap-bijgewerkte mrt voeg font-awesome mrt voeg router toe

---

Stap 1: Een voorpagina

Nu we een mooie styling voor onze app hebben gevonden, kunnen we een mockup van het landingsscherm maken. Verwijder de oorspronkelijke HTML-, CSS- en JS-bestanden die door Meteor zijn gemaakt en maak de volgende twee bestanden in een cliënt directory (we doen nog niets op de server).

(Je kunt ook de stappen van deze repository volgen.)

     
 > kamers 
 
Welkom bij Meteor Chat
 
Selecteer een kamer om in te chatten of maak een nieuwe kamer
 
 
  

client / chat.html

 var rooms = [name: 'Meteor Talk', leden: 3, last_activity: '1 minuut geleden', naam: 'Meteor Development', leden: 2, laatsteactiviteit: '5 minuten geleden', naam: 'Meteor Core', leden: 0, last_activity: '3 dagen geleden']; Template.rooms.helpers (rooms: rooms));

client / chat.js

Nadat u dit hebt toegevoegd, ziet u de volgende eenvoudige (indien nep) toepassing wanneer u bladert naar http: // localhost: 3000:

De gegevens in de tabel met kamers zijn vast gegevens die we handmatig hebben ingevoerd client / chat.js, maar het voordeel van deze aanpak is dat het ons in staat stelt om HTML te herhalen in ons draadframe zonder te hoeven knippen en plakken (wat bijna universeel een slecht idee is).

---

Stap 2: een pagina met chatrooms

Laten we nu een tweede pagina aansluiten. We gaan de router gebruiken om te kiezen tussen twee paginasjablonen; één met het welkomstbericht en de andere met een berichtenlijst voor de geselecteerde ruimte.

Laten we beginnen met het toevoegen van enkele eenvoudige routes. De router werkt door URL's toe te wijzen aan sjabloonnamen. Onze zaak is vrij eenvoudig; Dit is wat we toevoegen:

 Meteor.Router.add ('/': 'home', '/ rooms /: id': 'room');

client / chat.js

  
 > kamers renderPage 
  

client / chat.html

Wij gebruiken de RenderPage help in ons HTML-bestand om aan te geven waar we willen dat de geselecteerde sjabloon tekent, en we kunnen, net als dat, bladeren tussen de twee URL's en de inhoud aan de rechterkant wijzigen. Standaard zien we de 'huis' sjabloon, die is toegewezen aan de route /, en toont ons een leuke boodschap.

Als we een sjabloon toevoegen van de 'kamer' route en voeg een aantal links naar specifieke kamers toe, we kunnen nu links volgen:

 naam

client / chat.html 'kamers'-sjabloon

client / chat.html

Dit werkt omdat de router urls, zoals localhost: 3000 / rooms / 7, toewijst aan de 'kamer' sjabloon. Voor nu zullen we niet naar de ID kijken (7, in dit geval), maar dat zullen we binnenkort doen!

---

Stap 3: Sommige gegevens in de chatruimte plaatsen

Nu we een URL-chatroom hebben gerouteerd, kunnen we eigenlijk een chat in de ruimte tekenen. Nogmaals, we zijn nog steeds aan het spotten, dus we zullen valse gegevens blijven maken in ons JavaScript-bestand en het tekenen met Handlebars:

 var rooms = [name: 'Meteor Talk', leden: 3, last_activity: '1 minuut geleden', berichten: [author: 'Tom', text: 'Hi there Sacha!', author: 'Sacha' , tekst: 'Hey Tom, hoe gaat het met je?', auteur: 'Tom', tekst: 'Good thanks!',], naam: 'Meteor Development', leden: 2, laatsteactiviteit: '5 minuten geleden', naam: 'Meteor Core', leden: 0, last_activity: '3 dagen geleden']; Template.room.helpers (room: rooms [0]);

client / chat.js

Daarom hebben we wat chatgegevens toegevoegd aan de eerste ruimte en zullen we deze gewoon elke keer (voorlopig) weergeven op de ruimtesjabloon. Zo:

client / chat.html

Voila! Een werkende demonstratie van onze chatroom-applicatie:

---

Stap 4: gebruik van echte gegevens die door een verzameling worden ondersteund

Nu komt het leuke gedeelte; we hebben eenvoudig genoeg een draadframe met statische gegevens gebouwd, maar dankzij de kracht van Meteor collecties, we kunnen het binnen de kortste keren functioneel maken.

Vergeet niet dat een verzameling zorgt voor het synchroniseren van gegevens tussen de browser en de server, die gegevens naar een Mongo-database op de server schrijft en deze naar alle andere verbonden clients distribueert. Dit klinkt als precies wat we nodig hebben voor een chatroom!

Laten we eerst een verzameling toevoegen aan de client en de server en er enkele eenvoudige fixture-gegevens aan toevoegen:

(Opmerking: we plaatsen het verzamelingenbestand in de lib / directory, zodat de code zowel op de client als op de server beschikbaar is.)

 var Rooms = nieuwe Meteor.Collection ('kamers'); if (Meteor.isServer && Rooms.find (). count () == 0) var rooms = [name: 'Meteor Talk', leden: 3, last_activity: '1 minuut geleden', berichten: [author: 'Tom', tekst: 'Hallo daar Sacha!', Auteur: 'Sacha', tekst: 'Hey Tom, hoe gaat het met je?', Auteur: 'Tom', tekst: 'Good thanks!', ], naam: 'Meteoor ontwikkeling', leden: 2, laatsteactiviteit: '5 minuten geleden', naam: 'Meteor Core', leden: 0, last_activity: '3 dagen geleden']; _.each (kamers, functie (room) Rooms.insert (room);); 

lib / collections.js

We hebben onze gegevens verplaatst naar de verzameling, dus we hoeven deze niet langer handmatig in te voegen in onze sjabloondokers. In plaats daarvan kunnen we gewoon pakken wat we uit de verzameling willen:

 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

We hebben hier een paar wijzigingen aangebracht; Ten eerste gebruiken we Rooms.find () om alle kamers te selecteren om over te gaan naar de 'Kamers' sjabloon. Ten tweede, in de 'kamer' sjabloon, selecteren we gewoon de eenpersoonskamer waarin we geïnteresseerd zijn (Rooms.findOne ()), gebruik de sessie om het juiste door te geven ID kaart.

Wacht even! Wat is de sessie? Hoe hebben we de ID kaart? De sessie is de wereldwijde winkel van Meteor applicatiestatus. De inhoud van de sessie moet alles bevatten wat Meteor moet weten om de toepassing opnieuw te tekenen in exact dezelfde staat als waarin het zich nu bevindt.

Een van de primaire doelen van de router is om de sessie in een dergelijke status te krijgen bij het parseren van URL's. Om deze reden kunnen we routingfuncties als eindpunten voor URL's bieden; en we gebruiken deze functies om sessievariabelen in te stellen op basis van de inhoud van de URL. In ons geval is de enige status die onze app nodig heeft, in welke kamer we momenteel zijn - die we ontleden uit de URL en opslaan in de 'CurrentRoomId' sessie variabele. En het werkt!

Ten slotte moeten we onze links goed krijgen; dus we kunnen doen:

 naam

client / chat.html

Wijzigen van de gegevens

Nu we een collectie hebben die onze kamergegevens bevat, kunnen we deze naar eigen inzicht wijzigen. We kunnen nieuwe chats aan een ruimte toevoegen, zoals:

 Rooms.update (Session.get ('currentRoomId'), $ push: messages: author: 'Sacha', text: 'Good to hear ...');

Of we kunnen zelfs een nieuwe kamer toevoegen:

 Rooms.insert (name: 'A New Room', members: 0, last_activity: 'Never');

De volgende uitdaging is om de formulieren te verbinden om dergelijke transformaties uit te voeren, die we als een oefening naar de lezer (of misschien de volgende tutorial) zullen verlaten!

Als je meer wilt weten over Meteor, bekijk dan ons komende boek!