Vorschau Ihrer Komponente mit Local Dev (Lokale Entw.)

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

Bisher haben Sie in diesem Projekt eine Testorganisation (mit dem Alias scratchOrg), eine Lightning-Anwendung und eine Lightning-Webkomponente (myFirstWebComponent) erstellt. Jetzt werden Sie Local Dev (Lokale Entw.) ausführen, um Ihre Komponente in einer Echtzeitvorschau Ihrer Lightning-Anwendung zu sehen.

Ausführen von Local Dev (Lokale Entw.) für eine Lightning-Anwendung in einer Desktop-Umgebung

Mit Local Dev (Lokale Entw.) können Sie eine Echtzeitvorschau Ihrer Lightning-Anwendung in einer Desktop- oder mobilen Salesforce-Anwendungsumgebung (iOS oder Android) ausführen. Die Vorschau wird automatisch aktualisiert, wenn sich Ihre Komponenten ändern, sodass Sie weder Code bereitstellen noch Ihre Browserseite aktualisieren müssen. Es gibt unterschiedliche Befehls-Flags für die Ausführung einer Desktop-Vorschau bzw. einer mobilen Vorschau.

Sehen wir uns eine Vorschau der Lightning-Anwendung "Sales" (Vertrieb) in einer Desktop-Umgebung mit Local Dev (Lokale Entw.) an. Ihre Testorganisation wird mit einigen Standardanwendungen bereitgestellt, die Sie verwenden können.

1. Klicken Sie in Visual Studio Code unter macOS auf Befehl + Umschalt + P bzw. unter Windows oder Linux auf Strg + Umschalt + P, geben Sie new terminal ein und wählen Sie "Terminal: Create New Terminal aus.
   
2. Stellen Sie sicher, dass Sie über die aktuelle Version des Befehls Local Dev (Lokale Entw.) verfügen. Geben Sie in die Registerkarte "Terminal" sf update ein und drücken Sie die Eingabetaste.
   
3. Wenn das Update abgeschlossen ist, geben Sie in dieselbe Registerkarte "Terminal" sf lightning dev app --target-org scratchOrg --device-type desktop ein und drücken die Eingabetaste.
   
4. Wenn Sie aufgefordert werden, eine Lightning Experience-Anwendung für die Vorschau auszuwählen, verwenden Sie die Pfeiltasten, um die Anwendung Sales (Vertrieb) auszuwählen, und drücken die Eingabetaste.
   

Wenn der Befehl erfolgreich ausgeführt wird, öffnet er eine neue Registerkarte in Ihrem Browser mit einer Vorschau der Seite "Seller Home" (Verkäuferstartseite) Ihrer Organisation. Local Dev (Lokale Entw.) ist für diese Testorganisation aktiviert. Dies sind die Parameter, die Sie im Befehl verwendet haben.

• --target-org definiert, welche Zielorganisation Sie in der Vorschau anzeigen möchten. Sie legen dieses Flag auf scratchOrg fest.
  
• --device-type definiert die Umgebung, in der Ihre Vorschau ausgeführt wird. Das Einstellen dieses Flags auf desktop stellt sicher, dass Ihre Vorschau in einer Desktop-Umgebung ausgeführt wurde.
  

Informationen über weitere optionale Flags für den Befehl sf lightning dev app finden Sie im Entwicklerhandbuch für Lightning-Webkomponenten: Vorschau einer Lightning-Anwendung (allgemein verfügbar).

Jetzt bearbeiten wir Ihre Komponente und sehen uns an, wie sich Ihre Vorschau in Local Dev (Lokale Entw.) selbst in Echtzeit aktualisiert.

1. Klicken Sie in Ihrem Browser auf die Registerkarte Accounts und öffnen Sie den Datensatz Component Developers.
   
2. Öffnen Sie in Visual Studio Code myFirstWebComponent.html.
   
