Exemplos - Ferramenta Text Diff

Documentação Ferramentas Principais Text Diff

Exemplos Práticos

Aqui você encontrará uma coleção de exemplos práticos que mostram como a ferramenta Text Diff pode ser usada em vários cenários.

Desenvolvimento de Código

Atualização de Função JavaScript

Arquivo A (Original):

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

Arquivo B (Melhorado):

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);

Refatoração de Componente React

Arquivo A (Componente de Classe):

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>Carregando...</div>;
    if (!user) return <div>Usuário não encontrado</div>;

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

Arquivo B (Componente Funcional com 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>Carregando...</div>;
  if (!user) return <div>Usuário não encontrado</div>;

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

Gestão de Configuração

Configuração Docker Compose

Arquivo A (Desenvolvimento):

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'

Arquivo B (Produção):

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:

Dependências Package.json

Arquivo A (Antes da Atualização):

{
  "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"
  }
}

Arquivo B (Depois da Atualização):

{
  "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"
  }
}

Desenvolvimento de API

Especificação OpenAPI

Arquivo A (Versão 1.0):

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
  description: API para gerenciamento de usuários

paths:
  /users:
    get:
      summary: Obter todos os usuários
      responses:
        '200':
          description: Lista de usuários
          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

Arquivo B (Versão 2.0):

openapi: 3.0.0
info:
  title: User API
  version: 2.0.0
  description: API aprimorada para gerenciamento de usuários

paths:
  /users:
    get:
      summary: Obter todos os usuários
      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 usuários
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/UserList'
        '400':
          description: Solicitação incorreta
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'

  /users/{id}:
    get:
      summary: Obter usuário por ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: Detalhes do usuário
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          description: Usuário não 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

Documentação

README Markdown

Arquivo A (Versão Básica):

# Meu Projeto

Uma aplicação web simples construída com React.

## Instalação

```bash
npm install
```

Uso

npm start

Recursos

Autenticação de usuários
Visualização de dados
Design responsivo


**Arquivo B (Versão Estendida):**
```markdown
# Meu Projeto

Uma aplicação web moderna construída com React e TypeScript, incluindo visualização de dados em tempo real e gerenciamento avançado de usuários.

## Índice

- [Instalação](#instalação)
- [Uso](#uso)
- [Recursos](#recursos)
- [Documentação da API](#documentação-da-api)
- [Contribuir](#contribuir)
- [Licença](#licença)

## Instalação

### Pré-requisitos

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

### Configuração

```bash
# Clonar o repositório
git clone https://github.com/usuario/meu-projeto.git
cd meu-projeto

# Instalar dependências
npm install

# Configurar variáveis de ambiente
cp .env.example .env

Uso

Desenvolvimento

npm run dev

Produção

npm run build
npm start

Recursos

Recursos Principais

Autenticação de Usuários: Login seguro com tokens JWT
Visualização de Dados: Gráficos e tabelas interativas
Design Responsivo: Abordagem mobile-first
Atualizações em Tempo Real: Integração WebSocket
Integração de API: API RESTful com suporte GraphQL

Recursos Avançados

Modo Escuro: Alternar entre temas claro e escuro
Internacionalização: Suporte multi-idioma
Acessibilidade: Conforme WCAG 2.1 AA
Performance: Tamanho de bundle otimizado e tempos de carregamento

Documentação da API

Veja API.md para documentação detalhada da API.

Contribuir

Fork do repositório
Criar uma branch de recurso
Fazer suas alterações
Adicionar testes
Enviar um pull request

Licença

Licença MIT - veja LICENSE para detalhes.


## Análise de Dados

### **Configuração JSON**

**Arquivo A (Configuração de Desenvolvimento):**
```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
  }
}

Arquivo B (Configuração de Produção):

{
  "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}"
  }
}

Melhores Práticas

Uso Eficaz

Comparações Regulares: Compare arquivos regularmente para rastrear mudanças
Nomes Descritivos: Use nomes significativos para seus arquivos
Usar Histórico: Salve comparações importantes no histórico
Ajustar Opções: Experimente com diferentes opções de comparação

Dicas de Performance

Tamanho do Arquivo: Mantenha arquivos abaixo de 10.000 linhas para performance ótima
Cache do Navegador: Limpe o cache do navegador se houver problemas
Navegadores Modernos: Use versões atuais de navegadores

Notas de Segurança

Dados Sensíveis: Evite comparar senhas ou chaves de API
Processamento Local: Todo o processamento ocorre localmente no seu navegador
Limpar Histórico: Delete o histórico regularmente

Estes exemplos mostram a versatilidade e poder da ferramenta Text Diff em vários cenários de aplicação.

Esta página foi útil?

On this page

Exemplos Práticos Desenvolvimento de Código Gestão de Configuração Desenvolvimento de API Documentação Uso Recursos Uso Recursos Documentação da API Contribuir Licença Melhores Práticas