Zum Hauptinhalt springen

Getting Started

Willkommen bei brokerize! Diese Anleitung führt Sie durch die ersten Schritte zur Integration der brokerize-Plattform in Ihre Anwendung. Als Partner erhalten Sie Zugang zu einer vollständigen Multi-Brokerage-Lösung mit vorgefertigten UI-Komponenten und einer leistungsstarken API.

Überblick des brokerize-Ökosystems​

Das brokerize-Ökosystem besteht aus mehreren Kernkomponenten, die nahtlos zusammenarbeiten:

🔧 @brokerize/client​

  • JavaScript/TypeScript-Bibliothek für API-Kommunikation
  • Authentifizierung und Sitzungsverwaltung
  • WebSocket-Unterstützung für Echtzeit-Updates
  • Vollständige TypeScript-Typdefinitionen

Mehr Details: brokerize Client Dokumentation

🎨 @brokerize/elements​

  • Vorgefertigte UI-Komponenten für Trading-Interfaces
  • Framework-agnostisch (React, Vue, Angular, Vanilla JS)
  • Vollständig anpassbare Themes
  • Web Components Standard

🌐 brokerize API​

  • RESTful API für alle Brokerage-Funktionen
  • WebSocket-Streams für Echtzeit-Daten
  • Umfassende OpenAPI-Dokumentation
  • Multi-Broker-Unterstützung

Schnellstart-Optionen​

Option 1: Elements-Example Repository (Empfohlen für Einsteiger)​

Details anzeigen

Dieses Repository ist ein minimalistisches Showcase für die Integration von @brokerize/elements in eine Website oder Webanwendung.

Voraussetzungen: Tokens​

