مرحبًا، زملاء مطوري الويب! في هذه المدونة، سأظهر لكم كيف تستخدمون axios و typescript لبناء واجهات برمجة التطبيقات الرائعة التي تكون سريعة وآمنة وسهلة الصيانة. سواء كنتم مبتدئين أو محترفين، ستجدون شيئًا مفيدًا ومثيرًا في هذه المقالة. لذا، احصلوا على كوب من القهوة ودعونا نبدأ!

ما هو Axios؟

Axios هي مكتبة جافا سكريبت شهيرة تتيح لك إجراء طلبات HTTP من متصفحك أو خادم Node.js. لديها تركيب بسيط وأنيق، تدعم الوعود و async/await، ويمكنها التعامل مع سيناريوهات متنوعة مثل الاعتراضات، الوقت المحدد، إلغاء الطلبات، والمزيد. Axios متوافقة أيضًا مع معظم المتصفحات والمنصات، مما يجعلها أداة متعددة الاستخدامات وموثوقة لتطوير الويب.

تعريف Typescript

Typescript هو مجموعة محسّنة من جافا سكريبت تضيف نوعًا ثابتًا وميزات أخرى للغة. يساعدك على اكتشاف الأخطاء والعيوب مبكرًا، وتحسين جودة الكود وقابليته للقراءة، وتعزيز تجربة التطوير الخاصة بك مع أدوات مثل IntelliSense واكتمال الكود. يتم أيضًا تجميع Typescript إلى جافا سكريبت العادية، لذا يمكنك استخدامه مع أي إطار عمل أو مكتبة تعجبك.

ما هي واجهة برمجة التطبيقات ولماذا تحتاج واحدة؟

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

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

كيف تنشئ واجهة برمجة التطبيقات باستخدام Node.js و Express

واحدة من أكثر الطرق شهرة وقوة لإنشاء واجهة برمجة التطبيقات هي استخدام Node.js و Express. Node.js هو بيئة تشغيل تتيح لك تشغيل كود جافا سكريبت على جانب الخادم، بينما Express هو إطار عمل يبسط عملية إنشاء خوادم الويب ومعالجة طلبات واستجابات HTTP.

لإنشاء واجهة برمجة التطبيقات باستخدام Node.js و Express، تحتاج إلى اتباع هذه الخطوات:

1. قم بتثبيت Node.js و Express على جهازك. يمكنك تنزيل Node.js من هنا وتثبيت Express باستخدام الأمر npm install express.
2. قم بإنشاء مجلد لمشروعك وتهيئته باستخدام npm init. سيؤدي ذلك إلى إنشاء ملف package.json يحتوي على البيانات الوصفية والاعتمادات لمشروعك.
3. قم بإنشاء ملف index.js الذي سيكون نقطة الدخول لتطبيقك. في هذا الملف، تحتاج إلى استيراد Express، وإنشاء مثال للتطبيق، وتحديد بعض المسارات التي ستتعامل مع الطلبات إلى واجهة برمجة التطبيقات الخاصة بك. على سبيل المثال، يمكنك إنشاء مسار يعيد رسالة بسيطة عندما يزور شخص ما المسار الجذري لتطبيقك:

// استيراد Express
const express = require('express');

// إنشاء مثال للتطبيق
const app = express();

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

// الاستماع على المنفذ 3000
app.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

4. قم بتشغيل تطبيقك باستخدام الأمر node index.js وزيارة http://localhost:3000 في متصفحك. يجب أن ترى الرسالة "مرحبًا، أيها العالم!" معروضة على الشاشة.

تهانينا، لقد أنشأت للتو أول واجهة برمجة تطبيقات لك باستخدام Node.js و Express!

كيفية استخدام Axios لإجراء طلبات HTTP إلى واجهة برمجة التطبيقات الخاصة بك

الآن بعد أن قمت باختبار واجهة برمجة التطبيقات الخاصة بك، تحتاج إلى استخدامها في تطبيق الويب الخاص بك. واحدة من أسهل وأكثر الطرق أناقة لإجراء طلبات HTTP إلى واجهة برمجة التطبيقات الخاصة بك هي استخدام axios، مكتبة جافا سكريبت التي تبسط عملية جلب البيانات من الويب.

لاستخدام axios لإجراء طلبات HTTP إلى واجهة برمجة التطبيقات الخاصة بك، تحتاج إلى اتباع هذه الخطوات:

