मिराज.जेएस का उपयोग करके रिएक्ट ऐप्स में मॉक एपीआई कैसे बनाएं और उपभोग करें

पूर्ण-स्टैक एप्लिकेशन विकसित करते समय, फ्रंटएंड कार्य का एक महत्वपूर्ण हिस्सा बैकएंड से वास्तविक समय के डेटा पर निर्भर करता है।

इसका मतलब यह हो सकता है कि जब तक एपीआई उपयोग के लिए उपलब्ध न हो जाए, तब तक आपको यूजर इंटरफेस विकसित करना बंद कर देना चाहिए। हालाँकि, फ्रंटएंड सेट करने के लिए एपीआई के तैयार होने की प्रतीक्षा करने से उत्पादकता में काफी कमी आ सकती है और परियोजना की समयसीमा बढ़ सकती है।

इस चुनौती के लिए एक बेहतरीन समाधान में मॉक एपीआई का उपयोग करना शामिल है। ये एपीआई आपको विकसित करने की अनुमति देते हैं और वास्तविक पर भरोसा किए बिना, वास्तविक डेटा की संरचना की नकल करने वाले डेटा का उपयोग करके अपने फ्रंटएंड का परीक्षण करें एपीआई.

मिराज.जेएस मॉक एपीआई के साथ शुरुआत करना

मिराज.जे.एस एक जावास्क्रिप्ट लाइब्रेरी है जो आपको अपने वेब एप्लिकेशन के क्लाइंट साइड पर चलने वाले टेस्ट सर्वर के साथ मॉक एपीआई बनाने की सुविधा देती है। इसका मतलब है कि आप अपने वास्तविक बैकएंड एपीआई की उपलब्धता या व्यवहार के बारे में चिंता किए बिना अपने फ्रंटएंड कोड का परीक्षण कर सकते हैं।

मिराज.जेएस का उपयोग करने के लिए, आपको सबसे पहले नकली एपीआई एंडपॉइंट बनाना होगा और उन प्रतिक्रियाओं को परिभाषित करना होगा जो उन्हें लौटानी चाहिए। फिर, मिराज.जेएस आपके फ्रंटएंड कोड द्वारा किए गए सभी HTTP अनुरोधों को रोकता है और इसके बजाय नकली प्रतिक्रियाएँ लौटाता है।

एक बार जब आपका एपीआई तैयार हो जाता है, तो आप केवल मिराज.जेएस की कॉन्फ़िगरेशन को बदलकर आसानी से इसका उपयोग कर सकते हैं।

आप इस प्रोजेक्ट का सोर्स कोड इसमें पा सकते हैं GitHub भण्डार.

मिराज.जेएस के साथ एक मॉक एपीआई सर्वर बनाएं

मॉक एपीआई कैसे सेट करें, यह प्रदर्शित करने के लिए, आप एक सरल टू-डू रिएक्ट ऐप बनाएंगे जो मिराज.जेएस बैकएंड का उपयोग करता है। पर पहले, create-react-app कमांड का उपयोग करके एक रिएक्ट एप्लिकेशन बनाएं. वैकल्पिक रूप से, आप उपयोग कर सकते हैं रिएक्ट प्रोजेक्ट स्थापित करने के लिए Vite करें. इसके बाद, मिराज.जेएस निर्भरता स्थापित करें।

npm install --save-dev miragejs

अब, अनुरोधों को रोकने और एपीआई प्रतिक्रियाओं की नकल करने के लिए मिराज.जेएस सर्वर इंस्टेंस बनाने के लिए, इसका उपयोग करें क्रिएटसर्वर तरीका। यह विधि एक कॉन्फ़िगरेशन ऑब्जेक्ट को पैरामीटर के रूप में लेती है।

इस वस्तु में शामिल है पर्यावरण और नाम स्थान एपीआई के लिए. पर्यावरण विकास के उस चरण को निर्दिष्ट करता है जिस पर एपीआई है जैसे कि विकास जबकि नेमस्पेस सभी एपीआई एंडपॉइंट्स में जोड़ा गया उपसर्ग है।

कोई नया बनाएं 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;
}

यदि आवश्यक हो, तो आप संस्करण निर्दिष्ट करने सहित, अपने वास्तविक एपीआई की यूआरएल संरचना से मेल खाने के लिए नामस्थान को अनुकूलित कर सकते हैं। इस तरह, एक बार जब आपका एपीआई तैयार हो जाता है, तो आप इसे न्यूनतम कोड परिवर्तनों के साथ आसानी से अपने फ्रंट-एंड एप्लिकेशन में एकीकृत कर सकते हैं।

इसके अलावा, सर्वर इंस्टेंस कॉन्फ़िगरेशन के भीतर, आप नकली वातावरण में डेटा भंडारण और पुनर्प्राप्ति का अनुकरण करने के लिए एक डेटा मॉडल भी परिभाषित कर सकते हैं।

अंत में, अपने सर्वर ऑब्जेक्ट को आयात करके मिराज.जेएस सर्वर शुरू करें Index.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>,
)

मॉक एपीआई में बीज डेटा जोड़ें

मिराज.जेएस में एक इन-मेमोरी डेटाबेस है जिसका उपयोग आप प्रारंभिक बीज डेटा के साथ मॉक एपीआई को प्रीपॉप्युलेट करने और अपने क्लाइंट एप्लिकेशन से परीक्षण डेटा प्रबंधित करने के लिए कर सकते हैं। इसका मतलब है कि आप मॉक डेटाबेस से परीक्षण डेटा संग्रहीत और प्राप्त कर सकते हैं और इसे अपने क्लाइंट एप्लिकेशन में उपयोग कर सकते हैं।

