w
Documentación Herramientas principales Text Diff

Ejemplos Prácticos

Aquí encontrarás una colección de ejemplos prácticos que muestran cómo se puede usar la herramienta Text Diff en varios escenarios.

Desarrollo de Código

Actualización de Función JavaScript

Archivo A (Original):

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

Archivo B (Mejorado):

function calculateTotal(items) {
  if (!items || items.length === 0) {
    return 0;
  }

  return items.reduce((total, item) => {
    return total + (item.price || 0);
  }, 0);
}

Resultado Diff:

+ 2   2 |     if (!items || items.length === 0) {
+ 3   3 |         return 0;
+ 4   4 |     }
+ 5   5 |
- 2   6 |     let total = 0;
- 3   7 |     for (let i = 0; i < items.length; i++) {
- 4   8 |         total += items[i].price;
- 5   9 |     }
- 6  10 |     return total;
+ 6   7 |     return items.reduce((total, item) => {
+ 7   8 |         return total + (item.price || 0);
+ 8   9 |     }, 0);

Refactorización de Componente React

Archivo A (Componente de Clase):

import React, { Component } from 'react';

class UserProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true,
    };
  }

  componentDidMount() {
    this.fetchUser();
  }

  fetchUser = async () => {
    try {
      const response = await fetch(`/api/users/${this.props.userId}`);
      const user = await response.json();
      this.setState({ user, loading: false });
    } catch (error) {
      console.error('Error fetching user:', error);
      this.setState({ loading: false });
    }
  };

  render() {
    const { user, loading } = this.state;

    if (loading) return <div>Cargando...</div>;
    if (!user) return <div>Usuario no encontrado</div>;

    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    );
  }
}

Archivo B (Componente Funcional con Hooks):

import React, { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Error fetching user:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) return <div>Cargando...</div>;
  if (!user) return <div>Usuario no encontrado</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

Gestión de Configuración

Configuración Docker Compose

Archivo A (Desarrollo):

version: '3.8'
services:
  web:
    build: .
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development
      - DATABASE_URL=postgresql://localhost:5432/myapp_dev
    volumes:
      - .:/app
      - /app/node_modules

  database:
    image: postgres:13
    environment:
      - POSTGRES_DB=myapp_dev
      - POSTGRES_USER=dev
      - POSTGRES_PASSWORD=dev123
    ports:
      - '5432:5432'

Archivo B (Producción):

version: '3.8'
services:
  web:
    build: .
    ports:
      - '80:3000'
    environment:
      - NODE_ENV=production
      - DATABASE_URL=${DATABASE_URL}
    restart: unless-stopped
    depends_on:
      - database

  database:
    image: postgres:13
    environment:
      - POSTGRES_DB=${POSTGRES_DB}
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data
    restart: unless-stopped

volumes:
  postgres_data:

Dependencias Package.json

Archivo A (Antes de Actualizar):

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "axios": "^0.21.1",
    "lodash": "^4.17.20"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "typescript": "^4.2.3",
    "webpack": "^5.24.0"
  }
}

Archivo B (Después de Actualizar):

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "axios": "^1.3.0",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "typescript": "^4.9.0",
    "webpack": "^5.75.0",
    "vite": "^4.0.0"
  }
}

Desarrollo de API

Especificación OpenAPI

Archivo A (Versión 1.0):

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
  description: API para gestión de usuarios

paths:
  /users:
    get:
      summary: Obtener todos los usuarios
      responses:
        '200':
          description: Lista de usuarios
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string
        email:
          type: string

Archivo B (Versión 2.0):

openapi: 3.0.0
info:
  title: User API
  version: 2.0.0
  description: API mejorada para gestión de usuarios

paths:
  /users:
    get:
      summary: Obtener todos los usuarios
      parameters:
        - name: limit
          in: query
          schema:
            type: integer
            default: 10
        - name: offset
          in: query
          schema:
            type: integer
            default: 0
      responses:
        '200':
          description: Lista paginada de usuarios
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/UserList'
        '400':
          description: Solicitud incorrecta
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'

  /users/{id}:
    get:
      summary: Obtener usuario por ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: Detalles del usuario
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          description: Usuario no encontrado

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string
        email:
          type: string
        createdAt:
          type: string
          format: date-time
        updatedAt:
          type: string
          format: date-time
    UserList:
      type: object
      properties:
        users:
          type: array
          items:
            $ref: '#/components/schemas/User'
        total:
          type: integer
        limit:
          type: integer
        offset:
          type: integer
    Error:
      type: object
      properties:
        message:
          type: string
        code:
          type: string

Documentación

README Markdown

Archivo A (Versión Básica):

# Mi Proyecto

Una aplicación web simple construida con React.

## Instalación

```bash
npm install
```

Uso

npm start

Características

  • Autenticación de usuarios
  • Visualización de datos
  • Diseño responsivo

**Archivo B (Versión Extendida):**
```markdown
# Mi Proyecto

Una aplicación web moderna construida con React y TypeScript, que incluye visualización de datos en tiempo real y gestión avanzada de usuarios.

## Tabla de Contenidos

- [Instalación](#instalación)
- [Uso](#uso)
- [Características](#características)
- [Documentación de API](#documentación-de-api)
- [Contribuir](#contribuir)
- [Licencia](#licencia)

## Instalación

### Prerrequisitos

- Node.js 16.0 o superior
- npm 8.0 o superior

### Configuración

```bash
# Clonar el repositorio
git clone https://github.com/usuario/mi-proyecto.git
cd mi-proyecto

# Instalar dependencias
npm install

# Configurar variables de entorno
cp .env.example .env

Uso

Desarrollo

npm run dev

Producción

npm run build
npm start

Características

Características Principales

  • Autenticación de Usuarios: Inicio de sesión seguro con tokens JWT
  • Visualización de Datos: Gráficos y tablas interactivas
  • Diseño Responsivo: Enfoque mobile-first
  • Actualizaciones en Tiempo Real: Integración WebSocket
  • Integración de API: API RESTful con soporte GraphQL

Características Avanzadas

  • Modo Oscuro: Alternar entre temas claro y oscuro
  • Internacionalización: Soporte multiidioma
  • Accesibilidad: Cumple con WCAG 2.1 AA
  • Rendimiento: Tamaño de paquete optimizado y tiempos de carga

Documentación de API

Ver API.md para documentación detallada de la API.

Contribuir

  1. Fork del repositorio
  2. Crear una rama de característica
  3. Hacer tus cambios
  4. Agregar pruebas
  5. Enviar un pull request

Licencia

Licencia MIT - ver LICENSE para detalles.


## Análisis de Datos

### **Configuración JSON**

**Archivo A (Configuración de Desarrollo):**
```json
{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp_dev",
    "username": "dev_user",
    "password": "dev_password"
  },
  "redis": {
    "host": "localhost",
    "port": 6379,
    "password": null
  },
  "logging": {
    "level": "debug",
    "file": "logs/app.log"
  },
  "features": {
    "enableAnalytics": false,
    "enableDebugMode": true,
    "enableExperimentalFeatures": true
  }
}

Archivo B (Configuración de Producción):

{
  "database": {
    "host": "prod-db.example.com",
    "port": 5432,
    "name": "myapp_prod",
    "username": "prod_user",
    "password": "${DB_PASSWORD}",
    "ssl": true,
    "pool": {
      "min": 5,
      "max": 20
    }
  },
  "redis": {
    "host": "prod-redis.example.com",
    "port": 6379,
    "password": "${REDIS_PASSWORD}",
    "cluster": {
      "enabled": true,
      "nodes": ["redis-1.example.com:6379", "redis-2.example.com:6379", "redis-3.example.com:6379"]
    }
  },
  "logging": {
    "level": "info",
    "file": "/var/log/myapp/app.log",
    "maxSize": "100MB",
    "maxFiles": 5
  },
  "features": {
    "enableAnalytics": true,
    "enableDebugMode": false,
    "enableExperimentalFeatures": false
  },
  "monitoring": {
    "enabled": true,
    "endpoint": "https://monitoring.example.com",
    "apiKey": "${MONITORING_API_KEY}"
  }
}

Mejores Prácticas

Uso Efectivo

  1. Comparaciones Regulares: Compara archivos regularmente para rastrear cambios
  2. Nombres Descriptivos: Usa nombres significativos para tus archivos
  3. Usar Historial: Guarda comparaciones importantes en el historial
  4. Ajustar Opciones: Experimenta con diferentes opciones de comparación

Consejos de Rendimiento

  1. Tamaño de Archivo: Mantén archivos bajo 10,000 líneas para rendimiento óptimo
  2. Cache del Navegador: Limpia el cache del navegador si hay problemas
  3. Navegadores Modernos: Usa versiones actuales de navegadores

Notas de Seguridad

  1. Datos Sensibles: Evita comparar contraseñas o claves API
  2. Procesamiento Local: Todo el procesamiento ocurre localmente en tu navegador
  3. Limpiar Historial: Borra el historial regularmente

Estos ejemplos muestran la versatilidad y potencia de la herramienta Text Diff en varios escenarios de aplicación.

¿Te resultó útil esta página?