أنشئ تطبيقًا متقدمًا لإعداد التقارير لـمتاجر WooCommerce WordPress

هذه القيود هي طبيعة المكونات الإضافية التقليدية التي تعمل ضمن بيئة WordPress. ومن ناحية أخرى، فإن التطبيقات المستضافة – العمليات المستندة إلى الويب على خوادم خارجية – أكثر قابلية للتوسيع بكثير.

من خلال التكامل مع واجهات برمجة تطبيقات WooCommerce واستخدام الموارد الخارجية، يمكن للتطبيقات المستضافة تقديم تقارير متقدمة وتنبيهات مخصصة ورؤى تفصيلية حول معاملات التجارة الإلكترونية.

في هذا الدليل، تعرف على كيفية إنشاء تطبيق مستضاف يقوم بإنشاء تنبيهات عبر البريد الإلكتروني مع بيانات المعاملات الشاملة، بما يتجاوز قدرات البرنامج الإضافي القياسي.

ميزات إعداد التقارير والإخطارات الحالية

تساعد التنبيهات وتحديثات الحالة المضمنة في WooCommerce في إدارة المتجر الأساسي ولكنها قد لا تلبي جميع متطلبات العمل. ولذلك، يلجأ العديد من المستخدمين إلى المكونات الإضافية التابعة لجهات خارجية لزيادة إمكانات الإعلام وإعداد التقارير لديهم.

تتضمن بعض المكونات الإضافية الأكثر شيوعًا ما يلي:

باستخدام هذه المكونات الإضافية، يقدم WooCommerce خيارات إعداد التقارير والتنبيهات، بما في ذلك ملخصات الطلبات وتنبيهات انخفاض المخزون وإدارة المخزون والتحليلات المتعمقة من خلال التكامل مع أدوات مثل Google Analytics .

حدود أنظمة إعداد التقارير الحالية

على الرغم من كونها مفيدة، إلا أن أنظمة إعداد التقارير الحالية تتمتع بقدرات محدودة وتفرض العديد من القيود ، مثل:

• التخصيص : تعمل أدوات إعداد التقارير العامة والمكونات الإضافية على تقييد عمق وخصوصية الرؤى التي يمكن لشركتك الحصول عليها من البيانات. قد تحتاج إلى مقاييس متخصصة، أو تصورات فريدة، أو تكامل مع أدوات التحليل الخاصة، أو بعض عوامل تصفية البيانات غير المتوفرة بسهولة في أدوات إعداد التقارير العامة والمكونات الإضافية.
• قابلية التوسع :  قد تواجه أنظمة إعداد التقارير الحالية مشكلات تتعلق بقابلية التوسع عند التعامل مع مجموعات البيانات الكبيرة. يمكن أن يؤدي بطء الأداء واختناقات معالجة البيانات إلى إعاقة التحليل الفعال للبيانات، مما يؤدي إلى تأخير في اتخاذ القرار وأوقات الاستجابة.
• الاعتماد على WordPress :  نظرًا لأن التكامل مع WordPress يحد من الاستقلالية والتخصيص وقابلية التوسع، فقد تواجه قيودًا تتعلق بموارد الخادم وتوافق المكونات الإضافية ونقاط الضعف الأمنية. قد يعيق هذا التكامل أيضًا عملك من اعتماد تقنيات وحلول أكثر تقدمًا.

وفي المقابل، يمكن لتطبيق التقارير المخصص أن يوفر معلومات مفصلة عن المعاملات والعملاء. يمكنك استخدام هذه البيانات لتوقع اتجاهات السوق وتحسين عروضك وفقًا لذلك.

علاوة على ذلك، يمكنك توسيع نطاق تطبيق إعداد التقارير المخصص بسرعة لاستيعاب أحجام البيانات المتزايدة، مما يضمن عمليات سلسة مع نمو أعمالك.

تطبيق التقارير المتقدمة

