Objectifs

• Comprendre ce que sont les Lightning Web Components (LWC) et pourquoi ils sont utilisés.
• Apprendre à créer un projet LWC de base.
• Découvrir la structure d’un composant LWC.
• Apprendre à déployer et tester un composant LWC dans Salesforce.

Prérequis

• Un compte Salesforce. Vous pouvez en créer un gratuitement sur Salesforce Developer.
• Connexion à votre compte Salesforce.
• Node.js et npm installés sur votre machine.
• Salesforce CLI installé. Vous pouvez le télécharger ici.

1. Qu’est-ce que les Lightning Web Components (LWC) ?

Les Lightning Web Components (LWC) sont une nouvelle norme pour le développement d’interfaces utilisateur sur la plateforme Salesforce. Ils utilisent des standards Web modernes (JavaScript, HTML, CSS) pour offrir des performances élevées et une meilleure expérience utilisateur.

Principales caractéristiques de LWC :

• Performance : Utilisation de standards Web natifs pour des performances améliorées.
• Modularité : Composants réutilisables et encapsulés.
• Facilité d’intégration : Intégration native avec Salesforce et autres frameworks Lightning.

2. Configuration de l’environnement de développement

Installer Salesforce CLI

1. Téléchargez et installez Salesforce CLI depuis Salesforce CLI.
2. Après l’installation, vérifiez l’installation en exécutant :

   sfdx --version

Authentification dans votre organisation Salesforce

1. Ouvrez un terminal ou une invite de commande et exécutez :

   sfdx auth:web:login -d -a DevHub

2. Une fenêtre de navigateur s’ouvre. Connectez-vous à votre compte Salesforce et autorisez l’accès.

3. Création d’un projet Lightning Web Components

1. Créer un nouveau projet LWC :

   sfdx force:project:create -n lwc-demo
   cd lwc-demo

2. Créer un scratch org pour le développement :

   sfdx force:org:create -s -f config/project-scratch-def.json -a lwc-demo-org

3. Ouvrir le scratch org :

   sfdx force:org:open

4. Création d’un composant LWC

1. Créer un composant LWC :

   sfdx force:lightning:component:create -n helloWorld -d force-app/main/default/lwc

Structure d’un composant LWC

Après avoir créé le composant, vous verrez les fichiers suivants dans le répertoire force-app/main/default/lwc/helloWorld :

• helloWorld.html : Le fichier de balisage du composant.
• helloWorld.js : Le fichier JavaScript du composant.
• helloWorld.js-meta.xml : Le fichier de configuration du composant.

Modifier le composant

2. Modifier helloWorld.html :

   <template>
       <h1>Hello, Salesforce World!</h1>
   </template>

3. Modifier helloWorld.js (aucun changement nécessaire pour ce tutoriel de base) :

   import { LightningElement } from 'lwc';

   export default class HelloWorld extends LightningElement {}

4. Déployer le composant dans le scratch org :

   sfdx force:source:push

5. Ajouter le composant LWC à une application

Créer une application Lightning

1. Accéder au Lightning App Builder dans votre scratch org Salesforce.
2. Créer une nouvelle application Lightning :

• Cliquez sur App Launcher (Lanceur d’application) puis View All (Voir tout).
• Cherchez Lightning App Builder et cliquez dessus.
• Cliquez sur New (Nouveau) pour créer une nouvelle application.
• Sélectionnez App Page et cliquez sur Next.
• Donnez un nom à votre application, par exemple “HelloWorldApp”, et cliquez sur Next.
• Choisissez la mise en page et cliquez sur Finish (Terminer).

Ajouter le composant à l’application

1. Ajouter le composant helloWorld à la page :

• Dans le Lightning App Builder, trouvez votre composant helloWorld dans la liste des composants personnalisés.
• Glissez-déposez le composant sur la page.
• Enregistrez et activez la page.

1. Visualiser l’application :

• Ouvrez l’application en accédant à l’URL de l’application ou en utilisant le App Launcher.

Conclusion

Vous avez maintenant appris les bases de la création et de la gestion des Lightning Web Components (LWC) dans Salesforce. Vous savez comment configurer votre environnement de développement, créer un projet LWC, développer un composant simple, et déployer ce composant dans Salesforce. Avec ces compétences, vous pouvez commencer à créer des interfaces utilisateur modernes et performantes sur la plateforme Salesforce.