Visualizar seu componente usando o Local Dev

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.

Anteriormente neste projeto, você criou uma organização temporária (alias scratchOrg), um aplicativo Lightning e um componente Web do Lightning (myFirstWebComponent). Agora, você executará o Local Dev para exibir seu componente em uma visualização em tempo real do aplicativo Lightning.

Executar o Local Dev para um aplicativo Lightning em um ambiente de desktop

Com o Local Dev, você pode executar uma visualização em tempo real do seu aplicativo Lightning em um ambiente de desktop ou Aplicativo móvel Salesforce (iOS ou Android). A visualização é atualizada automaticamente quando seus componentes locais são alterados. Assim, você não precisa implantar código ou atualizar a página do navegador. Há vários indicadores de comando para executar uma visualização de desktop e uma visualização móvel.

Vamos visualizar o aplicativo Sales Lightning em um ambiente de desktop usando o Local Dev. Sua organização temporária vem com alguns aplicativos padrão que você pode usar.

1. No Visual Studio Code, clique em Command + Shift + P no MacOS ou Ctrl + Shift + P no Windows ou no Linux, digite new terminal (novo terminal) e selecione Terminal: Create New Terminal (Terminal: Criar novo terminal).
   
2. Verifique se tem a versão mais recente do comando do Local Dev. Na guia Terminal, insira sf update e pressione Enter.
   
3. Quando a atualização estiver concluída, na mesma guia Terminal, insira sf lightning dev app --target-org scratchOrg --device-type desktop e pressione Enter.
   
4. Quando for solicitado que você selecione um aplicativo do Lightning Experience para visualizar, use as teclas de seta para selecionar Sales (Vendas) e pressione Enter.
   

Se o comando for executado com êxito, ele abrirá uma nova guia no navegador com uma visualização da página Seller Home (Início do vendedor) da sua organização. O Local Dev está habilitado para esta organização temporária. Estes são os parâmetros que você usou no comando.

• --target-org define qual organização de destino você deseja visualizar. Defina este indicador como scratchOrg.
  
• --device-type define o ambiente em que a visualização é executada. A definição desse indicador como desktop garantiu que a visualização fosse executada em um ambiente de desktop.
  

Para saber mais sobre outros indicadores opcionais para o comando sf lightning dev app, consulte o Guia do desenvolvedor de componentes Web do Lightning: Visualizar um aplicativo Lightning (geralmente disponível).

Agora vamos editar seu componente e ver como a visualização do Local Dev será atualizada em tempo real.

1. No seu navegador, clique na guia Accounts (Contas) e abra o registro Component Developers (Desenvolvedores de componentes).
   
2. No Visual Studio Code, abra myFirstWebComponent.html.
   
3. No elemento <lightning-card>, altere o valor de title (título) de “ContactInformation” para “Contact Information”. O código atualizado deverá ter esta aparência:
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

Observe a visualização do aplicativo no navegador e veja como o título do componente é atualizado automaticamente como resultado da alteração local. Não foi necessário reimplantar o aplicativo ou atualizar manualmente a página para ver a revisão.

Executar o Local Dev para um aplicativo Lightning em um ambiente de iOS (somente macOS)

Com o Local Dev, você pode visualizar seu projeto em um simulador do iOS ou em um emulador Android. Vamos dar uma olhada em como executar uma visualização do mesmo aplicativo Lightning em um ambiente iOS.

Nesta seção, falaremos apenas sobre o simulador do iOS, mas você deve seguir o mesmo processo para usar o emulador Android. Para saber mais sobre como usar o Local Dev com o Android Studio, consulte Emuladores Android.

Os usuários de Mac podem executar um simulador do iOS para o Local Dev usando o Xcode. Se você ainda não tiver o Xcode instalado, instale-o na Mac App Store e conclua o processo de configuração inicial. Não se esqueça de baixar simuladores do iOS para dispositivos móveis.

Quando terminar de instalar o Xcode, abra o Visual Studio Code. É hora de executar seu aplicativo Lightning em um simulador do iPhone.

1. No Visual Studio Code, clique em Command + Shift + P, digite new terminal (novo terminal) e selecione Terminal: Create New Terminal (Terminal: Criar novo terminal).
   
2. Na janela do novo terminal, execute sf lightning dev app --target-org scratchOrg --device-type ios.
   
3. Quando for solicitado que você selecione um aplicativo do Lightning Experience para visualizar, selecione Sales (Vendas) e pressione Enter.
   
4. Quando for solicitado que você selecione um dispositivo para usar na visualização, selecione um iPhone na lista de opções válidas.
   
5. Quando for solicitado que você baixe e instale o Aplicativo móvel Salesforce, insira y e pressione Enter.
   

Esta é a aparência do resultado do terminal quando o comando Local Dev é executado com êxito.

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

O aplicativo Salesforce deverá abrir automaticamente no simulador do iPhone. Aceite os Termos de uso do aplicativo. Em seguida, o simulador deve exibir a página de login do Salesforce.

Siga estas etapas para abrir sua organização temporária no aplicativo.

1. No canto superior direito do simulador, clique em Settings (Configurações) () para abrir o menu Choose Connection (Escolher conexão).
   
2. No menu Choose Connection (Escolher conexão), clique em Add (Adicionar) () para adicionar um novo host.
   
3. O domínio do campo Host deve ser a URL da organização temporária. Em uma janela do terminal do VS Code, execute sf org display user --target-org scratchOrg para encontrar a URL.
   
4. Copie a URL da instância no resultado do terminal e cole-a no campo Host do simulador da seguinte forma:
   
   
5. Em seguida, no canto superior direito do simulador do iOS, clique em Done (Concluído) para adicionar o novo domínio e retornar à página de login do Salesforce.
   
6. No campo Username (Nome de usuário), copie e cole o valor Username (Nome de usuário) do resultado do terminal na Etapa 3. O nome de usuário deve seguir o formato test-value@example.com.
   
7. Para obter uma senha válida para esse nome de usuário, no terminal do VS Code, insira sf org generate password --target-org scratchOrg e pressione Enter.
   
8. No resultado do terminal, copie a senha e cole-a no campo Password (Senha) no simulador do iOS e clique em Log In to Sandbox (Fazer login na sandbox).
   
9. Se necessário, insira o código de verificação enviado para o endereço de email especificado.
   
10. Se o aplicativo solicitar acesso à sua organização, selecione Allow (Permitir).
    
    

Agora, você já deverá ver o aplicativo Salesforce no seu simulador do iOS. Vamos navegar até a conta Component Developer (Desenvolvedor de componentes) no aplicativo Sales (Vendas) para ver o Local Dev em ação.

1. No canto inferior direito do aplicativo, clique em Menu e selecione Accounts (Contas).
   
2. Em Recent Accounts (Contas recentes), clique em Component Developers (Desenvolvedores de componentes). Você deverá ver seu LWC myFirstWebComponent na página.
   
3. No Visual Studio Code, abra myFirstWebComponent.html.
   
4. No elemento <lightning-card>, altere o valor de title (título) de “Contact Information” (“Informações de contato”) para “Contact Info” (“Info de contato”). O código atualizado deverá ter esta aparência:
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. Pressione Command + S no macOS, ou Ctrl + S no Windows ou no Linux, para salvar o arquivo.
   

Agora, volte a olhar para o simulador do iOS para garantir que o título do seu componente tenha sido atualizado automaticamente. Viu a rapidez com que você pode iterar nos seus componentes usando o Local Dev?

Pronto! Neste projeto, você instalou e usou as ferramentas de desenvolvedor recomendadas para desenvolver Componentes Web do Lightning. Você copiou e colou código com erros (o que deve evitar fazer no futuro). Você usou o Local Dev para ver uma visualização em tempo real das alterações do componente Web do Lightning em um ambiente de desktop. E se você for um usuário de Mac, também usou o Local Dev para visualizar o componente em um ambiente do iPhone.

Não é possível verificar seu trabalho em uma organização temporária, mas você ainda pode clicar em Verify Step (Verificar etapa) e ganhar o emblema. Em seguida, confira os Aplicativos de exemplo do Trailhead e as Receitas de componentes Web do Lightning para ver mais exemplos de código e saber como desenvolver ótimos componentes Web do Lightning.

Recursos

• Trailhead: Configurar suas ferramentas de desenvolvedor do Salesforce Mobile para Componentes Web do Lightning