Cara Membuat dan Menggunakan API Mock di Aplikasi React Menggunakan Mirage.js

Saat mengembangkan aplikasi full-stack, sebagian besar pekerjaan frontend bergantung pada data real-time dari backend.

Ini bisa berarti Anda harus menunda pengembangan antarmuka pengguna hingga API tersedia untuk digunakan. Namun, menunggu API siap untuk menyiapkan frontend dapat sangat mengurangi produktivitas dan memperpanjang jangka waktu proyek.

Solusi terbaik untuk tantangan ini adalah dengan menggunakan API tiruan. API ini memungkinkan Anda mengembangkan dan uji frontend Anda menggunakan data yang meniru struktur data sebenarnya, semuanya tanpa bergantung pada data sebenarnya API.

Memulai Dengan API Mock Mirage.js

Mirage.js adalah pustaka JavaScript yang memungkinkan Anda membuat API tiruan, lengkap dengan server pengujian yang berjalan di sisi klien aplikasi web Anda. Ini berarti Anda dapat menguji kode frontend tanpa perlu mengkhawatirkan ketersediaan atau perilaku API backend Anda yang sebenarnya.

Untuk menggunakan Mirage.js, pertama-tama Anda harus membuat titik akhir API tiruan dan menentukan respons yang harus dikembalikan. Kemudian, Mirage.js mencegat semua permintaan HTTP yang dibuat oleh kode frontend Anda dan sebagai gantinya mengembalikan respons tiruan.

Setelah API Anda siap, Anda dapat dengan mudah beralih menggunakannya hanya dengan mengubah konfigurasi Mirage.js.

Anda dapat menemukan kode sumber proyek ini di sini GitHub gudang.

Buat Server API Mock Dengan Mirage.js

Untuk mendemonstrasikan cara menyiapkan API tiruan, Anda akan membuat aplikasi React tugas sederhana yang menggunakan backend Mirage.js. Tapi pertama-tama, buat aplikasi React menggunakan perintah create-react-app. Sebagai alternatif, Anda dapat menggunakan Vite untuk menyiapkan proyek React. Selanjutnya, instal ketergantungan Mirage.js.

npm install --save-dev miragejs

Sekarang, untuk membuat instance server Mirage.js untuk mencegat permintaan dan meniru respons API, gunakan buatServer metode. Metode ini mengambil objek konfigurasi sebagai parameter.

Objek ini mencakup lingkungan Dan ruang nama untuk APInya. Lingkungan menentukan tahap pengembangan API seperti pengembangan, sedangkan namespace adalah awalan yang ditambahkan ke semua titik akhir API.

Buat yang baru src/server.js file dan sertakan kode berikut:

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

Jika diperlukan, Anda dapat menyesuaikan namespace agar sesuai dengan struktur URL API Anda yang sebenarnya, termasuk menentukan versinya. Dengan cara ini, setelah API Anda siap, Anda dapat dengan mudah mengintegrasikannya ke dalam aplikasi front-end dengan sedikit perubahan kode.

Selain itu, dalam konfigurasi instans server, Anda juga dapat menentukan model data untuk menyimulasikan penyimpanan dan pengambilan data di lingkungan tiruan.

Terakhir, mulai server Mirage.js dengan mengimpor objek server ke dalam file Anda indeks.jsx atau main.jsx mengajukan sebagai berikut:

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

Tambahkan Data Benih ke API Mock

Mirage.js memiliki database dalam memori yang dapat Anda gunakan untuk mengisi API tiruan dengan data awal awal dan untuk mengelola data pengujian dari aplikasi klien Anda. Ini berarti Anda dapat menyimpan dan mengambil data pengujian dari database tiruan dan menggunakannya dalam aplikasi klien Anda.

Untuk menambahkan data awal ke Mock API, tambahkan kode berikut di server.js file tepat di bawah model obyek.

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

