, fremstilling af prototyper med meteor,,,,, 3,,,,,,,,, 50,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, meteor er langt mere end en kort fremstilling af prototyper redskab, men det er skønt, til fremstilling af prototyper.i denne forelæsning, vi går gennem processen med en simpel html modellen til en funktionel anvendelse i et forbavsende enkel antal trin.,,, vil vi skabe en simpel trådnet af en chatroom anvendelse.den proces, som vi forsøger at vise, at starte med en ren /html /css - modellen, som er udfærdiget i meteor for nemheds skyld, som så kan meget let omdannes til en virkelig anvendelse, tak for at lette meteor udvikling.,,, note: denne lektion er tilpasset fra den meteor bog, en kommende vejledning trin for trin at opbygge meteor ned fra bunden.bogen vil følge dig gennem opbygning af en fuldstændig multi-user sociale nyt websted (tror reddit eller digg), fra oprettelsen af brugerkonti og brugernes rettigheder, hele vejen til forvaltning af tidstro stemme og prioritering.,, oprettelse af en mere kompleks app, en tidligere meteor lektion her på nettuts + vist, hvordan til at installere meteor og opbygge en enkel anvendelse af, meteor, kommando linjen værktøj.i denne forelæsning, vi skal gøre tingene en smule anderledes, og anvende en meteorit., meteor er et fællesskab, der er oprettet papir til meteor, som giver os mulighed for at bruge ikke - centrale pakker, der er skabt af andre medlemmer af det samfund.selv om en indbygget tredjepart pakke system er planlagt til meteor selv, som på det tidspunkt, hvor dette skrift, der ikke er støtte, bar det sæt af pakker, der er støttet af det centrale hold.så meteor blev oprettet for at gøre det muligt for os (fællesskabet) til at arbejde med denne begrænsning og offentliggøre vores pakker på atmosfæren, meteor pakke register. for denne forelæsning, vi skal bruge nogle af fællesskabets skriftlige pakker, så vi er nødt til at bruge en meteorit.til at begynde med, lad os få den monteret med new public management.,, note: du skal have en kopi af knudepunkt og new public management installeret i dit system.hvis du har brug for hjælp med denne proces, en meteorit er installere instruktioner er et godt sted at starte,.,, new public management installere en meteorit - g,, hvis du er på vinduerne, for at sætte ting op, er lidt mere kompliceret.vi har skrevet et detaljeret lektion på vores hjemmeside for at hjælpe dig. nu, hvor en meteorit er installeret, vi bruger, mrt, command-line værktøj (som det har for os, i stedet for, meteor.så lad os komme i gang!vi vil skabe en app:, mrt skabe snak, pakker og wireframes, til at skabe vores trådnet app, vi bruger nogle grundlæggende pakker, der gør det muligt for os at udvikle enkle fastsat sider hurtigt og rute mellem dem.lad os tilføje kolli:,,, mrt tilføje bootstrap ajourførte mrt tilføje skrifttype fantastisk mrt tilføje router, trin 1: en forside, nu hvor vi har opfanget noget rart på vej til vores app, vi kan lave en model af landings - skærm.Delete the initial HTML, CSS and JS files created by Meteor and create the following two files within a ,client, directory (we aren't doing anything on the server yet).,(Alternatively, follow along with the steps from this repository.), <head> <title>chat</title> </head> <body> <div class="row"> {{> rooms}} <div class="span6"> <h1>Welcome to Meteor Chat</h1> <p>Please a select a room to chat in, or create a new one</p> </div> </div> </body> <template name="rooms"> <form name="new_row"> <table id="rooms" class="table table-striped span6"> <thead> <tr> <th>Room Name</th> <th>Members online</th> <th>Last activity</th> </tr> </thead> <tbody> {{#each rooms}} <tr> <td>{{name}}</td> <td>{{members}}</td> <td>{{last_activity}}</td> </tr> {{/each}} <tr> <td colspan="3"> <input type="text" name="name" placeholder="Enter your chatroom name"></input> <button type="submit" class="btn btn-primary pull-right"> <i class="icon-plus"></i> Create Room </button> </td> </tr> </tbody> </table> </form> </template>,,client/chat.html,, var rooms = [ {name: 'Meteor Talk', members: 3, last_activity: '1 minute ago'}, {name: 'Meteor Development', members: 2, last</em>activity: '5 minutes ago'}, {name: 'Meteor Core', members: 0, last_activity: '3 days ago'} ]; Template.rooms.helpers({ rooms: rooms });,,client/chat.js,,After adding this, you should see the following simple (if fake) application, when you browse to http://localhost:3000:, ,The data in the table of rooms is ,fixed, data that we have manually entered into ,client/chat.js,, but the advantage to this approach is that it allows us to repeat HTML i vores trådnet, uden at afbryde og pasta (som er næsten generelt en dårlig idé,.,, trin 2: en chat - side, lad os mødes en anden side.vi skal bruge en router at vælge mellem to side skabeloner, med den glædelige besked, og den anden med en besked til de udvalgte værelse.lad os starte ved at tilføje nogle enkle ruter.routeren virker ved kortlægning af ip - adresser til model navne.Our case is fairly simple; here's what we add:, Meteor.Router.add({ '/': 'home', '/rooms/:id': 'room' });,,client/chat.js,, <body> <div class="row"> {{> rooms}} {{renderPage}} </div> </body> <template name="home"> <div class="span6"> <h1>Welcome to Meteor Chat</h1> <p>Please a select a room to chat in, or create a new one</p> </div> </template>,,client/chat.html,,We use the ,{{renderPage}}, helper in our HTML file to indicate where we want that selected template to draw, and, just like that, we can browse between the two URLs and see the content on the right-hand side change. ved misligholdelse, ser vi,'home, model, som er planlagt til den rute, /,, og viser os et godt budskab. hvis vi tilføje en model fra,'room, rute og tilføje nogle forbindelser til særlige rum, vi nu kan følge forbindelser:, < td > < en href = "/rum /7" > {{navn}} < /a > < /td >,, kunde /chat.html »rum« skabelon, < skabelon navn = "rum" > < div klasse = "span6" > < h1 > velkommen til en chatroom!< /h1 > < /div > < /skabelon >,, kunde /snak. html, det virker, fordi routeren kort url - adresser, som localhost: 3000 /rum /7, til,'room, model.for nu, vil vi ikke se id, stk. 7, i dette tilfælde), men vi vil snart!,, trin 3: at sætte nogle data i chat, nu hvor vi har omdirigeret en url chatroom, lad os faktisk gøre en snak i rummet.igen er vi stadig nar op, så vi kan fortsætte med at skabe falske data i vores javascript fil, og gøre det med styret:, var værelser = [{navn: "meteor - medlemmer: 3, last_activity: 1 minut siden, budskaber: [{forfatter:" tom "tekst:" hej sasja! "} {forfatter: "jeg", og teksten: "hej tom, hvor er du?"} {forfatter: "tom" tekst: "godt, tak."},]} {navn: "meteor udvikling, medlemmer: 2, sidste < /em > aktivitet: 5 minutter siden '} {navn:" meteor kerne, medlemmer: 0, last_activity: 3 dage siden')] model. hjælpere ({værelse: lokaler [0]}), kunde /snak. js,, så vi har tilføjet en chat - data til det første rum, og vi vil ganske enkelt gøre det hver gang (i øjeblikket) på værelse skabelon.So:, <template name="room"> <div class="span6"> {{#with room}} <h1>Welcome to {{name}}</h1></p> <table id="chat" class="table table-striped"> <tbody> {{#each messages}} <tr> <td>{{author}} :</td> <td>{{text}}</td> </tr> {{/each}} <tr> <td colspan="2"> <form name="new_message"> <input type="text" name="text"></input> <button type="submit" class="btn btn-primary pull-right"> <i class="icon-envelope"></i> Send message < /knap > < /form > < /td > < /tr > < /tbody > < /tabel > {{/i>} < /div > <. /skabelon >,, kunde /snak. html, voila!en demonstration af vores chatroom anvendelse:,, trin 4: med reelle data bakkes op af en samling, nu kommer det sjove. vi har bygget et enkelt trådnet af statiske data ganske enkelt nok, men på grund af den magt af meteor, samlinger, kan vi gøre det funktionelle på ingen tid. huske, at en samling tager sig af synkroniserer data mellem browser og serveren, skriver, at data til en mongo database på serveren, og fordeler dem til alle andre indbyrdes forbundne kunder.det lyder som om, præcis hvad vi har brug for en chat.først, lad os tilføje en indsamling til kunden og server, og tilføje nogle simple opstilling, data til det: (note: vi vil sætte samlinger fil i, l /, fortegnelse, således at den kode, der er til rådighed på både kunde og serveren.), var værelser = ny meteor. samling ('rooms'); hvis (meteor.isserver & & værelser. find(). count() = = 0) (var - rum = [{navn: "meteor - medlemmer: 3, last_activity: 1 minut siden, budskaber: [{forfatter:" tom "tekst:" hej sasja! "} {forfatter: "jeg", og teksten: "hej tom, hvor er du?"} {forfatter: "tom" tekst: "godt, tak."},]} {navn: "meteor udvikling, medlemmer: 2, sidste < /em > aktivitet: 5 minutter siden '} {navn:" meteor kerne, medlemmer: 0, last_activity: 3 dage siden')]. _. hver (lokaler, funktion (lokale) (værelser. indsæt (lokale)})}, lib /samlinger. js,, vi har flyttet vores data til indsamling, så vi ikke længere behøver at manuelt tråd op i vores model hjælpere.i stedet har, kan vi tage, hvad vi vil have ud af indsamling:, meteor. router. der tilsættes ({"/": "hjem", "/rum /: id - funktion (id) {samling. sæt ('currentroomid, id); tilbage" rum "}}); skabelon. rum. hjælpere ({lokaler: function() {tilbage værelser. find();}}); model. hjælpere ({rum: function() {tilbage værelser. finder (samling. kom ('currentroomid ')}}), kunde /snak. det, vi har lavet nogle ændringer her. for det første vi bruger, rum. find() at udtage alle værelser til at passere ind i,'rooms, model.for det andet, i,'room, model, vi har lige vælge det fælles rum, som vi er interesseret i, rum. findone(),), ved hjælp af mødet til at passere gennem en korrekt, id,., vent!hvad er det?hvordan kom vi forbi, id?mødet er meteor er globale lagre af ansøgning stat.indholdet af sessionen bør indeholde alle meteoren har brug for at vide, for igen at gøre anvendelsen i samme stat, som det er nu.et af de primære formål med routeren er at få samling på sådan en stat, når parsing url - adresser.det er grunden til, at vi kan give rutning funktioner som endpoints for ip - adresser, og vi bruger disse funktioner til at møde variabler baseret på indholdet af url.i vores tilfælde, er den eneste stat vores app kræver er, hvor vi er i øjeblikket i - som vi sortere af url og opbevares i den,'currentroomid, samling variabel.og det virker!endelig har vi brug for at få vores forbindelser, så vi kan gøre:, < td > < en href = "/rum /{{_id}}" > {{navn}} < /a > < /td >,, kunde /snak. html, ændring af data, nu hvor vi har en samling med vores værelse data, kan vi begynde at ændre på det, som vi vil.vi kan tilføje nye samtaler på et værelse, som så:,,, rum. ajourføring (samling. kom ('currentroomid) {$tryk: {meddelelser: {forfatter: "jeg", og teksten: "godt at høre. '}}}), eller vi kan tilføje en ny værelse:,,, rum. indsæt ({navn:" et nyt værelse, medlemmer: 0, last_activity: "aldrig"}), den næste udfordring er at overføre de former for at udføre sådanne forandringer, som vi tager af sted som en øvelse til læseren (eller måske næste forelæsning).,, hvis du ønsker at lære mere om meteor, sørg for at se på vores kommende bog!,,,
