Skip to main content
Junte-se a nós na TDX em São Francisco ou no Salesforce+ nos dias 5 e 6 de maio e assista à Developer Conference for the AI Agent Era. Registre-se agora.

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

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Descrever como usar a CLI para criar uma classe do Apex.
  • Descrever como usar o comando da CLI para criar um componente do Aura.

O que estamos criando?

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:Diagrama de controle de fluxo quando o usuário realiza uma pesquisa.

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.

Criar o controlador do Apex de pesquisa de contas

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.

Criar o evento do Aura de contas carregadas

Usando o princípio de design de responsabilidade única, delegamos a apresentação dos resultados da pesquisa ativando um evento que é tratado pelos componentes Account Map (Mapa de contas) e Account List (Lista de contas) criados em etapas posteriores.

  1. Crie o evento na pasta aura.
    sf lightning generate event --name AccountsLoaded --output-dir force-app/main/default/aura
  2. Abra force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt, substitua o conteúdo pelo código a seguir e salve o arquivo.
    <aura:event type="APPLICATION">
        <aura:attribute name="accounts" type="Account[]"/>
    </aura:event>
  3. Implante seu novo código na organização temporária.
    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 AccountsLoaded AuraDefinitionBundle force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
    | Created AccountsLoaded AuraDefinitionBundle force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt-meta.xml 

Criar o componente do Aura de pesquisa de contas

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. Pasta AccountSearch expandida para mostrar arquivos no Visual Studio Code
  2. Abra force-app/main/default/aura/AccountMap/AccountMapController.js, 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 
Você vê o pacote de definição implantado na organização temporária:
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

Criar o componente do Aura de lista de contas

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
Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback