jamstack ecommerce example jamstack ecommerce example

jamstack ecommerce example

Outras categorias

1.0.0

Baixar

Como as páginas acessadas pelos visitantes do site não são geradas dinamicamente quando são solicitadas, mas pré-geradas e servidas como arquivos HTML estáticos, o processo de lançamento de novos recursos e conteúdo parece um pouco diferente do que nos aplicativos da Web "tradicionais".

Desenvolvimento local: o desenvolvimento de novos recursos pode ser feito localmente.
O Nuxt.js vem com ferramentas muito eficazes para suportar uma ótima experiência do desenvolvedor, como um servidor de desenvolvimento com substituição de módulos quentes e recarga ao vivo.
O conteúdo dos produtos é armazenado no repositório Git, juntamente com o código -fonte, para que os desenvolvedores possam usar dados reais do produto durante a implementação e teste.
Os pontos de extremidade da API devem ser extraídos usando algum servidor simulado, por exemplo, Wiremock ou MockServer, a fim de trabalhar independentemente de sistemas externos reais. Para a autenticação do OpenID Connect, considere configurar o KeyCloak localmente.
Nota: Este projeto de exemplo não inclui nenhum servidor simulado.
Conteúdo de pré-busca: todos os tempos de produtos novos ou atualizados devem ser publicados no site, os arquivos JSON de conteúdo pré-buscados devem ser atualizados no repositório Git antes que uma nova versão dos arquivos HTML estática seja gerada.
O script de conteúdo Special Node.js se conectará ao Salesforce e buscará os dados mais recentes através da API REST Salesforce. Os arquivos JSON de conteúdo são atualizados de acordo e podem estar comprometidos com o repositório Git.
Cabe a você onde e quando este script é executado. Por exemplo, ele pode ser executado como uma ação do GitHub ou em um processo de IC no Travis CI.
NOTA: O Salesforce é apenas um exemplo de uma fonte de dados em potencial para adquirir conteúdo. Os arquivos de conteúdo também podem ser criados a partir de qualquer outra fonte de dados.
Publicação de arquivos HTML estáticos: todo compromisso no repositório Git representa um determinado estado de implementação e conteúdo do site que pode ser publicado.
O processo de construção transforma o código-fonte em pedaços otimizados e gera os arquivos HTML estáticos calculando todas as rotas acessíveis para os componentes da página implementados e os arquivos de conteúdo pré-buscados.
Por fim, todos os arquivos de sites gerados podem ser publicados em qualquer servidor da Web ou rede de entrega de conteúdo, por exemplo, netlify.
Nota: O processo de construção também pode aproveitar as solicitações da API para carregar conteúdo que não é armazenado em arquivos de conteúdo no repositório Git.
Aprimoramento dinâmico via APIs: os visitantes são servidos arquivos HTML estáticos ao carregar o site no navegador. Isso é extremamente rápido porque nada precisa ser gerado dinamicamente no servidor.
Depois que a página da Web carregar o dinâmico JavaScript entra em ação e aprimora a página com recursos dinâmicos. Isso pode ser recursos como o carrinho de compras ou exibir conteúdo personalizado do usuário.
Os dados dinâmicos podem ser buscados enviando solicitações de API do navegador. Os visitantes podem autenticar usando protocolos padrão como OAuth 2.0 e OpenID Connect para permitir que o site apresente conteúdo individual.

Executando a vitrine

Pré -requisitos

Node.js 12.x ou superior
Gerente de pacote de fios
Organização do Salesforce, por exemplo, edição de desenvolvedor gratuito

Configurando o Salesforce

Configurando o usuário e o perfil do teste

Por que? Ele permite o login com um usuário real do cliente na comunidade Lightning.

Open Salesforce Configure e navegue para "Comunidades". Verifique se as comunidades estão ativadas.
Na configuração do Salesforce, navegue para "perfis".
Clone o perfil "Usuário da comunidade do cliente" para criar um perfil personalizado especificamente para os usuários da nova comunidade. Por exemplo, chame -o de "Exemplo de usuário do cliente".
Abra a nuvem de vendas para criar uma conta e contato para fins de teste. Na visualização de contato, selecione a ação rápida "Ativar o usuário do cliente".
- Defina a "licença do usuário" como "Comunidade de clientes".
- Atribua o perfil criado na etapa anterior.
- Digite seu próprio endereço de e-mail para receber a mensagem de e-mail de boas-vindas assim que o usuário for adicionado como membro à comunidade.

Instalando os metadados do Salesforce

Esta etapa é necessária se você planeja usar o script de atualização de conteúdo e se desejar configurar o logout automático na comunidade Lightning quando os usuários fazem o login no site.

Por que? Ele adiciona o objeto personalizado "categoria de produto" à sua Org Salesforce e instala um campo personalizado no objeto Product2 para permitir que você defina o produto da categoria A. Ele também instala um componente da Web Lightning a ser usado em uma página da comunidade de logout especial que será automaticamente registrada o usuário.