3. Ändern Sie im Element <lightning-card> den Wert von title von “ContactInformation” in “Contact Information”. Ihre geänderte Codezeile sollte nun so aussehen:
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.
   

Wenn Sie nun einen Blick auf die Anwendungsvorschau in Ihrem Browser werfen, werden Sie sehen, wie sich der Titel Ihrer Komponente abhängig von Ihrer lokalen Änderung automatisch ändert. Um die Änderung zu sehen, mussten Sie weder Ihre Anwendung erneut bereitstellen noch die Seite manuell aktualisieren.

Ausführen von Local Dev (Lokale Entw.) für eine Lightning-Anwendung in einer iOS-Umgebung (MacOS)

Mit Local Dev (Lokale Entw.) können Sie Ihr Projekt in einem iOS-Simulator oder einem Android-Emulator anzeigen. Sehen wir uns nun an, wie Sie die Vorschau derselben Lightning-Anwendung in einer iOS-Anwendung ausführen.

In diesem Abschnitt beschreiben wir nur die Schritte für den iOS-Simulator, Sie können den Prozess aber auch mit dem Android-Emulator nachvollziehen. Informationen über die Verwendung von Local Dev (Lokale Entw.) mit Android Studio finden Sie unter Android-Emulatoren.

Mac-Benutzer können einen iOS-Simulator für Local Dev (Lokale Entw.) mit Xcode ausführen. Wenn Xcode noch nicht installiert ist, installieren Sie es aus dem Mac App Store und führen den anfänglichen Setup-Prozess durch. Achten Sie darauf, iOS-Simulatoren für Mobilgeräte herunterzuladen.

Wenn die Installation von Xcode abgeschlossen ist, öffnen Sie Visual Studio Code. Nun führen Sie Ihre Lightning-Anwendung auf einem iPhone-Simulator aus.

1. Klicken Sie in Visual Studio Code auf Befehl + Umschalt + P, geben Sie new terminal ein und wählen Sie Terminal: Create New Terminal aus.
   
2. Führen Sie in ihrem neuen Terminalfenster den Befehl sf lightning dev app --target-org scratchOrg --device-type ios aus.
   
3. Wenn Sie aufgefordert werden, eine Lightning Experience-Anwendung für die Vorschau auszuwählen, wählen Sie Sales (Vertrieb) aus und drücken die Eingabetaste.
   
4. Wenn Sie zur Auswahl eines Geräts für die Vorschau aufgefordert werden, wählen Sie ein iPhone aus der Liste der gültigen Optionen aus.
   
5. Wenn Sie aufgefordert werden, die mobile Salesforce-Anwendung herunterzuladen und zu installieren, geben Sie y ein und drücken die Eingabetaste.
   

Wenn der Befehl von Local Dev (Lokale Entw.) erfolgreich ausgeführt wird, sieht Ihre Terminalausgabe in etwa so aus.

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

Die Salesforce-Anwendung sollte automatisch in Ihrem iPhone-Simulator geöffnet werden. Akzeptieren Sie die Nutzungsbedingungen der Anwendung. Daraufhin sollte der Simulator die Salesforce-Anmeldeseite anzeigen.

Führen Sie die folgenden Schritte durch, um Ihre Testorganisation in der Anwendung zu öffnen.

1. Klicken Sie in der rechten oberen Ecke des Simulators auf "Settings" (Einstellungen) (), um das Menü Choose Connection (Verbindung wählen) zu öffnen.
   
2. Klicken Sie im Menü Choose Connection (Verbindung wählen) auf "Add" (Hinzufügen) (), um einen neuen Host hinzuzufügen.
   
3. Die Domäne für das Feld Host sollte der URL Ihrer Testorganisation sein. Sie können diesen URL ermitteln, indem Sie den Befehl sf org display user --target-org scratchOrg in einem Terminalfenster von VS Code ausführen.
   
