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:
   

@track
c:\Git\set-up-lwc-dev-tools\myFirstWebComponent.js: LWC1102: Invalid ‘track’ decorator usage.
Supported decorators (api, wire, track) should be imported from “lwc” lwc

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?

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 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": ["@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 sehen Sie Intellisense in Ausdrücken 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 das vorhandene 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 --target-org scratchOrg
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 Ihre Testorganisation zu öffnen:
   sf org open --target-org scratchOrg
2. Drücken Sie die Eingabetaste.
   

Local Dev (Lokale Entw.) ist für Ihre Testorganisation aktiviert. Sie sehen allerdings erst dann eine Echtzeitvorschau, wenn Sie den CLI-Befehl von Local Dev (Lokale Entw.) ausführen, womit wir uns in Kürze befassen.

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.
   
3. Geben Sie Component Developers als Accountnamen ein und klicken Sie dann auf Save (Speichern).
   
4. Klicken Sie auf Setup () und wählen Sie Edit Page (Seite bearbeiten) aus, um Lightning App Builder (Lightning-Anwendungsgenerator) zu öffnen.
   
5. Ziehen Sie die Komponente myFirstWebComponent (unter Custom (Benutzerdefiniert)) auf die Seite.
   
6. Klicken Sie in der Menüleiste von Lightning App Builder (Lightning-Anwendungsgenerator) auf Desktop, um ein Dropdown-Menü zu öffnen, und wählen Sie dann Phone (Telefon) aus.
   
7. Ziehen Sie die Komponente myFirstWebComponent erneut auf die Seite.
   
8. Klicken Sie auf Save (Speichern) und dann auf Activate (Aktivieren).
   
9. Klicken Sie auf Assign as Org Default (Als Organisationsstandard zuweisen) und wählen Sie Desktop and phone (Desktop und Telefon) aus.
   
10. Klicken Sie auf Next (Weiter) und dann auf Save (Speichern).
    
11. Klicken Sie auf "Back" (Zurück) (), um zum Accountdatensatz zurückzukehren.
    Ihre Lightning-Webkomponente sollte jetzt etwa so aussehen:
    
    

Im nächsten und letzten Schritt erfahren Sie, wie Sie mithilfe von CLI-Tools von Local Dev (Lokale Entw.) eine lokale Vorschau Ihrer Lightning-Anwendung in Ihrem Browser ausführen.

Wir können Ihre Arbeit in einer Testorganisation zwar nicht prüfen, Sie können aber trotzdem auf Verify Step (Schritt überprüfen) klicken, um zum nächsten Schritt im Projekt zu gelangen.