Cuantum Technologies logo
Dashboard
Profile
Billing
Full Access
Log out
Menu iconMenu icon
JavaScript from Zero to Superhero
Arrow Icon
Project 3: Full-Stack Note-Taking Application
1. Objetivo 
2. Configuración e Instalación 
3. Construyendo el Backend 
4. Diseñando el Frontend 
5. Integración del Frontend con el Backend 
6. Implementación de Características 
7. Pruebas 
8. Despliegue 
9. Documentación y Mantenimiento 
10. Extensiones y Mejoras 
Buy this book
You've learned this already. ✅
Click here to view the next lesson.

Project 3: Full-Stack Note-Taking Application

3. Construyendo el Backend

El backend de nuestra aplicación de toma de notas manejará operaciones CRUD para las notas, gestionará la autenticación de usuarios (opcional) e interactuará con la base de datos MongoDB para almacenar y recuperar datos. Esta sección te guiará a través de la configuración del servidor Express, la definición del esquema de la base de datos con Mongoose e implementación de rutas API.

3.1 Inicialización del Servidor

  1. Crear el Archivo Principal del Servidor:
    • En tu directorio server, crea un archivo llamado server.js.
    • Este archivo será el punto de entrada para tu servidor.
  2. Configuración Básica del Servidor:
  • Configura un servidor Express con configuraciones iniciales:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config(); // Load environment variables from .env file

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json()); // Middleware to parse JSON

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3.2 Conexión a la Base de Datos

  1. Configura MongoDB con Mongoose:
    • Asegúrate de tener la URI de conexión a MongoDB en tu archivo .env (por ejemplo, de MongoDB Atlas o tu configuración local de MongoDB).
    • Conéctate a MongoDB usando Mongoose:
      const dbURI = process.env.MONGODB_URI;
      mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
        .then(() => console.log('Database connected successfully'))
        .catch(err => console.error('MongoDB connection error:', err));

3.3 Modelos

  1. Define un Esquema de Mongoose para Notas:
    • En el directorio server/models, crea un archivo llamado Note.js.
    • Define el esquema y el modelo para una nota:
      const mongoose = require('mongoose');

      const noteSchema = new mongoose.Schema({
        title: {
          type: String,
          required: true,
          trim: true
        },
        content: {
          type: String,
          required: true
        },
        date: {
          type: Date,
          default: Date.now
        }
      });

      const Note = mongoose.model('Note', noteSchema);
      module.exports = Note;

3.4 Rutas API

  1. Configura Rutas de Express para Operaciones CRUD:
  • Crea un directorio routes y un archivo para rutas de notas (notes.js):
    const express = require('express');
    const router = express.Router();
    const Note = require('../models/Note');

    // GET all notes
    router.get('/', async (req, res) => {
      try {
        const notes = await Note.find();
        res.json(notes);
      } catch (err) {
        res.status(500).json({ message: err.message });
      }
    });

    // POST a new note
    router.post('/', async (req, res) => {
      const note = new Note({
        title: req.body.title,
        content: req.body.content
      });
      try {
        const newNote = await note.save();
        res.status(201).json(newNote);
      } catch (err) {
        res.status(400).json({ message: err.message });
      }
    });

    // Additional routes for PUT and DELETE

    module.exports = router;
  1. Integrar Rutas en el Servidor:
  • En server.js, importa y utiliza las rutas:
    const notesRouter = require('./routes/notes');
    app.use('/api/notes', notesRouter);

Con la configuración del backend completa, tu servidor ahora es capaz de manejar solicitudes para gestionar notas, incluyendo crear, leer, actualizar y eliminarlas. Esta robusta arquitectura de backend asegura que tu aplicación pueda procesar y almacenar datos eficientemente, sirviendo como la columna vertebral de la funcionalidad de toma de notas.

3. Construyendo el Backend

El backend de nuestra aplicación de toma de notas manejará operaciones CRUD para las notas, gestionará la autenticación de usuarios (opcional) e interactuará con la base de datos MongoDB para almacenar y recuperar datos. Esta sección te guiará a través de la configuración del servidor Express, la definición del esquema de la base de datos con Mongoose e implementación de rutas API.

3.1 Inicialización del Servidor

  1. Crear el Archivo Principal del Servidor:
    • En tu directorio server, crea un archivo llamado server.js.
    • Este archivo será el punto de entrada para tu servidor.
  2. Configuración Básica del Servidor:
  • Configura un servidor Express con configuraciones iniciales:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config(); // Load environment variables from .env file

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json()); // Middleware to parse JSON

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3.2 Conexión a la Base de Datos

  1. Configura MongoDB con Mongoose:
    • Asegúrate de tener la URI de conexión a MongoDB en tu archivo .env (por ejemplo, de MongoDB Atlas o tu configuración local de MongoDB).
    • Conéctate a MongoDB usando Mongoose:
      const dbURI = process.env.MONGODB_URI;
      mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
        .then(() => console.log('Database connected successfully'))
        .catch(err => console.error('MongoDB connection error:', err));

3.3 Modelos

  1. Define un Esquema de Mongoose para Notas:
    • En el directorio server/models, crea un archivo llamado Note.js.
    • Define el esquema y el modelo para una nota:
      const mongoose = require('mongoose');

      const noteSchema = new mongoose.Schema({
        title: {
          type: String,
          required: true,
          trim: true
        },
        content: {
          type: String,
          required: true
        },
        date: {
          type: Date,
          default: Date.now
        }
      });

      const Note = mongoose.model('Note', noteSchema);
      module.exports = Note;

3.4 Rutas API

  1. Configura Rutas de Express para Operaciones CRUD:
  • Crea un directorio routes y un archivo para rutas de notas (notes.js):
    const express = require('express');
    const router = express.Router();
    const Note = require('../models/Note');

    // GET all notes
    router.get('/', async (req, res) => {
      try {
        const notes = await Note.find();
        res.json(notes);
      } catch (err) {
        res.status(500).json({ message: err.message });
      }
    });

    // POST a new note
    router.post('/', async (req, res) => {
      const note = new Note({
        title: req.body.title,
        content: req.body.content
      });
      try {
        const newNote = await note.save();
        res.status(201).json(newNote);
      } catch (err) {
        res.status(400).json({ message: err.message });
      }
    });

    // Additional routes for PUT and DELETE

    module.exports = router;
  1. Integrar Rutas en el Servidor:
  • En server.js, importa y utiliza las rutas:
    const notesRouter = require('./routes/notes');
    app.use('/api/notes', notesRouter);

Con la configuración del backend completa, tu servidor ahora es capaz de manejar solicitudes para gestionar notas, incluyendo crear, leer, actualizar y eliminarlas. Esta robusta arquitectura de backend asegura que tu aplicación pueda procesar y almacenar datos eficientemente, sirviendo como la columna vertebral de la funcionalidad de toma de notas.

3. Construyendo el Backend

El backend de nuestra aplicación de toma de notas manejará operaciones CRUD para las notas, gestionará la autenticación de usuarios (opcional) e interactuará con la base de datos MongoDB para almacenar y recuperar datos. Esta sección te guiará a través de la configuración del servidor Express, la definición del esquema de la base de datos con Mongoose e implementación de rutas API.

3.1 Inicialización del Servidor

  1. Crear el Archivo Principal del Servidor:
    • En tu directorio server, crea un archivo llamado server.js.
    • Este archivo será el punto de entrada para tu servidor.
  2. Configuración Básica del Servidor:
  • Configura un servidor Express con configuraciones iniciales:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config(); // Load environment variables from .env file

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json()); // Middleware to parse JSON

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3.2 Conexión a la Base de Datos

  1. Configura MongoDB con Mongoose:
    • Asegúrate de tener la URI de conexión a MongoDB en tu archivo .env (por ejemplo, de MongoDB Atlas o tu configuración local de MongoDB).
    • Conéctate a MongoDB usando Mongoose:
      const dbURI = process.env.MONGODB_URI;
      mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
        .then(() => console.log('Database connected successfully'))
        .catch(err => console.error('MongoDB connection error:', err));

3.3 Modelos

  1. Define un Esquema de Mongoose para Notas:
    • En el directorio server/models, crea un archivo llamado Note.js.
    • Define el esquema y el modelo para una nota:
      const mongoose = require('mongoose');

      const noteSchema = new mongoose.Schema({
        title: {
          type: String,
          required: true,
          trim: true
        },
        content: {
          type: String,
          required: true
        },
        date: {
          type: Date,
          default: Date.now
        }
      });

      const Note = mongoose.model('Note', noteSchema);
      module.exports = Note;

