بناء تطبيق ويب متقدم باستخدام React.js وNode.js

مقدمة

في هذا الدليل المتقدم، سنتعلم كيفية بناء تطبيق ويب كامل يعتمد على React.js في الواجهة الأمامية وNode.js في الخلفية. سنقوم بإنشاء تطبيق ويب يسمح للمستخدمين بالتسجيل والدخول، بالإضافة إلى إدارة بياناتهم الشخصية. سنستخدم أيضًا MongoDB كقاعدة بيانات لتخزين المعلومات.

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

للتأكد من أنك جاهز للعمل على هذا الدليل، يفضل أن تكون لديك معرفة أساسية بـ:

• JavaScript (ES6+)
• React.js
• Node.js
• Express.js
• MongoDB

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

قبل البدء، تأكد من أن لديك Node.js مثبتًا على جهازك. افتح Terminal أو Command Prompt واتبع الخطوات التالية:

1. إنشاء مجلد المشروع:

   mkdir advanced-web-app
   cd advanced-web-app

1. تهيئة مشروع Node.js:

   npm init -y

1. تثبيت الحزم الأساسية:

   npm install express mongoose bcryptjs jsonwebtoken cors dotenv

1. إنشاء مجلدات للواجهة الخلفية (backend) والواجهة الأمامية (frontend):

   mkdir backend frontend

الخطوة 2: إعداد الواجهة الخلفية باستخدام Node.js وExpress.js

1. إعداد خادم Express:

داخل مجلد backend، أنشئ ملفًا يسمى server.js:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

// Middleware
app.use(express.json());
app.use(cors());

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => console.log('MongoDB connected'))
  .catch((err) => console.log(err));

// Basic route
app.get('/', (req, res) => {
    res.send('Welcome to the advanced web app backend!');
});

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

2. إعداد قاعدة البيانات (MongoDB):

نحتاج إلى قاعدة بيانات MongoDB لاستضافة المستخدمين. يمكنك إما تشغيل MongoDB محليًا أو استخدام MongoDB Atlas.

3. إنشاء نموذج مستخدم (User Model):

داخل مجلد models، أنشئ ملفًا يسمى User.js:

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const UserSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true,
        unique: true
    },
    email: {
        type: String,
        required: true,
        unique: true
    },
    password: {
        type: String,
        required: true
    }
});

// Hash the password before saving
UserSchema.pre('save', async function (next) {
    if (!this.isModified('password')) return next();
    const salt = await bcrypt.genSalt(10);
    this.password = await bcrypt.hash(this.password, salt);
    next();
});

module.exports = mongoose.model('User', UserSchema);

الخطوة 3: إعداد الواجهة الأمامية باستخدام React.js

1. إنشاء مشروع React:

انتقل إلى مجلد frontend وقم بإنشاء مشروع React:

npx create-react-app .

2. إعداد صفحات التسجيل وتسجيل الدخول:

داخل مجلد src/components، أنشئ ملفًا يسمى Login.js وآخر يسمى Register.js. سنقوم بتضمين نماذج التسجيل والدخول.

3. إعداد نموذج التسجيل (Register.js):

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newUser = { username, email, password };
        try {
            await axios.post('http://localhost:5000/api/register', newUser);
            alert('تم التسجيل بنجاح');
        } catch (error) {
            console.error('Error during registration', error);
        }
    };

    return (
        <div>
            <h2>تسجيل حساب جديد</h2>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="اسم المستخدم"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
                <input
                    type="email"
                    placeholder="البريد الإلكتروني"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input
                    type="password"
                    placeholder="كلمة المرور"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <button type="submit">تسجيل</button>
            </form>
        </div>
    );
};

export default Register;

الخطوة 4: إعداد المصادقة باستخدام JSON Web Token (JWT)

1. إعداد مسار التسجيل (Register Route) في Node.js:

داخل مجلد routes، أنشئ ملفًا يسمى auth.js:

const express = require('express');
const router = express.Router();
const User = require('../models/User');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Register user
router.post('/register', async (req, res) => {
    const { username, email, password } = req.body;

    try {
        const user = new User({ username, email, password });
        await user.save();

        const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
        res.json({ token });
    } catch (error) {
        res.status(500).json({ message: 'خطأ في التسجيل' });
    }
});

module.exports = router;

2. إضافة مسار الدخول (Login Route):

// Login user
router.post('/login', async (req, res) => {
    const { email, password } = req.body;

    try {
        const user = await User.findOne({ email });
        if (!user) return res.status(400).json({ message: 'المستخدم غير موجود' });

        const isMatch = await bcrypt.compare(password, user.password);
        if (!isMatch) return res.status(400).json({ message: 'كلمة المرور غير صحيحة' });

        const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
        res.json({ token });
    } catch (error) {
        res.status(500).json({ message: 'خطأ في الدخول' });
    }
});

الخطوة 5: الاختبار وتشغيل المشروع

1. تشغيل الواجهة الخلفية:

   cd backend
   node server.js

1. تشغيل الواجهة الأمامية:

   cd frontend
   npm start

الخاتمة

في هذا الدليل المتقدم، تعلمنا كيفية بناء تطبيق ويب كامل باستخدام React.js وNode.js. استخدمنا تقنيات حديثة مثل JWT للمصادقة وMongoDB لتخزين البيانات. هذا المشروع يمكن تطويره ليشمل ميزات إضافية مثل تحديث البيانات الشخصية وإدارة الجلسات.