Meteor es mucho más que una herramienta de creación rápida de prototipos, pero seguro que es ideal para la creación de prototipos. En este tutorial, veremos el proceso de convertir un simple alambre HTML en una aplicación funcional en una cantidad sorprendentemente simple de pasos..

Vamos a crear un simple alambre de una aplicación de sala de chat. El proceso que intentamos demostrar es comenzar con un alámbrico puro HTML / CSS, hecho en Meteor por conveniencia, que luego puede transformarse fácilmente en una aplicación real, gracias a la facilidad de desarrollo de Meteor..

Nota: Este tutorial está adaptado de The Meteor Book, una próxima guía paso a paso para crear aplicaciones Meteor desde cero. El libro lo guiará a través de la construcción de un sitio completo de noticias sociales para múltiples usuarios (piense en Reddit o Digg), comenzando desde la configuración de las cuentas de usuario y los permisos de los usuarios, hasta la gestión de la votación en tiempo real y la clasificación..

---

Configuración de una aplicación más compleja

Un tutorial anterior de Meteor aquí en Nettuts + demostró cómo instalar Meteor y construir una aplicación simple usando el meteorito Herramienta de línea de comandos. En este tutorial, vamos a hacer las cosas de manera un poco diferente y usaremos Meteorite.

Meteorite es un contenedor creado por la comunidad para Meteor que nos permite utilizar paquetes no básicos creados por otros miembros de la comunidad Meteor. Aunque un sistema de paquete de terceros integrado está planeado para Meteor, en el momento de esta publicación, no hay soporte, excluye el conjunto de paquetes que son compatibles con el equipo central de Meteor. Así que Meteorite fue creado para permitirnos (a la comunidad) solucionar esta limitación y publicar nuestros paquetes en Atmosphere, el repositorio de paquetes de Meteor..

Para este tutorial, vamos a usar algunos de esos paquetes escritos por la comunidad, por lo que vamos a necesitar usar Meteorite. Para empezar, vamos a instalarlo, usando npm.

Nota: Necesitará tener una copia de Node y npm instalada en su sistema. Si necesita ayuda con este proceso, las instrucciones de instalación de Meteorite son un buen lugar para comenzar.

 npm instalar Meteorite -g

Si estás en Windows, configurar las cosas es un poco más complejo. Hemos escrito un tutorial detallado en nuestro sitio para ayudarte.

Ahora que Meteorite está instalado, usamos el mrt Herramienta de línea de comandos (que instala para nosotros) en lugar de meteorito. ¡Entonces empecemos! Vamos a crear una aplicación:

 mrt crear chat

---

Paquetes y Wireframes

Para crear nuestra aplicación de estructura alámbrica, usaremos algunos paquetes básicos que nos permiten desarrollar páginas de diseño simple rápidamente y establecer una ruta entre ellas. Vamos a añadir los paquetes ahora:

 mrt add bootstrap-updated mrt add font-awesome mrt agregar router

---

Paso 1: Una portada

Ahora que hemos elegido un estilo agradable para nuestra aplicación, podemos hacer una maqueta de la pantalla de aterrizaje. Elimine los archivos HTML, CSS y JS iniciales creados por Meteor y cree los dos archivos siguientes dentro de un cliente directorio (no estamos haciendo nada en el servidor todavía).

(Alternativamente, siga los pasos de este repositorio).

     
 > habitaciones 
 
Bienvenido a Meteor Chat
 
Por favor, seleccione una sala para chatear, o cree una nueva
 
 
  

cliente / chat.html

 var rooms = [name: 'Meteor Talk', miembros: 3, last_activity: '1 minute ago', name: 'Meteor Development', miembros: 2, lastactividad: 'hace 5 minutos', nombre: 'Meteor Core', miembros: 0, last_activity: 'hace 3 días']; Template.rooms.helpers (rooms: rooms);

cliente / chat.js

Después de agregar esto, debería ver la siguiente aplicación simple (si es falsa), cuando navega a http: // localhost: 3000:

Los datos en la tabla de salas son. fijo Datos que hemos ingresado manualmente en cliente / chat.js, pero la ventaja de este enfoque es que nos permite repetir HTML en nuestra estructura alámbrica sin tener que cortar y pegar (lo cual es una idea casi universal).

---

Paso 2: Una página de sala de chat

Ahora, vamos a conectar una segunda página. Vamos a utilizar el enrutador para seleccionar entre dos plantillas de página; uno con el mensaje de bienvenida y el otro con una lista de mensajes para la sala seleccionada.

Empecemos agregando algunas rutas simples. El enrutador funciona mediante la asignación de direcciones URL a nombres de plantillas. Nuestro caso es bastante simple; Esto es lo que añadimos:

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

cliente / chat.js

  
 > rooms renderPage 
  

cliente / chat.html

Usamos el renderPage ayudante en nuestro archivo HTML para indicar dónde queremos que se dibuje la plantilla seleccionada y, así, podemos navegar entre las dos URL y ver el contenido en el lado derecho del cambio. Por defecto, vemos el 'casa' plantilla, que se asigna a la ruta /, y nos muestra un bonito mensaje.

Si añadimos una plantilla desde el 'habitación' enrutar y agregar algunos enlaces a habitaciones específicas, ahora podemos seguir los enlaces:

 nombre

cliente / chat.html plantilla 'habitaciones'

cliente / chat.html

Esto funciona porque el enrutador asigna urls, como localhost: 3000 / rooms / 7, al 'habitación' modelo. Por ahora, no veremos el id (7, en este caso), pero pronto lo veremos.!

---

Paso 3: Poner algunos datos en la sala de chat

Ahora que hemos enrutado una sala de chat URL, dibujemos un chat en la sala. Nuevamente, todavía nos estamos burlando, así que continuaremos creando datos falsos en nuestro archivo JavaScript y dibujarlos con Manillares:

 var rooms = [name: 'Meteor Talk', miembros: 3, last_activity: '1 minute ago', mensajes: [author: 'Tom', texto: '¡Hola, Sacha!', author: 'Sacha' , texto: 'Hola, Tom, ¿cómo estás?', autor: 'Tom', texto: '¡Gracias!',], nombre: 'Desarrollo de meteoros', miembros: 2, últimoactividad: 'hace 5 minutos', nombre: 'Meteor Core', miembros: 0, last_activity: 'hace 3 días']; Template.room.helpers (room: rooms [0]);

cliente / chat.js

Así que hemos agregado algunos datos de chat a la primera sala, y simplemente los mostraremos cada vez (por el momento) en la plantilla de la sala. Asi que:

cliente / chat.html

Voila! Una demostración de trabajo de nuestra aplicación de sala de chat:

---

Paso 4: Uso de datos reales respaldados por una colección

Ahora viene la parte divertida; hemos construido un simple alámbrico de datos estáticos, pero gracias al poder de Meteor Colecciones, Podemos hacerlo funcional en poco tiempo..

Recuerde que una colección se encarga de sincronizar los datos entre el navegador y el servidor, escribir esos datos en una base de datos Mongo en el servidor y distribuirlos a todos los demás clientes conectados. Esto suena exactamente como lo que necesitamos para una sala de chat.!

Primero, agreguemos una colección en el cliente y el servidor, y agreguemos algunos datos de accesorios simples:

(Nota: pondremos el archivo de colecciones en el lib / directorio, de modo que el código esté disponible tanto en el cliente como en el servidor.)

 var Rooms = new Meteor.Collection ('rooms'); if (Meteor.isServer && Rooms.find (). count () == 0) var rooms = [name: 'Meteor Talk', miembros: 3, last_activity: '1 minute ago', mensajes: [author: 'Tom', texto: '¡Hola, Sacha!', Autor: 'Sacha', texto: 'Hola Tom, ¿cómo estás?', Autor: 'Tom', texto: '¡Gracias!', ], nombre: 'Desarrollo de meteoros', miembros: 2, últimoactividad: 'hace 5 minutos', nombre: 'Meteor Core', miembros: 0, last_activity: 'hace 3 días']; _.each (habitaciones, función (habitación) Rooms.insert (habitación);); 

lib / collections.js

Hemos movido nuestros datos a la colección, por lo que ya no necesitamos conectarlos manualmente con nuestros ayudantes de plantillas. En su lugar, podemos simplemente tomar lo que queremos de la colección:

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

cliente / chat.js

Hemos hecho un par de cambios aquí; En primer lugar, utilizamos Habitaciones.find () para seleccionar todas las habitaciones para pasar a la 'habitaciones' modelo. En segundo lugar, en el 'habitación' plantilla, solo seleccionamos la habitación individual que nos interesa (Rooms.findOne ()), aprovechando la sesión para pasar por el correcto carné de identidad.

¡Espere! ¿Cuál es la sesión? Como pasamos el carné de identidad? La sesión es la tienda global de Meteor. estado de aplicación. El contenido de la sesión debe contener todo lo que Meteor necesita saber para volver a dibujar la aplicación exactamente en el mismo estado en que se encuentra ahora..

Uno de los propósitos principales del enrutador es lograr que la sesión se encuentre en tal estado al analizar las URL. Por este motivo, podemos proporcionar funciones de enrutamiento como puntos finales para las URL; y usamos esas funciones para establecer variables de sesión basadas en el contenido de la URL. En nuestro caso, el único estado que requiere nuestra aplicación es en qué sala estamos actualmente, que analizamos fuera de la URL y almacenamos en la 'currentRoomId' variable de sesión. Y funciona!

Por último, necesitamos tener nuestros enlaces correctos; para que podamos hacer:

 nombre

cliente / chat.html

Modificando los datos

Ahora que tenemos una colección que contiene los datos de nuestra sala, podemos comenzar a cambiarla según lo creamos. Podemos agregar nuevos chats a una sala, así:

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

O incluso podemos agregar una nueva habitación:

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

El siguiente desafío es conectar los formularios para realizar dichas transformaciones, que dejaremos como un ejercicio para el lector (o quizás el siguiente tutorial).!

Si desea obtener más información sobre Meteor, asegúrese de consultar nuestro próximo libro.!