Aprendizado do processo para o desenvolvimento de componentes do Aura

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Criar um aplicativo de aproveitamento para visualizar e testar os componentes do Lightning em desenvolvimento.
  • Criar um aplicativo de desenvolvimento para hospedar seus componentes no Lightning Experience.

O recurso Meu domínio já está no Trailhead Playground

Por padrão, o recurso Meu domínio já está ativado em cada Trailhead Playground. Não tente ativar o recurso Meu domínio ou alterar suas configurações no Trailhead Playground. A alteração das configurações do Meu domínio pode bloquear sua organização do Playground.

Nome do Meu domínio destacado em um URL do Trailhead Playground

Na sua organização de produção, o recurso Meu domínio permite que você crie um subdomínio exclusivo para sua organização. Se a URL de login da sua organização contiver sua instância do Salesforce, como https://na17.salesforce.com, a implantação de um Meu domínio a substituirá pela URL de login específica da sua empresa, como https://mydomainname.my.salesforce.com.


O Meu domínio é necessário para criar componentes personalizados do Lightning e configurar o login único (single sign-on, SSO) em uma organização. É tão importante que todas as organizações de produção, Developer Edition e teste criadas na organização Winter ' 21 mais tarde ganham um Meu domínio por padrão. Para saber como ativar o Meu domínio na sua organização de produção, consulte o módulo Autenticação de usuário. Para saber mais sobre o recurso Meu domínio e seu Trailhead Playground, confira este artigo do Knowledge

Visualizar seu componente do Aura

Não há uma forma simples de visualizar um componente do Aura durante o desenvolvimento. Você pode clicar em um botão ou acessar uma URL para visualizar os componentes individuais. Esta diferença pode levar algum tempo para que os desenvolvedores do Visualforce se acostumem, pois o Visualforce facilita a criação de uma nova página e a recarregá-la enquanto faz alterações.

O modelo de programação dos componentes do Aura é bem diferente. Falamos sobre o como e o porquê no módulo Conceitos fundamentais dos componentes do Aura. Por ora, vamos manter o foco em como carregar e visualizar rapidamente o seu componente durante o desenvolvimento.

Vamos descrever duas maneiras de você configurar um ambiente de “pré-visualização” para seus componentes em desenvolvimento. Estes dois métodos têm diferentes propósitos. O primeiro, usando um aplicativo de aproveitamento, é fácil de configurar e funciona bem para o aprendizado das noções básicas dos componentes do Aura. Também é útil a longo prazo se você deseja criar componentes “externos” ao Salesforce. (Veja os Recursos para obter detalhes sobre o que significam.)

O segundo, a criação de um contexto de desenvolvimento dentro do Lightning Experience, é mais envolvido na configuração e o recarregamento de seu componente é mais lento. Mas você não pode desenvolver componentes que se integrem com o Lightning Experience enquanto estiver testando fora do Lightning Experience. No longo prazo, isto provavelmente será o que você usará com mais frequência.

Developer Console e VS Code

Nesta unidade, você configura seu ambiente de visualização no Developer Console e seu ambiente de desenvolvimento no VS Code. Para isso, você precisa instalar o VS Code, a CLI do Salesforce e o Pacote de extensões do Salesforce da maneira indicada na unidade anterior.

Nota

Nota

Mais adiante nesta unidade, você autorizará o VS Code a implantar arquivos em sua organização. Você precisa saber o nome de usuário e a senha de sua organização. Para obter seu nome de usuário e senha para o Trailhead Playground, consulte o módulo Gerenciamento do Trailhead Playground.

Criar um aplicativo de “aproveitamento”

Escada! Vamos começar de forma simples, com a forma mais ligeira de desenvolver e visualizar um componente do Aura: dentro de um aplicativo de “aproveitamento”, um “my.app” autônomo que contém apenas seu componente.Um aplicativo de aproveitamento que envolve um componente em desenvolvimento

O aplicativo de aproveitamento (1) é um aplicativo Lightning autônomo que existe apenas para ser um shell com uma URL diretamente acessível. Ele contém apenas uma coisa: o componente de nível superior no qual você está trabalhando. Na ilustração, este é o componente My Expenses (2) para a criação de uma nova despesa. (Você deve tê-lo reconhecido do módulo Noções básicas dos componentes do Aura, no qual o criamos do zero.)

Veja como criar um aplicativo de aproveitamento.

  1. Abra o Developer Console e selecione Arquivo | Novo | Aplicativo Lightning.
  2. No painel Novo pacote do Lightning, digite harnessApp como nome do aplicativo e clique em Enviar.

