Skip to main content
Rejoignez-nous lors de l'événement TDX à San Francisco ou sur Salesforce+ les 5 et 6 mars pour la conférence des développeurs à l'ère des agents IA. Inscrivez-vous dès maintenant.

Élaboration de l’application de géolocalisation à l’aide de Salesforce CLI

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Décrire comment utiliser la CLI pour créer une classe Apex
  • Décrire comment utiliser une commande CLI pour créer un composant Aura

Description du projet

Nous allons créer notre fonctionnalité (à savoir, notre application de géolocalisation) en écrivant du code localement, puis en le synchronisant avec notre organisation test, où nous pourrons le tester. À cette fin, nous allons employer Apex et plusieurs composants Aura.

Pour rester concentrés sur Salesforce CLI et les organisations test, nous allons vous fournir le code d’une application de géolocalisation qui emploie des composants Aura.

Ce diagramme présente un aperçu général des interactions entre les composants :Diagramme de contrôle de flux représentant la réalisation d’une recherche par l’utilisateur.

Cette conception rend votre application flexible et plus facile à gérer. Dans le cadre de l’évolution des exigences associées à votre application et à votre activité, vous pourrez remplacer le composant qui affiche les données sans avoir à retravailler le composant qui interroge les données. Cette conception vous permet également de réutiliser ces composants indépendamment dans d’autres applications.

  1. Le composant Account Search (Recherche de compte) appelle une action côté serveur pour rechercher des comptes.
  2. La méthode Apex renvoie les résultats de la recherche SOSL.
  3. Le composant Account Search (Recherche de compte) déclenche un événement qui transmet les données à d’autres composants.
  4. Les composants qui gèrent l’événement affichent les données à l’utilisateur.

Création du contrôleur Apex Account Search (Recherche de compte)

Au cours de cette étape, vous créez un contrôleur Apex qui permet à vos composants Aura de récupérer une liste de comptes avec leurs informations de localisation. Les classes Apex sont stockées dans un dossier appelé classes, au sein du dossier force-app/main/default de votre projet Salesforce DX. Vous pouvez utiliser la CLI pour créer rapidement une classe Apex.

  1. De l’intérieur du répertoire du projet geolocation (géolocalisation), exécutez cette commande à partir de la racine de votre projet.
    sf apex generate class --name AccountSearchController --output-dir force-app/main/default/classes
  2. Ouvrez force-app/main/default/classes/AccountSearchController.cls et remplacez le code d’échafaudage par le code suivant, puis enregistrez le fichier.
    public with sharing class AccountSearchController {
        @AuraEnabled
        public static List<Account> searchAccounts( String searchTerm ) {
            List<Account> accounts = new List<Account>();
            if ( String.isNotBlank( searchTerm ) ) {
                List<List<SObject>> searchResults = [
                    FIND :searchTerm
                    RETURNING Account(
                        Id, Name, Phone, Website,
                        BillingStreet, BillingCity,
                        BillingState, BillingPostalCode
                        ORDER BY Name
                        LIMIT 10
                    )
                ];
                accounts = searchResults[0];
            }
            return accounts;
        }
    }
  3. Maintenant, déployez (synchronisez) votre nouveau code dans votre organisation test par défaut que vous avez créée dans l’unité précédente.
    sf project deploy start 
    La sortie de la commande project deploy start ressemble à ceci :
    Deploying v58.0 metadata to test-t7e5za@example.com using the v58.0 SOAP API.
    Deploy ID: 0Af6t00000AN
    Status: Succeeded | ████████████████████████████████████████ | 1/1 Components (Errors:0) | 0/0 Tests (Errors:0)
    Deployed Source
    ===============================================================================================================
    | State   Name                    Type      Path
    | ─────── ─────────────────────── ───────── ───────────────────────────────────────────────────────────────────
    | Created AccountSearchController ApexClass force-app/main/default/classes/AccountSearchController.cls
    | Created AccountSearchController ApexClass force-app/main/default/classes/AccountSearchController.cls-meta.xml 
    Votre organisation test est désormais mise à jour avec la classe AccountSearchController.

