Création d’un composant Web Lightning

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.

Au cours de cette étape, vous apprenez à utiliser les outils que vous avez installés.

Création d’un projet Salesforce DX

Toute interaction avec une organisation à l’aide de Salesforce CLI se fonde sur un projet Salesforce DX. Un projet se compose de plusieurs fichiers de configuration locaux et du code que vous souhaitez déployer. Chez Salesforce, nous parlons de « métadonnées de code », qui constituent le fondement de Salesforce Platform. Si vous débutez avec Salesforce, consultez le parcours Développeur de plate-forme débutant pour en savoir plus sur notre approche axée sur les métadonnées.

Pour créer un projet :

1. Ouvrez Visual Studio Code.
   
2. Appuyez sur Cmd + Maj + P sous macOS ou Ctrl + Maj + P sous Windows ou Linux, puis saisissez create project (créer un projet).
   
3. Sélectionnez SFDX: Create Project (Créer un projet), puis appuyez sur Entrée.
   
4. Laissez la sélection de type de projet par défaut Standard telle quelle et appuyez sur Enter (Entrée).
   
5. Saisissez trailhead comme nom de projet, puis appuyez sur Entrée.
   
6. Choisissez le répertoire de destination du projet sur votre ordinateur local. Cliquez sur Create Project (Créer un projet).
   

Fantastique ! Vous venez de créer votre premier projet Salesforce DX pour travailler avec des composants Web Lightning. Visual Studio Code ouvre automatiquement le nouveau projet.

Autorisation de votre Dev Hub

L’étape suivante consiste à autoriser un Dev Hub. Si vous utilisez un Trailhead Playground, consultez l’unité Obtenir votre nom d’utilisateur et mot de passe Trailhead Playground pour savoir comment obtenir vos identifiants pour l’étape suivante.

1. Dans Visual Studio Code, appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux.
   
2. Saisissez sfdx.
   
3. Sélectionnez SFDX: Authorize a Dev Hub (SFDX : Autoriser un Dev Hub).
   
4. Saisissez trailheadOrg comme alias de l’organisation et appuyez sur Entrée.
   
5. Connectez-vous avec les identifiants de votre organisation Dev Hub.
   
6. Cliquez sur Allow (Autoriser).
   
   
7. Une fois que vous vous êtes authentifié dans le navigateur, la CLI enregistre vos identifiants Dev Hub. Le message de réussite doit ressembler à ce qui suit :
   
   

L’autorisation de Dev Hub est une condition préalable à la création d’une organisation test, qui est un environnement de développement éphémère sur Salesforce Platform. Nous en créerons une à la prochaine étape.

Activation de Local Dev

Avant de créer une organisation test, activez Local Dev dans le fichier de configuration JSON de votre projet. Suivez ces étapes.

1. Dans votre projet SFDX, ouvrez le fichier config/project-scratch-def.json.
   
2. Dans la section lightningExperienceSettings du fichier, ajoutez la clé "enableLightningPreviewPref" et définissez-la sur true (vrai).
   
3. Enregistrez le fichier.
   

Voici comment votre code doit être imbriqué :

{
  "orgName": "My Company",
  "edition": "Developer",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

Le processus d’activation de Local Dev pour une organisation Sandbox est différent. Il nécessite quelques configurations dans Setup (Configuration), que vous pouvez découvrir ici.

Création d’une organisation test

1. Dans Visual Studio Code, cliquez sur Cmd + Maj + P sous macOS ou Ctrl + Maj + P sous Windows ou Linux, puis saisissez focus terminal et sélectionnez Terminal : Focus Terminal.
   
2. Dans votre terminal, saisissez sf org create scratch --definition-file config/project-scratch-def.json --alias scratchOrg --target-dev-hub trailheadOrg et appuyez sur Entrée.
   Cette commande CLI crée une organisation test en utilisant votre fichier project-scratch-def.json et l’alias scratchOrg. Patientez un instant. La création d’une organisation test peut prendre un moment. Vous devriez voir cette sortie dans votre terminal si l’organisation test est créée avec succès.
   
   

Vous voilà prêt à développer votre premier composant Web Lightning. Consultez le module Développement d’application avec Salesforce DX pour en savoir plus sur Salesforce DX.

Création d’un composant Web Lightning

Le processus de création d’un composant Web Lightning est simple. Par ailleurs, Salesforce CLI a déjà créé une structure de projet qui facilite encore plus le démarrage.

La structure de dossiers ressemble à ceci :

Le projet que nous avons créé comprend un dossier spécial : force-app/main/default. Ce dossier, appelé répertoire de package, contient toutes les métadonnées pour votre projet Salesforce DX actuel. Les composants Web Lightning étant également des métadonnées, ils sont stockés dans un sous-dossier nommé lwc. L’étape suivante consiste à ajouter un composant Web Lightning à ce dossier.

Le dossier lwc contient deux autres fichiers (.eslintrc et jsconfig.json). Nous les examinerons un peu plus tard.

Nous pouvons utiliser Visual Studio Code pour créer un composant Web Lightning, comme nous l’avons fait pour créer le projet Salesforce DX. (Vous pourriez utiliser Salesforce CLI directement, mais nous allons maintenant l’utiliser via le terminal intégré dans Visual Studio Code.)

1. Ouvrez Visual Studio Code.
   
2. Dans Visual Studio Code, cliquez sur Cmd + Maj + P sous macOS ou Ctrl + Maj + P sous Windows ou Linux, puis saisissez focus terminal et sélectionnez Terminal : Focus Terminal.
   
3. Dans l’onglet Terminal, saisissez sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc et appuyez sur Entrée.
   

Cela crée les fichiers pour votre premier composant Web Lightning.

Il s’agit des paramètres que vous avez utilisés dans la commande.

• -n définit le nom du dossier du composant Web Lightning et de ses fichiers.
  
• -d définit le répertoire cible dans lequel le composant Web Lightning doit être créé. Le répertoire cible doit être nommé lwc.
  
• --type indique que vous souhaitez créer un composant Web Lightning.
  

Ajout de code et de métadonnées à votre premier composant Web Lightning

Examinons maintenant les fichiers qui constituent un composant Web Lightning. Pour cela, vous allez copier et coller du code HTML, JavaScript et XML que nous vous avons préparé. Commençons par le fichier myFirstWebComponent.js-meta.xml.

1. Ouvrez le dossier myFirstWebComponent, que vous venez de créer dans le sous-dossier lwc.
   
2. Cliquez sur myFirstWebComponent.js-meta.xml.
   
3. Remplacez le contenu de ce fichier par le balisage XML suivant :
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>51.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__RecordPage</target>
          <target>lightning__HomePage</target>
      </targets>
      <targetConfigs>
          <targetConfig targets="lightning__AppPage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
          <targetConfig targets="lightning__RecordPage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
          <targetConfig targets="lightning__HomePage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
      </targetConfigs>
   </LightningComponentBundle>

   Copy
4. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

Vous venez de mettre à jour le fichier de définition des métadonnées. Il contient plusieurs éléments de configuration qui contrôlent, par exemple, les endroits où vous pouvez l’ajouter à l’interface utilisateur de Salesforce à l’aide du générateur d’application Lightning (cibles). Consultez la documentation pour en savoir plus sur les options de configuration des métadonnées.

L’étape suivante consiste à mettre à jour le fichier JavaScript de votre composant Web Lightning.

Le code JavaScript et le balisage HTML que vous êtes sur le point de copier et coller comportent des erreurs. Ne vous inquiétez donc pas des vagues rouges que vous verrez. Vous corrigerez ces erreurs un peu plus tard en combinant les fonctionnalités de Visual Studio Code et l’extension Salesforce composants Web Lightning.

1. Dans Visual Studio Code, cliquez sur myFirstWebComponent.js.
   
2. Remplacez tout le contenu de ce fichier par le code suivant :
   

   import { LightningElement } from 'lwc';
   export default class MyFirstWebComponent extends LightningElement {
       @track
       contacts = [
           {
               Id: 1,
               Name: 'Amy Taylor',
               Title: 'VP of Engineering',
           },
           {
               Id: 2,
               Name: 'Michael Jones',
               Title: 'VP of Sales',
           },
           {
               Id: 3,
               Name: 'Jennifer Wu',
               Title: 'CEO',
           },
       ];
   }

   Copy
3. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

Après avoir enregistré le fichier, vous remarquerez immédiatement certaines choses.

• Le mot annoté @track est souligné d’une vague rouge.
  
• La couleur du nom de fichier JavaScript est devenue rouge dans l’explorateur.
  

Selon votre configuration, vous verrez peut-être une seule erreur.

Il s’agit de deux indications que quelque chose ne va pas dans le code JavaScript. Tout bon développeur corrigerait ces erreurs immédiatement.

Néanmoins, vous pouvez les ignorer pour l’instant. Ajoutez plutôt un balisage HTML au fichier de modèle de composants Web.

1. Dans Visual Studio Code, cliquez sur myFirstWebComponent.html.
   
2. Insérez le balisage suivant entre les balises <template></template> existantes :
   

   <lightning-card title="ContactInformation" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
         <template for:each={} for:item="contact">
            <div>
               {contact.Name}, {contact.Title}
            </div>
         </template>
      </div>
   </lightning-card>

   Copy
3. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

Encore une fois, vous voyez une indication que quelque chose ne va pas dans le balisage HTML.

Ignorons cela (pour l’instant).

Normalement, l’étape suivante consiste à déployer votre projet dans votre organisation. Le code étant truffé d’erreurs, le déploiement échouerait dans ce cas. Vous pourriez ou non rencontrer des échecs de déploiement. Il est important de prêter attention à toutes les erreurs affichées dans l’IDE et de les corriger immédiatement.

À l’étape suivante, nous corrigeons notre code.