Sim, dissemos que você deveria usar o VS Code para o desenvolvimento, e você deveria. Aqui, estamos usando o Developer Console apenas para uma coisa: o botão Visualizar. Escada! Ao clicar nele, uma nova janela será aberta; por enquanto, em branco. Esta é a janela na qual você pode recarregar seu componente para ver as mudanças durante o desenvolvimento.

Espere aí! Não acabamos de dizer que não há um botão no qual você possa clicar para visualizar um componente em desenvolvimento? Então o que é exatamente este botão Visualizar?

O botão Visualizar permite que você visualize um aplicativo do Lightning, não um componente. Os dois são diferentes porque, bem, há motivos. Você coloca os componentes em um aplicativo, como você fará na próxima seção.

Criar um componente de nível superior

Escada! Usamos muito os termos “aplicativo” e “componente” no Salesforce. Vamos ver como estes termos se aplicam ao que você está fazendo aqui. Você acabou de criar um aplicativo Lightning autônomo no Developer Console, que chamamos de aplicativo de aproveitamento. Este “aplicativo” é apenas um shell, ele conterá muito pouco código. É apenas uma referência para o componente que você está prestes a criar.

O componente que você coloca nele é que é o verdadeiro “aplicativo”, a “coisa” de nível superior que você pode adicionar ao Lightning Experience, ao aplicativo Salesforce ou ao que quiser. Todo o código real para seu recurso fica dentro deste componente ou dos componentes que ele contém. Você pode chamá-lo de widget, ou de componente de nível superior, ou de várias outras coisas. Mas é melhor não chamá-lo de aplicativo, porque “aplicativo” tem alguns significados específicos entre os componentes do Lightning Experience e o Lightning Experience.

Confuso? Vamos colocar a mão na massa. Vamos criar um componente no VS Code e implantá-lo em sua organização.

  1. Inicie o VS Code.
  2. No Visual Studio Code, pressione Command+Shift+P no Mac ou Ctrl+Shift+P no Windows ou no Linux para abrir a Paleta de comandos.
  3. Digite SFDX:Create Project e pressione Enter.
  4. Selecione Modelo de projeto padrão (padrão).
  5. Nomeie o projeto MyComponent e pressione Enter.
  6. Navegue até uma pasta desejada e clique em Criar projeto para salvá-lo.
  7. Abra a Paleta de comandos novamente e digite SFDX:Create Aura Component.
  8. Nomeie o componente myFirstComponent e pressione Enter.
  9. Pressione Enter novamente para aceitar o local force-app/main/default/aura. Agora, no diretório force-app/main/default/aura, você verá um diretório myFirstComponent contendo vários arquivos. Você também verá um diretório force-app/main/default/lwc. O diretório lwc pode conter arquivos de componente Web do Lightning. Você tem dois modelos de programação para criar componentes do Lightning: o modelo de programação do Aura e o modelo de programação dos componentes web do Lightning. Este módulo se concentra nos componentes do Aura.
  10. No diretório myFirstComponent, observe que uma extensão de arquivo é “.cmp”. No arquivo myFirstComponent.cmp, substitua o conteúdo com a marcação a seguir e salve-o.
    <aura:component implements="force:appHostable">
        <p>I solemnly swear I am proficient in JavaScript.</p>
    </aura:component>

Siga estas etapas para autorizar sua organização no VS Code e implantar seu componente do Aura.

  1. Abra a Paleta de comandos, digite SFDX: Authorize an Org e pressione Enter. Consulte o módulo Gerenciamento do Trailhead Playground para obter seu nome de usuário e sua senha.
  2. Pressione Enter novamente para aceitar a opção de login padrão.
  3. Pressione Enter novamente para aceitar o alias padrão para a conexão.
  4. Quando o navegador abrir, faça login em sua organização e permita o acesso, caso seja solicitado. Depois de fazer login com sucesso, volte ao VS Code.
  5. Clique com o botão direito do mouse no diretório default e selecione SFDX: Deploy Source to Org. O VS Code deve indicar que a implantação foi executada com sucesso. Se você não vir o comando SFDX: Deploy Source to Org, é porque não autorizou sua organização no VS Code. Tente novamente.

Agora volte ao Developer Console em sua organização. Se o aplicativo de aproveitamento ainda não estiver aberto, clique em Arquivo | Abrir recursos do Lightning, abra a pasta c:harnessApp, selecione APLICATIVO e clique em Abrir selecionado.

  1. Adicione o componente ao aplicativo de aproveitamento. Substitua o conteúdo de harnessApp.app pelo que segue.
    <aura:application>
        <c:myFirstComponent/>
    </aura:application>
  2. Salve o arquivo (Arquivo > Salvar).
  3. Selecione Visualizar (ou Atualizar visualização caso o botão Visualização tenha sido usado recentemente).

Este é seu processo de desenvolvimento para trabalhar com componentes do Aura em modo autônomo. Criar um aplicativo de aproveitamento para sua janela de visualização. Depois, criar seu recurso ou widget dentro de um componente, que você adiciona ao aplicativo de aproveitamento. Para ver as alterações, recarregue a visualização do aplicativo de aproveitamento. É muito mais rápido do que recarregar todo o Lightning Experience para cada alteração!

Aqui estão alguns aspectos a serem considerados.

Este processo não é tão simples ou automático como no Visualforce. Você precisa criar os componentes sozinho, não há um link “resolver rápido” para criar uma versão stub pra você. E você precisa recarregar manualmente o aplicativo de aproveitamento. Ele não recarregará automaticamente.

Segundo, e mais importante: o aplicativo autônomo (geralmente chamado “my.app”) executa apenas a estrutura de componente e seu componente. Ele recarrega mais rápido porque não carrega o Lightning Experience. Mas se seu componente depende de serviços do Lightning Experience, como o fornecimento do ID de registro atual ou de manipulação de eventos de navegação, ele não funcionará fora do Lightning Experience. (Falamos sobre o motivo no módulo Conceitos fundamentais dos componentes do Aura.)

Esta é uma lacuna bem grande para a maioria dos desenvolvedores de componentes do Lightning. A maior parte do tempo, você está criando algo que é executado dentro do Lightning Experience (ou do aplicativo Salesforce) e que se integra com ele. Então, vamos criar um ambiente de teste similar, mas mais leve, no Lightning Experience, que permitirá que você acesse a todos os serviços fornecidos pelo aplicativo de “aproveitamento”, que é muito maior.

Criar um aplicativo de desenvolvimento do Lightning Experience

Escada! Os passos a seguir criam um aplicativo Lightning Experience “Em desenvolvimento” que pode ser usado para acessar componentes do Lightning Experience (e outras coisas, como páginas do Lightning Experience e do Visualforce) a partir do Lightning Experience enquanto ainda estiverem em desenvolvimento.

Criar o aplicativo “Em desenvolvimento”

Este passo cria um aplicativo Lightning para conter seus componentes enquanto eles estiverem em desenvolvimento.

  1. Em Configuração, digite Apps na caixa Busca rápida e selecione Gerenciador de aplicativos. Você deverá ver o Gerenciador de aplicativos do Lightning Experience.
  2. Clique em Novo aplicativo Lightning e crie um aplicativo personalizado para seus componentes enquanto eles estiverem em desenvolvimento.
    • Nome do aplicativo: Em desenvolvimento
    • O nome do desenvolvedor é atribuído automaticamente
    • Descrição: Componentes e páginas em desenvolvimento
      Criar um novo aplicativo Lightning
  3. Clique em Avançar.
  4. Clique em Avançar novamente para aceitar as configurações padrão das opções do aplicativo.
  5. Clique em Avançar para aceitar as configurações padrão dos itens do utilitário.
  6. Clique em Avançar para aceitar as configurações padrão dos itens de navegação.
  7. Em Perfis de usuário, considere restringir o aplicativo apenas para Administradores do sistema ou um perfil que você criou para desenvolvedores em sua organização. Não é necessário que seus usuários vejam suas páginas antes de serem adicionados à sua localização permanente na interface de usuário.
  8. Clique em Salvar e concluir para criar o aplicativo.

Adicionar o aplicativo Em desenvolvimento ao menu do aplicativo

Esta etapa adiciona seu aplicativo ao menu de navegação para que seja fácil acessá-lo.

  1. Em Configuração, insira Menu do aplicativo na caixa Busca rápida e selecione Menu do aplicativo. Você deve ver a página do Menu do aplicativo.
  2. Verifique se seu aplicativo Em desenvolvimento está definido como Visível no Iniciador de aplicativos. Configurar o aplicativo como visível no Iniciador de aplicativos Enquanto estiver lá, talvez você queira aproveitar para reorganizar itens ou até ocultar aplicativos que já não utiliza.

Criar uma guia Componente do Lightning

Este passo cria uma nova guia que exibe um componente do Lightning e o adiciona ao aplicativo Em desenvolvimento.

  1. Em Configuração, insira Guias na caixa Busca rápida e selecione Guias. Você deve ver a página Guias personalizadas.
  2. Clique em Nova na seção Guias de componente do Lightning e crie uma guia personalizada para a página em desenvolvimento no momento.
    • Componente do Lightning: c:myFirstComponent
    • Rótulo da guia: Meu primeiro componente
    • O nome da guia é atribuído automaticamente.
    • Escolha um estilo de guia que agrade a você.
    • Descrição: Um componente simples
      Criar uma guia Componente do Lightning personalizada
  3. Deixe a guia visível apenas para seu perfil Administrador do sistema. Definir a visibilidade da guia personalizada
  4. Em Configuração, digite Apps na caixa Busca rápida e selecione Gerenciador de aplicativos.
  5. No menu suspenso à direita do aplicativo Em desenvolvimento, selecione Editar.
  6. No painel Itens de navegação, adicione a guia Meu primeiro componente à lista Itens selecionados.
  7. Clique em Salvar.
  8. Clique em Voltar para voltar à Configuração.

Para adicionar mais guias a seu aplicativo, você só precisa repetir este último processo.

Agora você pode visualizar seu componente no Lightning Experience. No Iniciador de aplicativos, encontre e selecione o aplicativo Em desenvolvimento. Após seu aplicativo estar disponível, a guia myFirstComponent será o primeiro item na barra de guias do aplicativo. A guia myFirstComponent no aplicativo Em desenvolvimento Sempre que você fizer alterações a seu componente, recarregue o Lightning Experience usando o comando Recarregar de seu navegador.

Adicionar um componente a uma guia é uma das formas nas quais você pode integrar um componente do Lightning Experience ao Lightning Experience. Isto é útil caso seu recurso tenha um contexto geral, isto é, se ele não estiver vinculado a um tipo de objeto específico, como uma conta, ou direcionado a ser usado com registros individuais.

Você pode criar componentes que fazem estas coisas, mas você precisará seguir um processo diferente para adicioná-los ao local correto no Lightning Experience. Por exemplo, se seu componente precisa trabalhar com algum registro de conta específico, você poderia adicioná-lo ao layout de página da conta ou como uma ação rápida no objeto da conta.

Se seu componente precisa ser acessado em outro lugar do Lightning Experience, consulte os Recursos para encontrar os passos adequados para adicioná-lo à interface de usuário, incluindo o código que você precisará adicionar a seu componente.

Princípios a serem considerados

No módulo Conceitos fundamentais dos componentes do Aura, abordamos os detalhes sobre o modelo de programação dos componentes do Aura e mapeamos os conceitos do Visualforce para recursos semelhantes nos componentes do Aura. Mas antes de avançar, tenha em mente o seguinte:

Os componentes do Aura são mais recentes que o Visualforce

O Visualforce é mais antigo do que o modelo de programação dos componentes do Aura. Isto significa que ainda a estamos desenvolvendo. Nivele suas expectativas adequadamente e aguarde por novos recursos que estamos sempre adicionando.

Não especifique demais uma “Solução”

Deslizador! Comece aos poucos ao desenvolver seus primeiros componentes do Aura. Você pode ser um desenvolvedor experiente para o Visualforce, mas se avançar muito além de seus conhecimentos em componentes do Aura, provavelmente terá que refazer algum do seu trabalho.

Não escreva código do Visualforce em forma de componentes do Aura

Deslizador! O projeto e a arquitetura para um bom código de componentes do Lightning não é nada parecido com os melhores códigos do Visualforce. Você pode forçar um projeto de Visualforce em um componente do Aura, mas isto é como forçar uma forma quadrada em um furo redondo. É difícil e você pode acabar desperdiçando todo o trabalho. É melhor investir seus esforços em aprender a forma dos componentes do Aura.

Lembre-se de Álamo

Queremos dizer isto um pouco diferente do que diria um texano. Algumas batalhas não se pode vencer, e é melhor se render. Se você estiver batendo cabeça contra uma parede de componentes do Aura, pode ser o momento de se retirar do campo de batalha e reorganizar suas forças.

Escada! Dedique um dia para estudar o módulo Noções básicas dos componentes do Aura ou o módulo Noções básicas dos componentes Web do Lightning. Aprenda o conceito básico do que ele é: uma estrutura muito diferente do Visualforce. Uma retirada estratégica para retornar quando estiver melhor preparado não é uma derrota. É um caminho para a vitória.

Recursos