Accentsconagua

Prototyper med meteor

Koda
Share

Meteor är mycket mer än ett snabbt prototyperverktyg, men det är säkert bra för prototyper. I denna handledning går vi igenom processen att konvertera en enkel HTML-trådram till en funktionell applikation i ett överraskande enkelt steg.

Vi skapar en enkel trådframställning av en chattrumsansökan. Processen som vi försöker demonstrera börjar med en ren HTML / CSS wireframe, gjord i Meteor för bekvämligheten, vilket sedan mycket lätt kan omvandlas till en riktig applikation tack vare den lätta meteorutvecklingen.

Notera: Denna handledning är anpassad från Meteor Book, en kommande steg för steg guide till att bygga Meteor apps från början. Boken kommer att leda dig genom att bygga en komplett multifunktionell social nyhetssida (tänk Reddit eller Digg), från att starta användarkonton och användarbehörigheter, hela vägen för att hantera realtidsröstning och ranking.

Konfigurera en mer komplex app

En tidigare Meteorhandledning här på Webuts + visade hur man installerade Meteor och byggde en enkel applikation med meteor kommandoradsverktyget. I denna handledning kommer vi att göra saker lite annorlunda och använda Meteorite.

Meteorite är ett community-skapat omslag för Meteor som tillåter oss att använda icke-kärnpaket skapade av andra medlemmar av Meteor-samhället. Även om ett inbyggt tredjepartspaket är planerat för Meteor själv, från och med det här skrivandet, finns det inget stöd, bar den uppsättning paket som stöds av Meteor-kärnteamet. Så Meteorite skapades för att tillåta oss (samhället) att arbeta kring denna begränsning och publicera våra paket på Atmosphere, Meteor paketförvaret.

För den här handledningen kommer vi att använda några av de gemenskapskritiska paketen, så vi måste använda Meteorite. Till att börja med, låt oss få det installerat, med hjälp av npm.

Obs! Du måste ha en kopia av nod och npm installerat på ditt system. Om du behöver hjälp med denna process är Meteorites installationsanvisningar ett bra ställe att börja.

 npm installera Meteorite -g

Om du är på Windows är det lite komplicerat att ställa upp saker. Vi har skrivit en detaljerad handledning på vår sida för att hjälpa dig.

Nu när Meteorite är installerat använder vi mrt kommandoradsverktyg (som det installerar för oss) istället för meteor. Så låt oss börja! Vi skapar en app:

 Jag skapar chatt

Paket och trådramar

För att skapa vår wireframe-app använder vi några grundläggande paket som gör det möjligt för oss att snabbt och enkelt utveckla enkla utplacerade sidor. Låt oss lägga till paket nu:

 mrt lägg till bootstrap-updated mrt add font-awesome mr lägg till router

Steg 1: En första sida

Nu när vi har tagit upp en fin stilering för vår app kan vi göra en mockup av landningsskärmen. Ta bort de ursprungliga HTML-, CSS- och JS-filerna som skapats av Meteor och skapa följande två filer inom en klient katalog (vi gör ingenting på servern än).

(Alternativt följ med stegen från det här förvaret.)

  chatt   
 > rum 
 
Välkommen till Meteor Chat
 
Vänligen välj ett rum för att chatta in, eller skapa en ny

klient / chat.html

 var rum = [namn: 'Meteor Talk', medlemmar: 3, last_aktivitet: '1 minut sedan', namn: 'Meteor Development', medlemmar: 2, sistaaktivitet: '5 minuter sedan', name: 'Meteor Core', medlemmar: 0, last_aktivitet: '3 dagar sedan']; Template.rooms.helpers (rum: rum);

klient / chat.js

När du har lagt till det här bör du se följande enkla (om falska) program när du bläddrar till http: // localhost: 3000:

Uppgifterna i rumsunderlaget är fast data som vi har skrivit in manuellt klient / chat.js, men fördelen med detta tillvägagångssätt är att det tillåter oss att upprepa HTML i vår wireframe utan att behöva klippa och klistra in (vilket är nästan allmänt en dålig idé).

Steg 2: En chattrumssida

Nu, låt oss ansluta en andra sida. Vi ska använda routern för att välja mellan två sidmallar; en med välkomstmeddelandet och den andra med en meddelandelista för det valda rummet.

Låt oss börja med att lägga till några enkla linjer. Routern fungerar genom att mappa webbadresser till mallnamn. Vårt fall är ganska enkelt; här är vad vi lägger till:

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

klient / chat.js

  
 > rum renderPage

klient / chat.html

Vi använder RenderPage hjälpen i vår HTML-fil för att ange var vi vill att den valda mallen ska rita, och precis som det kan vi bläddra mellan de två webbadresserna och se innehållet på höger sida. Som standard ser vi 'Hem' mall som är mappad till rutten /, och visar oss ett fint meddelande.

Om vi ​​lägger till en mall från 'rum' rutt och lägg till några länkar till specifika rum, kan vi nu följa länkar:

 namn

