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

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:

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.

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.

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. 
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 

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

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

• Documentación de Salesforce: Referencia de comandos de Salesforce CLI
• Documentación de Salesforce: Guía del desarrollador de Salesforce DX
• Visual Studio Marketplace: Salesforce Extensions for VS Code (Visual Studio Marketplace: extensiones de Salesforce para Visual Studio Code)
• Vídeo de Salesforce: Salesforce CLI: Harnessing the Power of Salesforce Through the Command Line (Salesforce CLI: aprovechando la potencia de Salesforce con la línea de comandos)