Usar un Único Entorno Virtual Python (`venv`)

Puedes usar un único entorno virtual (venv) para múltiples proyectos, pero debes ser disciplinado en la gestión de dependencias para evitar conflictos.

1- Crea el entorno virtual:

En la carpeta donde deseas centralizar tus proyectos, crea el entorno virtual.

mkdir ~/proyectos
cd ~/proyectos
python3 -m venv venvirtual

Creando directorio y subdirectorio del proyecto 1:

Opción 1: Método paso a paso

Crea un directorio llamado gestion-archivos:

mkdir gestion-archivos

Navega al directorio recién creado:

cd gestion-archivos

Crea el archivo server.js dentro del directorio:

touch server.js

Crea el archivo index.html dentro del directorio:

 touch index.html

Opcion 2: Todo en una sola línea de comando utilizando && :

 mkdir gestion-archivos && cd gestion-archivos && touch server.js index.html

Opcion 3: Todo en una sola línea de comando utilizando && y llaves {}:

 mkdir gestion-archivos && { cd gestion-archivos && touch server.js index.html; }

2- Activar el entorno virtual:

Antes de trabajar en cualquier proyecto, activa el entorno:

source ~/proyectos/venvirtual/bin/activate

Verás que el nombre del entorno aparece en tu terminal. Por ejemplo: (venv). En nuestro caso lo llamamos: (venvirtual)

 (venvirtual) user@user:~/proyectos$

Estructura de arbol: tree
Para Instalar la estructura de arbol intalar:

sudo apt install tree

Luego ejecutar el comando: tree

tree

Veras la estructura de arbol de proyectos, donde se encuentra instalado venv (venvirtual)

(venvirtual) user@user:~/proyectos$ tree
.
├── gestion-archivos
│   ├── index.html
│   └── server.js
└── venvirtual
    ├── bin
    │   ├── activate
    │   ├── activate.csh
    │   ├── activate.fish
    │   ├── Activate.ps1
    │   ├── pip
    │   ├── pip3
    │   ├── pip3.12
    │   ├── python -> python3
    │   ├── python3 -> /usr/bin/python3
    │   └── python3.12 -> python3
    ├── include
    │   └── python3.12
    ├── lib
    │   └── python3.12
    │       └── site-packages
    │           ├── pip
    │           │   ├── __init__.py
    │           │   ├── _internal
    
    │           └── pip-24.0.dist-info
    │               ├── AUTHORS.txt
    │               ├── entry_points.txt
    │               ├── INSTALLER
    │               ├── LICENSE.txt
    │               ├── METADATA
    │               ├── RECORD
    │               ├── REQUESTED
    │               ├── top_level.txt
    │               └── WHEEL
    ├── lib64 -> lib
    └── pyvenv.cfg

Configuracion del Backend y Frontend

1. Instalar Node.js y npm

Abrir una nueva terminal: CTRL + ALT + T

Descargar e Instalar Node.js: Sigue los pasos de instalación según tu sistema operativo (Windows, macOS, Linux).Confirmar la instalación: Esto mostrará las versiones instaladas de node.js y npm estén.

node -v
npm -v

2. Configurar el Backend

2.1- Crea la carpeta del proyecto 1: gestion-archivos

En tu terminal, navega a la ubicación de tu entorno de trabajo y crea la carpeta del proyecto:

mkdir gestion-archivos
cd gestion-archivos

user@user:~$ cd proyectos/gestion-archivos

2.2 Inicializa un proyecto Node.js:

Ejecuta el siguiente comando para inicializar un archivo package.json:

npm init -y

Esto crea un archivo package.json con configuración básica. Ejemplo de este caso.

user@user:~/proyectos/gestion-archivos$ npm init -y
Wrote to /home/user/proyectos/gestion-archivos/package.json:

