Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Apprentissage du processus de développement des composants Aura

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Créer une application tremplin pour voir et tester des composants Lightning en cours de développement.
  • Créer une application de développement pour héberger vos composants dans Lightning Experience.

Mon domaine est déjà activé dans votre Trailhead Playground

N’essayez pas d’activer Mon domaine ou de modifier ses réglages dans votre Trailhead Playground. Par défaut, Mon domaine est déjà activé dans tous les Trailhead Playgrounds.

Nom Mon domaine en surbrillance dans une URL Trailhead Playground.

Dans votre organisation de production, Mon domaine vous permet de créer un sous-domaine unique pour votre organisation. Avec Mon domaine, vous remplacez l’URL d’instance que Salesforce vous attribue, telle que https://na17.lightning.force.com, par un sous-domaine de votre choix, comme https://monnomdedomaine.lightning.force.com.

Mon domaine est requis pour créer des composants Lightning personnalisés et configurer l’authentification unique (SSO) dans une organisation. Pour en savoir plus sur Mon domaine, consultez cet article Knowledge. Pour savoir comment l’activer dans votre organisation de production, consultez le module Authentification des utilisateurs.

Visualisation de votre composant Aura

Il n’existe aucun moyen simple de prévisualiser un composant Aura au cours du développement. Vous ne pouvez pas cliquer sur un bouton ou accéder à une URL pour voir chaque composant. Les développeurs Visualforce mettront peut-être un peu de temps à s’habituer à cette différence, car il est si facile de créer une nouvelle page dans Visualforce et de la recharger pour voir les modifications.

Le modèle de programmation de composants Aura est très différent. Nous expliquons la nature et les raisons de ces différences dans le module Concepts de base des composants Aura. Pour l’instant, concentrons-nous sur la manière la plus rapide de charger et d’afficher votre composant au cours du développement.

Nous allons vous présenter deux manières de configurer un environnement de « prévisualisation » pour vos composants en développement. Ces deux méthodes ont des objectifs différents. La première utilise une application tremplin. Elle est simple à mettre en place et fonctionne bien pour apprendre les bases des composants Aura. Elle est également utile à long terme si vous voulez écrire des composants qui fonctionnent « en dehors » de Salesforce (reportez-vous aux ressources pour en savoir plus sur le sujet).

La seconde méthode consiste à créer un contexte de développement dans Lightning Experience. Elle est plus difficile à mettre en œuvre, et la recharge du composant prend plus de temps. Cependant, vous ne pouvez pas développer de composants qui s’intègrent dans Lightning Experience en les testant en dehors de Lightning Experience. À long terme, c’est sans doute la méthode que vous utiliserez le plus fréquemment.

Developer Console et VS Code

Dans cette unité, vous allez configurer votre environnement de prévisualisation dans la Developer Console et votre environnement de développement dans VS Code. Pour ce faire, vous devez installer VS Code, Salesforce CLI et Salesforce Extension Pack en suivant les étapes évoquées dans l’unité précédente.

Remarque

Remarque

Plus loin dans cette unité, vous autoriserez VS Code à déployer des fichiers dans votre organisation. Pour cela, vous devrez connaître le nom d’utilisateur et le mot de passe de votre organisation. Pour obtenir votre nom d’utilisateur et votre mot de passe Trailhead Playground, reportez-vous au module Gestion des Trailhead Playgrounds.

Créez une application « tremplin »

Échelle ! Commençons simplement avec la manière la plus légère de développer et de prévisualiser un composant Aura, dans une application « tremplin », une application « my.app » autonome qui contient uniquement votre composant.Une application tremplin contient un composant en développement.

L’application tremplin (1) est une application Lightning autonome dont le seul but est d’offrir une URL directement accessible. Elle contient une seule chose : le composant de haut niveau sur lequel vous travaillez. Sur l’illustration, il s’agit du composant Mes dépenses (2) permettant de créer une nouvelle dépense (Vous vous souvenez peut-être que nous l’avons entièrement créé ensemble dans le module Bases des composants Aura.)

Voici comment créer une application tremplin.

  1. Ouvrez la Developer Console, puis choisissez Fichier | Nouveau | Application Lightning.
  2. Dans le panneau Nouveau paquet Lightning, saisissez harnessApp comme nom d’application, puis cliquez sur Envoyer.

Nous vous avons dit que vous devriez utiliser VS Code pour le développement, et c’est toujours le cas. Nous n’utilisons la Developer Console que pour une seule chose : ce bouton Aperçu. Échelle ! Lorsque vous cliquez dessus, une nouvelle fenêtre (vide, pour l’instant) apparaît. C’est dans cette fenêtre que vous pourrez recharger votre composant pour voir les modifications pendant le développement.

Attendez une minute ! Ne venons-nous pas de dire qu’il n’existait pas de bouton pour voir un composant en développement ? Alors, à quoi sert ce bouton Aperçu ?!?

Le bouton Aperçu permet de voir une application Lightning, pas un composant. Ce n’est pas la même chose, un point c’est tout. Les composants s’insèrent dans une application, comme vous allez le faire dans la prochaine section.

Créez un composant de haut niveau

Échelle ! Dans Salesforce, nous utilisons beaucoup les termes « application » et « composant ». Voyons un peu ce que désignent ces termes dans votre activité actuelle. Vous venez de créer dans la Developer Console une application Lightning autonome que vous avons appelée une application tremplin. Cette « application » n’est qu’une coquille vide (elle contiendra extrêmement peu de code), une référence au composant que vous allez créer.

Le composant que vous allez y insérer est la véritable « application », l’élément principal que vous ajouterez à Lightning Experience, l’application Salesforce ou autre. Tout le vrai code de votre fonctionnalité se trouve dans ce composant ou dans ses enfants. Vous pouvez l’appeler « widget » ou « composant principal » ou autre. Il est préférable de ne pas l’appeler « application », car ce terme a un sens précis dans les composants Lightning et dans Lightning Experience.

Alors, un peu désorienté ? Passons à quelque chose de concret. Nous allons créer un composant dans VS Code et le déployer dans votre organisation.

  1. Démarrez VS Code.
  2. Dans Visual Studio Code, appuyez sur Commande + Maj + P sur un ordinateur Mac ou sur Ctrl + Maj + P sur un ordinateur Windows ou Linux pour ouvrir la palette de commandes.
  3. Saisissez SFDX : créer un projet et appuyez sur Entrée.
  4. Sélectionnez Modèle de projet standard (par défaut).
  5. Nommez le projet MyComponent et appuyez sur Entrée.
  6. Accédez au dossier souhaité et cliquez sur Créer un projet pour enregistrer le projet.
  7. Ouvrez de nouveau la palette de commandes et saisissez SFDX : créer un composant Aura.
  8. Nommez le nouveau composant myFirstComponent et appuyez sur Entrée.
  9. Appuyez de nouveau sur Entrée pour accepter l’emplacement force-app/main/default/aura.

    Vous devriez maintenant voir dans le répertoire force-app/main/default/aura un répertoire myFirstComponent contenant plusieurs fichiers.

    Vous verrez également un répertoire intitulé force-app/main/default/lwc. Le répertoire lwc peut contenir des fichiers de composants Web Lightning. Pour créer des composants Lightning, deux modèles de programmation sont à votre disposition : le modèle de programmation Aura et le modèle de programmation des composants Web Lightning. Ce module se concentre sur les composants Aura.

  10. Dans le répertoire myFirstComponent, vous remarquerez qu’un fichier a pour extension « .cmp ». Remplacez le contenu du fichier myFirstComponent.cmp par le balisage suivant, puis enregistrez-le.
    <aura:component implements="force:appHostable">
        <p>I solemnly swear I am proficient in JavaScript.</p>
    </aura:component>

Suivez ces étapes pour autoriser VS Code dans votre organisation et déployer votre composant Aura.

  1. Ouvrez la palette de commandes et saisissez SFDX : autoriser une organisation, puis appuyez sur Entrée.

    Reportez-vous au module Gestion des Trailhead Playgrounds pour obtenir votre nom d’utilisateur et votre mot de passe.

  2. Appuyez de nouveau sur Entrée pour accepter l’option de connexion par défaut.
  3. Appuyez de nouveau sur Entrée pour accepter l’alias par défaut pour cette connexion.
  4. Lorsque le navigateur s’ouvre, connectez-vous à votre organisation et autorisez l’accès si vous y êtes invité. Après vous être connecté avec succès, revenez à VS Code.
  5. Cliquez avec le bouton droit de la souris sur le répertoire par défaut et sélectionnez SFDX : déployer la source dans l’organisation.

    VS Code doit normalement indiquer que le déploiement a été exécuté avec succès. Si vous ne voyez pas la commande SFDX : déployer la source dans l’organisation, cela signifie que vous n’avez pas autorisé VS Code dans votre organisation. Dans ce cas, essayez à nouveau.

Revenez maintenant à la Developer Console de votre organisation. Si l’application tremplin n’est pas déjà ouverte, cliquez sur Fichier | Ouvrir les ressources Lightning. Ouvrez le dossier c:harnessApp, sélectionnez APPLICATION, puis cliquez sur Ouvrir la sélection.

  1. Ajoutez le composant à l’application tremplin. Remplacez le contenu de harnessApp.app par ce qui suit.
    <aura:application>
        <c:myFirstComponent/>
    </aura:application>
  2. Enregistrez le fichier (Fichier > Enregistrer).
  3. Sélectionnez Aperçu (ou Mettre à jour l’aperçu si le bouton Aperçu a été utilisé récemment).

Voilà le processus de développement pour utiliser des composants Aura en mode autonome. Créez une application tremplin pour votre fenêtre de prévisualisation. Construisez ensuite votre fonctionnalité ou votre widget dans un composant et ajoutez-le à l’application tremplin. Pour voir les modifications, rechargez l’aperçu de l’application tremplin. C’est beaucoup plus rapide que de recharger Lightning Experience à chaque modification !

Voici ce dont vous devez vous souvenir.

Le processus n’est pas aussi simple, ni aussi automatisé qu’avec Visualforce. Vous devez créer les composants vous-même. Il n’y a pas de raccourci pour créer immédiatement une version temporaire pour vous. Vous devez également recharger manuellement l’application tremplin, car elle ne se recharge pas automatiquement.

Ensuite, et surtout, l’application autonome (souvent appelée « my.app ») n’exécute que l’infrastructure de composants et votre composant. Elle recharge rapidement parce qu’elle ne charge pas Lightning Experience. Cependant, si votre composant est basé sur des services de Lightning Experience, notamment pour obtenir l’identifiant de l’enregistrement actuel ou traiter les événements de navigation, il ne fonctionnera pas en dehors de Lightning Experience. (Nous expliquons pourquoi dans le module Concepts de base des composants Aura.)

C’est un manque qui se fera sentir pour la plupart des développeurs de composants Lightning. La plupart du temps, vous construirez des choses qui fonctionnent dans Lightning Experience (ou l’application Salesforce) et qui s’y intègrent. Créons donc un environnement de test similaire, quoique moins léger, dans Lightning Experience, afin de vous permettre d’accéder aux services offerts par cette (nettement plus vaste) « application tremplin ».

Créez une application de développement Lightning Experience

Échelle ! Les étapes décrites ci-dessous aboutissent à la création d’une application Lightning « En développement » que vous pouvez utiliser pour accéder à des composants Lightning (et à d’autres choses, comme des pages Lightning ou Visualforce) depuis Lightning Experience pendant leur phase de développement.

Créez l’application « En développement »

Cette étape crée une application Lightning qui contient vos composants pendant leur développement.

  1. Dans Configuration, saisissez Applications dans la case Recherche rapide, puis sélectionnez Gestionnaire d’applications.

    Le Gestionnaire d’applications Lightning Experience doit désormais être affiché.

  2. Cliquez sur Nouvelle application Lightning, puis créez une application personnalisée pour vos composants en développement.
    • Nom de l’application : En développement
    • Le nom du développeur est attribué automatiquement
    • Description : Composants et pages en développement
      Création d’une nouvelle application Lightning
  3. Cliquez sur Suivant.
  4. Cliquez de nouveau sur Suivant pour accepter les valeurs par défaut des options de l’application.
  5. Cliquez sur Suivant pour accepter les valeurs par défaut des éléments utilitaires.
  6. Cliquez sur Suivant pour accepter les valeurs par défaut des éléments de navigation.
  7. Concernant les profils des utilisateurs, pensez à autoriser l’accès de votre application uniquement aux administrateurs système ou à un profil créé pour les développeurs de votre organisation. Il n’est pas nécessaire que vos utilisateurs voient vos pages avant d’être ajoutés à leur emplacement permanent dans l’interface utilisateur.
  8. Cliquez sur Enregistrer et terminer pour créer l’application.

Ajoutez l’application en développement au menu des applications

Cette étape ajoute votre application au menu de navigation pour la rendre facile d’accès.

  1. Dans Configuration, saisissez Menu des applications dans la zone Recherche rapide, puis sélectionnez Menu des applications.

    Vous devez maintenant voir la page Menu des applications.

  2. Assurez-vous que votre application En développement est configurée sur Visible dans le Lanceur d’application. Rendez l’application visible dans le Lanceur d’application Pendant que vous êtes là, vous voudrez peut-être en profiter pour classer vos éléments, voire masquer les applications que vous n’utilisez pas.

Créez un onglet Composant Lightning

Cette étape crée un nouvel onglet qui affiche un composant Lightning et l’ajoute à l’application en développement.

  1. Dans Configuration, saisissez Onglets dans la case Recherche rapide, puis sélectionnez Onglets.

    Vous devez maintenant voir la page Onglets personnalisés.

  2. Cliquez sur Nouveau dans la section Onglets des composants Lightning et créez un onglet personnalisé pour la page en développement.
    • Composant Lightning : c:myFirstComponent
    • Étiquette de l’onglet : Mon premier composant
    • Le nom de l’onglet est attribué automatiquement.
    • Choisissez un Style d’onglet que vous appréciez.
    • Description : Un composant simple
      Créez un onglet Composant Lightning personnalisé
  3. Faites en sorte que l’onglet soit uniquement visible par les personnes ayant le profil Administrateur système. Personnalisez la visibilité de l’onglet
  4. Dans Configuration, saisissez Applications dans la case Recherche rapide, puis sélectionnez Gestionnaire d’applications.
  5. Dans le menu déroulant situé à droite de votre application En développement, sélectionnez Modifier.
  6. Dans le panneau Éléments de navigation, ajoutez l’onglet Mon premier composant à la liste Éléments sélectionnés.
  7. Cliquez sur Enregistrer.
  8. Cliquez sur Retour en haut à droite de la page pour revenir à la page Configuration.

Pour ajouter d’autres onglets à votre application, il vous suffit de recommencer les étapes précédentes.

Votre composant apparaît désormais dans Lightning Experience. Dans le lanceur d’application, cherchez et sélectionnez l’application En développement. Une fois que votre application est disponible, l’onglet Mon premier composant est le premier élément de la barre d’onglets de l’application. Onglet myFirstComponent dans l’application En développement Chaque fois que vous modifiez votre composant, rechargez Lightning Experience avec la commande Rafraîchir la page de votre navigateur.

Ajouter un composant à un onglet est une manière d’intégrer un composant Lightning à Lightning Experience. C’est utile si votre fonctionnalité a un contexte général, c’est-à-dire si elle n’est pas liée à un type d’objet spécifique, comme un compte, ou si elle ne doit pas être utilisée avec des enregistrements individuels.

Vous pouvez créer des composants qui font ce genre de choses, mais vous devrez alors suivre une procédure différente pour les ajouter au bon endroit de Lightning Experience. Par exemple, si votre composant doit fonctionner avec un enregistrement de compte précis, vous pouvez l’ajouter à la présentation de page du compte ou sous forme d’action rapide dans l’objet du compte.

Si votre composant doit être accessible depuis un autre endroit de Lightning Experience, consultez les Ressources pour connaître les étapes à accomplir pour l’ajouter à l’interface utilisateur et le code à ajouter à votre composant.

Principes à prendre en compte

Dans le module Concepts de base des composants Aura, nous abordons les détails concernant le modèle de programmation de composants Aura et faisons le lien entre les concepts Visualforce et les fonctionnalités similaires des composants Aura. Avant de vous lancer, gardez à l’esprit les points suivants.

Les composants Aura sont plus récents que Visualforce

Visualforce existe depuis plus longtemps que le modèle de programmation de composants Aura. Cela signifie qu’il est encore en développement. Modérez vos attentes et attendez les fonctionnalités que nous ajouterons progressivement.

Évitez les « solutions » trop ambitieuses

Toboggan ! Lorsque vous développez vos premiers composants Aura, allez-y doucement. Vous êtes peut-être un expert du développement Visualforce, mais si vous brûlez les étapes avec les composants Aura, vous risquez de devoir recommencer une partie de votre travail.

Ne pas écrire de code Visualforce sous forme de composants Aura

Toboggan ! La conception et l’architecture d’un code de qualité sur Visualforce sont complètement différentes pour les composants Lightning. Vous pouvez essayer de faire rentrer une conception Visualforce dans un composant Aura, mais cela reviendrait à vouloir faire rentrer des ronds dans des carrés. Ce sera difficile, et au bout du compte vous ne garderez pas le résultat. Mieux vaut consacrer vos efforts à apprendre le fonctionnement des composants Aura.

Souvenez-vous de Waterloo

Peu importe si vous n’êtes pas tout à fait au point sur l’histoire napoléonienne. Certaines batailles sont perdues d’avance, il vaut mieux accepter de se rendre à l’évidence. Si vous avez l’impression de vous cogner la tête contre le mur des composants Aura, il est peut-être temps de faire une pause et de rassembler vos forces.

Échelle ! Consacrez une journée au module Bases des composants Aura ou Bases des composants Web Lightning. Apprenez les fondamentaux d’un framework qui est tout de même très différent de Visualforce. Un repli stratégique avant de revenir mieux préparé n’est pas une défaite. C’est la voie vers la victoire.