Meteor er langt mer enn et raskt prototypingsverktøy, men det er sikkert bra for prototyping. I denne opplæringen går vi gjennom prosessen med å snu en enkel HTML-wireframe til et funksjonelt program i et overraskende enkelt antall trinn.

Vi lager en enkel wireframe av et chatroom-program. Prosessen vi prøver å demonstrere, starter med en ren HTML / CSS wireframe, gjort i Meteor for enkelhets skyld, som så veldig enkelt kan omdannes til en ekte applikasjon takket være den enkle meteorutviklingen.

Merk: Denne opplæringen er tilpasset fra Meteor Book, en kommende trinnvis veiledning for å bygge Meteor-apps fra bunnen av. Boken vil lede deg gjennom å bygge et komplett multifunksjonelt sosialt nyhetsnettsted (tenk Reddit eller Digg), fra å sette opp brukerkontoer og brukerrettigheter, helt til å administrere sanntidsstemning og rangering.

---

Sette opp en mer kompleks app

En tidligere Meteor opplæring her på Nettuts + demonstrerte hvordan man installerer Meteor og bygger et enkelt program ved hjelp av meteor kommandolinjeværktøy. I denne opplæringen skal vi gjøre ting litt annerledes, og bruke Meteorite.

Meteoritt er et fellesskap som er laget for Meteor som lar oss bruke ikke-kjernepakker opprettet av andre medlemmer av Meteor-fellesskapet. Selv om det er planlagt et innebygd tredjepartspakkesystem for Meteor selv, fra tidspunktet for denne skrivingen, er det ingen støtte, bære settet av pakker som støttes av Meteor-kjerneteamet. Så Meteoritt ble opprettet for å tillate oss (samfunnet) å arbeide rundt denne begrensningen, og publisere våre pakker på Atmosphere, Meteor pakke depotet.

For denne opplæringen skal vi bruke noen av de fellesskapskrevne pakkene, så vi må bruke Meteorite. For å begynne, la oss få det installert, ved hjelp av npm.

Merk: Du må ha en kopi av Node og npm installert på systemet ditt. Hvis du trenger hjelp med denne prosessen, er Meteorites installasjonsinstruksjoner et godt sted å starte.

 npm installere Meteorite -g

Hvis du er på Windows, er det litt mer komplisert å sette opp ting. Vi har skrevet en detaljert opplæring på nettstedet vårt for å hjelpe deg.

Nå som Meteorite er installert, bruker vi mrt kommandolinjeværktøy (som det installerer for oss) i stedet for meteor. Så la oss komme i gang! Vi lager en app:

 Marr lage chat

---

Pakker og Wireframes

For å lage vår wireframe app, bruker vi noen grunnleggende pakker som gjør det mulig for oss å utvikle enkle lagt ut sider raskt og rute mellom dem. La oss legge til pakkene nå:

 mrt add bootstrap-updated mrt add font-awesome mr legg til ruteren

---

Trinn 1: En forsiden

Nå som vi har plukket opp en fin styling for appen vår, kan vi lage en mockup av landingsskjermbildet. Slett de første HTML-, CSS- og JS-filene som er opprettet av Meteor, og opprett følgende to filer innenfor a klient katalog (vi gjør ikke noe på serveren ennå).

(Alternativt, følg med trinnene fra dette depotet.)

     
 > rom 
 
Velkommen til Meteor Chat
 
Vennligst velg et rom for å chatte i, eller opprett en ny
 
 
  

klient / chat.html

 var rom = [navn: 'Meteor Talk', medlemmer: 3, last_aktivitet: '1 minutt siden', navn: 'Meteor Development', medlemmer: 2, sisteaktivitet: '5 minutter siden', navn: 'Meteor Core', medlemmer: 0, last_aktivitet: '3 dager siden']; Template.rooms.helpers (rooms: rooms);

klient / chat.js

Etter at du har lagt til dette, bør du se følgende enkle (hvis falske) program, når du blar til http: // localhost: 3000:

Dataene i bordet av rommene er fast data som vi har inngått manuelt klient / chat.js, men fordelen med denne tilnærmingen er at den tillater oss å gjenta HTML i vår wireframe uten å måtte kutte og lime inn (som nesten er universelt en dårlig ide).

---

Trinn 2: En Chat Room Page

Nå, la oss koble til en annen side. Vi skal bruke ruteren til å velge mellom to sidemaler; en med velkomstmeldingen, og den andre med en meldingsliste for det valgte rommet.

La oss begynne med å legge til noen enkle ruter. Ruteren fungerer ved å kartlegge nettadresser til malnavn. Vår sak er ganske enkel; her er det vi legger til:

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

klient / chat.js

  
 > rooms renderPage 
  

klient / chat.html

Vi bruker RenderPage hjelper i vår HTML-fil for å indikere hvor vi vil ha den valgte malken til å tegne, og akkurat slik kan vi bla gjennom de to nettadressene og se innholdet på høyre sideendring. Som standard ser vi 'hjem' mal, som er kartlagt til ruten /, og viser oss en fin melding.

