Create a Lightning Web Component

Nota

Deseja aprender em português (Brasil)? Nesse emblema, as validações dos desafios práticos do Trailhead funcionam em inglês. As traduções são fornecidas entre parênteses como referência No Trailhead Playground, (1) mude a localidade para Estados Unidos, (2) mude o idioma para inglês e (3) copie e cole apenas os valores em inglês. Siga as instruções aqui.

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

Nesta etapa, você aprenderá a usar as ferramentas que instalou anteriormente.

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árias arquivos de configuração locais e no código que você deseja implantar. Na terminologia da Salesforce, chamamos isso de metadados de código, que é 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.

Usaremos o Visual Studio Code para criar um projeto.

Abra o Visual Studio Code.
Pressione Command+Shift+P no macOS ou Ctrl+Shift+P no Windows ou no Linux e insira create project (criar projeto). Selecione SFDX: Create Projecte pressione Enter.
Deixe a seleção de tipo de projeto padrão Standard (Padrão) tal como está, e pressione Enter.
Insira trailhead como nome do projeto e pressione Enter.
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 é autenticar o 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.

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

Autenticar o 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.

Criar uma organização temporária

No Visual Studio Code, pressione Command+Shift+P no Mac ou Ctrl+Shift+P no Windows ou no Linux.
Insira sfdx.
Selecione SFDX: Create a Default Scratch Org... (Criar uma organização temporária padrão...).
Pressione Enter para aceitar o arquivo project-scratch-def.json padrão.
Pressione Enter para aceitar o alias de organização temporária padrão trailhead.
Pressione Enter para aceitar a duração da organização temporária padrão de 7 dias.

Aguarde; a criação de uma organização temporária pode levar um minuto. A mensagem de sucesso terá o seguinte formato no painel de saída do VS Code:

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

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:

Modo de exibição do File Explorer do projeto Salesforce DX no Visual Studio Code, que mostra subdiretórios incluindo .sfdx, .vscode, config e force-app.

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

Abra o Visual Studio Code.
Pressione Command+Shift+P no macOS ou Ctrl+Shift+P no Windows ou no Linux.
Insira focus terminal e selecione Terminal: Focus Terminal.
A guia Terminal (ao lado de Output (Saída)) está selecionada.
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 necessários para seu primeiro componente Web do Lightning.

Estrutura de diretórios de metadados com a pasta do componente Web do Lightning expandida

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 você viu, é fácil usar a CLI do Salesforce no seu processo de desenvolvimento. Se quiser usar o Visual Studio Code para isso, clique com o botão direito do mouse na pasta lwc ou abra a Paleta de comandos no Visual Studio Code. Ambos fornecem a opção SFDX: Create Lightning Web Component, que invoca a CLI do Salesforce.

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.

Abra a pasta myFirstWebComponent, que você acabou de criar na subpasta lwc
Clique em myFirstWebComponent.js-meta.xml.

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

Pressione CMD + 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.

No Visual Studio Code, clique em myFirstWebComponent.js.

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',
        },
    ];
}

Pressione CMD+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 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 corrigiria imediatamente.

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

No Visual Studio Code, clique em myFirstWebComponent.html.

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>

Pressione CMD + 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.

Arquivo de modelo HTML aberto com erro na linha 4 em destaque

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 e a implantação falharia. Você pode encontrar implantações com falha na vida real ou não. É importante que você preste atenção aos erros exibidos no IDE e corrija-os imediatamente.

Na próxima e última etapa, corrigiremos nosso código.