DEV Community

Cover image for كيفية استخدام Apidog داخل VS Code
Yusuf Khalidd
Yusuf Khalidd

Posted on • Originally published at apidog.com

كيفية استخدام Apidog داخل VS Code

ملخص سريع

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

جرب Apidog اليوم

💡Apidog هي منصة مجانية ومتكاملة لتطوير واجهات برمجة التطبيقات (API). يربط ملحق VS Code محرر الأكواد الخاص بك مباشرة بمساحة عمل Apidog الخاصة بك، بحيث يمكنك اختبار واجهات برمجة التطبيقات، وكتابة الوثائق، والتعاون مع فريقك دون التبديل بين النوافذ. جرب Apidog مجانًا، لا يلزم وجود بطاقة ائتمان.

مقدمة

بدأ Apidog كتطبيق سطح مكتب لتصميم واختبار وتوثيق واجهات برمجة التطبيقات. الآن أصبح بإمكانك العمل مباشرة من VS Code عبر الملحق الرسمي، حيث تتزامن جميع مجموعاتك وبيئاتك واختباراتك تلقائياً بين جميع المنصات: VS Code، سطح المكتب، والويب.

في هذا الدليل ستتعلم خطوات الإعداد، الاتصال بمساحة عملك، إرسال الطلبات، تشغيل الاختبارات، واستخدام الملحق مع تطبيق سطح المكتب.

الخطوة 1: تثبيت ملحق Apidog لـ VS Code

  1. افتح VS Code واضغط على أيقونة الإضافات (Extensions) في الشريط الجانبي أو استخدم الاختصار Ctrl+Shift+X (Cmd+Shift+X للماك).
  2. ابحث عن "Apidog" في شريط البحث وابحث عن الملحق من Apidog Inc (أيقونة داكنة وحروف API).
  3. اضغط على "تثبيت" (Install). بعد التثبيت تظهر أيقونة Apidog في شريط الأنشطة.
  4. اضغط على أيقونة Apidog لفتح لوحة Apidog في الشريط الجانبي.

الخطوة 2: تسجيل الدخول إلى حساب Apidog الخاص بك

  1. في لوحة Apidog، اضغط على زر "تسجيل الدخول" (Sign In).
  2. سيتم فتح صفحة المصادقة في المتصفح. أدخل بيانات حسابك أو اشترك مجانًا (بريد إلكتروني فقط).
  3. بعد تسجيل الدخول، أكّد العودة إلى VS Code.
  4. ستظهر مساحة عملك في الشريط الجانبي تلقائياً.

الشريط الجانبي بعد تسجيل الدخول:

  • عرض شجري لمساحة العمل، المجموعات كمجلدات، والبيئات منسدلة في الأعلى.
  • الطلبات تظهر بألوان مختلفة حسب طريقة HTTP.

الخطوة 3: التنقل في مجموعاتك

  • لتصفح المجموعات، انقر على السهم بجوار اسم المجموعة لعرض الطلبات والمجلدات الفرعية.
  • الطلبات تظهر مع شارات ألوان حسب نوع HTTP (GET أخضر، POST أزرق، PUT برتقالي، DELETE أحمر).
  • اضغط على أي طلب لفتحه في علامة تبويب بالمحرر.

بحث سريع: استخدم مربع البحث أعلى لوحة Apidog لتصفية الطلبات حسب الاسم أو الـ URL أو الطريقة.

التبديل بين مساحات العمل: إذا لديك عدة مساحات عمل، استخدم محدد مساحة العمل في أعلى اللوحة.

الخطوة 4: إرسال الطلبات

  1. افتح طلب من الشريط الجانبي ليظهر في علامة تبويب المحرر.
  2. عدل الطريقة وURL من الشريط العلوي.
  3. أضف رؤوس (Headers) أو معلمات (Params) من التبويبات المخصصة.
  4. إذا كان الطلب يحتوي على Body (مثل POST أو PUT)، اختر نوع البيانات (JSON, form data, إلخ).
  5. اضغط على "إرسال" (Send).

