تخطَّ إلى المحتوى

🔌 شرح REST APIs

توثيق API باستخدام Swagger و OpenAPI

الدرس 23 من 32· ⏱ 2 دقائق قراءة· 🗓 آخر تحديث: ١٧ يوليو ٢٠٢٦

ما هو OpenAPI / Swagger؟

OpenAPI معيار عالمي (سابقًا Swagger) لوصف واجهات API بصيغة JSON/YAML. يُولّد تلقائيًا:

  • توثيق تفاعلي (Swagger UI).
  • مكتبات عميل بلغات متعددة.
  • اختبارات تلقائية.

spec-first — التصميم قبل الكتابة

  1. اكتب ملف openapi.yaml أولًا.
  2. يولّد فريق الواجهة مكتبة العميل.
  3. يولّد فريق الخادم الـ stubs.
openapi: "3.0.3"
info:
  title: مدونة API
  description: واجهة إدارة المقالات
  version: "1.0.0"
servers:
  - url: https://api.example.com/v1
paths:
  /articles:
    get:
      summary: قائمة المقالات
      parameters:
        - name: page
          in: query
          schema: { type: integer, default: 1 }
      responses:
        "200":
          description: نجاح
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: "#/components/schemas/Article"
components:
  schemas:
    Article:
      type: object
      required: [id, title]
      properties:
        id: { type: integer }
        title: { type: string }
        body: { type: string }

code-first — من الكود إلى التوثيق

في Express مع swagger-jsdoc:

import swaggerJsdoc from "swagger-jsdoc";
import swaggerUi from "swagger-ui-express";

const options = {
  definition: {
    openapi: "3.0.3",
    info: { title: "مدونة API", version: "1.0.0" },
  },
  apis: ["./routes/*.js"],
};

const swaggerSpec = swaggerJsdoc(options);
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));

ثم في ملف المسار، أضف التعليقات التوثيقية:

/**
 * @openapi
 * /articles:
 *   get:
 *     summary: قائمة المقالات
 *     responses:
 *       200:
 *         description: نجاح
 */
router.get("/articles", getArticles);

Swagger UI — الواجهة التفاعلية

/api-docs يعرض صفحة تسمح باختبار كل نقطة نهاية مباشرة من المتصفّح — إرسال طلبات، رؤية الردود، ورؤية رموز الحالة.

مكونات التوثيق الجيد

المكوّنالوظيفة
infoاسم الواجهة، الإصدار، الوصف
serversروابط البيئات (dev/staging/prod)
pathsنقاط النهاية مع الطرق والاستجابات
componentsالنماذج المعاد استخدامها (Schemas)
securityطرق المصادقة (Bearer, API Key)

اختبار API

Postman — اختبار يدوي

  • أنشئ مجموعة (Collection) لكل نقطة نهاية.
  • استخدم متغيّرات البيئة (base_url, token).
  • صمّم اختبارات مصادقة وحالات خطأ.

Supertest — اختبار آلي

import request from "supertest";
import app from "../app.js";

test("GET /articles يعيد 200", async () => {
  const res = await request(app).get("/articles");
  expect(res.status).toBe(200);
  expect(Array.isArray(res.body)).toBe(true);
});

test("POST /articles بدون مصادقة يعيد 401", async () => {
  const res = await request(app)
    .post("/articles")
    .send({ title: "اختبار" });
  expect(res.status).toBe(401);
});

توصيات

  • ابدأ بـ code-first (أسرع للمشاريع الصغيرة).
  • انتقل إلى spec-first للمشاريع الكبيرة (توثيق قبل الكتابة).
  • اجعل /api-docs متاحًا في كل البيئات عدا الإنتاج (أو احمها بمصادقة).
  • حدّث التوثيق مع كل تغيير — التوثيق القديم أسوأ من لا توثيق.

🎯 التالي: أفضل الممارسات.

شرح توثيق API باستخدام Swagger و OpenAPI — REST APIs بالعربي
توثيق API باستخدام Swagger و OpenAPIREST APIs بالعربي · The Code Fix

📚 لمزيد من التعمّق في REST APIs، راجِع توثيق HTTP على MDN.

هل كان هذا الدرس مفيدًا؟