MERN Yığını ile Ürün Mağazası Geliştirme

MERN Yığını ile Ürün Mağazası Geliştirme

Merhaba, bugün sizlere MERN yığını kullanarak bir ürün mağazası geliştirme sürecini adım adım ele alacağız. MERN yığını, MongoDB, Express.js, React ve Node.js’in bir araya gelmesiyle oluşan popüler bir web geliştirme yığınıdır. Bu yığın, güçlü sunucu tarafı ve istemci tarafı yetenekleri sunarak dinamik ve etkileşimli web uygulamaları oluşturmak için ideal bir tercihtir. Bu makalede, MERN yığınıyla bir e-ticaret uygulaması geliştirmek için gereken adımları, temel kavramları ve örnek kodları inceleyeceğiz.

MERN Yığını: Temel Bileşenler

MERN yığını, her bir bileşeninin benzersiz işlevlere sahip olduğu dört ana teknolojiden oluşur:

• MongoDB: Veritabanımız olarak kullanacağımız NoSQL veritabanı yönetim sistemidir. MongoDB, esnek veri modeli ve ölçeklenebilirliği ile bilinir.
• Express.js: Node.js için bir web uygulama çerçevesidir. Express.js, REST API’leri oluşturmak, rota işlemek ve orta yazılım kullanmak için kullanışlı araçlar sunar.
• React: Kullanıcı arayüzü geliştirmek için kullanılan popüler bir JavaScript kütüphanesidir. React, bileşen tabanlı bir yaklaşım sunar ve performansı artırmak için sanal DOM kullanır.
• Node.js: JavaScript kodunu sunucu tarafında çalıştırmak için kullanılan bir JavaScript çalışma zamanı ortamıdır. Node.js, yüksek performanslı ve ölçeklenebilir sunucu tarafı uygulamaları geliştirmeyi sağlar.

Proje Kurulumu

Öncelikle, yeni bir MERN proje klasörü oluşturun ve içinde bir paket yöneticisi kullanarak gerekli bağımlılıkları yükleyin. Bu örnekte npm kullanacağız:

“`bash
mkdir my-product-store
cd my-product-store
npm init -y
“`

Ardından, Express.js, React ve MongoDB ile ilgili bağımlılıkları proje klasörüne ekleyin:

“`bash
npm install express mongoose react react-dom react-router-dom axios
“`

Sunucu Tarafı Geliştirme (Node.js ve Express.js)

Sunucu tarafını geliştirmek için öncelikle Node.js ve Express.js kullanarak bir API oluşturmanız gerekir. API, veritabanından ürün verilerini alıp React uygulamasıyla paylaşacak. Bu adımda MongoDB ile etkileşim kurmak için mongoose kütüphanesini kullanacağız.

1. Model Tanımlama

Bir Product modeli oluşturarak MongoDB’de hangi verilerin saklanacağını belirleyeceğiz. models/Product.js dosyasına aşağıdaki kodu ekleyebilirsiniz:

“`javascript
const mongoose = require(‘mongoose’);

const productSchema = new mongoose.Schema({
name: {
type: String,
required: true
},
description: {
type: String,
required: true
},
price: {
type: Number,
required: true
},
image: {
type: String,
required: true
}
});

module.exports = mongoose.model(‘Product’, productSchema);
“`

2. Veritabanı Bağlantısı

MongoDB veritabanına bağlantı kurmak için bir database.js dosyası oluşturun ve aşağıdaki kodu ekleyin:

“`javascript
const mongoose = require(‘mongoose’);

const connectDB = async () => {
try {
await mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true
});
console.log(‘MongoDB Bağlantısı Başarılı’);
} catch (err) {
console.error(err.message);
process.exit(1);
}
};

module.exports = connectDB;
“`

.env dosyasına MONGO_URI değişkenini ekleyin ve MongoDB bağlantı dizgininizi ayarlayın:

“`
MONGO_URI=mongodb://localhost:27017/my-product-store
“`

3. API Rotaları

Şimdi, ürün verilerini işleyecek API rotalarını tanımlayacağız. Bir routes/products.js dosyası oluşturun ve aşağıdaki kodu ekleyin:

“`javascript
const express = require(‘express’);
const router = express.Router();
const Product = require(‘../models/Product’);

// Tüm ürünleri listele
router.get(‘/’, async (req, res) => {
try {
const products = await Product.find();
res.json(products);
} catch (err) {
res.status(500).json({ message: err.message });
}
});

// Yeni ürün ekle
router.post(‘/’, async (req, res) => {
const newProduct = new Product(req.body);

try {
const savedProduct = await newProduct.save();
res.status(201).json(savedProduct);
} catch (err) {
res.status(400).json({ message: err.message });
}
});

// Tek bir ürün getir
router.get(‘/:id’, async (req, res) => {
try {
const product = await Product.findById(req.params.id);
res.json(product);
} catch (err) {
res.status(404).json({ message: err.message });
}
});

// Ürün güncelle
router.patch(‘/:id’, async (req, res) => {
try {
const updatedProduct = await Product.findByIdAndUpdate(req.params.id, req.body);
res.json(updatedProduct);
} catch (err) {
res.status(400).json({ message: err.message });
}
});

// Ürün sil
router.delete(‘/:id’, async (req, res) => {
try {
await Product.findByIdAndDelete(req.params.id);
res.json({ message: ‘Ürün silindi.’ });
} catch (err) {
res.status(500).json({ message: err.message });
}
});

module.exports = router;
“`

4. Ana Sunucu Dosyası

Son olarak, API’yi başlatacak bir ana sunucu dosyası oluşturun. server.js dosyasına aşağıdaki kodu ekleyin:

“`javascript
const express = require(‘express’);
const dotenv = require(‘dotenv’);
const connectDB = require(‘./database’);
const productRouter = require(‘./routes/products’);

dotenv.config();
const app = express();

// Orta yazılım
app.use(express.json());

// Veritabanı bağlantısı
connectDB();

// Rotalar
app.use(‘/api/products’, productRouter);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Sunucu ${PORT} numaralı portta çalışıyor…`));
“`

Bu kod parçası, Express.js uygulamasını başlatır, MongoDB’ye bağlanır, API rotalarını ayarlar ve belirtilen portta sunucuyu dinler.

İstemci Tarafı Geliştirme (React)

Şimdi, React kullanarak ürün mağazamızın kullanıcı arayüzünü oluşturacağız. React bileşenleri, API’den veri alarak ürünleri görüntülememizi, aramamızı ve filtrelememizi sağlayacak.

1. Bileşenler

Öncelikle, ürün mağazamızın temel bileşenlerini oluşturalım. src klasörü altında aşağıdaki bileşenleri oluşturun:

• components/Product.js: Tek bir ürünü temsil eden bileşen.
• components/ProductList.js: Tüm ürünleri listeleyen bileşen.
• components/AddProduct.js: Yeni ürün eklemek için bir form.
• components/Navbar.js: Site çubuğu.
• components/Footer.js: Site alt bilgisi.

2. Veri Alımı ve Durum Yönetimi

React bileşenlerine veri sağlamak için useState ve useEffect hook’larını kullanarak API’den ürün verilerini alacağız. components/ProductList.js dosyasına aşağıdaki kodu ekleyebilirsiniz:

“`javascript
import React, { useState, useEffect } from ‘react’;
import axios from ‘axios’;
import Product from ‘./Product’;

const ProductList = () => {
const [products, setProducts] = useState([]);

useEffect(() => {
const fetchProducts = async () => {
try {
const response = await axios.get(‘/api/products’);
setProducts(response.data);
} catch (err) {
console.error(err);
}
};

fetchProducts();
}, []);

return (

);
};

export default ProductList;
“`

3. Yönlendirme

Farklı sayfalara geçiş sağlamak için react-router-dom kütüphanesini kullanacağız. src/App.js dosyasına aşağıdaki kodu ekleyin:

“`javascript
import React from ‘react’;
import { BrowserRouter as Router, Routes, Route } from ‘react-router-dom’;
import ProductList from ‘./components/ProductList’;
import AddProduct from ‘./components/AddProduct’;
import Navbar from ‘./components/Navbar’;
import Footer from ‘./components/Footer’;

function App() {
return (



} />
} />