Tutorial Meteor JS: Interfaz y registro en BD
Continuamos hoy con nuestro proyecto de web-app similar a Twitter. En este post nos centraremos en crear una UI (User Interface o interfaz de usuario) básica con la que poder ir mostrando los cambios realizados.
Obviamente no vamos a utilizar el nombre de proyecto que usamos en el artículo anterior, por lo que vamos a empezar por crear un proyecto nuevo de la misma forma que creamos el anterior:
meteor create miTwitter
Accedemos a la carpeta:
Cd miTwitter
E iniciamos Meteor:
Meteor
Abriremos un navegador y accederemos a nuestro proyecto (recordad, por defecto es http://localhost:3000) para comprobar que todo funciona como debe:
Una vez iniciado y comprobado que todo funciona correctamente, vamos a comenzar por añadir la interfaz . Para todas estas modificaciones recomiendo trabajar con una nueva terminal y dejar corriendo la app en la primera , para no tener que estar reiniciando el servicio de Meteor cada vez que tengamos que cambiar algo en un fichero, además es una de las ventajas de Meteor ¡aprovechémosla! (eso sí, deberá ser con el mismo usuario con el que creamos el proyecto, root, en mi caso y dentro de la carpeta de nuestro proyecto).
Interfaz
Meteor dispone de multitud de paquetes a nuestra disposición y el de la interfaz no iba a ser menos. Aquellos que seáis expertos en desarrollo de interfaces, seguramente os interese desarrollar la vuestra propia, o reutilizar algún proyecto que hayáis estado llevando a cabo, pero nosotros vamos a depender completamente de Bootstrap para nuestro ejemplo .
Añadiendo Bootstrap:
Como si de npm o apt se tratase, Meteor cuenta con su propio gestor de paquetes . Podremos añadir paquetes como el de la interfaz que nos interesa de la siguiente forma:
Meteor add twbs:bootstrap
Una vez finalizada la instalación, podremos ver en la primera terminal los cambios que se han realizado:
Y aquí es cuando Meteor demuestra uno de sus puntos fuertes. Podemos comprobar cómo el servidor Meteor se ha reiniciado él mismo para implementar los cambios que hemos realizado, además estos cambios se darán en ambas partes del servicio, tanto en servidor como clientes.
Apariencia
Vamos a editar el fichero miTwitter.html para dar una apariencia básica a nuestra aplicación. Para esto deberemos tener en cuenta tres apartados importantes:
- TweetBox : Apartado donde nuestros usuarios introducirán un micropost.
- Contador de : Si vamos a especificar un límite de caracteres para los mensajes, deberemos mostrarlo. En el .html llamaremos a un par de funciones que definiremos más adelante en el .js (
charClasspara modificar el color del contador a rojo cuando nos pasemos de caracteres escritos, ycharCountcon el que mostraremos los caracteres restantes hasta el límite impuesto).
- Botón de Publicar o “Twittear” : Para hacerlo bien, este botón debería estar desactivo mientras que no se cumplan una serie de criterios, por ejemplo, si no hay nada escrito en el tweetBox o si se ha sobrepasado el límite de caracteres.
Os dejo un ejemplo de cómo podría quedar:
<head>
<title>miTwitter</title>
</head>
<body>
{{> tweetBox}}
</body>
<template name=”tweetBox”>
<div class=”tweetbox-container”>
<div class=”panel panel-default tweetbox col-md-6”>
<div class=”panel-body”>
<!—Caja para el texto del twitt -->
<textarea class=”form-control” id=”tweetText” placeholder=”¿Qué te cuentas?” rows=”3”></textarea>
<!—Contador y botón -->
<div class=”pull-right btnGroup”>
<strong class=”{{charClass}}”>{{charCount}}</strong>
<button class=”btn btn-info pull-right” type=”button” {{disableButton}}>Twittear</button>
</div>
</div>
</div>
</div>
</template>
Vamos ahora con el fichero miTwitter.css donde definiremos una serie de aspectos de la apariencia que apoyarán al fichero html anterior. Esto ya es algo más del gusto de cada un@ así que sentíos libres de darle el aspecto que más os guste ;) Aquí un ejemplo:
.tweetbox-container {
margin: 45px;
}
.tweetbox {
background-color: rgb(240, 247, 254);
}
.btnGroup {
margin-top: 10px;
display: flex;
align-items: center;
}
.charCount {
margin-right: 10px;
color: gray;
}
.errCharCount {
margin-right: 10px;
color: red;
}
Contador y Botón
Ya tenemos dada cierta forma a nuestra apariencia, va siendo hora de hacer que haga algo ^^. Estos cambios deberemos implementarlos en el fichero miTwitter.js .
Empezamos con el contador, el cual queremos que realice un seguimiento sobre el número de caracteres que hay en el tweetbox. Las plantillas o templates de Meteor ofrecen tres ciclos distintos para las llamadas a las funciones: onCreated, onDestroyed y onRendered. Vamos a fijar el contador de caracteres a cero cuando se muestre por primera vez el cuadro para el Tweet.
Template.tweetBox.onRendered(function(){
Session.set(‘numChars’, 0);
});
Y por supuesto queremos que este contador se actualice cuando el usuario introduzca contenido en este apartado. Definimos entonces un evento que esté pendiente de las modificaciones que se realicen en el objeto tweetBox:
Template.tweetBox.events({
‘input #tweetText’:function(){
Session.set(‘numChars’, $(‘#tweetText’).val().length);
}
});
Por último, definimos unos 'helpers' que llevarán los cambios en las variables de la sesión actual al HTML para mostrarlos al usuario. Tal y como pasaba con el fichero .html, deberemos introducir tres variables: {{charCount}} , {{charClass}} y {{disableButton}} :
Template.tweetBox.helpers({
charCount: function() {
return 140 - Session.get('numChars');
},
charClass: function() {
if (Session.get('numChars') > 140) {
return 'errCharCount'; // o el nombre que le disteis en el fichero css
} else {
return 'charCount'; //o el nombre que le disteis en el fichero css
}
},
disableButton: function() {
if (Session.get('numChars') <= 0 ||
Session.get('numChars') > 140) {
return 'disabled';
}
}
});
Añadiendo mensajes a MongoDB
Obviamente queremos que nuestros mensajes se guarden , por lo que deberemos enviarlos a la base de datos para que queden registrados. Esto lo podremos hacer añadiendo una función que envíe a la base de datos el mensaje una vez que hagamos clic en el botón de Twittear. Dicha función irá dentro de los “eventos” del tweetBox (Template.tweetBox.events) y sería algo como esto:
'click button': function() {
var twitt = $('#tweetText').val();
$('#tweetText').val("");
Session.set('numChars', 0);
Twitts.insert({message: twitt});
}
Además, deberemos definir una colección dentro de MongoDB para estos mensajes, así que antes del apartado o bloque if (Meteor.isClient)” añadiremos la siguiente línea:
Twitts = new Meteor.Collection(“twitts”);
Añadiendo esta línea fuera de cualquier bloque (cliente o servidor), esta colección de la base de datos será accesible por cualquiera de las dos partes, haciendo “públicos” los mensajes que almacene.
Vamos ahora a probar a insertar nuestro primer Twitt y ver si se registra correctamente. Accedemos al navegador, escribimos en el cuadro habilitado para tal efecto y pulsamos “Twittear”. Ya de paso comprobamos también que el contador funciona de forma correcta ;).
Como aún no estamos mostrando los Twitts en la interfaz, tenemos que irnos a la consola de MongoDB para comprobar el registro correcto del Twitt que acabamos de enviar. Para esto sólo deberemos situarnos en la carpeta del proyecto en el que estamos trabajando y escribir:
meteor mongo
Se mostrará la consola de la base de datos mongo, y escribiremos lo siguiente para encontrar los mensajes que hemos insertado en la colección twitts:
db.twitts.find()
Para este comando deberíamos obtener una respuesta similar a esta, donde vemos que efectivamente el mensaje se ha insertado de forma correcta en la base de datos::
Y con esto ya tenemos una app funcional que iremos mejorando en siguientes artículos. Como he dicho anteriormente, lo aquí mostrado es casi todo apariencia , por lo que por favor, sentíos libres de dar la apariencia que queráis a vuestras aplicaciones y compartirlas en los comentarios ¡quizás ayudéis a otros usuarios con vuestras ideas!
Un dato interesante ahora que tocamos MongoDB, es que Meteor soporta paquetería “minimongo” , que almacenan un emulador de MongoDB en el cliente, haciendo todas las operaciones referentes a la base de datos mucho más rápidas y estables al redundarse los asentamientos, dando mayor consistencia a la aplicación.
Todo esto y mucho más podréis encontrarlo en el curso de Meteor, al que os recomiendo que le echéis un vistazo, porque no hay mejor forma de aprender que de la mano de grandes profesionales con amplia experiencia en el sector y que orientarán la formación de cara a lo que se solicita en puestos de trabajo hoy día.
También te puede interesar...
