Criar um aplicativo de geolocalização usando a Salesforce CLI

Vamos criar um recurso, nosso aplicativo de geolocalização, escrevendo código localmente e, em seguida, sincronizando-o com nossa organização temporária, onde poderemos testá-lo. Usaremos o Apex e vários componentes do Aura.

Para manter o foco na Salesforce CLI e nas organizações temporárias, vamos disponibilizar o código de um aplicativo de geolocalização que usa componentes do Aura.

Esse diagrama mostra uma visão geral de alto nível das interações dos componentes:

Esse design permite que seu aplicativo seja flexível e mais fácil de manter. Com a evolução do aplicativo e dos requisitos de negócios, você poderá substituir o componente que exibe os dados sem retrabalhar o componente que consulta os dados. Esse design também permite reutilizar esses componentes de forma independente em outros aplicativos.

1. O componente Account Search (Pesquisa de contas) chama uma ação do lado do servidor para pesquisar contas.
2. O método do Apex devolve os resultados da pesquisa SOSL.
3. O componente Account Search (Pesquisa de contas) ativa um evento que notifica outros componentes sobre os dados.
4. Os componentes que tratam do evento apresentam os dados para o usuário.

Nessa etapa, você cria um controlador do Apex que permite que seus componentes do Aura recuperem uma lista de contas com informações de localização. As classes do Apex são armazenadas em uma pasta chamada classes na pasta force-app/main/default do projeto Salesforce DX. Você pode usar a CLI para criar uma nova classe do Apex.

1. No diretório geolocation, execute esse comando na raiz do seu projeto.

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

2. Abra force-app/main/default/classes/AccountSearchController.cls, substitua o conteúdo pelo código a seguir e salve o arquivo.

   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. Agora, implante (sincronize) seu novo código na organização temporária padrão que você criou na unidade anterior.

   sf project deploy start 

   O resultado do comando project deploy start fica mais ou menos assim:

   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 

   Agora, sua organização temporária está atualizada com o AccountSearchController.

Em seguida, vamos repetir grande parte desse processo para criar um componente AccountSearch. Os arquivos de componentes do Aura são agrupados em pacotes que são armazenados em pastas na pasta force-app/main/default/aura. Semelhante às classes do Apex, você pode estruturar um componente do Aura na linha de comando.

1. Crie o componente na pasta aura:

   sf lightning generate component --name AccountSearch --output-dir force-app/main/default/aura

   Como você pode ver, todos os arquivos necessários são criados. 
2. Abra force-app/main/default/aura/AccountSearch/AccountSearch.cmp, substitua o conteúdo pelo código a seguir e salve o arquivo.

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

   Esse componente tem um campo de entrada para o usuário inserir termos de pesquisa, como nome da conta ou endereço, e registra manipuladores de eventos quando o componente é inicializado ou o termo de pesquisa é alterado.
   
   
3. Abra force-app/main/default/aura/AccountSearch/AccountSearchController.js, substitua o conteúdo pelo código a seguir e salve o arquivo.

   ({
       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 );
       }
   })

   O controlador do lado do cliente trata do evento de inicialização do componente e quando o termo de pesquisa é alterado. Ele chama o arquivo auxiliar para executar a pesquisa com base na entrada do usuário.
   
   
4. Abra force-app/main/default/aura/AccountSearch/AccountSearchHelper.js, substitua o conteúdo pelo código a seguir e salve o arquivo.

   ({
       // 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. Implante a nova origem na organização temporária.

   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

Em seguida, criamos um componente do Aura que exibe contas em uma tabela de dados. Para saber quais dados mostrar, ele se inscreve no evento c:AccountsLoaded que você criou na etapa anterior.

1. Crie o componente na pasta aura.

   sf lightning generate component --name AccountList --output-dir force-app/main/default/aura

2. Abra force-app/main/default/aura/AccountList/AccountList.cmp, substitua o conteúdo pelo código a seguir e salve o arquivo.

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

   Esse componente escuta o evento AccountsLoaded e exibe os dados do evento em uma tabela. Conforme o usuário pesquisa e encontra resultados diferentes, a lista é atualizada de forma adequada.
   
   
3. Abra force-app/main/default/aura/AccountList/AccountListController.js, substitua o conteúdo pelo código a seguir e salve o arquivo.

   ({
       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'
                   }
               });
           }
       }
   })

   A função onAccountsLoaded do controlador do lado do cliente transforma os dados do evento para o formato esperado pelo componente <lightning:datatable>. A função onRowAction navega até o registro da conta da linha com a qual o usuário interagiu.
   
   
4. Implante o novo código na organização temporária.

   sf project deploy start

• Documentação do Salesforce: Salesforce CLI Command Reference
• Documentação do Salesforce: Guia do desenvolvedor do Salesforce DX
• Marketplace do Visual Studio: Extensões do Salesforce para VS Code
• Vídeo do Salesforce: Salesforce CLI: Aproveitar todo o potencial do Salesforce com a linha de comando