Skip to main content
Únase a nosotros en TDX, en San Francisco, o en Salesforce+ los días 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

Desarrollar la aplicación de geolocalización con Salesforce CLI

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Describir el procedimiento de uso de la CLI para crear una clase de Apex.
  • Describir el procedimiento de uso del comando de la CLI para crear un componente Aura.

¿Qué vamos a desarrollar?

Vamos a desarrollar nuestra función, la aplicación de geolocalización. Para ello, vamos a escribir código de forma local y luego sincronizarlo con nuestra organización borrador, donde podrá probarlo. Todo esto lo haremos con Apex y varios componentes de Aura.

Para mantener el enfoque en Salesforce CLI y las organizaciones borrador, vamos a facilitarle el código de una aplicación de geolocalización que utiliza componentes de Aura.

En este diagrama se muestra una visión general de las interacciones entre componentes:Diagrama de control del flujo cuando un usuario realiza una búsqueda.

Con este diseño, su aplicación es flexible y más fácil de mantener. A medida que la aplicación y las necesidades de la empresa evolucionan, puede reemplazar el componente que muestra los datos sin tener que reestructurar el componente que consulta los datos. Además, este diseño permite reutilizar los componentes de forma independiente en otras aplicaciones.

  1. El componente Account Search (Búsqueda de cuenta) activa una acción del servidor para buscar cuentas.
  2. El método Apex devuelve los resultados de búsqueda de SOSL.
  3. El componente Account Search (Búsqueda de cuenta) activa un evento que notifica a otros componentes de los datos.
  4. Los componentes que gestionan el evento muestran los datos al usuario.

Crear el controlador de búsqueda de cuenta de Apex

En este paso, debe crear un controlador de Apex que permita a los componentes de Aura recuperar una lista de cuentas con información de su ubicación. Las clases de Apex se guardan en una carpeta denominada classes en la carpeta force-app/main/default de su proyecto de Salesforce DX. Puede usar la CLI para crear rápidamente una nueva clase de Apex.

  1. Desde el directorio del proyecto geolocation (geolocalización), ejecute este comando desde la raíz del proyecto.
    sf apex generate class --name AccountSearchController --output-dir force-app/main/default/classes
  2. Abra el archivo force-app/main/default/classes/AccountSearchController.cls y sustituya el código creado por este código. Luego guarde el archivo.
    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. Implemente, es decir, sincronice, el código nuevo en su organización borrador predeterminada que creó en la unidad anterior.
    sf project deploy start 
    El resultado del comando project deploy start debería ser algo parecido a esto:
    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 
    La organización borrador ya está actualizado con AccountSearchController.

Crear el evento de Aura cargado con cuentas

Teniendo en cuenta el principio de diseño de responsabilidad única, delegamos la visualización de los resultados de búsqueda mediante la activación de un evento que gestionan los componentes Account Map (Mapa de cuentas) y Account List (Lista de cuentas) que ha creado en pasos anteriores.

  1. Cree el evento en la carpeta "aura".
    sf lightning generate event --name AccountsLoaded --output-dir force-app/main/default/aura
  2. Abra el archivo force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt y sustituya el contenido por este código. Luego guarde el archivo.
    <aura:event type="APPLICATION">
        <aura:attribute name="accounts" type="Account[]"/>
    </aura:event>
  3. Implemente el nuevo código en la organización borrador.
    sf project deploy start
    El resultado del comando project deploy start debería ser algo parecido a esto:
    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 

Crear el componente de Aura de búsqueda de cuenta

A continuación, vamos a repetir gran parte de este proceso para crear un componente de tipo AccountSearch. Los archivos de componentes Aura se agrupan en paquetes, que se almacenan en carpetas dentro de la carpeta force-app/main/default/aura. De forma similar a las clases de Apex, puede crear un componente Aura desde la línea de comandos.

  1. Cree el componente en la carpeta aura.
    sf lightning generate component --name AccountSearch --output-dir force-app/main/default/aura
    Como verá, se crean todos los archivos necesarios. Carpeta AccountSearch expandida para ver los archivos en Visual Studio Code
  2. Abra el archivo force-app/main/default/aura/AccountSearch/AccountSearch.cmp y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    <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>
    Este componente contiene un campo de entrada para que el usuario introduzca términos de búsqueda, como el nombre o la dirección de la cuenta, y registra los controladores de eventos cuando se inicializa el componente o cambia el término de búsqueda.

  3. Abra el archivo force-app/main/default/aura/AccountSearch/AccountSearchController.js y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    ({
        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 );
        }
    })
    El controlador del cliente gestiona el evento de inicialización del componente y los casos en los que cambia el término de búsqueda. Este llama al archivo auxiliar para realizar la búsqueda en función de los datos que introduzca el usuario.

  4. Abra el archivo force-app/main/default/aura/AccountSearch/AccountSearchHelper.js y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    ({
        // 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. Implemente el nuevo código fuente en la organización borrador.
    sf project deploy start 
Verá el paquete de definición implementado en la organización borrador:
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

Crear el componente de Aura de lista de cuentas

A continuación, vamos a crear un componente Aura que muestre las cuentas en una tabla de datos. Para saber qué datos se deben mostrar, se suscribe al evento c:AccountsLoaded que creó en un paso anterior.

  1. Cree el componente en la carpeta aura.
    sf lightning generate component --name AccountList --output-dir force-app/main/default/aura
  2. Abra el archivo force-app/main/default/aura/AccountList/AccountList.cmp y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    <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>
    Este componente escucha el evento AccountsLoaded y muestra sus datos en una tabla. La lista se actualiza a medida que el usuario busca y encuentra distintos resultados.

  3. Abra el archivo force-app/main/default/aura/AccountList/AccountListController.js y sustituya el contenido por el siguiente código. Luego guarde el archivo.
    ({
        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 función onAccountsLoaded del controlador del cliente transforma los datos del evento en el formato que espera el componente <lightning:datatable>. La función onRowAction permite navegar hasta el registro de la cuenta de la fila con la que interactúa el usuario.

  4. Implemente el nuevo código en la organización borrador.
    sf project deploy start
Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios