API'niz hazır değil mi? Sorun değil! Mirage.js ile sahte API'ler geliştirin ve kullanın.

Tam yığın uygulamalar geliştirirken, ön uç çalışmalarının önemli bir kısmı arka uçtan gelen gerçek zamanlı verilere dayanır.

Bu, API kullanıma hazır olana kadar kullanıcı arayüzünü geliştirmeyi ertelemeniz gerektiği anlamına gelebilir. Ancak API'nin ön ucu kurmaya hazır olmasını beklemek üretkenliği önemli ölçüde azaltabilir ve proje zaman çizelgelerini uzatabilir.

Bu zorluğa harika bir çözüm, sahte API'lerin kullanılmasını içerir. Bu API'ler geliştirmenize ve Gerçek verilere güvenmeden, gerçek verilerin yapısını taklit eden verileri kullanarak ön uçunuzu test edin API'dir.

Mirage.js Sahte API'lerini Kullanmaya Başlarken

Mirage.js web uygulamanızın istemci tarafında çalışan bir test sunucusuyla tamamlanan sahte API'ler oluşturmanıza olanak tanıyan bir JavaScript kitaplığıdır. Bu, gerçek arka uç API'nizin kullanılabilirliği veya davranışı konusunda endişelenmenize gerek kalmadan ön uç kodunuzu test edebileceğiniz anlamına gelir.

instagram viewer

Mirage.js'yi kullanmak için öncelikle sahte API uç noktaları oluşturmanız ve bunların döndürmesi gereken yanıtları tanımlamanız gerekir. Daha sonra Mirage.js, ön uç kodunuzun yaptığı tüm HTTP isteklerini yakalar ve bunun yerine sahte yanıtları döndürür.

API'niz hazır olduğunda yalnızca Mirage.js'nin yapılandırmasını değiştirerek kolayca kullanmaya geçebilirsiniz.

Bu projenin kaynak kodunu burada bulabilirsiniz GitHub depo.

Mirage.js ile Sahte API Sunucusu Oluşturun

Sahte API'lerin nasıl ayarlanacağını göstermek için Mirage.js arka ucunu kullanan basit bir yapılacaklar React uygulaması oluşturacaksınız. Ama önce, create-react-app komutunu kullanarak bir React uygulaması oluşturun. Alternatif olarak şunları kullanabilirsiniz: Bir React projesi kurmak için Vite edin. Ardından Mirage.js bağımlılığını yükleyin.

npm install --save-dev miragejs

Şimdi istekleri engellemek ve API yanıtlarını taklit etmek amacıyla bir Mirage.js sunucu örneği oluşturmak için CreateServer yöntem. Bu yöntem, parametre olarak bir yapılandırma nesnesini alır.

Bu nesne şunları içerir: çevre Ve ad alanı API için. Ortam, API'nin geliştirme gibi bulunduğu geliştirme aşamasını belirtirken ad alanı, tüm API uç noktalarına eklenen önektir.

Yeni bir tane oluştur src/server.js dosyalayın ve aşağıdaki kodu ekleyin:

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

Gerekirse, sürümün belirtilmesi de dahil olmak üzere ad alanını gerçek API'nizin URL yapısına uyacak şekilde özelleştirebilirsiniz. Böylece API'niz hazır olduğunda minimum kod değişikliğiyle onu ön uç uygulamanıza kolayca entegre edebilirsiniz.

Ayrıca, sunucu örneği yapılandırmasında, sahte ortamda veri depolamayı ve almayı simüle etmek için bir veri modeli de tanımlayabilirsiniz.

Son olarak, sunucu nesnesini bilgisayarınıza aktararak Mirage.js sunucusunu başlatın. index.jsx veya main.jsx aşağıdaki gibi dosya:

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

Sahte API'ye Çekirdek Verileri Ekleme

Mirage.js, sahte API'yi ilk tohum verileriyle önceden doldurmak ve istemci uygulamanızdaki test verilerini yönetmek için kullanabileceğiniz bir bellek içi veritabanına sahiptir. Bu, test verilerini sahte veritabanından saklayıp getirebileceğiniz ve istemci uygulamanızda kullanabileceğiniz anlamına gelir.

Mock API'ye tohum verileri eklemek için aşağıdaki kodu ekleyin. sunucu.js dosyanın hemen altında modeller nesne.

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

