Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Kennenlernen des Prozesses zum Entwickeln von Aura-Komponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Erstellen einer Containeranwendung zum Anzeigen und Testen von in der Entwicklung befindlicher Lightning-Komponenten
  • Erstellen einer Entwicklungsanwendung zum Hosten Ihrer Komponenten in Lightning Experience

„Meine Domäne“ ist bereits in Ihrem Trailhead Playground aktiviert

Versuchen Sie in Trailhead Playground nicht, "Meine Domäne" zu aktivieren oder die zugehörigen Einstellungen zu ändern. „Meine Domäne“ ist in jedem Trailhead Playground bereits standardmäßig aktiviert.

In einem Trailhead Playground-URL hervorgehobener Name von 'Meine Domäne'

In Ihrer Produktionsorganisation können Sie mit "Meine Domäne" eine für Ihr Unternehmen eindeutige Unterdomäne erstellen. Mit "Meine Domäne" ersetzen Sie den Ihnen von Salesforce zugewiesene Instanz-URL, z. B. https://na17.lightning.force.com, durch die von Ihnen gewählte Unterdomäne, z. B. https://NameMeinerDomäne.lightning.force.com.

"Meine Domäne" ist zum Erstellen benutzerdefinierten Lightning-Komponenten und Einrichten von Single Sign-On (SSO) in einer Organisation erforderlich. Weitere Informationen zu "Meine Domäne" finden Sie in diesem Knowledge Base-Artikel. Informationen zur Aktivierung von "Meine Domäne" in Ihrer Produktionsorganisation finden Sie im Modul Benutzerauthentifizierung.

Anzeigen Ihrer Aura-Komponente

Es gibt keine einfache Möglichkeit, während der Entwicklung eine Vorschau einer Aura-Komponente anzuzeigen. Sie können nicht auf eine Schaltfläche klicken oder einen URL aufrufen, um einzelne Komponenten anzuzeigen. Dieser Unterschied ist für Visualforce-Entwickler etwas gewöhnungsbedürftig, da es Visualforce so leicht macht, eine neue Seite zu erstellen und Sie während des Änderungsprozesses neu zu laden.

Das Programmiermodell für Aura-Komponenten funktioniert gänzlich anders. Die Unterschiede und Gründe dafür werden im Modul "Aura-Komponenten – Kernkonzepte" ausführlich erläutert. Jetzt konzentrieren wir uns darauf, wie Sie Ihre Komponente während der Entwicklung schnell laden und anzeigen können.

Wir stellen Ihnen jetzt zwei Methoden vor, mit denen Sie eine "Vorschau"-Umgebung für Ihre in Entwicklung befindlichen Komponenten einrichten können. Diese beiden Methoden dienen unterschiedlichen Zwecken. Die erste Methode, das Erstellen einer Containeranwendung, lässt sich leicht einrichten und eignet sich gut dazu, sich mit den Grundlagen von Aura-Komponenten vertraut zu machen. Außerdem ist sie auch langfristig nützlich, wenn Sie Komponenten erstellen möchten, die "außerhalb" von Salesforce existieren. (Details dazu finden Sie im Abschnitt "Ressourcen".)

Die zweite Methode, das Erstellen eines Entwicklungskontexts innerhalb von Lightning Experience, ist aufwändiger einzurichten und das Neuladen der Komponente dauert länger. Sie können jedoch keine Komponenten für die Integration mit Lightning Experience entwickeln und diese außerhalb von Lightning Experience testen. Langfristig gesehen, werden Sie diese Methode wahrscheinlich am häufigsten verwenden.

Entwicklerkonsole und Visual Studio Code

In dieser Einheit richten Sie Ihre Vorschauumgebung in der Entwicklerkonsole und Ihre Entwicklungsumgebung in Visual Studio Code ein. Dazu müssen Sie Visual Studio Code, Salesforce CLI und Salesforce Extension Pack wie im vorherigen Kapitel beschrieben installieren.

Hinweis

Hinweis

