Explorar o ambiente de desenvolvimento do B2C Commerce

Objetivos de aprendizagem

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

Listar duas ferramentas usadas para a parte do cliente de uma loja (virtual) do Salesforce B2C Commerce.
Listar as três principais ferramentas de desenvolvimento de software do B2C Commerce.
Descrever os elementos da arquitetura MVC.
Listar três tarefas que você pode executar com scripts e controladores.

Olhar para as ferramentas

Seja você um desenvolvedor iniciante ou experiente de aplicativos de loja (virtual) do B2C Commerce, você conhece o cenário. Você começa olhando para as ferramentas.

Uma chave inglesa - parte de um conjunto de ferramentas

As três principais ferramentas de desenvolvimento de software do B2C Commerce são Business Manager, Microsoft Visual Studio Code e Storefront Reference Architecture (SFRA) do Commerce Cloud. Outras ferramentas incluem o seguinte:

Modelos
Definições de formulário
Pacotes de recursos
Scripts
Controladores

Entraremos em mais detalhes em breve, mas, primeiro, vamos falar sobre a arquitetura.

A arquitetura MVC

Usamos a arquitetura MVC (Modelo-Visão-Controlador), que divide um aplicativo em três partes.

O modelo é a lógica comercial, os dados e as regras subjacentes ao aplicativo. Tradicionalmente, os modelos armazenam os dados usados para preencher a visão. No B2C Commerce, os dados são representados por APIs, que fornecem classes auxiliares em vez de armazenar dados.
A visão é o que o comprador vê na loja (virtual). É a página de destino, a página de detalhes do produto, o QuickView ou a página do carrinho.
O controlador pega nos dados do comprador a partir de campos de entrada, cliques de botão, etc., e converte-os em ações ou dados que são consumidos pelo modelo ou visão.

A arquitetura MVC - Modelo, Visão e Controlador

Embora essa arquitetura forneça um mapa de como os elementos trabalham juntos, o código ainda precisa de um mecanismo de implantação. É aí que entra o cartridge.

Cartridges do B2C Commerce

Um cartridge é o modo como o B2C Commerce embala e implanta códigos e dados do programa. Ele oferece funcionalidade genérica ou específica do aplicativo. Por exemplo, um comerciante vende várias marcas, cada uma com seu próprio site. Por venderem vestuário, todos os sites têm processos semelhantes. Mas o visual dos sites varia conforme a marca. Os cartridges genéricos contêm processos padrão, enquanto os cartridges específicos do aplicativo contêm códigos e dados específicos da marca.

Vamos começar com o que estamos construindo

Vamos começar falando sobre o que estamos construindo, de cima para baixo.

As páginas da loja (virtual) são exibidas no cliente, seja um computador ou um dispositivo móvel. Estas são algumas páginas padrão da loja (virtual):

Início
Categoria
Detalhes do produto
Resultados da pesquisa

Essas páginas estão no modelo com ISML proprietário, que é baseado em HTML e usa CSS para formatação — material padrão da indústria. Os compradores interagem nessas páginas, clicando em botões e guias e inserindo texto em campos. As ferramentas de desenvolvimento usadas aqui são chamadas modelos e definições de formulário.

Com essas ferramentas, você pode:

Validar dados do comprador
Solicitar a confirmação dos compradores
Mostrar caixas de erro ou de informação
Condicionalizar HTML

Há um componente de processamento de aplicativos tanto no cliente quanto no servidor. Trata-se do código que pega os cliques e a entrada de dados das páginas e faz algo com eles. As ferramentas de desenvolvimento usadas aqui são scripts e controladores.

Com essas ferramentas, você pode:

Adicionar cálculos e lógica aos processos comerciais
Contatar os serviços da Web
Integrar sistemas de back-end
Compartilhar informações entre usuários

Agora vamos falar sobre a parte de processamento.

Codificação de páginas da loja (virtual)

As páginas da loja (virtual) representam a parte visual – os produtos bonitos, os anúncios chamativos e os descontos astuciosos. Para isso, você precisa de modelos, definições de formulário e pacotes de recursos – somente baseados no cliente.

Modelos

Os modelos definem como as informações de dados e páginas são transformadas em páginas da Web baseadas em HTML. Essas páginas são renderizadas no navegador usando CSS para layout e estilo de página e definições de formulário B2C Commerce para exibição e verificação de dados. Os modelos são codificados em ISML (Internet Store Markup Language) que gera dinamicamente HTML. Ele fornece uma série de tags predefinidas (por exemplo, <isif>/<isloop>) e usa blocos e expressões de script.

Com o ISML, você pode usar um único modelo para mostrar milhares de produtos. Por exemplo, a página de resultados de pesquisa mostra uma lista de produtos em linhas e colunas de blocos conforme definido por um modelo.

Definições de formulário

As definições de formulário permitem controlar como os valores inseridos pelo cliente são validados e renderizados no navegador. Com formulários, por exemplo, você pode especificar que o CEP deve ser inserido como uma série precisa de números inteiros; enquanto as informações de nome e endereço devem ser inseridas como cadeias de caracteres. Assim como no modelo com ISML, as definições de formulário do B2C Commerce usam uma linguagem distinta e são exclusivas.

Exemplo de um formulário de endereço

As definições de formulário são armazenadas na pasta de formulários de um cartridge (cartridge/forms/default). Um arquivo de esquema de formulário identifica elementos e atributos permitidos. As definições de formulário interagem tanto com a tela quanto com as partes de processamento dos aplicativos de loja (virtual).

Pacotes de recursos

Você deseja evitar codificar strings de texto na loja (virtual) que sejam visíveis para o comprador. Faça isso armazenando títulos, rótulos, mensagens, nomes de botões e de campos em pacotes de recursos (também chamados arquivos .properties). Manter esse texto separado do layout da tela facilita a alteração do texto para diferentes propósitos, especialmente quando suporta diferentes localidades.

Processar o aplicativo da loja (virtual)

A parte de processamento do aplicativo exibe, envia, calcula ou recupera os detalhes certos desde a chegada ao checkout – tudo por iniciativa do comprador. Para fazer isso, o aplicativo usa scripts e controladores.

Para carregar código, use a ferramenta de upload SFRA ou um utilitário de upload, como o WebDAV, um protocolo padrão. Os utilitários de upload estão disponíveis nos repositórios da comunidade B2C Commerce no GitHub. Você também pode usar ferramentas JavaScript padrão, incluindo linters e ferramentas de análise de código estático.

Scripts

Você desenvolve seu aplicativo localmente no Visual Studio Code, mas executa-o no servidor. Um intérprete JavaScript é executado no servidor do aplicativo para processar cada classe ou método JavaScript. Para o intérprete JavaScript, a fonte da chamada de script é irrelevante. Isso lhe dá flexibilidade quanto às ferramentas que você pode escolher.

O B2C Commerce possui algumas interfaces de programação de aplicativos (APIs) importantes com as APIs de script do B2C Commerce Script e as Open Commerce APIs (OCAPI). OCAPI é uma API RESTful, que recebe solicitações HTTP e retorna respostas. A construção de solicitações e o consumo de respostas depende de você.

Use a API do B2C Commerce para construir todas as partes da experiência do usuário de uma loja (virtual). Use OCAPI para integrar sistemas de terceiros e unificar jornadas de clientes que vão além da experiência hospedada no Commerce Cloud.

A API de script do B2C Commerce suporta padrões do setor. Consulte Programação de scripts e Mudanças no modo de compatibilidade na Ajuda do Salesforce para obter detalhes.

Controladores

Controladores são scripts do lado do servidor que lidam com solicitações de loja (virtual). Os controladores orquestram o processamento back-end da sua loja (virtual) e criam instâncias de modelos e visualizações para processar cada solicitação de loja (virtual) e gerar uma resposta adequada. Por exemplo, clicar em um item do menu de categoria ou inserir um termo de pesquisa aciona um controlador que renderiza uma página.

Os controladores são gravados no script do JavaScript e do B2C Commerce. A extensão do arquivo de um controlador pode ser .ds ou .js. Os controladores devem estar localizados na pasta dos controladores, no nível superior do cartridge.

Você pode usar qualquer IDE com um editor JavaScript para desenvolver controladores.

Conceitos básicos

Há muitos passos quando você começa com este ambiente, mas eles se resumem ao seguinte:

Dê uma olhada no Salesforce -Centro do Desenvolvedor para Commerce Cloud.
Obtenha uma sandbox do B2C Commerce Support (ou do seu gerente de programa de parceiros LINK se você for um desenvolvedor parceiro LINK).
Baixe e instale um ambiente de desenvolvimento integrado (IDE) como o Microsoft Visual Studio Code.
Abra o Business Manager e faça o seguinte:

Registre seus cartridges.
Importe os dados da Storefront Reference Architecture para sua sandbox, para que você possa usá-los como ponto de partida ou para exemplos de código.
Certifique-se de que o armazenamento de páginas em cache está desativado para que você possa ver suas alterações imediatamente.
Gere índices de pesquisa para que a pesquisa funcione corretamente em seu aplicativo.
Visualize a loja (virtual).

Parceiros LINK

O mercado LINK é onde os desenvolvedores vão para expandir seus sites com software de terceiros.

Provedores de software terceirizados se juntam ao Programa para parceiros de tecnologia LINK do Salesforce B2C Commerce para certificar seus cartridges em relação à mais recente tecnologia B2C Commerce. Use cartridges LINK para implementar as tecnologias de comércio eletrônico mais revolucionárias e inovadoras disponíveis.

Esses cartridges levam muito menos tempo para serem implementados porque vêm prontos para uso. Existem diversas soluções, muitas nas seguintes categorias:

Provedores de pagamento
Classificações e avaliações
Verificação de endereço fiscal
Personalização social

Próximas etapas

Nesta unidade, exploramos o ambiente de desenvolvimento do B2C Commerce, ganhando uma melhor compreensão das ferramentas que usamos e por quê. Também aprendemos os passos necessários para criar o ambiente de desenvolvimento e algumas das alternativas disponíveis. Na próxima unidade, vamos falar sobre a Storefront Reference Architecture do Commerce Cloud.

Procurando ajuda?

Descubra mais