Cómo crear un sencillo servicio de consulta de datos en tiempo real apoyándonos en el framework MeteorJS.

1. Miguel Angel Alvarez
BASES DE DATOS EN TIEMPO REAL
MeteorJS
@midesweb
@EscuelaIT

2. Qué veremos hoy
▪ Índice
o MeteorJS
• Qué es MeteorJS
• Primeros pasos
o Creando un todo-list
• Templates
• Eventos
• Colecciones, acceso a datos en tiempo real

3. Bases de datos en tiempo real

4. Bases de datos en tiempo real

5. MeteorJS

6. Meteor (MeteorJS) es un framework
fullstack, basado en Javascript (NodeJS
y Javascript para el navegador).
- Aplicaciones multiplataforma
- Web
- iOS
- Android
- Desktop
Introducción a MeteorJS
Qué es Meteor

7. Introducción a MeteorJS
Además de ser multiplataforma, su característica más importante
es la posibilidad de desarrollar aplicaciones con bases de datos en
tiempo real.
- El sistema proporciona los datos al cliente
- Si los datos cambian, el sistema envía los datos de nuevo al
cliente, sin hacer ningún tipo de programación adicional.
Características

8. Introducción a MeteorJS
https://www.meteor.com/install
Instalación

9. Introducción a MeteorJS
meteor create myapp
cd myapp
meteor npm install
meteor
Crear una aplicación

10. Práctica!

11. Crear una aplicación todo-list
- Situamos nuestros elementos de interfaz gráfica en
imports/ui
- Archivo .html (la vista)
- Archivo .js (importa la plantilla y define el modelo)
Templates
https://www.meteor.com/tutorials

12. Crear una aplicación todo-list
Creamos colecciones directamente en la base de datos
MongoDB.
1. Creamos una colección imports/api/tasks.js
2. Cargar la colección en el servidor server/main.js
3. Cargar la colección en el cliente imports/ui/body.js
Ahora podemos agregar items a la colección mediante consola:
meteor mongo
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
Colecciones

13. Crear una aplicación todo-list
Creamos un formulario para crear tareas
1. Creamos el formulario en el cuerpo imports/ui/body.js
2. Definimos un evento para almacenar las tareas en el
controlador del cuerpo imports/ui/body.js
3. Ordenamos las tareas por fecha
Alta de tareas

14. Crear una aplicación todo-list
Marcar las tareas como acabadas y borrarlas.
1. Creamos el template para las tareas imports/ui/task.html
a. Checkbox para definirla como completada
b. Botón parar borrarla
2. Definimos manejadores de eventos en imports/ui/task.js
a. Task.update() implementar actualizaciones
b. Task.remove() borrados
3. Eliminamos el template de task anterior e importamos el
template de task nuevo en body.js
Actualizaciones y borrados

15. Crear una aplicación todo-list
Instalamos un diccionario reactivo para almacenar el estado.
meteor add reactive-dict
1. Actualizamos template del imports/ui/body.html
a. Checkbox para marcar visibilidad de las tareas completadas
b. Variable para mostrar número de tareas no completadas
2. Comportamientos en imports/ui/body.js
a. Importamos ReactiveDict
b. Inicializamos el estado en onCreated
c. Las tareas que se devuelven al templeta pueden ser unas u otras
dependiento del estado
d. IncompleteCount se define con el resultado de una búsqueda
e. Evento para manejar cambios en el estado al activar el checkbox
Gestión del estado

16. Crear una aplicación todo-list
Instalamos el módulo de gestión de usuarios.
meteor add accounts-ui accounts-password
1. Incluimos el template de usuarios en imports/ui/body.html
2. Configuración en imports/startup/accounts-config.js
3. Incluir la configuración en el client/main.js
4. Almacenar los datos del usuario
5. Mostrar el formulario solamente si el usuario está logueado
6. Mostrar el usuario que ha creado el task
Gestión de usuarios

17. Crear una aplicación todo-list
Quitamos el package "insecure".
remove insecure
1. Redefinimos imports/api/task.js
a. Importamos meteor/meteor y meteor/check
b. Creamos métodos para operaciones con tasks
2. Ejecutar método insert en imports/ui/body.js
3. Ejecutar método para setChecked y remove en
imports/ui/task.js
Seguridad

18. Gracias
Miguel Angel Alvarez
insight@insightcreativos.com
649 76 76 31
@midesweb