نحوه ساخت و مصرف Mock API در برنامه های React با استفاده از Mirage.js

آیا API را آماده ندارید؟ مشکلی نیست! توسعه و استفاده از APIهای ساختگی با Mirage.js.

هنگام توسعه برنامه های فول استک، بخش قابل توجهی از کار ظاهری به داده های بلادرنگ از باطن متکی است.

این می تواند به این معنی باشد که شما باید از توسعه رابط کاربری خودداری کنید تا زمانی که API برای استفاده در دسترس باشد. با این حال، انتظار برای آماده شدن API برای راه اندازی فرانت اند می تواند به طور قابل توجهی بهره وری را کاهش دهد و جدول زمانی پروژه را افزایش دهد.

یک راه‌حل عالی برای این چالش، استفاده از APIهای ساختگی است. این APIها به شما این امکان را می‌دهند تا با استفاده از داده‌هایی که ساختار داده‌های واقعی را تقلید می‌کنند، طراحی و آزمایش کنید، بدون اتکا به API واقعی.

شروع به کار با Mirage.js Mock API

Mirage.js یک کتابخانه جاوا اسکریپت است که به شما امکان می‌دهد APIهای ساختگی را با یک سرور آزمایشی که در سمت مشتری برنامه وب شما اجرا می‌شود، ایجاد کنید. این بدان معنی است که می توانید کد ظاهری خود را بدون نیاز به نگرانی در مورد در دسترس بودن یا رفتار API باطن واقعی خود آزمایش کنید.

برای استفاده از Mirage.js، ابتدا باید نقاط پایانی API ساختگی ایجاد کنید و پاسخ هایی را که باید برگردانند تعریف کنید. سپس، Mirage.js تمام درخواست‌های HTTP را که کد frontend شما انجام می‌دهد، رهگیری می‌کند و در عوض پاسخ‌های ساختگی را برمی‌گرداند.

هنگامی که API شما آماده شد، می توانید به راحتی فقط با تغییر پیکربندی Mirage.js از آن استفاده کنید.

شما می توانید کد منبع این پروژه را در این مخزن GitHub پیدا کنید.

یک سرور API ساختگی با Mirage.js ایجاد کنید

برای نشان دادن نحوه راه‌اندازی APIهای ساختگی، یک برنامه React ساده برای انجام کار می‌سازید که از یک باطن Mirage.js استفاده می‌کند. اما ابتدا با استفاده از دستور create-react-app یک برنامه React ایجاد کنید. از طرف دیگر، می توانید از Vite برای راه اندازی یک پروژه React استفاده کنید. سپس، Dependency 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",
};

export function makeServer({ 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>
    <App />
  </React.StrictMode>,
)

Seed Data را به Mock API اضافه کنید

Mirage.js یک پایگاه داده در حافظه دارد که می توانید از آن برای پر کردن API ساختگی با داده های اولیه اولیه و مدیریت داده های آزمایشی از برنامه مشتری خود استفاده کنید. این بدان معنی است که می توانید داده های آزمایشی را از پایگاه داده ساختگی ذخیره و واکشی کنید و از آن در برنامه مشتری خود استفاده کنید.

برای افزودن seed data به 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.',
      });
    },

تابع seeds یک سرور Mirage.js را با سه مورد کاری پر می کند که هر کدام دارای عنوان و توضیحات هستند. به صورت اختیاری، به جای کدگذاری سخت داده های آزمایشی، می توانید کتابخانه ای مانند Faker.js را برای تولید داده های آزمایشی مورد نیاز ادغام کنید.

مسیرهای 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 Client بسازید

اکنون که API ساختگی راه اندازی شده است، بیایید یک کلاینت React بسازیم تا با نقاط پایانی API تعامل داشته باشد و مصرف کند. شما آزاد هستید که از هر کتابخانه مؤلفه UI که دوست دارید استفاده کنید، اما این راهنما از 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';

اکنون، یک مؤلفه کاربردی برای رندر کردن رابط کاربری فهرست کارها، از جمله فیلدهای ورودی برای افزودن کارهای جدید و فهرستی از وظایف موجود، تعریف کنید.

export default function TodoList() {
  return (
    <Container>
      <Text fontSize="xl" mb={4}>Todo List</Text>
      <FormControl mb={4}>
        <Input
          type="text"
          name="body"
          value={newTodo.body}
          onChange={handleInputChange}
        />
      </FormControl>
      <Button colorScheme="teal" onClick={handleAddTodo}> Add Todo</Button>
      {loading ? ( <Text>Loading...</Text> ) : (
        todos.map((todo) => (
          <Box key={todo.id} mb={2} p={2} borderWidth="1px">
            <Flex align="center">
              <Text flex="1">{todo.body}</Text>
              <Button
                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);

اکنون منطق بازیابی و نمایش داده‌های اولیه را در پایگاه داده درون حافظه زمانی که برنامه برای اولین بار در مرورگر بارگذاری می‌شود، با قرار دادن روش fetch در یک قلاب 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); 
    });
};

هنگامی که کاربر داده‌ها را در قسمت ورودی کار وارد می‌کند و روی دکمه Add Todo کلیک می‌کند، کد وضعیت newTodo را با ورودی کاربر به‌روزرسانی می‌کند. سپس، یک درخواست ساختگی POST را با شی داده جدید در بدنه درخواست به API ارسال می کند تا آن را در پایگاه داده درون حافظه ذخیره کند.

اگر درخواست POST موفقیت آمیز باشد، کد مورد جدید را به آرایه todos اضافه می کند و در نهایت، مؤلفه را مجدداً ارائه می کند تا مورد جدید را نشان دهد.

درخواست های حذف API ساختگی

اکنون منطق حذف داده ها را از طریق درخواست های DELETE mock API تعریف کنید. این فرآیند شامل ارسال یک درخواست DELETE برای حذف مورد کار از پایگاه داده درون حافظه است. در صورت موفقیت آمیز بودن، هر دو حالت کار و بارگذاری را به روز کنید تا فرآیند حذف را منعکس کند.

const handleDelete = (id) => { 
    let deleteInProgress = true;
    fetch(`/api/todos/${id}`, {
      method: 'DELETE',
    }).then((response) => {
        if (response.status === 204) {
          return null;
        } 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 ...
<TodoList /> 

عالی! هنگامی که سرور توسعه را راه اندازی کردید، می توانید داده های اولیه را واکشی کنید و داده های جدیدی را از API ساختگی در برنامه React خود اضافه و حذف کنید.

استفاده از APIهای ساختگی برای سرعت بخشیدن به توسعه

Mocking APIs یک راه عالی برای سرعت بخشیدن به توسعه frontend است، چه به صورت فردی یا به عنوان بخشی از یک تیم روی یک پروژه کار کنید. با استفاده از Mock API، می‌توانید به سرعت UI را بسازید و کد آن‌ها را بدون منتظر ماندن کامل شدن Backend آزمایش کنید.

منبع مقاله