Creación de una aplicación de informes avanzados para tiendas WooCommerce

WordPress 的 WooCommerce 插件可以高效地创建和管理电子商务平台，并提供内置通知功能，提醒你新订单或已完成订单、库存量不足以及付款成功等信息。这些功能非常重要，但对 WooCommerce 收集到的宝贵数据的深入了解却非常有限。

这些限制是在 WordPress 环境中运行的传统插件的特性。通过与 WooCommerce API 集成并使用外部资源，托管应用程序可以提供高级报告、定制警报以及对电子商务交易的详细了解。

现有的报告和通知功能

WooCommerce 的内置警报和状态更新有助于进行基本的店铺管理，但可能无法满足所有业务需求。因此，许多用户转而使用第三方插件来增强通知和报告功能。

其中最受欢迎的插件包括：

• WooCommerce Admin — 提供一个直观的仪表板，其中包含关键的商店指标和报告。
• WooCommerce PDF Invoices and Packing Slips — 可自定义发票和装箱单模板，通过电子邮件自动发送给客户，并提供已生成发票和装箱单的记录。
• WooCommerce Google Analytics Integration — 使用 Google Analytics 工具生成有关客户人口统计和流量来源的详细报告。

借助这些插件，WooCommerce 可提供报告和警报选项，包括订单摘要、低库存警报、库存管理，以及通过与 Google Analytics 等工具的集成进行深入分析。

当前报告系统的局限性

当前的报告系统虽然有益，但功能有限，并引入了一些限制：

• personalización：通用报告工具和插件限制了从数据中获得深入而具体的见解。需要专门的指标、独特的可视化、与专有分析工具的集成，或某些通用报告工具和插件无法提供的数据过滤器。
• 可扩展性： 现有的报告系统在处理大型数据集时可能会面临可扩展性问题。缓慢的性能和数据处理瓶颈会阻碍高效的数据分析，导致决策和响应时间的延迟。
• 对 WordPress 的依赖：由于与 WordPress 的集成限制了独立性、自定义和可扩展性，可能会面临与服务器资源、插件兼容性和安全漏洞相关的限制。这种集成还可能阻碍企业采用更先进的技术和解决方案。

高级报告应用程序

本指南中设想的高级报告应用程序具有以下功能：

• 当客户下新订单时，会通过电子邮件向店主发送详细的交易提醒。该应用程序还有一个仪表板，显示所有订单及其详细信息。
• 库存更新会在仪表盘上显示商店库存详情。在这里，可以轻松跟踪每种产品的库存水平。
• 总销售额报告可让分析一段时间内的收入趋势。

与通用插件或默认的 WooCommerce 通知和警报系统不同，该应用程序提供有关剩余库存和总销售额的详细和可定制的警报。

如何开发高级报告应用程序

在本节中，让我们使用 Node.js 以及WooCommerce REST API responder cantandoWebhook一起构建一个报告应用程序，以检索商店数据。

Solicitud:

• 本地运行的 WooCommerce 商店， 包含一组或多组产品 。
• 用于发送电子邮件的免费Mailgun 帐户 .
• 安装了Node.js responder cantandongrok  .
• 项目的Plantillas de inicio.
• 代码编辑器。

配置入门模板

按照下面步骤配置入门模板：

1. 记下你的 Mailgun API 密钥和沙箱域 ，并将它们的值 与相应的变量一起粘贴到.env文件中。对于MAILGUN_SENDER_EMAIL变量，提供用于创建 Mailgun 帐户的电子邮件作为值。
2. 在 WordPress 管理仪表板上，选择WooCommerce  >establecer >alto nivel > REST API.

3. hacer clic (con un ratón u otro dispositivo señalador)添加密钥 创建 API 密钥以对来自应用程序的请求进行身份验证。
4. mostrar (una entrada)密钥详细信息 部分并提供说明和用户，选择读/写 权限，然后单击生成 API 密钥.

5. 确保 从结果页面复制消费者密钥 responder cantando消费者密钥，因为无法再次看到它们。
6. mostrar (una entrada).env 文件并将在上一步中复制的值分配给各自的变量。提供变量的商店 URL WOOCOMMERCE_STORE_URL （类似于http://localhost/mystore/index.php).
7. 通过在终端中执行以下命令来安装所有项目依赖项：

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

npm i -D nodemon

这些依赖关系的作用如下：

• express：用于创建 API 的 Node.js 框架。
• @woocommerce/woocommerce-rest-api：对WooCommerce REST API进行网络调用。
• dotenv：从.env文件加载环境变量 。
• ejs：创建 JavaScript 模板。
• mailgun.js：使用 Mailgun 发送电子邮件。
• nodemon：检测到文件更改时自动重新启动服务器。

实现应用功能

起始模板包含用于呈现视图文件夹中的嵌入式 JavaScript (EJS) 模板的代码 。这样，可以专注于服务器逻辑，该逻辑从 WooCommerce API 获取必要的数据并将其传递到 EJS 模板以显示在用户界面 (UI) 上。

要实现应用程序的功能，请执行以下步骤：

1. 在项目的根文件夹中创建一个名为server.js 的文件。该文件充当 Express 服务器的入口点。
2. 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}`)
})

上面的代码使用 Express.js 创建一个 Web 服务器。首先需要导入所需的软件包，配置 WooCommerce 客户端以与WooCommerce REST API交互，并将应用程序设置为使用 EJS 模板。

首先，定义一个/ 端点，用于检查应用程序是否正常运行。然后，定义一个/products 从 WooCommerce 商店检索所有产品的路由。如果成功，此路由将inventory 使用获取的数据呈现模板。

注意，代码还将currentPage所有路由的模板传递给模板，这有助于识别仪表盘上的活动页面。

3. Ejecutar comandonpm run dev ademáshttp://localhost:3000/products 在浏览器中打开查看结果：

商店库存页面显示商店中的所有产品及其详细信息。这些信息可帮助跟踪可用产品并进行相应的库存管理。

4. 要处理销售报告，请在 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);
       });
})

此代码定义一个/sales 端点，用于从 WooCommerce 销售报告 API 检索每月销售报告。 API 调用包含period 值为 的参数month，该参数指定当月的销售报告。请求成功后，代码会使用获取的数据渲染销售 EJS 模板。

5. 在浏览器中导航至http://localhost:3000/sales 查看结果：

本页显示全面的销售总额报告，帮助分析每月收入趋势。

实施订单管理

1. 将以下路由添加到server.js Documentación.

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

这段代码将检索 WooCommerce 商店中的所有订单，并使用获取的数据渲染订单模板。

2. 在浏览器中导航至http://localhost:3000/orders 查看结果。此页面显示订单管理信息：

自定义综合交易报告的警报

要实现当客户在网站上订购时向你发送定制电子邮件提醒的功能，按照下面步骤操作：

1. 打开终端窗口并运行ngrok http 3000 以建立 Web 服务器连接的隧道。该命令生成一个 HTTPS 链接，WooCommerce 可使用该链接发送 webhook 数据。复制生成的转发链接。
2. 在 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
});

这段代码定义了一个路由，用于处理客户创建新订单时触发的 WooCommerce 网络钩子传入的数据。如果接收到的数据包含 id 属性（表示订单有效），它就会使用 Mailgun API 向指定的电子邮件地址发送电子邮件通知。

电子邮件包括各种订单详细信息，如客户姓名、电子邮件、总金额、状态、付款方式和已购商品列表。

代码使用 utils/new-order-email.js 文件中定义的 newOrderEMail() 函数编写电子邮件，该函数会返回一个自定义电子邮件模板。处理数据并发送电子邮件后，服务器会响应状态代码 200，表示成功收到网络钩子和相应的消息（”成功收到网络钩子”）。

3. 添加以下语句来导入newOrderEmail() 函数：

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

4. Ejecutar comandonpm run start 来启动服务器。
5. 在 WordPress 管理仪表板上，选择WooCommerce  >establecer >alto nivel > Webhooks.

6. hacer clic (con un ratón u otro dispositivo señalador)添加 Webhook并在Webhook 数据表单 中提供以下信息：

• 名称: 新订单提醒
• 状态：活跃
• temática：订单已创建
• 传送 URL：粘贴您在步骤 1 中复制的 ngrok 转发 URL。确保附加/woocommerce-webhook/new-order 到 URL。这是新定义的用于接收 Webhook 负载的端点。

• 秘密(Secret）：留空。默认为当前 API 用户的消费者秘密。该秘密会在请求头中生成已交付网络钩子的哈希值。接收方可使用该秘密验证传入数据的真实性。如果签名与预期值相符，就能确认数据是由 WooCommerce 发送的，从而提供信任和安全性。
• API 版本：WP REST API 集成 v3。

7. hacer clic (con un ratón u otro dispositivo señalador)保存 webhook.
8. 访问商店并下订单。应该会看到一封如下所示的电子邮件：

resúmenes

创建了一个高级报告应用程序，可更新剩余库存水平并提供全面的销售总额报告。它还提供详细的交易提醒，让你实时了解具体交易，包括产品详情、数量和客户信息，从而主动管理库存，了解销售趋势和收入模式。