मॉक एपीआई में बीज डेटा जोड़ने के लिए, निम्नलिखित कोड जोड़ें सर्वर.जे.एस फ़ाइल के ठीक नीचे मॉडल वस्तु।

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.',
 });
 },

बीज फ़ंक्शन एक मिराज.जेएस सर्वर को तीन कार्य आइटमों से भर देता है, प्रत्येक एक शीर्षक और विवरण के साथ। वैकल्पिक रूप से, परीक्षण डेटा को हार्ड कोडिंग के बजाय, आप लाइब्रेरी को एकीकृत कर सकते हैं जैसे फ़ेकर.जे.एस आवश्यक परीक्षण डेटा उत्पन्न करने के लिए।

मॉक एपीआई रूट्स को परिभाषित करें

अब, मॉक एपीआई के लिए कुछ एपीआई रूट परिभाषित करें। इस मामले में, GET, POST और DELETE मॉक API अनुरोधों को संभालने के लिए मार्ग निर्दिष्ट करें।

बीज डेटा के ठीक नीचे, नीचे दिया गया कोड जोड़ें:

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(); 
 });
 }

एक रिएक्ट क्लाइंट बनाएं

अब जब मॉक एपीआई सेट हो गया है, तो आइए एपीआई एंडपॉइंट के साथ इंटरैक्ट करने और उपभोग करने के लिए एक रिएक्ट क्लाइंट बनाएं। आप अपनी पसंद के किसी भी यूआई घटक लाइब्रेरी का उपयोग करने के लिए स्वतंत्र हैं, लेकिन यह गाइड ऐप को स्टाइल करने के लिए चक्र यूआई का उपयोग करेगा।

सबसे पहले, इन निर्भरताओं को स्थापित करें:

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>
"teal" onClick={handleAddTodo}> Add Todo</Button>
 {loading? ( <Text>Loading...Text> ): (
 todos.map((todo) => (
2} p={2} borderWidth="1px">
"center">
"1">{todo.body}</Text>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

अब, ऐड और डिलीट ऑपरेशंस के लिए हैंडलर फ़ंक्शंस को परिभाषित करें। लेकिन पहले, इन राज्यों को जोड़ें। वैकल्पिक रूप से, आप कर सकते हैं राज्य प्रबंधन तर्क को परिभाषित करने के लिए यूज़रेड्यूसर हुक का उपयोग करें टू-डू सूची ऐप के लिए।

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

अब, जब एप्लिकेशन ब्राउज़र में पहली बार रैप करके लोड होता है तो इन-मेमोरी डेटाबेस में बीज डेटा को पुनः प्राप्त करने और प्रदर्शित करने के लिए तर्क को परिभाषित करें लाना ए में विधि उपयोगप्रभाव अंकुश।

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

रेंडरकी यह सुनिश्चित करने के लिए कि जब सर्वर चल रहा हो तो कोड इन-मेमोरी डेटाबेस में नए जोड़े गए डेटा के पुन: रेंडर को ट्रिगर करता है, यह सुनिश्चित करने के लिए स्टेट को यूज़इफेक्ट में भी शामिल किया गया है।

सीधे शब्दों में कहें, जब भी कोई उपयोगकर्ता मिराज.जेएस डेटाबेस में नया टू-डू डेटा जोड़ता है - घटक अद्यतन डेटा को प्रदर्शित करने के लिए फिर से प्रस्तुत करेगा।

एपीआई में डेटा जोड़ना

अब, POST अनुरोधों के माध्यम से एपीआई में डेटा जोड़ने के तर्क को परिभाषित करें। यूज़इफ़ेक्ट हुक के ठीक नीचे, निम्नलिखित कोड शामिल करें।

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 अनुरोध भेजता है।

यदि POST अनुरोध सफल होता है, तो कोड इसमें नया आइटम जोड़ता है सब सरणी, और अंत में, नए टू-डू आइटम को दिखाने के लिए घटक को फिर से प्रस्तुत करना ट्रिगर करता है।

मॉक एपीआई डिलीट अनुरोध

अब, DELETE मॉक एपीआई अनुरोधों के माध्यम से डेटा हटाने के तर्क को परिभाषित करें। इस प्रक्रिया में इन-मेमोरी डेटाबेस से टू-डू आइटम को हटाने के लिए 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);
 });
 };

ध्यान रखें कि यह प्रक्रिया केवल नए जोड़े गए डेटा को हटा सकती है, बीज डेटा को नहीं।

अंत में, आयात करें करने के लिए सूची में घटक ऐप.जेएसएक्स इसे DOM में रेंडर करने के लिए फ़ाइल करें।

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

महान! एक बार जब आप डेवलपमेंट सर्वर शुरू कर देते हैं, तो आप सीड डेटा ला सकते हैं, और अपने रिएक्ट ऐप में मॉक एपीआई से नया डेटा जोड़ और हटा सकते हैं।

विकास को गति देने के लिए मॉक एपीआई का उपयोग करना

मॉकिंग एपीआई फ्रंटएंड डेवलपमेंट को गति देने का एक शानदार तरीका है, चाहे आप किसी प्रोजेक्ट पर व्यक्तिगत रूप से काम कर रहे हों या किसी टीम के हिस्से के रूप में। मॉक एपीआई का उपयोग करके, आप जल्दी से यूआई बना सकते हैं और बैकएंड पूरा होने की प्रतीक्षा किए बिना उनके कोड का परीक्षण कर सकते हैं।