Criar uma aplicação de relatórios avançados para lojas WooCommerce

O plugin WooCommerce para WordPress permite-lhe criar e gerir eficazmente plataformas de comércio eletrónico e fornece notificações incorporadas que o alertam para encomendas novas ou concluídas, níveis de stock baixos e pagamentos bem sucedidos. Estas funcionalidades são importantes, mas há muito pouca informação sobre os dados valiosos que o WooCommerce recolhe.

Estas limitações são caraterísticas dos plugins tradicionais que são executados num ambiente WordPress. Ao integrar-se na API do WooCommerce e ao utilizar recursos externos, a aplicação alojada pode fornecer relatórios avançados, alertas personalizados e uma visão detalhada das transacções de comércio eletrónico.

Funcionalidades existentes de relatórios e notificações

Os alertas e as actualizações de estado incorporados no WooCommerce ajudam na gestão básica da loja, mas podem não satisfazer todas as necessidades das empresas. Por conseguinte, muitos utilizadores recorrem a plug-ins de terceiros para melhorar as capacidades de notificação e de elaboração de relatórios.

Alguns dos plug-ins mais populares incluem:

• Administrador do WooCommerce - Fornece um painel de controlo intuitivo com as principais métricas e relatórios da loja.
• Facturas e guias de remessa em PDF do WooCommerce - Os modelos de fatura e de lista de embalagem podem ser personalizados e enviados automaticamente por correio eletrónico aos clientes, com um registo das facturas e listas de embalagem que foram geradas.
• Integração do Google Analytics no WooCommerce - Utilize a ferramenta Google Analytics para gerar relatórios pormenorizados sobre a demografia dos clientes e as fontes de tráfego.

Com estes plug-ins, o WooCommerce oferece opções de relatórios e alertas, incluindo resumos de encomendas, alertas de stock baixo, gestão de inventário e análises aprofundadas através de integrações com ferramentas como o Google Analytics.

Limitações do atual sistema de notificação

O atual sistema de apresentação de relatórios, embora útil, tem uma funcionalidade limitada e introduz uma série de limitações:

• personalizaçãoFerramentas genéricas de elaboração de relatórios e plug-ins limitam a capacidade de obter informações profundas e específicas dos dados. São necessárias métricas especializadas, visualizações únicas, integração com ferramentas analíticas exclusivas ou filtros de dados que algumas ferramentas genéricas de elaboração de relatórios e plug-ins não podem fornecer.
• Escalabilidade: Os sistemas de informação existentes podem enfrentar problemas de escalabilidade quando lidam com grandes conjuntos de dados. O desempenho lento e os estrangulamentos no processamento de dados podem impedir uma análise eficiente dos dados, conduzindo a atrasos na tomada de decisões e nos tempos de resposta.
• Dependência do WordPress:Uma vez que a integração com o WordPress limita a independência, a personalização e a escalabilidade, podem surgir limitações relacionadas com os recursos do servidor, a compatibilidade dos plug-ins e as vulnerabilidades de segurança. Esta integração pode também impedir as empresas de adoptarem tecnologias e soluções mais avançadas.

Aplicações avançadas de elaboração de relatórios

A aplicação avançada de criação de relatórios prevista neste guia tem as seguintes caraterísticas:

• Quando um cliente faz uma nova encomenda, é enviado um alerta detalhado da transação ao proprietário da loja por correio eletrónico. A aplicação também tem um painel de controlo que mostra todas as encomendas e os respectivos detalhes.
• As actualizações do inventário apresentam os detalhes do inventário da loja no painel de controlo. A partir daqui, é fácil acompanhar o nível de stock de cada produto.
• O relatório Total de vendas permite analisar as tendências das receitas ao longo do tempo.

Ao contrário dos plugins genéricos ou do sistema de notificações e alertas predefinido do WooCommerce, a aplicação fornece alertas pormenorizados e personalizáveis sobre o stock restante e o total de vendas.

Como desenvolver aplicações avançadas de elaboração de relatórios

Nesta secção, vamos utilizar o Node.js e oAPI REST do WooCommerce responder com cânticosWebhookConstruir em conjunto uma aplicação de relatório para obter dados da loja.

Pedido:

• Uma loja WooCommerce gerida localmente que contém um ou mais grupos de produtos.
• Gratuito para enviar mensagens de correio eletrónicoConta Mailgun .
• Node.js instalado responder com cânticosngrok  .
• baseado em projectosModelos de introdução.
• Editor de código.

Configurar o modelo de introdução

Siga os passos abaixo para configurar o modelo Getting Started:

1. Anote a sua chave de API do Mailgun e o domínio da área restrita e colar os seus valores, juntamente com as variáveis correspondentes, no ficheiro.envno ficheiro. Para oMAILGUN_SENDER_EMAILvariável que fornece o correio eletrónico utilizado para criar a conta Mailgun como valor.
2. No painel de administração do WordPress, selecioneWooCommerce  >preparar >nível elevado > API REST.

3. clicar (utilizando um rato ou outro dispositivo apontador)Adicionar chave Criar chaves de API para autenticar pedidos da aplicação.
4. espetáculo (um bilhete)Principais pormenores secção e fornecer instruções e utilizadores, selecionarLeitura/Escrita permissões e, em seguida, clique emGeração de chaves API.

5. Garantir a cópia da página de resultadoschave do consumidor responder com cânticosChaves de consumo, uma vez que é impossível voltar a vê-las.
6. espetáculo (um bilhete).env e atribua os valores copiados na etapa anterior às respectivas variáveis. Forneça o URL da loja para a variável WOOCOMMERCE_STORE_URL (Semelhante ahttp://localhost/mystore/index.php).
7. Instale todas as dependências do projeto executando o seguinte comando no terminal:

npm i express @woocommerce/woocommerce-rest-api dotenv ejs mailgun.js

npm i -D nodemon

As funções destas dependências são as seguintes:

• expresso: Uma estrutura Node.js para criar APIs.
• @woocommerce/woocommerce-rest-api: para a API REST do WooCommerceEfetuar uma chamada de rede.
• dotenv: de .envficheiro para carregar variáveis de ambiente .
• ejsCria modelos JavaScript.
• mailgun.jsUtilize o Mailgun para enviar mensagens de correio eletrónico.
• nodemónioReinicia automaticamente o servidor quando é detectada uma alteração de ficheiro.

Implementação de funções de aplicação

O modelo inicial contém os modelos utilizados para apresentar a vistaO código para o modelo de JavaScript incorporado (EJS) na pasta . Desta forma, pode concentrar-se na lógica do servidor que obtém os dados necessários da API do WooCommerce e os transmite ao modelo EJS para apresentação na interface do utilizador (IU).

Para implementar as funções da aplicação, execute os seguintes passos:

1. Crie um ficheiro na pasta raiz do projeto chamadoservidor.jsficheiro. Este ficheiro serve como ponto de entrada para o servidor Express.
2. Cole o seguinte código no ficheiro server.js:

const express = require('express')
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
require('dotenv').config();

const app = express()
const port = 3000

const WooCommerce = new WooCommerceRestApi({
 url: process.env.WOOCOMMERCE_STORE_URL, consumerKey: process.env.
 consumerKey: process.env.WOOCOMMERCE_CONSUMER_KEY, consumerSecret: process.env.
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY, consumerSecret: process.env.
 versão: "wc/v3"
});

app.set('view engine', 'ejs')

// ponto final para verificar se a aplicação está a funcionar
app.get('/', (req, res) => {
   res.send('A aplicação está a funcionar!')
})

// recuperar todos os produtos da loja
app.get('/products', (req, res) => {
   WooCommerce.get("products")
       .then((response) => {
           res.render('pages/inventory', {
               products: response.data, {
               currentPage: req.originalUrl
           });
       })
       .catch((error) => {
           console.log(error.response.data); }); }) .catch((error) => {
       });
})

app.listen(port, () => {
 console.log(`App escutando na porta ${port}`)
})

O código acima utiliza o Express.js para criar um servidor Web. Primeiro, é necessário importar os pacotes necessários e configurar o cliente WooCommerce para trabalhar com oAPI REST do WooCommercee definir a aplicação para utilizar modelos EJS.

Em primeiro lugar, definir um/ para verificar se a aplicação está a funcionar corretamente. Em seguida, defina um/produtos Um percurso para obter todos os produtos da loja WooCommerce. Se for bem sucedida, esta rota iráinventário Utilizar o modelo de apresentação dos dados adquiridos.

Note-se que o código tambémpágina atualOs modelos de todos os itinerários são passados para os modelos, o que ajuda a identificar as páginas activas no painel de controlo.

3. Executar comandonpm run dev além dissohttp://localhost:3000/products Abra no seu browser para ver os resultados:

A página Inventário da loja apresenta todos os produtos da loja e os respectivos detalhes. Esta informação ajuda a controlar os produtos disponíveis e a gerir o inventário em conformidade.

4. Para processar o relatório de vendas, adicione a seguinte rota ao ficheiro server.js:

// recuperar relatório mensal de vendas
app.get('/sales', (req, res) => {
   WooCommerce.get("reports/sales", {
       period: "month"
   })
       .then((response) => {
           res.render('pages/sales', {
               sales: response.data, {
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

Este código define um/vendas Ponto de extremidade para obter relatórios de vendas mensais a partir da API de relatórios de vendas do WooCommerce. A chamada à API contémperíodo Parâmetros com um valor demêsEste parâmetro especifica o relatório de vendas para o mês atual. Após um pedido bem sucedido, o código processa o modelo EJS de vendas utilizando os dados obtidos.

5. Navegue no seu browser parahttp://localhost:3000/sales Ver resultados:

Esta página apresenta um relatório abrangente de vendas brutas para ajudar a analisar as tendências de receitas mensais.

Implementação da gestão de encomendas

1. Adicione as seguintes rotas aoservidor.js Documentação.

// recuperar todas as encomendas
app.get('/orders', (req, res) => {
   WooCommerce.get("orders")
       .then((response) => {
           res.render('pages/orders', {
               orders: response.data, {
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
           console.log(error.response.data);
       });
})

Este código recupera todas as encomendas na loja WooCommerce e apresenta o modelo de encomenda utilizando os dados obtidos.

2. Navegue no seu browser parahttp://localhost:3000/orders Ver resultados. Este ecrã apresenta informações sobre a gestão das encomendas:

Personalizar alertas para relatórios de transacções consolidadas

Para implementar a capacidade de enviar alertas personalizados por correio eletrónico quando um cliente faz uma encomenda no seu sítio Web, siga os passos abaixo:

1. Abra uma janela de terminal e executengrok http 3000 para estabelecer um túnel para a conexão do servidor da Web. Esse comando gera um link HTTPS que o WooCommerce pode usar para enviar dados de webhook. Copie o link de encaminhamento gerado.
2. Adicione a seguinte rota ao ficheiro server.js:

app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // Dados recebidos do webhook do WooCommerce
   console.log('Nova encomenda:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store  `,
           
           subject: "Nova encomenda criada",
           html: newOrderEmail(data.order_key, `${data.billing.first_name} ${data.billing.last_name}`, data.billing.email, data.total, data .status, data.payment_method_title, data.line_items)
       })
       .then(msg => console.log(msg)) // regista os dados da resposta
       .catch(err => console.log(err)); // regista qualquer erro
   }

   res.status(200).send('Webhook recebido com sucesso'); // envia uma resposta ao WooCommerce
}).

Este código define uma rota para processar os dados de entrada de um web hook do WooCommerce acionado quando um cliente cria uma nova encomenda. Se os dados de entrada contiverem um atributo id (indicando que a encomenda é válida), utiliza a API Mailgun para enviar uma notificação por correio eletrónico para o endereço de correio eletrónico especificado.

Os e-mails incluem vários detalhes da encomenda, como o nome do cliente, o e-mail, o montante total, o estado, o método de pagamento e uma lista dos artigos comprados.

Utilização do código A função newOrderEMail() definida no ficheiro utils/new-order-email.js escreve o correio eletrónico, que devolve um modelo de correio eletrónico personalizado. Depois de os dados serem processados e o correio eletrónico enviado, o servidor responde com um código de estado 200, indicando que o webhook foi recebido com êxito e a mensagem correspondente ("Webhook successfully received").

3. Adicione a seguinte declaração para importarnewOrderEmail() função:

const { newOrderEmail } = require('. /utils/new-order-email');

4. Executar comandonpm run start para iniciar o servidor.
5. No painel de administração do WordPress, selecioneWooCommerce  >preparar >nível elevado > Webhooks.

6. clicar (utilizando um rato ou outro dispositivo apontador)Adicione o Webhook e adicione oDados do webhookO formulário contém as seguintes informações

• nome (de uma coisa): Alertas New Order
• situação atual: Ativo
• temático: Ordem criada
• URL de entrega: Cole o URL de reencaminhamento do ngrok que copiou no passo 1. Certifique-se de que anexa o/woocommerce-webhook/new-order para o URL, que é o ponto final recentemente definido para receber cargas de Webhook.

• transgressão(Segredo): deixar em branco. A predefinição é o segredo do consumidor do utilizador atual da API. Este segredo gera um hash do web hook entregue no cabeçalho do pedido. O recetor pode utilizar este segredo para verificar a autenticidade dos dados recebidos. Se a assinatura corresponder ao valor esperado, ela confirma que os dados foram enviados pelo WooCommerce, fornecendo confiança e segurança.
• Versão da APIIntegração da API REST do WP v3.

7. clicar (utilizando um rato ou outro dispositivo apontador)Guardar webhook.
8. Visite a loja e efectue a sua encomenda. Deverá receber uma mensagem de correio eletrónico como a indicada abaixo:

resumos

Foi criada uma aplicação avançada de elaboração de relatórios que actualiza os níveis de inventário restantes e fornece relatórios abrangentes sobre as vendas brutas. Também fornece alertas de transação detalhados que lhe dão visibilidade em tempo real de transacções específicas, incluindo detalhes de produtos, quantidades e informações sobre clientes, para que possa gerir proactivamente o inventário e compreender as tendências de vendas e os padrões de receitas.