إرسال استجابات بصيغة JSON لإنشاء واجهة برمجية (API) بسيطة

مقدمة

اليوم، سنتعلم كيف ننشئ واجهة برمجية (API) بسيطة باستخدام Node.js و Express، ترسل استجابات بصيغة JSON. هذا هو أساس بناء أي خدمة ويب حديثة.

الخطوة 1: تهيئة المشروع وتثبيت Express

سنبدأ بتهيئة مشروع Node.js جديد وتثبيت مكتبة Express، وهي إطار عمل ويب شائع لـ Node.js.

افتح سطر الأوامر (Terminal) في مجلد مشروعك وأدخل الأوامر التالية:

npm init -y

هذا الأمر يقوم بتهيئة مشروع Node.js وإنشاء ملف package.json بشكل تلقائي.

npm install express

يقوم هذا الأمر بتثبيت Express كاعتماد لمشروعك.

الخطوة 2: إعداد خادم Express بسيط

الآن، سنقوم بإنشاء ملف app.js لتعريف خادم الويب الأساسي الذي سيستمع للطلبات.

// app.js

const express = require('express'); // استيراد مكتبة Express
const app = express();              // إنشاء تطبيق Express جديد
const port = 3000;                  // تعريف المنفذ الذي سيستمع عليه الخادم

// بدء تشغيل الخادم والاستماع على المنفذ المحدد
app.listen(port, () => {
  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;">الخادم يعمل على http://localhost:${port}</code>);
});

لتشغيل الخادم، احفظ الملف app.js ثم استخدم الأمر التالي في سطر الأوامر:

node app.js

ملاحظة تقنية: Express هو إطار عمل ويب خفيف ومرن لـ Node.js يوفر مجموعة قوية من الميزات لإنشاء تطبيقات الويب وواجهات برمجة التطبيقات.

الخطوة 3: إنشاء نقطة نهاية (Endpoint) ترسل JSON

الآن، حان الوقت لإضافة نقطة نهاية إلى API الخاصة بنا. سنقوم بإنشاء مسار (route) يستجيب لطلبات GET ويرسل بيانات بصيغة JSON.

قم بتعديل ملف app.js ليصبح كالتالي:

// app.js

const express = require('express'); // استيراد مكتبة Express
const app = express();              // إنشاء تطبيق Express جديد
const port = 3000;                  // تعريف المنفذ الذي سيستمع عليه الخادم

// تعريف نقطة نهاية API تستجيب لطلبات GET على المسار '/api/products'
app.get('/api/products', (req, res) => {
  // إنشاء مصفوفة من المنتجات كبيانات وهمية
  const products = [
    { id: 1, name: 'لابتوب', price: 1200, category: 'إلكترونيات' },
    { id: 2, name: 'فأرة', price: 25, category: 'إلكترونيات' },
    { id: 3, name: 'كتاب البرمجة', price: 50, category: 'كتب' }
  ];

  // إرسال المصفوفة كاستجابة JSON للعميل
  res.json(products);
});

// نقطة نهاية أساسية للتحقق من أن الخادم يعمل
app.get('/', (req, res) => {
  res.send('مرحباً بك في واجهة برمجة التطبيقات البسيطة!');
});

// بدء تشغيل الخادم والاستماع على المنفذ المحدد
app.listen(port, () => {
  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;">الخادم يعمل على http://localhost:${port}</code>);
});

ملاحظة تقنية: التابع res.json() في Express يقوم تلقائياً بتحويل كائن JavaScript إلى سلسلة JSON ويضبط رأس Content-Type إلى application/json، مما يجعله مثالياً لإنشاء واجهات API.

الكود النهائي الكامل

هذا هو الكود النهائي الكامل لملف app.js:

// app.js

const express = require('express');
const app = express();
const port = 3000;

// تعريف نقطة نهاية API تستجيب لطلبات GET على المسار '/api/products'
app.get('/api/products', (req, res) => {
  const products = [
    { id: 1, name: 'لابتوب', price: 1200, category: 'إلكترونيات' },
    { id: 2, name: 'فأرة', price: 25, category: 'إلكترونيات' },
    { id: 3, name: 'كتاب البرمجة', price: 50, category: 'كتب' }
  ];
  res.json(products);
});

// نقطة نهاية أساسية للتحقق من أن الخادم يعمل
app.get('/', (req, res) => {
  res.send('مرحباً بك في واجهة برمجة التطبيقات البسيطة!');
});

// بدء تشغيل الخادم والاستماع على المنفذ المحدد
app.listen(port, () => {
  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;">الخادم يعمل على http://localhost:${port}</code>);
});

النتيجة المتوقعة

بعد حفظ التعديلات وتشغيل الخادم باستخدام node app.js، يمكنك فتح متصفح الويب أو استخدام أداة مثل Postman وزيارة العناوين التالية:

عند زيارة http://localhost:3000/:

ستظهر لك رسالة نصية بسيطة:

مرحباً بك في واجهة برمجة التطبيقات البسيطة!

عند زيارة http://localhost:3000/api/products:

ستتلقى استجابة بصيغة JSON تحتوي على قائمة المنتجات، والتي ستبدو كالتالي:

[
  { "id": 1, "name": "لابتوب", "price": 1200, "category": "إلكترونيات" },
  { "id": 2, "name": "فأرة", "price": 25, "category": "إلكترونيات" },
  { "id": 3, "name": "كتاب البرمجة", "price": 50, "category": "كتب" }
]

تهانينا! لقد قمت للتو بإنشاء واجهة برمجية بسيطة ترسل استجابات JSON بنجاح.

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