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

El plugin WooCommerce para WordPress te permite crear y gestionar eficientemente plataformas de comercio electrónico y proporciona notificaciones integradas que te alertan de pedidos nuevos o completados, niveles bajos de inventario y pagos exitosos. Estas funciones son importantes, pero hay muy poca información sobre los valiosos datos que recopila WooCommerce.

Estas limitaciones son características de los plugins tradicionales que se ejecutan en un entorno WordPress. Mediante la integración con la API de WooCommerce y el uso de recursos externos, la aplicación alojada puede proporcionar informes avanzados, alertas personalizadas y una visión detallada de las transacciones de comercio electrónico.

Funciones de información y notificación existentes

Las alertas y actualizaciones de estado integradas en WooCommerce ayudan en la gestión básica de la tienda, pero puede que no satisfagan todas las necesidades del negocio. Por ello, muchos usuarios recurren a plugins de terceros para mejorar las funciones de notificación e información.

Algunos de los plugins más populares son:

• WooCommerce Admin - Proporciona un cuadro de mandos intuitivo con métricas e informes clave de la tienda.
• WooCommerce Facturas y albaranes PDF - Las plantillas de facturas y listas de empaquetado pueden personalizarse y enviarse automáticamente por correo electrónico a los clientes con un registro de las facturas y listas de empaquetado que se han generado.
• Integración de Google Analytics en WooCommerce - Utilice la herramienta Google Analytics para generar informes detallados sobre los datos demográficos de los clientes y las fuentes de tráfico.

Con estos plugins, WooCommerce ofrece opciones de informes y alertas, incluidos resúmenes de pedidos, alertas de existencias bajas, gestión de inventario y análisis en profundidad a través de integraciones con herramientas como Google Analytics.

Limitaciones del actual sistema de notificación

El actual sistema de informes, aunque útil, tiene una funcionalidad limitada e introduce una serie de limitaciones:

• personalizaciónLas herramientas genéricas de generación de informes y los plug-ins limitan la capacidad de obtener información profunda y específica a partir de los datos. Se necesitan métricas especializadas, visualizaciones únicas, integración con herramientas analíticas propias o filtros de datos que algunas herramientas genéricas y plug-ins no pueden proporcionar.
• Escalabilidad: Los sistemas de información existentes pueden enfrentarse a problemas de escalabilidad cuando trabajan con grandes conjuntos de datos. La lentitud del rendimiento y los cuellos de botella en el procesamiento de datos pueden impedir un análisis eficaz de los datos, lo que provoca retrasos en la toma de decisiones y en los tiempos de respuesta.
• Dependencia de WordPress:Dado que la integración con WordPress limita la independencia, la personalización y la escalabilidad, es posible que haya que hacer frente a limitaciones relacionadas con los recursos del servidor, la compatibilidad de los plugins y las vulnerabilidades de seguridad. Esta integración también puede impedir que las organizaciones adopten tecnologías y soluciones más avanzadas.

Aplicaciones avanzadas de elaboración de informes

La aplicación de informes avanzados prevista en esta guía tiene las siguientes características:

• Cuando un cliente realiza un nuevo pedido, se envía una alerta detallada de la transacción al propietario de la tienda por correo electrónico. La aplicación también cuenta con un panel que muestra todos los pedidos y sus detalles.
• Las actualizaciones de inventario muestran los detalles del inventario de la tienda en el panel de control. Desde aquí, es fácil hacer un seguimiento del nivel de existencias de cada producto.
• El informe Ventas totales permite analizar la evolución de los ingresos a lo largo del tiempo.

A diferencia de los plugins genéricos o del sistema de notificaciones y alertas por defecto de WooCommerce, la aplicación proporciona alertas detalladas y personalizables sobre las existencias restantes y las ventas totales.

Cómo desarrollar aplicaciones avanzadas de elaboración de informes

En esta sección, vamos a utilizar Node.js y el móduloAPI REST de WooCommerce responder cantandoGancho webConstruir juntos una aplicación de informes para recuperar los datos de la tienda.

Solicitud:

• Una tienda WooCommerce local que contiene uno o más grupos de productos.
• Gratis para enviar correos electrónicosCuenta Mailgun .
• Node.js instalado responder cantandongrok  .
• basado en proyectosPlantillas de inicio.
• Editor de código.

Configuración de la plantilla de inicio

Siga los pasos que se indican a continuación para configurar la plantilla de inicio:

1. Anote su clave API Mailgun y el dominio sandbox y pegando sus valores con las variables correspondientes en el archivo.enven el archivo. Para elMAILGUN_SENDER_EMAILque proporciona el correo electrónico utilizado para crear la cuenta Mailgun como valor.
2. En el panel de administración de WordPress, seleccioneWooCommerce  >establecer >alto nivel > API REST.

