Criar um componente Web do Lightning

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.

Nesta etapa, saiba como usar as ferramentas instaladas.

Criar um projeto do Salesforce DX

A base para interagir com uma organização usando a CLI do Salesforce é um projeto Salesforce DX. Um projeto consiste em vários arquivos de configuração locais e o código que você deseja implantar. Na terminologia da Salesforce, chamamos esse código de metadados, que são a base da Salesforce Platform. Se o Salesforce é novidade para você, confira a trilha Desenvolvedor iniciante da plataforma para saber mais sobre nossa abordagem voltada para metadados.

Para criar um projeto:

1. Abra o Visual Studio Code.
   
2. Pressione Command + Shift + P no macOS ou Ctrl + Shift + P no Windows ou no Linux e insira create project (criar projeto).
   
3. Selecione SFDX: Create Projecte pressione Enter.
   
4. Deixe a seleção de tipo de projeto padrão Standard (Padrão) tal como está, e pressione Enter.
   
5. Insira trailhead como nome do projeto e pressione Enter.
   
6. Escolha um diretório em seu computador local onde o projeto será armazenado. Clique em Create Project (Criar projeto).
   

Ótimo! Você criou seu primeiro projeto do Salesforce DX para trabalhar com componentes Web do Lightning. O Visual Studio Code abrirá automaticamente o novo projeto para você.

Autorizar seu Dev Hub

A próxima etapa é autorizar um Dev Hub. Se você está usando um Trailhead Playground, pode aprender como obter as credenciais para a próxima etapa em Obter o nome de usuário e a senha do Trailhead Playground.

1. No Visual Studio Code, pressione Command+Shift+P no Mac ou Ctrl+Shift+P no Windows ou no Linux.
   
2. Insira sfdx.
   
3. Selecione SFDX: Authorize a Dev Hub (Autorizar Dev Hub).
   
4. Insira trailheadOrg como o alias da organização e pressione Enter.
   
5. Faça login usando suas credenciais da organização do Dev Hub.
   
6. Clique em Allow (Permitir).
   
   
7. Depois de autenticar no navegador, a CLI se lembra das credenciais do Dev Hub. A mensagem de sucesso terá o seguinte formato:
   
   

Autorizar um Dev Hub é uma pré-condição para a criação de uma organização temporária, que é um ambiente provisório de desenvolvimento na Salesforce Platform. Criaremos uma na próxima etapa.

Habilitar o Local Dev

Antes de criar a organização temporária, habilite o Local Dev no arquivo de configuração JSON do projeto. Siga estas etapas.

1. Em seu projeto do SFDX, abra o arquivo config/project-scratch-def.json.
   
2. Na seção lightningExperienceSettings do arquivo, adicione a chave "enableLightningPreviewPref" e defina-a como true.
   
3. Salve o arquivo.
   

Veja como seu código deve ser aninhado:

{
  "orgName": "My Company",
  "edition": "Developer",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}

O processo para habilitar o Local Dev para uma organização de sandbox é diferente. Ele requer algumas configurações em Setup (Configuração) que podem ser consultadas aqui.

Criar uma organização temporária

1. No Visual Studio Code, clique em Command + Shift + P no MacOS ou Ctrl + Shift + P no Windows ou no Linux, digite focus terminal e selecione Terminal: Focus Terminal.
   
2. No terminal, insira sf org create scratch --definition-file config/project-scratch-def.json --alias scratchOrg --target-dev-hub trailheadOrg e pressione Enter.
   Esse comando da CLI cria uma organização temporária usando seu arquivo project-scratch-def.json e o alias scratchOrg. Seja paciente. A criação de uma organização temporária pode demorar algum tempo. Você deverá ver este resultado em seu terminal se a organização temporária tiver sido criada com sucesso.
   
   

Agora você já pode começar a desenvolver seu primeiro componente Web do Lightning. Se quiser saber mais sobre o Salesforce DX, confira o Desenvolvimento de aplicativos com o Salesforce DX.

Criar um componente Web do Lightning

Criar um componente Web do Lightning é um processo simples. E a CLI do Salesforce já criou uma estrutura de projeto que ajuda a tornar a introdução mais fácil.

A estrutura da pasta fica assim:

O projeto que criamos tem uma pasta especial, force-app/main/default. Essa pasta, chamada de diretório do pacote, contém todos os metadados do seu projeto do Salesforce DX atual. Como os componentes Web do Lightning também são metadados, eles ficam armazenados em uma subpasta chamada lwc. Na próxima etapa, adicionaremos um componente Web do Lightning a essa pasta.

Há também dois arquivos, .eslintrc e jsconfig.json, na pasta lwc. Vamos explorá-los mais tarde neste projeto.

Podemos usar o Visual Studio Code para criar um componente Web do Lightning, assim como fizemos para criar o projeto Salesforce DX. (Você poderia usar a Salesforce CLI diretamente, mas agora a usaremos por meio do terminal incorporado no Visual Studio Code).

1. Abra o Visual Studio Code.
   
2. No Visual Studio Code, clique em Command + Shift + P no MacOS ou Ctrl + Shift + P no Windows ou no Linux, digite focus terminal e selecione Terminal: Focus Terminal.
   
3. Na guia Terminal, insira sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc e pressione Enter.
   

Isso cria os arquivos para seu primeiro componente Web do Lightning.

Esses são os parâmetros que você usou no comando.

• -n define o nome da pasta do componente Web do Lightning e seus arquivos.
  
• -d define o diretório de destino onde o componente Web do Lightning deve ser criado. O diretório de destino deve se chamar lwc.
  
• --type especifica que você deseja criar um componente Web do Lightning.
  

Como adicionar código e metadados ao seu primeiro componente Web do Lightning

Vamos dar uma olhada agora nos arquivos que compõem um componente Web do Lightning. Para isso, você vai copiar e colar alguns HTML, JavaScript e XML que preparamos para você. Vamos começar com o arquivo myFirstWebComponent.js-meta.xml.

1. Abra a pasta myFirstWebComponent que você acabou de criar na subpasta lwc.
   
2. Clique em myFirstWebComponent.js-meta.xml.
   
3. Substitua o conteúdo do arquivo XML por esta marcação XML:
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>51.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__RecordPage</target>
          <target>lightning__HomePage</target>
      </targets>
      <targetConfigs>
          <targetConfig targets="lightning__AppPage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
          <targetConfig targets="lightning__RecordPage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
          <targetConfig targets="lightning__HomePage">
              <supportedFormFactors>
                  <supportedFormFactor type="Small" />
                  <supportedFormFactor type="Large" />
              </supportedFormFactors>
          </targetConfig>
      </targetConfigs>
   </LightningComponentBundle>

   Copy
4. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

O arquivo que você acabou de atualizar é o arquivo de definição de metadados. Ele contém vários elementos de configuração que controlam, por exemplo, onde você pode adicioná-lo à interface de usuário do Salesforce usando o Criador de aplicativo Lightning (alvos). Você pode ler mais sobre as opções de configuração de metadados na documentação.

Em seguida, atualizamos o arquivo JavaScript do seu componente Web do Lightning.

O código JavaScript e a marcação HTML que você está prestes a copiar e colar têm alguns erros incorporados. Portanto, não se preocupe com as linhas onduladas vermelhas que você verá. Mais adiante neste projeto, você resolverá os erros usando os recursos do Visual Studio Code combinados com a extensão Componentes Web do Salesforce Lightning.

1. No Visual Studio Code, clique em myFirstWebComponent.js.
   
2. Substitua todo o conteúdo do arquivo por este código:
   

   import { LightningElement } from 'lwc';
   export default class MyFirstWebComponent extends LightningElement {
       @track
       contacts = [
           {
               Id: 1,
               Name: 'Amy Taylor',
               Title: 'VP of Engineering',
           },
           {
               Id: 2,
               Name: 'Michael Jones',
               Title: 'VP of Sales',
           },
           {
               Id: 3,
               Name: 'Jennifer Wu',
               Title: 'CEO',
           },
       ];
   }

   Copy
3. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

Depois de salvar o arquivo, você notará imediatamente algumas coisas.

• A palavra anotada @track está sublinhada com uma linha ondulada vermelha.
  
• A cor do nome do arquivo JavaScript no Explorer mudou para vermelho.
  

Dependendo da sua configuração, você poderá ver apenas um erro.

Ambos são indicadores de que algo no código JavaScript não está correto. Como bom desenvolvedor, você normalmente o corrige imediatamente.

Mas, por enquanto, ignore os problemas. Em vez disso, adicione marcação HTML ao arquivo de modelo dos componentes Web.

1. No Visual Studio Code, clique em myFirstWebComponent.html.
   
2. Insira esta marcação dentro das marcas <template></template> existentes:
   

   <lightning-card title="ContactInformation" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
         <template for:each={} for:item="contact">
            <div>
               {contact.Name}, {contact.Title}
            </div>
         </template>
      </div>
   </lightning-card>

   Copy
3. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

Novamente, você verá uma indicação de que algo na marcação HTML não está como deve ser.

Vamos também ignorar isso (por enquanto).

Normalmente, a próxima etapa seria implantar o projeto em sua organização. Mas o código está cheio de erros, portanto, a implantação falharia. Você poderá ou não encontrar implantações que falharam. É importante que você preste atenção aos erros exibidos no IDE e corrija-os imediatamente.

Na próxima etapa, corrigiremos nosso código.