في هذا المشروع، سنقوم ببناء تطبيق ويب بسيط باستخدام إطار عمل Express.js. التطبيق سيكون عبارة عن منصة صغيرة لإدارة المهام (To-do list) حيث يمكن للمستخدمين إضافة المهام، عرضها، وحذفها.
الخطوة 1: إعداد المشروع
أولًا، نحتاج إلى إعداد بيئة التطوير:
- إنشاء مجلد المشروع وتهيئته:
mkdir todo-app
cd todo-app
npm init -y- تثبيت Express.js والحزم الأخرى اللازمة:
npm install express body-parser ejsهنا، express هو الإطار الأساسي، body-parser لتحليل طلبات HTTP POST، وejs لمحرك القوالب.
- إنشاء ملف تطبيق الأساسي (app.js):
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// إعداد EJS كمحرك القوالب
app.set('view engine', 'ejs');
// إعداد bodyParser لتحليل البيانات
app.use(bodyParser.urlencoded({ extended: true }));
// تعريف المنفذ
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});الخطوة 2: إنشاء واجهة المستخدم والتخطيطات
- إعداد المجلدات والملفات:
/views: لملفات EJS./public: لملفات CSS وJavaScript.
- إنشاء ملف التخطيط الرئيسي (views/layout.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<link rel="stylesheet" href="/public/styles.css">
</head>
<body>
<%- body %>
</body>
</html>- إنشاء واجهة الصفحة الرئيسية (views/index.ejs):
<%- include('layout', { body: `
<div>
<h1>My Todo List</h1>
<form action="/add" method="POST">
<input type="text" name="newTask" placeholder="Add new task">
<button type="submit">Add Task</button>
</form>
<ul>
<% tasks.forEach(task => { %>
<li><%= task %> <a href="/delete/<%= tasks.indexOf(task) %>">Delete</a></li>
<% }) %>
</ul>
</div>
` }) %>هذا النص يتضمن نموذج لإضافة المهام وقائمة لعرضها.
الخطوة 3: إنشاء الخادم ومنطق التطبيق
سنقوم الآن بإضافة المنطق الأساسي للتطبيق لإدارة المهام باستخدام مصفوفة بسيطة تحتفظ بالمهام. سندعم عمليات إضافة وحذف المهام.
- إعداد متغير للمهام داخل ملف app.js:
let tasks = [];- معالجة الطلبات لإضافة مهمة:
app.post('/add', (req, res) => {
const newTask = req.body.newTask;
if (newTask) {
tasks.push(newTask);
}
res.redirect('/');
});- معالجة الطلبات لحذف مهمة:
app.get('/delete/:id', (req, res) => {
const id = req.params.id;
tasks.splice(id, 1);
res.redirect('/');
});- معالجة الطلبات للصفحة الرئيسية:
app.get('/', (req, res) => {
res.render('index', { tasks: tasks });
});في هذا الكود، عند زيارة الصفحة الرئيسية، يتم تمرير مصفوفة المهام إلى قالب index.ejs ليتم عرضها.
الخطوة 4: إضافة الأنماط وجعل الواجهة أكثر جاذبية
- إنشاء ملف الأنماط (public/styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 8px;
margin-bottom: 5px;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="text"] {
padding: 10px;
width: 300px;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #449d44;
}- تشغيل الخادم وتجربة التطبيق:
بعد إنشاء ملفات القوالب وتعريف المنطق في الخادم وتحديد الأنماط، يمكن الآن تشغيل الخادم باستخدام الأمر:
node app.jsوبعد ذلك يمكن فتح المتصفح على http://localhost:3000 لرؤية التطبيق يعمل.
هذا التطبيق البسيط يوضح كيفية استخدام Express.js لبناء تطبيق ويب قائم بالكامل مع واجهة المستخدم التفاعلية. يمكن توسيع هذا النموذج بإضافة قواعد بيانات حقيقية، تحسينات أمنية، وميزات أكثر تقدمًا حسب الحاجة.
إذا كنت ترغب في معرفة المزيد أو توسيع المشروع، يمكنك كتابة “أكمل” لنواصل البحث والشرح.
1 Trackback / Pingback
قسم التعليقات مغلق.