Image for post
Image for post

Para los que no conozcan Meteor, es una plataforma para crear aplicaciones Web, móvil y de escritorio. Lo interesante de Meteor es que está 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, que es 100 % reactivo, gracias a los principios de Websockets.

En este tutorial veremos a más detalle Meteor y su ideología en su versión 1.6, que es lo que más 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 Windows.

Image for post
Image for post

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.

Image for post
Image for post

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 él nos esta indicando que nos situemos dentro de nuestro proyecto y que ejecutemos el comando ‘meteor’ para iniciarlo.

Image for post
Image for post

Estructura del proyecto.

Image for post
Image for post

Este ejemplo de estructura que nos generó 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’, un ‘title’ y el ‘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 generó 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.

Image for post
Image for post
Image for post
Image for post

A través de los Spacerbars podremos enviar variables para hacer más dinámico el manejo de nuestros Templates. En este caso enviaré 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.

Image for post
Image for post

El resultado en el navegador será 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.

Image for post
Image for post

Como pueden ver, declaré 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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Aquí 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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

Estructura Nueva

Image for post
Image for post

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 contendrá 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 mencionamos anteriormente. 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
Image for post
Image for post

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/.

Image for post
Image for post

Configuración de nuestro Proyecto

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

Image for post
Image for post

Dentro de la carpeta startup

Image for post
Image for post
  • 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

Image for post
Image for post

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.

Image for post
Image for post

Te estarás 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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
  • carpeta UI
Image for post
Image for post

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.

Image for post
Image for post
{{ > Template.dynamic template=main }}

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

Image for post
Image for post

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í 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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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 :

Image for post
Image for post

En nuestro main.html quedara así.

Image for post
Image for post

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.

Image for post
Image for post

Si todo está 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 constantemente y su curva de aprendizaje no es tan compleja. Espero les haya gustado éste tutorial algo extenso, pero da a entender la ideología básica de meteor y lo simple que puede llegar a ser. Hay cosas que se pueden mejorar en el código actual, pero queda a libertad de cada uno de ustedes.

Quiero saber si esto te ha servido, puedes escribirme y resolveré cualquier duda que tengas. Seguiré haciendo más tutoriales de Meteor con React, Angular, Electron y como desplegarlos en nuestro servidor y hacer testing. ¡Gracias por verlo!

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

Parte 2 Tutorial

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

Written by

I'm happy developer =)