Нямате готов API? Няма проблем! Разработвайте и използвайте фалшиви API с Mirage.js.

При разработването на приложения с пълен стек значителна част от работата на интерфейса разчита на данни в реално време от бекенда.

Това може да означава, че трябва да отложите разработването на потребителския интерфейс, докато API стане достъпен за използване. Изчакването обаче API да бъде готов за настройка на интерфейса може значително да намали производителността и да удължи сроковете на проекта.

Страхотно решение на това предизвикателство включва използването на фалшиви API. Тези API ви позволяват да разработвате и тествайте интерфейса си, като използвате данни, които имитират структурата на реалните данни, без да разчитате на действителните API.

Първи стъпки с фалшивите API на Mirage.js

Mirage.js е JavaScript библиотека, която ви позволява да създавате фалшиви API, заедно с тестов сървър, работещ от клиентската страна на вашето уеб приложение. Това означава, че можете да тествате кода на предния си край, без да е необходимо да се притеснявате за наличността или поведението на вашия реален API на задния край.

instagram viewer

За да използвате 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",
};


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

Ако е необходимо, можете да персонализирате пространството от имена, за да съответства на URL структурата на вашия действителен API, включително указване на версията. По този начин, след като вашият 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>,
)

Добавете начални данни към макетния API

Mirage.js има база данни в паметта, която можете да използвате за предварително попълване на макетния API с първоначални начални данни и за управление на тестови данни от вашето клиентско приложение. Това означава, че можете да съхранявате и извличате тестовите данни от макетната база данни и да ги използвате във вашето клиентско приложение.

За да добавите начални данни към 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.',
 });
 },

The семена функцията попълва Mirage.js сървър с три елемента от задачи, всеки със заглавие и описание. По желание, вместо твърдо кодиране на тестовите данни, можете да интегрирате библиотека като напр Faker.js за генериране на необходимите тестови данни.

Дефинирайте фалшивите 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. Вие сте свободни да използвате всяка библиотека с компоненти на потребителския интерфейс, която желаете, но това ръководство ще използва потребителския интерфейс на Chakra за стилизиране на приложението.

Първо инсталирайте тези зависимости:

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

Сега дефинирайте логиката за извличане и показване на началните данни в базата данни в паметта, когато приложението за първи път се зареди в браузъра, като обвиете извличам метод в a useEffect кука.

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

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

Когато потребител въведе данни в полето за въвеждане на задачи и щракне върху Добавете Todo бутон, кодът актуализира newTodo състояние с въвеждането на потребителя. След това изпраща фалшива POST заявка към API с новия обект на данни в тялото на заявката, за да го запише в базата данни в паметта.

Ако POST заявката е успешна, кодът добавя новия елемент към todos масив и накрая задейства повторно изобразяване на компонента, за да покаже новия елемент от задачата.

Mock API DELETE Requests

Сега дефинирайте логиката за изтриване на данни чрез DELETE фалшиви API заявки. Този процес включва изпращане на заявка DELETE за премахване на елемента от задачата от базата данни в паметта. Ако успеете, актуализирайте и двете todos и Зареждане състояние, за да отрази процеса на изтриване.

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

Имайте предвид, че този процес може да изтрие само новодобавени данни, но не и началните данни.

И накрая, импортирайте TodoList компонент в App.jsx файл, за да го изобразите в DOM.

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

Страхотен! След като стартирате сървъра за разработка, можете да извлечете началните данни и да добавяте и изтривате нови данни от фалшивия API във вашето приложение React.

Използване на фалшиви API за ускоряване на разработката

Присмехулните API са чудесен начин за ускоряване на разработката на интерфейса, независимо дали работите върху проект индивидуално или като част от екип. С помощта на Mock API можете бързо да изградите потребителския интерфейс и да тествате техния код, без да чакате задната част да бъде завършена.