1. قم بتثبيت axios في مشروعك باستخدام الأمر npm install axios.
2. استورد axios في ملف جافا سكريبت حيث تريد استخدامه. على سبيل المثال، يمكنك استيراده في ملف index.js الخاص بك:

// استيراد axios
const axios = require('axios');

3. استخدم طرق axios لإجراء طلبات HTTP إلى نقاط نهاية واجهة برمجة التطبيقات الخاصة بك. على سبيل المثال، يمكنك استخدام طريقة axios.get للحصول على البيانات من المسار الذي يعيد رسالة بسيطة التي أنشأناها سابقًا:

// إجراء طلب GET إلى المسار الجذري لواجهة برمجة التطبيقات
axios.get('http://localhost:3000')
  .then(response => {
    // معالجة استجابة النجاح
    console.log(response.data); // يطبع "مرحبًا، أيها العالم!"
  })
  .catch(error => {
    // معالجة استجابة الخطأ
    console.error(error);
  });

يمكنك أيضًا استخدام طرق Axios الأخرى لإجراء أنواع مختلفة من طلبات HTTP، مثل POST و PUT و PATCH و DELETE، إلخ. يمكنك أيضًا تمرير رؤوس، معلمات، أو بيانات جسم إلى طلباتك، ومعالجة حالة الاستجابة، والبيانات، والرؤوس، إلخ.

كيفية استخدام Typescript لإضافة نوع ثابت إلى واجهة برمجة التطبيقات الخاصة بك

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

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

لإضافة نوع ثابت إلى واجهة برمجة التطبيقات الخاصة بك باستخدام Typescript، تحتاج إلى اتباع هذه الخطوات:

1. قم بتثبيت Typescript في مشروعك باستخدام الأمر npm install typescript.
2. قم بإنشاء ملف tsconfig.json يحتوي على خيارات التكوين لـ Typescript. يمكنك استخدام الأمر npx tsc --init لإنشاء ملف افتراضي، أو تخصيصه وفقًا لاحتياجاتك. على سبيل المثال، يمكنك تعيين خيارات الهدف، والوحدة، والصارمة، و outDir:

{
  "compilerOptions": {
    "target": "es6", // تحديد الإصدار المستهدف من جافا سكريبت
    "module": "commonjs", // تحديد نظام الوحدة
    "strict": true, // تمكين وضع صارم
    "outDir": "./dist" // تحديد دليل الإخراج
  }
}

3. قم بإعادة تسمية ملف index.js إلى index.ts، وأضف تعليقات النوع إلى متغيراتك ومعلماتك والقيم المرجعة. على سبيل المثال، يمكنك إضافة أنواع إلى المسار الذي يعيد رسالة بسيطة التي أنشأناها سابقًا:

// استيراد Express
import express, { Request, Response } from 'express';

// إنشاء مثال للتطبيق
const app = express();

// تحديد مسار يعيد رسالة بسيطة
app.get('/', (req: Request, res: Response) => {
  res.send('مرحبًا، أيها العالم!');
});

// الاستماع على المنفذ 3000
app.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

4. قم بتجميع كود Typescript إلى جافا سكريبت باستخدام الأمر npx tsc. سيؤدي ذلك إلى إنشاء مجلد dist يحتوي على ملفات جافا سكريبت المجمعة.

5. قم بتشغيل تطبيقك باستخدام الأمر node dist/index.js وزيارة http://localhost:3000 في متصفحك. يجب أن ترى نفس الرسالة "مرحبًا، أيها العالم!" معروضة على الشاشة.

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

كيفية استخدام Axios و Typescript معًا لإجراء طلبات HTTP آمنة من حيث النوع

أحد التحديات في استخدام axios و typescript معًا هو أن axios لا يقدم تعريفات نوع لبيانات الاستجابة التي يقوم بإرجاعها.

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

لحسن الحظ، هناك حل لهذه المشكلة، وهو استخدام مكتبة تسمى axios-typescript. axios-typescript هي غلاف حول axios يضيف تعريفات نوع و جنريك لطرق axios، مما يجعلها آمنة من حيث النوع وسهلة الاستخدام مع typescript.

لاستخدام axios-typescript لإجراء طلبات HTTP آمنة من حيث النوع إلى واجهة برمجة التطبيقات الخاصة بك، تحتاج إلى اتباع هذه الخطوات:

