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​

  • Ihr Schlüssel zur einfachen und sicheren Integration der brokerize API
  • 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

Mehr Details: brokerize/elements Dokumentation

📱 brokerize - Pages​

  • von brokerize erstellte Klickstrecken auf Basis der brokerize/elements
  • als Sub-Domain oder von uns gehosted (z.B. tradingpartner.brokerize.com)
  • inkl. Link-Creator-Panel oder automatisiert ansteuerbar via URL-Parameter

Beispielanwendung: brokerize/pages Demo

🌐 brokerize - API​

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

Mehr Details: brokerize API Dokumentation

📝 brokerize - Trade Drafts​

  • Trade Drafts ermöglichen es, automatisiert, also beispielsweise über einen Bot, Trade Vorschläge zu erzeugen
  • Geeignet für Privatanwender, die ihre Trades und Positionen automatisiert verwalten möchten

Mehr Details: brokerize Trade Drafts Dokumentation

Schnellstart-Optionen zur Integration der brokerize/elements (Empfohlen)​

Option 1: Elements-Example Repository​

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: Neues Elements Projekt​

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 mit brokerize/elements sammeln​

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

2. Dokumentationen erkunden​

3. Integration planen​

  • Wählen Sie zur Integration der brokerize/elements zwischen der Main-Komponente oder Custom-Komponenten
  • Definieren Sie Ihr Theme und Branding
  • Machen Sie sich Gedanken über sinnvolle Einsprungpunkte (z.B. Kaufen- oder Verkaufen-Buttons) und planen Sie Ihre Benutzerführung

4. Support erhalten​

  • Technische Fragen: Nutzen Sie unsere Dokumentation
  • Kontakt: Nutzen Sie für Fragen unser Kontaktformular
  • Freischaltung von Echtgeld-Brokern: Bestellen Sie eine Lizenz für Ihr Unternehmen über unser Bestellformular.
  • Trade Drafts: Die Nutzung für Privatanwender erfolgt lizenzfrei. Kontaktieren Sie uns für die Freischaltung Ihrer Client-ID auf Ihren Produktiv-Broker über das Kontaktformular
  • Updates: Verfolgen Sie unser Changelog

5. Testing und Go-Live​

Schicken Sie uns für Ihre brokerize/elements, brokerize/pages oder brokerize API Integration einen Test-Client. Unser Testing-Team prüft Ihre Integration und gibt Feedback. Nach erfolgreicher Abnahme durch unser Testing-Team können Sie live gehen!

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! 🚀