У вас нет готового API? Без проблем! Разрабатывайте и используйте макеты API с помощью Mirage.js.

При разработке полнофункциональных приложений значительная часть работы внешнего интерфейса зависит от данных, поступающих в режиме реального времени из серверной части.

Это может означать, что вам придется отложить разработку пользовательского интерфейса до тех пор, пока API не станет доступен для использования. Однако ожидание готовности API для настройки внешнего интерфейса может значительно снизить производительность и продлить сроки проекта.

Отличным решением этой проблемы является использование фиктивных API. Эти API позволяют вам разрабатывать и протестируйте свой интерфейс, используя данные, имитирующие структуру реальных данных, не полагаясь на фактические данные. API.

Начало работы с Mock API Mirage.js

Мираж.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, используйте команду создатьсервер метод. Этот метод принимает объект конфигурации в качестве параметра.

Этот объект включает в себя среда и пространство имен для API. Среда определяет стадию разработки, на которой находится API, например разработку, а пространство имен — это префикс, добавляемый ко всем конечным точкам API.

Создать новый источник/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>,
)

Добавьте исходные данные в Mock API

Mirage.js имеет базу данных в памяти, которую можно использовать для предварительного заполнения макета API исходными исходными данными и для управления тестовыми данными из клиентского приложения. Это означает, что вы можете хранить и извлекать тестовые данные из макетной базы данных и использовать их в своем клиентском приложении.

Чтобы добавить начальные данные в Mock API, добавьте следующий код в файл сервер.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 тремя элементами задач, каждый из которых имеет заголовок и описание. При желании вместо жесткого кодирования тестовых данных вы можете интегрировать такую ​​библиотеку, как Факер.js для создания необходимых тестовых данных.

Определите фиктивные маршруты API

Теперь определите некоторые маршруты 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-клиент

Теперь, когда макет API настроен, давайте создадим клиент React для взаимодействия и использования конечных точек API. Вы можете использовать любую библиотеку компонентов пользовательского интерфейса, которая вам нравится, но в этом руководстве для стилизации приложения будет использоваться пользовательский интерфейс Chakra.

Сначала установите эти зависимости:

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

Далее создайте новый источник/компоненты/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(() => {
 fetch('/api/todos') 
 .then((response) => response.json())
 .then((data) => {
 setTodos(data.todos);
 setLoading(false);
 });
 }, [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 состояние с вводом пользователя. Затем он отправляет в API имитационный запрос POST с новым объектом данных в теле запроса, чтобы сохранить его в базе данных в памяти.

Если запрос POST успешен, код добавляет новый элемент в дела массив и, наконец, запускает повторную визуализацию компонента, чтобы отобразить новый элемент задачи.

Mock API DELETE-запросы

Теперь определите логику удаления данных с помощью запросов API-интерфейса 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);
 });
 };

Имейте в виду, что этот процесс может удалить только вновь добавленные данные, а не начальные данные.

Наконец, импортируйте Список дел компонент в Приложение.jsx файл для его рендеринга в DOM.

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

Большой! После запуска сервера разработки вы можете получить начальные данные, а также добавлять и удалять новые данные из макета API в своем приложении React.

Использование Mock API для ускорения разработки

Mocking API — отличный способ ускорить разработку внешнего интерфейса, независимо от того, работаете ли вы над проектом индивидуально или в составе команды. Используя Mock API, вы можете быстро создать пользовательский интерфейс и протестировать его код, не дожидаясь завершения серверной части.