Faça o download e instale o Salesforce CLI.
Abra um terminal no Diretório salesforce .
Conecte a CLI do Salesforce à sua organização do Salesforce.
```
sfdx force:auth:web:login -a MyOrg -s
```
Implante o projeto SFDX na sua organização Salesforce.
```
sfdx force:source:deploy -p force-app
```

Configurando o usuário de integração

Por que? Ele permite que o servidor de API e o script de conteúdo se conectem ao Salesforce com um usuário técnico específico que permite o controle de acesso individual.

Abra a configuração do Salesforce e navegue para "Usuários".
Crie um novo usuário.
- Defina a "licença do usuário" como "Salesforce"
- Atribua o perfil "Administrador do sistema".
- Dê ao usuário algum nome como "integração".
- Digite seu próprio endereço de e-mail para receber o e-mail de registro.
Se você planeja usar o script de atualização de conteúdo, atribua o conjunto de permissão "Editor de categoria de produto" ao usuário da integração.
Confirme o e-mail de verificação e preencha o registro do usuário digitando uma nova senha.
Faça login no Salesforce com esse usuário de integração.
No menu do usuário, ao lado do ícone de configuração, selecione "Configurações".
Navegue para "redefinir meu token de segurança" e clique no botão "Redefina o token de segurança". Você deve receber o novo token por e-mail.

Configurando a comunidade Lightning

Por que? É necessário exibir a página de login durante o fluxo de autenticação OpenID Connect.

Open Salesforce Configure e navegue para "todas as comunidades".
Clique no botão "Nova comunidade" e escolha o modelo "Construa o seu próprio". Dê a ele algum nome arbitrário e, preferencialmente, deixe o URL em branco.
Abra o "espaço de trabalho" da nova comunidade e vá para "Administração".
Na seção "Configurações", ativam a comunidade.
Volte temporariamente à configuração do Salesforce em "All Communities" e abra o "construtor" da nova comunidade. Clique no botão "Publicar".
De volta ao "espaço de trabalho" da comunidade, vá para a seção "E-mails" e insira seu próprio endereço de e-mail na configuração "remetente". Certifique-se de confirmar a mensagem de e-mail que é enviada a você.
Ative a caixa de seleção "Enviar e -mail de boas -vindas".
Na seção "Membros", atribua o perfil anteriormente criado para usuários da comunidade de clientes (por exemplo, "Exemplo de cliente do cliente"). Você deve receber uma mensagem de e-mail de boas-vindas para o usuário do teste criado antes. Preencha o registro do usuário digitando uma nova senha.

Se você deseja configurar o logout automático para usuários da comunidade quando eles fazem o login no site executar estas etapas adicionais:

Abra o "espaço de trabalho" da comunidade e vá para "Administração".
Na seção "Login & Registration", insira o URL de logout do site no campo "Página de logout URL" (por exemplo, se estiver executando o site em http: // localhost: 3000 Digite o URL http: // localhost: 3000/logout)
Volte para a configuração do Salesforce em "All Communities" e abra o "construtor" da comunidade.
Crie uma página padrão em branco com um layout de conteúdo arbitrário (por exemplo, "1 coluna de largura completa"). Dê à página o nome "Logout" e o URL "Logout".
Na página Configurações, defina "acesso à página" como "requer login".
Arraste o componente personalizado "JSEC Auto Logout" do painel "Componentes" para a região de conteúdo da página. Não se confunda: isso o redirecionará imediatamente para uma página de erro no Builder Experience, porque esse componente tenta registrar o usuário quando renderizado. Este é apenas um indicador de que o componente funciona conforme o esperado.
Publique as mudanças feitas à comunidade.

Configurando o aplicativo conectado

Por que? É necessário para a autenticação do OpenID Connect para visitantes do site e permite que o servidor API e o script de conteúdo se conectem ao Salesforce de uma maneira segura.

Abra a configuração do Salesforce e navegue para o "App Manager".
Clique no botão "Novo aplicativo conectado" e insira os seguintes dados.
- Nome do aplicativo conectado: (Escolha o que quiser, por exemplo, "OIDC local")
- Nome da API: (Escolha o que você quiser, por exemplo, "Local_oidc")
- Email de contato: (seu endereço de e-mail)
- Ativar configuração de OAuth: ativado
- URL de retorno de chamada: http: // localhost: 3000/login/retorno de chamada
- Oauth escopo selecionado:
  - Acesse suas informações básicas (ID, perfil, e -mail, endereço, telefone)
  - Permitir acesso ao seu identificador exclusivo (OpenId)
  - Execute solicitações em seu nome a qualquer momento (refresco_token, offline_access)
- Requer segredo para o fluxo do servidor da web: desativado
- Configurar o token de identificação: ativado
- Token válido para: (alguma vida de sessão razoável, por exemplo, 240 minutos)
- Id Token público: (deixe vazio, o que significa que a chave do consumidor é usada)
- Incluir reivindicações padrão: ativado
A partir do aplicativo conectado, copie a "chave do consumidor" e o "segredo do consumidor" para uso posterior nos parâmetros de configuração.
Clique no botão "Gerenciar" e depois "Editar Políticas".
Defina o campo "Usuários permitidos" como "usuários aprovados pelo Admin são pré-autorizados".
No painel "Perfis", clique no botão "Gerenciar perfis" e atribuir o perfil anteriormente criado para usuários da comunidade de clientes (por exemplo, exemplo de cliente do cliente ") e o perfil do usuário de integração (por exemplo," Administrador do sistema ").

Configuração do aplicativo conectado Salesforce

Executando o script de atualização de conteúdo

Esta etapa é opcional porque o repositório Git já contém alguns produtos e categorias de exemplo para demonstração.

Você deve ter alguns registros para o objeto Product2 em sua organização do Salesforce, que são ativos e possuem entradas no livro de preços em algum livro de preços usado para a atualização de conteúdo.

Você também pode criar algumas categorias de produtos e atribuí -las aos seus produtos.

Nota: O script exige que os metadados do Salesforce sejam implantados em sua organização.

Abra um terminal nos content-scripts do diretório.

Defina as seguintes variáveis de ambiente.

Nome	Descrição
Salesforce_instance_url	URL base da instância do Salesforce (padrão `https://xx##.salesforce.com` )
Salesforce_api_version	Versão da API do Salesforce para usar
Salesforce_token_endpoint	OAuth 2.0 Token Endpoint da instância do Salesforce
Salesforce_client_id	Chave do consumidor do aplicativo conectado (copiado antes da visualização do aplicativo)
Salesforce_client_secret	Segredo do consumidor do aplicativo conectado (copiado antes da visualização do aplicativo)
Salesforce_username	Nome de usuário do usuário de integração
Salesforce_password	Senha do Token de Integração Usuário + Segurança (simplesmente Concatenar os dois)
Salesforce_price_book_name	Opcional. Livro de preços para usar. Padrão: "Livro de preços padrão"

Exemplo:

SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n

Dica: você pode colocar essas atribuições variáveis em um arquivo chamado .env nos content-scripts do diretório para desenvolvimento e teste.

Instale as dependências do Node.js.
```
yarn install
```
Execute o script para atualizar os arquivos JSON de categorias e produtos no content do diretório.
```
yarn start
```

Executando o servidor API

Abra um terminal na api do diretório.

Defina as seguintes variáveis de ambiente.

Nome	Descrição
PORTA	Porta de servidor local para ouvir. Padrão: 3000
Salesforce_instance_url	URL base da instância do Salesforce (padrão `https://xx##.salesforce.com` )
Salesforce_api_version	Versão da API do Salesforce para usar
Salesforce_token_endpoint	OAuth 2.0 Token Endpoint da instância do Salesforce (não comunidade)
Salesforce_jwks_endpoint	OpenId Connect JSON Web Key Set Ponto de extremidade da comunidade Salesforce Lightning
Salesforce_issuer_url	URL do emissor incluído no token de identificação emitido pelo Salesforce
Salesforce_client_id	Chave do consumidor do aplicativo conectado (copiado antes da visualização do aplicativo)
Salesforce_client_secret	Segredo do consumidor do aplicativo conectado (copiado antes da visualização do aplicativo)
Salesforce_username	Nome de usuário do usuário de integração
Salesforce_password	Senha do Token de Integration User + Security (simplesmente concate os dois)
Salesforce_price_book_name	Opcional. Livro de preços para usar. Padrão: "Livro de preços padrão"
Security_Cors_origin	URL base do aplicativo da Web permitido acessar o servidor.

Exemplo:

PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000

Dica: você pode colocar essas atribuições variáveis em um arquivo chamado .env na api do diretório para desenvolvimento e teste.

Instale as dependências do Node.js.
```
yarn install
```
Execute o servidor.
```
yarn start
```

Executando o aplicativo da web

Abra um terminal no diretório raiz do projeto.

Defina as seguintes variáveis de ambiente.

Nome	Descrição
Api_url	URL base do servidor API
Logout_url	Opcional. URL da página de logout da comunidade Salesforce Lightning
Oauth2_authorize_endpoint	OAuth 2.0 Authorization endpoint da comunidade Salesforce Lightning
Oauth2_userinfo_endpoint	Ponto de extremidade de informações do usuário do servidor de API
Oauth2_client_id	Chave do consumidor do aplicativo conectado (copiado antes da visualização do aplicativo)
OAuth2_Scopes	OAuth 2.0 escopos a serem solicitados durante a autenticação, separados por vírgula

Exemplo:

API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id

Dica: você pode colocar essas atribuições variáveis em um arquivo chamado .env no diretório raiz do projeto para desenvolvimento e teste.

Nota: Se a variável LOGOUT_URL não for fornecida, os usuários serão redirecionados para a página de logout do site imediatamente sem ida e volta externa.

Instale as dependências do Node.js.
```
yarn install
```
Lance o servidor de desenvolvimento que oferece recarga ao vivo ...
```
yarn dev
```
... ou gerar os arquivos HTML estáticos primeiro e, em seguida, sirva esses arquivos do diretório dist .
```
yarn generate
yarn start
```
Abra seu navegador em http: // localhost: 3000