Installation d’outils de développement

Objectifs d’apprentissage

Dans ce projet, vous apprendrez les compétences suivantes :

• Installer les outils de développement recommandés pour créer et utiliser des composants Web Lightning
  
• Créer un composant Web Lightning
  
• Corriger les erreurs présentes dans votre code à l’aide des outils de développement fournis
  
• Configurer une présentation d’enregistrement pour afficher votre composant Web Lightning
  
• Activer Local Dev dans une organisation Salesforce
  

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.

Vous avez entendu parler du tout nouveau modèle de programmation appelé Lightning Web Components (Composants Web Lightning) et souhaitez maintenant créer vos propres composants Web. D’abord, vous avez besoin de quelques outils pour écrire des composants Web Lightning. 

Certes, vous pouvez créer un composant Web Lightning avec n’importe quel éditeur de texte. Vous n’y trouverez cependant pas le même niveau de prise en charge qu’un ensemble d’outils spécialisés. Si vous êtes un développeur Salesforce expérimenté et que vous souhaitez incorporer des composants Web Lightning à vos applications, vous aurez plus de succès si vous étoffez votre boîte à outils. Si vous êtes plutôt un développeur débutant sur Salesforce et que vous souhaitez commencer à créer des composants Web Lightning, vous aurez intérêt à vous familiariser avec la bonne boîte à outils pour travailler sur des projets Salesforce.

Lightning Web Components (Composants Web Lightning) reposant sur les normes Web modernes, il est logique que les outils associés soient les plus répandus chez les développeurs Web à l’heure actuelle.

Création d’un Trailhead Playground

Pour ce projet, vous devez créer un Trailhead Playground. Faites défiler cette page jusqu’en bas, cliquez sur le nom du playground, puis cliquez sur Create Playground (Créer un playground). Il faut généralement 3 à 4 minutes pour créer un Trailhead Playground.

Remarque : oui, nous parlons bien d’un tout nouveau Trailhead Playground ! Si vous utilisez une organisation ou un Playground existant, vous pourriez avoir des problèmes pour terminer les étapes de ce projet.

Configuration de Salesforce CLI

À l’instar de nombreux autres modèles et langages de programmation, Salesforce inclut une interface de ligne de commande (CLI). Si vous avez déjà utilisé npm, Yarn, Gradle ou Maven, Salesforce CLI vous semblera familier. Il est simplement conçu sur mesure pour les tâches de développement Salesforce.

Salesforce CLI vous permet d’interagir avec vos environnements Salesforce de différentes manières, telles que la récupération ou l’envoi de code ou encore les échanges avec des données. La CLI se compose de plusieurs Plug-ins. Ceux-ci fournissent des fonctionnalités spécifiques importantes. Ainsi, le plug-in plugin-org offre la possibilité de gérer les organisations Salesforce, par exemple en créant une organisation test.

Le saviez-vous ? Salesforce CLI est 100 % open source. Vous pouvez consulter tout le code source, et même y contribuer en proposant de nouvelles fonctionnalités. Consultez la page dédiée au statut de Salesforce CLI pour accéder à une liste des plug-ins inclus, ainsi qu’à des liens vers leur référentiel. 

Installation

Si vous avez déjà installé Salesforce CLI, vous pouvez ignorer cette section. Suivez les étapes ci-après ou bien reportez-vous au Guide de configuration de Salesforce CLI pour obtenir les instructions d’installation complètes.

1. Installez l’interface de ligne de commande à partir de https://developer.salesforce.com/tools/sfdxcli.
   
2. Vérifiez que la CLI est correctement installée et à jour en exécutant la commande suivante à partir de la ligne de commande : sf update
3. Une sortie semblable à la suivante doit s’afficher : @salesforce/cli:Updating CLI….
   

Vous voilà prêt à utiliser Salesforce CLI. Facile, non ?

Installation de Local Dev

Local Dev est un outil de Salesforce CLI qui vous permet d’exécuter un aperçu en temps réel de vos composants Web Lightning dans votre navigateur. L’aperçu se met à jour automatiquement à mesure que vous modifiez vos composants localement, donc vous n’avez pas à déployer le code ni à actualiser manuellement votre page de navigateur.

