Nemate spreman API? Nema problema! Razvijte i koristite lažne API-je s Mirage.js.

Prilikom razvoja full-stack aplikacija, značajan dio posla na sučelju oslanja se na podatke u stvarnom vremenu iz pozadine.

To može značiti da morate odgoditi razvoj korisničkog sučelja dok API ne bude dostupan za korištenje. Međutim, čekanje da API bude spreman za postavljanje sučelja može značajno smanjiti produktivnost i produljiti vremenske okvire projekta.

Sjajno rješenje za ovaj izazov uključuje korištenje lažnih API-ja. Ovi API-ji omogućuju vam razvoj i testirajte svoje sučelje pomoću podataka koji oponašaju strukturu stvarnih podataka, a sve bez oslanjanja na stvarne API.

Početak rada s lažnim API-jima Mirage.js

Mirage.js je JavaScript biblioteka koja vam omogućuje stvaranje lažnih API-ja, zajedno s testnim poslužiteljem koji radi na strani klijenta vaše web aplikacije. To znači da možete testirati svoj frontend kod bez brige o dostupnosti ili ponašanju vašeg stvarnog backend API-ja.

Da biste koristili Mirage.js, prvo morate stvoriti lažne API krajnje točke i definirati odgovore koje bi trebale vratiti. Zatim Mirage.js presreće sve HTTP zahtjeve koje postavlja vaš sučelni kod i umjesto toga vraća lažne odgovore.

instagram viewer

Nakon što je vaš API spreman, možete se jednostavno prebaciti na njegovu upotrebu samo promjenom konfiguracije Mirage.js.

Izvorni kod ovog projekta možete pronaći ovdje GitHub spremište.

Napravite lažni API poslužitelj s Mirage.js

Da biste demonstrirali kako postaviti lažne API-je, izradit ćete jednostavnu React aplikaciju koja se mora obaviti i koja koristi pozadinu Mirage.js. Ali prvo, izradite React aplikaciju pomoću naredbe create-react-app. Alternativno, možete koristiti Vite za postavljanje React projekta. Zatim instalirajte ovisnost Mirage.js.

npm install --save-dev miragejs

Sada, za stvaranje instance poslužitelja Mirage.js za presretanje zahtjeva i ismijavanje API odgovora, koristite createServer metoda. Ova metoda uzima konfiguracijski objekt kao parametar.

Ovaj objekt uključuje okoliš i imenski prostor za API. Okruženje specificira stupanj razvoja na kojem se API nalazi, kao što je razvoj, dok je prostor imena prefiks koji se dodaje svim krajnjim točkama API-ja.

Stvorite novi src/server.js datoteku i uključite sljedeći kod:

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

Ako je potrebno, možete prilagoditi prostor imena tako da odgovara strukturi URL-a vašeg stvarnog API-ja, uključujući navođenje verzije. Na ovaj način, nakon što je vaš API spreman, možete ga jednostavno integrirati u svoju front-end aplikaciju uz minimalne izmjene koda.

Osim toga, unutar konfiguracije instance poslužitelja također možete definirati podatkovni model za simulaciju pohrane i dohvaćanja podataka u lažnom okruženju.

Na kraju, pokrenite Mirage.js poslužitelj uvozom objekta poslužitelja u svoj indeks.jsx ili glavni.jsx datoteku na sljedeći način:

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

Dodajte početne podatke u lažni API

Mirage.js ima bazu podataka u memoriji koju možete koristiti za prethodno popunjavanje lažnog API-ja početnim početnim podacima i za upravljanje testnim podacima iz vaše klijentske aplikacije. To znači da možete pohraniti i dohvatiti testne podatke iz lažne baze podataka i koristiti ih u svojoj klijentskoj aplikaciji.

Da biste dodali početne podatke u Lažni API, dodajte sljedeći kod u server.js datoteku odmah ispod modeli 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 sjemenke funkcija popunjava poslužitelj Mirage.js s tri stavke zadataka, svaka s naslovom i opisom. Po izboru, umjesto tvrdog kodiranja testnih podataka, možete integrirati biblioteku kao što je Lažni.js za generiranje potrebnih testnih podataka.

Definirajte lažne API rute

Sada definirajte neke API rute za lažni API. U ovom slučaju odredite rute za rukovanje lažnim API zahtjevima GET, POST i DELETE.

Odmah ispod početnih podataka dodajte kod u nastavku:

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

Izgradite React klijenta

Sada kada je lažni API postavljen, napravimo React klijent za interakciju s krajnjim točkama API-ja i njihovu upotrebu. Slobodni ste koristiti bilo koju biblioteku komponenti korisničkog sučelja koju želite, ali ovaj će vodič koristiti korisničko sučelje Chakra za stiliziranje aplikacije.

Prvo instalirajte ove ovisnosti:

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

Zatim stvorite novi src/components/TodoList.jsx datoteku i uključite sljedeći kod:

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

Sada definirajte funkcionalnu komponentu za prikaz korisničkog sučelja popisa obaveza, uključujući polja za unos za dodavanje novih zadataka i popis postojećih zadataka.

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

Sada definirajte funkcije rukovatelja za operacije dodavanja i brisanja. Ali prvo dodajte ova stanja. Alternativno, možete koristite kuku useReducer za definiranje logike upravljanja stanjem za aplikaciju popisa obveza.

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

Sada definirajte logiku za dohvaćanje i prikaz početnih podataka u bazi podataka u memoriji kada se aplikacija prvi put učita u pregledniku omotavanjem dohvatiti metoda u a useEffect kuka.

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

The renderKey stanje je također uključeno u useEffect kako bi se osiguralo da kod pokreće ponovno iscrtavanje novododanih podataka u bazi podataka u memoriji kada poslužitelj radi.

Jednostavno rečeno, kad god korisnik doda nove podatke o obvezama u bazu podataka Mirage.js—komponenta će se ponovno prikazati kako bi prikazala ažurirane podatke.

Dodavanje podataka u API

Sada definirajte logiku za dodavanje podataka u API putem POST zahtjeva. Odmah ispod useEffect kuke uključite sljedeći kod.

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

Kada korisnik unese podatke u polje za unos obaveza i klikne na Dodaj Todo gumb ažurira kod noviTodo stanje s unosom korisnika. Zatim šalje lažni POST zahtjev API-ju s novim podatkovnim objektom u tijelu zahtjeva kako bi ga spremio u bazu podataka u memoriji.

Ako je POST zahtjev uspješan, kod dodaje novu stavku u todos polje, i konačno, pokreće ponovno iscrtavanje komponente za prikaz nove stavke obveze.

Lažni API DELETE zahtjevi

Sada definirajte logiku za brisanje podataka putem DELETE lažnih API zahtjeva. Ovaj proces uključuje slanje zahtjeva DELETE za uklanjanje stavke obveze iz baze podataka u memoriji. Ako uspije, ažurirajte oba todos i Učitavam stanje koje odražava proces brisanja.

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

Imajte na umu da se ovim postupkom mogu izbrisati samo novo dodani podaci, a ne početni podaci.

Na kraju, uvezite TodoList komponenta u App.jsx da biste je prikazali u DOM-u.

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

Sjajno! Nakon što pokrenete razvojni poslužitelj, možete dohvatiti početne podatke te dodavati i brisati nove podatke iz lažnog API-ja u svojoj aplikaciji React.

Korištenje lažnih API-ja za ubrzavanje razvoja

Ismijavanje API-ja izvrstan je način za ubrzavanje razvoja sučelja, bilo da radite na projektu pojedinačno ili kao dio tima. Korištenjem lažnih API-ja možete brzo izgraditi korisničko sučelje i testirati njihov kod bez čekanja da se pozadina dovrši.