# أمثلة كاملة من الأدوات الذكية للبرمجة ## 1. مثال تطبيق ويب كامل باستخدام GitHub Copilot ```html مدير المهام الذكي

📋 مدير المهام الذكي

تنظيم مهامك بذكاء وفعالية

📝

لا توجد مهام بعد

ابدأ بإضافة مهمة جديدة!

``` ## 2. مثال تطبيق Node.js API باستخدام Claude ```javascript // server.js - تطبيق API RESTful باستخدام Express.js const express = require('express'); const cors = require('cors'); const mongoose = require('mongoose'); const helmet = require('helmet'); const rateLimit = require('express-rate-limit'); const morgan = require('morgan'); require('dotenv').config(); const app = express(); const PORT = process.env.PORT || 5000; // الأمان app.use(helmet()); app.use(cors({ origin: process.env.FRONTEND_URL || 'http://localhost:3000', credentials: true })); // محدودية الطلبات const limiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 دقيقة max: 100, // الحد الأقصى لعدد الطلبات message: { error: 'تم تجاوز الحد الأقصى لعدد الطلبات، يرجى المحاولة مرة أخرى بعد 15 دقيقة' } }); app.use('/api/', limiter); // تسجيل الطلبات app.use(morgan('combined')); // تحليل البيانات app.use(express.json({ limit: '10mb' })); app.use(express.urlencoded({ extended: true })); // الاتصال بقاعدة البيانات mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/taskmanager', { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => console.log('✅ تم الاتصال بقاعدة البيانات')) .catch(err => console.error('❌ خطأ في الاتصال بقاعدة البيانات:', err)); // تعريف الموديلات const TaskSchema = new mongoose.Schema({ title: { type: String, required: [true, 'العنوان مطلوب'], trim: true, maxlength: [200, 'لا يمكن أن يتجاوز العنوان 200 حرف'] }, description: { type: String, trim: true, maxlength: [1000, 'لا يمكن أن يتجاوز الوصف 1000 حرف'] }, status: { type: String, enum: ['pending', 'in_progress', 'completed'], default: 'pending' }, priority: { type: String, enum: ['low', 'medium', 'high'], default: 'medium' }, dueDate: { type: Date, validate: { validator: function(value) { return !value || value > new Date(); }, message: 'تاريخ الاستحقاق يجب أن يكون في المستقبل' } }, tags: [{ type: String, trim: true }], assignedTo: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, createdBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true } }, { timestamps: true, toJSON: { virtuals: true }, toObject: { virtuals: true } }); // مؤشرات البحث TaskSchema.index({ status: 1, priority: 1 }); TaskSchema.index({ createdBy: 1, createdAt: -1 }); TaskSchema.index({ dueDate: 1 }); // الوسائط TaskSchema.pre('save', function(next) { if (this.isModified('status') && this.status === 'completed') { this.completedAt = new Date(); } next(); }); TaskSchema.virtual('isOverdue').get(function() { return this.dueDate && this.dueDate < new Date() && this.status !== 'completed'; }); TaskSchema.methods.toJSON = function() { const task = this.toObject(); task.isOverdue = this.isOverdue; return task; }); const Task = mongoose.model('Task', TaskSchema); const UserSchema = new mongoose.Schema({ username: { type: String, required: [true, 'اسم المستخدم مطلوب'], unique: true, trim: true, minlength: [3, 'يجب أن يكون اسم المستخدم 3 أحرف على الأقل'], maxlength: [30, 'لا يمكن أن يتجاوز اسم المستخدم 30 حرف'] }, email: { type: String, required: [true, 'البريد الإلكتروني مطلوب'], unique: true, trim: true, lowercase: true, match: [/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/, 'البريد الإلكتروني غير صالح'] }, password: { type: String, required: [true, 'كلمة المرور مطلوبة'], minlength: [6, 'يجب أن تكون كلمة المرور 6 أحرف على الأقل'] }, role: { type: String, enum: ['user', 'admin'], default: 'user' }, avatar: { type: String, default: 'default-avatar.png' }, isActive: { type: Boolean, default: true }, lastLogin: { type: Date } }, { timestamps: true }); const User = mongoose.model('User', UserSchema); // مسارات API // مسارات المهام app.get('/api/tasks', async (req, res) => { try { const { page = 1, limit = 10, status, priority, search, sortBy = 'createdAt', sortOrder = 'desc' } = req.query; const filter = {}; if (req.user.role !== 'admin') { filter.createdBy = req.user.id; } if (status) filter.status = status; if (priority) filter.priority = priority; if (search) { filter.$or = [ { title: { $regex: search, $options: 'i' } }, { description: { $regex: search, $options: 'i' } } ]; } const sort = {}; sort[sortBy] = sortOrder === 'desc' ? -1 : 1; const tasks = await Task.find(filter) .sort(sort) .skip((page - 1) * limit) .limit(parseInt(limit)) .populate('assignedTo', 'username email avatar') .lean(); const total = await Task.countDocuments(filter); res.json({ success: true, data: { tasks, pagination: { current: parseInt(page), total: Math.ceil(total / limit), count: tasks.length, totalItems: total } } }); } catch (error) { res.status(500).json({ success: false, error: 'حدث خطأ أثناء جلب المهام', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); app.get('/api/tasks/:id', async (req, res) => { try { const task = await Task.findById(req.params.id) .populate('assignedTo', 'username email avatar') .populate('createdBy', 'username email'); if (!task) { return res.status(404).json({ success: false, error: 'المهمة غير موجودة' }); } if (req.user.role !== 'admin' && task.createdBy._id.toString() !== req.user.id) { return res.status(403).json({ success: false, error: 'غير مصرح لك بعرض هذه المهمة' }); } res.json({ success: true, data: task }); } catch (error) { res.status(500).json({ success: false, error: 'حدث خطأ أثناء جلب المهمة', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); app.post('/api/tasks', async (req, res) => { try { const { title, description, priority, dueDate, tags, assignedTo } = req.body; const taskData = { title, description, priority, dueDate, tags, assignedTo, createdBy: req.user.id }; const task = new Task(taskData); await task.save(); const populatedTask = await Task.findById(task._id) .populate('assignedTo', 'username email avatar') .populate('createdBy', 'username email'); res.status(201).json({ success: true, data: populatedTask, message: 'تم إنشاء المهمة بنجاح' }); } catch (error) { if (error.name === 'ValidationError') { const errors = Object.values(error.errors).map(err => err.message); return res.status(400).json({ success: false, error: 'بيانات غير صحيحة', details: errors }); } res.status(500).json({ success: false, error: 'حدث خطأ أثناء إنشاء المهمة', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); app.put('/api/tasks/:id', async (req, res) => { try { const { title, description, status, priority, dueDate, tags, assignedTo } = req.body; const task = await Task.findById(req.params.id); if (!task) { return res.status(404).json({ success: false, error: 'المهمة غير موجودة' }); } if (req.user.role !== 'admin' && task.createdBy.toString() !== req.user.id) { return res.status(403).json({ success: false, error: 'غير مصرح لك بتعديل هذه المهمة' }); } const updateData = { title, description, status, priority, dueDate, tags, assignedTo }; Object.keys(updateData).forEach(key => { if (updateData[key] !== undefined) { task[key] = updateData[key]; } }); await task.save(); const populatedTask = await Task.findById(task._id) .populate('assignedTo', 'username email avatar') .populate('createdBy', 'username email'); res.json({ success: true, data: populatedTask, message: 'تم تحديث المهمة بنجاح' }); } catch (error) { if (error.name === 'ValidationError') { const errors = Object.values(error.errors).map(err => err.message); return res.status(400).json({ success: false, error: 'بيانات غير صحيحة', details: errors }); } res.status(500).json({ success: false, error: 'حدث خطأ أثناء تحديث المهمة', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); app.delete('/api/tasks/:id', async (req, res) => { try { const task = await Task.findById(req.params.id); if (!task) { return res.status(404).json({ success: false, error: 'المهمة غير موجودة' }); } if (req.user.role !== 'admin' && task.createdBy.toString() !== req.user.id) { return res.status(403).json({ success: false, error: 'غير مصرح لك بحذف هذه المهمة' }); } await Task.findByIdAndDelete(req.params.id); res.json({ success: true, message: 'تم حذف المهمة بنجاح' }); } catch (error) { res.status(500).json({ success: false, error: 'حدث خطأ أثناء حذف المهمة', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); // مسارات الإحصائيات app.get('/api/tasks/stats', async (req, res) => { try { const filter = {}; if (req.user.role !== 'admin') { filter.createdBy = req.user.id; } const stats = await Task.aggregate([ { $match: filter }, { $group: { _id: '$status', count: { $sum: 1 } } } ]); const priorityStats = await Task.aggregate([ { $match: filter }, { $group: { _id: '$priority', count: { $sum: 1 } } } ]); const overdueCount = await Task.countDocuments({ ...filter, dueDate: { $lt: new Date() }, status: { $ne: 'completed' } }); const totalTasks = await Task.countDocuments(filter); const statusMap = stats.reduce((acc, item) => { acc[item._id] = item.count; return acc; }, {}); const priorityMap = priorityStats.reduce((acc, item) => { acc[item._id] = item.count; return acc; }, {}); res.json({ success: true, data: { status: statusMap, priority: priorityMap, overdue: overdueCount, total: totalTasks } }); } catch (error) { res.status(500).json({ success: false, error: 'حدث خطأ أثناء جلب الإحصائيات', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); // مسارات المستخدمين app.get('/api/users', async (req, res) => { if (req.user.role !== 'admin') { return res.status(403).json({ success: false, error: 'غير مصرح لك بعرض المستخدمين' }); } try { const users = await User.find({}).select('-password'); res.json({ success: true, data: users }); } catch (error) { res.status(500).json({ success: false, error: 'حدث خطأ أثناء جلب المستخدمين', details: process.env.NODE_ENV === 'development' ? error.message : undefined }); } }); // معالج الأخطاء app.use((error, req, res, next) => { console.error(error.stack); res.status(500).json({ success: false, error: 'حدث خطأ داخلي في الخادم' }); }); // معالج المسارات غير الموجودة app.use((req, res) => { res.status(404).json({ success: false, error: 'المسار غير موجود' }); }); // بدء الخادم app.listen(PORT, () => { console.log(`🚀 الخادم يعمل على المنفذ ${PORT}`); }); ``` ## 3. مثال تطبيق React باستخدام Bolt.new ```jsx // src/components/TaskManager.jsx import React, { useState, useEffect } from 'react'; import { FaPlus, FaEdit, FaTrash, FaCheck, FaTimes, FaSearch, FaFilter, FaExclamationTriangle, FaClock, FaUser } from 'react-icons/fa'; const TaskManager = () => { const [tasks, setTasks] = useState([]); const [filteredTasks, setFilteredTasks] = useState([]); const [taskForm, setTaskForm] = useState({ title: '', description: '', priority: 'medium', dueDate: '', assignedTo: '' }); const [editingTask, setEditingTask] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [filterStatus, setFilterStatus] = useState('all'); const [showForm, setShowForm] = useState(false); const [stats, setStats] = useState({ total: 0, completed: 0, pending: 0, inProgress: 0 }); // تحميل المهام من الـ API useEffect(() => { fetchTasks(); }, []); // تحديث المهام المصفاة والبحث useEffect(() => { filterTasks(); }, [tasks, searchQuery, filterStatus]); const fetchTasks = async () => { try { const response = await fetch('/api/tasks'); const data = await response.json(); if (data.success) { setTasks(data.data.tasks); updateStats(data.data.tasks); } } catch (error) { console.error('Error fetching tasks:', error); } }; const updateStats = (taskList) => { const total = taskList.length; const completed = taskList.filter(task => task.status === 'completed').length; const pending = taskList.filter(task => task.status === 'pending').length; const inProgress = taskList.filter(task => task.status === 'in_progress').length; setStats({ total, completed, pending, inProgress }); }; const filterTasks = () => { let filtered = tasks; // تطبيق البحث if (searchQuery) { filtered = filtered.filter(task => task.title.toLowerCase().includes(searchQuery.toLowerCase()) || task.description.toLowerCase().includes(searchQuery.toLowerCase()) ); } // تطبيق التصفية if (filterStatus !== 'all') { filtered = filtered.filter(task => task.status === filterStatus); } setFilteredTasks(filtered); }; const handleSubmit = async (e) => { e.preventDefault(); try { if (editingTask) { // تحديث مهمة موجودة const response = await fetch(`/api/tasks/${editingTask._id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(taskForm), }); const data = await response.json(); if (data.success) { setTasks(tasks.map(task => task._id === editingTask._id ? data.data : task)); setEditingTask(null); } } else { // إنشاء مهمة جديدة const response = await fetch('/api/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(taskForm), }); const data = await response.json(); if (data.success) { setTasks([...tasks, data.data]); } } resetForm(); setShowForm(false); } catch (error) { console.error('Error saving task:', error); } }; const resetForm = () => { setTaskForm({ title: '', description: '', priority: 'medium', dueDate: '', assignedTo: '' }); }; const startEdit = (task) => { setTaskForm({ title: task.title, description: task.description, priority: task.priority, dueDate: task.dueDate ? task.dueDate.split('T')[0] : '', assignedTo: task.assignedTo || '' }); setEditingTask(task); setShowForm(true); }; const deleteTask = async (taskId) => { if (window.confirm('هل أنت متأكد من حذف هذه المهمة؟')) { try { const response = await fetch(`/api/tasks/${taskId}`, { method: 'DELETE', }); const data = await response.json(); if (data.success) { setTasks(tasks.filter(task => task._id !== taskId)); } } catch (error) { console.error('Error deleting task:', error); } } }; const toggleStatus = async (taskId, newStatus) => { try { const response = await fetch(`/api/tasks/${taskId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ status: newStatus }), }); const data = await response.json(); if (data.success) { setTasks(tasks.map(task => task._id === taskId ? { ...task, status: newStatus } : task )); } } catch (error) { console.error('Error updating task status:', error); } }; const getPriorityColor = (priority) => { switch (priority) { case 'high': return 'bg-red-100 text-red-800 border-red-200'; case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200'; case 'low': return 'bg-green-100 text-green-800 border-green-200'; default: return 'bg-gray-100 text-gray-800 border-gray-200'; } }; const getStatusIcon = (status) => { switch (status) { case 'completed': return ; case 'in_progress': return ; default: return ; } }; const formatDate = (dateString) => { if (!dateString) return ''; const date = new Date(dateString); return date.toLocaleDateString('ar-SA'); }; return (
{/* عنوان التطبيق */}

