Create a Lightning Web Component

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.

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

Au cours de cette étape, vous apprendrez à 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 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 parcours Développeur de plate-forme débutant pour en savoir plus sur notre approche axée sur les métadonnées.

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

Ouvrez Visual Studio Code.
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.
Laissez la sélection de type de projet par défaut Standard telle quelle et appuyez sur Enter (Entrée).
Saisissez trailhead comme nom de projet, puis appuyez sur Entrée.
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.

Dans Visual Studio Code, appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux.
Saisissez sfdx.
Sélectionnez SFDX: Authorize a Dev Hub (SFDX : Autoriser un Dev Hub).
Connectez-vous avec les identifiants de votre organisation Dev Hub.
Cliquez sur Allow (Autoriser).
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’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

Dans Visual Studio Code, appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux.
Saisissez sfdx.
Sélectionnez SFDX: Create a Default Scratch Org... (SFDX: Créer une organisation test par défaut).
Appuyez sur Entrée pour accepter le fichier par défaut project-scratch-def.json.
Appuyez sur Entrée pour accepter l’alias de l’organisation test par défaut Trailhead.
Appuyez sur Entrée pour accepter la durée de l’organisation test par défaut de sept jours.

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 :

Vue du projet Salesforce DX dans l’explorateur de fichiers de Visual Studio Code affichant les sous-répertoires, dont .sfdx, .vscode, config et force-app

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.

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

Ouvrez Visual Studio Code.
Appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux.
Saisissez focus terminal et sélectionnez Terminal: Focus Terminal.
L’onglet Terminal (à côté de Output [Sortie]) est sélectionné.
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 nécessaires pour votre premier composant Web Lightning.

Structure du répertoire de métadonnées avec dossier du composant Web Lightning développé

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.

Comme vous l’avez constaté, il est facile d’utiliser l’interface de ligne de commande Salesforce 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, 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.

Ouvrez le dossier myFirstWebComponent que vous venez de créer dans le sous-dossier lwc.
Cliquez sur myFirstWebComponent.js-meta.xml.

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

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.

Dans Visual Studio Code, cliquez sur myFirstWebComponent.js.

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',
        },
    ];
}

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.

Selon votre configuration, vous ne verrez peut-être qu’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.

Dans Visual Studio Code, cliquez sur myFirstWebComponent.html.

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>

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.

Fichier de modèle HTML ouvert avec indication d’une erreur à la ligne 4

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

Dans la toute dernière étape, nous corrigeons notre code.