اول مشروع نود و رياكت
إذا كنت مثلي، من عشاق التكنولوجيا وشغوفًا بمستقبل البرمجيات، فأنت في المكان المناسب.
في هذا المقال، سأصطحبك في رحلة ممتعة لاستكشاف كيفية استخدام React، Node.js، وMySQL لإنشاء تطبيق بسيط لكنه مميز، يتيح لك رفع الصور وعرضها بأسلوب أنيق وجذاب. لن نتحدث فقط عن الأكواد، بل سنتناول الأفكار والطرق التي تجمع بين الابتكار والعملية.
هذا المقال ليس مجرد دليل تقني؛ إنه نافذة على ما يمكن أن تقدمه البرمجيات من إمكانيات لا حدود لها، خاصةً عندما يجتمع شغف البرمجة مع رغبتنا في صنع شيء جديد يخدم المستخدمين. استعد لتتعرف على التفاصيل التي تجعل التكنولوجيا أداة للإبداع، وليس مجرد وسيلة لإنجاز المهام!
المتطلبات
node js
Node.js هي منصة مفتوحة المصدر تُعد واحدة من أهم الأدوات في عالم البرمجة الحديثة، حيث تمكن المطورين من بناء تطبيقات عالية الكفاءة باستخدام JavaScript على جانب الخادم. تتميز Node.js بسرعتها واعتمادها على محرك V8 الذي طورته شركة Google، مما يجعلها مثالية للتطبيقات التي تتطلب استجابة سريعة ومعالجة بيانات كبيرة في وقت قصير.
ما يجعل Node.js مميزًا حقًا هو بنيتها القائمة على الأحداث (Event-driven) وعدم الاعتماد على تعدد الخيوط (Threading)، مما يتيح إنشاء تطبيقات خفيفة وسريعة تلبي احتياجات العصر الرقمي. تُستخدم Node.js بشكل واسع في بناء تطبيقات الويب، APIs، وحتى تطبيقات الوقت الحقيقي مثل الدردشة الحية والألعاب عبر الإنترنت.
سواء كنت مبتدئًا أو مطورًا محترفًا، فإن تعلم Node.js يُعد خطوة أساسية لفهم كيفية بناء أنظمة قوية ومرنة تعتمد على JavaScript في كل من الواجهة الأمامية والخلفية. إنها أداة تعكس جمال البساطة عندما تمتزج مع القوة والإبداع.
xampp
XAMPP هو بيئة تطوير متكاملة ومفتوحة المصدر تُستخدم على نطاق واسع لإنشاء تطبيقات الويب محليًا قبل نشرها على الخوادم الحية. يتضمن XAMPP مجموعة من الأدوات الأساسية مثل Apache (خادم ويب)، MySQL (قاعدة بيانات)، PHP، وPerl، مما يجعله خيارًا مثاليًا للمطورين الراغبين في إعداد بيئة تطوير متكاملة بسهولة وسرعة.
ما يميز XAMPP هو بساطته في التثبيت والاستخدام، حيث يمكنك من خلال خطوات بسيطة تشغيل خادم ويب وقاعدة بيانات على جهازك الشخصي دون الحاجة إلى إعدادات معقدة. كما أنه يدعم أنظمة تشغيل متعددة مثل Windows، Linux، وmacOS، مما يجعله أداة مرنة للمطورين حول العالم.
بفضل XAMPP، يمكن للمبرمجين اختبار مشاريعهم محليًا والتأكد من أدائها قبل إطلاقها على الإنترنت، مما يوفر الوقت والجهد. سواء كنت تعمل على موقع بسيط أو تطبيق ويب متكامل، فإن XAMPP يضع بين يديك الأدوات التي تحتاجها لتحقيق ذلك. إنه الخيار الأمثل للمبتدئين والمحترفين على حد سواء.
visual studio code
Visual Studio Code، المعروف اختصارًا بـ VS Code، هو محرر نصوص وبرمجيات مفتوح المصدر تم تطويره بواسطة شركة Microsoft. يُعد VS Code واحدًا من أكثر أدوات التطوير شيوعًا في عالم البرمجة، حيث يجمع بين البساطة والقوة في بيئة واحدة تلبي احتياجات المبتدئين والمحترفين على حد سواء.
ما يميز VS Code هو قابليته للتخصيص ودعمه لمجموعة واسعة من اللغات والتقنيات البرمجية، بفضل نظام الإضافات الغني الذي يمكن المستخدمين من إضافة ميزات جديدة بسهولة. كما يتميز بواجهته النظيفة وأدواته المدمجة مثل تصحيح الأخطاء (Debugging)، تكامل Git، وميزات الإكمال التلقائي الذكية التي تزيد من الإنتاجية.
سواء كنت تعمل على تطوير تطبيقات ويب، برمجة واجهات المستخدم، أو كتابة الأكواد لتعلم الآلة، يوفر VS Code بيئة عمل مرنة تساعدك على التركيز على الإبداع دون الانشغال بالتفاصيل التقنية. إنه الأداة المثالية لمن يسعى لتحسين كفاءته والعمل بكفاءة أكبر في عالم البرمجيات.
اول مشروع نود و رياكت
لإنشاء تطبيق بسيط ومميز باستخدام React، Node.js، وMySQL، يمكنك الجمع بين الواجهة الأنيقة والمعالجة القوية للبيانات. يُستخدم React لإنشاء واجهة ديناميكية تعرض الصور بعد رفعها من خلال نموذج بسيط، بينما يتولى Node.js معالجة الطلبات وتخزين الملفات باستخدام مكتبات مثل Multer. يتم تخزين بيانات الصور في MySQL، حيث يتم حفظ اسم الصورة ومسارها. هذا التكامل يتيح رفع الصور وعرضها بتنسيق جذاب مع تحسين تجربة المستخدم عبر تأثيرات حركية. المشروع يعكس كيفية تناغم هذه الأدوات لبناء تطبيق فعال ومُلهم يجمع بين الإبداع والعملية.
اعداد الجزء الخلفي node js
من داخل فولدر المشروع نقوم بتنفيذ الاوامر التالية بالترتيب وذلك لإنشاء خادم باستخدام Express لاستقبال البيانات (الاسم والصورة) وحفظها في قاعدة بيانات MySQL
mkdir server
cd server
npm init -y
npm install express body-parser multer mysql cors
بعد ذلك نقوم بانشاء ملف server.js داخل مجلد server وننسخ بداخلة الكود التالي وهو يحتوي على كود خادم Node.js الذي يُستخدم لمعالجة طلبات العميل (واجهة React) وتوفير البيانات أو استلامها.ركز في اللي جاي
استيراد الحزم والمكتبات
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const mysql = require('mysql');
const cors = require('cors');
const fs = require('fs');
const path = require('path');
express: مكتبة لإنشاء خوادم ويب باستخدام Node.js.body-parser: لتحليل البيانات القادمة من الطلبات (مثل البيانات النصية أو JSON).multer: مكتبة تُستخدم لمعالجة رفع الملفات (مثل الصور).mysql: مكتبة للتواصل مع قاعدة بيانات MySQL.cors: للسماح بطلبات من مصادر مختلفة (مثل بين React و Node.js).fsوpath: لإدارة الملفات والمجلدات على النظام.
إعداد Express و CORS
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
app.use(cors()): يُمكّن تطبيق React من إرسال طلبات إلى الخادم.bodyParser.json(): يُتيح تحليل البيانات المرسلة في الطلبات بصيغة JSON.express.static(): يجعل ملفات الصور التي تم رفعها متاحة بشكل عام في مسار/uploads.
التأكد من وجود مجلد uploads
const uploadsDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadsDir)) {
fs.mkdirSync(uploadsDir, { recursive: true });
}
fs.existsSync: يتحقق مما إذا كان المجلدuploadsموجودًا.fs.mkdirSync: إذا لم يكن موجودًا، يتم إنشاؤه.
إعداد قاعدة البيانات
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'test',
});
db.connect(err => {
if (err) {
console.log('Database connection failed:', err);
return;
}
console.log('Database connected');
});
- يتم إعداد الاتصال مع قاعدة بيانات MySQL باستخدام البيانات (اسم المستخدم وكلمة المرور واسم قاعدة البيانات).
- يتم التحقق من نجاح الاتصال مع طباعة رسالة في حالة النجاح.
إعداد رفع الملفات باستخدام multer
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/');
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname));
},
});
const upload = multer({ storage });
multer.diskStorage: يحدد مكان حفظ الملفات واسم الملف.destination: مسار حفظ الصور (uploads/).filename: اسم الملف الجديد يكون عبارة عن الطابع الزمني مع امتداد الصورة الأصلي.
إنشاء API لإضافة كارت
app.post('/add-card', upload.single('image'), (req, res) => {
const { name } = req.body;
const image = req.file ? req.file.filename : null;
if (!name || !image) {
return res.status(400).json({ message: 'Name and image are required' });
}
const query = 'INSERT INTO cards (name, image) VALUES (?, ?)';
db.query(query, [name, image], (err, result) => {
if (err) {
console.log(err);
return res.status(500).json({ message: 'Database error' });
}
res.status(200).json({ message: 'Card added successfully' });
});
});
- المسار
/add-card:upload.single('image'): يعالج رفع صورة واحدة.- يستخرج اسم الكارت والصورة المرفوعة من الطلب.
- يتحقق من وجود البيانات المطلوبة (الاسم والصورة).
- يضيف البيانات إلى جدول
cardsفي قاعدة البيانات.
إنشاء API لجلب الكروت
app.get('/cards', (req, res) => {
const query = 'SELECT * FROM cards';
db.query(query, (err, results) => {
if (err) {
console.log(err);
return res.status(500).json({ message: 'Database error' });
}
res.status(200).json(results);
});
});
- المسار
/cards:- يجلب كل الكروت المخزنة في جدول
cardsمن قاعدة البيانات. - يعيد البيانات كـ JSON لتتمكن واجهة React من عرضها.
- يجلب كل الكروت المخزنة في جدول
تشغيل الخادم
app.listen(5000, () => {
console.log('Server is running on port 5000');
});
- يتم تشغيل الخادم على المنفذ
5000. - تظهر رسالة “Server is running on port 5000” عند نجاح التشغيل.
إعداد قاعدة البيانات mysql
نقوم بانشاء قاعدة بيانات وجدول باستخدام الكود التالي
CREATE DATABASE test;
USE test;
CREATE TABLE cards (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
image VARCHAR(255) NOT NULL
);
إعداد واجهة React (الجزء الأمامي)
نقوم بتثبيت رياكت والحزم المطلوبة لة بالترتيب التالي
npx create-react-app image-uploader-frontend
cd image-uploader-frontend
npm install axios
تعديل ملف App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
function App() {
const [cards, setCards] = useState([]);
const [name, setName] = useState('');
const [image, setImage] = useState(null);
useEffect(() => {
fetchCards();
}, []);
const fetchCards = async () => {
try {
const response = await axios.get('http://localhost:5000/cards');
setCards(response.data);
} catch (error) {
console.error('Error fetching cards:', error);
}
};
const handleAddCard = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('name', name);
formData.append('image', image);
try {
await axios.post('http://localhost:5000/add-card', formData);
fetchCards();
setName('');
setImage(null);
} catch (error) {
console.error('Error adding card:', error);
}
};
return (
<div className="App">
<h1>Card Uploader</h1>
<form onSubmit={handleAddCard} className="form">
<input
type="text"
placeholder="Enter name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<input
type="file"
accept="image/*"
onChange={(e) => setImage(e.target.files[0])}
required
/>
<button type="submit">Add Card</button>
</form>
<div className="cards">
{cards.map((card) => (
<div key={card.id} className="card">
<img src={`http://localhost:5000/uploads/${card.image}`} alt={card.name} />
<h3>{card.name}</h3>
</div>
))}
</div>
</div>
);
}
export default App;
تعديل ملف App.css
/* تحسين التنسيق العام */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
/* تنسيق عنوان الصفحة */
h1 {
color: #333;
font-size: 2rem;
margin-bottom: 20px;
}
/* تنسيق الفورم */
.form {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin: 0 auto 30px;
padding: 20px;
max-width: 400px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* تنسيق المدخلات */
.form input[type="text"],
.form input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form input[type="text"]:focus,
.form input[type="file"]:focus {
outline: none;
border-color: #007bff;
}
/* تنسيق الزر */
.form button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form button:hover {
background-color: #0056b3;
}
/* تنسيق منطقة الكروت */
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
/* تنسيق الكرت */
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
width: 200px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card img {
max-width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
.card h3 {
font-size: 1.2rem;
color: #333;
text-align: center;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
