Δεν έχετε έτοιμο το API; Κανένα πρόβλημα! Αναπτύξτε και χρησιμοποιήστε εικονικά API με το Mirage.js.

Κατά την ανάπτυξη εφαρμογών πλήρους στοίβας, ένα σημαντικό κομμάτι της εργασίας του frontend βασίζεται σε δεδομένα σε πραγματικό χρόνο από το backend.

Αυτό μπορεί να σημαίνει ότι πρέπει να σταματήσετε να αναπτύξετε τη διεπαφή χρήστη έως ότου το API είναι διαθέσιμο για χρήση. Ωστόσο, η αναμονή μέχρι το API να είναι έτοιμο για τη ρύθμιση του frontend μπορεί να μειώσει σημαντικά την παραγωγικότητα και να επεκτείνει τα χρονοδιαγράμματα του έργου.

Μια εξαιρετική λύση σε αυτήν την πρόκληση περιλαμβάνει τη χρήση εικονικών API. Αυτά τα API σας επιτρέπουν να αναπτύξετε και δοκιμάστε το frontend σας χρησιμοποιώντας δεδομένα που μιμούνται τη δομή των πραγματικών δεδομένων, χωρίς να βασίζεστε στα πραγματικά API.

Ξεκινώντας με το Mirage.js Mock API

Mirage.js είναι μια βιβλιοθήκη JavaScript που σας επιτρέπει να δημιουργείτε εικονικά API, με έναν δοκιμαστικό διακομιστή που εκτελείται στην πλευρά του πελάτη της εφαρμογής Ιστού σας. Αυτό σημαίνει ότι μπορείτε να δοκιμάσετε τον κώδικα διεπαφής σας χωρίς να χρειάζεται να ανησυχείτε για τη διαθεσιμότητα ή τη συμπεριφορά του πραγματικού σας API υποστήριξης.

instagram viewer

Για να χρησιμοποιήσετε το Mirage.js, πρέπει πρώτα να δημιουργήσετε εικονικά τελικά σημεία API και να ορίσετε τις απαντήσεις που θα πρέπει να επιστρέψουν. Στη συνέχεια, το Mirage.js παρεμποδίζει όλα τα αιτήματα HTTP που κάνει ο κώδικας διεπαφής σας και επιστρέφει τις ψευδείς απαντήσεις.

Μόλις το API σας είναι έτοιμο, μπορείτε εύκολα να μεταβείτε στη χρήση του αλλάζοντας μόνο τη διαμόρφωση του Mirage.js.

Μπορείτε να βρείτε τον πηγαίο κώδικα αυτού του έργου σε αυτό GitHub αποθήκη.

Δημιουργήστε έναν Mock API Server με το Mirage.js

Για να δείξετε πώς να ρυθμίσετε εικονικά API, θα δημιουργήσετε μια απλή εφαρμογή React που πρέπει να κάνετε που χρησιμοποιεί ένα backend Mirage.js. Αλλά πρώτα, δημιουργήστε μια εφαρμογή React χρησιμοποιώντας την εντολή create-react-app. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε Vite για να ρυθμίσετε ένα έργο React. Στη συνέχεια, εγκαταστήστε την εξάρτηση Mirage.js.

npm install --save-dev miragejs

Τώρα, για να δημιουργήσετε μια παρουσία διακομιστή Mirage.js για να υποκλέψει αιτήματα και να κοροϊδέψει τις απαντήσεις API, χρησιμοποιήστε το δημιουργία διακομιστή μέθοδος. Αυτή η μέθοδος λαμβάνει ως παράμετρο ένα αντικείμενο διαμόρφωσης.

Αυτό το αντικείμενο περιλαμβάνει το περιβάλλον και χώρο ονομάτων για το API. Το περιβάλλον καθορίζει το στάδιο ανάπτυξης στο οποίο βρίσκεται το API, όπως η ανάπτυξη, ενώ ο χώρος ονομάτων είναι το πρόθεμα που προστίθεται σε όλα τα τελικά σημεία του API.

Δημιούργησε ένα νέο src/server.js αρχείο και συμπεριλάβετε τον ακόλουθο κώδικα:

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

