كيف تعمل متجر متكامل في MERN STACK

Muhammed Murad — Sat, 22 Mar 2025 14:41:41 +0000

هذا مثال لبنية مقالة متكاملة حول الموضوع المطلوب. يمكنك استخدام هذا الهيكل وتعبئته بالمحتوى التفصيلي والأمثلة البرمجية:

عنوان المقالة:

كيف أعمل متجر إلكتروني متكامل باستخدام MERN Stack: دليل خطوة بخطوة

المقدمة:

لماذا تعتبر MERN Stack (MongoDB, Express.js, React, Node.js) خيارًا ممتازًا لبناء المتاجر الإلكترونية؟
ميزات المتجر الذي سنبنيه:
- عرض المنتجات.
- نظام تسجيل المستخدمين.
- عربة تسوق.
- دفع إلكتروني آمن.
- لوحة تحكم للمشرف.

المتطلبات الأساسية:

معرفة بـ JavaScript وES6+.
فهم أساسيات React وNode.js.
تثبيت Node.js وMongoDB.
محرر أكواد مثل VS Code.

الخطوة 1: إعداد المشروع

هيكل المجلدات:

mern-store/  
├── client/          # Frontend (React)  
├── server/          # Backend (Node.js + Express)  
├── models/          # MongoDB Models  
├── routes/          # API Routes  
└── .env             # Environment Variables

تهيئة Backend:

mkdir mern-store && cd mern-store  
mkdir server && cd server  
npm init -y  
npm install express mongoose cors dotenv bcryptjs jsonwebtoken stripe

تهيئة Frontend:

cd ..  
npx create-react-app client  
cd client  
npm install axios react-router-dom redux react-redux @reduxjs/toolkit

الخطوة 2: بناء الـ Backend

1. إنشاء نموذج المنتج (Product Model):

// server/models/Product.js
const mongoose = require("mongoose");

const ProductSchema = new mongoose.Schema({
  name: { type: String, required: true },
  price: { type: Number, required: true },
  description: { type: String },
  image: { type: String },
  category: { type: String },
});
module.exports = mongoose.model("Product", ProductSchema);

2. إنشاء واجهات API (Routes):

// server/routes/productRoutes.js
const express = require("express");
const router = express.Router();
const Product = require("../models/Product");

// جلب جميع المنتجات
router.get("/", async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// إنشاء منتج جديد (للمشرف)
router.post("/", async (req, res) => {
  const product = new Product({ ...req.body });
  try {
    const newProduct = await product.save();
    res.status(201).json(newProduct);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});
module.exports = router;

3. دمج الـ Routes مع Server.js:

// server/server.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();

const app = express();
app.use(cors());
app.use(express.json());

// توصيل MongoDB
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// Routes
app.use("/api/products", require("./routes/productRoutes"));
app.use("/api/users", require("./routes/userRoutes")); // نظام المستخدمين
app.use("/api/orders", require("./routes/orderRoutes")); // نظام الطلبات

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

الخطوة 3: بناء الـ Frontend (React)

1. عرض المنتجات:

// client/src/components/ProductList.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts } from "../features/productsSlice";

const ProductList = () => {
  const dispatch = useDispatch();
  const products = useSelector((state) => state.products.items);

  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  return (
    <div className="product-grid">
      {products.map((product) => (
        <div key={product._id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>{product.price} $</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};
export default ProductList;

2. إدارة عربة التسوق (Redux):

// client/src/features/cartSlice.js
import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    addToCart: (state, action) => {
      const existingItem = state.items.find(
        (item) => item._id === action.payload._id
      );
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
    },
  },
});

export const { addToCart } = cartSlice.actions;
export default cartSlice.reducer;

الخطوة 4: إضافة الدفع الإلكتروني (Stripe)

تسجيل حساب في Stripe.
تثبيت حزمة Stripe في الـ Backend:

npm install stripe

إنشاء واجهة دفع:

// server/routes/paymentRoutes.js
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

router.post("/create-payment-intent", async (req, res) => {
  const { amount } = req.body;
  const paymentIntent = await stripe.paymentIntents.create({
    amount: amount * 100, // تحويل المبلغ إلى سنتات
    currency: "usd",
  });
  res.send({ clientSecret: paymentIntent.client_secret });
});

الخطوة 5: نشر المتجر

نشر الـ Backend:
- استخدم خدمات مثل Heroku أو Render.
نشر الـ Frontend:
- استخدم Vercel أو Netlify.
ربط النطاق (Domain):
- اشتري نطاقًا من مواقع مثل Namecheap وربطه بخدمة النشر.

نصائح أمنية:

استخدم HTTPS لجميع الاتصالات.
خزّن البيانات الحساسة (مفاتيح API) في ملف .env.
افحص المدخلات (Input Validation) لمنع هجمات مثل SQL Injection.

خاتمة:

يمكنك تطوير المتجر بإضافة ميزات مثل:
- نظام تقييم المنتجات.
- توصيات منتجات بناءً على سلوك المستخدم.
- لوحة تحكم متقدمة للمشرف.

مراجع مفيدة:

ملاحظة: يمكنك إضافة صور توضيحية وأكواد تفصيلية حسب حاجة القارئ! 🛒💻

Forem: Muhammed Murad