[Meteor] Uso de MongoDB

Meteor proporciona un conjunto de funcionalidades de alto nivel para persistir información en bases de datos de tipo documental, en este caso MongoDB, la cual se encuentra por defecto integrada con la plataforma y no requiere de configuraciones adicionales para su uso desde React.

Lo primero que debe hacer es crear el archivo imports/api/tasks.js. Este archivo es el que se encargará de establecer la conexión con MongoDB.

import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

Posteriormente, diríjase al archivo server/main.js, borre todo el contenido allí presente e ingrese el que se dispone a continuación. Importar el archivo encargado de crear la conexión en el archivo principal del lado del servidor habilitará la creación e intercambio de información entre el cliente y la base de datos de forma transparente y sin requerir de código adicional del lado del servidor.

import '../imports/api/tasks.js';

Para poder usar este nuevo conjunto de funcionalidades debe agregar un nuevo componente a la aplicación mediante el siguiente comando:

meteor add react-meteor-data

Finalmente, debe modificar el archivo imports/ui/App.js para React pueda estar en la disposición de consultar MongoDB y disponer la información en la interfaz de usuario.

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
 
import { Tasks } from '../api/tasks.js';
 
import Task from './Task.js';
 
// App component - represents the whole app
class App extends Component {
  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}
 
export default withTracker(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
})(App);

Si tiene alguna respecto al contenido que debe ser dispuesto en cada uno de los archivos, puede revisar el código de la aplicación dispuesto en este mismo repositorio.

Meteor tiene su propia consola para acceder a MongoDB. Puede acceder a ella abriendo una nueva consola de linea de comandos e ingresar:

meteor mongo

El comando para ingresar un nuevo documento a la colección que fue creada cuando se inició la aplicación es el mismo usado en MongoDB tradicional:

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

Si todo va bien, a medida que ingrese nuevos documentos por medio de la consola de MongoDB, podrá verlos automáticamente en la interfaz de usuario sin requerir de la actualización de la página.

Reto

• Continue desarrollando el tutorial de Meteor dispuesto en la página oficial cubriendo los aspectos de creación, actualización y eliminación de documentos desde la interfaz de usuario.
• Extienda la aplicación con los aspectos de seguridad abordados durante el mismo tutorial.
• Agregue elementos de interacción complementarios que brinden al usuario la posibilidad de compartir tareas con otros usuarios, incluir fecha y hora límite para el desempeño de la tarea, creación de subtareas con estado (nueva / en curso / finalizada) independiente de la tarea principal e involucre componentes geográficos como los ofrecidos por Google Maps Platform para la georeferenciación de las tareas.
• Cree una vista adicional que le permita a un usuario administrador realizar consultas por estado, fecha y hora límites de ejecución y proximidad geográfica.