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

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 ?

Saviez-vous que vous pouvez bénéficier des connaissances d’un expert ? Regardez cette vidéo pour en apprendre davantage sur les thèmes abordés dans ce projet :

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 ainsi que l’onglet Problems (Problèmes) affichent 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 :

1. Cliquez juste après le mot LightningElement (entre les accolades).
2. Saisissez track. Pensez bien à séparer les deux mots par une virgule. Votre code doit se présenter comme suit :
   import { LightningElement, track } from 'lwc';
3. 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.

Remarque

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.

Remarque

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. Appuyez sur Entrée.
5. Ensuite, ajoutez à la balise div marquée en rouge l’attribut suivant :
   key={contact.Id}.
6. 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é.

Déploiement et configuration du nouveau composant Web Lightning

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

1. Ouvrez Visual Studio Code.
2. Appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux, puis saisissez focus terminal. Appuyez sur Entrée.
3. Saisissez la commande suivante pour déployer les métadonnées dans votre organisation :
   sfdx force:source:push.
4. 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.

Remarque

Vous pouvez également développer des composants Web Lightning pour d’autres organisations que celles de test à l’aide de la commande force:source:deploy. Consultez l’unité Innovez plus rapidement avec les environnements Salesforce et Salesforce DX du module Personnalisation et extension du CRM Salesforce pour en savoir plus au sujet du développement orienté source.

Comme nous sommes déjà dans Visual Studio Code, nous pouvons exploiter une autre fonctionnalité de Salesforce CLI.

1. Accédez au terminal Visual Studio Code.
2. Saisissez la commande suivante, puis appuyez sur Entrée. Cela ouvrira l’organisation test par défaut.
   sfdx force:org:open

Maintenant, configurons la présentation de l’objet Accounts (Comptes).

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

Cliquez sur Verify Step (Vérifier l’étape) pour gagner votre badge. Consultez ensuite la galerie d’exemples Trailhead et les recettes de composants Web Lightning pour voir d’autres exemples et apprendre à développer, à l’aide d’un code, d’excellents composants Web Lightning.