Εάν χρειάζεται, μπορείτε να προσαρμόσετε τον χώρο ονομάτων ώστε να ταιριάζει με τη δομή διεύθυνσης URL του πραγματικού σας API, συμπεριλαμβανομένου του προσδιορισμού της έκδοσης. Με αυτόν τον τρόπο, μόλις το API σας είναι έτοιμο, μπορείτε εύκολα να το ενσωματώσετε στην εφαρμογή front-end με ελάχιστες αλλαγές κώδικα.

Επιπλέον, στη διαμόρφωση της παρουσίας διακομιστή, μπορείτε επίσης να ορίσετε ένα μοντέλο δεδομένων για την προσομοίωση αποθήκευσης και ανάκτησης δεδομένων στο εικονικό περιβάλλον.

Τέλος, ξεκινήστε τον διακομιστή Mirage.js εισάγοντας το αντικείμενο διακομιστή στο δικό σας index.jsx ή main.jsx αρχείο ως εξής:

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

Προσθήκη Seed Data στο Mock API

Το Mirage.js διαθέτει μια βάση δεδομένων στη μνήμη την οποία μπορείτε να χρησιμοποιήσετε για να συμπληρώσετε εκ των προτέρων το εικονικό API με αρχικά δεδομένα εκκίνησης και για να διαχειριστείτε τα δεδομένα δοκιμής από την εφαρμογή πελάτη σας. Αυτό σημαίνει ότι μπορείτε να αποθηκεύσετε και να ανακτήσετε τα δεδομένα δοκιμής από την εικονική βάση δεδομένων και να τα χρησιμοποιήσετε στην εφαρμογή πελάτη σας.

Για να προσθέσετε δεδομένα εκκίνησης στο Mock API, προσθέστε τον ακόλουθο κώδικα στο server.js αρχείο ακριβώς κάτω από το μοντέλα αντικείμενο.

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.',
 });
 },

ο σπόρους Η συνάρτηση συμπληρώνει έναν διακομιστή Mirage.js με τρία στοιχεία υποχρεώσεων, το καθένα με τίτλο και περιγραφή. Προαιρετικά, αντί για σκληρή κωδικοποίηση των δεδομένων δοκιμής, μπορείτε να ενσωματώσετε μια βιβλιοθήκη όπως π.χ Faker.js για τη δημιουργία των απαιτούμενων δεδομένων δοκιμής.

Καθορίστε τις Mock API Routes

Τώρα, ορίστε μερικές διαδρομές API για το εικονικό API. Σε αυτήν την περίπτωση, καθορίστε διαδρομές για το χειρισμό αιτημάτων ψευδών API GET, POST και DELETE.

Ακριβώς κάτω από τα δεδομένα σποράς, προσθέστε τον παρακάτω κώδικα:

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

Δημιουργήστε έναν πελάτη React

Τώρα που έχει ρυθμιστεί το εικονικό API, ας δημιουργήσουμε έναν πελάτη React για να αλληλεπιδράσουμε και να καταναλώνουμε τα τελικά σημεία του API. Είστε ελεύθεροι να χρησιμοποιήσετε οποιαδήποτε βιβλιοθήκη στοιχείων διεπαφής χρήστη θέλετε, αλλά αυτός ο οδηγός θα χρησιμοποιήσει το Chakra UI για το στυλ της εφαρμογής.

Πρώτα, εγκαταστήστε αυτές τις εξαρτήσεις:

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

Στη συνέχεια, δημιουργήστε ένα νέο src/components/TodoList.jsx αρχείο και συμπεριλάβετε τον ακόλουθο κώδικα:

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

Τώρα, ορίστε ένα λειτουργικό στοιχείο για την απόδοση της διεπαφής χρήστη της λίστας υποχρεώσεων, συμπεριλαμβανομένων των πεδίων εισαγωγής για την προσθήκη νέων εργασιών και μιας λίστας υπαρχουσών εργασιών.

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