يحتوي تطبيق التقارير المتقدمة المتصور في هذا الدليل على الوظائف التالية:

• يتم إرسال تنبيهات المعاملات التفصيلية عبر البريد الإلكتروني إلى صاحب المتجر عندما يقدم العميل طلبًا جديدًا. يحتوي التطبيق أيضًا على لوحة تحكم تعرض قائمة بجميع الطلبات مع تفاصيلها.
• تعرض تحديثات المخزون تفاصيل مخزون المتجر على لوحة المعلومات. ومن هناك، يمكنك بسهولة تتبع مستويات المخزون لكل منتج.
• تتيح لك تقارير إجمالي المبيعات تحليل اتجاهات الإيرادات بمرور الوقت.

على عكس المكونات الإضافية العامة أو نظام إشعارات وتنبيهات WooCommerce الافتراضي، يقدم هذا التطبيق تنبيهات مفصلة وقابلة للتخصيص حول المخزون المتبقي وإجمالي المبيعات.

كما تأتي عدة مزايا من استضافة التطبيق مثل:

• قابلية التوسع :  تعمل الاستضافة المستقلة على تقليل اختناقات معالجة البيانات، مما يضمن إمكانية توسيع العمليات دون قيود على الموارد.
• التخصيص : تتيح لك الاستضافة المستقلة تخصيص كيفية استخدام البيانات المجمعة، مثل دمج خدمات الجهات الخارجية (مثل محركات التحليلات التنبؤية) وتنفيذ تقنيات فريدة لتصور البيانات لتتوافق بشكل أفضل مع متطلبات شركتك وأهدافها.
• الاستقلالية : تؤدي إزالة تطبيقك من بيئة WordPress إلى تحريرك من القيود مثل موارد الخادم المحدودة والتعارضات المحتملة بين المكونات الإضافية المختلفة.

كيفية تطوير تطبيق التقارير المتقدمة

في هذا القسم، لنقم بإنشاء تطبيق تقارير باستخدام Node.js مع WooCommerce REST API  وخطافات الويب  لاسترداد بيانات المتجر.

متطلبات:

تكوين قالب البداية

اتبع هذه الخطوات لتكوين قالب البداية:

1. قم بتدوين مفتاح Mailgun API ومجال الحماية الخاصين بك  والصق قيمهما في ملف .env  جنبًا إلى جنب مع المتغيرات المقابلة لها. بالنسبة للمتغير MAILGUN_SENDER_EMAIL، قم بتوفير البريد الإلكتروني الذي استخدمته لإنشاء حساب Mailgun كقيمة.
2. في لوحة تحكم مسؤول WordPress، حدد WooCommerce  > الإعدادات  > خيارات متقدمة  > REST API .

3. انقر فوق “إضافة مفتاح”  لإنشاء مفتاح واجهة برمجة التطبيقات (API) لمصادقة الطلبات الواردة من تطبيقك.
4. افتح قسم تفاصيل المفتاح  وقدم وصفًا ومستخدمًا، وحدد  أذونات القراءة/الكتابة ، ثم انقر فوق إنشاء مفتاح واجهة برمجة التطبيقات .

5. تأكد من نسخ مفتاح المستهلك  وسر العميل  من الصفحة الناتجة، حيث لا يمكنك رؤيتهم مرة أخرى.
6. افتح ملف .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: إطار عمل Node.js لإنشاء واجهة برمجة التطبيقات.
• @woocommerce/woocommerce-rest-api: إجراء مكالمات الشبكة إلى WooCommerce REST API.
• dotenv: تحميل متغيرات البيئة من ملف .env  .
• ejs: إنشاء قوالب جافا سكريبت.
• mailgun.js: يرسل رسائل البريد الإلكتروني باستخدام Mailgun.
• nodemon: إعادة تشغيل الخادم تلقائيًا عند اكتشاف تغييرات في الملف.

تنفيذ وظائف التطبيق

يحتوي قالب البداية على التعليمات البرمجية لعرض قوالب JavaScript (EJS) المضمنة في مجلد العروض  . بهذه الطريقة، يمكنك التركيز على منطق الخادم، الذي يجلب البيانات الضرورية من واجهات برمجة تطبيقات WooCommerce ويمررها إلى قوالب 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 لإنشاء خادم ويب. تبدأ باستيراد الحزم المطلوبة، وتكوين عميل WooCommerce للتفاعل مع WooCommerce REST API ، وإعداد التطبيق لاستخدام قوالب EJS.

أولاً، عليك تحديد / نقطة النهاية التي يمكنك استخدامها للتحقق مما إذا كان التطبيق قيد التشغيل. بعد ذلك، يمكنك تحديد /products مسار يسترد كافة المنتجات من متجر WooCommerce. في حالة نجاحه، يعرض هذا المسار inventory القالب مع البيانات التي تم جلبها.

لاحظ أن الكود يمرر أيضًا currentPageإلى القالب لجميع المسارات، ويساعد في تحديد الصفحات النشطة على لوحة المعلومات.

3. قم بتشغيل الأمر npm run dev وافتحه http://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) المعلمة period ذات القيمة monthالتي تحدد تقرير مبيعات الشهر الحالي. بمجرد نجاح الطلب، يعرض الكود قالب EJS للمبيعات مع البيانات التي تم جلبها.

5. انتقل إلى http://localhost:3000/sales في متصفحك لعرض النتائج:

تعرض هذه الصفحة تقريرًا شاملاً لإجمالي المبيعات، مما يساعدك على تحليل اتجاهات الإيرادات الشهرية لشركتك.

تنفيذ إدارة الطلبات

1. أضف المسار التالي إلى ملف 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);
       });
})

يسترد هذا الرمز جميع الطلبات من متجر WooCommerce ويعرض قالب الطلبات مع البيانات التي تم جلبها.

2. انتقل إلى http://localhost:3000/orders في المتصفح الخاص بك لعرض النتائج. تعرض هذه الصفحة معلومات لإدارة الطلب:

تخصيص التنبيهات لإعداد تقارير شاملة عن المعاملات

لتنفيذ وظيفة إرسال تنبيه مخصص عبر البريد الإلكتروني إليك عندما يقوم أحد العملاء بالطلب على موقعك، اتبع الخطوات التالية:

1. افتح نافذة طرفية وقم ngrok http 3000 بتشغيل اتصال خادم الويب الخاص بك. ينشئ هذا الأمر رابط HTTPS يمكن لـ WooCommerce استخدامه لإرسال بيانات خطاف الويب. انسخ رابط إعادة التوجيه الذي تم إنشاؤه.
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 لإرسال إشعار بالبريد الإلكتروني إلى عنوان البريد الإلكتروني المحدد.

يتضمن البريد الإلكتروني تفاصيل الطلب المختلفة مثل اسم العميل والبريد الإلكتروني والمبلغ الإجمالي والحالة وطريقة الدفع وقائمة العناصر المشتراة.

يقوم الكود بتكوين البريد الإلكتروني باستخدام الوظيفة newOrderEMail() المحددة في ملف utils/new-order-email.js ، الذي يقوم بإرجاع قالب بريد إلكتروني مخصص. بعد معالجة البيانات وإرسال البريد الإلكتروني، يستجيب الخادم برمز الحالة 200، مما يشير إلى استلام خطاف الويب بنجاح والرسالة المقابلة (“تم استلام خطاف الويب بنجاح”).

3. أضف العبارة التالية لاستيراد الوظيفة newOrderEmail() :

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

4. قم بتشغيل الأمر npm run start لبدء الخادم.

5. في لوحة تحكم مسؤول WordPress، حدد WooCommerce  > الإعدادات  > خيارات متقدمة  > Webhooks .