3.4 Rutas API

  1. Configura Rutas de Express para Operaciones CRUD:
  • Crea un directorio routes y un archivo para rutas de notas (notes.js):
    const express = require('express');
    const router = express.Router();
    const Note = require('../models/Note');

    // GET all notes
    router.get('/', async (req, res) => {
      try {
        const notes = await Note.find();
        res.json(notes);
      } catch (err) {
        res.status(500).json({ message: err.message });
      }
    });

    // POST a new note
    router.post('/', async (req, res) => {
      const note = new Note({
        title: req.body.title,
        content: req.body.content
      });
      try {
        const newNote = await note.save();
        res.status(201).json(newNote);
      } catch (err) {
        res.status(400).json({ message: err.message });
      }
    });

    // Additional routes for PUT and DELETE

    module.exports = router;
  1. Integrar Rutas en el Servidor:
  • En server.js, importa y utiliza las rutas:
    const notesRouter = require('./routes/notes');
    app.use('/api/notes', notesRouter);

Con la configuración del backend completa, tu servidor ahora es capaz de manejar solicitudes para gestionar notas, incluyendo crear, leer, actualizar y eliminarlas. Esta robusta arquitectura de backend asegura que tu aplicación pueda procesar y almacenar datos eficientemente, sirviendo como la columna vertebral de la funcionalidad de toma de notas.

3. Construyendo el Backend

El backend de nuestra aplicación de toma de notas manejará operaciones CRUD para las notas, gestionará la autenticación de usuarios (opcional) e interactuará con la base de datos MongoDB para almacenar y recuperar datos. Esta sección te guiará a través de la configuración del servidor Express, la definición del esquema de la base de datos con Mongoose e implementación de rutas API.

3.1 Inicialización del Servidor

  1. Crear el Archivo Principal del Servidor:
    • En tu directorio server, crea un archivo llamado server.js.
    • Este archivo será el punto de entrada para tu servidor.
  2. Configuración Básica del Servidor:
  • Configura un servidor Express con configuraciones iniciales:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config(); // Load environment variables from .env file

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json()); // Middleware to parse JSON

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3.2 Conexión a la Base de Datos

  1. Configura MongoDB con Mongoose:
    • Asegúrate de tener la URI de conexión a MongoDB en tu archivo .env (por ejemplo, de MongoDB Atlas o tu configuración local de MongoDB).
    • Conéctate a MongoDB usando Mongoose:
      const dbURI = process.env.MONGODB_URI;
      mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
        .then(() => console.log('Database connected successfully'))
        .catch(err => console.error('MongoDB connection error:', err));

3.3 Modelos

  1. Define un Esquema de Mongoose para Notas:
    • En el directorio server/models, crea un archivo llamado Note.js.
    • Define el esquema y el modelo para una nota:
      const mongoose = require('mongoose');

      const noteSchema = new mongoose.Schema({
        title: {
          type: String,
          required: true,
          trim: true
        },
        content: {
          type: String,
          required: true
        },
        date: {
          type: Date,
          default: Date.now
        }
      });

      const Note = mongoose.model('Note', noteSchema);
      module.exports = Note;

3.4 Rutas API

  1. Configura Rutas de Express para Operaciones CRUD:
  • Crea un directorio routes y un archivo para rutas de notas (notes.js):
    const express = require('express');
    const router = express.Router();
    const Note = require('../models/Note');

    // GET all notes
    router.get('/', async (req, res) => {
      try {
        const notes = await Note.find();
        res.json(notes);
      } catch (err) {
        res.status(500).json({ message: err.message });
      }
    });

    // POST a new note
    router.post('/', async (req, res) => {
      const note = new Note({
        title: req.body.title,
        content: req.body.content
      });
      try {
        const newNote = await note.save();
        res.status(201).json(newNote);
      } catch (err) {
        res.status(400).json({ message: err.message });
      }
    });

    // Additional routes for PUT and DELETE

    module.exports = router;
  1. Integrar Rutas en el Servidor:
  • En server.js, importa y utiliza las rutas:
    const notesRouter = require('./routes/notes');
    app.use('/api/notes', notesRouter);

Con la configuración del backend completa, tu servidor ahora es capaz de manejar solicitudes para gestionar notas, incluyendo crear, leer, actualizar y eliminarlas. Esta robusta arquitectura de backend asegura que tu aplicación pueda procesar y almacenar datos eficientemente, sirviendo como la columna vertebral de la funcionalidad de toma de notas.

Purchase this book