{
  "name": "gestion-archivos",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

2.3- Instalar Express:

Instala el paquete Express para manejar el backend:

npm install express

Esto va ha generar un package-lock.json y la carpeta node_modules

2.4- Crear el archivo del servidor:

En la carpeta del proyecto, crea un archivo llamado server.js con el siguiente contenido:

const express = require("express");
const fs = require("fs");
const path = require("path");

const app = express();
app.use(express.json()); // Permitir JSON en las solicitudes

// Servir archivos estáticos como index.html desde el directorio actual
app.use(express.static(__dirname)); 

// Ruta de la carpeta htdocs
const htdocsPath = path.join(__dirname, "htdocs");

// Crear la carpeta `htdocs` si no existe
if (!fs.existsSync(htdocsPath)) {
  fs.mkdirSync(htdocsPath);
}

// Endpoint para crear archivos
app.post("/create-file", (req, res) => {
  const { fileName, content } = req.body;

  if (!fileName) {
    return res.status(400).send("El nombre del archivo es obligatorio.");
  }

  const filePath = path.join(htdocsPath, fileName);

  fs.writeFile(filePath, content || "", (err) => {
    if (err) {
      return res.status(500).send("Error al crear el archivo.");
    }
    res.send("Archivo creado exitosamente.");
  });
});

// Endpoint para listar archivos
app.get("/list-files", (req, res) => {
  fs.readdir(htdocsPath, (err, files) => {
    if (err) {
      return res.status(500).send("Error al listar archivos.");
    }
    res.json(files);
  });
});

// Configurar el puerto del servidor
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

Ejecutar el backend:

En la terminal, ejecuta:

node server.js

Esto iniciará el servidor en http://localhost:3000

3. Configurar el Frontend

Crear los archivos del frontend: En la carpeta del proyecto, crea un archivo llamado index.html con el siguiente contenido.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gestión de Archivos</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .button {
      margin: 10px;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .button:hover {
      background-color: #45a049;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Gestión de Archivos</h1>
  <div>
    <label>Nombre del archivo:</label>
    <input type="text" id="fileName" placeholder="archivo.txt">
    <textarea id="fileContent" placeholder="Escribe contenido aquí..."></textarea>
    <button class="button" onclick="createFile()">Crear Archivo</button>
  </div>
  <div>
    <button class="button" onclick="listFiles()">Listar Archivos</button>
    <ul id="fileList"></ul>
  </div>

  <script>
    const API_URL = "http://localhost:3000"; // Asegúrate de que esto coincida con el backend

    function createFile() {
      const fileName = document.getElementById("fileName").value;
      const content = document.getElementById("fileContent").value;

      fetch(`${API_URL}/create-file`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ fileName, content })
      })
        .then(response => response.text())
        .then(data => alert(data))
        .catch(error => console.error("Error:", error));
    }

    function listFiles() {
      fetch(`${API_URL}/list-files`)
        .then(response => response.json())
        .then(files => {
          const fileList = document.getElementById("fileList");
          fileList.innerHTML = ""; // Limpiar la lista
          files.forEach(file => {
            const li = document.createElement("li");
            li.textContent = file;
            fileList.appendChild(li);
          });
        })
        .catch(error => console.error("Error:", error));
    }
  </script>
</body>
</html>

Abrir el frontend:

Abre el archivo index.html en tu navegador.

http://localhost:3000/index.html

4. Probar el Proyecto

Inicia el backend con:

node server.js

Abre el archivo index.html en tu navegador.

http://localhost:3000/index.html

Usa la interfaz para crear archivos, listarlos y verificar que todo funciona correctamente.

Cómo funciona el `http://localhost:3000`

La URL http://localhost:3000 corresponde al backend (servidor) que configuraste utilizando Node.js. Aquí es donde se están ejecutando los endpoints que creaste (como /create-file o /list-files). Vamos a desglosarlo:

localhost: Representa tu propia computadora (también llamado "host local").
3000: Es el número del puerto donde está corriendo tu servidor

Cuando el servidor está activo, puedes acceder a los endpoints escribiendo directamente en el navegador: http://localhost:3000

Si no configuraste un mensaje de bienvenida en tu backend, la página puede quedar en blanco (¡pero esto es normal!).

Para probar un endpoint específico: Si configuraste un endpoint para listar archivos, puedes escribir: http://localhost:3000/list-files

Esto mostrará la lista de archivos en formato JSON.

¿Cómo interactúan el backend (localhost) y el frontend ?

Cuando abras el archivo index.html en el navegador, este archivo enviará solicitudes al backend (que está corriendo en http://localhost:3000) para realizar acciones como crear, listar o editar archivos.

Flujo de ejemplo:

Abre index.html en tu navegador. http://localhost:3000/index.html
Escribe el nombre y contenido de un archivo en los campos correspondientes y presiona el botón "Crear Archivo".
El frontend (index.html) enviará una solicitud al backend, usando la URL http://localhost:3000/create-file.
El backend recibirá la solicitud, creará el archivo en la carpeta htdocs, y devolverá una respuesta que se mostrará en tu navegador.

¿Cómo saber si el servidor está funcionando correctamente en el navegador ?

Asegúrate de que tu servidor está corriendo antes de hacer pruebas:

node server.js

Si el servidor está corriendo, usar el navegador: Acceder al backend (probando un endpoint).

http://localhost:3000/list-files

Para abrir el frontend: Sigue las opciones (doble clic, arrastrar, etc.) para abrir index.html.

Nota adicional sobre servidores web locales

Si necesitas una conexión más integrada entre el frontend y el backend (en lugar de abrir index.html directamente desde tu archivo), puedes usar herramientas como live-server o configurar tu backend para servir el archivo HTML directamente.

Por ejemplo, en tu archivo server.js, podrías agregar esta línea:

// Sirve archivos estáticos como index.html
  app.use(express.static(__dirname));

Después, puedes acceder al frontend escribiendo en tu navegador: http://localhost:3000/index.html

Dónde incluir `app.use(express.static(__dirname));`

En tu archivo server.js, debes colocar esta línea cerca de la parte superior, antes de definir cualquier endpoint.

Cómo usar el frontend con esta configuración

Con esta línea incluida, puedes abrir el frontend directamente desde la URL del servidor (http://localhost:3000/index.html), y no necesitas arrastrar ni abrir manualmente el archivo en tu navegador.

Pasos:

Ejecuta el servidor: node server.js
El servidor debería estar corriendo en http://localhost:3000.
Accede al frontend: http://localhost:3000/index.html
Esto abrirá el archivo index.html directamente desde el servidor.

Ventajas de esta configuración

Centralización: Backend y frontend están gestionados desde el servidor, lo que facilita las pruebas.
Consistencia: Puedes integrar fácilmente otros recursos (CSS, imágenes, etc.) desde el mismo servidor.
Practicidad: Evitas manejar manualmente los archivos del frontend.

Estructura esperada del proyecto (Tree)

Tu proyecto gestion-archivos debería estar organizado de la siguiente manera:

gestion-archivos/
├── htdocs/                    # Carpeta creada automáticamente por el backend
├── server.js                  # Archivo principal del backend
├── index.html                 # Interfaz del frontend
├── package.json               # Archivo de configuración de Node.js
├── package-lock.json          # Archivo generado automáticamente por npm
├── node_modules/              # Dependencias instaladas con npm

Detalles de cada elemento:

htdocs/: Carpeta donde se guardarán los archivos creados desde el frontend. El backend crea esta carpeta automáticamente si no existe.
server.js: Contiene el código del backend. Este archivo debe estar ejecutándose con node server.js.
index.html: Archivo que representa la interfaz del usuario. Se abre en el navegador para interactuar con el servidor.
package.json: Archivo generado por npm init -y que gestiona las dependencias del proyecto.
node_modules/: Carpeta que contiene las dependencias instaladas por npm.

Ejemplo Práctico 2: Proyecto "Gestión de Archivos"

Estructura de Carpetas:

~/proyectos/
    ├── venvirtual/
    ├── gestion-archivos/
    │   ├── server.py
    │   ├── index.html
    │   ├── gestion-archivos-requirements.txt
    ├── proyecto-dos/
    │   ├── app.py
    │   ├── proyecto-dos-requirements.txt

Comandos para Gestión de Dependencias:

1- Activa el entorno:

 source ~/proyectos/venvirtual/bin/activate

2- Instala las dependencias del proyecto "Gestión de Archivos":

cd ~/proyectos/gestion-archivos
pip install -r gestion-archivos-requirements.txt

3- Instala dependencias para un nuevo proyecto:

cd ~/proyectos/proyecto-dos
pip install -r proyecto-dos-requirements.txt

Ventajas de Usar un Único `venv` o VM

Ahorro de espacio en disco al evitar múltiples entornos virtuales.
Facilidad de administración al centralizar los proyectos.
Flexibilidad para probar diferentes configuraciones sin afectar el sistema principal.

Proyecto - Gestión de Archivos

Usar un Único Entorno Virtual Python (`venv`)

1- Crea el entorno virtual:

Creando directorio y subdirectorio del proyecto 1:

2- Activar el entorno virtual:

Configuracion del Backend y Frontend

1. Instalar Node.js y npm

2. Configurar el Backend

2.1- Crea la carpeta del proyecto 1: gestion-archivos

2.2 Inicializa un proyecto Node.js:

2.3- Instalar Express:

2.4- Crear el archivo del servidor:

3. Configurar el Frontend

4. Probar el Proyecto

Cómo funciona el `http://localhost:3000`

¿Cómo interactúan el backend (localhost) y el frontend ?

Flujo de ejemplo:

¿Cómo saber si el servidor está funcionando correctamente en el navegador ?

Nota adicional sobre servidores web locales

Dónde incluir `app.use(express.static(__dirname));`

Cómo usar el frontend con esta configuración

Ventajas de esta configuración

Estructura esperada del proyecto (Tree)

Detalles de cada elemento:

Ejemplo Práctico 2: Proyecto "Gestión de Archivos"

Estructura de Carpetas:

Comandos para Gestión de Dependencias:

1- Activa el entorno:

2- Instala las dependencias del proyecto "Gestión de Archivos":

3- Instala dependencias para un nuevo proyecto:

Ventajas de Usar un Único `venv` o VM

Destacado

Bootloader Avanzado en Ensamblador

Creando una IA utilizando código ensamblador y Python

Categories

Formulario de contacto

Proyecto - Gestión de Archivos

Usar un Único Entorno Virtual Python (venv)

1- Crea el entorno virtual:

Creando directorio y subdirectorio del proyecto 1:

2- Activar el entorno virtual:

Configuracion del Backend y Frontend

1. Instalar Node.js y npm

2. Configurar el Backend

2.1- Crea la carpeta del proyecto 1: gestion-archivos

2.2 Inicializa un proyecto Node.js:

2.3- Instalar Express:

2.4- Crear el archivo del servidor:

3. Configurar el Frontend

4. Probar el Proyecto

Cómo funciona el http://localhost:3000

¿Cómo interactúan el backend (localhost) y el frontend ?

Flujo de ejemplo:

¿Cómo saber si el servidor está funcionando correctamente en el navegador ?

Nota adicional sobre servidores web locales

Dónde incluir app.use(express.static(__dirname));

Cómo usar el frontend con esta configuración

Ventajas de esta configuración

Estructura esperada del proyecto (Tree)

Detalles de cada elemento:

Ejemplo Práctico 2: Proyecto "Gestión de Archivos"

Estructura de Carpetas:

Comandos para Gestión de Dependencias:

1- Activa el entorno:

2- Instala las dependencias del proyecto "Gestión de Archivos":

3- Instala dependencias para un nuevo proyecto:

Ventajas de Usar un Único venv o VM

Destacado

Bootloader Avanzado en Ensamblador

Formulario de contacto

Usar un Único Entorno Virtual Python (`venv`)

Cómo funciona el `http://localhost:3000`

Dónde incluir `app.use(express.static(__dirname));`

Ventajas de Usar un Único `venv` o VM