Aperçu de votre composant à l’aide de Local Dev

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.

Plus tôt dans ce projet, vous avez créé une organisation test (alias scratchOrg), une application Lightning, et un composant Web Lightning (myFirstWebComponent). Maintenant, vous allez exécuter Local Dev pour voir votre composant dans un aperçu en temps réel de votre application Lightning.

Exécution de Local Dev pour une application Lightning dans un environnement de bureau

Avec Local Dev, vous pouvez exécuter un aperçu en temps réel de votre application Lightning dans un environnement de bureau ou l’application mobile Salesforce (iOS ou Android). L’aperçu est automatiquement mis à jour lorsque vos composants locaux changent, donc vous n’avez pas à déployer le code ni à rafraîchir votre page de navigateur. Différents indicateurs de commande permettent d’exécuter un aperçu sur ordinateur et sur mobile.

Nous allons afficher un aperçu de l’application Sales Lightning dans un environnement de bureau en utilisant Local Dev. Votre organisation test est fournie avec quelques applications par défaut que vous pouvez utiliser.

1. Dans Visual Studio Code, cliquez sur Cmd + Maj + P sous macOS ou Ctrl + Maj + P sous Windows ou Linux, puis saisissez new terminal et sélectionnez Terminal : Create New Terminal.
   
2. Assurez-vous d’avoir la dernière version de la commande Local Dev. Dans l’onglet Terminal, saisissez sf update et appuyez sur Entrée.
   
3. Lorsque la mise à jour est terminée, dans le même onglet Terminal, saisissez sf lightning dev app --target-org scratchOrg --device-type desktop et appuyez sur Entrée).
   
4. Lorsque vous êtes invité à sélectionner une application Lightning Experience pour laquelle afficher un aperçu, utilisez les touches fléchées afin de sélectionner Sales, puis appuyez sur Entrée.
   

Si la commande s’exécute correctement, elle ouvre un nouvel onglet dans votre navigateur avec un aperçu de la page Seller Home (Accueil des vendeurs) de votre organisation. Local Dev est activé pour cette organisation test. Voici les paramètres que vous avez utilisés dans la commande.

• --target-org définit l’organisation cible pour laquelle vous souhaitez afficher un aperçu. Vous avez défini cet indicateur sur scratchOrg.
  
• --device-type définit l’environnement dans lequel votre aperçu s’exécute. Vous avez défini cet indicateur sur desktop pour vous assurer que votre aperçu s’exécute dans un environnement de bureau.
  

Pour en savoir plus sur d’autres indicateurs facultatifs pour la commande sf lightning dev app, consultez le guide du développeur de composants Web Lightning Aperçu d’une application Lightning (globalement disponible).

Maintenant, modifiez votre composant et voyez comment votre aperçu Local Dev se met à jour en temps réel.

1. Dans votre navigateur, cliquez sur l’onglet Accounts (Comptes) et ouvrez l’enregistrement Component Developers (Développeurs de composants).
   
2. Dans Visual Studio Code, ouvrez myFirstWebComponent.html.
   
3. Dans l’élément <lightning-card>, changez la valeur de title (titre) de "ContactInformation" à "Contact Information". Voici à quoi la ligne de code mise à jour devrait ressembler :
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

Regardez dans votre navigateur l’aperçu de votre application : vous remarquerez que le titre de votre composant se met automatiquement à jour en fonction de la modification apportée en local. Vous n’avez pas eu besoin de redéployer votre application ni de rafraîchir manuellement la page pour voir votre révision.

Exécution de Local Dev pour une application Lightning dans un environnement iOS (macOS uniquement)

Avec Local Dev, vous pouvez afficher votre projet dans un simulateur iOS ou un émulateur Android. Voyons comment exécuter un aperçu de la même application Lightning dans un environnement iOS.

Dans cette section, nous abordons uniquement le simulateur iOS, mais vous suivez le même processus pour utiliser l’émulateur Android. Pour en savoir plus sur l’utilisation de Local Dev avec Android Studio, consultez Émulateurs Android.

Les utilisateurs de Mac peuvent exécuter un simulateur iOS pour Local Dev en utilisant Xcode. Si ce n’est pas déjà fait, installez Xcode depuis l’App Store de Mac et effectuez le processus de configuration initial. Assurez-vous de télécharger les simulateurs iOS pour les appareils mobiles.

Lorsque vous avez terminé l’installation de Xcode, ouvrez Visual Studio Code. Vous allez maintenant exécuter votre application Lightning dans un simulateur d’iPhone.

1. Dans Visual Studio Code, cliquez sur Cmd + Maj + P, puis saisissez new terminal (nouveau terminal) et sélectionnez Terminal : Create New Terminal.
   
2. Dans votre fenêtre de nouveau terminal, exécutez sf lightning dev app --target-org scratchOrg --device-type ios.
   
