Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Installieren der Dreamhouse-Anwendung und Erstellen einer Heroku-Schaltfläche

Lernziele

In diesem Projekt führen Sie die folgenden Aufgaben aus:

  • Erstellen einer neuen Heroku-Anwendung unter Verwendung der DreamHouse-Anwendung in einem GitHub-Repository
  • Einrichten von Heroku Connect, um Objekte aus einer Salesforce-Organisation einer Heroku-Anwendung zuzuordnen
  • Erstellen einer Heroku-Schaltfläche für die Bereitstellung einer DreamHouse-Anwendung
  • Erstellen einer Heroku-Pipeline mithilfe der DreamHouse-Anwendung, um Continuous Integration zu unterstützen
  • Verwenden von Heroku Flow zum Erstellen einer neuen Funktion, Testen dieser Funktion mit Review Apps und Übertragen mit Push in eine Pipeline

Legen wir also los.

Einführung

DreamHouse Realty möchte eine neue Benutzeroberfläche für seine Desktop- und mobilen Benutzer erstellen. DreamHouse möchte seine neue Webanwendung zusammen mit seinen Immobiliendaten in Salesforce nutzen. Das Unternehmen befürchtet jedoch, dass der Prozess von der Entwicklung bis zur Fertigstellung für seine Kunden zeit- und kostenintensiv sein wird. Sehen wir uns an, wie wir hier mit Heroku Abhilfe schaffen können.

Starten Ihres Trailhead Playground und Installieren eines Pakets

Lassen Sie uns beginnen, indem Sie Ihren Trailhead Playground öffnen und ein Paket installieren. Blättern Sie zunächst auf dieser Seite nach unten und klicken Sie auf "Launch (Starten)". Wenn Sie in Ihrer Organisation eine Registerkarte mit der Bezeichnung "Install a Package (Paket installieren)" sehen, großartig! Führen Sie die folgenden Schritte aus. 

Falls nicht, klicken Sie auf App Launcher, um den App Launcher zu starten, dann auf Playground Starter und folgen den Schritten. Wenn Sie die Anwendung Playground Starter nicht sehen, kopieren Sie diesen Link zur Paketinstallation und lesen Sie in der Trailhead-Hilfe den Artikel zum Installieren eines Pakets oder einer Anwendung zum Bewältigen einer Trailhead-Aufgabenstellung.

  1. Klicken Sie auf die Registerkarte Install a Package (Paket installieren).
  2. Fügen Sie 04tB00000009UeX in das Feld ein.
  3. Klicken Sie auf Install (Installieren).
  4. Wählen Sie Install for All Users (Für alle Benutzer installieren) aus und klicken Sie dann auf Install (Installieren).
  5. Wählen Sie im Popup-Fenster, in dem Sie aufgefordert werden, den Zugriff durch Dritte zu genehmigen, Yes, grant access to these third-party websites (Ja, diesen Websites von Dritten Zugriff gewähren) und klicken Sie auf Continue (Weiter).

Nach der Installation des Pakets sehen Sie eine Bestätigungsseite und erhalten eine E-Mail an die Adresse, die mit Ihrem Playground verknüpft ist.

  1. Nach Abschluss der Installation klicken Sie auf Done (Fertig).
  2. Wechseln Sie im App Launcher (App Launcher) zur Anwendung DreamHouse und öffnen Sie sie.
  3. Klicken Sie auf die Registerkarte Data Import und klicken Sie dann auf Initialize Sample Data. Abhängig von der Bildschirmgröße befindet sich die Registerkarte "Data Import" eventuell im Registerkartenmenü unter "More (Mehr)".
  4. Klicken Sie auf die Registerkarte Properties, um die importierten Immobilien anzuzeigen.

Fügen Sie eine Verzweigung für die DreamHouse-Anwendung in GitHub hinzu.

  1. Um sich mit einem bestehenden Account bei GitHub anzumelden, wechseln Sie zu https://github.com/login. Geben Sie Ihren Benutzernamen und Ihr Kennwort ein und klicken Sie auf Sign In.
  2. Wenn Sie sich für einen neuen Account bei GitHub registrieren möchten, gehen Sie zu https://github.com/join. Erstellen Sie einen Benutzernamen, geben Sie eine E-Mail-Adresse ein und legen Sie ein Kennwort fest. Klicken Sie dann auf Create an account. Befolgen Sie die Anweisungen auf dem Bildschirm.
  3. Navigieren Sie zum GitHub-Repo der DreamHouse-Anwendung unter http://bit.ly/intro-to-heroku.
  4. Klicken Sie oben rechts auf Fork. Sie werden zu Ihrem Account mit Ihrem verzweigten Repo, intro-to-heroku, umgeleitet.

Beim Verzweigen mit dem Befehl 'Fork' werden der Basiscode für die DreamHouse-Anwendung kopiert und Ihr eigenes Repo als Ausgangspunkt erstellt.

Bearbeiten der Datei "app.json"

