Exemples - Outil Text Diff

Exemples Pratiques

Voici une collection d'exemples pratiques qui montrent comment l'outil Text Diff peut être utilisé dans différents scénarios.

Développement de Code

Mise à Jour de Fonction JavaScript

Fichier A (Original):

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

Fichier B (Amélioré):

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

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

Résultat 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);

Refactorisation de Composant React

Fichier A (Composant 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>Chargement...</div>;
    if (!user) return <div>Utilisateur non trouvé</div>;

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

Fichier B (Composant Fonctionnel avec 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>Chargement...</div>;
  if (!user) return <div>Utilisateur non trouvé</div>;

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

Gestion de Configuration

Configuration Docker Compose

Fichier A (Développement):

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'

Fichier B (Production):

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:

Dépendances Package.json

Fichier A (Avant Mise à Jour):

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

Fichier B (Après Mise à Jour):

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

Développement d'API

Spécification OpenAPI

Fichier A (Version 1.0):

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
  description: API pour la gestion des utilisateurs

paths:
  /users:
    get:
      summary: Obtenir tous les utilisateurs
      responses:
        '200':
          description: Liste des utilisateurs
          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

Fichier B (Version 2.0):

openapi: 3.0.0
info:
  title: User API
  version: 2.0.0
  description: API améliorée pour la gestion des utilisateurs

paths:
  /users:
    get:
      summary: Obtenir tous les utilisateurs
      parameters:
        - name: limit
          in: query
          schema:
            type: integer
            default: 10
        - name: offset
          in: query
          schema:
            type: integer
            default: 0
      responses:
        '200':
          description: Liste paginée des utilisateurs
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/UserList'
        '400':
          description: Mauvaise requête
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'

  /users/{id}:
    get:
      summary: Obtenir un utilisateur par ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: Détails de l'utilisateur
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          description: Utilisateur non trouvé

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

Documentation

README Markdown

Fichier A (Version de Base):

# Mon Projet

Une application web simple construite avec React.

## Installation

```bash
npm install
```

Utilisation

npm start

Fonctionnalités

Authentification des utilisateurs
Visualisation des données
Design responsive


**Fichier B (Version Étendue):**
```markdown
# Mon Projet

Une application web moderne construite avec React et TypeScript, incluant la visualisation de données en temps réel et la gestion avancée des utilisateurs.

## Table des Matières

- [Installation](#installation)
- [Utilisation](#utilisation)
- [Fonctionnalités](#fonctionnalités)
- [Documentation API](#documentation-api)
- [Contribuer](#contribuer)
- [Licence](#licence)

## Installation

### Prérequis

- Node.js 16.0 ou supérieur
- npm 8.0 ou supérieur

### Configuration

```bash
# Cloner le dépôt
git clone https://github.com/utilisateur/mon-projet.git
cd mon-projet

# Installer les dépendances
npm install

# Configurer les variables d'environnement
cp .env.example .env

Utilisation

Développement

npm run dev

Production

npm run build
npm start

Fonctionnalités

Fonctionnalités Principales

Authentification des Utilisateurs : Connexion sécurisée avec tokens JWT
Visualisation des Données : Graphiques et tableaux interactifs
Design Responsive : Approche mobile-first
Mises à Jour en Temps Réel : Intégration WebSocket
Intégration API : API RESTful avec support GraphQL

Fonctionnalités Avancées

Mode Sombre : Basculer entre thèmes clair et sombre
Internationalisation : Support multi-langues
Accessibilité : Conforme WCAG 2.1 AA
Performance : Taille de bundle optimisée et temps de chargement

Documentation API

Voir API.md pour la documentation détaillée de l'API.

Contribuer

Fork du dépôt
Créer une branche de fonctionnalité
Faire vos modifications
Ajouter des tests
Soumettre une pull request

Licence

Licence MIT - voir LICENSE pour les détails.


## Analyse de Données

### **Configuration JSON**

**Fichier A (Configuration de Développement):**
```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
  }
}

Fichier B (Configuration de Production):

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

Meilleures Pratiques

Utilisation Efficace

Comparaisons Régulières : Comparez les fichiers régulièrement pour suivre les changements
Noms Descriptifs : Utilisez des noms significatifs pour vos fichiers
Utiliser l'Historique : Sauvegardez les comparaisons importantes dans l'historique
Ajuster les Options : Expérimentez avec différentes options de comparaison

Conseils de Performance

Taille de Fichier : Gardez les fichiers sous 10 000 lignes pour des performances optimales
Cache du Navigateur : Videz le cache du navigateur en cas de problèmes
Navigateurs Modernes : Utilisez des versions récentes de navigateurs

Notes de Sécurité

Données Sensibles : Évitez de comparer des mots de passe ou des clés API
Traitement Local : Tout le traitement se fait localement dans votre navigateur
Nettoyer l'Historique : Supprimez l'historique régulièrement

Ces exemples montrent la polyvalence et la puissance de l'outil Text Diff dans différents scénarios d'application.

Cette page vous a-t-elle été utile ?

On this page

Exemples Pratiques Développement de Code Gestion de Configuration Développement d'API Documentation Utilisation Fonctionnalités Utilisation Fonctionnalités Documentation API Contribuer Licence Meilleures Pratiques