DEV Community

Muhammed Murad
Muhammed Murad

Posted on

2

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

#react #aws #typescript #mongodb

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

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

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

المقدمة:

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

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

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

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

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

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

تهيئة Backend: 

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

تهيئة Frontend: 

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

الخطوة 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);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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}`));
Enter fullscreen mode Exit fullscreen mode

الخطوة 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

  1. تسجيل حساب في Stripe.
  2. تثبيت حزمة Stripe في الـ Backend: 
npm install stripe
Enter fullscreen mode Exit fullscreen mode
  1. إنشاء واجهة دفع: 
// 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 });
});
Enter fullscreen mode Exit fullscreen mode

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

  1. نشر الـ Backend:
  2. نشر الـ Frontend:
  3. ربط النطاق (Domain):
    • اشتري نطاقًا من مواقع مثل Namecheap وربطه بخدمة النشر.

نصائح أمنية:

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

خاتمة:

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

مراجع مفيدة:

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

Top comments (0)