Kuinka rakentaa ja käyttää valesovellusliittymiä React-sovelluksissa Mirage.js: n avulla

Täyspinon sovelluksia kehitettäessä merkittävä osa käyttöliittymätyöstä perustuu taustajärjestelmän reaaliaikaiseen dataan.

Tämä voi tarkoittaa, että sinun on lykättävä käyttöliittymän kehittämistä, kunnes API on käytettävissä. Kuitenkin odotus, että API on valmis perustamaan käyttöliittymä, voi merkittävästi vähentää tuottavuutta ja pidentää projektin aikatauluja.

Erinomainen ratkaisu tähän haasteeseen on valesovellusliittymien käyttö. Näiden sovellusliittymien avulla voit kehittää ja Testaa käyttöliittymääsi käyttämällä dataa, joka jäljittelee todellisen datan rakennetta, luottamatta todelliseen tietoon API.

Mirage.js Mock API: iden käytön aloittaminen

Mirage.js on JavaScript-kirjasto, jonka avulla voit luoda näennäisiä sovellusliittymiä, joissa on testipalvelin, joka toimii verkkosovelluksesi asiakaspuolella. Tämä tarkoittaa, että voit testata käyttöliittymäkoodiasi ilman, että sinun tarvitsee huolehtia todellisen taustasovellusliittymäsi saatavuudesta tai toiminnasta.

Mirage.js: n käyttämiseksi sinun on ensin luotava näennäisiä API-päätepisteitä ja määritettävä vastaukset, jotka niiden tulee palauttaa. Sitten Mirage.js sieppaa kaikki käyttöliittymäkoodisi tekemät HTTP-pyynnöt ja palauttaa sen sijaan valevastaukset.

Kun API on valmis, voit helposti siirtyä käyttämään sitä muuttamalla vain Mirage.js: n asetuksia.

Löydät tämän projektin lähdekoodin tästä GitHub arkisto.

Luo näennäinen API-palvelin Mirage.js: n avulla

Havainnollistaaksesi valesovellusliittymien määrittämistä luot yksinkertaisen React-sovelluksen, joka käyttää Mirage.js-taustajärjestelmää. Mutta ensin, Luo React-sovellus komennolla create-react-app. Vaihtoehtoisesti voit käyttää Vite perustaa React-projekti. Asenna seuraavaksi Mirage.js-riippuvuus.

npm install --save-dev miragejs

Luo nyt Mirage.js-palvelinesiintymä pyyntöjen sieppaamiseksi ja API-vastausten pilkkaamiseksi käyttämällä createServer menetelmä. Tämä menetelmä ottaa konfigurointiobjektin parametriksi.

Tämä objekti sisältää ympäristöön ja nimiavaruus API: lle. Ympäristö määrittää kehitysvaiheen, jossa API on, kuten kehitysvaiheessa, kun taas nimitila on kaikkiin API-päätepisteisiin lisätty etuliite.

Luoda uusi src/server.js tiedosto ja sisällytä seuraava koodi:

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

Tarvittaessa voit mukauttaa nimiavaruuden vastaamaan todellisen sovellusliittymäsi URL-rakennetta, mukaan lukien version määrittäminen. Tällä tavalla, kun API on valmis, voit helposti integroida sen käyttöliittymäsovellukseesi minimaalisilla koodimuutoksilla.

Lisäksi palvelimen ilmentymän kokoonpanossa voit myös määrittää tietomallin, joka simuloi tietojen tallentamista ja hakua valeympäristössä.

Lopuksi käynnistä Mirage.js-palvelin tuomalla palvelinobjekti tietokoneellesi index.jsx tai main.jsx tiedosto seuraavasti:

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

Lisää siementiedot Mock API: hen

Mirage.js: ssä on muistissa oleva tietokanta, jonka avulla voit esitäyttää näennäisen API: n alkusiementiedoilla ja hallita asiakassovelluksesi testitietoja. Tämä tarkoittaa, että voit tallentaa ja hakea testitiedot valetietokannasta ja käyttää niitä asiakassovelluksessasi.

Jos haluat lisätä siementietoja Mock API: hen, lisää seuraava koodi server.js tiedosto aivan alla mallit esine.

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 siemenet -toiminto täyttää Mirage.js-palvelimen kolmella tehtävällä, joista jokaisella on otsikko ja kuvaus. Vaihtoehtoisesti testitietojen koodaamisen sijaan voit integroida kirjaston, kuten Faker.js luodaksesi tarvittavat testitiedot.

Määritä Mock API -reitit

