Analisar seu código e implantá-lo em sua organização

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.

Você instalou as ferramentas que recomendamos para desenvolver componentes Web do Lightning. E copiou e colou alguns códigos desfeitos, o que sabemos que resultaria em uma implantação com falha. Você provavelmente diria que nunca fez isso na vida real, certo?

Como corrigir erros de JavaScript

A tarefa mais importante como desenvolvedor, depois de pesquisar na Web por código que, assim esperamos, funcione, é programar código que funcione por conta própria. Vamos corrigir os erros que apresentamos antes, começando com o arquivo JavaScript.

1. Abra o Visual Studio Code.
   
2. Clique em myFirstWebComponent.js.
   
3. Passe o mouse sobre a palavra com sublinhado vermelho track. Isso mostra as mensagens de erro relacionadas a este erro específico:
   

@track
c:\Git\set-up-lwc-dev-tools\myFirstWebComponent.js: LWC1102: Invalid ‘track’ decorator usage.
Supported decorators (api, wire, track) should be imported from “lwc” lwc

4. Clique na guia Problems (Problemas) para mostrar todos os erros que aparecem nos arquivos que você abriu no momento. Você verá algo assim:
   

O arquivo atual e a guia Problems (Problemas) mostram os erros detectados em seu código.

A primeira mensagem de erro indica que é o resultado de um requisito do mecanismo de Componentes Web do Lightning. Entre esses erros inclui-se “LWC” seguido de um número. Se você olhar atentamente para o código, verá na primeira linha que estamos importando o LightningElement do mecanismo lwc, mas não estamos importando track. Vamos corrigir isso:

• Clique logo após a palavra LightningElement (dentro das chaves).
  
• Insira track (faixa) e não se esqueça de separar as duas palavras com uma vírgula. Seu código deve ficar assim:
  import { LightningElement, track } from 'lwc';
• Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
  

Os dois erros e as linhas vermelhas desaparecem.

O IDE valida o conteúdo de um arquivo durante a digitação por padrão. Você pode definir isso como uma preferência no Visual Studio Code para validar enquanto você digita ou depois de salvar um arquivo.

Mas por que os dois erros desapareceram?

A extensão Componentes Web do Lightning é fornecida por padrão com o ESLint. O ESLint é uma ferramenta de lint amplamente usada que avalia código em relação a erros, melhores práticas de programação e muito mais. Para poder criar bons códigos, a Salesforce oferece a você, como desenvolvedor de componentes Web do Lightning, regras específicas do ESLint prontas para usar. E se você cometer um erro, as regras de lint ajudam a vê-lo antes de implantar seu código. Não é ótimo?

A mensagem de erro acima indica que você definiu uma propriedade (neste caso, a trackdo decorador), mas não a declarou antes de usá-la. Essa é uma das muitas regras de lint muito úteis que ajudam você a manter seu código limpo e fácil de manter.

Você se lembra do arquivo .eslintrc que foi adicionado automaticamente à pasta de metadados lwc ? Esse é o arquivo de configuração, que define as regras de lint específicas do Salesforce:

{
   "extends": ["@salesforce/eslint-config-lwc/recommended"]
}

O Salesforce oferece conjuntos de regras diferentes, incluindo base (base), recommended (recomendado)e extended (estendido). Como essas regras de lint são específicas a cada projeto, você pode usar conjuntos de regras diferentes para projetos diferentes.

Ao implantar componentes Web do Lightning, o Salesforce valida seu código automaticamente em relação à regra de lint @salesforce/eslint-config-lwc/base. Lembre-se disso se você mesmo reconfigurar as regras de lint.

Se quiser ler mais sobre o ESLint ou as regras de lint fornecidas pelo Salesforce, confira o repositório do GitHub.

Agora que temos um arquivo JavaScript em funcionamento, vamos corrigir a marcação HTML em seu modelo de componente Web.

Como corrigir erros de modelo HTML

Agora que você corrigiu os erros no arquivo JavaScript, aprenderá a usar o recurso IntelliSense do Visual Studio Code em conjunto com a extensão Componentes Web do Salesforce Lightning.

1. Abra myFirstWebComponent. html no Visual Studio Code.
   
2. Coloque o cursor entre as chaves vazias do atributo for:each sublinhado em vermelho.
   
3. Pressione Ctrl + Espaço. Você verá a lista suspensa do IntelliSense.
   

4. Selecione contact (contato) e pressione Enter para inserir contact (contato).
   
5. Adicione um s para usar o plural: contacts (contatos).
   
6. Em seguida, adicione este atributo à marca div em vermelho: key={contact.Id}
7. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

O código deve ficar assim:

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

Você viu duas coisas enquanto corrigia o código.

Primeiro, você vê o IntelliSense em expressões dentro da marcação HTML. A extensão Componentes Web do Lightning fornece o IntelliSense, o que significa que, se você adicionar outras propriedades ou funções ao seu arquivo JavaScript, elas estarão automaticamente disponíveis no arquivo de modelo. Isso economiza muito tempo!

Em segundo lugar, você experimentou a validação instantânea do código, ou neste caso, a marcação. É o mesmo do arquivo JavaScript. Se você não tiver um atributo obrigatório, por exemplo, o IDE irá informá-lo.

Também é possível obter o IntelliSense em todos os componentes do Lightning de base no arquivo de modelo. Quando você começa a digitar <lightning, recebe uma lista assim.

E quando você passa o cursor sobre a marcação existente, ela fornece informações preciosas sobre o componente de base selecionado.

Uma das razões para mensagens de aviso sobre código ou tokens é uma instalação desatualizada da Salesforce CLI. O código do componente gerado pela CLI está atualizado apenas até a instalação da sua CLI. O SLDS Validator (um dos itens do Pacote de Extensões do Salesforce) avisa sobre o código desatualizado, então é muito provável que uma CLI mais antiga resulte em mais avisos.

Neste emblema, você pode desconsiderar os avisos de tokens de design porque eles não impedirão você de concluir as etapas. No entanto, fora deste emblema, você deve investigar todas as mensagens de aviso e manter a Salesforce CLI atualizada.

Implantar e configurar seu novo componente Web do Lightning

Agora que todo o seu código foi corrigido, é hora de efetuar push de seus metadados locais para sua organização temporária.

1. Para implementar os metadados em sua organização, insira este comando na guia Terminal:
   sf project deploy start --target-org scratchOrg (iniciar implantação de projeto sf) na organização de destino --target-org scratchOrg)
2. Pressione Enter.
   

Depois que seus metadados forem enviados com sucesso para sua organização temporária, você poderá adicionar o componente ao layout de registro de conta.

1. Para abrir a organização temporária, insira este comando na guia Terminal:
   sf org ope --target-org scratchOrg (abrir organização sf --target-org scratchOrg)
2. Pressione Enter.
   

O Local Dev está habilitado para sua organização temporária. No entanto, você não verá uma visualização em tempo real até executar o comando da CLI do Local Dev, que veremos em breve.

Agora, vamos configurar a página Account record (Registro de conta).

1. No Iniciador de aplicativos (), encontre e selecione Sales (Vendas).
   
2. Na guia Accounts (Contas), clique no botão New (Nova) para criar uma conta.
   
3. Insira Component Developers (Desenvolvedores de componentes) como Nome da conta e clique em Save (Salvar).
   
4. Clique em Setup (Configuração) () e selecione Edit Page (Editar página) para abrir o Criador de aplicativo Lightning.
   
5. Arraste o componente myFirstWebComponent (em Custom [Personalizar]) para a página.
   
6. Na barra de menus do Criador de aplicativo Lightning, clique em Desktop para abrir um menu suspenso e selecione Phone (Telefone).
   
7. Novamente, arraste o componente myFirstWebComponent para a página.
   
8. Clique em Save (Salvar) e clique em Activate (Ativar).
   
9. Clique em Assign as Org Default (Atribuir como padrão da organização) e, em seguida, selecione Desktop and phone (Desktop e telefone).
   
10. Clique em Next (Avançar) e em Save (Salvar).
    
11. Clique em Back (Voltar) () para voltar a Account record (Registro de conta).
    Seu componente Web do Lightning deverá ter esta aparência:
    
    

Na próxima e última etapa, saiba como realizar uma visualização local do seu aplicativo Lightning no navegador usando as ferramentas da CLI do Local Dev.

Não é possível verificar seu trabalho em uma organização temporária, mas você ainda pode clicar em Verify Step (Verificar etapa) para ir para a próxima etapa do projeto.