Accentsconagua

Prototyping cu Meteor

Cod
Share

Meteor este mult mai mult decât un instrument de prototipare rapid, dar este sigur că este minunat pentru prototipuri. În acest tutorial, vom trece prin procesul de transformare a unei simple fire wireframe HTML într-o aplicație funcțională într-un număr surprinzător de simplu de pași.

Vom crea o rețea simplă a unei aplicații de chat. Procesul pe care încercăm să-l demonstrăm începe cu un cadru wireframe pur HTML / CSS, realizat în Meteor pentru comoditate, care poate fi foarte ușor transformat într-o aplicație reală, datorită ușurinței dezvoltării Meteor.

Notă: Acest tutorial este adaptat de la The Meteor Book, un ghid pas cu pas pentru construirea aplicațiilor Meteor de la zero. Cartea vă va ajuta să construiți un site complet de știri sociale pentru mai mulți utilizatori (gândiți-vă la Reddit sau Digg), pornind de la crearea de conturi de utilizatori și permisiuni de utilizatori, tot drumul spre gestionarea voturilor în timp real și clasarea.

Configurarea unei aplicații mai complexe

Un tutorial Meteor anterior de pe Nettuts + a demonstrat cum să instalați Meteor și să construiți o aplicație simplă utilizând meteor instrument de linie de comandă. În acest tutorial, vom face lucrurile puțin diferit și vom folosi Meteoritul.

Meteoritul este un obiect creat de comunitate pentru Meteor, care ne permite să folosim pachete non-core create de alți membri ai comunității Meteor. Deși este planificat pentru Meteor un sistem de pachete a treia parte integrat, din momentul în care se scrie, nu există suport, bara de seturi de pachete care sunt susținute de echipa de bază Meteor. Deci, Meteorite a fost creat pentru a ne permite (comunitatea) să rezolvăm această limitare și să publicăm pachetele noastre despre Atmosphere, depozitul de pachete Meteor.

Pentru acest tutorial, vom folosi unele dintre aceste pachete comunitare scrise, deci va trebui să folosim Meteorite. Pentru început, hai să-l instalăm, folosind npm.

Notă: va trebui să aveți o copie a Node și npm instalate în sistemul dvs. Dacă aveți nevoie de asistență în acest proces, instrucțiunile de instalare ale Meteorite reprezintă un bun loc pentru a începe.

 npm instalează Meteoritul -g

Dacă sunteți pe Windows, setarea lucrurilor este puțin mai complexă. Am scris un tutorial detaliat pe site-ul nostru pentru a vă ajuta.

Acum, când este instalat Meteorite, folosim mrt instrument de linie de comandă (pe care îl instalează pentru noi) în locul lui meteor. Deci sa începem! Vom crea o aplicație:

 creați chat

Pachete și structuri metalice

Pentru a crea aplicația wireframe, vom folosi câteva pachete de bază care ne permit să dezvoltăm rapid pagini simple așezate și să navigăm între ele. Să adăugăm acum pachetele:

 mrt adăugați bootstrap-actualizat mrt adăugați font-awesome mrt adăugați router

Pasul 1: O pagină frontală

Acum, când am ales un stil frumos pentru aplicația noastră, putem face un mockup al ecranului de aterizare. Ștergeți fișierele inițiale HTML, CSS și JS create de Meteor și creați următoarele două fișiere într-un client (nu facem încă nimic pe server).

(Alternativ, urmați pașii din acest depozit.)

  conversație   
 > camere 
 
Bun venit la Meteor Chat
 
Vă rugăm să selectați o cameră pentru chat sau să creați una nouă

client / chat.html

 var camere = [nume: 'Meteor Talk', membri: 3, last_activity: 'acum 1 minut', name: 'Meteor Development', membri:activitate: 'acum 5 minute', name: 'Meteor Core', membri: 0, last_activity: 'acum 3 zile']; Template.rooms.helpers (camere: camere);

client / chat.js

După adăugarea acestui lucru, ar trebui să vedeți următoarea aplicație simplă (dacă este falsă) atunci când navigați la http: // localhost: 3000:

Datele din tabelul de camere sunt fix datele pe care le-am introdus manual client / chat.js, dar avantajul acestei abordări este acela că ne permite să repetăm ​​codul HTML în cadrul nostru wireframe fără a fi nevoie să tăiem și să lipim (ceea ce este aproape universal o idee rea).

Pasul 2: O cameră de chat

Acum, hai să conectăm oa doua pagină. Vom folosi routerul pentru a selecta între două șabloane de pagini; unul cu mesajul de bun venit, iar celălalt cu o listă de mesaje pentru camera selectată.

Să începem prin adăugarea unor rute simple. Routerul funcționează prin maparea adreselor URL la numele șablonului. Cazul nostru este destul de simplu; iată ce adăugăm:

 Meteor.Router.add ('/': 'home', '/ camere /: id': 'cameră');

client / chat.js

  
 > camere renderPage

client / chat.html

Noi folosim RenderPage helper în fișierul HTML pentru a indica unde dorim să desenați șablonul selectat și, la fel, putem să navigăm între cele două adrese URL și să vedem conținutul din partea dreaptă. În mod implicit, vedem 'Acasă' șablon, care este mapat pe traseu /, și ne arată un mesaj frumos.

