Comunicar-se com componentes em todo o aplicativo

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Atualizar o componente de lista de ursos

Os guardas florestais têm mais uma solicitação para você. Eles gostariam de localizar os ursos em um mapa quando filtram a lista de ursos. Você precisa criar um componente de mapa de ursos e modificar sua lista de ursos para que ela envie eventos ao mapa. Vamos começar atualizando nossa lista de ursos.

1. Edite o arquivo bearList.js.
2. Adicione o seguinte código antes de import { NavigationMixin } from 'lightning/navigation';:

   import { publish, MessageContext } from 'lightning/messageService';
   import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';

   A primeira importação traz utilitários do Lightning Message Service (LMS). Esse serviço permite que você publique mensagens em componentes irmãos em uma página do Lightning por um canal de mensagens do Lightning.
   A segunda importação é um canal de mensagens do Lightning que foi incluído no projeto base que você recuperou do GitHub.
3. Substitua essas duas linhas...

   @wire(searchBears, {searchTerm: '$searchTerm'})
   bears;

   ...pelo seguinte código:

   bears;
   @wire(MessageContext) messageContext;
   @wire(searchBears, {searchTerm: '$searchTerm'})
   loadBears(result) {
     this.bears = result;
     if (result.data) {
       const message = {
         bears: result.data
       };
       publish(this.messageContext, BEAR_LIST_UPDATE_MESSAGE, message);
     }
   }

   Destaques do código:
   • Recuperamos o contexto da mensagem do Lightning e o armazenamos em uma propriedade messageContext.
   • Usamos uma função conectada para capturar dados da lista de ursos recebidos e acionar uma mensagem do Lightning BearListUpdate__c personalizada com a lista de registros de urso.
   • Transmitimos searchTerm como um parâmetro dinâmico a nosso adaptador searchBears conectado para que cada vez que searchTerm muda, loadBears seja executado novamente e uma nova mensagem seja acionada com os novos resultados da pesquisa.
   • Usamos a função publish que importamos do LMS para acionar uma mensagem do Lightning BearListUpdate__c com a lista de ursos.

Criar o componente de mapa de ursos

1. No VS Code, clique com o botão direito do mouse na pasta lwc e clique em SFDX: Create Lightning Web Component (Criar componente Web do Lightning).
2. Dê ao componente o nome bearMap.
3. Edite o arquivo bearMap.js-meta.xml e substitua <isExposed>false</isExposed> por estas linhas.

   <isExposed>true</isExposed>
   <targets>
   	<target>lightning__AppPage</target>
   	<target>lightning__RecordPage</target>
   	<target>lightning__HomePage</target>
   </targets>

   Isso permite que seu componente seja colocado em qualquer tipo de página.
   
4. Substitua o conteúdo de bearMap.html por:

   <template>
   	<article class="slds-card">
   		<lightning-map
   			map-markers={mapMarkers}
   			zoom-level="11"
   			markers-title="Bears">
   		</lightning-map>
   	</article>
   </template>

   Destaques do código:
   • Mostramos um componente de cartão que contém um mapa.
   • O mapa mostra itens de uma matriz de mapMarkers.
5. Substitua o conteúdo de bearMap.js por:

   import { LightningElement, wire } from 'lwc';
   import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService';
   import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
   export default class BearMap extends LightningElement {
     mapMarkers = [];
     subscription = null;
     @wire(MessageContext)
     messageContext;
     connectedCallback() {
       // Subscribe to BearListUpdate__c message
       this.subscription = subscribe(
           this.messageContext,
           BEAR_LIST_UPDATE_MESSAGE,
           (message) => {
               this.handleBearListUpdate(message);
           });
     }
     disconnectedCallback() {
       // Unsubscribe from BearListUpdate__c message
       unsubscribe(this.subscription);
       this.subscription = null;
     }
     handleBearListUpdate(message) {
       this.mapMarkers = message.bears.map(bear => {
         const Latitude = bear.Location__Latitude__s;
         const Longitude = bear.Location__Longitude__s;
         return {
           location: { Latitude, Longitude },
           title: bear.Name,
           description: `Coords: ${Latitude}, ${Longitude}`,
           icon: 'utility:animal_and_nature'
         };
       });
     }
   }

   Destaques do código:
   • Implementamos duas funções de gancho de ciclo de vida de componente: connectedCallback e disconnectedCallback. Elas são chamadas automaticamente quando o componente carrega e descarrega. Usamos essas duas funções para assinar e cancelar a assinatura de nossa mensagem do Lightning BearListUpdate__c personalizada.
   • Assim que recebemos uma mensagem BearListUpdate__c, a função handleBearListUpdate é chamada com a lista de registros de ursos que fazem parte do filtro atualmente. handleBearListUpdate cria uma lista de marcadores de mapa que é transmitida à propriedade mapMarkers e exibida no nosso componente de mapa.
6. Implante o código atualizado na organização. Clique com o botão direito do mouse na pasta padrão e clique em SFDX: Deploy Source to Org (Implantar fonte na organização).

Adicionar o componente de mapa de ursos à página inicial do aplicativo

Vamos adicionar nosso novo componente à página inicial do aplicativo.

1. De volta à organização, no App Launcher (Iniciador de aplicativos) (), encontre e selecione Ursus Park.
2. Clique em Setup (Configuração) () e selecione Edit Page (Editar página).
3. Em Custom Components (Componentes personalizados), encontre seu componente bearMap e arraste-o para o canto superior direito da página.
4. Clique em Save (Salvar) e em Back (Voltar) para retornar à página inicial e verificar se o mapa se atualiza quando você filtra pela lista de ursos.

Sumário do projeto

E isso é tudo, pessoal. Os guardas florestais agora podem facilmente rastrear ursos graças aos seus esforços.

Você usou todos os conceitos principais dos componentes Web do Lightning em todo este projeto: associação de dados, expressões, renderização condicional, Apex conectado e imperativo, composição de componentes e eventos intercomponentes.

Tire o melhor proveito desse conhecimento criando seus próprios aplicativos flexíveis com os Componentes Web do Lightning. Feliz código!