Tutorial MeteorJS ( I )

Christian Leon
Feb 27, 2018 · 13 min read

Para los que no conozcan Meteor. es una plataforma para crear aplicaciones Web, móvil y de escritorio. Lo interesante de Meteor es que esta escrito sobre Node JS, haciendo que todo tu código tanto del lado de cliente como del servidor sea JavaScript, y lo mejor de todo es 100 % reactivo gracias a los principios de Websockets.

En este tutorial veremos a mas detalle Meteor y su ideología en su versión 1.6 que es lo que mas me ha llamado la atención, nos da las opciones de trabajarlo con React, Angular o Blaze. En este caso veremos Blaze que es el Framework de vista que por defecto tiene.

Instalación

Si queremos saber mas sobre Meteor podremos dirigirnos a la pagina oficial

Podremos instalar Meteor en nuestro equipo de la siguiente manera :

curl https://install.meteor.com/ | sh

En este caso para los usuarios de OSX y Linux es a través de de la terminal. Para los usuarios de Windows en la pagina oficial están los respectivos pasos para instalarlo con Chocolatey

Nuestra primera App

Una vez instalado Meteor en nuestro equipo podremos usar los diferentes comandos de la plataforma, vamos a digitar meteor –help, abrimos una terminal sea en el caso de Linux, OSX o CMD de windonws.

Como podemos ver a través de este comando nos muestra las diferentes opciones de Meteor. En este caso nos concentraremos en el comando create. Nos situamos en el directorio en el que deseemos crear nuestro proyecto, en el caso mio lo haré en el escritorio.

Con esto le estamos indicando que cree un proyecto nuevo con el nombre que acabo de asignarle en este caso “meteorapp”.

Nos genero una carpeta con el nombre que asignamos, como pueden ver el nos esta indicando que nos situemos dentro de nuestro proyecto y que ejecutemos el comando meteor para iniciarlo.

Estructura del proyecto.

Este ejemplo de estructura que nos genero inicialmente era un estándar para la versión de Meteor 1.2.1, funcionaba muy bien con las nuevas versiones, pero esta estructura tiene un defecto que carga todos los archivos en las carpetas así no los estés usando, afectando el rendimiento y que por ende pese más el proyecto.

Crearemos una nueva estructura algo más compleja, pero que nos brindara la posibilidad escalar proyectos grandes, sin tener que migrar a una nueva estructura.

Conociendo Blaze y Spacebars.

Dentro de nuestro proyecto tenemos la carpeta client con los siguientes archivos main.css, main.html y main.js.

Al abrir el archivo main.html nos damos cuenta que tenemos la estructura normal de html un head. title y body, con la diferencia que notamos unas etiquetas nuevas llamadas templates, esto es gracias a Blaze como framework para el apartado de front-end.Blaze es una poderosa biblioteca para crear interfaces de usuario escribiendo plantillas HTML reactivas, en comparación con el uso de una combinación de plantillas tradicionales y jQuery. Blaze elimina la necesidad de toda la “lógica de actualización” en la aplicación y escucha los cambios de datos y manipula el DOM. http://blazejs.org/

