Nimate pripravljenega API-ja? Brez problema! Razvijte in uporabite lažne API-je z Mirage.js.

Pri razvoju aplikacij s polnim skladom se velik del dela na sprednji strani opira na podatke v realnem času iz ozadja.

To lahko pomeni, da morate odložiti razvoj uporabniškega vmesnika, dokler API ni na voljo za uporabo. Vendar lahko čakanje, da bo API pripravljen za nastavitev sprednjega dela, znatno zmanjša produktivnost in podaljša časovne okvire projekta.

Odlična rešitev za ta izziv vključuje uporabo lažnih API-jev. Ti API-ji vam omogočajo razvoj in preizkusite svoj vmesnik z uporabo podatkov, ki posnemajo strukturo dejanskih podatkov, vse brez zanašanja na dejanske API.

Kako začeti z lažnimi API-ji Mirage.js

Mirage.js je knjižnica JavaScript, ki vam omogoča ustvarjanje lažnih API-jev, skupaj s testnim strežnikom, ki se izvaja na odjemalski strani vaše spletne aplikacije. To pomeni, da lahko preizkusite svojo čelno kodo, ne da bi vam bilo treba skrbeti glede razpoložljivosti ali delovanja vašega pravega zalednega API-ja.

instagram viewer

Če želite uporabljati Mirage.js, morate najprej ustvariti lažne končne točke API-ja in definirati odgovore, ki naj jih vrnejo. Nato Mirage.js prestreže vse zahteve HTTP, ki jih naredi vaša koda čelnega vmesnika, in namesto tega vrne lažne odgovore.

Ko je vaš API pripravljen, lahko preprosto preklopite na njegovo uporabo tako, da spremenite samo konfiguracijo Mirage.js.

Tukaj lahko najdete izvorno kodo tega projekta GitHub repozitorij.

Ustvarite lažni strežnik API z Mirage.js

Če želite pokazati, kako nastaviti lažne API-je, boste zgradili preprosto aplikacijo React za opravila, ki uporablja zaledje Mirage.js. Ampak najprej, ustvarite aplikacijo React z ukazom create-react-app. Lahko pa uporabite tudi Vite za vzpostavitev projekta React. Nato namestite odvisnost Mirage.js.

npm install --save-dev miragejs

Zdaj, če želite ustvariti primerek strežnika Mirage.js za prestrezanje zahtev in zasmehovanje odgovorov API, uporabite createServer metoda. Ta metoda vzame konfiguracijski objekt kot parameter.

Ta predmet vključuje okolju in imenski prostor za API. Okolje določa stopnjo razvoja, na kateri je API, kot je razvoj, medtem ko je imenski prostor predpona, dodana vsem končnim točkam API.

Ustvari novo src/server.js datoteko in vključite naslednjo kodo:

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

Po potrebi lahko prilagodite imenski prostor, da se ujema s strukturo URL-ja vašega dejanskega API-ja, vključno z navedbo različice. Na ta način, ko je vaš API pripravljen, ga lahko preprosto integrirate v svojo sprednjo aplikacijo z minimalnimi spremembami kode.

Poleg tega lahko znotraj konfiguracije primerka strežnika definirate tudi podatkovni model za simulacijo shranjevanja in pridobivanja podatkov v lažnem okolju.

Nazadnje zaženite strežnik Mirage.js tako, da uvozite objekt strežnika v svoj index.jsx oz main.jsx datoteko na naslednji 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 semenske podatke v lažni API

Mirage.js ima bazo podatkov v pomnilniku, ki jo lahko uporabite za vnaprejšnjo izpolnitev lažnega API-ja z začetnimi semenskimi podatki in za upravljanje testnih podatkov iz vaše odjemalske aplikacije. To pomeni, da lahko shranite in pridobite testne podatke iz lažne baze podatkov in jih uporabite v svoji odjemalski aplikaciji.

