אין לך את ה-API מוכן? אין בעיה! פתח והשתמש בממשקי API מדומים עם Mirage.js.

בעת פיתוח יישומי ערימה מלאה, חלק ניכר מהעבודה הקדמית מסתמך על נתונים בזמן אמת מה-backend.

המשמעות יכולה להיות שעליך לעצור את פיתוח ממשק המשתמש עד שה-API יהיה זמין לשימוש. עם זאת, המתנה עד שה-API יהיה מוכן להגדרת ה-frontend יכולה להפחית במידה ניכרת את הפרודוקטיביות ולהאריך את לוחות הזמנים של הפרויקט.

פתרון מצוין לאתגר זה כרוך בשימוש בממשקי API מדומים. ממשקי API אלה מאפשרים לך לפתח ו בדוק את החזית שלך באמצעות נתונים המחקים את המבנה של הנתונים האמיתיים, כל זאת מבלי להסתמך על המציאות ממשק API.

תחילת העבודה עם ממשקי API Mock של Mirage.js

Mirage.js היא ספריית JavaScript המאפשרת לך ליצור ממשקי API מדומים, עם שרת בדיקה הפועל בצד הלקוח של יישום האינטרנט שלך. משמעות הדבר היא שאתה יכול לבדוק את קוד הקצה שלך מבלי שתצטרך לדאוג לגבי הזמינות או ההתנהגות של ממשק ה-API האמיתי שלך.

כדי להשתמש ב- Mirage.js, תחילה עליך ליצור נקודות קצה מדומות של API ולהגדיר את התגובות שהן צריכות להחזיר. לאחר מכן, Mirage.js מיירט את כל בקשות ה-HTTP שקוד הקצה שלך יוצר ומחזיר את התגובות המדומה במקום זאת.

instagram viewer

ברגע שה-API שלך מוכן, תוכל לעבור בקלות להשתמש בו רק על ידי שינוי התצורה של Mirage.js.

אתה יכול למצוא את קוד המקור של הפרויקט הזה בזה GitHub מאגר.

צור שרת API מדומה עם Mirage.js

כדי להדגים כיצד להגדיר ממשקי API מדומים, תבנה אפליקציית React לביצוע פשוטה שמשתמשת ב-backend של Mirage.js. אבל קודם, צור אפליקציית React באמצעות הפקודה create-react-app. לחלופין, אתה יכול להשתמש חשוב להקים פרויקט React. לאחר מכן, התקן את התלות של Mirage.js.

npm install --save-dev miragejs

כעת, כדי ליצור מופע שרת Mirage.js ליירט בקשות וללעג לתגובות API, השתמש ב- createServer שיטה. שיטה זו לוקחת אובייקט תצורה כפרמטר.

אובייקט זה כולל את סביבה ו מרחב שמות עבור ה-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;
}

במידת הצורך, תוכל להתאים אישית את מרחב השמות כך שיתאים למבנה כתובת האתר של ממשק ה-API שלך, כולל ציון הגרסה. בדרך זו, ברגע שה-API שלך מוכן, אתה יכול בקלות לשלב אותו ביישום החזיתי שלך עם שינויי קוד מינימליים.

בנוסף, בתוך תצורת מופע השרת, אתה יכול גם להגדיר מודל נתונים כדי לדמות אחסון ואחזור נתונים בסביבת המדומה.

לבסוף, הפעל את שרת 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 ל-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

כעת, הגדר כמה מסלולי 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 ולצרוך אותן. אתה חופשי להשתמש בכל ספריית רכיבי ממשק משתמש שתרצה, אבל מדריך זה ישתמש בממשק המשתמש של צ'אקרה כדי לסגנן את האפליקציה.

ראשית, התקן את התלות האלה:

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 state נכלל גם ב-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 מצליחה, הקוד מוסיף את הפריט החדש ל- לעשות מערך, ולבסוף, מפעיל את הרכיב מחדש כדי להציג את פריט המטלות החדש.

Mock API DELETE בקשות

כעת, הגדר את ההיגיון למחיקת נתונים באמצעות בקשות ממשק API של DELETE. תהליך זה כולל שליחת בקשת DELETE להסרת פריט המטלות ממסד הנתונים בזיכרון. אם זה מצליח, עדכן את שניהם לעשות ו טוען מצב שישקף את תהליך המחיקה.

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

זכור שתהליך זה יכול רק למחוק נתונים חדשים שנוספו, לא את נתוני המקור.

לבסוף, ייבא את רשימת מטלות מרכיב ב App.jsx קובץ כדי לעבד אותו ב-DOM.

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

גדול! לאחר שתפעיל את שרת הפיתוח, תוכל להביא את נתוני ה-Seed ולהוסיף ולמחוק נתונים חדשים מה-API המדומה באפליקציית React שלך.

שימוש ב-Mock APIs כדי להאיץ את הפיתוח

ממשקי API מלגלגים הם דרך מצוינת להאיץ את פיתוח החזית, בין אם אתה עובד על פרויקט בנפרד או כחלק מצוות. על ידי שימוש ב-Mock APIs, אתה יכול לבנות במהירות את ממשק המשתמש ולבדוק את הקוד שלהם מבלי לחכות עד שה-backend יושלם.