Zum Hauptinhalt springen

Main-Komponente

Die Main-Komponente ist der einfachste und schnellste Weg, brokerize-Funktionalität in Ihre Anwendung zu integrieren. Es ist eine einzige, umfassende Komponente, die alle brokerize-Features in einem Container kapselt und minimale Einrichtung und Konfiguration erfordert.

Warum die Main-Komponente wählen?​

Die Main-Komponente wird für die meisten Anwendungsfälle empfohlen, weil sie:

  • Integration vereinfacht - Nur eine Komponente zu Ihrer HTML/Website hinzufügen
  • Vollständige Funktionalität bietet - Alle brokerize-Features funktionieren sofort
  • Entwicklungszeit reduziert - Keine Notwendigkeit, mehrere Komponenten zu verwalten
  • Komplexe Interaktionen handhabt - Interne Komponentenkommunikation wird automatisch verwaltet
  • Vollständiges Theming unterstützt - Komplette visuelle Anpassung durch Theme-Konfiguration

Der Kompromiss ist weniger granulare Kontrolle über einzelne UI-Elemente und deren Positionierung, aber für die meisten Anwendungen bietet die Main-Komponente ausreichende Flexibilität durch Theming.

Verwendung der Main-Komponente​

1. Installation​

npm install @brokerize/elements @brokerize/client

2. Brokerize Client einrichten​

Erstellen Sie zunächst eine brokerize Client-Instanz:

import { Brokerize } from '@brokerize/client';

const brokerizeClient = new Brokerize({
    basePath: 'https://api-preview.brokerize.com', // Preview-Umgebung verwenden
    clientId: '<YOUR-API-CLIENT-ID>',
    fetch: globalThis.fetch.bind(globalThis),
    createAbortController: () => new AbortController(),
    createWebSocket: (url, protocol) => new WebSocket(url, protocol)
});

3. API-Kontext erstellen​

const user = await brokerizeClient.createGuestUser();
const apiCtx = brokerizeClient.createAuthorizedContext(user);

4. Main-Komponente zu Ihrem HTML hinzufügen​

<brokerize-main [apiCtx]="apiCtx" [theme]="theme"></brokerize-main>

Das war's! Die Main-Komponente wird die vollständige brokerize-Oberfläche mit allen verfügbaren Funktionen rendern.

5. Theme konfigurieren (Optional)​

const theme = {
    layout: 'columns',
    logoStyle: 'light',
    tokens: {
        'zl-primary-color': '#3870db',
        'zl-primary-bg-color': 'white',
        'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
        'zl-outline-color': 'var(--zl-color-primary-light)',
        'zl-default-text-color': 'var(--zl-color-gray-darkest)',
        'zl-success-color': '#3db969',
        'zl-error-color': '#ff3e3e',
        // ... zusätzliche Theme-Token
    }
};

Im Artikel zum Theming gibt es mehr Informationen, Beispiele und eine Live Demo.

Custom-Komponenten Ansatz​

Wenn Sie mehr granulare Kontrolle über die Benutzeroberfläche benötigen, können Sie einzelne brokerize-Komponenten separat verwenden. Dieser Ansatz erfordert mehr Entwicklungsarbeit, bietet aber maximale Anpassungsflexibilität.

Wann Custom-Komponenten verwenden​

  • Benutzerdefinierte Layouts - Wenn Sie spezifische Positionierung von UI-Elementen benötigen
  • Selektive Funktionalität - Wenn Sie nur bestimmte brokerize-Features benötigen
  • Erweiterte Integration - Bei tiefer Integration mit bestehenden UI-Frameworks
  • Benutzerdefinierte Benutzerführung - Wenn Sie die exakte Benutzerreise kontrollieren müssen

Empfehlung​

tipp

Beginnen Sie mit der Main-Komponente

Beginnen Sie mit der Main-Komponente für Ihre erste Integration. Sie bietet eine vollständige, funktionsfähige Lösung, die Sie schnell bereitstellen können. Sie können später immer zu Custom-Komponenten migrieren, wenn Sie spezifische Anpassungsanforderungen entdecken, die die Main-Komponente nicht durch Theming adressieren kann.

Die Main-Komponente deckt die große Mehrheit der Anwendungsfälle ab und reduziert die Entwicklungskomplexität erheblich, während sie vollständige Funktionalität und umfangreiche Theming-Möglichkeiten beibehält.