Création d’un composant Web Lightning

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

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 :

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 ainsi que du code que vous souhaitez déployer. Nous parlons de « métadonnées de code », qui constituent le fondement de la plate-forme Salesforce. Si vous débutez avec Salesforce, consultez le module Concepts de base du développement de la plate-forme pour en savoir plus sur notre approche axée sur les métadonnées.

Nous utiliserons Visual Studio Code pour créer un projet.

1. Ouvrez Visual Studio Code.
2. Appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux, puis saisissez create project (créer un projet). Sélectionnez SFDX: Create Project (Créer un projet), puis appuyez sur Entrée.
3. Laissez la sélection de type de projet par défaut Standard telle quelle et appuyez sur Enter (Entrée).
4. Saisissez trailhead comme nom de projet, puis appuyez sur Entrée.
5. 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 ouvrira automatiquement ce nouveau projet.

Autorisation de votre Dev Hub

L’étape suivante consiste à authentifier 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. Connectez-vous avec les identifiants de votre organisation Dev Hub.
5. Cliquez sur Allow (Autoriser).
   
6. Une fois que vous vous êtes authentifié dans le navigateur, la CLI enregistre vos identifiants Dev Hub. Le message de réussite devrait ressembler à ceci :

L’authentification 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.

Création d’une organisation test

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: Create a Default Scratch Org... (SFDX: Créer une organisation test par défaut).
4. Appuyez sur Entrée pour accepter le fichier par défaut project-scratch-def.json.
5. Appuyez sur Entrée pour accepter l’alias de l’organisation test par défaut trailhead.
6. Appuyez sur Entrée pour accepter la durée de l’organisation test par défaut 7 days (7 jours).
7. Soyez patient, car la création d’une organisation test peut prendre un moment. Le message de réussite doit être comme suit dans le panneau de sortie de VS Code :

17:18:11.779 sfdx force:org:create -f config\project-scratch-def.json --setalias trailhead --durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

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

Remarque

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. Nous pouvons également passer directement par Salesforce CLI.

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 sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc et confirmez en appuyant sur Entrée.

Cela crée les fichiers nécessaires 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.

Remarque

Comme vous l’avez constaté, il est facile d’utiliser Salesforce CLI au cours du processus de développement. Si vous préférez passer par Visual Studio Code, cliquez avec le bouton droit sur le dossier lwc ou ouvrez la palette de commandes dans Visual Studio Code. Les deux fournissent l’option SFDX: Create Lightning Web Component (SFDX : Créer un composant Web Lightning), qui invoque ensuite Salesforce CLI.

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, nous allons copier et coller du code HTML, JavaScript et XML que nous avons préparé en amont. Commençons par le fichier myFirstWebComponent.js-meta.xml.

1. Ouvrez le nouveau sous-dossier myFirstWebComponent que nous venons 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>45.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__RecordPage</target>
          <target>lightning__HomePage</target>
      </targets>
   </LightningComponentBundle>

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.

Remarque

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 le contenu de ce fichier par le code suivant :
   

   import { LightningElement } from 'lwc';
   export default class HelloIteration 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',
           },
       ];
   }

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.
• Le fichier JavaScript est devenu rouge dans l’explorateur et le chiffre 2 est inscrit en regard.

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

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-la aussi (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 pouvez ou non rencontrer des échecs de déploiement dans la vie réelle. Il est important de prêter attention à toutes les erreurs affichées dans l’IDE et de les corriger immédiatement.

Nous ne pouvons rien valider pour l’instant. Cliquez donc sur Verify Step (Vérifier l’étape) et passons à la dernière étape, qui consiste à corriger le code.