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

في منشور المدونة هذا، سنستكشف كيفية دمج MockAPI.io في تطبيق Next.js الجديد للسخرية من بيانات الواجهة الخلفية بينما تكون الواجهة الخلفية الحقيقية قيد التطوير.

ما هو MockAPI.io؟

MockAPI.io هو نظام أساسي سهل الاستخدام يسمح للمطورين بإنشاء واجهات برمجة تطبيقات REST وهمية. باستخدام هذه الأداة، يمكنك محاكاة نقاط النهاية الحقيقية لواجهة برمجة التطبيقات (API)، وتحديد الموارد (نماذج البيانات)، واختبار تطبيقك دون الحاجة إلى واجهة خلفية فعلية. إنها مفيدة بشكل خاص لتطوير الواجهة الأمامية والنماذج الأولية.

لماذا نستخدم MockAPI.io؟

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

دليل خطوة بخطوة: إعداد MockAPI.io باستخدام تطبيق Next.js

1. إنشاء تطبيق Next.js جديد
أولاً، لنقم بإنشاء مشروع Next.js جديد. قم بتشغيل الأمر التالي لتهيئة التطبيق:

npx create-next-app@latest mockapi-nextjs-app

الانتقال إلى دليل المشروع الخاص بك:

cd mockapi-nextjs-app

قم بتشغيل خادم التطوير للتأكد من إعداد كل شيء بشكل صحيح:

npm run dev

يجب الآن تشغيل تطبيقك على http://localhost:3000.

2. إنشاء حساب MockAPI.io
بعد ذلك، قم بالتسجيل في MockAPI.io إذا لم يكن لديك حساب بالفعل. بمجرد تسجيل الدخول، يمكنك إنشاء مشروع جديد عن طريق النقر على زر إنشاء مشروع جديد.

3. إنشاء مورد (نقطة النهاية)
بمجرد إنشاء مشروعك، حدد موردًا، مثل "المستخدمون":

انقر فوق "إضافة مورد" وقم بتسميته "المستخدمين".
تحديد خصائص مثل المعرف والاسم والبريد الإلكتروني والصورة الرمزية (لصور الملف الشخصي للمستخدم).
سيقوم MockAPI.io تلقائيًا بإنشاء بعض بيانات المستخدم المزيفة لك.
سيكون لديك الآن قائمة بنقاط نهاية واجهة برمجة التطبيقات مثل:

الحصول على /المستخدمين - الحصول على كافة المستخدمين.
POST /users - إنشاء مستخدم جديد.
PUT /users/{id} - تحديث المستخدم.
DELETE /users/{id} - حذف مستخدم.
سيبدو عنوان URL الأساسي لواجهة برمجة التطبيقات الخاصة بك على النحو التالي: https://mockapi.io/projects/{your_project_id}/users.

4. جلب البيانات من MockAPI في Next.js
الآن بعد أن أصبح لديك واجهة برمجة التطبيقات الوهمية، يمكنك دمجها في تطبيق Next.js باستخدام getServerSideProps الخاص بـ Next.js أو getStaticProps. فلنجلب البيانات من نقطة النهاية /users ونعرضها في التطبيق.

إليك كيفية استخدام getServerSideProps في مشروع Next.js لجلب بيانات المستخدم من MockAPI.io.

إنشاء صفحة جديدة في pages/users.js:

import React from 'react';
import axios from 'axios';

const Users = ({ users }) => {
  return (
    

      
User List
      

        {users.map((user) => (
          

            
            {user.name} - {user.email}
          
        ))}
      
    
  );
};

// Fetch data on each request (SSR)
export async function getServerSideProps() {
  try {
    const response = await axios.get('https://mockapi.io/projects/{your_project_id}/users');
    const users = response.data;

    return {
      props: { users }, // Will be passed to the page component as props
    };
  } catch (error) {
    console.error("Error fetching users:", error);
    return {
      props: { users: [] },
    };
  }
}

export default Users;

في هذا المثال:

يقدم getServerSideProps طلبًا من جانب الخادم لجلب بيانات المستخدم من نقطة نهاية API الوهمية.
يتم عرض قائمة المستخدمين مع صور الملفات الشخصية والأسماء ورسائل البريد الإلكتروني.

5. اختبار التكامل الوهمي لواجهة برمجة التطبيقات
قم بتشغيل خادم التطوير لاختبار التكامل:

npm run dev

انتقل إلى http://localhost:3000/users، وسترى قائمة بالمستخدمين الذين تم جلبهم من MockAPI.io معروضة في تطبيق Next.js.

6. إضافة ميزات جديدة: إنشاء مستخدم
دعونا نضيف ميزة حيث يمكنك إنشاء مستخدم جديد عبر نموذج في تطبيق Next.js الخاص بك. سنرسل طلب POST إلى نقطة نهاية MockAPI.

إنشاء مكون نموذج في الصفحات/add-user.js:

import { useState } from 'react';
import axios from 'axios';

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [avatar, setAvatar] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('https://mockapi.io/projects/{your_project_id}/users', {
        name,
        email,
        avatar
      });
      console.log("User added:", response.data);
    } catch (error) {
      console.error("Error adding user:", error);
    }
  };

  return (
    

      
Add New User
      

         setName(e.target.value)}
        />
         setEmail(e.target.value)}
        />
         setAvatar(e.target.value)}
        />
        Add User
      
    
  );
};

export default AddUser;

الآن، عند إرسال النموذج، سيتم إنشاء مستخدم جديد في MockAPI.

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

خاتمة

يعد استخدام MockAPI.io مع Next.js طريقة ممتازة لإنشاء تطبيق الواجهة الأمامية واختباره حتى عندما تكون الواجهة الخلفية قيد التقدم. من خلال محاكاة تفاعلات واجهة برمجة التطبيقات الحقيقية، يمكنك الحفاظ على المضي قدمًا في تطوير الواجهة الأمامية وضمان الانتقال السلس بمجرد اكتمال الواجهة الخلفية الفعلية.

سواء كنت تعمل ضمن فريق كبير أو مشروع منفرد، فإن MockAPI.io هي أداة قيمة لمطوري الواجهة الأمامية. ابدأ في استخدامه اليوم لتبسيط عملية التطوير الخاصة بك!