Če želite dodati semenske podatke v Mock API, dodajte naslednjo kodo v server.js datoteko tik pod modeli predmet.

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 funkcija napolni strežnik Mirage.js s tremi opravili, od katerih ima vsak naslov in opis. Po želji lahko namesto trdega kodiranja testnih podatkov integrirate knjižnico, kot je npr Faker.js za ustvarjanje zahtevanih testnih podatkov.

Definirajte lažne poti API-ja

Zdaj pa definirajte nekaj poti API-ja za lažni API. V tem primeru določite poti za obdelavo lažnih zahtev API GET, POST in DELETE.

Tik pod semenskimi podatki dodajte spodnjo kodo:

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

Zgradite odjemalca React

Zdaj, ko je lažni API nastavljen, zgradimo odjemalca React za interakcijo in uporabo končnih točk API-ja. Lahko uporabite katero koli knjižnico komponent uporabniškega vmesnika, ki vam je všeč, vendar bo ta priročnik uporabil uporabniški vmesnik Chakra za oblikovanje aplikacije.

Najprej namestite te odvisnosti:

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

Nato ustvarite novo src/components/TodoList.jsx datoteko in vključite naslednjo kodo:

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

Zdaj definirajte funkcionalno komponento za upodobitev uporabniškega vmesnika seznama opravil, vključno z vnosnimi polji za dodajanje novih opravil in seznama obstoječih opravil.

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

Zdaj definirajte funkcije obdelovalca za operacije dodajanja in brisanja. Toda najprej dodajte ta stanja. Lahko pa tudi uporabite kavelj useReducer, da definirate logiko upravljanja stanja za aplikacijo Seznam opravil.

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

Zdaj definirajte logiko za pridobivanje in prikaz semenskih podatkov v bazi podatkov v pomnilniku, ko se aplikacija prvič naloži v brskalnik, tako da zavijete prinašati metoda v a useEffect kavelj.

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

The renderKey stanje je vključeno tudi v useEffect, da se zagotovi, da koda sproži ponovno upodabljanje na novo dodanih podatkov v bazi podatkov v pomnilniku, ko strežnik deluje.

Preprosto povedano, vsakič, ko uporabnik doda nove podatke o opravilih v zbirko podatkov Mirage.js—komponenta bo znova upodobila za prikaz posodobljenih podatkov.

Dodajanje podatkov v API

Zdaj pa definirajte logiko za dodajanje podatkov v API prek zahtev POST. Tik pod kljuko useEffect vključite naslednjo kodo.

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

Ko uporabnik vnese podatke v polje za vnos opravila in klikne Dodaj Todo gumb, koda posodobi novoTodo stanje z vnosom uporabnika. Nato API-ju pošlje lažno zahtevo POST z novim podatkovnim objektom v telesu zahteve, da ga shrani v bazo podatkov v pomnilniku.

Če je zahteva POST uspešna, koda doda nov element v todos matriko in končno sproži ponovno upodobitev komponente, da prikaže nov element opravila.

Navidezne zahteve za IZBRIS API-ja

Zdaj pa definirajte logiko za brisanje podatkov prek DELETE lažnih zahtev API-ja. Ta postopek vključuje pošiljanje zahteve DELETE za odstranitev elementa opravila iz baze podatkov v pomnilniku. Če je uspešno, posodobite oba todos in nalaganje stanje, ki odraža postopek izbrisa.

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

Upoštevajte, da lahko s tem postopkom izbrišete samo novo dodane podatke, ne pa začetnih podatkov.

Končno uvozite Seznam opravil komponenta v App.jsx datoteko, da jo upodobite v DOM.

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

Super! Ko zaženete razvojni strežnik, lahko pridobite semenske podatke ter dodate in izbrišete nove podatke iz lažnega API-ja v svoji aplikaciji React.

Uporaba lažnih API-jev za pospešitev razvoja

Norčevanje API-jev je odličen način za pospešitev razvoja čelnega vmesnika, ne glede na to, ali na projektu delate sami ali kot del ekipe. Z uporabo lažnih API-jev lahko hitro zgradite uporabniški vmesnik in preizkusite njihovo kodo, ne da bi čakali, da je zaledje dokončano.