Analysieren Ihres Codes und Bereitstellen in Ihrer 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 die Tools installiert, die wir für die Entwicklung von Lightning-Webkomponenten empfehlen. Und Sie haben fehlerhaften Code kopiert und eingefügt, von dem wir wissen, dass er zu einer fehlgeschlagenen Bereitstellung führen würde. Sie würden wahrscheinlich sagen, dass Sie das noch nie im wirklichen Leben getan haben, oder?

Korrigieren von JavaScript-Fehlern

Die wichtigste Aufgabe eines Entwicklers nach der Suche im Web nach hoffentlich funktionierendem Code ist, selbst funktionierenden Code zu schreiben. Lassen Sie uns die Fehler beheben, die wir zuvor eingebaut haben, und zwar zunächst in der JavaScript-Datei.

1. Öffnen Sie Visual Studio Code.
   
2. Klicken Sie auf myFirstWebComponent.js.
   
3. Bewegen Sie den Mauszeiger über dem rot unterstrichenen Wort track. Dadurch werden die Fehlermeldungen zu diesem spezifischen Fehler angezeigt:
   
   
   
   
4. Klicken Sie auf die Registerkarte Problems (Probleme), um alle Fehler in den aktuell geöffneten Dateien anzuzeigen. Die Anzeige sollte etwa wie folgt aussehen:
   
   
   

Sowohl in der aktuellen Datei als auch auf der Registerkarte "Problems (Probleme)" werden die in Ihrem Code gefundenen Fehler gezeigt.

Die erste Fehlermeldung besagt, dass es sich um das Ergebnis einer Anforderung der Engine von Lightning-Webkomponenten handelt. Solche Fehler enthalten "LWC", gefolgt von einer Zahl. Wenn Sie sich den Code genauer ansehen, erkennen Sie in der ersten Zeile, dass wir LightningElement aus der lwc-Engine importieren, aber nicht track. Lassen Sie uns das beheben:

• Klicken Sie direkt hinter dem Wort LightningElement (in den geschweiften Klammern).
  
• Geben Sie track ein und vergessen Sie nicht, die beiden Wörter durch ein Komma zu trennen. Ihr Code sollte wie folgt aussehen:
  import { LightningElement, track } from 'lwc';
  
• Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.
  

Beide Fehler und die roten Linien verschwinden.

Die IDE überprüft standardmäßig während Ihrer Eingabe den Inhalt einer Datei. Sie können in Visual Studio Code als Voreinstellung festlegen, ob diese Überprüfung während der Eingabe oder nach dem Speichern einer Datei erfolgen soll.

Aber warten Sie, warum sind eigentlich beide Fehler verschwunden? Und warum wurde der anderen Fehlermeldung [eslint] vorangestellt?

ESLint gehört zum Standardumfang der Erweiterung "Lightning-Webkomponenten". ESLint ist ein weit verbreitetes Lint-Tool, das Code auf Fehler, bewährte Verfahren zur Programmierung und vieles mehr überprüft. Salesforce bietet Ihnen als Entwickler von Lightning-Webkomponenten spezifische ESLint-Regeln, mit deren Hilfe Sie großartigen Code schreiben können. Und wenn Sie einen Fehler begehen, helfen Ihnen die Lint-Regeln, ihn zu erkennen, bevor Sie Ihren Code bereitstellen. Das ist echt praktisch, oder?

Die obige Fehlermeldung lautete [no-undef]. Diese Fehlermeldung bedeutet, dass Sie eine Eigenschaft definiert haben, in diesem Fall das Decorator-Element track, ohne sie vorher deklariert zu haben. Dies ist eine von vielen überaus hilfreichen Lint-Regeln, die Ihnen helfen, Ihren Code klar und verwaltbar zu halten.

Erinnern Sie sich an die Datei .eslintrc, die dem Metadatenordner lwc automatisch hinzugefügt wurde? Dies ist die Konfigurationsdatei, in der die Salesforce-spezifischen Lint-Regeln definiert sind:

{

   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"

}

Salesforce bietet verschiedene Regelsätze, so z. B. base, recommended und extended. Da diese Lint-Regeln projektspezifisch sind, können Sie für verschiedene Projekte unterschiedliche Regelsätze verwenden.

Wenn Sie Lightning-Webkomponenten bereitstellen, gleicht Salesforce Ihren Code automatisch mit der Lint-Regel @salesforce/eslint-config-lwc/base ab. Denken Sie daran, wenn Sie die Lint-Regeln selbst neu konfigurieren.

Im zugehörigen GitHub-Repository finden Sie weitere Informationen zu ESLint oder den von Salesforce bereitgestellten Lint-Regeln.

Nun, da wir über eine funktionierende JavaScript-Datei verfügen, lassen Sie uns das HTML-Markup in Ihrer Webkomponentenvorlage korrigieren.

Korrigieren von Fehlern in der HTML-Vorlage

Nachdem Sie die Fehler in der JavaScript-Datei behoben haben, erfahren Sie, wie Sie die Funktion IntelliSense von Visual Studio Code in Verbindung mit der Erweiterung "Salesforce-Webkomponenten" verwenden können.

1. Öffnen Sie in Visual Studio Code myFirstWebComponent.html.
   
2. Platzieren Sie den Cursor zwischen den leeren geschweiften Klammern des rot unterstrichenen Attributs for:each.
   
3. Drücken Sie Strg+Leertaste. Das Dropdown-Menü "IntelliSense" wird angezeigt.
   
   
   
4. Wählen Sie contact aus und drücken Sie die Eingabetaste, um contact einzufügen.
   
5. Fügen Sie ein s hinzu, um "contact" in den Plural zu setzen: contacts.
   
6. Fügen Sie als Nächstes dieses Attribut zum rot markierten Tag div hinzu: key={contact.Id}
   
7. Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.
   

Ihr Code sollte wie folgt aussehen.

<lightning-card title="ContactInformation" icon-name="custom:custom14">

   <div class="slds-m-around_medium">

      <template for:each={contacts} for:item="contact">

         <div key={contact.Id}>

            {contact.Name}, {contact.Title}

         </div>

      </template>

   </div>

</lightning-card>

Bei der Korrektur des Codes haben Sie zwei Dinge beobachtet.

Erstens IntelliSense für Ausdrücke innerhalb des HTML-Markups. Die Erweiterung "Lightning-Webkomponenten" bietet IntelliSense-Funktionen, was bedeutet, dass, wenn Sie Ihrer JavaScript-Datei weitere Eigenschaften oder Funktionen hinzufügen, diese automatisch für Sie in der Vorlagendatei verfügbar sind. Das spart sehr viel Zeit!

Zweitens haben Sie die unmittelbare Prüfung von Code, in diesem Fall Markup, kennengelernt. Es passiert das Gleiche wie in der JavaScript-Datei. Wenn beispielsweise ein erforderliches Attribut fehlt, wird Ihnen dies von der IDE mitgeteilt.

Sie erhalten außerdem IntelliSense-Funktionen für alle Lightning-Basiskomponenten in Ihrer Vorlagendatei. Wenn Sie mit der Eingabe von <lightning beginnen, erhalten Sie eine Liste wie diese.

Und wenn Sie den Mauszeiger über vorhandenem Markup bewegen, liefert Ihnen die Erweiterung umfangreiche Informationen zur ausgewählten Basiskomponente.

Eine Ursache für Warnmeldungen zu Code oder Token ist eine veraltete Installation von Salesforce CLI. Der von CLI generierte Komponentencode ist nur so aktuell wie Ihre CLI-Installation. SLDS Validator (ein Teil des Salesforce Extensions Pack) kennzeichnet veralteten Code, so dass eine ältere CLI wahrscheinlich zu mehr Warnungen führt.

Bei diesem Badge können Sie Designtoken-Warnungen ignorieren, da sie nicht verhindern, dass Sie die Schritte abschließen. Außerhalb dieses Badges sollten Sie jedoch alle Warnmeldungen prüfen und Salesforce CLI auf dem neuesten Stand halten.

Bereitstellen und Konfigurieren Ihrer neuen Lightning-Webkomponente

Nachdem Sie Ihren gesamten Code korrigiert haben, ist es Zeit, Ihre lokalen Metadaten per Push in Ihre Testorganisation zu übertragen.

1. Geben Sie den folgenden Befehl in die Registerkarte "Terminal" ein, um die Metadaten in Ihrer Organisation bereitzustellen:
   sf project deploy start
   
2. Drücken Sie die Eingabetaste.
   

Nachdem Ihre Metadaten erfolgreich per Push in Ihre Testorganisation übertragen wurden, können Sie die Komponente dem Layout von Accountdatensätzen hinzufügen.

1. Geben Sie den folgenden Befehl in die Registerkarte "Terminal" ein, um die Standardtestorganisation zu öffnen:
   sf org open
   
2. Drücken Sie die Eingabetaste.
   

Lassen Sie uns nun die Accountdatensatzseite konfigurieren.

1. Suchen und wählen Sie im App Launcher () Sales (Vertrieb) aus.
   
2. Klicken Sie auf die Registerkarte Accounts und anschließend auf New (Neu), um einen Account zu erstellen. Geben Sie Component Developers als Accountnamen ein und klicken Sie dann auf Save (Speichern).
   
3. Klicken Sie auf das Zahnradsymbol () und wählen Sie Edit Page (Seite bearbeiten) aus, um den Lightning-Anwendungsgenerator zu öffnen.
   
4. Ziehen Sie die Komponente myFirstWebComponent auf die Seite.
   
5. Klicken Sie auf Save (Speichern) und dann auf Activate (Aktivieren).
   
6. Klicken Sie auf Assign as Org Default (Als Organisationsstandard zuweisen), dann auf Next (Weiter) und danach auf Save (Speichern).
   
7. Klicken Sie auf Back (Zurück) (), um zum Accountdatensatz zurückzukehren.
   

Geschafft! In diesem Projekt wurde Ihnen gezeigt, wie Sie die empfohlenen Entwicklertools für die Entwicklung von Lightning-Webkomponenten installieren und einsetzen. Und Sie haben gelernt, wie Sie fehlerhaften Code kopieren und einfügen können (was Sie in Zukunft vermeiden sollten).

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 Sample Gallery und die Rezepte für Lightning-Webkomponenten an, um weitere Codebeispiele zu erhalten und zu erfahren, wie Sie großartige Lightning-Webkomponenten entwickeln können.