Zum Erstellen einer Heroku-Schaltfläche benötigen Sie eine gültige "app.json"-Datei im Stammverzeichnis. Die "app.json"-Datei beschreibt eine Webanwendung. Sie deklariert Umgebungsvariablen, Add-Ons und andere Informationen, die für die Ausführung einer Anwendung in Heroku notwendig sind. Im Schema der Datei gibt es keine Pflichtfelder, allerdings werden Felder für Name, Beschreibung und Logo empfohlen. Diese Angaben versehen Ihre Anwendung gegenüber Benutzern mit Kontext und einer Identität.

  1. Klicken Sie in Ihrem Repository intro-to-heroku auf die Datei "app.json" und dann auf das Symbol Stiftsymbol, um sie zu bearbeiten.
    Markierte Position der Datei 'app.json' in GitHub
  2. Fügen Sie in Zeile 7 Ihren Benutzernamen für das Ihr DreamHouse GitHub-Repository in Anführungszeichen gesetzt ein: https://github.com/IHR_BENUTZERNAME/intro-to-heroku.
  3. Blättern Sie an das Ende der Seite. Geben Sie in das Textfeld Update app.json die Angabe Added GitHub Repo URL ein.
  4. Behalten Sie die Standardeinstellungen bei und klicken Sie auf Commit changes.

Testen der Datei "app.json"

  1. Wenn Sie testen möchten, ob Ihre Anwendung über eine Schaltfläche bereitgestellt wird, müssen Sie die Datei "app.json" testen. Kopieren Sie diesen URL: https://heroku.com/deploy?template=https://github.com/IHR_BENUTZERNAME/intro-to-heroku
  2. Fügen Sie den URL in eine separate Browserregisterkarte ein und ersetzen Sie den Platzhaltertext (IHR_BENUTZERNAME) durch Ihren GitHub-Benutzernamen. Drücken Sie die <Eingabetaste>.
  3. Daraufhin wird der Heroku-Registrierungsbildschirm angezeigt. Wenn Sie noch keinen Account haben, erstellen Sie einen neuen Account und folgen den Anweisungen auf dem Bildschirm. Falls Sie einen Heroku-Account besitzen, klicken Sie auf die Schaltfläche Log In in der rechten oberen Ecke.
  4. Nach der Anmeldung sehen Sie, wie die Seite "Create New App" geladen wird. Dies zeigt, dass Sie die "app.json"-Datei richtig konfiguriert haben. Unter Verwendung des Links unserer Bereitstellungsschaltfläche können Sie Ihre DreamHouse-Anwendung einfach über eine Heroku-Schaltfläche erstellen und bereitstellen.
    Screenshot einer leeren 'Create New App'-Maske in Heroku
  5. Schließen Sie diese Browserregisterkarte.

Heroku-Schaltflächen sind Links zu speziellen Heroku-Bereitstellungsorten. Wenn Sie auf eine Heroku-Schaltfläche klicken, weiß die Plattform, dass Sie Code bereitstellen möchten, und kennt den Standort dieses Codes. Die Schaltfläche löst dann eine Bereitstellung aus. Jedes Code-Repo enthält zusätzliche Informationen für Heroku, wie etwa spezifische Heroku-Add-Ons und Angaben dazu, ob Konfigurationsmetadaten festlegt werden müssen.

Hinzufügen einer Heroku-Schaltfläche zu Ihrer README-Datei

Da wir nun den richtigen URL kennen, fügen wir eine Heroku-Schaltfläche zu Ihrer README-Datei hinzu und schreiben die Änderung mit Commit fest.

  1. Klicken Sie in GitHub auf die Registerkarte Code und wählen Sie die Datei "README.md" aus. Klicken Sie auf das Symbol Stiftsymbol, um die Datei zu bearbeiten.
    Markierte Position der README-Datei in GitHub
  2. Am Ende von README.md befindet sich ein auskommentiertes Anker-Tag (<a>>). Entfernen Sie die Kommentarzeichen am Beginn und Ende des Tags. Ihr Code sollte wie folgt aussehen:
    <a href="https://heroku.com/deploy"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy"></a>
  3. Dieser Code erstellt die Heroku-Schaltfläche und fügt sie am Ende Ihrer GitHub README-Datei hinzu.
  4. Blättern Sie an das Ende der Seite. Geben Sie in das Feld "Update README.md" die Angabe Added the Heroku Deployment Button ein.
  5. Behalten Sie die Standardeinstellungen bei und klicken Sie auf Commit changes.
  1. Klicken Sie auf die Registerkarte "Code" in Ihrem GitHub DreamHouse-Repo und blättern Sie an das Ende der Seite.
  2. Klicken Sie auf die neue Schaltfläche Deploy to Heroku in der DreamHouse README-Datei. Sie werden zur Heroku-Website umgeleitet, um eine neue Anwendung zu erstellen, die auf Ihrem DreamHouse-Code in GitHub basiert. Screenshot der README.md-Datei aus 'intro-to-heroku' mit der Schaltfläche 'Deploy to Heroku'
  3. Wenn Sie das Feld "App Name" leer lassen, legt Heroku einen Namen für Ihre Anwendung fest. Geben Sie als Anwendungsnamen dhprod-EINDEUTIGE_ID ein. Ersetzen Sie EINDEUTIGE_ID im Anwendungsnamen durch eine eindeutige ID.
  4. Klicken Sie auf Deploy App. Die Bereitstellung von Anwendungen in Heroku dauert etwa drei Minuten.
  5. Nach der Anwendungserstellung klicken Sie auf View (Anzeigen), um zu prüfen, ob die Anwendung geladen wird.
    Anzeigen der abgeschlossenen Heroku-Erstellung
    Wir verwenden die eben erstellte Anwendung später. 
  6. Schließen Sie diese Registerkarte.