Τώρα, ορίστε τις λειτουργίες χειρισμού για τις λειτουργίες προσθήκης και διαγραφής. Αλλά πρώτα, προσθέστε αυτές τις καταστάσεις. Εναλλακτικά, μπορείτε χρησιμοποιήστε το άγκιστρο useReducer για να ορίσετε τη λογική διαχείρισης κατάστασης για την εφαρμογή λίστας υποχρεώσεων.

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

Τώρα, ορίστε τη λογική για την ανάκτηση και την εμφάνιση των δεδομένων σποράς στη βάση δεδομένων στη μνήμη όταν η εφαρμογή φορτώνεται για πρώτη φορά στο πρόγραμμα περιήγησης, αναδιπλώνοντας το φέρω μέθοδος σε α useEffect άγκιστρο.

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

ο renderKey κατάσταση περιλαμβάνεται επίσης στο useEffect για να διασφαλιστεί ότι ο κώδικας ενεργοποιεί μια εκ νέου απόδοση των δεδομένων που προστέθηκαν πρόσφατα στη βάση δεδομένων στη μνήμη όταν εκτελείται ο διακομιστής.

Με απλά λόγια, κάθε φορά που ένας χρήστης προσθέτει νέα δεδομένα υποχρεώσεων στη βάση δεδομένων του Mirage.js—το στοιχείο θα αποδοθεί ξανά για να εμφανίσει τα ενημερωμένα δεδομένα.

Προσθήκη δεδομένων στο API

Τώρα, ορίστε τη λογική για την προσθήκη δεδομένων στο API μέσω αιτημάτων POST. Ακριβώς κάτω από το άγκιστρο useEffect, συμπεριλάβετε τον ακόλουθο κώδικα.

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

Όταν ένας χρήστης εισάγει δεδομένα στο πεδίο εισαγωγής υποχρεώσεων και κάνει κλικ στο Προσθήκη Todo κουμπί, ο κώδικας ενημερώνει το newTodo κατάσταση με την είσοδο του χρήστη. Στη συνέχεια, στέλνει ένα ψευδές αίτημα POST στο API με το νέο αντικείμενο δεδομένων στο σώμα αιτήματος για να το αποθηκεύσει στη βάση δεδομένων στη μνήμη.

Εάν το αίτημα POST είναι επιτυχές, ο κωδικός προσθέτει το νέο στοιχείο στο todos πίνακα, και, τέλος, ενεργοποιεί το στοιχείο εκ νέου απόδοση για να εμφανίσει το νέο αντικείμενο εργασίας.

Mock API DELETE αιτήματα

Τώρα, ορίστε τη λογική για τη διαγραφή δεδομένων μέσω αιτημάτων DELETE ψευδών API. Αυτή η διαδικασία περιλαμβάνει την αποστολή ενός αιτήματος DELETE για την κατάργηση του στοιχείου εκκρεμότητας από τη βάση δεδομένων στη μνήμη. Εάν είναι επιτυχής, ενημερώστε και τα δύο todos και φόρτωση κατάσταση για να αντικατοπτρίζει τη διαδικασία διαγραφής.

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

Λάβετε υπόψη ότι αυτή η διαδικασία μπορεί να διαγράψει μόνο δεδομένα που προστέθηκαν πρόσφατα και όχι τα δεδομένα αρχικής εμφάνισης.

Τέλος, εισάγετε το TodoList συστατικό στο App.jsx αρχείο για να το αποδώσετε στο DOM.

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

Εξαιρετική! Μόλις ξεκινήσετε τον διακομιστή ανάπτυξης, μπορείτε να ανακτήσετε τα δεδομένα αρχικής εμφάνισης και να προσθέσετε και να διαγράψετε νέα δεδομένα από το εικονικό API στην εφαρμογή React.

Χρήση εικονικών API για την επιτάχυνση της ανάπτυξης

Το Mocking API είναι ένας πολύ καλός τρόπος για να επιταχύνετε την ανάπτυξη του frontend, είτε εργάζεστε σε ένα έργο μεμονωμένα είτε ως μέρος μιας ομάδας. Χρησιμοποιώντας Mock API, μπορείτε να δημιουργήσετε γρήγορα τη διεπαφή χρήστη και να δοκιμάσετε τον κώδικά τους χωρίς να περιμένετε να ολοκληρωθεί το backend.