Eine App-Karte (BETA) erstellen

​

Voraussetzungen

• Vergewissern Sie sich, dass Sie die neueste Beta-Version des HubSpot CLI installiert haben.
• Wenn dies noch nicht geschehen ist, erstellen Sie eine App.
• Es wird empfohlen, einen konfigurierbaren Test-Account einzurichten, damit Sie in einer isolierten Umgebung erstellen und testen können.

​

Eine App-Karte erstellen

1

Fügen Sie Ihrem Projekt eine Kartenkomponente hinzu

Um Ihrem Projekt eine neue App-Kartenkomponente hinzuzufügen, gehen Sie mit dem Terminal in Ihr lokales Projektverzeichnis, und führen dann den folgenden Befehl aus:

Report incorrect code

Copy

Ask AI

hs project add

Sobald Sie aufgefordert werden, eine hinzuzufügende Komponente auszuwählen, klicken Sie auf Karte.Falls Ihr Projekt noch keine App-Karten enthält, wird ein cards/-Verzeichnis für Sie in diesem app/-Verzeichnis erstellt. Das cards/-Verzeichnis enthält:

• Eine JSON-Kartenkonfigurationsdatei (*-hsmeta.json)
• Eine React-Komponentendatei (.jsx)
• Eine package.json-Datei

Wenn Ihr Projekt bereits App-Karten enthält, werden die oben genannten Dateien dem vorhandenen cards/-Verzeichnis hinzugefügt (es sei denn package.json, es existiert bereits).

Report incorrect code

Copy

Ask AI

myProject
└── src/
    └── app/
        └── cards/
            ├── NewCard-hsmeta.json
            ├── NewCard.jsx
            └── package.json

Erfahren Sie in der Referenzdokumentation für App-Karten mehr über diese Dateien.

2

Zu HubSpot hochladen

So laden Sie die neue Karte in Ihren HubSpot-Account hoch:

• Führen Sie hs project install-deps aus, um die für die App-Karte erforderlichen Abhängigkeiten zu installieren. Dadurch wird das cards/-Verzeichnis mit den erforderlichen Node-Modulen und einer package-lock.json-Datei aktualisiert, wodurch der Build der hochgeladenen App-Kartenerweiterung beschleunigt und sichergestellt wird, dass alle Abhängigkeiten in Ihrer lokalen Entwicklungsumgebung und Ihrem Produktions-Account übereinstimmen.
• Führen Sie dann hs project upload aus, um das Projekt in Ihrem Standard-Account hochzuladen.
• Um einen anderen Account anzugeben (z. B. einen separaten Test-Account), fügen Sie den --account-Tag ein und geben Sie die HubID des Accounts an; zum Beispiel: hs project upload --account 123456.
• Wenn das Projekt noch nicht hochgeladen wurde, werden Sie aufgefordert zu bestätigen, dass Sie das Projekt in Ihrem Account erstellen möchten. Andernfalls zeigt das Terminal zuerst den Erstellungs- und Bereitstellungsstatus an und bestätigt erst dann, wenn das Projekt erfolgreich hochgeladen wurde.

​

Die Karte in HubSpot anzeigen

• Klicken Sie in der Projektzusammenfassung auf der linken Seite oder unter Projektkomponenten auf den Namen der App.

• Klicken Sie auf die Registerkarte Verteilung.
• Dann klicken Sie auf Jetzt installieren.

• Gehen Sie in Ihrem HubSpot-Account zu CRM > Kontakte.
• Klicken Sie auf den Namen eines Kontakts.
• Dann klicken Sie oben in der mittleren Spalte des Kontaktdatensatzes auf Anpassen.

• Klicken Sie auf Standardansicht.
• Wählen Sie die Registerkarte aus, der Sie die Karte hinzufügen möchten. Bewegen Sie dann den Mauszeiger über die Stelle, an der Sie die Karte platzieren wollen, und klicken Sie auf das Pluszeichen. Dies kann nach der Ersteinrichtung jederzeit angepasst werden.

• Klicken Sie im rechten Bereich auf die Registerkarte Kartenbibliothek. Klicken Sie dann auf das Dropdown-Menü für Kartentypen und wählen Sie App aus, um nach App-Karten zu filtern.

• Klicken Sie unter der von Ihnen erstellten App-Karte auf Karte hinzufügen und dann auf die Schaltfläche zum Schließen oben rechts in der Seitenleiste.
• Klicken Sie oben rechts auf Speichern und beenden.

​

Lokale Entwicklung einrichten

• Führen Sie im Terminal hs project dev aus.
• Folgen Sie den Terminal-Anweisungen, um den Account auszuwählen, den Sie für die lokale Entwicklung verwenden möchten.
• Das Terminal startet den lokalen Entwicklungsserver und bestätigt dann, sobald alles funktioniert.
• Gehen Sie bei laufendem Server zurück zur Browser-Registerkarte mit dem Kontaktdatensatz und laden Sie die Seite neu.

​

Nächste Schritte

• Lesen Sie die Referenzdokumentation für UI-Erweiterungskomponenten, um der Karte weitere UI-Komponenten hinzuzufügen.
• Alle Konfigurationsoptionen für App-Karten sowie weitere Informationen finden Sie in der Referenzdokumentation für App-Karten.
• Die SDK-Referenz für UI-Erweiterungen enthält alles zu verfügbaren Dienstprogramme und Methoden für UI-Erweiterungen.

​

Hinzufügen von hubspot.fetch()-Unterstützung

"permittedUrls": {
    "fetch": ["https://api.example.com"],
    "img": [],
    "iframe": []
}

​

Eine zuvor erstellten App-Karte migrieren

• Migration einer bestehenden öffentlichen App
• Migration einer bestehenden privaten App