Pas besoin d’être un Guru technique pour suivre ce tutoriel et installer Visual Studio et SFDX, comme d’habitude vous verrez c’est très simple d’apprendre avec Marcel.
Tutoriel Salesforce Lightning Web Components — Partie 1 — Installation de Visual Studio Code et SFDX CLI
Introduction
On en sait maintenant beaucoup plus sur la stratégie de Salesforce concernant le futur de la plateforme au plan technique. Petit récap si vous êtes restés enfermés sans accès internet depuis quelques mois :
Salesforce Classic est en train de mourir gentiment (et officiellement) depuis la release Winter’20 — voir http://bit.ly/32aNNg5
Les projets de Migration Lightning se multiplient (malheureusement avec des qualités inégales dans la réalisation), choisissez le bon partenaire et allez jusqu’au bout de l’exercice (article à suivre sur le sujet)
Salesforce a procédé par itérations avec les Lightning Components (toujours propriétaires) et a ensuite adopté l’excellente approche de se baser sur les standards qui font le Web de 2019 tel que nous le connaissons (Frameworks Javascript, ES6, propriétés réactives, etc…).
L’avenir de Salesforce se conjugue maintenant avec les meilleures pratiques du World Wide Web
Premièrement on va installer un éditeur de code gratuit et largement utilisé de Microsoft qui s’appelle Visual Studio Code
Etape 1 — Installation de Visual Studio Code
Téléchargez et installez Visual Studio Code à l’adresse suivante : https://code.visualstudio.com/
Téléchargement de Visual Studio Code
Il est possible que le logiciel ne se lance pas sur MacOS Catalina (10.15.1 par exemple à la date où j’écris cet article) et qu’une pop-up apparaisse comme celle ci-dessous :
Impossible d’ouvrir car Apple ne peut pas vérifier qu’il ne contient pas de logiciels malveillants.
Si c’est le cas, allez dans les Préférences système > Sécurité et confidentialité puis cliquez enfin sur le bouton Ouvrir quand même dans la fenêtre qui s’affiche :
Autoriser les applications téléchargées
Etape 2 — Installation du SFDX CLI
Téléchargez et installez l’extension SFDX CLI (command-line interface) à l’adresse suivante : https://developer.salesforce.com/tools/sfdxcli
Téléchargement de SFDX CLI
Etape 3 — Vérification de SFDX CLI
Une fois SFDX CLI installé, vérifiez sa bonne installation en ouvrant une Invite de commande (Ctrl + R puis tapez cmd sous Windows) ou un Terminal (⌘ + Espace puis tapez terminal sous MacOS).
Une fois la fenêtre ouverte, tapez sfdx et validez avec Entrée. Si tout s’est bien passé, vous devriez voir le message suivant :
SFDX CLI est bien installé !
Etape 4 — Installation des extensions Visual Studio pour Salesforce
Une fois que tous les outils principaux ont été installés, on va se simplifier un peu la vie en téléchargeant un pack d’add-ons pour Visual Studio qui vont nous permettre de gagner en confort lors du développement.
Globalement il s’agit d’extensions qui vont permettre de mettre en forme les codes Apex, VisualForce, Aura, etc… et aussi permettre de proposer des suggestions dans le code (auto-completion).
Ce pack contient aussi d’autres outils qu’on verra par la suite 🥡
Pour le télécharger, ouvrez Visual Studio Code et cliquez sur le menu Extensions (5ème icône à gauche en partant du haut de la page ou via le raccourci Ctrl ou ⌘+⇧+X pour les plus experts) et tapez Salesforce extension pack dans la barre de recherche pour trouver l’extension ci-dessous :
Installation du pack d’extensions Salesforce Extension Pack
Cliquez sur le bouton vert Install
Refaites la même manipulation pour le package Salesforce Package.xml Generator Extension for VS Code :
Installation de l’extension Salesforce Package.xml Generator Extension for VS Code
Etape 5 — Création du Projet SFDX
Dans Visual Studio Code, cliquez sur la combinaison de touches Ctrl ou ⌘+⇧+P afin d’ouvrir le lanceur de commandes (ou via le menu View > Command Palette).
Commencez à taper Create Project with Manifest et cliquez sur le résultat suivant :
SFDX: Create Project with Manifest
Sélectionnez SFDX: Create Project with Manifest et l’application va ensuite vous demander le type de gabarit projet, choisissez Standard puis rentrez le nom du projet que vous avez choisi, le mien est GetMarcelProjet01
Définition du nom du projet
Créez ensuite le dossier dans lequel vous allez stocker le contenu de votre projet :
Cliquez simplement sur Create Project
Vous devriez voir votre projet créé et son arborescence dans l’explorateur à gauche de la fenêtre de Visual Studio Code :
Le projet a été créé, on le voit dans l’explorateur sur la partie gauche de l’écran
Voila, c’est aussi simple que ça, vous avez créé le projet, connectons-nous maintenant à notre Org Salesforce !
Etape 6 — Connexion à l’Organisation Salesforce
Si vous n’en avez pas encore, allez tout de suite vous créer une org de Développeur, c’est tout simple et ça prend moins de 30 secondes : https://developer.salesforce.com/signup
Votre projet SFDX est créé, vous avez identifié l’org à laquelle vous allez vous connecter pour développer votre magnifique Composant Web Lightning (LWC, Lightning Web Component en anglais), alors c’est parti !
Rappelez l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) puis cherchez “Authorize and Org” et sélectionnez “SFDX: Authorize an Org”
SFDX: Authorize an Org
On vous demande ensuite de choisir le type d’instance, alors là ça dépend. Si vous avez créé une organisation “Developer”, laissez le choix par défaut car il s’agit d’une instance de “Production”.
Il existe globalement 2 grands types d’instances Salesforce : Production On retrouve sous cet ensemble les instances auxquelles les utilisateurs finaux ont accès. Votre instance “Developer Edition” tombe aussi dans ce groupe même si ça peut paraitre contre-intuitif de prime abord, il y a une raison. Retenez juste que votre instance est une instance de Prod. Sandbox Il s’agit de toutes les autres instances, environnements de Développement, Recette, Test, UAT, etc… Il existe plusieurs types de Sandbox avec des capacités différentes en termes de stockage ou de rafraichissement mais ça fera l’objet d’un autre article que celui-ci.
Précisez le type d’instance, production ou sandbox
Donnez un nom à votre Org, vous pouvez mettre tout et n’importe quoi ici, essayez juste de mettre quelque chose que vous allez retenir, moi j’ai mis GetMarcel mais ça n’a pas réellement d’importance :
Nom de l’org
Une fois que vous avez donné un nom à votre instance et que vous l’avez précisé dans Visual Studio, un navigateur s’ouvre et vous propose de vous connecter à l’instance Salesforce que vous utiliserez dans le cadre de ce tutoriel.
⚠️Attention⚠️ Si vous êtes sûr(e) de vos identifiants mais que la connexion ne fonctionne pas, il est possible que vous ayez fait une erreur lors du choix “Sandbox” ou “Production” précédent. Si vous accédez à une Sandbox, l’URL du navigateur ouvert doit être https://test.salesforce.com, sinon si vous accédez à un environnement de “Production”, l’URL doit être https://login.salesforce.com
Authentifiez-vous sur votre org
Une fois que vous vous êtes correctement identifié(e), Salesforce CLI vous demande d’autoriser l’accès à cette instance Salesforce ✅
Bien évidemment on autorise en cliquant sur le bouton Autoriser
Autoriser l’accès à l’org pour SFDX CLI
C’est terminé pour cette étape, votre SFDX Command Line Interface a désormais accès à une instance et on pourra relancer l’instance très facilement à l’avenir à partir de Visual Studio Code, Bravo à vous 👏👏👏
Etape 7— Configuration du fichier package.xml
Regardez l’arborescence de notre projet sur la gauche de l’écran dans Visual Studio Code, vous remarquerez plusieurs dossiers (config, force-app, manifest,…).
On va s’intéresser au fichier package.xml contenu dans le répertoire manifest mais on ne va pas l’éditer directement, on va se servir de l’addon qu’on a installé plus tôt.
Une nouvelle fois accédez à l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) puis cherchez package et sélectionnez SFDX Package.xml Generator: Choose Metadata Components
SFDX Package.xml Generator: Choose Metadata Components
Alors là, on doit sélectionner les types de metadonnées qu’on va synchroniser avec SFDX et auxquels on aura accès dans l’outil (pour les modifier par exemple).
On peut se dire que la solution simple serait de tout sélectionner, c’est une erreur, car ça voudrait aussi dire qu’on aurait énormément d’éléments à synchroniser à chaque fois et globalement ça prendrait un temps infini pour synchroniser des choses totalement inutiles dans le cadre de ce tutoriel. Si vous voulez en savoir plus https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/manifest_samples.htm
Assurez-vous d’avoir correctement sélectionné à minima les éléments suivants (ça nous servira plus tard) et laissez ceux qui sont déjà sélectionnés par défaut :
ApexClass
ApexComponent
ApexPage
ApexTestSuite
ApexTrigger
CustomObject
LightningComponentBundle
StandardValueSet
StandardValueSetTranslation
Sélectionnez les métadonnées que vous souhaitez synchroniser
Maintenant que votre fichier manifest > package.xml a été mis à jour, ouvrez le en double cliquant dessus dans l’arborescence projet à gauche de l’écran et faites un clic droit à l’intérieur de ce fichier et sélectionnez l’option SFDX: Retrieve Source in Manifest from Org
Lancement de la récupération des métadonnées depuis notre org
Vous verrez l’ensemble de vos fichiers récupérés de votre Org Salesforce dans la sous-fenêtre OUTPUT en bas de la fenêtre Visual Studio Code
Tout est récupéré de notre instance
Tout est en place, on va enfin pouvoir créer notre premier Lightning Web Component ! On fait ça immédiatement dans la deuxième partie du tutoriel
Une question? Une remarque?
Ecrivez-moi charles@getmarcel.com et je vous répondrai dans les meilleurs délais !