Frontend-Entwicklung mit KI: Moderne Web-Anwendungen¶

// ❌ Schlechter Prompt
// "Erstelle eine React-Komponente"

// ✅ Guter Prompt
/**
 * Erstelle eine React-Funktionskomponente für eine Suchleiste
 * mit folgende Anforderungen:
 * - State-Management mit useState
 * - onChange Handler für Eingabe
 * - onSubmit Handler für Formular
 * - Props: placeholder, onSearch
 * - TypeScript Typisierung
 * - Barrierefreie Attribute (aria-label)
 */

// Copilot generierter Code basierend auf gutem Prompt
import React, { useState } from 'react';

interface SearchBarProps {
  placeholder: string;
  onSearch: (query: string) => void;
}

const SearchBar: React.FC<SearchBarProps> = ({ placeholder, onSearch }) => {
  const [query, setQuery] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleSubmit} className="search-form">
      <label htmlFor="search" className="visually-hidden">
        Suche
      </label>
      <input
        type="text"
        id="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={placeholder}
        aria-label={placeholder}
        className="search-input"
      />
      <button type="submit" className="search-button" aria-label="Suche">
        🔍
      </button>
    </form>
  );
};

export default SearchBar;

/**
 * Generiere eine React-Komponente für eine Produktkarte mit:
 * - Bild, Titel, Beschreibung, Preis
 * - "In den Warenkorb" Button
 * - Responsive Design
 * - TypeScript
 * - Tailwind CSS Styling
 * - Props: product (mit image, title, description, price)
 */

// Copilot generierter Code
interface Product {
  id: string;
  image: string;
  title: string;
  description: string;
  price: number;
}

interface ProductCardProps {
  product: Product;
  onAddToCart: (productId: string) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden max-w-sm mx-auto">
      <div className="h-64 overflow-hidden">
        <img
          src={product.image}
          alt={product.title}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="p-4">
        <h3 className="text-xl font-bold mb-2">{product.title}</h3>
        <p className="text-gray-600 text-sm mb-4">{product.description}</p>
        <div className="flex justify-between items-center">
          <span className="text-lg font-bold">${product.price.toFixed(2)}</span>
          <button
            onClick={() => onAddToCart(product.id)}
            className="bg-blue-600 text-white px-3 py-2 rounded-md hover:bg-blue-700 transition"
          >
            In den Warenkorb
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;

// Mit Tailwind CSS
// Khroma-generierte Palette
const colors = {
  primary: '#4F46E5',    // Indigo 600
  secondary: '#10B981',  // Emerald 500
  accent: '#F59E0B',     // Amber 500
  dark: '#1F2937',      // Gray 800
  light: '#F9FAFB'      // Gray 50
};

// Tailwind Konfiguration
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.primary,
        secondary: colors.secondary,
        accent: colors.accent
      }
    }
  }
};

// Klick-Hitmap Analyse
class ClickHeatmap {
  constructor() {
    this.clicks = [];
    this.setupListeners();
  }

  setupListeners() {
    document.addEventListener('click', (e) => {
      const { x, y } = this.getClickPosition(e);
      this.clicks.push({ x, y, timestamp: Date.now() });

      // Alle 10 Minuten Daten senden
      if (this.clicks.length % 100 === 0) {
        this.sendData();
      }
    });
  }

  getClickPosition(e) {
    return {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight
    };
  }

  sendData() {
    // Daten an Server senden
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify(this.clicks),
      headers: { 'Content-Type': 'application/json' }
    });
    this.clicks = [];
  }
}

// Initialisierung
new ClickHeatmap();

// ❌ Fehlerhafter Code
function sumArray(arr) {
  let sum = 0;
  for (let i = 0; i <= arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

// ✅ Mit Copilot Chat
// Frage: "Warum gibt dieser Code einen Fehler?"
// Copilot Antwort: "Der Loop läuft von 0 bis arr.length (inklusive). 
// Das verursacht einen Off-by-one-Fehler, da arr[arr.length] undefined ist.
// Korrektur: i < arr.length"

function sumArray(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

// .eslintrc.js
module.exports = {
  plugins: ['sonarjs'],
  rules: {
    'sonarjs/cognitive-complexity': 'error',
    'sonarjs/no-duplicate-string': 'warn',
    'sonarjs/no-insecure-storage': 'error'
  }
};

// Testim generierter Test
import { test, expect } from '@playwright/test';

test('SearchBar component works correctly', async ({ page }) => {
  // Navigiere zur Seite
  await page.goto('http://localhost:3000');

  // Finde Suchleiste
  const searchInput = page.locator('.search-input');
  await expect(searchInput).toBeVisible();

  // Teste Eingabe
  await searchInput.fill('Test');
  await expect(searchInput).toHaveValue('Test');

  // Teste Formular-Submit
  await page.locator('.search-form').submit();
  await expect(page).toHaveURL(/search\?q=Test/);
});

// Applitools Beispiel
const { Eyes, Target } = require('@applitools/eyes-playwright');

test('Visual regression test', async ({ page }) => {
  const eyes = new Eyes();

  await eyes.open(page, 'My App', 'Search Page');

  await page.goto('http://localhost:3000');

  // Visuelle Prüfung
  await eyes.check(Target.window().fully());

  // Testen
  await page.locator('.search-input').fill('KI');
  await eyes.check(Target.window().fully(), 'After search input');

  await eyes.close();
});

const { test, expect } = require('@playwright/test');

test('KI-generierter E2E-Test für Einkaufsflow', async ({ page }) => {
  // 1. Produktseite öffnen
  await page.goto('http://localhost:3000/products/1');

  // 2. Produkt zum Warenkorb hinzufügen
  await page.locator('button:has-text("In den Warenkorb")').click();

  // 3. Warenkorb prüfen
  await expect(page.locator('.cart-count')).toHaveText('1');

  // 4. Zum Checkout navigieren
  await page.locator('a[href="/checkout"]').click();

  // 5. Checkout-Formular ausfüllen
  await page.fill('#email', 'test@example.com');
  await page.fill('#name', 'Test Nutzer');
  await page.fill('#address', 'Teststraße 123');

  // 6. Bestellung abschließen
  await page.locator('button[type="submit"]').click();

  // 7. Bestätigung prüfen
  await expect(page).toHaveURL(/order-confirmation/);
  await expect(page.locator('.confirmation-message')).toBeVisible();
});

// KI-gestützte Performance-Optimierung
class PerformanceOptimizer {
  constructor() {
    this.metrics = {
      lcp: 0,
      fid: 0,
      cls: 0,
      fcp: 0,
      tti: 0
    };
  }

  async analyze() {
    // Performance Metriken sammeln
    const [performance] = await window.loadPerformance();

    this.metrics = {
      lcp: performance.timing.lcp,
      fid: performance.timing.fid,
      cls: performance.timing.cls,
      fcp: performance.timing.fcp,
      tti: performance.timing.tti
    };

    return this.getOptimizationSuggestions();
  }

  getOptimizationSuggestions() {
    const suggestions = [];

    // LCP Optimierung
    if (this.metrics.lcp > 2500) {
      suggestions.push({
        type: 'lcp',
        issue: 'Largest Contentful Paint zu langsam',
        suggestions: [
          'Bilder optimieren (WebP-Format, Lazy Loading)',
          'Critical CSS inline einbinden',
          'Server-Response-Time verbessern',
          'Preload für wichtige Ressourcen'
        ]
      });
    }

    // CLS Optimierung
    if (this.metrics.cls > 0.1) {
      suggestions.push({
        type: 'cls',
        issue: 'Cumulative Layout Shift zu hoch',
        suggestions: [
          'Elemente mit expliziten Abmessungen versehnen',
          'Bilder und iframes mit aspect-ratio',
          'Dynamische Inhalte mit Reserved Space',
          'Fonts mit font-display: swap'
        ]
      });
    }

    return suggestions;
  }
}

// Verwendung
const optimizer = new PerformanceOptimizer();
const suggestions = await optimizer.analyze();
console.log('Optimierungsvorschläge:', suggestions);

// Cloudinary Upload mit KI-Optimierung
const cloudinary = require('cloudinary').v2;

cloudinary.config({
  cloud_name: 'mein-cloud',
  api_key: 'mein-key',
  api_secret: 'mein-secret'
});

// Bild mit KI-Optimierung hochladen
const uploadOptions = {
  transformation: [
    { quality: 'auto' },
    { fetch_format: 'auto' },
    { width: 800, height: 600, crop: 'fill' },
    { effect: 'auto_brightness' }
  ]
};

cloudinary.uploader.upload('input.jpg', uploadOptions)
  .then(result => console.log('Optimiertes Bild:', result.secure_url))
  .catch(error => console.error(error));

import { AxePuppeteer } from '@axe-core/puppeteer';

async function runAccessibilityTests(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url);

  const results = await new AxePuppeteer(page).analyze();

  // Ergebnisse verarbeiten
  const violations = results.violations;

  if (violations.length > 0) {
    console.log(`${violations.length} Barrierefreiheits-Probleme gefunden:`);
    violations.forEach(violation => {
      console.log(`\n${violation.id}: ${violation.description}`);
      console.log(`  Einfluss: ${violation.impact}`);
      console.log(`  Lösungen:`);
      violation.nodes.forEach(node => {
        node.any.forEach(solution => {
          console.log(`    - ${solution.message}`);
        });
      });
    });
  } else {
    console.log('✅ Keine Barrierefreiheits-Probleme gefunden');
  }

  await browser.close();
  return violations;
}

// Test durchführen
runAccessibilityTests('https://meine-website.de');

// KI-gestützte Barrierefreiheits-Optimierung
function optimizeAccessibility(html) {
  // Bilder mit fehlendem alt-Attribut
  const imagesWithoutAlt = html.querySelectorAll('img:not([alt])');
  imagesWithoutAlt.forEach(img => {
    const src = img.getAttribute('src');
    const filename = src?.split('/').pop()?.split('.')[0] || 'Bild';
    img.setAttribute('alt', `Bild: ${filename}`);
  });

  // Links mit unklaren Texten
  const vagueLinks = html.querySelectorAll('a[href]');
  vagueLinks.forEach(link => {
    const text = link.textContent.toLowerCase();
    if (text.includes('klick hier') || text.includes('mehr') || text.includes('hier')) {
      const href = link.getAttribute('href');
      link.textContent = `Mehr über ${href}`;
    }
  });

  // Formularfelder ohne Labels
  const inputsWithoutLabel = html.querySelectorAll('input:not([aria-label]):not([aria-labelledby])');
  inputsWithoutLabel.forEach(input => {
    const name = input.getAttribute('name') || input.getAttribute('id') || 'Eingabe';
    input.setAttribute('aria-label', name);
  });

  // Kontrast prüfen
  const elements = html.querySelectorAll('*');
  elements.forEach(el => {
    const style = window.getComputedStyle(el);
    const color = style.color;
    const background = style.backgroundColor;

    // Kontrast berechnen (vereinfacht)
    const contrast = calculateContrast(color, background);
    if (contrast < 4.5) {
      console.warn(`Niedriger Kontrast für: ${el.tagName}`, { color, background, contrast });
    }
  });

  return html;
}

// KI-generiertes Responsive Layout
function ResponsiveGrid({ items }) {
  return (
    <div className="container mx-auto px-4 py-8">
      {/* Titel - Responsive Font Size */}
      <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
        Unsere Produkte
      </h1>

      {/* Grid - Responsive Columns */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {items.map(item => (
          <ProductCard
            key={item.id}
            product={item}
            className="w-full"
          />
        ))}
      </div>

      {/* Filter - Responsive Layout */}
      <div className="flex flex-col sm:flex-row gap-4 my-8">
        <select className="flex-1 sm:flex-none px-4 py-2 border rounded">
          <option>Kategorie</option>
        </select>
        <select className="flex-1 sm:flex-none px-4 py-2 border rounded">
          <option>Preis</option>
        </select>
        <button className="bg-blue-600 text-white px-6 py-2 rounded">
          Filter anwenden
        </button>
      </div>
    </div>
  );
}

// KI-gestützte Breakpoint-Optimierung
class BreakpointOptimizer {
  constructor() {
    this.breakpoints = [
      { name: 'xs', max: 639 },
      { name: 'sm', min: 640, max: 767 },
      { name: 'md', min: 768, max: 1023 },
      { name: 'lg', min: 1024, max: 1279 },
      { name: 'xl', min: 1280 }
    ];
  }

  getOptimalBreakpoints(element) {
    // Element analysieren
    const rect = element.getBoundingClientRect();
    const styles = window.getComputedStyle(element);

    // Inhalte analysieren
    const textLength = element.textContent?.length || 0;
    const imageCount = element.querySelectorAll('img').length;

    // Breakpoints basierend auf Inhalten empfehlen
    const recommendations = [];

    if (textLength > 500) {
      recommendations.push({
        breakpoint: 'md',
        reason: 'Langer Text - breiteres Layout für bessere Lesbarkeit'
      });
    }

    if (imageCount > 2) {
      recommendations.push({
        breakpoint: 'lg',
        reason: 'Mehrere Bilder - größeres Layout für bessere Darstellung'
      });
    }

    return recommendations;
  }

  generateResponsiveCSS(element) {
    const recs = this.getOptimalBreakpoints(element);
    let css = '';

    recs.forEach(rec => {
      const bp = this.breakpoints.find(b => b.name === rec.breakpoint);
      if (bp.min) {
        css += `@media (min-width: ${bp.min}px) { `;
      }
      if (bp.max) {
        css += `@media (max-width: ${bp.max}px) { `;
      }

      // Beispiel: Font-Größe anpassen
      css += `
        ${element.tagName.toLowerCase()} {
          font-size: calc(16px + 0.5vw);
          padding: 1rem;
        }
      `;

      css += '} ';
    });

    return css;
  }
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// KI-generiertes Formular mit Validierung
const schema = z.object({
  email: z.string().email('Ungültige E-Mail-Adresse'),
  password: z.string().min(8, 'Passwort muss mindestens 8 Zeichen haben'),
  confirmPassword: z.string(),
  age: z.number().min(18, 'Sie müssen mindestens 18 Jahre alt sein')
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwörter stimmen nicht überein",
  path: ["confirmPassword"],
});

const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    resolver: zodResolver(schema)
  });

  const onSubmit = (data) => {
    console.log('Formular gesendet:', data);
    // KI-gestützte Verarbeitung
    processFormWithAI(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="email">E-Mail</label>
        <input
          id="email"
          type="email"
          {...register('email')}
          className="w-full px-3 py-2 border rounded"
        />
        {errors.email && (
          <p className="text-red-500 text-sm">{errors.email.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="password">Passwort</label>
        <input
          id="password"
          type="password"
          {...register('password')}
          className="w-full px-3 py-2 border rounded"
        />
        {errors.password && (
          <p className="text-red-500 text-sm">{errors.password.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="confirmPassword">Passwort bestätigen</label>
        <input
          id="confirmPassword"
          type="password"
          {...register('confirmPassword')}
          className="w-full px-3 py-2 border rounded"
        />
        {errors.confirmPassword && (
          <p className="text-red-500 text-sm">{errors.confirmPassword.message}</p>
        )}
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        Einreichen
      </button>
    </form>
  );
};

// KI-gestützte Formularverarbeitung
async function processFormWithAI(data) {
  // Hier könnte KI die Daten analysieren und z.B.:
  // - Betrugserkennung
  // - Nutzerklassifizierung
  // - Personalisierte Empfehlungen
  console.log('KI verarbeitet Daten:', data);
}

// KI-generierter Redux Slice
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import api from '../api';

// KI-gestützte Thunk-Aktion
export const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async (category, { rejectWithValue }) => {
    try {
      const response = await api.get(`/products?category=${category}`);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// KI-generierter Slice
const productsSlice = createSlice({
  name: 'products',
  initialState: {
    items: [],
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
    filter: '',
  },
  reducers: {
    // KI-generierte Reducer
    setFilter: (state, action) => {
      state.filter = action.payload;
    },
    clearError: (state) => {
      state.error = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload || 'Ein Fehler ist aufgetreten';
      });
  },
});

export const { setFilter, clearError } = productsSlice.actions;

export default productsSlice.reducer;

// KI-generierter Selektor mit Memoization
export const selectFilteredProducts = (state) => {
  const { items, filter } = state.products;
  return items.filter(item => 
    item.name.toLowerCase().includes(filter.toLowerCase())
  );
};

// KI-gestütztes Performance-Monitoring
class PerformanceMonitor {
  constructor() {
    this.metrics = {
      fcp: [],
      lcp: [],
      fid: [],
      cls: [],
      tti: []
    };
    this.setupObservers();
  }

  setupObservers() {
    // First Contentful Paint
    const [fcp] = performance.getEntriesByName('first-contentful-paint');
    if (fcp) this.metrics.fcp.push(fcp.startTime);

    // Largest Contentful Paint
    const observer = new PerformanceObserver((list) => {
      const [lcp] = list.getEntries();
      if (lcp) this.metrics.lcp.push(lcp.startTime);
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    // First Input Delay
    const fidObserver = new PerformanceObserver((list) => {
      const [fid] = list.getEntries();
      if (fid) this.metrics.fid.push(fid.processingStart - fid.startTime);
    });
    fidObserver.observe({ type: 'first-input', buffered: true });

    // Cumulative Layout Shift
    const clsObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.metrics.cls.push(entry.value);
      }
    });
    clsObserver.observe({ type: 'layout-shift', buffered: true });

    // Zeit bis zur Interaktivität
    const ttiObserver = new PerformanceObserver((list) => {
      const [tti] = list.getEntries();
      if (tti) this.metrics.tti.push(tti.duration);
    });
    ttiObserver.observe({ type: 'long-tasks', buffered: true });
  }

  getPerformanceScore() {
    const scores = {};

    // LCP Score (0-100)
    const avgLcp = this.metrics.lcp.reduce((a, b) => a + b, 0) / this.metrics.lcp.length;
    scores.lcp = Math.max(0, 100 - (avgLcp / 25));

    // FID Score (0-100)
    const avgFid = this.metrics.fid.reduce((a, b) => a + b, 0) / this.metrics.fid.length;
    scores.fid = Math.max(0, 100 - (avgFid / 1));

    // CLS Score (0-100)
    const avgCls = this.metrics.cls.reduce((a, b) => a + b, 0) / this.metrics.cls.length;
    scores.cls = Math.max(0, 100 - (avgCls * 1000));

    // Gesamt-Score
    scores.total = (scores.lcp + scores.fid + scores.cls) / 3;

    return scores;
  }

  getOptimizationSuggestions() {
    const scores = this.getPerformanceScore();
    const suggestions = [];

    if (scores.lcp < 80) {
      suggestions.push('LCP optimieren: Bilder komprimieren, Critical CSS inline, Server optimieren');
    }
    if (scores.fid < 80) {
      suggestions.push('FID optimieren: JavaScript Code Splitting, Web Workers verwenden');
    }
    if (scores.cls < 80) {
      suggestions.push('CLS optimieren: Abmessungen für Bilder festlegen, Font Loading optimieren');
    }

    return suggestions;
  }
}

// Initialisierung
const monitor = new PerformanceMonitor();