klient / chat.html "rum" mall

klient / chat.html

Detta fungerar eftersom routern kartlägger webbadresser, som localhost: 3000 / rum / 7, till 'rum' mall. För nu ser vi inte på id (7, i det här fallet), men vi kommer snart!

Steg 3: Sätta några data i chattrummet

Nu när vi har dirigerat ett webbadresschattrum, låt oss faktiskt rita en chatt i rummet. Återigen mockar vi fortfarande, så vi fortsätter att skapa falska data i vår JavaScript-fil och rita den med hanteringsrader:

 varum rum = [namn: 'Meteor Talk', medlemmar: 3, last_aktivitet: '1 minut sedan', meddelanden: [författare: 'Tom', text: 'Hi there Sacha!', författare: 'Sacha' , text: "Hej Tom, hur mår du?", författare: "Tom", text: "Bra tack!",], namn: "Meteor Development", medlemmar: 2aktivitet: '5 minuter sedan', name: 'Meteor Core', medlemmar: 0, last_aktivitet: '3 dagar sedan']; Template.room.helpers (rum: rum [0]);

klient / chat.js

Så vi har lagt till några chattdata till det första rummet, och vi gör det enkelt varje gång (för tillfället) på rumsmallen. Så:

klient / chat.html

Voila! En fungerande demonstration av vår chattrumsansökan:

Steg 4: Använda riktiga data som stöds av en samling

Nu kommer den roliga delen; Vi har byggt en enkel wireframe av statiska data helt enkelt, men tack vare Meteors kraft samlingar, Vi kan göra det funktionellt på nolltid alls.

Kom ihåg att en samling tar hand om att synkronisera data mellan webbläsaren och servern, skriver den data till en Mongo-databas på servern och distribuerar den till alla andra anslutna kunder. Det låter som exakt vad vi behöver för ett chattrum!

Låt oss först lägga till en samling på klienten och servern och lägg till några enkla fixturdata till den:

(Obs! Vi lägger in samlingsfilen i lib / katalog, så att koden är tillgänglig både på klienten och servern.)

 var Rum = ny Meteor.Collection ("rum"); om Meteor.isServer && Rooms.find (). count () == 0) var rum = [namn: 'Meteor Talk', medlemmar: 3, last_aktivitet: '1 minut sedan', meddelanden: [författare: 'Tom', text: 'Hej där Sacha!', Författare: "Sacha", text: "Hej Tom, hur mår du?", Författare: "Tom", text: "Bra tack!" ], namn: "Meteor Development", medlemmar: 2, senastaktivitet: '5 minuter sedan', name: 'Meteor Core', medlemmar: 0, last_aktivitet: '3 dagar sedan']; _.each (rum, funktion (rum) Rooms.insert (rum););

lib / collections.js

Vi har flyttat våra data till samlingen, så vi behöver inte längre manuellt koppla upp den i våra mallhjälpmedel. Istället kan vi enkelt ta vad vi vill ha ur samlingen:

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

klient / chat.js

Vi har gjort några ändringar här; För det första använder vi Rooms.find () att välja alla rum för att passera in i 'rum' mall. För det andra, i 'rum' mall, väljer vi bara singelrummet som vi är intresserade av (Rooms.findOne ()), genom att använda sessionen för att passera igenom rätt id.

Vänta! Vad är sessionen? Hur passerade vi id? Sessionen är Meteors globala butik på applikationstillstånd. Innehållet i sessionen ska innehålla allt som Meteor behöver veta för att kunna dra in ansökan i exakt samma skick som det är just nu.

Ett av de främsta syftet med routern är att få sessionen till ett sådant tillstånd när man analyserar webbadresser. Av denna anledning kan vi tillhandahålla routingsfunktioner som slutpunkter för webbadresser; och vi använder dessa funktioner för att ställa in session variabler baserat på innehållet i webbadressen. I vårt fall är det enda tillståndet som vår app kräver är vilket rum vi är för närvarande i - vilket vi analyserar ur webbadressen och lagras i 'CurrentRoomId' session variabeln. Och det fungerar!

Slutligen måste vi få våra länkar rätt; så vi kan göra:

 namn

klient / chat.html

Ändra data

Nu när vi har en samling med våra rumsdata, kan vi börja ändra det som vi passar. Vi kan lägga till nya chattar i ett rum, som så:

 Rooms.update (Session.get ('currentRoomId'), $ push: messages: author: 'Sacha', text: 'Bra att höra ...');

Eller vi kan till och med lägga till ett nytt rum:

 Rooms.insert (namn: 'Ett nytt rum', medlemmar: 0, last_aktivitet: 'Aldrig');

Nästa utmaning är att koppla upp formulären för att utföra sådana omvandlingar, som vi lämnar som en övning till läsaren (eller kanske nästa handledning)!

Om du vill lära dig mer om Meteor, se till att du kolla in vår kommande bok!

Koda
×