lwc recipes
1.0.0
Uma coleção de exemplos de código fáceis de digerir para componentes Web do Lightning. Cada receita demonstra como codificar uma tarefa específica com o menor número de linhas de código possível, seguindo as práticas recomendadas. Um link "Exibir código-fonte" leva você diretamente ao código no GitHub. Do “Hello World” ao acesso a dados e bibliotecas de terceiros, há uma receita para isso!
Saiba mais sobre este aplicativo concluindo o projeto Início rápido: explore o aplicativo de exemplo de receitas do LWC no Trailhead ou assistindo a este breve vídeo de apresentação.
Este aplicativo de exemplo foi projetado para ser executado na Salesforce Platform. Se você quiser experimentar os Lightning Web Components em qualquer plataforma, visite https://lwc.dev e experimente nosso aplicativo de exemplo LWC Recipes OSS do Lightning Web Components.
Instalando o aplicativo usando um Scratch Org: Esta é a opção de instalação recomendada. Use esta opção se você for um desenvolvedor que deseja experimentar o aplicativo e o código.
Instalando o aplicativo usando um pacote desbloqueado: esta opção permite que qualquer pessoa experimente o aplicativo de amostra sem instalar um ambiente de desenvolvimento local.
Instalar o aplicativo usando uma organização Developer Edition ou um Trailhead Playground: útil ao lidar com Trailhead Badges ou se você deseja que o aplicativo seja implantado em um ambiente mais permanente do que uma organização Scratch.
Instruções de instalação opcionais
Passeios de código
Configure seu ambiente. Siga as etapas no Início rápido: projeto Trailhead de componentes da Web do Lightning. As etapas incluem:
Habilite o Dev Hub no seu Trailhead Playground
Instale a CLI do Salesforce
Instale o código do Visual Studio
Instale as extensões do Visual Studio Code Salesforce, incluindo a extensão Lightning Web Components
Caso ainda não tenha feito isso, autorize sua organização hub e forneça um alias ( myhuborg no comando abaixo):
sf org login web -d -a myhuborg
Clone o repositório lwc-recipes:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Crie uma organização temporária e forneça um alias ( lwc-recipes no comando abaixo):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
Envie o aplicativo para sua organização temporária:
sf project deploy start
Atribua o conjunto de permissões de receitas ao usuário padrão:
sf org assign permset -n recipes
Importar dados de amostra:
sf data tree import -p ./data/data-plan.json
Abra a organização temporária:
sf org open
Em Configuração , em Temas e Marca , ative o tema Receitas Lite ou Receitas Azul .
No Iniciador de aplicativos, clique em Exibir tudo e selecione o aplicativo LWC .
Siga este conjunto de instruções se quiser implantar o aplicativo em um ambiente mais permanente do que uma organização Scratch ou se não quiser instalar as ferramentas de desenvolvimento locais. Você pode usar organizações sem rastreamento de origem, como uma organização Developer Edition gratuita ou um Trailhead Playground.
Certifique-se de começar em um ambiente totalmente novo para evitar conflitos com qualquer trabalho anterior que você possa ter feito.
Faça login na sua organização
Clique neste link para instalar o pacote desbloqueado de Receitas em sua organização.
Selecione Instalar para todos os usuários
Importar dados de conta e contatos:
Clique aqui para acessar o arquivo Accounts-Contacts.csv . Clique com o botão direito na janela do navegador e salve o arquivo como Accounts-Contacts.csv .
Em Configuração , digite Importação de dados na caixa Busca rápida e clique em Assistente de importação de dados .
Clique em Iniciar assistente .
Clique em Contas e contatos e clique em Adicionar novos registros .
Arraste o arquivo Accounts-Contacts.csv que você acabou de salvar para a área de upload.
Clique em Avançar , Avançar e Iniciar importação .
Se você estiver tentando o Início rápido no Trailhead, esta etapa será necessária, mas caso contrário, pule:
Vá para Configuração > Usuários > Conjuntos de permissões .
Clique em receitas .
Clique em Gerenciar atribuições .
Verifique seu usuário e clique em Adicionar atribuições .
Em Configuração , em Temas e Marca , ative o tema Receitas Lite ou Receitas Azul .
No App Launcher, clique em Ver tudo e selecione o aplicativo LWC Recipes .
Siga este conjunto de instruções se quiser implantar o aplicativo em um ambiente mais permanente do que uma organização Scratch. Isso inclui organizações sem rastreamento de origem, como uma organização Developer Edition gratuita ou um Trailhead Playground.
Certifique-se de começar em um ambiente totalmente novo para evitar conflitos com trabalhos anteriores que você possa ter realizado.
Clone este repositório:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Autorize sua organização Trailhead Playground ou Developer e forneça um alias ( mydevorg no comando abaixo):
sf org login web -s -a mydevorg
Execute este comando em um terminal para implantar o aplicativo.
sf project deploy start -d force-app
Atribua o conjunto de permissões recipes ao usuário padrão.
sf org assign permset -n recipes
Importe alguns dados de amostra.
sf data tree import -p ./data/data-plan.json
Se sua organização ainda não estiver aberta, abra-a agora:
sf org open -o mydevorg
Em Configuração , em Temas e Marca , ative o tema Receitas Lite ou Receitas Azul .
No Iniciador de aplicativos, selecione o aplicativo LWC .
Este repositório contém vários arquivos que são relevantes se você deseja integrar ferramentas modernas de desenvolvimento web em seus processos de desenvolvimento do Salesforce ou em seus processos de integração/implantação contínua.
Prettier é um formatador de código usado para garantir uma formatação consistente em toda a sua base de código. Para usar o Prettier com o Visual Studio Code, instale esta extensão do Visual Studio Code Marketplace. Os arquivos .prettierignore e .prettierrc são fornecidos como parte deste repositório para controlar o comportamento do formatador Prettier.
Aviso A versão atual do plugin Apex Prettier requer que você instale o Java 11 ou superior.
ESLint é uma ferramenta popular de linting JavaScript usada para identificar erros estilísticos e construções errôneas. Para usar ESLint com Visual Studio Code, instale esta extensão do Visual Studio Code Marketplace. O arquivo .eslintignore é fornecido como parte deste repositório para excluir arquivos específicos do processo de linting no contexto do desenvolvimento de componentes Web do Lightning.
Este repositório também vem com um arquivo package.json que facilita a configuração de um gancho de pré-confirmação que impõe formatação e linting de código executando Prettier e ESLint sempre que você faz alterações git commit .
Para configurar o gancho de pré-confirmação de formatação e linting:
Instale o Node.js se ainda não o fez
Execute npm install na pasta raiz do seu projeto para instalar os módulos ESLint e Prettier (Nota: os usuários de Mac devem verificar se as ferramentas de linha de comando do Xcode estão instaladas antes de executar este comando).
Prettier e ESLint agora serão executados automaticamente sempre que você confirmar alterações. O commit falhará se forem detectados erros de linting. Você também pode executar a formatação e o linting na linha de comando usando os seguintes comandos (confira package.json para a lista completa):
npm run lint npm run prettier
Code Tours são orientações guiadas que ajudarão você a entender melhor o código do aplicativo. Para poder executá-los, instale a extensão CodeTour VSCode.