tohumlar işlevi, Mirage.js sunucusunu her biri bir başlık ve açıklamaya sahip üç yapılacak iş öğesiyle doldurur. İsteğe bağlı olarak, test verilerini sabit kodlamak yerine aşağıdaki gibi bir kitaplığı entegre edebilirsiniz: Faker.js Gerekli test verilerini oluşturmak için.

Sahte API Rotalarını Tanımlayın

Şimdi sahte API için bazı API rotalarını tanımlayın. Bu durumda GET, POST ve DELETE sahte API isteklerini işlemek için yollar belirtin.

Tohum verilerinin hemen altına aşağıdaki kodu ekleyin:

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

Bir React İstemcisi Oluşturun

Artık sahte API ayarlandığına göre, API uç noktalarıyla etkileşim kurmak ve bunları kullanmak için bir React istemcisi oluşturalım. İstediğiniz herhangi bir UI bileşen kitaplığını kullanmakta özgürsünüz, ancak bu kılavuz, uygulamaya stil vermek için Chakra UI'yi kullanacaktır.

İlk önce şu bağımlılıkları yükleyin:

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

Daha sonra yeni bir tane oluşturun src/components/TodoList.jsx dosyanızı oluşturun ve aşağıdaki kodu ekleyin:

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

Şimdi, yeni görevlerin eklenmesine yönelik giriş alanları ve mevcut görevlerin bir listesini içeren, yapılacaklar listesi kullanıcı arayüzünü oluşturmak için işlevsel bir bileşen tanımlayın.

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

Şimdi ekleme ve silme işlemleri için işleyici işlevlerini tanımlayın. Ama önce bu durumları ekleyin. Alternatif olarak şunları yapabilirsiniz: durum yönetimi mantığını tanımlamak için useReducer kancasını kullanın yapılacaklar listesi uygulaması için.

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

Şimdi, uygulama tarayıcıya ilk kez yüklendiğinde çekirdek verileri bellek içi veritabanında alma ve görüntüleme mantığını tanımlayın. gidip getirmek bir yöntem kullanımEtkisi kanca.

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

renderKey durum ayrıca, sunucu çalışırken kodun bellek içi veritabanına yeni eklenen verilerin yeniden oluşturulmasını tetiklemesini sağlamak için useEffect'e de dahil edilir.

Basitçe söylemek gerekirse, bir kullanıcı Mirage.js veritabanına yeni yapılacaklar verileri eklediğinde bileşen, güncellenen verileri görüntülemek için yeniden oluşturulur.

API'ye Veri Ekleme

Şimdi POST istekleri aracılığıyla API'ye veri ekleme mantığını tanımlayın. UseEffect kancasının hemen altına aşağıdaki kodu ekleyin.

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

Kullanıcı yapılacak iş giriş alanına veri girdiğinde ve Yapılacak Ekle düğmesi, kod günceller yeniYapılacak kullanıcının girişi ile durum. Daha sonra, istek gövdesindeki yeni veri nesnesini bellek içi veritabanına kaydetmek için API'ye sahte bir POST isteği gönderir.

POST isteği başarılı olursa kod yeni öğeyi yapılacaklar dizi ve son olarak, yeni yapılacaklar öğesini göstermek için bileşenin yeniden oluşturulmasını tetikler.

Sahte API SİLME İstekleri

Şimdi, DELETE sahte API istekleri aracılığıyla verileri silme mantığını tanımlayın. Bu işlem, yapılacak iş öğesinin bellek içi veritabanından kaldırılması için bir DELETE isteği gönderilmesini içerir. Başarılı olursa, her ikisini de güncelleyin yapılacaklar Ve Yükleniyor silme işlemini yansıtacak şekilde durum.

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

Bu işlemin çekirdek verileri değil, yalnızca yeni eklenen verileri silebileceğini unutmayın.

Son olarak, içe aktarın Yapılacaklar listesi içindeki bileşen Uygulama.jsx DOM'da oluşturulacak dosya.

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

Harika! Geliştirme sunucusunu başlattığınızda, tohum verilerini alabilir ve React uygulamanızdaki sahte API'den yeni veriler ekleyip silebilirsiniz.

Geliştirmeyi Hızlandırmak için Sahte API'leri Kullanmak

API'leri taklit etmek, ister bir proje üzerinde bireysel olarak ister bir ekibin parçası olarak çalışıyor olun, ön uç geliştirmeyi hızlandırmanın harika bir yoludur. Sahte API'leri kullanarak, arka ucun tamamlanmasını beklemeden hızlı bir şekilde kullanıcı arayüzünü oluşturabilir ve kodlarını test edebilirsiniz.