مدير المهام الذكي

تنظيم مهامك بذكاء وفعالية

{/* بطاقات الإحصائيات */}

المهام الإجمالية

{stats.total}

المهام المكتملة

{stats.completed}

قيد التنفيذ

{stats.inProgress}

قيد الانتظار

{stats.pending}

{/* شريط التحكم */}
setSearchQuery(e.target.value)} />
{/* قائمة المهام */}
{filteredTasks.map((task) => (

{task.title}

{task.description}

{task.priority === 'high' ? 'عالية' : task.priority === 'medium' ? 'متوسطة' : 'منخفضة'} {getStatusIcon(task.status)} {task.status === 'pending' ? 'قيد الانتظار' : task.status === 'in_progress' ? 'قيد التنفيذ' : 'مكتملة'}
{task.dueDate && (
تاريخ الاستحقاق: {formatDate(task.dueDate)}
)} {task.assignedTo && (
مسندة ل: {task.assignedTo.username}
)}
{task.status !== 'completed' && ( )}
))}
{filteredTasks.length === 0 && (
📝

لا توجد مهام

{searchQuery || filterStatus !== 'all' ? 'لا توجد مهام تتطابق مع معايير البحث والتصفية' : 'ابدأ بإضافة مهمة جديدة!' }

{!searchQuery && filterStatus === 'all' && ( )}
)} {/* نموذج إضافة/تعديل المهمة */} {showForm && (

{editingTask ? 'تعديل المهمة' : 'إضافة مهمة جديدة'}

setTaskForm({ ...taskForm, title: e.target.value })} />
setTaskForm({ ...taskForm, dueDate: e.target.value })} />
)}
); }; export default TaskManager; ``` هذه الأكواد الكاملة تظهر كيف يمكن للأدوات الذكية مثل GitHub Copilot و Claude و Cursor و Bolt.new توليد تطبيقات كاملة من الصفر، بما في ذلك واجهات المستخدم، والخوادم، والتفاعلات مع قواعد البيانات. كل أداة تمتلك نقاط قوتها الخاصة في جوانب مختلفة من تطوير البرمجيات.