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

Crearemos nuestra función, la aplicación de geolocalización, escribiendo el código de forma local y, luego, lo sincronizaremos con nuestra organización borrador donde podemos probarla. Estudiaremos los contenidos de Apex y varios componentes de Aura.

Para no perder el enfoque en Salesforce CLI y las organizaciones borrador, le proporcionaremos el código para una aplicación de geolocalización que utiliza componentes de Aura.

Este diagrama muestra una visión general de alto nivel de las interacciones del componente:

Este diseño ayuda a que su aplicación sea flexible y más fácil de mantener. A medida que su aplicación y los requisitos de negocios evolucionan, puede reemplazar el componente que muestra los datos sin adaptar el componente que consulta los datos. Este diseño también le permite reutilizar estos componentes de manera independiente en otras aplicaciones.

1. El componente de búsqueda de cuenta llama una acción del lado de servidor para buscar cuentas.
2. El método de Apex devuelve los resultados de la búsqueda con SOSL.
3. El componente de búsqueda de cuenta desencadena un evento en el que notifica otros componentes de los datos.
4. Los componentes que gestionan el evento muestran los datos al usuario.

En este paso, crea un controlador de Apex que permite que sus componentes de Aura recuperen una lista de cuentas con su información de ubicación. Las clases de Apex están almacenadas en una carpeta denominada classes en la carpeta force-app/main/default de su proyecto de Salesforce DX. Puede usar la CLI para generar rápidamente una nueva clase de Apex.

1. Desde el directorio del proyecto geolocation (geolocalización), ejecute este comando desde la raíz de su proyecto.

   sf apex generate class --name AccountSearchController --output-dir force-app/main/default/classes

2. Abra force-app/main/default/classes/AccountSearchController.cls y reemplace el código generado por este código. A continuación, 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. Ahora, implemente (sincronice) el código nuevo en la organización borrador predeterminada que creó en la unidad anterior.

   sf project deploy start 

   El resultado del comando project deploy start se ve así:

   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 

   Su organización borrador ya está actualizada con AccountSearchController.

A continuación, vamos a repetir gran parte de este proceso para crear un componente AccountSearch. Los archivos del componente de Aura están agrupados en paquetes que se almacenan en carpetas dentro de la carpeta force-app/main/default/aura. Tal como sucede con las clases de Apex, puede generar un componente de 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 puede ver, se crearon todos los campos obligatorios. 
2. Abra force-app/main/default/aura/AccountSearch/AccountSearch.cmp y reemplace su contenido por el siguiente código. A continuación, 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 tiene un campo de entrada para que el usuario ingrese términos de búsqueda, como la dirección o el nombre de la cuenta, y registra los controladores de evento cuando se inicializa el componente o se modifica el término de búsqueda.
   
   
3. Abra force-app/main/default/aura/AccountSearch/AccountSearchController.js y reemplace su contenido por el siguiente código. A continuación, 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 lado del cliente gestiona el evento de inicialización de componentes y cuándo se modifica el término de búsqueda. Llama al archivo de asistente para realizar la búsqueda según la entrada del usuario.
   
   
4. Abra force-app/main/default/aura/AccountSearch/AccountSearchHelper.js y reemplace su contenido por el siguiente código. A continuación, 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 la fuente nueva 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, creamos un componente de Aura que muestra cuentas en una tabla de datos. Para saber qué datos 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 force-app/main/default/aura/AccountList/AccountList.cmp y reemplace su contenido por el siguiente código. A continuación, 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 los datos del evento en una tabla. A medida que el usuario busca y encuentra distintos resultados, la lista se actualiza en consecuencia.
   
   
3. Abra force-app/main/default/aura/AccountList/AccountListController.js y reemplace su contenido por el siguiente código. A continuación, 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 lado del cliente transforma los datos del evento en el formato esperado por el componente <lightning:datatable>. La función onRowAction navega hacia el registro de cuenta de la fila con la que interactuó el usuario.
   
   
4. Implemente el código nuevo en la organización borrador.

   sf project deploy start

• Documentación de Salesforce: Salesforce CLI Command Reference
• Documentación de Salesforce: Guía del desarrollador de Salesforce DX
• Mercado de Visual Studio: Extensiones de Salesforce para VS Code
• Video de Salesforce: Salesforce CLI: Aprovechar la potencia de Salesforce mediante la línea de comandos