Création de l’événement Aura Accounts Loaded (Comptes chargés)

En utilisant le principe de conception à responsabilité unique, nous déléguons l’affichage des résultats de recherche en déclenchant un événement géré par les composants Account Map (Carte de compte) et Account List (Liste de comptes) que vous aller créer lors d’étapes ultérieures.

  1. Créez l’événement dans le dossier aura.
    sf lightning generate event --name AccountsLoaded --output-dir force-app/main/default/aura
  2. Ouvrez le fichier force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt et remplacez le contenu par ce code, puis enregistrez le fichier.
    <aura:event type="APPLICATION">
        <aura:attribute name="accounts" type="Account[]"/>
    </aura:event>
  3. Déployez votre nouveau code dans l’organisation test.
    sf project deploy start
    La sortie de la commande project deploy start ressemble à ceci :
    Deploying v58.0 metadata to test-t7e5za@example.com using the v58.0 SOAP API.
    Deploy ID: 0Af6t00000AN
    Status: Succeeded | ████████████████████████████████████████ | 1/1 Components (Errors:0) | 0/0 Tests (Errors:0)
    Deployed Source
    ===============================================================================================================
    | State   Name                    Type      Path
    | ─────── ─────────────────────── ───────── ───────────────────────────────────────────────────────────────────
    | Created AccountsLoaded AuraDefinitionBundle force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
    | Created AccountsLoaded AuraDefinitionBundle force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt-meta.xml 

Création du composant Aura Account Search (Recherche de compte)

Ensuite, nous allons répéter une grande partie de ce processus pour créer un composant nommé AccountSearch. Les fichiers des composants Aura sont regroupés en paquets, qui sont stockés dans des dossiers au sein du dossier force-app/main/default/aura. À l’instar des classes Apex, vous pouvez créer un composant Aura à partir de la ligne de commande.

  1. Créez le composant dans le dossier aura :
    sf lightning generate component --name AccountSearch --output-dir force-app/main/default/aura
    Comme vous pouvez le constater, tous les fichiers requis sont créés. Dossier AccountSearch développé de manière à afficher ses fichiers dans Visual Studio Code
  2. Ouvrez le fichier force-app/main/default/aura/AccountSearch/AccountSearch.cmp et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    <aura:component controller="AccountSearchController">
        <aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
        <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
        <aura:attribute name="searchTerm" type="String" default="San Francisco"/>
        <lightning:card title="Account Search" iconName="standard:search">
            <div class="slds-form slds-p-around_x-small">
                <lightning:input
                    label="Search"
                    variant="label-hidden"
                    value="{!v.searchTerm}"
                    placeholder="Search by name, phone, website, or address"
                    onchange="{!c.onSearchTermChange}"/>
            </div>
        </lightning:card>
    </aura:component>
    Ce composant dispose d’un champ de saisie permettant à l’utilisateur de saisir des termes de recherche, tels que le nom ou l’adresse du compte, et enregistre les gestionnaires d’événements lorsque le composant est initialisé ou que le terme de recherche change.

  3. Ouvrez le fichier force-app/main/default/aura/AccountSearch/AccountSearchController.js et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    ({
        onInit: function( component, event, helper ) {
            // proactively search on component initialization
            var searchTerm = component.get( "v.searchTerm" );
            helper.handleSearch( component, searchTerm );
        },
        onSearchTermChange: function( component, event, helper ) {
            // search anytime the term changes in the input field
            var searchTerm = component.get( "v.searchTerm" );
            helper.handleSearch( component, searchTerm );
        }
    })
    Le contrôleur côté client gère l’événement d’initialisation du composant et le moment où le terme de recherche change. Il appelle le fichier d’assistance dans le but d’effectuer la recherche en fonction de la saisie de l’utilisateur.

  4. Ouvrez le fichier force-app/main/default/aura/AccountSearch/AccountSearchHelper.js et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    ({
        // code in the helper is reusable by both
        // the controller.js and helper.js files
        handleSearch: function( component, searchTerm ) {
            var action = component.get( "c.searchAccounts" );
            action.setParams({
                searchTerm: searchTerm
            });
            action.setCallback( this, function( response ) {
                var event = $A.get( "e.c:AccountsLoaded" );
                event.setParams({
                    "accounts": response.getReturnValue()
                });
                event.fire();
            });
            $A.enqueueAction( action );
        }
    })
  5. Déployez la nouvelle source dans l’organisation test.
    sf project deploy start 
Le paquet de définition déployé dans l’organisation test s’affiche :
Deploying v58.0 metadata to test-t7e5za@example.com using the v58.0 SOAP API.
Deploy ID: 0Af6t00880W7VdBCAV
Status: Succeeded | ████████████████████████████████████████ | 1/1 Components (Errors:0) | 0/0 Tests (Errors:0)
Deployed Source
====================================================================================================================
| State   Name           Type                 Path
| ─────── ────────────── ──────────────────── ──────────────────────────────────────────────────────────────────────
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.auradoc
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.cmp
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.cmp-meta.xml
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.css
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.design
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearch.svg
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearchController.js
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearchHelper.js
| Created AccountSearch  AuraDefinitionBundle force-app/main/default/aura/AccountSearch/AccountSearchRenderer.js

Création du composant Aura Account List (Liste de comptes)

Maintenant, nous allons créer un composant Aura qui affiche des comptes dans un tableau de données. Pour savoir quelles données afficher, il s’abonne à l’événement c:AccountsLoaded que vous avez créé lors d’une étape précédente.

  1. Créez le composant dans le dossier aura.
    sf lightning generate component --name AccountList --output-dir force-app/main/default/aura
  2. Ouvrez le fichier force-app/main/default/aura/AccountList/AccountList.cmp et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    <aura:component>
        <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
        <lightning:navigation aura:id="navigation"/>
        <aura:attribute name="rows" type="Map[]"/>
        <aura:attribute name="cols" type="Map[]"/>
        <lightning:card title="Account List" iconName="standard:account">
            <lightning:datatable
                data="{!v.rows}"
                columns="{!v.cols}"
                keyField="Id"
                hideCheckboxColumn="true"
                showRowNumberColumn="true"
                onrowaction="{!c.onRowAction}"/>
        </lightning:card>
    </aura:component>
    Ce composant écoute l’événement AccountsLoaded et affiche les données de l’événement dans un tableau. Au fur et à mesure que l’utilisateur recherche et trouve des résultats différents, la liste est mise à jour en conséquence.

  3. Ouvrez le fichier force-app/main/default/aura/AccountList/AccountListController.js et remplacez son contenu par le code suivant, puis enregistrez le fichier.
    ({
        onAccountsLoaded: function( component, event, helper ) {
            var cols = [
                {
                    'label': 'Name',
                    'fieldName': 'Name',
                    'type': 'text'
                },
                {
                    'label': 'Phone',
                    'fieldName': 'Phone',
                    'type': 'phone'
                },
                {
                    'label': 'Website',
                    'fieldName': 'Website',
                    'type': 'url'
                },
                {
                    'label': 'Action',
                    'type': 'button',
                    'typeAttributes': {
                        'label': 'View details',
                        'name': 'view_details'
                    }
                }
            ];
            component.set( 'v.cols', cols );
            component.set( 'v.rows', event.getParam( 'accounts' ) );
        },
        onRowAction: function( component, event, helper ) {
            var action = event.getParam( 'action' );
            var row = event.getParam( 'row' );
            if ( action.name == 'view_details' ) {
                var navigation = component.find( 'navigation' );
                navigation.navigate({
                    'type': 'standard__recordPage',
                    'attributes': {
                        'objectApiName': 'Account',
                        'recordId': row.Id,
                        'actionName': 'view'
                    }
                });
            }
        }
    })
    La fonction onAccountsLoaded du contrôleur côté client transforme les données d’événement au format attendu par le composant <lightning:datatable>. La fonction onRowAction accède à l’enregistrement de compte correspondant à la ligne avec laquelle l’utilisateur a interagi.

  4. Déployez le nouveau code dans l’organisation test.
    sf project deploy start
Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires