Criar um aplicativo de geolocalização usando a Salesforce CLI
Objetivos de aprendizagem
- 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:
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.
- O componente Account Search (Pesquisa de contas) chama uma ação do lado do servidor para pesquisar contas.
- O método do Apex devolve os resultados da pesquisa SOSL.
- O componente Account Search (Pesquisa de contas) ativa um evento que notifica outros componentes sobre os dados.
- 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.
- No diretório
geolocation
, execute esse comando na raiz do seu projeto. - Abra
force-app/main/default/classes/AccountSearchController.cls
, substitua o conteúdo pelo código a seguir e salve o arquivo. - Agora, implante (sincronize) seu novo código na organização temporária padrão que você criou na unidade anterior.
project deploy start
fica mais ou menos assim:
O resultado do comando
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.
- Crie o evento na pasta aura.
- Abra
force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
, substitua o conteúdo pelo código a seguir e salve o arquivo. - Implante seu novo código na organização temporária.
project deploy start
fica mais ou menos assim:
O resultado do comando
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.
- Crie o componente na pasta
aura
: Como você pode ver, todos os arquivos necessários são criados. - Abra
force-app/main/default/aura/AccountMap/AccountMapController.js
, substitua o conteúdo pelo código a seguir e salve o arquivo. 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.
- Abra
force-app/main/default/aura/AccountSearch/AccountSearchController.js
, substitua o conteúdo pelo código a seguir e salve o arquivo. 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.
- Abra
force-app/main/default/aura/AccountSearch/AccountSearchHelper.js
, substitua o conteúdo pelo código a seguir e salve o arquivo. - Implante a nova origem na organização temporária.
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.
- Crie o componente na pasta
aura
. - Abra
force-app/main/default/aura/AccountList/AccountList.cmp
, substitua o conteúdo pelo código a seguir e salve o arquivo. 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.
- Abra
force-app/main/default/aura/AccountList/AccountListController.js
, substitua o conteúdo pelo código a seguir e salve o arquivo. A funçãoonAccountsLoaded
do controlador do lado do cliente transforma os dados do evento para o formato esperado pelo componente<lightning:datatable>
. A funçãoonRowAction
navega até o registro da conta da linha com a qual o usuário interagiu.
- Implante o novo código na organização temporária.