dev.to

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

هذا مثال لبنية مقالة متكاملة حول الموضوع المطلوب. يمكنك استخدام هذا الهيكل وتعبئته بالمحتوى التفصيلي والأمثلة البرمجية: عنوان المقالة: كيف أعمل متجر إلكتروني متكامل باستخدام 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 ( {products.map((product) => ( {product.name} {product.price} $ Add to Cart ))} ); }; 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({ clientSec

Mar 22, 2025 - 15:54

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

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

كيف أعمل متجر إلكتروني متكامل باستخدام 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 وربطه بخدمة النشر.