Meteor è molto più di uno strumento di prototipazione veloce, ma sicuramente è ottimo per la prototipazione. In questo tutorial, illustreremo il processo di trasformare un semplice wireframe HTML in un'applicazione funzionale in un numero sorprendentemente semplice di passaggi.

Creeremo un semplice wireframe di un'applicazione per chat room. Il processo che stiamo cercando di dimostrare sta iniziando con un puro wireframe HTML / CSS, fatto in Meteor per comodità, che può quindi essere facilmente trasformato in un'applicazione reale, grazie alla facilità dello sviluppo di Meteor.

Nota: Questo tutorial è stato adattato da The Meteor Book, una guida passo dopo passo alla creazione di app di Meteor da zero. Il libro ti guiderà attraverso la creazione di un sito di notizie social multiutente completo (pensa Reddit o Digg), a partire dalla creazione di account utente e permessi utente, fino alla gestione del voto in tempo reale e del posizionamento.

---

Impostazione di un'app più complessa

Un precedente tutorial di Meteor qui su Nettuts + ha dimostrato come installare Meteor e creare una semplice applicazione usando il meteora strumento da riga di comando. In questo tutorial, faremo le cose in modo un po 'diverso e useremo Meteorite.

Meteorite è un wrapper creato dalla comunità per Meteor che ci consente di utilizzare pacchetti non core creati da altri membri della comunità Meteor. Sebbene sia previsto un sistema di pacchetti di terze parti integrato per Meteor stesso, al momento della stesura di questo documento, non vi è alcun supporto, a meno del set di pacchetti supportato dal core team di Meteor. Quindi Meteorite è stato creato per consentire a noi (la comunità) di aggirare questa limitazione e pubblicare i nostri pacchetti su Atmosphere, il repository dei pacchetti Meteor.

Per questo tutorial, useremo alcuni di questi pacchetti scritti in comunità, quindi avremo bisogno di usare Meteorite. Per iniziare, facciamolo installare, usando npm.

Nota: è necessario disporre di una copia di Node e npm installata sul sistema. Se hai bisogno di assistenza per questo processo, le istruzioni per l'installazione di Meteorite sono un buon punto di partenza.

 npm installa Meteorite -g

Se sei su Windows, impostare le cose è un po 'più complesso. Abbiamo scritto un tutorial dettagliato sul nostro sito per aiutarti.

Ora che Meteorite è installato, usiamo il MRT strumento da riga di comando (che installa per noi) al posto di meteora. Quindi iniziamo! Creeremo un'app:

 crea la chat

---

Pacchetti e wireframe

Per creare la nostra app wireframe, utilizzeremo alcuni pacchetti di base che ci consentono di sviluppare rapidamente semplici pagine strutturate e di instradarci tra loro. Aggiungiamo ora i pacchetti:

 mrt aggiungi bootstrap-aggiornato mrt aggiungi font-awesome mrt aggiungi router

---

Passaggio 1: una prima pagina

Ora che abbiamo acquisito un certo stile per la nostra app, possiamo creare un mockup della schermata di destinazione. Elimina i file HTML, CSS e JS iniziali creati da Meteor e crea i seguenti due file all'interno di a cliente directory (non stiamo ancora facendo nulla sul server).

(In alternativa, segui i passaggi di questo repository).

     
 > stanze 
 
Benvenuti in Meteor Chat
 
Per favore seleziona una stanza per chattare o crearne una nuova
 
 
  

client / chat.html

 var rooms = [name: 'Meteor Talk', membri: 3, last_activity: '1 minuto fa', nome: 'Meteor Development', membri: 2, ultimoattività: '5 minuti fa', nome: 'Meteor Core', membri: 0, last_activity: '3 giorni fa']; Template.rooms.helpers (rooms: rooms);

client / Chat.js

Dopo aver aggiunto questo, dovresti vedere la seguente semplice (se falsa) applicazione, quando navighi su http: // localhost: 3000:

I dati nella tabella delle stanze sono fisso dati che abbiamo inserito manualmente client / Chat.js, ma il vantaggio di questo approccio è che ci permette di ripetere l'HTML nel nostro wireframe senza dover tagliare e incollare (che è quasi universalmente una cattiva idea).

---

Passaggio 2: una pagina della chat room

Ora, colleghiamo una seconda pagina. Utilizzeremo il router per selezionare tra due modelli di pagina; uno con il messaggio di benvenuto e l'altro con un elenco di messaggi per la stanza selezionata.

Iniziamo aggiungendo alcuni percorsi semplici. Il router funziona associando gli URL ai nomi dei modelli. Il nostro caso è abbastanza semplice; ecco cosa aggiungiamo:

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

client / Chat.js

  
 > rooms renderPage 
  

client / chat.html

Noi usiamo il RenderPage helper nel nostro file HTML per indicare dove vogliamo disegnare il modello selezionato e, proprio così, possiamo navigare tra i due URL e vedere il contenuto sul lato destro. Di default, vediamo il 'casa' modello, che è mappato sulla rotta /, e ci mostra un bel messaggio.

Se aggiungiamo un modello dal 'camera' instradare e aggiungere alcuni collegamenti a stanze specifiche, ora possiamo seguire i collegamenti:

 nome

client / chat.html modello 'stanze'

client / chat.html

Funziona perché il router mappa gli URL, come localhost: 3000 / rooms / 7, al 'camera' modello. Per ora, non guarderemo l'id (7, in questo caso), ma lo faremo presto!

---

Passaggio 3: inserire alcuni dati nella chat room

Ora che abbiamo instradato una chatroom di URL, in realtà disegniamo una chat nella stanza. Ancora una volta, stiamo ancora prendendo in giro, quindi continueremo a creare dati falsi nel nostro file JavaScript e disegnarlo con Handlebars:

 var rooms = [name: 'Meteor Talk', membri: 3, last_activity: '1 minuto fa', messaggi: [autore: 'Tom', testo: 'Ciao, Sacha!', autore: 'Sacha' , testo: "Ehi Tom, come stai?", autore: "Tom", testo: "Grazie mille!",], nome: "Meteor Development", membri: 2, ultimoattività: '5 minuti fa', nome: 'Meteor Core', membri: 0, last_activity: '3 giorni fa']; Template.room.helpers (room: rooms [0]);

client / Chat.js

Quindi abbiamo aggiunto alcuni dati di chat alla prima stanza, e lo renderizzeremo semplicemente ogni volta (per il momento) sul modello di stanza. Così:

client / chat.html

Ecco! Una dimostrazione pratica della nostra applicazione per chatroom:

---

Passaggio 4: utilizzo di dati reali supportati da una raccolta

Ora arriva la parte divertente; abbiamo costruito un semplice wireframe di dati statici abbastanza semplicemente, ma grazie alla potenza di Meteor collezioni, possiamo renderlo funzionale in men che non si dica.

Ricorda che una raccolta si occupa della sincronizzazione dei dati tra il browser e il server, scrivendo tali dati in un database Mongo sul server e distribuendoli a tutti gli altri client connessi. Questo sembra esattamente quello di cui abbiamo bisogno per una chat room!

Innanzitutto, aggiungiamo una raccolta sul client e sul server e aggiungiamo alcuni semplici dati relativi all'apparecchio:

(Nota: inseriremo il file delle raccolte nel file lib / directory, in modo che il codice sia disponibile sia sul client che sul server.)

 var Rooms = new Meteor.Collection ('camere'); if (Meteor.isServer && Rooms.find (). count () == 0) var rooms = [name: 'Meteor Talk', membri: 3, last_activity: '1 minuto fa', messaggi: [autore: "Tom", testo: "Ciao, Sacha!", Autore: "Sacha", testo: "Ehi Tom, come stai?", Autore: "Tom", testo: "Grazie mille!", ], nome: 'Meteor Development', membri: 2, ultimoattività: '5 minuti fa', nome: 'Meteor Core', membri: 0, last_activity: '3 giorni fa']; _.each (rooms, function (room) Rooms.insert (room);); 

lib / collections.js

Abbiamo spostato i nostri dati nella raccolta, quindi non è più necessario collegarli manualmente all'interno dei nostri modelli. Invece, possiamo semplicemente afferrare ciò che vogliamo dalla collezione:

 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

Abbiamo apportato un paio di cambiamenti qui; In primo luogo, usiamo Rooms.find () per selezionare tutte le stanze da passare nel 'camere' modello. In secondo luogo, nel 'camera' modello, selezioniamo solo la stanza singola a cui siamo interessati (Rooms.findOne ()), utilizzando la sessione per passare attraverso il corretto id.

Resisti! Qual è la sessione? Come abbiamo superato il id? La sessione è il negozio globale di Meteor di stato dell'applicazione. Il contenuto della sessione deve contenere tutto ciò che Meteor deve sapere per ri-disegnare l'applicazione esattamente nello stesso stato in cui si trova adesso.

Uno degli scopi principali del router è quello di ottenere la sessione in tale stato durante l'analisi degli URL. Per questo motivo, possiamo fornire funzioni di routing come endpoint per gli URL; e usiamo queste funzioni per impostare le variabili di sessione in base al contenuto dell'URL. Nel nostro caso, l'unico stato che la nostra app richiede è la stanza in cui ci troviamo attualmente - che analizziamo dall'URL e memorizziamo nel 'CurrentRoomId' variabile di sessione. E funziona!

Infine, abbiamo bisogno di ottenere i nostri collegamenti giusto; quindi possiamo fare:

 nome

client / chat.html

Modifica dei dati

Ora che abbiamo una raccolta contenente i dati della nostra camera, possiamo iniziare a cambiarla come meglio crediamo. Possiamo aggiungere nuove chat ad una stanza, in questo modo:

 Rooms.update (Session.get ('currentRoomId'), $ push: messaggi: autore: 'Sacha', testo: 'Buono a sapersi ...');

Oppure, possiamo persino aggiungere una nuova stanza:

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

La prossima sfida è quella di cablare i moduli per eseguire tali trasformazioni, che lasceremo come esercizio al lettore (o forse al prossimo tutorial)!

Se vuoi saperne di più su Meteor, assicurati di controllare il nostro prossimo libro!