3. Lorsque vous êtes invité à sélectionner une application Lightning Experience pour laquelle afficher un aperçu, sélectionnez Sales, puis appuyez sur Entrée.
   
4. Lorsque vous êtes invité à sélectionner un appareil à utiliser pour l’aperçu, choisissez un iPhone dans la liste des options valides.
   
5. Quand vous êtes invité à télécharger et installer l’application mobile Salesforce, saisissez y, puis appuyez sur Entrée.
   

Voici à quoi pourrait ressembler la sortie de votre terminal une fois la commande Local Dev exécutée avec succès.

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

L’application Salesforce doit s’ouvrir automatiquement dans votre simulateur d’iPhone. Acceptez les conditions d’utilisation de l’application. Ensuite, le simulateur doit afficher la page de connexion à Salesforce.

Suivez ces étapes pour ouvrir votre organisation test dans l’application.

1. Dans le coin supérieur droit du simulateur, cliquez sur Settings (Paramètres) () pour ouvrir le menu Choose Connection (Choisir la connexion).
   
2. Dans le menu Choose Connection (Choisir la connexion), cliquez sur Add (Ajouter) () pour ajouter un nouvel hôte.
   
3. Le domaine du champ Host (Hôte) doit être l’URL de votre organisation test. Vous pouvez trouver cette URL en exécutant sf org display user --target-org scratchOrg dans une fenêtre de terminal VS Code.
   
4. Copiez l’URL de l’instance depuis la sortie du terminal et collez-la dans le champ Host (Hôte) de votre simulateur, comme ceci :
   
   
5. Ensuite, dans le coin supérieur droit du simulateur iOS, cliquez sur Done (Terminé) pour ajouter le nouveau domaine et revenir à la page de connexion à Salesforce.
   
6. Dans le champ Username (Nom d’utilisateur), copiez et collez la valeur Username (Nom d’utilisateur) depuis la sortie de votre terminal à l’étape 3. Le nom d’utilisateur doit suivre le format valeur-test@exemple.com.
   
7. Pour obtenir un mot de passe valide pour ce nom d’utilisateur, dans votre terminal VS Code, saisissez sf org generate password --target-org scratchOrg et appuyez sur Entrée.
   
8. Depuis la sortie du terminal, copiez le mot de passe et collez-le dans le champ Password (Mot de passe) de votre simulateur iOS, puis cliquez sur Log In to Sandbox (Se connecter à un Sandbox).
   
9. Saisissez le code de vérification envoyé à l’adresse e-mail indiquée si nécessaire.
   
10. Si l’application vous demande l’accès à votre organisation, sélectionnez Allow (Autoriser).
    
    

Désormais, vous devriez voir l’application Salesforce dans votre simulateur iOS. Accédons au compte Component Developers (Développeurs de composants) dans l’application Sales afin que nous puissions voir Local Dev en action.

1. Dans le coin inférieur droit de l’application, cliquez sur Menu, puis sélectionnez Accounts (Comptes).
   
2. Sous Recent Accounts (Comptes récents), cliquez sur Component Developers (Développeurs de composants). Vous devriez voir votre LWC myFirstWebComponent sur la page.
   
3. Dans Visual Studio Code, ouvrez myFirstWebComponent.html.
   
4. Dans l’élément <lightning-card>, changez la valeur de title (titre) de "Contact Information" à "Contact Info". Voici à quoi la ligne de code mise à jour devrait ressembler :
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. Appuyez sur Cmd + S sous macOS, ou sur Ctrl + S sous Windows ou Linux, pour enregistrer le fichier.
   

À présent, regardez votre simulateur iOS pour vous assurer que le titre de votre composant s’est automatiquement mis à jour. Vous voyez à quelle vitesse vous pouvez itérer sur vos composants en utilisant Local Dev ?

Nous avons terminé ! Dans ce projet, vous avez installé et utilisé les outils de développement recommandés pour développer des composants Web Lightning. Vous avez copié et collé du code contenant des erreurs (à éviter à l’avenir). Vous avez utilisé Local Dev pour voir un aperçu en temps réel de vos modifications d’un composant Web Lightning dans un environnement de bureau. Et si vous êtes un utilisateur de Mac, vous avez également utilisé Local Dev pour afficher un aperçu de votre composant dans un environnement iPhone.

Nous ne pouvons pas vérifier votre travail dans une organisation test, mais vous pouvez toujours cliquer sur Verify Step (Vérifier l’étape) afin de gagner le badge. Consultez les exemples d’applications Trailhead et les recettes de composant Web Lightning) pour voir plus d’exemples de code et apprendre à développer d’excellents composants Web Lightning.

Ressources

• Trailhead : Configuration de vos outils de développement mobile Salesforce pour les composants Web Lightning