Sie benötigen eine CLIENT_ID, um auf die brokerize API zuzugreifen (normalerweise beginnen Sie mit dem Testsystem unter https://api-preview.brokerize.com). Diese kann auf app-preview.brokerize.com/admin erstellt werden. Eine detaillierte Anleitung finden Sie im Artikel Client ID erstellen. Beachten Sie, dass Sie sich zuerst als Benutzer registrieren müssen.

Falls es für Ihren Client zutrifft, stellt Ihnen der brokerize-Support eine COGNITO_CLIENT_ID zur Verfügung (wenn Ihr Client für registrierte brokerize-Benutzer aktiviert ist). Dies ist normalerweise nicht der Fall und die Konfigurationsoption kann ignoriert werden.

Um die Abhängigkeiten zu installieren, führen Sie einfach aus:

npm install

Konfiguration​

Fügen Sie Ihre CLIENT_ID (und, falls zutreffend, die COGNITO_CLIENT_ID) in die Datei config.js ein.

Beispiel ausführen​

Aufgrund von CORS-Einschränkungen sollte das Beispiel normalerweise unter einer URL wie http://localhost:8080 ausgeführt werden. Wenn Sie die CLIENT_ID selbst erstellt haben, können Sie die erlaubten Origins und Redirect-URIs unter app-preview.brokerize.com/admin konfigurieren.

Stellen Sie die Inhalte einfach bereit, zum Beispiel mit:

npx http-server -p 8080

Verfügbare Beispiele​

Anmeldung bei einem Broker​

Standardmäßig haben neue Client-IDs nur Zugriff auf den "Demo-Broker". Daher zeigt die BrokerList nur ein Broker-Logo ("brokerize") an, um das Testen der UI-Komponenten zu ermöglichen. Sobald Ihr Frontend bereit für Tests ist, kann der Client für die Zusammenarbeit mit allen von uns unterstützten Brokern freigeschaltet werden. Der Demo-Broker soll viele Edge-Cases simulieren, die in echten Broker-Umgebungen schwer zu reproduzieren sind. Eine Beschreibung des Verhaltens des Demo-Brokers finden Sie im Artikel zum Demo Broker.

Um sich bei einem Demo-Konto anzumelden, müssen Sie zuerst eines erstellen. Folgen Sie einfach diesen Schritten:

  1. Navigieren Sie zu app-preview.brokerize.com
  2. Registrieren Sie sich dort, loggen Sie sich ein oder nutzen Sie den Gast-Login
  3. Wählen Sie in der oberen Navigationsleiste "Demo broker"
  4. Dort können Sie einfach ein Demo-Konto erstellen
  5. Kopieren Sie den generierten Account Namen
  6. Zurück in der Beispiel-App (http://localhost:8080): Melden Sie sich beim Demo-Broker mit dem Account-Namen und dem Passwort 42 an (oder 1337, wenn Sie den 2-Faktor-Login-Prozess testen möchten).

Option 2: Neue Integration von Grund auf​

Details anzeigen

Für eine neue Integration in Ihr bestehendes Projekt:

npm install @brokerize/elements @brokerize/client

Implementierungsansätze​

🚀 Main-Komponente (Empfohlen)​

Die einfachste Lösung - eine All-in-One-Komponente:

Die Main-Komponente ist eine einzige Web-Komponente (<brokerize-main>), die alle Trading-Funktionalitäten in sich vereint. Sie fügen nach kurzer Konfiguration ein HTML-Tag zu Ihrer Seite hinzu und erhalten sofort eine vollständige Trading-Oberfläche mit Broker-Auswahl, Portfolio-Ansicht und Order-Funktionen. Diese Lösung eignet sich perfekt für Standard-Anwendungsfälle, bei denen Sie schnell eine funktionsfähige Trading-Integration benötigen.

Vorteile:

  • ⚡ Schnelle Integration ohne großen Aufwand
  • 🔄 Alle Features funktionieren direkt zusammen
  • 🎨 Theming möglich

Mehr Details: Main-Komponente Dokumentation

🔧 Custom-Komponenten (Für erweiterte Anpassungen)​

Maximale Flexibilität durch einzelne Komponenten:

Custom-Komponenten ermöglichen es Ihnen, einzelne brokerize-Komponenten separat zu verwenden und individuell zu platzieren. Anstatt einer All-in-One-Lösung erhalten Sie Zugriff auf spezifische Komponenten wie Broker-Liste, Portfolio-Tabelle oder Order-Formular, die Sie nach Ihren Wünschen anordnen können. Dieser Ansatz ist ideal, wenn Sie eine maßgeschneiderte Benutzeroberfläche erstellen oder nur bestimmte Trading-Features in Ihre bestehende Anwendung integrieren möchten.

Vorteile:

  • 🎯 Selektive Funktionalität
  • 🏗️ Benutzerdefinierte Layouts
  • 🔀 Eigene Benutzerführung

Mehr Details: Custom-Komponenten Dokumentation

Umgebungen​

Preview-Umgebung (Entwicklung & Testing)​

Für Entwicklung und Tests verwenden Sie unsere Preview-Umgebung:

API-Endpunkt: https://api-preview.brokerize.com
Web-App: https://app-preview.brokerize.com

Produktions-Umgebung​

Für Live-Anwendungen:

API-Endpunkt: https://api.brokerize.com
Web-App: https://app.brokerize.com

Produktions-Zugang

Für Produktions-Credentials kontaktieren Sie unser Partnerteam.

Nächste Schritte​

1. Hands-On Erfahrung sammeln​

git clone https://github.com/brokerize/elements-example
cd elements-example && npm install && npm start

2. Dokumentation erkunden​

3. Integration planen​

  • Wählen Sie zwischen Main-Komponente oder Custom-Komponenten
  • Definieren Sie Ihr Theme und Branding
  • Planen Sie Ihre Benutzerführung

4. Support erhalten​

  • Technische Fragen: Nutzen Sie unsere Dokumentation
  • Partnerschaft: Kontaktieren Sie unser Partnerteam
  • Updates: Verfolgen Sie unser Changelog
Empfehlung

Beginnen Sie mit dem elements-example Repository und der Main-Komponente. Diese Kombination bietet den schnellsten Weg zu einer funktionsfähigen Integration.

Willkommen im brokerize-Ökosystem! 🚀