6. انقر فوق إضافة خطاف ويب  وقم بتوفير المعلومات التالية في نموذج بيانات خطاف الويب :

• • الاسم : تنبيه الطلب الجديد
  • الحالة : نشط
  • الموضوع : تم إنشاء الطلب
  • عنوان URL للتسليم : الصق عنوان URL لإعادة توجيه ngrok الذي نسخته في الخطوة 1. تأكد من إلحاق /woocommerce-webhook/new-order عنوان URL. هذه هي نقطة النهاية المحددة حديثًا لتلقي حمولة webhook.

• سر : اترك هذا فارغا. يتم تعيينه افتراضيًا على سر المستهلك الحالي لمستخدم واجهة برمجة التطبيقات (API). يقوم السر بإنشاء تجزئة لخطاف الويب الذي تم تسليمه في رؤوس الطلب. يمكن للمتلقي استخدام هذا السر للتحقق من صحة البيانات الواردة. إذا كان التوقيع يطابق القيمة المتوقعة، فهذا يؤكد أن البيانات تم إرسالها بواسطة WooCommerce، مما يوفر الثقة والأمان.
• إصدار واجهة برمجة التطبيقات : WP REST API Integration v3.

7. انقر فوق حفظ خطاف الويب .

8. قم بزيارة متجرك وقم بتقديم طلب. من المفترض أن تشاهد رسالة بريد إلكتروني مثل تلك أدناه:

نشر كل شيء إلى Kinsta

مع Kinsta، لا يمكنك فقط نشر موقع WordPress + WooCommence الخاص بك مع استضافة WordPress المُدارة  ولكن أيضًا تطبيق التقارير الجديد الخاص بك مع استضافة التطبيقات .

توفر خدمات الاستضافة المتميزة لدينا ميزات حيوية، مثل:

• أداء عالي وسرعة لا تصدق : تستضيف Kinsta مواقعك وتطبيقاتك على شبكة الطبقة المميزة من Google Cloud Platform مع أسرع وأقوى أجهزة C2، ويتم تخزينها مؤقتًا عبر CDN الخاص بـ Cloudflare مع أكثر من 260 نقطة من النقاط.
• نشر سريع وغير معقد : للحصول على تجربة استضافة ممتعة، تقوم Kinsta ببناء التطبيقات تلقائيًا ونشر مواقع WordPress دون الحاجة إلى التكوين اليدوي. يمكنك بسهولة تثبيت مواقعك وتطويرها باستخدام DevKinsta ، ونشرها بضغطة زر، مع ترك إعدادات الخادم لفريقنا الهندسي المتخصص.
• الأمان : تعمل تطبيقاتك ومواقع الويب الخاصة بك خلف جدارين ناريين، مع الحماية من هجمات DDoS والتخفيف من آثارها، وHTTP/3 وTLS 1.3. ويتم نشرها في حاوية معزولة، لتجنب ارتفاع حركة المرور من التطبيقات الأخرى التي تتداخل مع بيئة الإنتاج الخاصة بك، بالإضافة إلى التلوث الناتج عن الهجمات الضارة من المواقع الأخرى.

ملخص

بفضل مرونة الاستضافة الخارجية، قمت بإنشاء تطبيق تقارير متقدم يقوم بتحديث مستويات المخزون المتبقية ويوفر تقارير شاملة عن إجمالي المبيعات.

كما أنه يوفر تنبيهات مفصلة للمعاملات، ويقدم رؤى في الوقت الفعلي لمعاملات محددة، بما في ذلك تفاصيل المنتج والكميات ومعلومات العملاء، حتى تتمكن من إدارة المخزون بشكل استباقي وفهم اتجاهات المبيعات وأنماط الإيرادات.

هل أنت مستعد لتحويل تجربة WooCommerce الخاصة بك؟ جرب Kinsta  لتنفيذ تقارير WooCommerce المتقدمة والمخصصة.