3. hacer clic (con un ratón u otro dispositivo señalador)Añadir llave Crear una clave de API para autenticar las solicitudes de la aplicación.
4. mostrar (una entrada)Detalles clave sección y proporcionar instrucciones y usuarios, seleccioneLectura/Escritura permisos y, a continuación, haga clic enGeneración de claves API.

5. Garantizar la copia desde la página de resultadosclave de consumo responder cantandoLlaves de consumo, ya que es imposible volver a verlas.
6. mostrar (una entrada).env y asigne los valores copiados en el paso anterior a las variables respectivas. Proporcione la URL de la tienda para la variable WOOCOMMERCE_STORE_URL (Similar ahttp://localhost/mystore/index.php).
7. Instale todas las dependencias del proyecto ejecutando el siguiente comando en el terminal:

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

npm i -D nodemon

Las funciones de estas dependencias son las siguientes:

• express: Un framework Node.js para crear APIs.
• @woocommerce/woocommerce-rest-api: a la API REST de WooCommerceHaz una llamada de red.
• dotenvdesde .envpara cargar variables de entorno .
• ejs: Crea plantillas JavaScript.
• mailgun.jsUtiliza Mailgun para enviar correos electrónicos.
• nodemon: Reinicia automáticamente el servidor cuando se detecta un cambio de archivo.

Aplicación de las funciones de la aplicación

La plantilla inicial contiene las plantillas utilizadas para representar la vistaEl código de la plantilla JavaScript incrustado (EJS) en la carpeta . De esta forma, puedes centrarte en la lógica del servidor que obtiene los datos necesarios de la API de WooCommerce y los pasa a la plantilla EJS para que se muestren en la interfaz de usuario (UI).

Para implementar las funciones de la aplicación, siga los siguientes pasos:

1. Crear un archivo en la carpeta raíz del proyecto llamadoservidor.jsarchivo. Este archivo sirve como punto de entrada al servidor Express.
2. Pega el siguiente código en el archivo server.js:

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

const app = express()
const puerto = 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.
 versión: "wc/v3"
});

app.set('motor de vista', 'ejs')

// endpoint para comprobar si la aplicación está en funcionamiento
app.get('/', (req, res) => {
   res.send('¡La aplicación está funcionando!')
})

// recuperar todos los productos de la tienda
app.get('/products', (req, res) => {
   WooCommerce.get("productos")
       .then((response) => {
           res.render('pages/inventory', {
               productos: response.data, {
               currentPage: req.originalUrl
           });
       })
       .catch((error) => {
           console.log(error.response.data); }); }) .catch((error) => {
       });
})

app.listen(port, () => {
 console.log(`App escuchando en el puerto ${port}`)
})

El código anterior utiliza Express.js para crear un servidor web. Primero hay que importar los paquetes necesarios y configurar el cliente WooCommerce para que funcione con el paqueteAPI REST de WooCommercey configurar la aplicación para que utilice plantillas EJS.

En primer lugar, defina una/ para comprobar que la aplicación se ejecuta correctamente. A continuación, defina un/productos Una ruta para recuperar todos los productos de la tienda WooCommerce. Si tiene éxito, esta rutainventario Utilice la plantilla de presentación de datos adquiridos.

Tenga en cuenta que el código tambiénpáginaactualLas plantillas de todas las rutas se pasan a las plantillas, lo que ayuda a identificar las páginas activas en el cuadro de mandos.

3. Ejecutar comandonpm run dev ademáshttp://localhost:3000/products Ábralo en su navegador para ver los resultados:

La página Inventario de la tienda muestra todos los productos de la tienda y sus detalles. Esta información ayuda a realizar un seguimiento de los productos disponibles y gestionar el inventario en consecuencia.

4. Para procesar el informe de ventas, añada la siguiente ruta al archivo server.js:

// recuperar informe mensual de ventas
app.get('/ventas', (req, res) => {
   WooCommerce.get("informes/ventas", {
       periodo: "mes"
   })
       .then((response) => {
           res.render('pages/ventas', {
               ventas: response.data, {
               currentPage: req.originalUrl
           })
       })
       .catch((error) => {
         console.log(error.response.data);
       });
})

Este código define un/ventas Punto final para recuperar informes de ventas mensuales de la API de informes de ventas de WooCommerce. La llamada a la API contieneperiodo Parámetros con un valor demesEste parámetro especifica el informe de ventas del mes en curso. Tras una solicitud correcta, el código renderiza la plantilla EJS de ventas utilizando los datos obtenidos.

5. Navegue en su navegador hastahttp://localhost:3000/sales Ver resultados:

Esta página muestra un completo informe de ventas brutas para ayudar a analizar las tendencias de los ingresos mensuales.

Aplicación de la gestión de pedidos

1. Añada las siguientes rutas al directorioservidor.js Documentación.

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

Este código recuperará todos los pedidos de la tienda WooCommerce y renderizará la plantilla de pedido usando los datos obtenidos.

2. Navegue en su navegador hastahttp://localhost:3000/orders Ver resultados. Esta pantalla muestra información sobre la gestión de los pedidos:

Personalizar las alertas de los informes de operaciones consolidadas

Para implementar la posibilidad de enviarle alertas personalizadas por correo electrónico cuando un cliente realice un pedido en su sitio web, siga los pasos que se indican a continuación:

1. Abra una ventana de terminal y ejecutengrok http 3000 para establecer un túnel para la conexión con el servidor web. Este comando genera un enlace HTTPS que WooCommerce puede utilizar para enviar datos de webhook. Copie el enlace de reenvío generado.
2. Añade la siguiente ruta al archivo server.js:

app.post('/woocommerce-webhook/nuevo-pedido', (req, res) => {
   const data = req.body; // Datos recibidos del webhook de WooCommerce
   console.log('Nuevo pedido:', data);

   if(datos?.id){
       mg.messages.create(process.env.MAILGUN_SANDBOX_DOMAIN, {
           from: `Tienda WooCommerce  `,
           
           subject: "Nuevo pedido creado",
           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)) // registra los datos de respuesta
       .catch(err => console.log(err)); // registra cualquier error
   }

   res.status(200).send('Webhook recibido correctamente'); // envía una respuesta a WooCommerce
}).

Este código define una ruta para procesar los datos entrantes de un web hook de WooCommerce que se activa cuando un cliente crea un nuevo pedido. Si los datos entrantes contienen un atributo id (que indica que el pedido es válido), utiliza la API Mailgun para enviar una notificación por correo electrónico a la dirección de correo electrónico especificada.

Los correos electrónicos incluyen varios detalles del pedido, como el nombre del cliente, el correo electrónico, el importe total, el estado, la forma de pago y una lista de los artículos comprados.

Uso del código La función newOrderEMail() definida en el archivo utils/new-order-email.js escribe el correo electrónico, que devuelve una plantilla de correo electrónico personalizada. Una vez procesados los datos y enviado el correo electrónico, el servidor responde con un código de estado 200, que indica que el webhook se ha recibido correctamente, y el mensaje correspondiente ("Webhook recibido correctamente").

3. Añada la siguiente sentencia a la importaciónnewOrderEmail() función:

const { newOrderEmail } = require('. /utils/nuevo-pedido-email');

4. Ejecutar comandonpm run start para iniciar el servidor.
5. En el panel de administración de WordPress, seleccioneWooCommerce  >establecer >alto nivel > Webhooks.

6. hacer clic (con un ratón u otro dispositivo señalador)Añadir el Webhook y añadir elDatos del webhookEn el formulario se facilita la siguiente información:

• nombre (de una cosa): Alertas de nuevo orden
• situación: Activo
• temática: Pedido creado
• URL de entregaPegue la URL de reenvío de ngrok que copió en el paso 1. Asegúrese de adjuntar el archivo/woocommerce-webhook/nuevo-pedido a la URL. que es el nuevo endpoint definido para recibir cargas Webhook.

• transgresión(Secreto): dejar en blanco. Por defecto es el consumer secret del usuario actual de la API. Este secreto genera un hash del web hook entregado en la cabecera de la petición. El receptor puede utilizar este secreto para verificar la autenticidad de los datos entrantes. Si la firma coincide con el valor esperado, confirma que los datos fueron enviados por WooCommerce, proporcionando confianza y seguridad.
• Versión APIIntegración WP REST API v3.

7. hacer clic (con un ratón u otro dispositivo señalador)Guardar webhook.
8. Visite la tienda y haga su pedido. Debería recibir un correo electrónico como el que se muestra a continuación:

resúmenes

Se ha creado una aplicación de informes avanzada que actualiza los niveles de inventario restantes y proporciona informes completos sobre las ventas brutas. También proporciona alertas detalladas de transacciones que le dan visibilidad en tiempo real de transacciones específicas, incluidos detalles de productos, cantidades e información de clientes, para que pueda gestionar proactivamente el inventario y comprender las tendencias de ventas y los patrones de ingresos.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres