# Starten mit Stripe Apps Lernen Sie die Grundlagen der App-Entwicklung kennen, indem Sie eine App im Stripe-Dashboard erstellen. In diesem Leitfaden erstellen Sie eine „Hallo Welt“-Beispiel-App mit einer *Erweiterung der Nutzeroberfläche* (A set of APIs that allow you to inject user interface elements into the Stripe Dashboard using TypeScript and React) auf der Seite mit Kundendetails im Stripe-Dashboard. ## Bevor Sie starten 1. Wenn Sie bereits eine *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients)-Erweiterung verwenden, [steigen Sie auf Stripe Apps um](https://docs.stripe.com/stripe-apps/migrate-extension.md). 1. Gehen Sie zum [Stripe-Dashboard](https://dashboard.stripe.com), um sich anzumelden oder ein Konto zu erstellen. 1. Sofern noch nicht bereits geschehen, installieren Sie die [Stripe-CLI](https://docs.stripe.com/stripe-cli.md) und melden Sie sich mit demselben Konto an.Weitere Installationsoptionen finden Sie unter [Mit der Stripe-CLI loslegen](https://docs.stripe.com/stripe-cli.md). 1. Vergewissern Sie sich, dass es sich um die Version 1.12.4 oder neuer handelt. Dies können Sie folgendermaßen überprüfen: ```bash stripe version ``` Wenn Ihre Stripe-CLI-Version älter als Version 1.12.4 ist, [aktualisieren Sie Ihre Stripe-CLI auf die neueste Version](https://docs.stripe.com/stripe-cli/upgrade.md). 1. Überprüfen Sie, ob [Node.js](https://nodejs.org/) installiert ist, indem Sie Folgendes ausführen: ```bash node -v ``` Stripe Apps erfordert mindestens die Node.js-Version `14`. Wir empfehlen die Verwendung einer [Active LTS-Version](https://nodejs.org/en/about/previous-releases) (18 oder höher). Wenn Sie Node.js nicht installiert haben, [laden Sie es herunter und installieren](https://nodejs.org/en/download/) Sie es. Sie können die Abhängigkeiten Ihrer App mit NPM oder Yarn verwalten. Wenn Sie planen, [Ihre App auf dem App-Marktplatz zu veröffentlichen](https://docs.stripe.com/stripe-apps/publish-app.md), gelten zusätzliche Einschränkungen: - Ihr Konto muss mit einer verifizierten E-Mail-Adresse und Angaben zum Unternehmen [aktiviert](https://docs.stripe.com/get-started/account/set-up.md) werden. - Ein Connect-Konto kann keine App auf dem Stripe-Marktplatz veröffentlichen. ## Installation des Stripe Apps CLI-Plugins Um mit der Erstellung einer Stripe-App zu beginnen, installieren Sie das CLI-Plugin für Stripe-Apps: ```bash stripe plugin install apps ``` Wenn Sie das `apps`-Plugin bereits installiert haben, stellen Sie sicher, dass Sie Version `1.5.12` oder höher verwenden. ```bash stripe apps -v # apps version 1.5.12 ``` Wenn Sie das `apps`-Plugin aktualisieren müssen, führen Sie folgenden Befehl aus: ```bash stripe plugin upgrade apps ``` ## Eine App erstellen 1. Die grundlegende Struktur Ihrer „Hallo Welt“-App erstellen: ```bash stripe generate app helloworld cd helloworld ``` 1. Folgen Sie der Eingabeaufforderung, indem Sie folgende Informationen eingeben: - **ID**: Sie können die automatisch generierte App-ID akzeptieren oder anpassen. So identifiziert Stripe Ihre App. Ihre [App-ID](https://docs.stripe.com/stripe-apps/reference/app-manifest.md#schema) muss global eindeutig sein. - **Anzeigename**: Geben Sie einen Anzeigenamen ein. Dies ist der Name, den Ihr Dashboard für Ihre App anzeigt. Sie können diesen Namen später jederzeit ändern. ### Verzeichnisdateistruktur der App | Dateipfad | Beschreibung | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `src/views/` | Verzeichnis für Ihre TypeScript-Dateien, die Elemente der Nutzeroberfläche im Stripe-Dashboard erstellen, auch als *'Ansichten* (A view is a React component that creates UI extensions in the Stripe Dashboard) bezeichnet. | | `src/views/App.tsx` | Die Beispiel-*Ansicht* (A view is a React component that creates UI extensions in the Stripe Dashboard) der Seite mit Kundendetails im Stripe-Dashboard. | | `src/views/App.test.tsx` | Die Testdatei für die Funktionalität der `App.tsx`-Ansicht. | | `stripe-app.json` | Die *App-Manifest* (In a Stripe App, the app manifest is a stripe-app.json file in your app's root directory. It defines your app's ID, views, permissions, and other essential properties)-Datei, die die Integration Ihrer App in die Stripe-Plattform beschreibt. | | `package.json` | Die Datei, die Metadaten speziell für den Umgang mit App-Abhängigkeiten enthält. | | `yarn.lock` | Automatisch generierte Datei, in der die aktuellen Versionen der App-Abhängigkeiten aufgeführt sind. | | `jest.config.ts` | Die Konfigurationsdatei zur Ausführung von Testdateien. | | `images.d.ts` | Die Typdeklaration für unterstützende Bilddateien in Ihrer Stripe-App. | | `tsconfig.json` | Die Konfigurationsdatei für die Kompilierung von TypeScript-Dateien. | | `.eslintrc.json` | Die Konfigurationsdatei für das Linting von TypeScript-Dateien. | | `.vscode/extensions.json` | Die Datei, die die empfohlenen VS-Code-Erweiterungen enthält. | | `.gitignore` | Die Datei, die Git anweist, bestimmte Dateien oder Ordner zu ignorieren. | Stripe Apps unterstützt nur React 17. Stellen Sie sicher, dass alle von Ihnen installierten Abhängigkeiten mit dieser Version kompatibel sind. Weitere Informationen finden Sie unter [Funktionsweise von Nutzeroberflächen-Erweiterungen](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#apps-cant-control-the-react-version). ## Vorschau Ihrer App anzeigen Sie können Ihre App lokal ausführen, aktualisieren und Ihre Änderungen im Dashboard als Vorschau anzeigen: 1. Wechseln Sie zum Verzeichnis `helloworld`: ```bash cd helloworld ``` 1. Um eine Vorschau Ihrer App anzuzeigen, starten Sie Ihren lokalen Entwicklungsserver: ```bash stripe apps start ``` 1. Drücken Sie **Enter**, um den Browser zu öffnen. > Verwenden Sie einen [Browser, der das Stripe-Dashboard unterstützt](https://docs.stripe.com/dashboard/basics.md). Safari unterstützt das Dashboard nicht. Weitere Aktualisierungen finden Sie in der [Browserunterstützung für GitHub-Probleme](https://github.com/stripe/stripe-apps/issues/146). 1. Klicken Sie auf **Weiter**, um eine Vorschau der App in Ihrem Stripe-Konto anzuzeigen: ![Screenshot zum Aktivieren des Vorschaumodus](https://b.stripecdn.com/docs-statics-srv/assets/enable_app_preview.7d71712d107d581e0a25a4ebaf71484e.png) App-Vorschau aktivieren ![Hallo Welt-App](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_app.7b1588ce22f93f72ab2ecd07c44dd041.png) Ihre App im Dashboard [Aktivieren Sie den lokalen Netzwerkzugriff](https://docs.stripe.com/stripe-apps/enable-local-network-access.md), bevor Sie Ihre App anzeigen. ## Ihre App erstellen Während Sie Ihre App im Dashboard in der Vorschau anzeigen, ermöglicht der lokale Entwicklungsserver Echtszeit-Updates für Ihre App: 1. Ändern Sie den Titel in Ihrer Datei `Home.tsx` bei geöffnetem Stripe-Dashboard und laufendem Entwicklungsserver. Speichern Sie die Datei, um Ihre Änderungen in Ihrer App anzuzeigen. 1. Entfernen Sie in derselben Datei das `>` aus dem schließenden Tag `` und speichern Sie die Datei, woraufhin ein Fehler angezeigt wird: ![Hallo Welt-Fehler](https://b.stripecdn.com/docs-statics-srv/assets/helloworld_error.ee7aeea9d33b54f1e17b108f61741e97.png) Sie können den Fehler im Stripe-Dashboard, in den Browser-Entwicklertools oder in der Stripe-CLI beheben. 1. Um den Entwicklungsserver zu deaktivieren, geben Sie in der Betreffzeile **Ctrl+C** ein. Ihre Beispiel-App ist nun fertig. Beginnen Sie nun damit, Ihrer Stripe-App weitere Funktionen hinzuzufügen. ## See also - [Erstellen einer Erweiterung der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/build-ui.md) - [Serverseitige Logik hinzufügen](https://docs.stripe.com/stripe-apps/build-backend.md) - [Verteilungsoptionen](https://docs.stripe.com/stripe-apps/distribution-options.md)