ليست لديك API جاهزة؟ لا مشكلة! تطوير واستخدام واجهات برمجة التطبيقات الوهمية باستخدام Mirage.js.

عند تطوير تطبيقات كاملة المكدس، يعتمد جزء كبير من عمل الواجهة الأمامية على البيانات في الوقت الفعلي من الواجهة الخلفية.

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

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

الشروع في العمل مع Mirage.js Mock APIs

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

instagram viewer

لاستخدام Mirage.js، تحتاج أولاً إلى إنشاء نقاط نهاية وهمية لواجهة برمجة التطبيقات (API) وتحديد الاستجابات التي يجب أن تعود بها. بعد ذلك، يعترض Mirage.js جميع طلبات HTTP التي يرسلها كود الواجهة الأمامية الخاص بك ويعيد الاستجابات الوهمية بدلاً من ذلك.

بمجرد أن تصبح واجهة برمجة التطبيقات الخاصة بك جاهزة، يمكنك التبديل بسهولة لاستخدامها عن طريق تغيير تكوين Mirage.js فقط.

يمكنك العثور على الكود المصدري لهذا المشروع في هذا جيثب مخزن.

قم بإنشاء خادم Mock API باستخدام Mirage.js

لتوضيح كيفية إعداد واجهات برمجة التطبيقات الوهمية، ستنشئ تطبيق React بسيطًا للمهام التي تستخدم الواجهة الخلفية Mirage.js. لكن اولا، قم بإنشاء تطبيق React باستخدام الأمر create-react-app. بدلا من ذلك، يمكنك استخدام Vite لإعداد مشروع React. بعد ذلك، قم بتثبيت تبعية Mirage.js.

npm install --save-dev miragejs

الآن، لإنشاء مثيل خادم Mirage.js لاعتراض الطلبات واستجابات API الوهمية، استخدم الأمر createServer طريقة. تأخذ هذه الطريقة كائن التكوين كمعلمة.

يتضمن هذا الكائن بيئة و مساحة الاسم لواجهة برمجة التطبيقات. تحدد البيئة مرحلة التطوير التي وصلت إليها واجهة برمجة التطبيقات (API)، مثل التطوير بينما تكون مساحة الاسم هي البادئة المضافة إلى جميع نقاط نهاية واجهة برمجة التطبيقات (API).

إنشاء جديد src/server.js الملف ويتضمن الكود التالي:

import { createServer, Model } from'miragejs';
const DEFAULT_CONFIG = {
 environment: "development",
 namespace: "api",
};


exportfunctionmakeServer({ environment, namespace } = 
 DEFAULT_CONFIG) {
let server = createServer({
 environment,
 namespace,
 models: {
 Todo: Model, 
 },
 });
return server;
}

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

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

أخيرًا، قم بتشغيل خادم Mirage.js عن طريق استيراد كائن الخادم إلى ملفك مؤشر.jsx أو main.jsx الملف على النحو التالي:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { makeServer } from'./server';
if ( process.env.NODE_ENV 'development' && 
typeof makeServer 'function'
 ) {
 makeServer();}
ReactDOM.createRoot(document.getElementById('root')).render(


 </React.StrictMode>,
)

أضف بيانات البذور إلى Mock API

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

لإضافة بيانات أولية إلى Mock API، قم بإضافة الكود التالي في ملف server.js الملف الموجود أسفل ملف عارضات ازياء هدف.

seeds(server) {
 server.create('Todo', {
 title: 'item no 1',
 body:
'Do something nice for someone I care about',
 });
 server.create('Todo', {
 title: 'item no 2',
 body:
'Memorize the fifty states and their capitals.',
 });
 server.create('Todo', {
 title: 'item no 3',
 body:
'Watch a classic movie.',
 });
 },

ال بذور تقوم الوظيفة بملء خادم Mirage.js بثلاثة عناصر مهام، كل منها بعنوان ووصف. بشكل اختياري، بدلاً من الترميز الصعب لبيانات الاختبار، يمكنك دمج مكتبة مثل Faker.js لتوليد بيانات الاختبار المطلوبة.

تحديد مسارات API وهمية

الآن، حدد بعض مسارات واجهة برمجة التطبيقات (API) لواجهة برمجة التطبيقات (API) الوهمية. في هذه الحالة، حدد المسارات للتعامل مع طلبات GET وPOST وDELETE الوهمية لواجهة برمجة التطبيقات.

مباشرة أسفل البيانات الأولية، أضف الكود أدناه:

routes() {
this.namespace = 'api/todos'; 

this.get('/', (schema, request) => {
return schema.all('Todo'); 
 });
this.post('/', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.create('Todo', attrs); 
 });
this.delete('/:id', (schema, request) => {
let id = request.params.id;
return schema.find('Todo', id).destroy(); 
 });
 }

بناء عميل React