Podremos declarar Templates que contendrán segmentos de nuestra aplicación, como lo vemos en el ejemplo por defecto que nos genero Meteor, tenemos un template llamado “hello” y el otro “info”. Si vemos en la parte del body se hacen referencia a ellos {{> hello }} {{> body }}, gracias a los Spacebars; es un lenguaje de plantilla de Meteor inspirado en Handlebars , comparte parte del espíritu y la sintaxis de Handlebars, pero se ha diseñado para producir plantillas de Meteor reactivas cuando se compila. Gracias a esto podemos usar condicionales {{ #if }} {{ else }} y recorrido de cursores {{ #each }} {{ /each}}

Veremos un ejemplo de esto continuación.

Quitaremos los Templates que están creados por defecto y pondremos otro llamado perfil, añadiremos una etiqueta h1 Perfil, seguido del nombre de nosotros.

A través de los Spacerbars podremos enviar variables para hacer más dinámico el manejo de nuestros Templates. En este caso enviare mi nombre como parámetro a nuestro template, esto lo lograremos de la siguiente manera, declaramos nuestra variable en nuestro Template en el momento que se llama nuestro.

El resultado en el navegador sera el mismo, a diferencia de nuestro código que estamos declarando una variable en el llamado de nuestro template y después accedemos a ella. También podremos acceder estas variables en propiedades CSS o cualquier forma que deseemos trabajar dentro de nuestro html.

Como pueden ver, declare otra variable llamada color, accedo a ella en mí template a través de una propiedad CSS.De esta manera cargara mi nombre de color azul.

También podríamos crear condicionales para validar si existe alguna de las variables que se están enviando al template.

En este ejemplo podemos ver como validamos si existe la variable miNombre, en caso de que exista lo mostramos, en caso contrario mostramos ninguno. Para comprobar que funcione la condicional basta con quitar la variable mi nombre, donde llamamos nuestro template.

{{> Perfil color=”blue” }}

Ciclo de Vida Templates Blaze JS

Trabajaremos dentro de nuestro archivo main.js y lo dejaremos de la siguiente manera.

En esta versión de Meteor usa los nuevos principios del EcmaScript 6, indicamos que vamos a trabajar con las funciones de template { Template } que están asociadas a Blaze, y que HTML trabajar en este caso main.html.

Cuando creamos <template name = “foo”> … </ template> en un archivo HTML en nuestra aplicación, Meteor genera un “objeto plantilla” llamado Template.foo. Debemos Tener en cuenta que el nombre de la plantilla no puede contener guiones ni otros caracteres especiales.

La misma plantilla puede aparecer muchas veces en una página, y estas ocurrencias se llaman instancias de Template. Las instancias de Template tienen un ciclo de vida creación, se colocan en el documento y luego se extraen del documento y se destruyen. Meteor gestiona estos estados, detecta cuándo se ha eliminado o reemplazado una instancia de Template y si se debe limpiar.

Los siguientes ciclos de vida del template son :

Template#onCreated

Este estado es cuando ha sido llamado y creado nuestro template, y pasara el siguiente estado de render.

Template#onRendered

Este estado se da cuando el template ha sido insertada en el DOM, para pasar a renderizar elementos css, funciones Javascript.

Template#onDestroyed

Este estado es cuando pasamos a una nueva instancia es decir otro template, automáticamente se retira del DOM o se destruira.

Vamos a representarlos en nuestro código.

Tenemos que hacer siempre referencia a nuestro template, en este caso “ Perfil”

Template.nombreDeNuestroTemplate seguido de nuestro estado.

Template Events.

Blaze nos permite especificar los controladores de eventos para esta plantilla.

De esta manera estamos asociando eventos a nuestro Template, en este caso le estamos indicando que al darle click a un elemento id# saludar mostraremos una alerta.

Podremos declarar cuantas veces sea necesario nuestros eventos dentro de events asociados a nuestro template.

Aqui unos ejemplos de eventos mas que pueden ser asociados.Estos tipos de eventos son los mismos de la libreria de Jquery, es decir que los podremos usar.

Helpers.

Gracias a los helpers podemos pasar datos desde código javascript a nuestro template, en este caso vamos definir un helper que devolverá nuestro nombre.

En el siguiente ejemplo vamos a declarar un helper que retornara un array, gracias a los spacebars podremos iterar con {{ #each }} cada elemento y mostrar su propiedad en el html de la siguiente manera. {{ tarea }}

Estructura Nueva

Esta es la nuevas estructura, a diferencia de la anterior es un poco más compleja. Tenemos la carpeta imports, private, y public.

  • La carpeta public contiene todos los archivos públicos de nuestra aplicación, por ejemplo las imagenes, fuentes etc.
  • La carpeta private inicialmente no se usara, pero en esta podremos almacenar datos que son privados y se acceden solo desde el servidor.
  • La carpeta más importante de nuestro proyecto, imports. Esta carpeta sera la que contendra nuestro código. La diferencia de esta estructura con la carpeta imports es que nosotros controlaremos que archivos queremos usar.

La carpeta imports tiene otras sub-carpetas, estas se llaman api, startup, y ui.

En la carpeta api irán los modelos de datos (schemas y colecciones), los metodos y nuestras publicaciones. ( Lo veremos mas adelante).

La carpeta startup se divide en dos, client y server. En client iniciaremos los paquetes, componentes, configuraciones y los imports que sean del frontend. En server haremos lo mismo pero específicamente para el servidor.

Luego tenemos la carpeta ui, en esta tendremos toda nuestra interfaz de usuario o el frontend.

Estructurando nuestra Aplicación

Veremos en detalle la estructura que habíamos mencionado antes, como podemos ver en la carpeta imports, crearemos la base de nuestro proyecto. Aquí configuraremos un miniproyecto que se encargara de crear, modificar y eliminar tareas, siempre y cuando nuestro usuario este logueado.Lo que primero debemos verificar es que paquetes están asociados a nuestro proyecto;en este caso al crear nuestra aplicación por defecto dentro de la carpeta .meteor , packages tiene:

  • autopublish → Publica todos los datos a los clientes (para creación de prototipos)
  • insecure → Permite escritura en la DB desde clientes (para creación de prototipos)

Vamos a removerlos, para hacerlo nos ubicamos en la carpeta de nuestro proyecto través de una terminal y ejecutamos :

meteor remove autopublishmeteor remove insecure

También podremos eliminarlos de manera manual accediendo desde nuestro editor ( Sublime, Atom, Visual Studio Code etc..) a la carpeta .meteor, el archivo packages y simplemente los borramos y guardamos.

Paquetes necesarios

Estos paquetes serán esenciales para cualquiera de los proyectos que desees iniciar con meteor, para esto nos dirigimos a nuestra carpeta del proyecto desde la terminal y añadiremos los siguientes paquetes.

  • Kadira:flow-router : Enrutador muy simple para Meteor ( URLS )
  • kadira:blaze-layout : Administrador de diseño para blaze (funciona bien con FlowRouter)
  • accounts-ui : Plantillas simples para el inicio de sesión de una aplicación
  • accounts-password : Contiene un sistema completo para autenticación basada en contraseña. Además del proceso de inicio de sesión básico basado en el nombre de usuario y la contraseña, también es compatible con el inicio de sesión basado en correo electrónico, incluida la verificación de direcciones y correos electrónicos de recuperación de contraseñas.
  • accounts-base : Contiene la funcionalidad de inicio de sesión de usuario en una aplicación Meteor. Permite que sus usuarios inicien sesión con contraseñas, Facebook, Google, GitHub y más

Los agregamos de la siguiente manera en nuestra terminal:

meteor add kadira:flow-routermeteor add kadira:blaze-layoutmeteor add accounts-basemeteor add accounts-uimeteor add accounts-password

Agregaremos otro pequeño paquete para el control de alertas, que por cierto tiene un diseño muy bonito, lo usaremos a lo largo del tutorial.

https://atmospherejs.com/themeteorchef/bert

meteor add themeteorchef:bert

Podremos hacer búsqueda de paquetes creados por la comunidad de meteor para infinidad de usos, sea rendimiento, seguridad, apis , librerías de diseño etc. Todo esto lo podemos encontrar en https://atmospherejs.com/.

Configuración de nuestro Proyecto

Ya agregados nuestros paquetes a nuestro proyecto podremos pasar a configurarlo, debemos tener en cuenta que nuestro proyecto a nivel de imports deberá contener lo siguiente :

Dentro de la carpeta startup

  • both : Dentro de ella tenemos index.js .

Para Importar módulos utilizados tanto por el cliente como por el servidor a través de un único entrypoint
// p.ej. archivo de configuración de useraccounts

  • Client : Dentro tenemos index.js

Para Importar módulos utilizados tanto el cliente a través de un único entrypoint en este caso cargaremos el archivo routes js

Dentro tenemos a routes.js

Para configurar todas las rutas en la aplicación.Para declarar nuestra ruta debemos importar las vistas que vamos a trabajar para nuestras rutas.

Te estaras preguntando sobre los imports y BlazeLayout ya lo veremos a detalle mas adelante.

  • carpeta Server :

fixtures.js : Aquí podremos rellenar la DB con datos de ejemplo al inicio

index.js : Iniciamos el servidor para importar todo a través de un único entrypoint.

register-api.js : Registramos nuestras apis aquí, es decir nuestros métodos y publicaciones asociadas a una colección desde nuestra carpeta apis.

  • carpeta UI

Layouts

Dentro de esta carpeta crearemos nuestros layouts, es decir nuestros templates principales donde indicaremos que segmentos cambiar de nuestra aplicación, y que sigue estático gracias al FlowRouter. En este caso tendremos nuestro body.

{{ > Template.dynamic template=main }}

Con esto le estamos indicando a nuestra aplicación que sera una zona dinámica, y que cambiara de acuerdo a un nuevo template que enviemos en la variable template = main, esto se logra a trabes de FlowRouter como lo definimos anteriormente.

Para definir nuestras rutas, como podemos ver es FlowRouter.route seguido de la ruta en este caso ‘ / ‘, en caso de crear otra podríamos decir ‘/usuarios/datos’ o cualquier otra ruta que deseemos crear.
Después tenemos la propiedad name : ‘App.home’, este es el nombre que le dimos a nuestra ruta para acceder desde todo el código de nuestra app, este nombre se da en base a nuestras necesidades. Por recomendación lo creamos como App, seguido de nuestro template a cargar.

Aqu’i estamos haciendo referencia a nuestro template body.

BlazeLayout.render(‘App_body’, { main: ‘App_home’ });

App_body hace referencia a nuestro template que se comportara como layout principal y dentro de el cambiara el contenido, en este caso le estamos indicando que cargue un template dentro de el llamado App_home. Que se encuentra en la carpeta pages donde crearemos subcarpetas con las secciones de nuestra aplicación.

Como pueden notar cada elemento html en este caso templates, tienen un js con el mismo nombre, dentro del siempre debemos indicar a que html esta asociado ese js para realizar su respectiva lógica.

Como vimos en el archivo routes, que se encuentra en la carpeta startup/client/routes.js ,para indicarle que templates cargar será a través de los JS asociados al template. Siempre debemos estar pendientes de agregar esto en nuestro archivo routes.js

Por último para que todo lo que acabamos de definir en nuestra carpeta imports funcione, debemos importar en nuestro archivo main.js en la carpeta cliente de la siguiente manera :

En nuestro main.html quedara así.

En nuestra carpeta server el archivo main.js importara lo concerniente a código del lado del servidor.

Si realizamos todos los pasos de configuración en nuestro navegador visualizaremos todo correctamente asi.

Si todo esta funcionando correctamente ya hemos estructurado gran parte de nuestra aplicación para continuar a definir nuestras colecciones.

Schemas & Colecciones

Debemos tener en cuenta que Meteor usa base de datos no relacional llamada MongoDB. En esta base de datos no se maneja el concepto de tablas como en SQL si no de colecciones y cada colección contiene documentos. Podemos imaginarnos estos documentos como objetos JSON de nuestros datos almacenados en la DB.

Para mejorar la estructura de los datos almacenados en las colecciones debemos definir un schema. El schema es similar a cuando definimos las columnas de una tabla de nuestra base de datos SQL. En este definiremos los campos que podrán ser almacenados en los documentos de una colección y los detalles de cada campo.

Conclusiones

Meteor es una plataforma que esta creciendo constamente, y su curva de aprendizaje no es tan compleja, espero les halla gustado este tutorial algo muy extenso pero da entender la ideologia básica de meteor y lo simple que puede llegar a ser, hay cosas que se pueden mejorar en todo este código esto se lo dejo ya a ustedes.

Quiero saber si esto te ha servido, puedes escribirme y resolvere tus dudas. Seguire haciendo mas tutoriales de Meteor con React, Angular, Electron y como desplegarlas en nuestro servidor y hacer testing. ¡Gracias!

Continuaremos con la segunda parte donde estructuramos mucho mejor nuestra aplicación.

Parte 2 Tutorial

https://medium.com/@cristian_33451/tutorial-meteorjs-ii-7311be3f3ca

Christian Leon

Written by

I'm happy developer =)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade