Build a Custom App Card from Scratch (Part 1) | Project Setup & CLI Basics

Sie haben HubSpot nun in Aktion gesehen? Haben Sie sich jemals gefragt, wie Sie eine wirklich individuelle Funktion direkt in Ihrem CRM System erstellen können? In dieser Reihe lüften wir den Vorhang. Wir beginnen mit einem leeren Blatt Papier und erstellen Schritt für Schritt eine öffentliche App Karte für die globale Verfügbarkeit von Kontakten mithilfe der UI Erweiterungen von HubSpot. Bereit für Hubspots UI Erweiterungen und die Umsetzung Ihrer Ideen. Hier sind Sie richtig. Hallo zusammen. Ich bin BRI. Ich bin Developer Advocate hier bei HubSpot. Sind Sie neu bei UI Erweiterungen oder möchten deren Potenzial erkunden? Dann sind Sie hier richtig. Ich helfe Ihnen. In dieser Reihe. Mit Demos erstellen wir eine öffentliche App Karte, mit der Sie nicht mehr raten müssen, wann ein guter Zeitpunkt ist, einen Kontakt anzurufen. Sie wird Ortszeit, aktuelle Verfügbarkeit, ob er sich innerhalb oder außerhalb der Bürozeiten befindet und sogar, ob ein Feiertag vorliegt. Mit hubspots UI Erweiterungen erstellen wir eine Frontend Oberfläche. Anschließend verknüpfen wir sie über API Endpunkte nahtlos mit unserem benutzerdefinierten Next JSJS buckend. Anschließend hosten wir unser Projekt auf FA Shell, um die Bereitstellung zu einem Kinderspiel zu machen. Bevor wir beginnen, möchte ich kurz erläutern, was Sie zum Verfolgen benötigen. Um loszulegen, benötigen Sie ein aktives HubSpot Konto. Außerdem benötigen Sie ein HubSpot Entwicklerkonto mit einem HubSpot Entwicklertestkonto. Um mehr über das Erstellen Ihrer Entwicklerkonten zu erfahren, klicken Sie auf den Link in der Beschreibung unten. Für die Entwicklung benötigen Sie außerdem JS und Jan, die auf Ihrem Computer installiert und einsatzbereit sind. Dieses Video ist im Wesentlichen ihr Ausgangspunkt für UI Erweiterungen. Wir beginnen mit der HubSpot CLI, um ein neues HubSpot Projekt zu erstellen. Ich führe Sie durch die Initialisierung der öffentlichen App mit UI Erweiterungen. Zum Schluss zeigen wir, wie Sie Ihr Projekt in den App Einstellungen finden und verwalten. Der Startschuss für unsere bevorstehende Magie. Kommen wir nun zum Code. Das Wichtigste Wir müssen unsere Entwicklungsumgebung vorbereiten. Wir beginnen mit der HubSpot CLI oder Befehlszeilenschnittstelle. Sie ist ein wichtiges Tool für die Interaktion mit Ihrem HubSpot Entwicklerkonto. Öffnen Sie also Ihr Terminal. Navigieren Sie zu Ihrem Stammverzeichnis und installieren Sie die HubSpot CLI mit npm. Dieser Befehl installiert die neueste Version der CLI global auf Ihrem System. Sobald diese CLI installiert ist, müssen wir Sie mit Ihrem HubSpot Entwicklerkonto authentifizieren. Führen Sie also in Ihrem Terminal HS Konto aus. Dadurch wird ein Browserfenster geöffnet, in dem Sie aufgefordert werden, sich bei Ihrem HubSpot Entwicklerkonto anzumelden. Achten Sie darauf, dass Sie während dieses Vorgangs das richtige HubSpot Entwicklerkonto auswählen und nicht Ihr Entwicklertestkonto, da Ihre öffentliche App dort abgelegt wird. Nachdem die CLI nun authentifiziert wurde, können wir unser Projekt ausführen. Führe in deinem Terminal hs project create aus und gib dem Projekt bei Aufforderung einen beschreibenden Namen. Ein Beispiel wie Kontaktverfügbarkeit eignet sich gut. Wenn wir zur Projektvorlage gelangen, verwenden wir CRM. Erste Schritte mit öffentlichen Apps. Die CLI erstellt die Grundstruktur unserer öffentlichen App Karte. Werfen wir nun einen kurzen Blick auf die Struktur des Projekts. Der UI Teil der öffentlichen App befindet sich in Quell App Erweiterungen. Jede Karte verfügt über eine eigene React Komponente mit JavaScript oder TypeScript, eine begleitende JSON Datei, die die Karteninformationen, ihren Speicherort, den Ort der entsprechenden React Komponente und die Objekte, in denen die Karte im CRM angezeigt werden kann, vorgibt. Eine Ebene höher haben wir einen Ordner mit unseren Webhooks. Wir haben eine Datei local JSON sample, die später sehr nützlich sein wird, wenn wir unser Backend mit next JS entwickeln. Es gibt auch eine öffentliche App JSON. Die öffentliche App ist nun die zentrale Anlaufstelle für Informationen über die gesamte Sammlung von Karten, die in diesem Projekt erstellt werden. Hier werden auch URLs auf die Whitelist gesetzt, die in den Karten aufgerufen werden können. Dort werden Authentifizierungsbereiche eingerichtet und die JSON Dateien für unsere Karten verknüpft. Jetzt aktualisieren wir auch gleich den Namen, die UID und die Beschreibung unseres Projekts. Um den Zweck unserer App darzustellen, halten Sie diese Daten eindeutig und sichtbar in ihrem HubSpot Portal. Nachdem wir die Projektstruktur eingerichtet haben, bereiten wir nun unsere UI Erweiterung vor. Navigieren Sie zum Verzeichnis App Erweiterungen. Führen Sie dort npm install aus, um sicherzustellen, dass die erforderlichen Frontend Abhängigkeiten für das Projekt installiert werden. Schließlich können wir unsere erste App Karte hochladen. Führen Sie nun wieder in Ihrem Terminal HS Project Upload aus. Sollte das Projekt nicht mit Ihrer App verknüpft sein, müssen Sie den Upload bestätigen. Genehmigen Sie ihn also. Mit diesem Befehl wird der Frontend Code Ihrer UI Erweiterungen in HubSpot bereitgestellt. Wechseln wir nun zu den Einstellungen Ihres HubSpot Entwicklercode. Dort werden Ihre neu erstellte App und das Projekt aufgelistet. In diesem Bereich finden Sie die HubSpot Projektdetails für Ihre App Karte. Hier finden Sie die Projektdetails Bild und Bereitstellungsaktivitäten. Einschließlich der Bildprotokolle und Einstellungen. Gehen Sie zum Apps Tab. Dort sehen Sie alle Ihre Apps. In jeder App finden Sie Details zur Authentifizierung und zum Geltungsbereich. Sie haben außerdem die Möglichkeit, Ihre Unternehmensdomain und Support Informationen zu aktualisieren. Auf dem Tab Überwachung finden Sie Protokolle für Ihre API Aufrufe, Webhooks, API Einstellungen und UI Erweiterungen. Das war's für unser erstes Video. Heute haben wir unser HubSpot Projekt erfolgreich eingerichtet, die öffentliche App mit UI Erweiterungen initialisiert und unsere ersten Projektdateien hochgeladen. Jetzt wissen Sie auch genau, wo Sie Ihre Projekt und App Einstellungen in Ihrem HubSpot Entwicklerkonto finden. Im nächsten Video gehen wir noch einen Schritt weiter und richten ooth für unsere öffentliche App ein, was für eine sichere Verbindung zwischen unserer App und HubSpot unerlässlich ist. Dann installieren wir unsere App direkt in einem Entwicklertest Konto. Abschließend überprüfen wir, ob alles funktioniert, indem wir die UI Erweiterungskarte live im HubSpot CRM anzeigen. Die Dokumentation, das GitHub Repository für dieses Projekt und mehr finden Sie in der folgenden Beschreibung. Um sicherzustellen, dass Sie über Videos wie dieses und andere für HubSpot Entwickler auf dem Laufenden sind, sollten Sie unseren YouTube Kanal abonnieren und die Benachrichtigungen aktivieren. So erfahren Sie als Erster, wenn ein neues Video veröffentlicht wird. Bis zum nächsten Mal.