Määritä nyt joitain API-reittejä vale-API: lle. Tässä tapauksessa määritä reitit GET-, POST- ja DELETE-sovellusliittymäpyyntöjen käsittelemiseksi.

Lisää alla oleva koodi aivan siementietojen alle:

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

Rakenna React-asiakas

Nyt kun vale-API on määritetty, rakennetaan React-asiakas, joka on vuorovaikutuksessa API-päätepisteiden kanssa ja kuluttaa niitä. Voit vapaasti käyttää mitä tahansa käyttöliittymäkomponenttikirjastoa, mutta tämä opas käyttää Chakra UI: ta sovelluksen tyyliin.

Asenna ensin nämä riippuvuudet:

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

Luo seuraavaksi uusi src/components/TodoList.jsx tiedosto ja sisällytä seuraava koodi:

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

Määritä nyt toiminnallinen komponentti tehtäväluettelon käyttöliittymän muodostamiseksi, mukaan lukien syöttökentät uusien tehtävien lisäämistä varten ja luettelo olemassa olevista tehtävistä.

exportdefaultfunctionTodoList() {
return (

"xl" mb={4}>Todo List</Text>
4}>
 type="text"
 name="body"
 value={newTodo.body}
 onChange={handleInputChange}
 />
 </FormControl>
"teal" onClick={handleAddTodo}> Add Todo</Button>
 {loading? ( <Text>Loading...Text> ): (
 todos.map((todo) => (
2} p={2} borderWidth="1px">
"center">
"1">{todo.body}</Text>
 colorScheme="red"
 size="sm"
 onClick={() => handleDelete(todo.id)}>Delete 
 </Button>
 </Flex>
 </Box>
 ))
 )}
 </Container>
 );
}

Määritä nyt lisäys- ja poistotoimintojen käsittelijän toiminnot. Mutta ensin lisää nämä tilat. Vaihtoehtoisesti voit käytä useReducer-koukkua tilanhallintalogiikan määrittämiseen tehtävälistasovellukselle.

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

Määritä nyt logiikka siementietojen hakemiseksi ja näyttämiseksi muistin tietokannassa, kun sovellus latautuu ensimmäisen kerran selaimeen käärimällä hakea menetelmä kohdassa a useEffect koukku.

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

The renderKey tila sisältyy myös useEffectiin sen varmistamiseksi, että koodi käynnistää äskettäin lisättyjen tietojen uudelleenrenderöinnin muistin tietokantaan, kun palvelin on käynnissä.

Yksinkertaisesti sanottuna aina, kun käyttäjä lisää uusia tehtävätietoja Mirage.js-tietokantaan, komponentti hahmonnetaan uudelleen näyttääkseen päivitetyt tiedot.

Tietojen lisääminen API: hen

Määritä nyt logiikka tietojen lisäämiselle API: lle POST-pyyntöjen kautta. Sisällytä seuraava koodi heti useEffect-koukun alapuolelle.

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

Kun käyttäjä syöttää tiedot tehtävän syöttökenttään ja napsauttaa Lisää Todo -painiketta, koodi päivittää uusiTodo tila käyttäjän syötteellä. Sitten se lähettää vale-POST-pyynnön API: lle uuden tietoobjektin kanssa pyynnön rungossa tallentaakseen sen muistin tietokantaan.

Jos POST-pyyntö onnistuu, koodi lisää uuden kohteen todos taulukko, ja lopuksi käynnistää komponentin uudelleen renderöinnin näyttämään uuden tehtävän.

Vale API DELETE -pyynnöt

Määritä nyt logiikka tietojen poistamiselle DELETE mock API -pyyntöjen avulla. Tämä prosessi sisältää DELETE-pyynnön lähettämisen tehtäväkohteen poistamiseksi muistin tietokannasta. Jos onnistut, päivitä molemmat todos ja Ladataan poistoprosessia.

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

Muista, että tämä prosessi voi poistaa vain äskettäin lisätyt tiedot, ei siementietoja.

Tuo lopuksi Tehtävälista komponentti App.jsx tiedostoa renderöidäksesi sen DOM: ssa.

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

Loistava! Kun käynnistät kehityspalvelimen, voit noutaa siementiedot sekä lisätä ja poistaa uusia tietoja React-sovelluksesi sovellusliittymästä.

Valesovellusliittymien käyttö kehityksen nopeuttamiseen

Sovellusliittymien pilkkaaminen on loistava tapa nopeuttaa käyttöliittymän kehitystä riippumatta siitä, työskenteletkö projektin parissa yksin tai osana tiimiä. Mock API: iden avulla voit nopeasti rakentaa käyttöliittymän ja testata niiden koodia odottamatta taustajärjestelmän valmistumista.