Ինչպես կառուցել և սպառել ծաղրական API-ներ React հավելվածներում՝ օգտագործելով Mirage.js-ը
API-ն պատրաստ չունե՞ք: Ոչ մի խնդիր! Մշակեք և օգտագործեք ծաղրական API-ներ Mirage.js-ի հետ:
Ամբողջ փաթեթային հավելվածներ մշակելիս, ճակատային աշխատանքի զգալի մասը հիմնված է իրական ժամանակի տվյալների վրա:
Սա կարող է նշանակել, որ դուք պետք է հետաձգեք օգտատիրոջ միջերեսի զարգացումը, մինչև որ API-ն հասանելի լինի օգտագործման համար: Այնուամենայնիվ, API-ի պատրաստ լինելուն սպասելը կարող է զգալիորեն նվազեցնել արտադրողականությունը և երկարացնել ծրագրի ժամկետները:
Այս մարտահրավերի հիանալի լուծումը ներառում է կեղծ API-ների օգտագործումը: Այս API-ները թույլ են տալիս մշակել և փորձարկել ձեր ճակատային մասը՝ օգտագործելով տվյալներ, որոնք ընդօրինակում են իրական տվյալների կառուցվածքը՝ այդ ամենը առանց իրական API-ի վրա հենվելու:
Ինչպես սկսել Mirage.js Mock API-ներով
Mirage.js-ը JavaScript գրադարան է, որը թույլ է տալիս ստեղծել կեղծ API-ներ, որոնք լրացվում են փորձնական սերվերով, որն աշխատում է ձեր վեբ հավելվածի հաճախորդի կողմից: Սա նշանակում է, որ դուք կարող եք փորձարկել ձեր ճակատային ծածկագիրը՝ առանց անհանգստանալու ձեր իրական հետնամասի API-ի առկայության կամ վարքագծի մասին:
Mirage.js-ն օգտագործելու համար նախ պետք է ստեղծել API-ի կեղծ վերջնակետեր և սահմանել պատասխանները, որոնք դրանք պետք է վերադարձնեն: Այնուհետև Mirage.js-ն ընդհատում է բոլոր HTTP հարցումները, որոնք կատարում է ձեր ճակատային կոդը և փոխարենը վերադարձնում է կեղծ պատասխանները:
Երբ ձեր API-ն պատրաստ լինի, կարող եք հեշտությամբ անցնել դրա օգտագործմանը՝ փոխելով միայն Mirage.js-ի կազմաձևումը:
Դուք կարող եք գտնել այս նախագծի սկզբնական կոդը այս GitHub պահոցում:
Ստեղծեք կեղծ API սերվեր Mirage.js-ով
Ցույց տալու համար, թե ինչպես կարգավորել ծաղրական API-ները, դուք կստեղծեք մի պարզ React հավելված, որն օգտագործում է Mirage.js հետնամասը: Բայց նախ ստեղծեք React հավելված՝ օգտագործելով create-react-app հրամանը: Որպես այլընտրանք, դուք կարող եք օգտագործել Vite-ը React նախագիծ ստեղծելու համար: Հաջորդը, տեղադրեք Mirage.js կախվածությունը:
npm install --save-dev miragejsԱյժմ Mirage.js սերվերի օրինակ ստեղծելու համար հարցումները ընդհատելու և API-ի պատասխանները ծաղրելու համար օգտագործեք createServer մեթոդը: Այս մեթոդը որպես պարամետր վերցնում է կազմաձևման օբյեկտը:
Այս օբյեկտը ներառում է միջավայր և անունների տարածություն API-ի համար: Շրջակա միջավայրը սահմանում է զարգացման այն փուլը, որում գտնվում է API-ն, օրինակ՝ զարգացումը, մինչդեռ անվանատարածքը նախածանցն է, որն ավելացվել է API-ի բոլոր վերջնակետերին:
Ստեղծեք նոր src/server.js ֆայլ և ներառեք հետևյալ կոդը.
import { createServer, Model } from 'miragejs';
const DEFAULT_CONFIG = {
environment: "development",
namespace: "api",
};
export function makeServer({ environment, namespace } =
DEFAULT_CONFIG) {
let server = createServer({
environment,
namespace,
models: {
Todo: Model,
},
});
return server;
}Անհրաժեշտության դեպքում կարող եք հարմարեցնել անվանատարածքը՝ համապատասխանեցնելով ձեր իրական API-ի URL-ի կառուցվածքին, ներառյալ տարբերակի նշումը: Այս կերպ, երբ ձեր API-ն պատրաստ լինի, դուք կարող եք հեշտությամբ ինտեգրել այն ձեր առջևի հավելվածում՝ նվազագույն կոդի փոփոխություններով:
Բացի այդ, սերվերի օրինակի կոնֆիգուրացիայի շրջանակներում դուք կարող եք նաև սահմանել տվյալների մոդել՝ կեղծ միջավայրում տվյալների պահպանման և որոնման մոդելավորման համար:
Վերջապես, գործարկեք Mirage.js սերվերը՝ ներմուծելով սերվերի օբյեկտը ձեր index.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>
<App />
</React.StrictMode>,
)Ավելացնել Seed Data Mock API-ին
Mirage.js-ն ունի հիշողության տվյալների բազա, որը կարող եք օգտագործել կեղծ API-ը նախնական սկզբնական տվյալների հետ համալրելու և ձեր հաճախորդի հավելվածի փորձարկման տվյալները կառավարելու համար: Սա նշանակում է, որ դուք կարող եք պահել և վերցնել թեստի տվյալները կեղծ տվյալների բազայից և օգտագործել դրանք ձեր հաճախորդի հավելվածում:
Սերմերի տվյալները Mock API-ին ավելացնելու համար ավելացրեք հետևյալ կոդը server.js ֆայլում՝ հենց models օբյեկտի տակ:
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.',
});
},seeds ֆունկցիան լրացնում է Mirage.js սերվերը երեք անելիքներով, որոնցից յուրաքանչյուրն ունի վերնագիր և նկարագրություն: Ընտրովի, թեստի տվյալների կոշտ կոդավորման փոխարեն, դուք կարող եք ինտեգրել այնպիսի գրադարան, ինչպիսին է Faker.js-ը՝ պահանջվող թեստի տվյալները ստեղծելու համար:
Սահմանեք Mock API երթուղիները
Այժմ սահմանեք API-ի որոշ երթուղիներ կեղծ API-ի համար: Այս դեպքում նշեք երթուղիներ՝ կարգավորելու 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();
});
}Ստեղծեք React հաճախորդ
Այժմ, երբ ստեղծվել է կեղծ API-ն, եկեք ստեղծենք React հաճախորդ՝ API-ի վերջնակետերը փոխազդելու և սպառելու համար: Դուք ազատ եք օգտագործել ցանկացած UI բաղադրիչ գրադարան, որը Ձեզ դուր է գալիս, բայց այս ուղեցույցը կօգտագործի 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';Այժմ սահմանեք ֆունկցիոնալ բաղադրիչ՝ անելիքների ցանկի օգտատիրոջ միջերեսը ներկայացնելու համար, ներառյալ մուտքագրման դաշտերը՝ նոր առաջադրանքներ ավելացնելու համար և առկա առաջադրանքների ցանկը:
export default function TodoList() {
return (
<Container>
<Text fontSize="xl" mb={4}>Todo List</Text>
<FormControl mb={4}>
<Input
type="text"
name="body"
value={newTodo.body}
onChange={handleInputChange}
/>
</FormControl>
<Button colorScheme="teal" onClick={handleAddTodo}> Add Todo</Button>
{loading ? ( <Text>Loading...</Text> ) : (
todos.map((todo) => (
<Box key={todo.id} mb={2} p={2} borderWidth="1px">
<Flex align="center">
<Text flex="1">{todo.body}</Text>
<Button
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);Այժմ սահմանեք հիշողության տվյալների բազայում սկզբնական տվյալների առբերման և ցուցադրման տրամաբանությունը, երբ հավելվածն առաջին անգամ բեռնվում է դիտարկիչում՝ fetch մեթոդը փաթաթելով useEffect կեռիկի մեջ:
useEffect(() => {
fetch('/api/todos')
.then((response) => response.json())
.then((data) => {
setTodos(data.todos);
setLoading(false);
});
}, [renderKey]);renderKey վիճակը ներառված է նաև useEffect-ում՝ ապահովելու համար, որ կոդը գործարկի հիշողության տվյալների բազայում նոր ավելացված տվյալների վերարտադրումը, երբ սերվերը աշխատում է:
Պարզ ասած, ամեն անգամ, երբ օգտատերը նոր անելիքների տվյալներ է ավելացնում Mirage.js տվյալների բազայում, բաղադրիչը կվերարտադրվի՝ թարմացված տվյալները ցուցադրելու համար:
Տվյալների ավելացում API-ին
Այժմ սահմանեք POST հարցումների միջոցով API-ին տվյալներ ավելացնելու տրամաբանությունը: Անմիջապես 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 հարցումը հաջողված է, կոդը ավելացնում է նոր տարրը todos զանգվածին, և վերջապես, գործարկում է բաղադրիչի վերաարտադրումը` նոր անելիքը ցուցադրելու համար:
Mock API DELETE հարցումներ
Այժմ սահմանեք տվյալների ջնջման տրամաբանությունը DELETE կեղծ API հարցումների միջոցով: Այս գործընթացը ներառում է DELETE հարցում ուղարկելը` անելիքները հիշողության տվյալների բազայից հեռացնելու համար: Եթե հաջողվի, թարմացրեք և՛ todos և՛ բեռնման վիճակը՝ արտացոլելու ջնջման գործընթացը:
const handleDelete = (id) => {
let deleteInProgress = true;
fetch(`/api/todos/${id}`, {
method: 'DELETE',
}).then((response) => {
if (response.status === 204) {
return null;
} 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);
});
};Հիշեք, որ այս գործընթացը կարող է ջնջել միայն նոր ավելացված տվյալները, այլ ոչ թե սերմերի տվյալները:
Ի վերջո, ներմուծեք TodoList բաղադրիչը App.jsx ֆայլում՝ այն DOM-ում ցուցադրելու համար:
import TodoList from './components/TodoList';
//code ...
<TodoList /> Հիանալի Զարգացման սերվերը գործարկելուց հետո դուք կարող եք բեռնել հիմնական տվյալները և ավելացնել և ջնջել նոր տվյալներ կեղծ API-ից ձեր React հավելվածում:
Օգտագործելով ծաղրական API-ներ՝ զարգացումն արագացնելու համար
Ծաղրող API-ները ֆրոնտենդի զարգացումն արագացնելու հիանալի միջոց է, անկախ նրանից՝ դուք աշխատում եք նախագծի վրա անհատապես, թե որպես թիմի մաս: Օգտագործելով Mock API-ները՝ դուք կարող եք արագ կառուցել միջերեսը և փորձարկել դրանց կոդը՝ չսպասելով, որ հետնախագիծը ավարտվի: