Contoh - Alat Text Diff

Contoh Praktis

Berikut adalah kumpulan contoh praktis yang menunjukkan bagaimana alat Text Diff dapat digunakan dalam berbagai skenario.

Pengembangan Kode

Pembaruan Fungsi JavaScript

File A (Asli):

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

File B (Ditingkatkan):

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

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

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

Refaktorisasi Komponen React

File A (Komponen Kelas):

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>Memuat...</div>;
    if (!user) return <div>Pengguna tidak ditemukan</div>;

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

File B (Komponen Fungsional dengan 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>Memuat...</div>;
  if (!user) return <div>Pengguna tidak ditemukan</div>;

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

Manajemen Konfigurasi

Konfigurasi Docker Compose

File A (Pengembangan):

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'

File B (Produksi):

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:

Dependensi Package.json

File A (Sebelum Update):

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

File B (Setelah Update):

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

Pengembangan API

Spesifikasi OpenAPI

File A (Versi 1.0):

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0
  description: API untuk manajemen pengguna

paths:
  /users:
    get:
      summary: Dapatkan semua pengguna
      responses:
        '200':
          description: Daftar pengguna
          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

File B (Versi 2.0):

openapi: 3.0.0
info:
  title: User API
  version: 2.0.0
  description: API yang ditingkatkan untuk manajemen pengguna

paths:
  /users:
    get:
      summary: Dapatkan semua pengguna
      parameters:
        - name: limit
          in: query
          schema:
            type: integer
            default: 10
        - name: offset
          in: query
          schema:
            type: integer
            default: 0
      responses:
        '200':
          description: Daftar pengguna yang dipaginasi
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/UserList'
        '400':
          description: Permintaan yang salah
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'

  /users/{id}:
    get:
      summary: Dapatkan pengguna berdasarkan ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: Detail pengguna
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          description: Pengguna tidak ditemukan

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

Dokumentasi

README Markdown

File A (Versi Dasar):

# Proyek Saya

Aplikasi web sederhana yang dibangun dengan React.

## Instalasi

```bash
npm install
```

Penggunaan

npm start

Fitur

Autentikasi pengguna
Visualisasi data
Desain responsif


**File B (Versi Diperluas):**
```markdown
# Proyek Saya

Aplikasi web modern yang dibangun dengan React dan TypeScript, menampilkan visualisasi data real-time dan manajemen pengguna yang canggih.

## Daftar Isi

- [Instalasi](#instalasi)
- [Penggunaan](#penggunaan)
- [Fitur](#fitur)
- [Dokumentasi API](#dokumentasi-api)
- [Berkontribusi](#berkontribusi)
- [Lisensi](#lisensi)

## Instalasi

### Prasyarat

- Node.js 16.0 atau lebih tinggi
- npm 8.0 atau lebih tinggi

### Pengaturan

```bash
# Kloning repositori
git clone https://github.com/user/my-project.git
cd my-project

# Instal dependensi
npm install

# Atur variabel lingkungan
cp .env.example .env

Penggunaan

Pengembangan

npm run dev

Produksi

npm run build
npm start

Fitur

Fitur Utama

Autentikasi Pengguna: Login aman dengan token JWT
Visualisasi Data: Grafik dan tabel interaktif
Desain Responsif: Pendekatan mobile-first
Update Real-time: Integrasi WebSocket
Integrasi API: API RESTful dengan dukungan GraphQL

Fitur Lanjutan

Mode Gelap: Beralih antara tema terang dan gelap
Internasionalisasi: Dukungan multi-bahasa
Aksesibilitas: Sesuai dengan WCAG 2.1 AA
Performa: Ukuran bundle yang dioptimalkan dan waktu pemuatan

Dokumentasi API

Lihat API.md untuk dokumentasi API yang detail.

Berkontribusi

Fork repositori
Buat branch fitur
Lakukan perubahan
Tambahkan tes
Kirim pull request

Lisensi

Lisensi MIT - lihat LICENSE untuk detail.


## Analisis Data

### **Konfigurasi JSON**

**File A (Konfigurasi Pengembangan):**
```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
  }
}

File B (Konfigurasi Produksi):

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

Praktik Terbaik

Penggunaan Efektif

Perbandingan Rutin: Bandingkan file secara rutin untuk melacak perubahan
Nama Deskriptif: Gunakan nama yang bermakna untuk file Anda
Gunakan Riwayat: Simpan perbandingan penting dalam riwayat
Sesuaikan Opsi: Bereksperimen dengan opsi perbandingan yang berbeda

Tips Performa

Ukuran File: Pertahankan file di bawah 10.000 baris untuk performa optimal
Cache Browser: Bersihkan cache browser jika ada masalah
Browser Modern: Gunakan versi browser terbaru

Catatan Keamanan

Data Sensitif: Hindari membandingkan kata sandi atau kunci API
Pemrosesan Lokal: Semua pemrosesan terjadi secara lokal di browser Anda
Bersihkan Riwayat: Hapus riwayat secara teratur

Contoh-contoh ini menunjukkan fleksibilitas dan kekuatan alat Text Diff dalam berbagai skenario aplikasi.

Apakah halaman ini membantu?

On this page

Contoh Praktis Pengembangan Kode Manajemen Konfigurasi Pengembangan API Dokumentasi Penggunaan Fitur Penggunaan Fitur Dokumentasi API Berkontribusi Lisensi Praktik Terbaik