1. قم بتثبيت axios-typescript في مشروعك باستخدام الأمر npm install axios-typescript.
2. استورد axios-typescript في ملف typescript الخاص بك حيث تريد استخدامه. على سبيل المثال، يمكنك استيراده في ملف index.ts الخاص بك:

// استيراد axios-typescript
import axios from 'axios-typescript';

3. حدد أنواع البيانات التي تتوقعها من نقاط نهاية واجهة برمجة التطبيقات. على سبيل المثال، يمكنك تحديد نوع لكائن المستخدم الذي أنشأناه سابقًا:

// تحديد نوع لكائن المستخدم
type User = {
  name: string;
  email: string;
  password: string;
};

4. استخدم طرق axios-typescript لإجراء طلبات HTTP إلى نقاط نهاية واجهة برمجة التطبيقات الخاصة بك، ومرر نوع البيانات كمعامل جنريك. على سبيل المثال، يمكنك استخدام طريقة axios.post لإنشاء مستخدم جديد على واجهة برمجة التطبيقات الخاصة بك، وتمرر نوع User كمعامل جنريك:

// إجراء طلب POST إلى مسار /users في واجهة برمجة التطبيقات، وتمرر نوع User كمعامل جنريك
axios.post<User>('http://localhost:3000/users', {
  // تمرير بيانات المستخدم كجسم الطلب
  name: 'جون دو',
  email: 'john.doe@example.com',
  password: '123456'
})
  .then(response => {
    // معالجة استجابة النجاح
    console.log(response.status); // يطبع 201
    console.log(response.data); // يطبع كائن المستخدم المُنشأ، مع نوع User
  })
  .catch(error => {
    // معالجة استجابة الخطأ
    console.error(error);
  });

باستخدام axios-typescript، يمكنك إجراء طلبات HTTP آمنة من حيث النوع إلى واجهة برمجة التطبيقات الخاصة بك، والاستفادة من ميزات التحقق من النوع واكتمال النص في Typescript.

يمكنك أيضًا تجنب عناء تعريف وتحويل أنواع بيانات الاستجابة يدويًا، والاعتماد على استنتاج النوع والجنريك في Typescript. تدعم axios-typescript أيضًا جميع الميزات والخيارات الخاصة بـ axios، مثل الاعتراضات، والإلغاءات، والأوقات المحددة، إلخ.

كيف تختبر واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog

الآن بعد أن قمت بإنشاء واجهة برمجة التطبيقات الخاصة بك، تحتاج إلى اختبارها للتأكد من أنها تعمل كما هو متوقع وتفي بمتطلبات عملائك أو مستخدميك. واحدة من أفضل الأدوات لاختبار واجهات برمجة التطبيقات هي Apidog، وهي منصة قائمة على الويب تتيح لك إنشاء وتشغيل ومشاركة اختبارات واجهات برمجة التطبيقات بطريقة بسيطة وسهلة الفهم.

لاختبار واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog، يجب عليك اتباع هذه الخطوات:

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: في محرر الاختبار، أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات الخاصة بك، واختر طريقة HTTP، وأضف أي رؤوس أو معلمات أو بيانات جسم تحتاجها. على سبيل المثال، يمكنك اختبار المسار الذي يعيد رسالة بسيطة التي أنشأناها سابقًا:

الخطوة 3: انقر على زر الإرسال وانظر نتيجة اختبارك. يجب أن ترى رمز الحالة، وزمن الاستجابة، وجسم الاستجابة لواجهة برمجة التطبيقات الخاصة بك. على سبيل المثال، يجب أن ترى شيئًا مثل هذا:

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

خاتمة

لقد تعلمت للتو كيفية استخدام axios و typescript لإنشاء واجهات برمجة تطبيقات مذهلة تكون سريعة وآمنة وسهلة الصيانة. في هذه المقالة، اكتشفت:

• فوائد استخدام واجهات برمجة التطبيقات لتطوير الويب
• الخطوات لإنشاء واجهة برمجة تطبيقات باستخدام Node.js و Express
• الأدوات لاختبار واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog
• الطرق لاستخدام axios لجلب البيانات من واجهة برمجة التطبيقات الخاصة بك
• مزايا استخدام Typescript لإضافة نوع ثابت إلى واجهة برمجة التطبيقات الخاصة بك
• التقنيات لاستخدام axios-typescript لإجراء طلبات آمنة من حيث النوع

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

شكرًا لقراءة المقالة ونتمنى لكم البرمجة السعيدة! 😊