Itu biji fungsi mengisi server Mirage.js dengan tiga item tugas, masing-masing dengan judul dan deskripsi. Secara opsional, alih-alih melakukan hard coding pada data pengujian, Anda dapat mengintegrasikan perpustakaan seperti Faker.js untuk menghasilkan data uji yang diperlukan.

Tentukan Rute Mock API

Sekarang, tentukan beberapa rute API untuk API tiruan. Dalam hal ini, tentukan rute untuk menangani permintaan API tiruan GET, POST, dan DELETE.

Tepat di bawah data seed, tambahkan kode di bawah ini:

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

Bangun Klien React

Sekarang setelah API tiruan sudah disiapkan, mari kita membangun klien React untuk berinteraksi dan menggunakan titik akhir API. Anda bebas menggunakan pustaka komponen UI apa pun yang Anda suka, tetapi panduan ini akan menggunakan Chakra UI untuk menata aplikasi.

Pertama, instal dependensi ini:

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

Selanjutnya, buat yang baru src/komponen/TodoList.jsx file, dan sertakan kode berikut:

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

Sekarang, tentukan komponen fungsional untuk merender antarmuka pengguna daftar tugas, termasuk kolom input untuk menambahkan tugas baru dan daftar tugas yang sudah ada.

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

Sekarang, tentukan fungsi pengendali untuk operasi tambah dan hapus. Tapi pertama-tama, tambahkan negara bagian ini. Alternatifnya, Anda bisa gunakan kait useReducer untuk menentukan logika manajemen status untuk aplikasi daftar tugas.

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

Sekarang, tentukan logika untuk mengambil dan menampilkan data awal di database dalam memori saat aplikasi pertama kali dimuat di browser dengan membungkusnya mengambil metode dalam a gunakanEffect kait.

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

Itu renderKey status juga disertakan dalam useEffect untuk memastikan bahwa kode tersebut memicu perenderan ulang data yang baru ditambahkan dalam database dalam memori saat server sedang berjalan.

Sederhananya, setiap kali pengguna menambahkan data tugas baru ke database Mirage.js—komponen akan dirender ulang untuk menampilkan data yang diperbarui.

Menambahkan Data ke API

Sekarang, tentukan logika untuk menambahkan data ke API melalui permintaan POST. Tepat di bawah hook useEffect, sertakan kode berikut.

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

Saat pengguna memasukkan data di kolom input agenda dan mengklik Tambahkan Todo tombol, kode memperbarui Todo baru nyatakan dengan masukan pengguna. Kemudian, ia mengirimkan permintaan POST tiruan ke API dengan objek data baru di badan permintaan untuk menyimpannya ke database dalam memori.

Jika permintaan POST berhasil, kode akan menambahkan item baru ke semuanya array, dan terakhir, memicu render ulang komponen untuk menampilkan item tugas baru.

Permintaan HAPUS API Tiruan

Sekarang, tentukan logika untuk menghapus data melalui permintaan API tiruan DELETE. Proses ini melibatkan pengiriman permintaan DELETE untuk menghapus item agenda dari database dalam memori. Jika berhasil, perbarui keduanya semuanya Dan memuat menyatakan untuk mencerminkan proses penghapusan.

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

Perlu diingat bahwa proses ini hanya dapat menghapus data yang baru ditambahkan, bukan data awal.

Terakhir, impor Daftar Tugas komponen di Aplikasi.jsx file untuk merendernya di DOM.

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

Besar! Setelah Anda memulai server pengembangan, Anda dapat mengambil data awal, dan menambahkan serta menghapus data baru dari API tiruan di aplikasi React Anda.

Menggunakan API Mock untuk Mempercepat Pengembangan

Mocking API adalah cara terbaik untuk mempercepat pengembangan frontend, baik Anda mengerjakan proyek secara individu atau sebagai bagian dari tim. Dengan menggunakan Mock API, Anda dapat dengan cepat membuat UI dan menguji kodenya tanpa menunggu backend selesai.