Crie um Aplicativo de Relatório Avançado para sua Loja WooCommerce

O plugin WooCommerce para WordPress permite que você crie e gerencie com eficiência uma plataforma de eCommerce, fornecendo acesso a recursos de notificação integrados que alertam você sobre pedidos novos ou concluídos, níveis baixos de estoque e pagamentos bem-sucedidos. Esses recursos são essenciais, mas oferecem apenas insights limitados sobre os valiosos dados que o WooCommerce coleta.

Tais limitações são a natureza dos plugins tradicionais operando no ambiente WordPress. Por outro lado, aplicativos hospedados — operações baseadas na web em servidores externos — são muito mais extensíveis.

Ao se integrarem às APIs do WooCommerce e usarem recursos externos, os aplicativos hospedados podem fornecer relatórios avançados, alertas personalizados e insights detalhados sobre as transações de eCommerce.

Neste artigo, você aprenderá a criar um aplicativo hospedado que gera alertas de e-mail com dados abrangentes de transações, superando os recursos do plugin padrão.

Recursos existentes de relatórios e notificações

Os alertas e atualizações de status integrados do WooCommerce ajudam no gerenciamento essencial da loja, mas podem não atender todas as demandas comerciais. Portanto, muitos usuários recorrem a plugins de terceiros para aumentar seus recursos de notificação e relatório.

Alguns dos plugins mais populares incluem:

• WooCommerce Admin – Fornece um painel intuitivo com as principais métricas e relatórios da loja.
• WooCommerce PDF Invoices and Packing Slips – Permite a personalização de templates de faturas e notas de embalagem — enviadas automaticamente aos clientes por e-mail — e fornece um registro das faturas e notas de embalagem geradas.
• WooCommerce Google Analytics Integration – Usa as ferramentas do Google Analytics para gerar relatórios detalhados sobre a demografia dos clientes e as fontes de tráfego.

Com esses plugins, o WooCommerce oferece opções de relatórios e alertas, incluindo resumos de pedidos, alertas de estoque baixo, gerenciamento de inventário e análises detalhadas por meio da integração com ferramentas como o Google Analytics.

As limitações dos sistemas de relatórios atuais

Embora benéficos, os sistemas de relatórios atuais têm recursos limitados e apresentam várias limitações, como

• Personalização: Ferramentas e plugins genéricos para relatórios podem limitar a capacidade de sua empresa de obter insights detalhados e específicos a partir dos dados. Você pode precisar de métricas personalizadas, visualizações únicas, integração com ferramentas analíticas exclusivas ou filtros de dados específicos que não estão disponíveis em ferramentas e plugins comuns de relatórios.
• Escalabilidade: Os sistemas de relatórios existentes podem enfrentar problemas de escalabilidade ao lidar com grandes conjuntos de dados. O desempenho lento e os gargalos no processamento de dados podem impedir a análise eficiente dos dados, levando a atrasos na tomada de decisões e nos tempos de resposta.
• Dependência do WordPress: A integração com o WordPress pode limitar a independência, a personalização e a capacidade de escalonamento. Isso pode levar a restrições relativas a recursos de servidor, compatibilidade de plugins e vulnerabilidades de segurança, além de potencialmente impedir a adoção de tecnologias e soluções mais avançadas por parte da sua empresa.

Por outro lado, um aplicativo de relatórios personalizado pode fornecer informações detalhadas sobre transações e clientes. Você pode usar esses dados para prever tendências de mercado e otimizar suas ofertas de acordo com elas.

Além disso, você pode dimensionar rapidamente um aplicativo de relatórios personalizado para acomodar volumes de dados cada vez maiores, garantindo operações contínuas à medida que sua empresa cresce.

O aplicativo de relatórios avançados

O aplicativo de relatórios avançados apresentado neste artigo tem as seguintes funções:

• Alertas detalhados de transações são enviados por e-mail ao proprietário da loja quando o cliente faz um novo pedido. O aplicativo também tem um painel que mostra uma lista de todos os pedidos com seus detalhes.
• As atualizações de estoque mostram os detalhes do estoque da loja no painel. A partir daí, você pode acompanhar facilmente os níveis de estoque de cada produto.
• O relatório de vendas totais permite que você analise as tendências de receita ao longo do tempo.

Diferentemente dos plugins genéricos ou do sistema padrão de notificações e alertas do WooCommerce, esse aplicativo oferece alertas detalhados e personalizáveis sobre o estoque restante e o total de vendas.

Você também tem várias vantagens ao hospedar o aplicativo, como:

• Escalabilidade: A hospedagem independente minimiza os gargalos no processamento de dados, garantindo que você possa expandir as operações sem restrições de recursos.
• Personalização: A hospedagem independente permite que você personalize a forma de usar os dados coletados, por exemplo, integrando serviços de terceiros (como mecanismos de análise preditiva) e implementando técnicas exclusivas de visualização de dados para se alinhar melhor aos requisitos e às metas da sua empresa.
• Autonomia: Ao remover seu aplicativo do ambiente do WordPress, você se livra de restrições como recursos limitados do servidor e possíveis conflitos entre vários plugins.

Como desenvolver um aplicativo de relatórios avançados

Nesta seção, vamos criar um aplicativo de relatórios usando o Node.js com a API REST do WooCommerce e webhooks para recuperar os dados da loja.

Requisitos:

• Uma loja do WooCommerce em execução localmente com um ou mais produtos definidos.
• Uma conta gratuita do Mailgun para enviar e-mails.
• Node.js e ngrok instalados.
• O template inicial do projeto.
• Um editor de código.

Configure o template inicial

Siga estas etapas para configurar o template inicial:

1. Anote a chave API do Mailgun e o domínio sandbox e cole os valores deles no arquivo .env junto com as variáveis correspondentes. Para a variável MAILGUN_SENDER_EMAIL, forneça o e-mail que você usou para criar a conta do Mailgun como o valor.
2. No painel de controle do WordPress, selecione WooCommerce > Settings > Advanced > REST API.

3. Clique em Add key (Adicionar chave) para criar a chave API e autenticar solicitações do seu aplicativo.
4. Abra a seção Key details (Detalhes da chave) e forneça uma descrição e um usuário, selecione Read/Write permissions (Permissões de leitura/gravação) e clique em Generate API key (Gerar chave API).

5. Certifique-se de copiar a Consumer key (Chave do consumidor) e o Consumer secret (Segredo do consumidor) da página resultante, pois você não poderá vê-los novamente.
6. Abra o arquivo .env e atribua os valores que você copiou na etapa anterior às suas respectivas variáveis. Forneça a URL da sua loja para a variável WOOCOMMERCE_STORE_URL (algo como http://localhost/mystore/index.php).
7. Instale todas as dependências do projeto executando o seguinte comando em seu terminal:

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

npm i -D nodemon

Essas dependências servem para as seguintes finalidades:

• express: Framework do Node.js para criar uma API.
• @woocommerce/woocommerce-rest-api: Faz chamadas de rede para a API REST do WooCommerce.
• dotenv: Carrega variáveis de ambiente do arquivo .env.
• ejs: Cria templates JavaScript.
• mailgun.js: Envia e-mails usando o Mailgun.
• nodemon: Reinicia o servidor automaticamente quando são detectadas alterações nos arquivos.

Implemente funções do aplicativo

O template inicial contém o código para renderizar os templates de JavaScript embutido (EJS) na pasta views. Dessa forma, você pode se concentrar na lógica do servidor, que busca os dados necessários das APIs do WooCommerce e os passa para os templates EJS para exibição na interface do usuário (UI).

Para implementar a funcionalidade do aplicativo, siga estas etapas:

1. Crie um arquivo chamado server.js na pasta raiz do projeto. O arquivo funciona como o ponto de entrada no servidor Express.
2. Cole o seguinte código dentro do arquivo 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.WOOCOMMERCE_CONSUMER_KEY,
 consumerSecret: process.env.WOOCOMMERCE_SECRET_KEY,
 version: "wc/v3"
});

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

// endpoint to check if the application is up and running
app.get('/', (req, res) => {
   res.send('The application is up and running!')
})

// retrieve all products in the store
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);
       });
})

app.listen(port, () => {
 console.log(`App listening on port ${port}`)
})

O código acima usa o Express.js para criar um servidor da web. Você começa importando os pacotes necessários, configurando o cliente WooCommerce para interagir com a API REST do WooCommerce e configurando o aplicativo para usar templates EJS.

Primeiro, você define um endpoint / que pode ser usado para verificar se o aplicativo está ativo e em execução. Em seguida, você define uma rota /products que recupera todos os produtos da loja do WooCommerce. Se você for bem-sucedido, essa rota renderizará o template inventory com os dados obtidos.

Observe que o código também passa o endereço currentPage para o template de todas as rotas, o que ajuda a identificar as páginas ativas no painel.

3. Execute o comando npm run dev e abra http://localhost:3000/products em seu navegador para ver os resultados:

A página Store Inventory renderiza todos os produtos disponíveis na loja, juntamente com seus detalhes. Essas informações ajudam você a acompanhar os produtos disponíveis e a gerenciar o estoque adequadamente.

4. Para lidar com relatórios de vendas, adicione a seguinte rota ao arquivo server.js:

// retrieve monthly sales report
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);
       });
})

Esse código define um endpoint /sales que recupera o relatório de vendas mensal da API de relatório de vendas do WooCommerce. A chamada à API inclui o parâmetro period com o valor month, que especifica o relatório de vendas do mês atual. Quando a solicitação é bem-sucedida, o código renderiza o template EJS de vendas com os dados obtidos.

5. Navegue até http://localhost:3000/sales em seu navegador para visualizar os resultados:

Essa página exibe um relatório abrangente de vendas totais, ajudando você a analisar as tendências de receita mensal da sua empresa.

Implemente o gerenciamento de pedidos

1. Adicione a seguinte rota ao arquivo server.js.

// retrieve all orders
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);
       });
})

Esse código recupera todos os pedidos da loja do WooCommerce e renderiza o template Orders com os dados obtidos.

2. Navegue até http://localhost:3000/orders em seu navegador para visualizar os resultados. Essa página exibe informações para o gerenciamento de pedidos:

Personalização de alertas para relatórios abrangentes de transações

Para implementar a funcionalidade que envia a você um alerta personalizado por e-mail quando um cliente faz um pedido em seu site, siga estas etapas:

1. Abra uma janela de terminal e execute ngrok http 3000 para fazer um túnel na 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 arquivo server.js :

app.post('/woocommerce-webhook/new-order', (req, res) => {
   const data = req.body; // Received data from the WooCommerce webhook
   console.log('New order:', data);

   if(data?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `WooCommerce Store <${process.env.MAILGUN_SENDER_EMAIL}> `,
           to: [process.env.MAILGUN_SENDER_EMAIL],
           subject: "New Order Created",
           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)) // logs response data
       .catch(err => console.log(err)); // logs any error
   }

   res.status(200).send('Webhook received successfully'); // Send a response to WooCommerce
});

Esse código define uma rota que lida com os dados recebidos de um webhook do WooCommerce acionado quando um cliente cria um novo pedido. Se os dados recebidos contiverem uma propriedade id (indicando um pedido válido), ele usará a API Mailgun para enviar uma notificação por e-mail para o endereço de e-mail especificado.

O e-mail inclui vários detalhes do pedido, como nome do cliente, e-mail, valor total, status, método de pagamento e uma lista de itens comprados.

O código compõe o e-mail usando a função newOrderEMail() definida no arquivo utils/new-order-email.js , que retorna um template de e-mail personalizado. Depois de processar os dados e enviar o e-mail, o servidor responde com um código de status 200, indicando o recebimento bem-sucedido do webhook e uma mensagem correspondente (“Webhook received successfully”).

3. Adicione a seguinte instrução para importar a função newOrderEmail():

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

4. Execute o comando npm run start para iniciar o servidor.

5. No painel de controle do WordPress, selecione WooCommerce > Settings > Advanced > Webhooks.

6. Clique em Add webhook (Adicionar webhook) e forneça as seguintes informações no formulário de dados do webhook :

• • Nome: Alerta de novo pedido
  • Status: Ativo
  • Tópico: Pedido criado
  • URL de entrega: Cole a URL de encaminhamento do ngrok que você copiou na etapa 1. Certifique-se de que você anexou /woocommerce-webhook/new-order ao URL. Esse é o endpoint recém-definido para receber a carga do webhook.

• Segredo: Deixe em branco. O padrão é o segredo do consumidor do usuário atual da API. O segredo gera um hash do webhook entregue nos cabeçalhos da solicitação. O receptor pode usar esse segredo para verificar a autenticidade dos dados recebidos. Se a assinatura corresponder ao valor esperado, isso confirma que os dados foram enviados pelo WooCommerce, proporcionando confiança e segurança.
• Versão da API: Integração da API WP REST v3.

7. Clique em Salvar webhook.

8. Visite sua loja e faça um pedido. Você deverá ver um e-mail como o que está abaixo:

Implante tudo na Kinsta

Com a Kinsta, você pode implantar não apenas seu site WordPress + WooCommerce com Hospedagem Gerenciada de WordPress, mas também seu novo aplicativo de relatórios com Hospedagem de Aplicativos.

Nossos serviços de hospedagem premium oferecem recursos essenciais, tais como:

• Alto desempenho e velocidade incrível: A Kinsta hospeda seus sites e aplicativos na rede de nível premium do Google Cloud Platform com as máquinas C2 mais rápidas e robustas, e com Edge Caching por meio do CDN do Cloudflare com 260+ PoPs.
• Implantação rápida e descomplicada: para uma experiência de hospedagem tranquila, a Kinsta constrói aplicativos automaticamente e implanta sites WordPress sem necessidade de configuração manual. Você pode facilmente instalar e desenvolver seus sites com o DevKinsta e publicá-los com o apertar de um botão, deixando as configurações do lado do servidor para nossa equipe de engenharia especializada.
• Segurança: Seus aplicativos e sites ficam seguros atrás de duas barreiras de proteção (firewalls), contando com proteção e redução de impacto de ataques DDoS. Eles também utilizam as tecnologias HTTP/3 e TLS 1.3. Além disso, são hospedados em contêineres isolados, o que impede que picos de tráfego de outros aplicativos afetem seu ambiente de produção e protege contra possíveis ataques maliciosos de outros sites.

Resumo

Graças à flexibilidade da hospedagem externa, você criou um aplicativo de relatório avançado que atualiza os níveis de estoque restantes e fornece relatórios abrangentes sobre o total de vendas.

Ele também oferece alertas detalhados de transações, proporcionando insights em tempo real sobre transações específicas, incluindo detalhes do produto, quantidades e informações do cliente, para que você possa gerenciar proativamente o estoque e entender as tendências de vendas e os padrões de receita.

Você está pronto para transformar sua experiência com o WooCommerce? Experimente a Kinsta para implementar relatórios avançados e personalizados do WooCommerce.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.

• LinkedIn