Nemáte pripravené API? Žiaden problém! Vyvíjajte a používajte falošné API s Mirage.js.

Pri vývoji full-stack aplikácií sa značná časť frontendovej práce spolieha na dáta v reálnom čase z backendu.

To môže znamenať, že musíte odložiť vývoj používateľského rozhrania, kým nebude API dostupné na použitie. Avšak čakanie, kým bude API pripravené na nastavenie frontendu, môže značne znížiť produktivitu a predĺžiť časové harmonogramy projektov.

Skvelé riešenie tejto výzvy zahŕňa použitie falošných rozhraní API. Tieto rozhrania API vám umožňujú vyvíjať a otestujte svoje rozhranie pomocou údajov, ktoré napodobňujú štruktúru skutočných údajov, a to všetko bez spoliehania sa na skutočné API.

Začíname s Mirage.js Mock API

Mirage.js je knižnica JavaScript, ktorá vám umožňuje vytvárať falošné rozhrania API doplnené o testovací server spustený na strane klienta vašej webovej aplikácie. To znamená, že môžete otestovať svoj frontendový kód bez toho, aby ste sa museli starať o dostupnosť alebo správanie vášho skutočného backendového API.

instagram viewer

Ak chcete použiť Mirage.js, musíte najprv vytvoriť falošné koncové body API a definovať odpovede, ktoré by mali vrátiť. Potom Mirage.js zachytí všetky požiadavky HTTP, ktoré váš klientsky kód vytvorí, a namiesto toho vráti falošné odpovede.

Keď je vaše API pripravené, môžete ho jednoducho prepnúť na jeho používanie iba zmenou konfigurácie Mirage.js.

Zdrojový kód tohto projektu nájdete tu GitHub Úložisko.

Vytvorte Mock API Server s Mirage.js

Ak chcete demonštrovať, ako nastaviť falošné rozhrania API, vytvoríte jednoduchú aplikáciu React, ktorá používa backend Mirage.js. Ale najprv, vytvorte aplikáciu React pomocou príkazu create-react-app. Prípadne môžete použiť Vite a nastavte projekt React. Ďalej nainštalujte závislosť Mirage.js.

npm install --save-dev miragejs

Teraz, ak chcete vytvoriť inštanciu servera Mirage.js na zachytenie požiadaviek a zosmiešňovanie odpovedí API, použite createServer metóda. Táto metóda berie ako parameter konfiguračný objekt.

Tento objekt zahŕňa životné prostredie a menný priestor pre API. Prostredie určuje štádium vývoja, v ktorom sa API nachádza, ako je vývoj, zatiaľ čo priestor názvov je predpona pridaná ku všetkým koncovým bodom API.

Vytvorte nový src/server.js súbor a zahrňte nasledujúci 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 prípade potreby môžete prispôsobiť priestor názvov tak, aby zodpovedal štruktúre adresy URL vášho skutočného rozhrania API, vrátane určenia verzie. Týmto spôsobom, keď bude vaše API pripravené, môžete ho jednoducho integrovať do vašej front-end aplikácie s minimálnymi zmenami kódu.

Okrem toho v rámci konfigurácie inštancie servera môžete tiež definovať údajový model na simuláciu ukladania a získavania údajov v simulovanom prostredí.

Nakoniec spustite server Mirage.js importovaním objektu servera do svojho index.jsx alebo main.jsx súbor 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>,
)

Pridajte počiatočné údaje do Mock API

Mirage.js má databázu v pamäti, ktorú môžete použiť na predvyplnenie simulovaného rozhrania API počiatočnými počiatočnými údajmi a na správu testovacích údajov z vašej klientskej aplikácie. To znamená, že môžete uložiť a načítať testovacie údaje z falošnej databázy a použiť ich vo svojej klientskej aplikácii.

Ak chcete pridať počiatočné údaje do Mock API, pridajte nasledujúci kód do server.js súbor priamo pod modelov 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 semená funkcia vyplní server Mirage.js tromi položkami úloh, z ktorých každá má názov a popis. Voliteľne môžete namiesto pevného kódovania testovacích údajov integrovať knižnicu ako napr Faker.js na generovanie požadovaných testovacích údajov.

Definujte trasy Mock API

Teraz definujte niektoré trasy API pre simulované API. V tomto prípade zadajte trasy na spracovanie simulačných požiadaviek API GET, POST a DELETE.

Hneď pod údajmi o semenách pridajte nižšie 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(); 
 });
 }

Vytvorte si klienta React

Teraz, keď je simulované API nastavené, poďme zostaviť klienta React na interakciu s koncovými bodmi API a ich používanie. Môžete voľne používať ľubovoľnú knižnicu komponentov používateľského rozhrania, ktorá sa vám páči, ale táto príručka použije na úpravu aplikácie používateľské rozhranie Chakra.

Najprv nainštalujte tieto závislosti:

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

Ďalej vytvorte nový src/components/TodoList.jsx súbor a zahrňte nasledujúci kód:

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

Teraz definujte funkčný komponent na vykreslenie používateľského rozhrania zoznamu úloh vrátane vstupných polí na pridávanie nových úloh a zoznamu existujúcich úloh.

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

Teraz definujte funkcie obsluhy pre operácie pridania a vymazania. Najprv však pridajte tieto stavy. Prípadne môžete použite háčik useReducer na definovanie logiky riadenia stavu pre aplikáciu so zoznamom úloh.

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

Teraz definujte logiku na získanie a zobrazenie počiatočných údajov v databáze v pamäti pri prvom načítaní aplikácie do prehliadača zabalením aport metóda v a useEffect háčik.

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

The renderKey stav je tiež zahrnutý v useEffect, aby sa zabezpečilo, že kód spustí opätovné vykreslenie novo pridaných údajov v databáze v pamäti, keď je server spustený.

Jednoducho povedané, kedykoľvek používateľ pridá nové údaje o úlohe do databázy Mirage.js – komponent sa znova vykreslí, aby zobrazil aktualizované údaje.

Pridávanie údajov do API

Teraz definujte logiku pridávania údajov do API prostredníctvom požiadaviek POST. Hneď pod háčikom useEffect zahrňte nasledujúci 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); 
 });
};

Keď používateľ zadá údaje do vstupného poľa úlohy a klikne na Pridať úlohu tlačidlo, kód aktualizuje newTodo stavu so vstupom používateľa. Potom odošle simulovanú požiadavku POST do API s novým dátovým objektom v tele požiadavky, aby sa uložila do databázy v pamäti.

Ak je požiadavka POST úspešná, kód pridá novú položku do todos pole a nakoniec spustí opätovné vykreslenie komponentu, aby sa zobrazila nová položka úlohy.

Mock API DELETE Žiadosti

Teraz definujte logiku na odstraňovanie údajov prostredníctvom DELETE simulovaných požiadaviek API. Tento proces zahŕňa odoslanie požiadavky DELETE na odstránenie položky úlohy z databázy v pamäti. Ak je to úspešné, aktualizujte oba todos a načítava stavu, aby odrážal proces odstraňovania.

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

Majte na pamäti, že tento proces môže odstrániť iba novo pridané údaje, nie počiatočné údaje.

Nakoniec importujte súbor Zoznam úloh komponent v App.jsx súbor na vykreslenie v DOM.

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

Skvelé! Po spustení vývojového servera môžete načítať počiatočné údaje a pridávať a odstraňovať nové údaje z falošného rozhrania API vo svojej aplikácii React.

Použitie Mock API na urýchlenie vývoja

Mocking API je skvelý spôsob, ako urýchliť vývoj frontendu, či už na projekte pracujete individuálne alebo ako súčasť tímu. Pomocou rozhrania Mock API môžete rýchlo vytvoriť používateľské rozhranie a otestovať ich kód bez čakania na dokončenie backendu.