Im weiteren Verlauf dieser Einheit autorisieren Sie Visual Studio Code, Dateien in Ihrer Organisation bereitzustellen. Sie müssen den Benutzernamen und das Kennwort für Ihre Organisation kennen. Wie Sie den Benutzername und das Kennwort für Ihren Trailhead Playground erhalten, erfahren Sie im Modul Trailhead Playground-Management.

Erstellen einer Containeranwendung

Leiter! Die schlankeste Methode, eine Aura-Komponente zu entwickeln und als Vorschau anzuzeigen, ist eine Containeranwendung. Es handelt sich dabei um eine eigenständige "my.app"-Anwendung, die nur Ihre Komponente enthält.Eine Containeranwendung, die eine in Entwicklung befindliche Komponente beinhaltet

Die Containeranwendung (1) ist eine eigenständige Lightning-Anwendung, die nur den Zweck hat, als Shell mit einem direkt aufrufbaren URL zu dienen. Als einziges Element enthält sie die Komponente auf oberster Ebene, an der Sie arbeiten. In der Abbildung ist dies die Komponente "My Expenses" (2) zur Erstellung einer Spesenabrechnung. (Vielleicht kennen Sie die Komponente noch aus dem Modul "Aura-Komponenten – Grundlagen", in dem wir sie neu erstellt haben.)

So gehen Sie zum Erstellen einer Containeranwendung vor:

  1. Öffnen Sie die Developer Console und wählen Sie File | New | Lightning Application aus.
  2. Geben Sie im Bereich "New Lightning Bundle" als Anwendungsnamen harnessApp ein und klicken Sie auf Submit.

Wir wissen schon noch, dass wir Ihnen gesagt haben, Sie sollen Visual Studio Code für die Entwicklung verwenden. Und das gilt auch nach wie vor. Hier verwenden wir die Developer Console einzig und allein wegen dieser Preview-Schaltfläche. Leiter! Wenn Sie darauf klicken, wird ein neues (und vorerst leeres) Fenster geöffnet. In dieses Fenster können Sie Ihre Komponente neu laden, um während der Entwicklung Änderungen anzuzeigen.

Moment mal. Haben wir nicht gerade gehört, dass es keine Schaltfläche gibt, auf die man klicken kann, um eine in Entwicklung befindliche Komponente anzuzeigen? Was ist denn diese Preview-Schaltfläche sonst?

Mit der Schaltfläche Preview können Sie eine Lightning-Anwendung anzeigen, keine Komponente. Diese beiden Dinge sind aus verschiedenen Gründen unterschiedlich. Komponenten werden in Anwendungen platziert, wie Sie dies im nächsten Abschnitt tun werden.

Erstellen einer Komponente der obersten Ebene

Leiter! In Salesforce sprechen wir häufig von "Anwendungen" und "Komponenten". Sehen wir uns an, wie die beiden Begriffe in Bezug zu unseren aktuellen Aktivitäten stehen. Sie haben gerade eine eigenständige Lightning-Anwendung in der Developer Console erstellt, die wir als Containeranwendung bezeichnet haben. Diese "Anwendung" ist nur eine Shell: Sie wird sehr wenig Code und nur einen Verweis auf die Komponente enthalten, die Sie in Kürze erstellen.

Die Komponente, die Sie hierin platzieren, ist die eigentliche "Anwendung", also das Ding auf oberster Ebene, das Sie zu Lightning Experience, zur Salesforce-Anwendung etc. hinzufügen können. Der gesamte reale Code für Ihre Funktionen landet in dieser Komponente oder den ihr untergeordneten Komponenten. Sie können sie als Widget, als Komponente oberster Ebene usw. bezeichnen. Sie sollten sie aber besser nicht Anwendung nennen, da der Begriff "Anwendung" bei Lightning Components und Lightning Experience eine spezielle Bedeutung hat.

Verwirrt? Sehen wir uns das in der Praxis an. Wir erstellen eine Komponente in Visual Studio Code und stellen sie in Ihrer Organisation bereit.

  1. Starten Sie Visual Studio Code.
  2. Drücken Sie in Visual Studio Code Befehlstaste+Umschalt+P auf einem Mac oder STRG+UMSCHALT+P unter Windows oder Linux, um die Befehlspalette zu öffnen.
  3. Geben Sie SFDX: Create Project (Projekt erstellen) ein und drücken Sie die Eingabetaste.
  4. Wählen Sie Standardprojektvorlage (Standard) aus.
  5. Nennen Sie das Projekt MyComponent und drücken Sie die Eingabetaste.
  6. Navigieren Sie zum gewünschten Ordner und klicken Sie auf Projekt erstellen, um das Projekt zu speichern.
  7. Öffnen Sie die Befehlspalette erneut und geben Sie SFDX:Aura Lightning Component ein.
  8. Nennen Sie die neue Komponente myFirstComponent und drücken Sie die Eingabetaste.
  9. Drücken Sie erneut die Eingabetaste, um den Speicherort force-app/main/default/aura zu übernehmen.

    Nun sollten Sie unter dem Verzeichnis force-app/main/default/aura das Verzeichnis myFirstComponent sehen, das mehrere Dateien enthält.

    Sie sehen auch das Verzeichnis force-app/main/default/lwc. Das Verzeichnis "lwc2 kann Dateien mit Lightning-Webkomponenten enthalten. Es gibt zwei Programmiermodelle für das Erstellen von Lightning-Komponenten: das Aura-Programmiermodell oder das Lightning Web Components-Programmiermodell. In diesem Modul liegt der Schwerpunkt auf Aura-Komponenten.

  10. Beachten Sie im Verzeichnis "myFirstComponent", dass eine Dateinamenerweiterung ".cmp" lautet. Ersetzen Sie in der Datei "myFirstComponent.cmp" den Inhalt durch das folgende Markup und speichern Sie die Datei.
    <aura:component implements="force:appHostable">
        <p>I solemnly swear I am proficient in JavaScript.</p>
    </aura:component>

Führen Sie diese Schritte aus, um Ihre Organisation bei Visual Studio Code zu autorisieren und Ihre Aura-Komponente bereitzustellen.

  1. Öffnen Sie die Befehlspalette, geben Sie SFDX:Authorize an Org ein und drücken Sie die Eingabetaste.

    Im Modul Trailhead Playground-Management erfahren Sie, wie Sie Ihren Benutzernamen und das Kennwort abrufen.

  2. Drücken Sie erneut die Eingabetaste, um die Standardanmeldeoption zu übernehmen.
  3. Drücken Sie erneut die Eingabetaste, um den Standardalias für diese Verbindung zu übernehmen.
  4. Wenn sich der Browser öffnet, melden Sie sich bei Ihrer Organisation an und erlauben Sie bei Aufforderung den Zugriff. Kehren Sie nach erfolgreicher Anmeldung zu Visual Studio Code zurück.
  5. Klicken Sie mit der rechten Maustaste auf das Verzeichnis "default" und wählen Sie SFDX: Deploy This Source to Org (Quellcode in Organisation bereitstellen) azs.

    Visual Studio Code sollte anzeigen, dass die Bereitstellung erfolgreich war. Wird der Befehl SFDX: Deploy This Source to Org nicht aufgeführt, haben Sie Ihre Organisation nicht bei VS Code autorisiert. Versuchen Sie es erneut.

Kehren Sie nun in Ihrer Organisation zur Entwicklerkonsole zurück. Wenn die Containeranwendung nicht bereits geöffnet ist, klicken Sie auf File | Open Lightning Resources. Öffnen Sie den Ordner "c:harnessApp", wählen Sie APPLICATION aus und klicken Sie auf Open Selected.

  1. Fügen Sie die Komponente der Containeranwendung hinzu. Ersetzen Sie den Inhalt von "harnessApp.app" durch Folgendes.
    <aura:application>
        <c:myFirstComponent/>
    </aura:application>
  2. Speichern Sie die Datei (File > Save).
  3. Wählen Sie Preview (Vorschau) (oder Update Preview (Vorschau aktualisieren), falls die Schaltfläche "Preview (Vorschau)" kürzlich verwendet wurde).

Dies ist Ihr Entwicklungsprozess für das Arbeiten mit Aura-Komponenten im eigenständigen Modus. Sie erstellen eine Containeranwendung für Ihr Vorschaufenster. Dann entwickeln Sie Ihre Funktion oder Ihr Widget innerhalb einer Komponente, die Sie zu der Containeranwendung hinzufügen. Zum Anzeigen von Änderungen laden Sie die Vorschau der Containeranwendung neu. Das geht viel schneller, als bei jeder Änderung das gesamte Lightning Experience neu zu laden!

Die sollten ein paar Dinge beachten:

Dieser Prozess ist nicht so einfach oder automatisch wie bei Visualforce. Sie müssen Komponenten selbst erstellen, da es leider keinen Link für die schnelle Fehlerbehebung gibt, um eine Stub-Version zu erstellen. Zudem müssen Sie die Containeranwendung manuell neu laden – sie wird nicht automatisch neu geladen.

Der zweite, wichtigere Punkt ist folgender: Die eigenständige Anwendung (häufig "my.app" genannt) führt nur das Komponenten-Framework und Ihre Komponente aus. Sie wird schneller neu geladen, da sie nicht das gesamte Lightning Experience lädt. Falls Ihre Komponente jedoch von Lightning Experience-Services abhängt, wie etwa für die Bereitstellung der aktuellen Datensatz-ID oder für die Verarbeitung von Navigationsereignissen, dann funktioniert sie außerhalb von Lightning Experience nicht. (Die Gründe dafür werden im Modul Aura-Komponenten – Kernkonzepte erläutert.)

Für die meisten Entwickler von Lightning-Komponenten ist dies ein ziemlich eklatantes Manko. Meistens entwickeln Sie Dinge, die in Lightning Experience (oder der Salesforce-Anwendung) ausgeführt werden und damit integriert sind. Wir werden daher jetzt eine weniger schlanke Testumgebung in Lightning Experience erstellen, in der Sie auf alle Services zugreifen können, die diese (sehr viel umfangreichere) Containeranwendung bereitstellt.

Erstellen einer Lightning Experience-Entwicklungsanwendung

Leiter! Mit den folgenden Schritten erstellen wir eine Lightning-Anwendung namens "In Entwicklung", mit der Sie von Lightning Experience aus auf Lightning-Komponente (und andere Dinge wie Lightning- und Visualforce-Seiten) zugreifen können, die sich noch in der Entwicklung befinden.

Erstellen der Anwendung "In Entwicklung"

Bei diesem Schritt wird eine Lightning-Anwendung erstellt, in der Sie Ihre in Entwicklung befindlichen Komponenten platzieren.

  1. Geben Sie unter "Setup" im Feld "Schnellsuche" den Text Anwendungs ein und wählen Sie dann Anwendungs-Manager aus.

    Daraufhin wird der Lightning Experience-Anwendungs-Manager angezeigt.

  2. Klicken Sie auf Neue Lightning-Anwendung und erstellen Sie dann eine benutzerdefinierte Anwendung für die in Entwicklung befindlichen Komponenten.
    • App Name (Anwendungsname): In Entwicklung
    • Der Entwicklername wird automatisch zugewiesen.
    • Beschreibung: Komponenten und Seiten in der Entwicklung.
      Erstellen einer neuen Lightning-Anwendung
  3. Klicken Sie auf Weiter.
  4. Klicken Sie erneut auf Next (Weiter), um die Standardeinstellungen für "App Options" (Anwendungsoptionen) zu übernehmen.
  5. Klicken Sie auf Next (Weiter), um die Standardeinstellungen für Anwendungsoptionen für "Utility Items" (Dienstprogrammelemente) zu übernehmen.
  6. Klicken Sie auf Next (Weiter), um die Standardeinstellungen für Anwendungsoptionen für "Navigation Items" (Navigationselemente) zu übernehmen.
  7. Erwägen Sie für Benutzerprofile die Begrenzung der Anwendung auf Systemadministratoren oder ein Profil, das für Entwickler in Ihrer Organisation erstellt wurde. Ihre Benutzer brauchen die Seiten erst dann zu sehen, nachdem sie an der endgültigen Stelle in der Benutzeroberfläche eingefügt wurden.
  8. Klicken Sie auf Speichern und fertig stellen, um die Anwendung zu erstellen.

Hinzufügen der Anwendung "In Entwicklung" zum Anwendungsmenü

Dieser Schritt fügt Ihre Anwendung zum Navigationsmenü hinzu, damit Sie sie leicht aufrufen können.

  1. Geben Sie in Setup im Feld "Schnellsuche" den Text "Anwendungsmenü" ein und wählen Sie dann Anwendungsmenü aus.

    Daraufhin wird die Seite "Anwendungsmenü" angezeigt.

  2. Vergewissern Sie sich, dass die Anwendung "In Entwicklung" auf "In App Launcher sichtbar" eingestellt ist. Einstellen auf 'In App Launcher sichtbar' In diesem Menü können Sie bei Bedarf gleich die Anordnung von Elementen ändern und sogar nicht verwendete Anwendungen ausblenden.

Erstellen einer Lightning-Komponenten-Registerkarte

Bei diesem Schritt wird eine neue Registerkarte erstellt, die eine Lightning-Komponente anzeigt und sie zur Anwendung "In Entwicklung" hinzufügt.

  1. Geben Sie in Setup im Feld "Schnellsuche" den Text Registerkarten ein und wählen Sie dann Registerkarten aus.

    Daraufhin wird die Setup-Seite "Benutzerdefinierte Registerkarten" angezeigt.

  2. Klicken Sie im Anschnitt "Lightning-Komponenten-Registerkarten" auf Neu und erstellen Sie eine benutzerdefinierte Registerkarte für die derzeit in Entwicklung befindliche Seite.
    • Lightning-Komponente: c:myFirstComponent
    • Tab Label (Registerkartenbezeichnung): My First Component
    • Der Registerkartenname wird automatisch zugewiesen.
    • Wählen Sie einen Registerkartenstil aus.
    • Beschreibung: Eine einfache Komponente.
      Erstellen einer benutzerdefinierten Lightning-Komponenten-Registerkarte
  3. Legen Sie die Registerkarte für Ihr Systemadministratorprofil als sichtbar fest. Registerkarte als sichtbar festlegen
  4. Geben Sie unter "Setup" im Feld "Schnellsuche" den Text Anwendungs ein und wählen Sie dann Anwendungs-Manager aus.
  5. Klicken Sie im Dropdown-Menü rechts neben Ihrer Anwendung "In Entwicklung" auf Bearbeiten.
  6. Fügen Sie im Bereich "Navigation Items" (Navigationselemente) die Registerkarte "My First Component" zur Liste "Selected Items" (Ausgewählte Elemente) hinzu.
  7. Klicken Sie auf Speichern.
  8. Klicken Sie rechts oben auf der Seite auf Back (Zurück), um zu Setup zurückzukehren.

Wenn Sie weitere Registerkarten zu Ihrer Anwendung hinzufügen möchten, wiederholen Sie diesen letzten Schritt einfach.

Jetzt können Sie Ihre Komponente in Lightning Experience anzeigen lassen. Suchen und wählen Sie im App Launcher die Anwendung In Entwicklung aus. In der geöffneten Anwendung wird die Registerkarte "Meine erste Komponente" als erster Eintrag in der Registerkartenleiste der Anwendung angezeigt. Registerkarte 'Meine erste Komponente' in der Anwendung 'In Entwicklung' Wenn Sie Änderungen an Ihrer Komponente vornehmen, laden Sie Lightning Experience mit dem Neuladebefehl des Browsers neu.

Das Hinzufügen einer Komponente zu einer Registerkarte ist eine Möglichkeit, eine Lightning-Komponente in Lightning Experience zu integrieren. Dies ist bei Funktionen mit allgemeinem Kontext nützlich, also bei Funktionen, die nicht an einen spezifischen Objekttyp wie einen Account gebunden oder für die Verwendung mit einzelnen Datensätzen gedacht sind.

Sie können Komponenten erstellen, die diese Dinge tun, müssen dann aber ein anderes Verfahren anwenden, um sie an der richtigen Stelle zu Lightning Experience hinzuzufügen. Soll Ihre Komponente beispielsweise einen bestimmten Accountdatensatz verwenden, könnten Sie sie zum Account-Seitenlayout oder als Schnellaktion zum Objekt "Account" hinzufügen.

Falls der Zugriff auf Ihre Komponente an anderer Stelle in Lightning Experience erfolgen soll, finden Sie im Abschnitt "Ressourcen" Links zu den entsprechenden Schritten, mit denen Sie sie zur Benutzeroberfläche hinzufügen können, sowie zum erforderlichen Code, den Sie in diesem Fall zu Ihrer Komponente hinzufügen müssen.

Punkte, die Sie beachten sollten

Im Modul "Aura-Komponenten – Kernkonzepte" werden Einzelheiten des Programmiermodells für Aura-Komponenten behandelt und Konzepte aus Visualforce ähnlichen Funktionen bei Aura-Komponenten zugeordnet. Doch bevor Sie mit diesem Modul fortfahren, beachten Sie bitte folgende Punkte:

Aura-Komponenten sind neuer als Visualforce

Visualforce gibt es schon länger als das Programmiermodell von Aura-Komponenten. Das heißt, es ist noch in der Entwicklung. Richten Sie Ihre Erwartungshaltung entsprechend aus und freuen Sie sich auf die Funktionen, die wir ständig hinzufügen.

Backen Sie erst einmal kleine Brötchen

Rutsche! Fangen Sie klein an, wenn Sie Ihre ersten Aura-Komponenten entwickeln. Es mag schon sein, dass Sie ein höchst erfahrener Visualforce-Entwickler sind, doch wenn Sie Ihrem Wissensstand bei Aura-Komponenten zu weit vorauseilen, müssen Sie hinterher sehr wahrscheinlich nacharbeiten.

Schreiben Sie keinen Visualforce-Code in der Form von Aura-Komponenten

Rutsche! Design und Architektur guter Lightning-Komponenten sehen in keinster Weise wie guter Visualforce-Code aus. Sie können ein Visualforce-Design in eine Aura-Komponente hineinzwingen, das ist aber so, als ob Sie einen viereckigen Stab mit Gewalt in ein rundes Loch zwängen. Es ist sehr schwierig, und höchstwahrscheinlich verwerfen Sie die ganze Arbeit später sowieso. Stecken Sie besser mehr Zeit in das Erlernen der Methodik für Aura-Komponenten.

Im Gedenken an Alamo

Die Texaner haben mit ihrem Schlachtruf sicherlich etwas anderes gemeint als wir. Manche Schlachten kann man nicht gewinnen und sollte sich daher lieber geschlagen geben. Wenn Sie sich an Aura-Komponenten die Zähne ausbeißen, sollten Sie sich vielleicht vom Schlachtfeld zurückziehen und Ihre Kräfte neu sammeln.

Leiter! Nehmen Sie sich einen Tag Zeit, um das Modul "Aura-Webkomponenten – Grundlagen" oder "Lightning-Webkomponenten – Grundlagen" durchzuarbeiten. Machen Sie sich mit den Grundlagen dieses Frameworks vertraut, das sich wirklich deutlich von Visualforce unterscheidet. Ein strategischer Rückzug mit dem Plan, besser vorbereitet zurückzukehren, ist keine Niederlage, sondern der Weg zu Sieg.