Analyse et déploiement d’un code dans l’organisation

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Vous avez installé les outils recommandés pour le développement de composants Web Lightning. Vous avez aussi copié et collé du code défectueux qui aboutirait à un échec du déploiement. Vous diriez probablement que vous n’aviez jamais fait cela dans la vie réelle avant, non ?

Correction des erreurs dans JavaScript

En tant que développeur, votre tâche la plus importante, après une recherche sur le Web pour trouver du code (qui fonctionne), consiste à écrire vous-même du code fonctionnel. Corrigeons les erreurs que nous avons introduites auparavant, en commençant par le fichier JavaScript.

1. Ouvrez Visual Studio Code.
   
2. Cliquez sur myFirstWebComponent.js.
   
3. Survolez le mot track, qui est souligné en rouge. Vous verrez apparaître les messages liés à cette erreur spécifique :
   

@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. Cliquez sur l’onglet Problems (Problèmes) pour afficher toutes les erreurs qui figurent dans les fichiers actuellement ouverts. Une page semblable à la suivante s'affiche :
   

Le fichier actuel et l’onglet Problems (Problèmes) affichent tous deux les erreurs détectées dans votre code.

Le premier message d’erreur indique que le problème provient d’une exigence du moteur Composants Web Lightning. Ces erreurs incluent la mention « LWC » suivie d’un numéro. Si vous examinez attentivement le code, vous verrez sur la première ligne que nous importons LightningElement à partir du moteur lwc, mais que nous n’importons pas track. Corrigeons ce problème :

• Cliquez juste après le mot LightningElement (entre les accolades).
  
• Saisissez track. Pensez bien à séparer les deux mots par une virgule. Votre code devrait ressembler à ceci :
  import { LightningElement, track } from 'lwc';
• Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
  

Les deux erreurs et les lignes rouges disparaissent.

Par défaut, l’IDE valide le contenu d’un fichier au fil de la saisie. Vous pouvez définir votre préférence de validation dans Visual Studio Code : au fil de la saisie ou après l’enregistrement du fichier.

Attendez une minute… Pourquoi les deux erreurs ont-elles disparu ?

L’extension composants Web Lightning est livrée par défaut avec ESLint. ESLint est un outil lint très répandu qui évalue le code pour détecter les erreurs, les meilleures pratiques d’écriture, etc. Salesforce vous fournit des règles ESLint spécifiques prêtes à l’emploi afin que vous puissiez écrire du code de qualité en tant que développeur de composants Web Lightning. De plus, si vous faites une erreur, les règles lint vous aident à la détecter avant de déployer votre code. Génial, non ?

Le message d’erreur ci-dessus indique que vous avez défini une propriété, dans ce cas le décorateur track, mais que vous ne l’avez pas déclarée avant de l’utiliser. C’est l’une des nombreuses règles lint extrêmement utiles qui vous aident à maintenir votre code propre et gérable.

Vous souvenez-vous du fichier .eslintrc ajouté automatiquement au dossier de métadonnées lwc ? Il s’agit du fichier de configuration, qui définit les règles lint spécifiques de Salesforce :

{
   "extends": ["@salesforce/eslint-config-lwc/recommended"]
}

Salesforce fournit différents ensembles de règles, notamment les règles de base, recommandées et étendues. Ces règles lint étant propres à un projet, vous pouvez utiliser différents ensembles de règles pour différents projets.

Lorsque vous déployez des composants Web Lightning, Salesforce compare automatiquement votre code à la règle lint @salesforce/eslint-config-lwc/base. Gardez cela à l’esprit si vous reconfigurez vous-même les règles lint.

Pour en savoir plus sur ESLint ou sur les règles lint fournies par Salesforce, consultez le référentiel GitHub.

Maintenant que nous avons un fichier JavaScript fonctionnel, corrigeons le balisage HTML dans votre modèle de composant Web.

Correction des erreurs dans un modèle HTML

Maintenant que vous avez corrigé les erreurs dans le fichier JavaScript, vous allez apprendre à utiliser la fonctionnalité IntelliSense de Visual Studio Code conjointement avec l’extension Salesforce composants Web Lightning.

1. Ouvrez le fichier myFirstWebComponent.html dans Visual Studio Code.
   
2. Placez le curseur dans les accolades vides de l’attribut for:each souligné en rouge.
   
3. Appuyez sur Ctrl + Espace. Le menu déroulant IntelliSense s’affiche.
   

4. Sélectionnez contact et appuyez sur Enter (Entrée) pour insérer contact.
   
5. Ajoutez un s afin que contact soit au pluriel : contacts.
   
6. Ensuite, ajoutez à la balise div marquée en rouge l’attribut suivant : key={contact.Id}
7. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

Votre code doit se présenter comme suit :

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

Vous avez observé deux choses en corrigeant le code.

Premièrement, vous voyez IntelliSense pour les expressions dans le balisage HTML. L’extension Lightning Web Components (Composants Web Lightning) intègre IntelliSense, ce qui signifie que si vous ajoutez d’autres propriétés ou fonctions à votre fichier JavaScript, elles seront automatiquement disponibles dans le fichier de modèle. C’est un gain de temps considérable !

Deuxièmement, vous avez expérimenté la validation à la volée du code ou, dans ce cas, du balisage. C’est la même chose que dans le fichier JavaScript. Si un attribut requis est manquant par exemple, l’IDE vous l’indiquera.

Vous bénéficiez également d’IntelliSense sur tous les composants Lightning de base dans votre fichier de modèle. Quand vous commencez à saisir <lightning, vous obtenez une liste de ce genre.

De plus, lorsque vous survolez le balisage existant, l’extension vous fournit des informations détaillées sur le composant de base sélectionné.

Une installation obsolète de Salesforce CLI peut entraîner l’apparition de messages d’avertissement concernant le code ou les jetons. Le code du composant généré par la CLI est à jour uniquement si votre installation de la CLI l’est également. SLDS Validator (Validateur SLDS), qui est l’une des composantes du Salesforce Extensions Pack (Pack d’extensions Salesforce), signale le code obsolète. Une ancienne version de la CLI est donc susceptible d’entraîner l’affichage de davantage d’avertissements.

Pour ce badge, vous pouvez ignorer les avertissements relatifs aux jetons de conception, car ils ne vous empêcheront pas de terminer les étapes. Cependant, en dehors de ce badge, vous devez examiner tous les messages d’avertissement et maintenir Salesforce CLI à jour.

Déploiement et configuration du nouveau composant Web Lightning

Maintenant que votre code est entièrement corrigé, il est temps de transmettre vos métadonnées locales à votre organisation test.

1. Pour déployer les métadonnées dans votre organisation, saisissez la commande suivante dans l’onglet Terminal :
   sf project deploy start --target-org scratchOrg
2. Appuyez sur Entrée.
   

Une fois vos métadonnées transmises avec succès à votre organisation test, vous pouvez ajouter le composant à la présentation d’enregistrement du compte.

1. Pour ouvrir l’organisation test, saisissez cette commande dans l’onglet Terminal :
   sf org open --target-org scratchOrg
2. Appuyez sur Entrée.
   

Local Dev est activé pour votre organisation test. Cependant, vous n’avez pas un aperçu en temps réel tant que vous n’exécutez pas la commande Local Dev CLI, à laquelle nous arriverons bientôt.

Maintenant, configurons la page d’enregistrement Account (Compte).

1. Dans le lanceur d’application (), cherchez et sélectionnez Sales (Vente).
   
2. Cliquez sur l’onglet Accounts (Comptes), puis sélectionnez New (Nouveau) pour créer un compte.
   
3. Saisissez Component Developers (Développeurs de composants) comme nom de compte, puis cliquez sur Save (Enregistrer).
   
4. Cliquez sur Setup (Configuration) (), puis sélectionnez Edit Page (Modifier la page) pour ouvrir Lightning App Builder (Générateur d’application Lightning).
   
5. Faites glisser le composant myFirstWebComponent (sous Custom [Personnalisé]) sur la page.
   
6. Dans la barre de menu de Lightning App Builder (Générateur d’application Lightning), cliquez sur Desktop (Ordinateur de bureau) pour ouvrir un menu déroulant, puis sélectionnez Phone (Téléphone).
   
7. Encore une fois, faites glisser le composant myFirstWebComponent sur la page.
   
8. Cliquez sur Save (Enregistrer), puis sur Activate (Activer).
   
9. Cliquez sur Assign as Org Default (Attribuer par défaut pour l’organisation), puis sélectionnez Desktop and phone (Ordinateur de bureau et téléphone).
   
10. Cliquez sur Next (Suivant), puis sur Save (Enregistrer).
    
11. Cliquez sur Back (Retour) () pour revenir à l’enregistrement du compte.
    Votre composant Web Lightning devrait ressembler à ceci :
    
    

À l’étape suivante, qui est la dernière, vous apprenez comment exécuter un aperçu local de votre application Lightning dans votre navigateur en utilisant les outils Local Dev CLI.

Nous ne pouvons pas vérifier votre travail dans une organisation test, mais vous pouvez toujours cliquer sur Vérifier l’étape pour passer à l’étape suivante du projet.