Cette fonctionnalité est globalement disponible pour les applications Lightning Experience (sur ordinateur et l’application mobile Salesforce). Vous pouvez aussi activer Local Dev pour les organisations test. Pour l’instant, il s’agit d’une version bêta pour les sites Lightning Web Runtime Experience Cloud.

Installation

Vous devez installer Salesforce CLI avant d’installer Local Dev. Ensuite, sur la ligne de commande, exécutez ceci pour installer Local Dev dans une organisation test ou Sandbox :

sf plugins install @salesforce/plugin-lightning-dev@prerelease

Si vous avez une organisation de production avec une version à venir, installez la dernière instance de Local Dev en exécutant la commande suivante dans la ligne de commande : sf plugins install @salesforce/plugin-lightning-dev@latest.

Cependant, pour ce projet Trailhead, installez plutôt la version préliminaire.

Passons maintenant à l’outil suivant de votre arsenal de développeur de composants Web Lightning : l’IDE.

Téléchargement et configuration de Visual Studio Code

Visual Studio Code est l’éditeur de code de référence des développeurs Salesforce. Il est gratuit, de source ouverte et disponible pour Windows, Linux et macOS. Visual Studio Code est un IDE bien implanté parmi les développeurs Web. Désormais, c’est également un IDE efficace pour la création de composants Web Lightning. Salesforce fournit des extensions gratuites pour Visual Studio Code qui simplifient encore plus votre expérience de développement. Nous fournissons également le pack d’extensions Salesforce. Celui-ci fournit d’excellents outils de développement pour la plate-forme Lightning. Il inclut également des outils compatibles avec Apex ou Visualforce, et même un débogueur Replay. 

Suivez ces instructions pour installer Visual Studio Code et le Salesforce Extension Pack (Pack d’extensions Salesforce). 

1. Téléchargez et installez la toute dernière version de Visual Studio Code pour votre système d'exploitation. Si vous avez déjà installé Visual Studio Code, il n'est pas nécessaire de le réinstaller.
   
2. Lancez Visual Studio Code.
   
3. Cliquez sur Extensions () dans le menu latéral.
   
4. Recherchez Salesforce Extension Pack (Pack d’extensions Salesforce), puis cliquez sur Install (Installer). Si vous l’avez déjà installé, il vous suffit de cliquer sur le bouton Reload (Recharger).
   
   
5. Appuyez sur Cmd+Maj+P sous macOS ou sur Ctrl+Maj+P sous Windows ou Linux pour afficher la palette de commandes. Dans la palette de commandes, saisissez sfdx pour afficher une liste initiale des commandes disponibles.
   

Vous avez terminé ! Vous avez installé tous les outils nécessaires au développement de votre premier composant Web Lightning.

Activation de Dev Hub

Pour ce projet, vous utilisez votre Trailhead Playground comme Dev Hub et créez un composant Web Lightning dans une organisation test. Mais d’abord, expliquons ce que sont un Dev Hub et une organisation test.

Une organisation test est un environnement Salesforce dédié, configurable et temporaire que vous pouvez rapidement créer lorsque vous démarrez un projet, une branche de fonctionnalité ou un test de fonctionnalité.

Un Dev Hub (ou une plate-forme de développement) est la principale organisation Salesforce que vous et votre équipe utilisez pour créer et gérer vos organisations tests.

Une fois que vous avez activé un Dev Hub dans votre organisation, vous ne pouvez plus le désactiver.

1. Lancez votre Trailhead Playground
   
2. Cliquez sur Setup (Configuration) () et sélectionnez Setup (Configuration).
   
3. Dans Setup (Configuration), saisissez Dev Hub dans la zone Quick Find (Recherche rapide) et sélectionnez Dev Hub.
   
4. Cliquez sur le curseur pour activer Dev Hub.
   

Voilà ! Vous avez configuré votre Dev Hub avec les composants Web Lightning activés, et vous avez téléchargé, installé et configuré les outils dont vous avez besoin. À l’étape suivante, vous utilisez ces outils pour créer votre premier composant Web Lightning.