Dacă adăugăm un șablon din 'cameră' ruta și adăugați niște linkuri către anumite camere, putem urmări link-uri:

 Nume

client / chat.html șablon "camere"

client / chat.html

Acest lucru se datorează faptului că routerul hărți url-uri, cum ar fi localhost: 3000 / rooms / 7, la 'cameră' șablon. Pentru moment, nu ne vom uita la ID-ul (7, in acest caz), dar vom in curand!

Pasul 3: Introducerea unor date în camera de chat

Acum, că am redirecționat o cameră de chat URL, să facem de fapt o discuție în cameră. Din nou, încă mai bat joc, așa că vom continua să creăm date false în fișierul nostru JavaScript și să-l desenează cu Handlebars:

 var camere = [name: 'Meteor Talk', membrii: 3, last_activity: '1 minut în urmă', mesaje: [autor: 'Sacha' , text: "Hei Tom, ce faci?", autor: 'Tom', text: 'Bună mulțumiri!',, name: 'Meteor Development'activitate: 'acum 5 minute', name: 'Meteor Core', membri: 0, last_activity: 'acum 3 zile']; Template.room.helpers (cameră: camere [0]);

client / chat.js

Așadar, am adăugat câteva date de chat în prima cameră și o vom face simplu de fiecare dată (pentru moment) pe șabloanele de cameră. Asa de:

client / chat.html

Voila! O demonstrație de lucru a aplicației noastre de chat:

Pasul 4: Utilizarea datelor reale susținute de o colecție

Acum vine partea distractivă; am construit o simplă rețea de date statice pur și simplu suficient, dar datorită puterii Meteor Colecții, o putem face să funcționeze în cel mai scurt timp.

Amintiți-vă că o colecție are grijă de sincronizarea datelor între browser și server, scrierea acelor date într-o bază de date Mongo pe server și distribuirea acestora către toți ceilalți clienți conectați. Sună exact ca ceea ce avem nevoie pentru o cameră de chat!

Mai întâi, hai să adăugăm o colecție pe client și server și să adăugăm câteva date de fixare simple:

(Notă: vom pune fișierul de colecții în lib / , astfel încât codul să fie disponibil atât pentru client, cât și pentru server.)

 var Rooms = nou Meteor.Collection ('camere'); dacă Meteor Talk ', membrii: 3, last_activity:' 1 minut în urmă ', mesaje: [autor: "Tom", text: "Bună acolo Sacha!", Autor: "Sacha", text: "Hei Tom, ce mai faci? ], name: "Meteor Development", membrii: 2, ultimulactivitate: 'acum 5 minute', name: 'Meteor Core', membri: 0, last_activity: 'acum 3 zile']; _.each (camere, funcție (cameră) Rooms.insert (cameră););

lib / collections.js

Ne-am mutat datele în colecție, astfel încât nu mai este nevoie să ne conecteze manual în ajutorul nostru de șablon. În schimb, putem pur și simplu să luăm ceea ce dorim din colecție:

 Meteor.Router.add ('/': 'home', '/ rooms /: id': function (id) Session.set ('currentRoomId', id); Template.rooms.helpers (camere: function () retur Rooms.find ();); Template.room.helpers (room: function () retur Rooms.findOne (Session.get ('currentRoomId'));)

client / chat.js

Am făcut câteva schimbări aici; În primul rând, vom folosi Rooms.find () pentru a selecta toate camerele pentru a trece în „camere“ șablon. În al doilea rând, în 'cameră' șablon, alegem singură camera în care suntem interesați (Rooms.findOne ()), folosind sesiunea pentru a trece prin cea corectă id.

Stai asa! Care este sesiunea? Cum am trecut id? Sesiunea este magazinul global al lui Meteor starea aplicației. Conținutul sesiunii ar trebui să conțină tot ce trebuie să știe Meteor pentru a re-desena aplicația în exact aceeași stare ca în momentul de față.

Unul dintre scopurile primare ale routerului este de a obține sesiunea într-o astfel de stare atunci când parsează adrese URL. Din acest motiv, putem oferi funcții de rutare ca puncte finale pentru adresele URL; și folosim aceste funcții pentru a seta variabilele de sesiune bazate pe conținutul adresei URL. În cazul nostru, singura stare pe care o cere aplicația noastră este cea în care suntem în prezent - pe care le analizăm din URL și stocăm în 'CurrentRoomId' sesiune variabilă. Și funcționează!

În cele din urmă, trebuie să facem legătura corectă; așa putem face:

 Nume

client / chat.html

Modificarea datelor

Acum, când avem o colecție care deține datele camerei noastre, putem începe să o schimbăm așa cum o considerăm potrivită. Putem adăuga chat-uri noi într-o cameră, așa cum este cazul:

 Rooms.update (Session.get ('currentRoomId'), $ push: messages: autor: 'Sacha', text: 'Bun să aud ...');

Sau, putem adăuga chiar și o cameră nouă:

 Rooms.insert (name: 'O cameră nouă', membrii: 0, last_activity: 'Never');

Următoarea provocare este sârmirea formularelor pentru a efectua astfel de transformări, pe care le vom lăsa ca un exercițiu pentru cititor (sau poate următorul tutorial)!

Dacă doriți să aflați mai multe despre Meteor, asigurați-vă că ați verificat cartea noastră viitoare!

Cod
×