Nemáte připravené API? Žádný problém! Vyvíjejte a využívejte falešná API s Mirage.js.

Při vývoji full-stack aplikací spoléhá značná část frontendové práce na data z backendu v reálném čase.

To může znamenat, že musíte odložit vývoj uživatelského rozhraní, dokud nebude API dostupné k použití. Čekání na to, až bude API připraveno k nastavení frontendu, však může značně snížit produktivitu a prodloužit časové plány projektů.

Skvělé řešení této výzvy zahrnuje použití falešných rozhraní API. Tato rozhraní API vám umožňují vyvíjet a otestujte svůj frontend pomocí dat, která napodobují strukturu skutečných dat, a to vše bez spoléhání se na skutečná API.

Začínáme s Mirage.js Mock API

Mirage.js je knihovna JavaScriptu, která vám umožňuje vytvářet simulovaná rozhraní API, doplněná o testovací server běžící na straně klienta vaší webové aplikace. To znamená, že můžete testovat svůj frontendový kód, aniž byste se museli starat o dostupnost nebo chování vašeho skutečného backendového API.

Chcete-li použít Mirage.js, musíte nejprve vytvořit falešné koncové body API a definovat odpovědi, které by měly vracet. Poté Mirage.js zachytí všechny požadavky HTTP, které váš kód frontendu vytvoří, a místo toho vrátí falešné odpovědi.

instagram viewer

Jakmile bude vaše API připraveno, můžete jej snadno přepnout na jeho používání pouze změnou konfigurace Mirage.js.

Zdrojový kód tohoto projektu najdete zde GitHub úložiště.

Vytvořte Mock API Server s Mirage.js

Chcete-li předvést, jak nastavit simulovaná rozhraní API, vytvoříte jednoduchou aplikaci React, která používá backend Mirage.js. Ale nejdřív, vytvořte aplikaci React pomocí příkazu create-react-app. Případně můžete použít Vite a nastavte projekt React. Dále nainstalujte závislost Mirage.js.

npm install --save-dev miragejs

Chcete-li nyní vytvořit instanci serveru Mirage.js pro zachycování požadavků a zesměšňování odpovědí API, použijte createServer metoda. Tato metoda bere jako parametr konfigurační objekt.

Tento objekt zahrnuje životní prostředí a jmenný prostor pro API. Prostředí určuje fázi vývoje, ve které se rozhraní API nachází, jako je vývoj, zatímco jmenný prostor je předpona přidaná ke všem koncovým bodům rozhraní API.

Vytvoř nový src/server.js soubor a zahrňte následující kód:

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

V případě potřeby můžete upravit jmenný prostor tak, aby odpovídal struktuře adresy URL vašeho skutečného rozhraní API, včetně určení verze. Tímto způsobem, jakmile bude vaše API připraveno, můžete jej snadno integrovat do vaší front-endové aplikace s minimálními změnami kódu.

Navíc v rámci konfigurace instance serveru můžete také definovat datový model pro simulaci ukládání a načítání dat v simulovaném prostředí.

Nakonec spusťte server Mirage.js importováním objektu serveru do svého index.jsx nebo main.jsx soubor takto:

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

Přidejte počáteční data do Mock API

Mirage.js má databázi v paměti, kterou můžete použít k předvyplnění falešného rozhraní API počátečními počátečními daty a ke správě testovacích dat z klientské aplikace. To znamená, že můžete ukládat a načítat testovací data z falešné databáze a používat je ve své klientské aplikaci.

Chcete-li přidat počáteční data do Mock API, přidejte následující kód do server.js soubor přímo pod modely objekt.

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 semena funkce naplní server Mirage.js třemi položkami úkolů, z nichž každá má název a popis. Volitelně můžete místo pevného kódování testovacích dat integrovat knihovnu, jako je např Faker.js pro vygenerování požadovaných testovacích dat.

Definujte trasy Mock API

Nyní definujte některé trasy API pro simulované API. V tomto případě určete trasy pro zpracování požadavků GET, POST a DELETE simulovaných API.

Přímo pod data osiva přidejte níže uvedený kód:

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

Sestavte si klienta React

Nyní, když je nastaveno mock API, pojďme sestavit klienta React pro interakci s koncovými body API a jejich využití. Můžete volně používat libovolnou knihovnu komponent uživatelského rozhraní, která se vám líbí, ale tato příručka použije pro úpravu aplikace uživatelské rozhraní Chakra.

Nejprve nainstalujte tyto závislosti:

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

Dále vytvořte nový src/components/TodoList.jsx soubor a zahrňte následující kód:

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

Nyní definujte funkční komponentu pro vykreslení uživatelského rozhraní seznamu úkolů, včetně vstupních polí pro přidávání nových úkolů a seznamu existujících úkolů.

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

Nyní definujte funkce obsluhy pro operace přidání a odstranění. Nejprve ale přidejte tyto stavy. Případně můžete použijte háček useReducer k definování logiky řízení stavu pro aplikaci se seznamem úkolů.

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

Nyní definujte logiku pro načtení a zobrazení počátečních dat v databázi v paměti při prvním načtení aplikace do prohlížeče zabalením vynést metoda v a useEffect háček.

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

The renderKey stav je také zahrnut v useEffect, aby bylo zajištěno, že kód spustí opětovné vykreslení nově přidaných dat v databázi v paměti, když je server spuštěn.

Jednoduše řečeno, kdykoli uživatel přidá nová data úkolů do databáze Mirage.js – komponenta se znovu vykreslí, aby zobrazila aktualizovaná data.

Přidávání dat do API

Nyní definujte logiku pro přidávání dat do rozhraní API prostřednictvím požadavků POST. Přímo pod háčkem useEffect zahrňte následující kód.

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

Když uživatel zadá data do vstupního pole úkolu a klikne na Přidat úkol, kód aktualizuje newTodo stavu se vstupem uživatele. Poté odešle falešný požadavek POST do rozhraní API s novým datovým objektem v těle požadavku, aby jej uložil do databáze v paměti.

Pokud je požadavek POST úspěšný, kód přidá novou položku do todos pole a nakonec spouští opětovné vykreslení komponenty, aby se zobrazila nová položka úkolu.

Mock API DELETE požadavky

Nyní definujte logiku pro mazání dat prostřednictvím DELETE falešných požadavků API. Tento proces zahrnuje odeslání požadavku DELETE k odstranění položky úkolu z databáze v paměti. Pokud bude úspěšná, aktualizujte obě todos a načítání stavu, aby odrážel proces mazání.

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

Mějte na paměti, že tento proces může smazat pouze nově přidaná data, nikoli počáteční data.

Nakonec importujte Seznam úkolů součást v App.jsx soubor k vykreslení v DOM.

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

Skvělý! Jakmile spustíte vývojový server, můžete načíst počáteční data a přidat a odstranit nová data z falešného API ve vaší aplikaci React.

Použití Mock API k urychlení vývoje

Mocking API je skvělý způsob, jak urychlit vývoj frontendu, ať už na projektu pracujete samostatně nebo jako součást týmu. Pomocí rozhraní Mock API můžete rychle vytvořit uživatelské rozhraní a otestovat jeho kód, aniž byste museli čekat na dokončení backendu.