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 :
   
   
   
   
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 ? Et pourquoi l’autre message était-il précédé de la mention [eslint] ?

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 en question indiquait [no-undef]. Cela signifie que vous aviez défini une propriété, dans ce cas le suivi des décorateurs (track), mais sans l’avoir déclarée auparavant. 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": "plugin:@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 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, IntelliSense pour les expressions dans le balisage HTML. L’extension 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, par exemple, il vous manque un attribut requis, l’IDE vous le signalera.

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
   
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 par défaut, saisissez la commande suivante dans l’onglet Terminal :
   sf org open
   
2. Appuyez sur Entrée.
   

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. Saisissez Component Developers (Développeurs de composants) comme nom de compte, puis cliquez sur Save (Enregistrer).
   
3. Cliquez sur l’icône d’engrenage de configuration (), puis sélectionnez Edit Page (Modifier la page) pour ouvrir le générateur d’application Lightning.
   
4. Faites glisser le composant myFirstWebComponent sur la page.
   
5. Cliquez sur Save (Enregistrer), puis sur Activate (Activer).
   
6. Cliquez sur Assign as Org Default (Attribuer en tant qu’organisation par défaut), puis sur Next (Suivant) et sur Save (Enregistrer).
   
7. Cliquez sur Back (Retour) () pour revenir à l’enregistrement du compte.
   

Nous avons terminé ! Ce projet vous a montré comment installer et utiliser les outils recommandés pour développer des composants Web Lightning. De plus, vous avez appris à copier et coller du code contenant des erreurs (à éviter par la suite).

Nous ne pouvons pas vérifier votre travail dans une organisation test, mais vous pouvez toujours cliquer sur Verify Step (Vérifier l’étape) afin de gagner le badge. Consultez ensuite la galerie d’exemples Trailhead et les recettes de composants Web Lightning pour voir d’autres exemples de code afin d’apprendre à développer d’excellents composants Web Lightning.