الفرق بين الـ API والـ Webhook: "لا تتصل بنا، نحن سنتصل بك"

الفرق بين الـ API والـ Webhook: "لا تتصل بنا، نحن سنتصل بك"

يا هلا والله! اليوم بنتكلم عن شغلتين أساسيتين في عالم تطوير الويب كثير يلخبطون بينهم: الـ API والـ Webhook. الموضوع بسيط، بس فهمك له بيفرق معاك كثير في طريقة تصميمك للأنظمة.

إيش هو الـ API (Application Programming Interface)؟

بكل بساطة، الـ API هو مجموعة من القواعد والبروتوكولات اللي تخلي برنامجين يتكلمون مع بعض. تخيل إنك رايح مطعم (تطبيقك) وتطلب من النادل (الـ API) يجيب لك أكل (بيانات). أنت اللي تبدأ المكالمة، أنت اللي تطلب، وأنت اللي تنتظر الرد.

ملاحظة سريعة: الـ API هو زي ما تكون أنت اللي تسأل "فيه جديد؟" كل شوي. يسمونها Polling.

لما تحتاج بيانات معينة، تطبيقك يرسل طلب (Request) للـ API، والـ API يرجع لك استجابة (Response) بالبيانات اللي طلبتها. هذا هو المبدأ الأساسي.

كيف يشتغل الـ API؟

• أنت ترسل طلب HTTP (غالباً GET, POST, PUT, DELETE).
• السيرفر يستقبل الطلب، يعالجه، ويرجع لك بيانات (غالباً بصيغة JSON أو XML).
• أنت اللي مسؤول عن "السؤال" بشكل دوري إذا كنت تبغى تعرف إذا فيه تحديثات.

مثال عملي: تطبيق الطقس اللي عندك في الجوال. عشان يجيب لك درجة الحرارة، هو يتصل بـ API خاص بالطقس، يرسل له موقعك، والـ API يرجع له معلومات الطقس الحالية. لو تبغى تحديث، التطبيق يرسل طلب جديد.

كود بسيط (كيف ممكن يكون الطلب):

// تخيل إن هذا كود جافاسكريبت في الواجهة الأمامية
    fetch('https://api.weatherapp.com/v1/current?location=Riyadh')
      .then(response => response.json())
      .then(data => {
        console.log('درجة الحرارة في الرياض:', data.temperature);
      })
      .catch(error => {
        console.error('فيه مشكلة:', error);
      });

طيب، إيش هو الـ Webhook؟

الـ Webhook هو مفهوم مختلف شوي. هنا، أنت ما تسأل. أنت تقول للخدمة الفلانية: "إذا صار حدث معين، كلمني على هالرابط". يعني، أنت تعطيهم رقم جوالك (URL) وتقول لهم اتصلوا فيني إذا صار شيء. هم اللي يبدأون المكالمة.

فكر فيها كذا: الـ Webhook هو زي جرس الباب. لما أحد يجي، الجرس يرن، مو أنت اللي تطلع كل شوي تشوف مين عند الباب.

لما يصير حدث معين في نظام خارجي (مثلاً: عميل جديد اشترك، طلب جديد وصل، فاتورة اندفعت)، هذا النظام يرسل طلب HTTP (غالباً POST) لعنوان الـ URL اللي أنت حددته (هذا الـ URL هو الـ Webhook حقك). والبيانات المتعلقة بالحدث هذا تكون موجودة في جسم الطلب.

كيف يشتغل الـ Webhook؟

• أنت تسجل URL خاص فيك (يسمى Callback URL) عند خدمة خارجية.
• لما يصير حدث معين في هذه الخدمة، هي ترسل طلب HTTP POST لهذا الـ URL اللي أنت سجلته.
• الطلب هذا يحتوي على بيانات الحدث اللي صار.
• الـ URL حقك (اللي هو سيرفرك) يستقبل الطلب ويعالج البيانات.

مثال عملي: لو عندك متجر إلكتروني وتستخدم خدمة دفع زي Stripe. بدل ما تطبيقك يسأل Stripe كل شوي "هل اندفعت الفاتورة الفلانية؟"، أنت تقول لـ Stripe: "إذا تمت عملية دفع بنجاح، أرسل لي خبر على هالرابط: https://yourstore.com/stripe-webhook". وبكذا، أول ما تتم الدفعة، Stripe يرسل طلب لـ yourstore.com/stripe-webhook مع تفاصيل الدفعة، وتطبيقك يقدر يحدث حالة الطلب.

كود بسيط (كيف ممكن يكون استقبال الـ Webhook):

// تخيل إن هذا كود Node.js (Express) يستقبل الـ Webhook
    const express = require('express');
    const app = express();
    app.use(express.json()); // عشان نقدر نقرا جسم الطلب

    app.post('/stripe-webhook', (req, res) => {
      const event = req.body; // هنا بتوصلك بيانات الحدث من Stripe

      switch (event.type) {
        case 'checkout.session.completed':
          console.log('تمت عملية دفع جديدة بنجاح:', event.data.object.customer_email);
          // هنا ممكن تحدث قاعدة بياناتك، ترسل إيميل للعميل، إلخ.
          break;
        case 'payment_intent.succeeded':
          console.log('تم تأكيد الدفعة بنجاح.');
          break;
        // ممكن تضيف حالات أخرى لتعالج أنواع أحداث مختلفة
        default:
          console.log(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">نوع حدث غير معروف: ${event.type}</code>);
      }

      res.status(200).send('Webhook Received');
    });

    app.listen(3000, () => {
      console.log('سيرفر الـ Webhook شغال على بورت 3000');
    });

الفرق الجوهري: "لا تتصل بنا، نحن سنتصل بك"

• API: أنت اللي تبدأ الاتصال (Pull Model / Polling). أنت تسحب البيانات لما تحتاجها.
• Webhook: الطرف الآخر هو اللي يبدأ الاتصال (Push Model / Event-Driven). هو يدفع لك البيانات لما يصير حدث معين.

متى تستخدم هذا ومتى تستخدم ذاك؟

• استخدم الـ API لما:
  • تحتاج بيانات محددة في وقت محدد (مثلاً: عرض معلومات منتج معين).
  • تحتاج تتحكم بشكل كامل متى يتم جلب البيانات.
  • البيانات ما تتغير بشكل مستمر أو التحديثات مو حرجة جداً في نفس اللحظة.
• استخدم الـ Webhook لما:
  • تحتاج تعرف فوراً لما يصير حدث معين (Real-time updates).
  • ما تبغى تستهلك موارد سيرفرك بالـ Polling المتكرر.
  • تبغى نظامك يتفاعل تلقائياً مع أحداث تصير في أنظمة خارجية.

أتمنى إن الشرح كان واضح ومفيد. الحين صار عندك فكرة ممتازة عن الفرق بين الـ API والـ Webhook ومتى تستخدم كل واحد منهم. بالتوفيق!

← السابقالفهرسالتالي →