Hvis vi legger til en mal fra 'rom' rute og legg til noen koblinger til bestemte rom, kan vi nå følge koblinger:

 Navn

klient / chat.html 'rom' mal

klient / chat.html

Dette fungerer fordi ruteren kartlegger webadresser, som localhost: 3000 / rom / 7, til 'rom' mal. For nå vil vi ikke se på iden (7, i dette tilfellet), men vi kommer snart!

---

Trinn 3: Setter noen data i chatterommet

Nå som vi har rutet et URL-chatrom, la oss faktisk trekke en prat i rommet. Igjen, vi mocker fortsatt, så vi fortsetter å lage falske data i vår JavaScript-fil, og tegne den med håndtak:

 var name: 'Meteor Talk', medlemmer: 3, last_aktivitet: '1 minutt siden', meldinger: [forfatter: 'Tom', tekst: 'Hi there Sacha!', forfatter: 'Sacha' , tekst: 'Hey Tom, hvordan har du det?', forfatter: 'Tom', tekst: 'God takk!',, navn: 'Meteor Development', medlemmer: 2, sisteaktivitet: '5 minutter siden', navn: 'Meteor Core', medlemmer: 0, last_aktivitet: '3 dager siden']; Template.room.helpers (rom: rom [0]);

klient / chat.js

Så vi har lagt til noen chatte data til det første rommet, og vi gjør det enkelt hver gang (for øyeblikket) på rommalen. Så:

klient / chat.html

Voila! En fungerende demonstrasjon av vårt chatroom-program:

---

Trinn 4: Bruk av virkelige data støttet av en samling

Nå kommer den morsomme delen; Vi har bygget en enkel wireframe av statiske data ganske enkelt, men takket være Meteors kraft samlinger, Vi kan gjøre det funksjonelt på kort tid.

Husk at en samling tar seg av å synkronisere data mellom nettleseren og serveren, skriver dataene til en Mongo-database på serveren, og distribuerer den til alle andre tilkoblede klienter. Dette høres ut som akkurat det vi trenger for et chatterom!

Først legger vi til en samling på klienten og serveren, og legger til noen enkle fixturdata til den:

(Merk: Vi legger inn samlingsfilen i lib / katalog, slik at koden er tilgjengelig både på klienten og på serveren.)

 var Rom = ny Meteor.Collection ('rom'); if (Meteor.isServer && Rooms.find (). count () == 0) var rom = [navn: 'Meteor Talk', medlemmer: 3, last_aktivitet: '1 minutt siden', meldinger: [forfatter: 'Tom', tekst: 'Hei der Sacha!', Forfatter: 'Sacha', Tekst: 'Hei Tom, hvordan har du det?', Forfatter: 'Tom', Tekst: 'God takk!' ], navn: 'Meteor Development', medlemmer: 2, sistaktivitet: '5 minutter siden', navn: 'Meteor Core', medlemmer: 0, last_aktivitet: '3 dager siden']; _.each (rom, funksjon (rom) Rooms.insert (rom);); 

lib / collections.js

Vi har flyttet dataene våre inn i samlingen, så vi trenger ikke lenger manuelt å koble den opp i våre malhjelpere. I stedet kan vi bare ta tak i det vi ønsker ut av samlingen:

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

klient / chat.js

Vi har gjort et par endringer her; For det første bruker vi Rooms.find () å velge alle rom for å passere inn i 'rom' mal. For det andre, i 'rom' mal, velger vi bare enkeltrommet vi er interessert i (Rooms.findOne ()), ved å bruke økten til å passere gjennom riktig id.

Vent litt! Hva er økten? Hvordan passerte vi id? Økten er Meteors globale butikk av søknadstilstand. Innholdet i sesjonen skal inneholde alt som Meteor trenger å vite for å trekke søknaden i nøyaktig samme tilstand som den er i akkurat nå.

En av de primære formålene med ruteren er å få økten til en slik tilstand når du analyserer nettadresser. Av denne grunn kan vi tilby rutefunksjoner som sluttpunkter for nettadresser; og vi bruker disse funksjonene til å angi sesjonsvariabler basert på innholdet i nettadressen. I vårt tilfelle er den eneste staten vår app krever, hvilket rom vi er i øyeblikket - som vi analyserer ut av nettadressen og lagrer i 'CurrentRoomId' økt variabel. Og det fungerer!

Til slutt må vi få linkene våre rett; så vi kan gjøre:

 Navn

klient / chat.html

Endring av dataene

Nå som vi har en samling som holder våre romdata, kan vi begynne å endre det som vi finner passende. Vi kan legge til nye chatter i et rom, slik som:

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

Eller vi kan til og med legge til et nytt rom:

 Rooms.insert (navn: 'Et nytt rom', medlemmer: 0, last_aktivitet: 'Aldri');

Den neste utfordringen er å koble opp skjemaene for å utføre slike transformasjoner, som vi vil gå som en øvelse til leseren (eller kanskje den neste opplæringen)!

Hvis du vil lære mer om Meteor, må du sjekke ut vår kommende bok!