الآن بعد أن تم إعداد واجهة برمجة التطبيقات الوهمية، فلنبني عميل React للتفاعل مع نقاط نهاية واجهة برمجة التطبيقات واستهلاكها. أنت حر في استخدام أي مكتبة لمكونات واجهة المستخدم التي تريدها، ولكن هذا الدليل سيستخدم Chakra UI لتصميم التطبيق.

أولاً، قم بتثبيت هذه التبعيات:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

بعد ذلك، قم بإنشاء جديد src/components/TodoList.jsx الملف، ويتضمن التعليمات البرمجية التالية:

import React, { useState, useEffect } from'react';
import {
 Button,
 Box,
 Container,
 Text,
 Input,
 FormControl,
 Flex,
} from'@chakra-ui/react';

الآن، حدد مكونًا وظيفيًا لعرض واجهة مستخدم قائمة المهام، بما في ذلك حقول الإدخال لإضافة مهام جديدة وقائمة بالمهام الموجودة.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

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

const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState({ title: '', body: '' });
const [loading, setLoading] = useState(true);
const [renderKey, setRenderKey] = useState(0);

الآن، قم بتحديد المنطق لاسترداد وعرض البيانات الأولية في قاعدة البيانات في الذاكرة عند تحميل التطبيق لأول مرة في المتصفح عن طريق التفاف أحضر الطريقة في أ useEffect خطاف.

 useEffect(() => {
 fetch('/api/todos') 
 .then((response) => response.json())
 .then((data) => {
 setTodos(data.todos);
 setLoading(false);
 });
 }, [renderKey]);

ال renderKey يتم تضمين الحالة أيضًا في useEffect للتأكد من أن الكود يؤدي إلى إعادة عرض البيانات المضافة حديثًا في قاعدة البيانات في الذاكرة عند تشغيل الخادم.

ببساطة، عندما يضيف المستخدم بيانات مهمة جديدة إلى قاعدة بيانات Mirage.js، سيتم إعادة عرض المكون لعرض البيانات المحدثة.

إضافة البيانات إلى API

الآن، حدد منطق إضافة البيانات إلى واجهة برمجة التطبيقات (API) من خلال طلبات POST. مباشرة أسفل الخطاف useEffect، قم بتضمين الكود التالي.

const handleInputChange = (e) => {
const { name, value } = e.target;
 setNewTodo((prevTodo) => ({ ...prevTodo, [name]: value }));
};
const handleAddTodo = () => {
 setLoading(true);
 fetch('/api/todos', {
 method: 'POST',
 headers: {
'Content-Type': 'application/json',
 },
 body: JSON.stringify(newTodo),
 }).then((response) => response.json()).then((createdTodo) => {
 setTodos((prevTodos) => [createdTodo, ...prevTodos]);
 setNewTodo({ title: '', body: '' });
 setRenderKey((prevKey) => prevKey + 1); 
 setLoading(false); 
 }).catch((error) => {
console.error('Error adding todo:', error);
 setLoading(false); 
 });
};

عندما يقوم المستخدم بإدخال البيانات في حقل إدخال المهام والنقر فوق الزر أضف تودو الزر، يقوم الكود بتحديث newTodo الدولة مع مدخلات المستخدم. بعد ذلك، يرسل طلب POST وهميًا إلى واجهة برمجة التطبيقات (API) مع كائن البيانات الجديد في نص الطلب لحفظه في قاعدة البيانات في الذاكرة.

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

طلبات حذف API وهمية

الآن، حدد منطق حذف البيانات من خلال طلبات DELETE الوهمية لواجهة برمجة التطبيقات (API). تتضمن هذه العملية إرسال طلب DELETE لإزالة عنصر المهام من قاعدة البيانات في الذاكرة. في حالة النجاح، قم بتحديث كلا الملفين جميع المهام و تحميل الحالة لتعكس عملية الحذف.

const handleDelete = (id) => { 
let deleteInProgress = true;
 fetch(`/api/todos/${id}`, {
 method: 'DELETE',
 }).then((response) => {
if (response.status 204) {
returnnull;
 } else {
return response.json();
 }
 }) .then((data) => {
if (data && data.error) {
console.error('Error deleting todo:', data.error);
 } else { 
 setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
 setRenderKey((prevKey) => prevKey + 1);
 }
 deleteInProgress = false;
 }).catch((error) => {
console.error('Error deleting todo:', error);
 deleteInProgress = false;
 }) .finally(() => {
 setLoading(deleteInProgress);
 });
 };

ضع في اعتبارك أن هذه العملية يمكنها فقط حذف البيانات المضافة حديثًا، وليس البيانات الأولية.

أخيرًا، قم باستيراد ملف عمل قائمة المكون في App.jsx الملف لعرضه في DOM.

import TodoList from'./components/TodoList';
//code ...

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

استخدام واجهات برمجة التطبيقات الوهمية لتسريع عملية التطوير

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