4. Kopieren Sie den "Instance URL" (Instanz-URL) aus der Terminalausgabe und fügen Sie ihn in das Feld Host in Ihrem Simulator ein. Das sieht dann so aus:
   
   
5. Klicken Sie dann in der rechten oberen Ecke des iOS-Simulators auf Done (Fertig), um die neue Domäne hinzuzufügen und zur Salesforce-Anmeldeseite zurückzukehren.
   
6. Kopieren Sie den Wert für Username (Benutzername) in der Terminalausgabe in Schritt 3 und fügen Sie ihn in das Feld Username (Benutzername) ein. Der Benutzername sollte dem Format Test-Wert@Beispiel.com entsprechen.
   
7. Um ein gültiges Kennwort für diesen Benutzernamen zu erhalten, geben Sie in Ihrem VS Code-Terminal den Befehl sf org generate password --target-org scratchOrg ein und drücken die Eingabetaste.
   
8. Kopieren Sie das Kennwort in der Terminalausgabe und fügen Sie es in das Feld Password (Kennwort) in Ihrem iOS-Simulator ein. Klicken Sie dann auf Log In to Sandbox (Bei Sandbox anmelden).
   
9. Falls nötig, geben Sie den Prüfcode ein, der an die angegebene E-Mail-Adresse gesendet wurde.
   
10. Wenn die Anwendung Zugriff auf Ihre Organisation fordert, wählen Sie Allow (Zulassen) aus.
    
    

Sie sollten jetzt die Salesforce-Anwendung in Ihrem iOS-Simulator sehen. Navigieren Sie nun zum Account "Component Developer" in der Anwendung "Sales" (Vertrieb), um Local Dev (Lokale Entw.) in Aktion zu sehen.

1. Klicken Sie in der rechten unteren Ecke der Anwendung auf Menu (Menü) und wählen Sie dann Accounts aus.
   
2. Klicken Sie unter Recent Accounts (Aktuelle Datensätze) auf Component Developers. Sie sollten nun die Lightning-Webkomponente "myFirstWebComponent" auf der Seite sehen.
   
3. Öffnen Sie in Visual Studio Code myFirstWebComponent.html.
   
4. Ändern Sie im Element <lightning-card> den Wert von title von "Contact Information" in “Contact Info". Ihre geänderte Codezeile sollte nun so aussehen:
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.
   

Prüfen Sie nun in Ihrem iOS-Simulator, ob sich der Titel Ihrer Komponente automatisch selbst aktualisiert hat. Sehen Sie, wie schnell Sie Ihre Komponenten mit Local Dev (Lokale Entw.) iterieren können?

Geschafft! Bei diesem Projekt haben Sie die empfohlenen Entwicklertools für die Entwicklung von Lightning-Webkomponenten installiert und eingesetzt. Außerdem haben Sie fehlerhaften Code kopiert und eingefügt (was Sie in Zukunft vermeiden sollten). Sie haben Local Dev (Lokale Entw.) verwendet, um eine Echtzeitvorschau Ihrer Änderungen an Lightning-Webkomponenten in einer Desktop-Umgebung zu sehen. Und wenn Sie Mac-Benutzer sind, haben Sie Local Dev (Lokale Entw.) zudem dazu verwendet, eine Vorschau Ihrer Komponente in einer iPhone-Umgebung anzuzeigen.

Wir können Ihre Arbeit in einer Testorganisation zwar nicht prüfen, Sie können aber trotzdem auf Verify Step (Schritt überprüfen) klicken und sich den Badge verdienen. Sehen Sie sich dann die Trailhead-Beispielanwendungen und die Rezepte für Lightning-Webkomponenten an, um weitere Codebeispiele zu erhalten und zu lernen, wie Sie großartige Lightning-Webkomponenten entwickeln.

Ressourcen

• Trailhead: Einrichten Ihrer Salesforce mobilen Entwicklungstools für Lightning-Webkomponenten