النتيجة: يظهر الرد أسفل الطلب مع رمز الحالة، وقت وحجم الاستجابة، ورؤوس وملفات تعريف الارتباط ونتائج الاختبار.

استخدام البيئات: اختر البيئة النشطة من الأعلى. المتغيرات مثل {{base_url}} تُستبدل تلقائياً بقيم البيئة المختارة.

الخطوة 5: تحرير وإنشاء الطلبات

  • عدل أي طلب موجود مباشرة في VS Code. التغييرات تتزامن فورياً مع بقية المنصات.
  • لإنشاء طلب جديد:
    1. اضغط بزر الفأرة الأيمن على مجموعة أو مجلد.
    2. اختر "طلب جديد" (New Request).
    3. عين الطريقة، URL، الرؤوس والنص.
    4. احفظ باستخدام Ctrl+S / Cmd+S.

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

الخطوة 6: تشغيل الاختبارات

  • في تبويب "Tests" لأي طلب، اكتب تأكيدات باعتماد JavaScript:
pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a('number');
});
Enter fullscreen mode Exit fullscreen mode
  • بعد الإرسال، تعرض تبويب "Tests" النتائج (ناجح/فشل وعدد كل منهما).

تشغيل مجموعة: اضغط بزر الفأرة الأيمن على مجموعة أو مجلد واختر "تشغيل المجموعة" (Run Collection). يمكنك تحديد مرات التشغيل، التأخير، البيئة، ثم اضغط "تشغيل" لمشاهدة النتائج لكل طلب.

الخطوة 7: استخدام ملحق VS Code وتطبيق سطح المكتب معًا

  • كل من ملحق VS Code وتطبيق سطح المكتب يعكسان نفس مساحة العمل بشكل فوري.
  • سيناريوهات عملية:
    • التصميم في سطح المكتب، الاختبار في VS Code: صمم المخطط والوثائق في تطبيق سطح المكتب، ثم اختبر مباشرة من VS Code.
    • مراجعة الفريق: أي تحديث في نقطة نهاية من قبل أحد المطورين يظهر مباشرة لبقية الفريق.
    • كتابة الاختبار أثناء التطوير: ابق في VS Code، اختبر نقاط النهاية، ثم عد للكود دون تبديل النوافذ.
  • ميزات مثل تصميم المخطط، إعداد الخادم الوهمي، ونشر الوثائق تظل أسهل في تطبيق سطح المكتب.

الخطوة 8: شارك مع فريقك

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

الأسئلة الشائعة

هل أحتاج تطبيق سطح المكتب لاستخدام ملحق VS Code؟

لا، الملحق يعمل بشكل مستقل كعميل لمساحة عمل Apidog الخاصة بك.

هل يمكنني استخدام الملحق دون اتصال بالإنترنت؟

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

كيف أستورد مجموعات من Thunder Client أو Postman؟

من تطبيق سطح المكتب أو الويب، اختر "استيراد" (Import) وحدد الصيغة (Thunder Client JSON, Postman v2.1, OpenAPI). تظهر المجموعات المستوردة فوراً في VS Code.

هل الملحق ينشئ مساحة عمل جديدة؟

لا، هو فقط عميل لمساحتك الحالية. تنشئ وتدير المساحات من تطبيق سطح المكتب أو الويب.

هل يمكن لمستخدمين تعديل نفس المجموعة في نفس الوقت؟

نعم، الحفظ الأخير هو الذي يُعتمد. للتنسيق الأفضل، استخدم ميزات التعاون في تطبيق سطح المكتب.

هل يوجد إكمال تلقائي للمتغيرات البيئية؟

نعم، عند كتابة {{ في أي حقل، تظهر قائمة بالمتغيرات المتاحة.


ملحق Apidog لـ VS Code خيار عملي لتطوير وتوثيق واختبار واجهات برمجة التطبيقات مباشرة أثناء البرمجة. الإعداد يستغرق دقائق، وتوفر لك سهولة إدارة جميع الطلبات والبيئات دون مغادرة VS Code.

المزيد عن Apidog

Top comments (0)