Installieren von Entwicklungstools

Lernziele

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

• Installieren der empfohlenen Entwicklertools für das Erstellen von und Arbeiten mit Lightning-Webkomponenten
  
• Erstellen einer Lightning-Webkomponente
  
• Beheben von Fehlern in Ihrem Code mit den zur Verfügung stehenden Entwicklertools
  
• Konfigurieren eines Datensatzlayouts zum Anzeigen Ihrer Lightning-Webkomponente
  
• Aktivieren von Local Dev (Lokale Entw.) in einer Salesforce-Organisation
  

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".

Sie haben von diesem Programmiermodell namens Lightning-Webkomponenten gehört und möchten nun Ihre eigenen Webkomponenten entwickeln. Zunächst benötigen Sie Tools zum Schreiben von Lightning-Webkomponenten. 

Es stimmt zwar, dass Sie eine Lightning-Webkomponente mit einem beliebigen Texteditor erstellen können, doch Sie profitieren dann nicht von der Unterstützung, die spezialisierte Tools bieten. Wenn Sie ein erfahrener Salesforce-Entwickler sind, der Lightning-Webkomponenten in seine Anwendungen integrieren möchte, werden Sie erfolgreicher sein, wenn Sie einige neue Tools in Ihre Toolkette aufnehmen. Und wenn Sie noch nicht mit der Salesforce-Entwicklung vertraut sind und mit der Entwicklung von Lightning-Webkomponenten beginnen möchten, sollten Sie sich mit der richtigen Toolkette für die Arbeit an Salesforce-Projekten vertraut machen.

Da Lightning-Webkomponenten auf modernen Webstandards basieren, ist es nur logisch, dass die zugehörigen Tools auf den derzeit bei Webentwicklern beliebten Tools aufsetzen.

Erstellen eines neuen Trailhead Playgrounds

Erstellen Sie für dieses Projekt einen neuen Trailhead Playground. Blättern Sie an das Ende dieser Seite, klicken Sie auf den Playground-Namen und klicken Sie dann auf Create Playground (Playground erstellen). Die Erstellung eines neuen Trailhead Playgrounds dauert meist drei bis vier Minuten.

Hinweis: Und ja, Sie brauchen wirklich einen brandneuen Trailhead Playground! Wenn Sie eine vorhandene Organisation oder einen bestehenden Playground verwenden, kann dies zu Problemen beim Abschließen der Schritte in diesem Projekt führen.

Einrichten der Salesforce CLI

Wie viele andere Programmiersprachen und -modelle bietet Salesforce eine Befehlszeilen-Schnittstelle (Command-Line Interface, CLI). Wenn Sie schon einmal NPM, Yarn, Gradle oder Maven eingesetzt haben, wird Ihnen die Salesforce CLI vertraut vorkommen, eben nur perfekt auf Salesforce-Entwicklungsaufgaben zugeschnitten.

Mit der Salesforce CLI können Sie auf vielfältige Weise mit Ihren Salesforce-Umgebungen interagieren, um beispielsweise Code abzurufen oder per Push zu übertragen oder mit Daten zu interagieren. Die CLI besteht aus mehreren Plug-Ins, die wichtige spezifische Funktionalität bereitstellen. Zum Beispiel bietet das Plug-In plugin-org die Möglichkeit, Salesforce-Organisationen zu verwalten, etwa durch Erstellen von Testorganisationen.

Interessantes am Rande: Salesforce CLI ist zu 100 % Open Source. Sie können sich den gesamten Quellcode ansehen und sogar neue Funktionen beitragen. Auf der Seite Salesforce CLI Status finden Sie eine Liste der enthaltenen Plug-Ins und Links zu ihren Repositories. 

Installation

Wenn Sie die Salesforce CLI bereits installiert haben, können Sie diesen Schritt überspringen. Führen Sie die folgenden Schritte aus oder sehen Sie im Leitfaden für das Setup von Salesforce CLI nach den vollständigen Installationsanweisungen.

1. Installieren Sie die CLI von https://developer.salesforce.com/tools/salesforcecli.
   
2. Vergewissern Sie sich, dass die CLI ordnungsgemäß installiert ist und die neueste Version hat, indem Sie über die Befehlszeile den folgenden Befehl ausführen: sf update
3. Die Ausgabe sollte wie folgt aussehen: @salesforce/cli:Updating CLI….
   

Die Salesforce CLI ist nun einsatzbereit. Das war nicht schwer, oder?

Installieren von Local Dev (Lokale Entw.)

Local Dev (Lokale Entw.) ist ein Salesforce CLI-Tool, mit dem Sie eine Echtzeitvorschau Ihrer Lightning-Webkomponenten in Ihrem Browser ausführen können. Die Vorschau wird automatisch aktualisiert, wenn Sie Ihre Komponenten lokal bearbeiten, sodass Sie weder Code bereitstellen noch Ihre Browserseite manuell aktualisieren müssen.

Diese Funktion ist generell für Lightning Experience-Apps (Desktop- und mobile Salesforce-Anwendung) verfügbar. Sie können Local Dev (Lokale Entw.) auch für Testorganisationen aktivieren. Im Moment steht es als Beta-Version für Experience Cloud Lightning Web Runtime-Sites zur Verfügung.

Installation

Sie müssen die Salesforce CLI installieren, bevor Sie Local Dev (Lokale Entw.) installieren können. Führen Sie in der Befehlszeile dann den folgenden Befehl aus, um Local Dev (Lokale Entw.) für eine Test- oder Sandbox-Organisation zu installieren:

sf plugins install @salesforce/plugin-lightning-dev@prerelease

Wenn Sie über eine Produktionsorganisation mit einem anstehenden Release verfügen, sollten Sie die aktuellste Instanz von Local Dev (Lokale Entw.) installieren, indem Sie den folgenden Befehl von der Befehlszeile aus ausführen: sf plugins install @salesforce/plugin-lightning-dev@latest.

Für dieses Trailhead-Projekt sollten Sie jedoch die Vorabversion installieren.

Nun zum nächsten Tool in Ihrer Toolbox als neuer Entwickler von Lightning-Webkomponenten, der integrierten Entwicklungsumgebung (Integrated Development Environment, IDE).

Herunterladen und Konfigurieren von Visual Studio Code

Visual Studio Code ist der Code-Editor für Salesforce-Entwickler, die gerade einsteigen. Es handelt sich um ein kostenloses Open-Source-Tool, das für Windows, Linux und macOS zur Verfügung steht. Visual Studio Code ist eine bei Webentwicklern bestens etablierte IDE. Das Tool eignet sich auch als effektive IDE für die Erstellung von Lightning-Webkomponenten. Salesforce bietet kostenlose Erweiterungen (Extensions) für Visual Studio Code, die Ihre Entwicklungsumgebung noch weiter vereinfachen. Wir bieten außerdem das Salesforce Extension Pack. Das Extension Pack bietet großartige Tools für die Entwicklung auf der Lightning-Plattform, darunter Tools für das Arbeiten mit Apex, Visualforce und sogar einen Replay Debugger. 

Befolgen Sie die nachfolgenden Anweisungen, um Visual Studio Code und das Salesforce Extension Pack zu installieren. 

1. Laden Sie die neueste Version von Visual Studio Code für Ihr Betriebssystem herunter und installieren Sie sie. Wenn Sie Visual Studio Code bereits installiert haben, müssen Sie es nicht erneut installieren.
   
2. Starten Sie Visual Studio Code.
   
3. Klicken Sie in der Randleiste auf "Extensions (Erweiterungen)" ().
   
4. Suchen Sie nach "Salesforce Extension Pack" und klicken Sie auf Installieren. Wenn Sie es bereits installiert haben, klicken Sie einfach auf die Schaltfläche Reload (Neu laden).
   
   
5. Drücken Sie unter macOS Befehl+Umschalt+P bzw. unter Windows oder Linux Strg+Umschalt+P, um die Befehlspalette einzublenden. Geben Sie in der Befehlspalette sfdx ein, um eine anfängliche Liste der verfügbaren Befehle anzuzeigen.
   

Fertig! Sie haben alle Tools installiert, die Sie für die Entwicklung Ihrer ersten Lightning-Webkomponente benötigen.

Aktivieren von Developer Hub

Für dieses Projekt verwenden Sie Ihren Trailhead Playground als Developer Hub und erstellen eine Lightning-Webkomponente in einer Testorganisation. Doch lassen Sie uns zunächst erklären, was ein Developer Hub und eine Testorganisation sind.

Eine Testorganisation ist eine eigene, konfigurierbare, temporäre Salesforce-Umgebung, die Sie schnell in Betrieb nehmen können, wenn Sie ein neues Projekt, einen Feature-Branch oder einen Feature-Test starten.

Ein Developer Hub (Dev Hub) ist die zentrale Salesforce-Organisation, die Sie und Ihr Team zur Erstellung und Verwaltung Ihrer Testorganisationen nutzen.

Wenn Sie in Ihrer Organisation einen Dev Hub einmal aktiviert haben, können Sie ihn nicht wieder deaktivieren.

1. Starten Sie Ihren Trailhead Playground.
   
2. Klicken Sie auf Setup () und wählen Sie Setup aus.
   
3. Geben Sie unter "Setup" im Feld "Quick Find" (Schnellsuche) den Text Dev Hub ein und wählen Sie Dev Hub aus.
   
4. Klicken Sie auf den Schieberegler, um "Dev Hub" zu aktivieren.
   

Das war's schon. Sie haben Ihren Dev Hub mit aktivierten Lightning-Webkomponenten eingerichtet und die benötigten Tools heruntergeladen, installiert und konfiguriert. Im nächsten Schritt erstellen Sie mit diesen Tools Ihre erste Lightning-Webkomponente.