Webinar: Base de Datos en tiempo real con MeteorJS
0 recomendaciones235 vistas
El documento es una guía introductoria sobre el framework MeteorJS, destacando su capacidad para desarrollar aplicaciones con bases de datos en tiempo real. Se explica cómo crear una aplicación práctica de lista de tareas, incluyendo la creación de colecciones en MongoDB, manejo de eventos, gestión del estado y usuarios, así como aspectos de seguridad. MeteorJS permite a los desarrolladores implementar funcionalidades sin programación adicional gracias a su arquitectura reactiva.
Webinar: Base de Datos en tiempo real con 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
- 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