بناء تطبيق CRUD كامل باستخدام React و TypeScript و API بدون خادم
مقدمة
ستوجهك هذه المقالة خلال بناء تطبيق CRUD (إنشاء وقراءة وتحديث وحذف) أساسي باستخدام مجموعة تقنيات حديثة: React مع TypeScript للواجهة الأمامية و API بدون خادم (باستخدام، على سبيل المثال، AWS Lambda و API Gateway أو Netlify Functions) للخلفية. توفر هذه المجموعة قابلية التوسع وسهولة الصيانة وتجربة تطوير رائعة. سنركز على المفاهيم الأساسية ونقدم أمثلة لتبدأ.
الواجهة الأمامية (React مع TypeScript)
إعداد المشروع
أولاً، قم بإنشاء مشروع React جديد باستخدام TypeScript:
npx create-react-app my-crud-app --template typescript
cd my-crud-app
تعريف نوع البيانات
دعنا نحدد نوع Task
بسيط:
// src/Task.ts
export interface Task {
id: string;
title: string;
description: string;
completed: boolean;
}
إنشاء مكون قائمة المهام
// src/components/TaskList.tsx
import React, { useState, useEffect } from 'react';
import { Task } from '../Task';
const TaskList: React.FC = () => {
const [tasks, setTasks] = useState<Task[]>([]);
useEffect(() => {
// جلب المهام من API عند تحميل المكون
fetchTasks();
}, []);
const fetchTasks = async () => {
try {
const response = await fetch('/.netlify/functions/get-tasks'); // بافتراض Netlify Functions
const data = await response.json();
setTasks(data);
} catch (error) {
console.error("Error fetching tasks:", error);
}
};
const handleComplete = async (id: string) => {
try {
await fetch(`/.netlify/functions/update-task/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ completed: !tasks.find(task => task.id === id)?.completed }),
});
fetchTasks();
} catch (error) {
console.error("Error updating task:", error);
}
}
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.title} - {task.description} - مكتمل: {task.completed ? 'نعم' : 'لا'}
<button onClick={() => handleComplete(task.id)}>تغيير الحالة</button>
</li>
))}
</ul>
);
};
export default TaskList;
الخلفية (API بدون خادم - مثال: Netlify Functions)
إعداد Netlify Functions
قم بإنشاء ملف netlify.toml
في جذر مشروعك:
[build]
functions = "netlify/functions"
إنشاء دالة جلب المهام
// netlify/functions/get-tasks.js
exports.handler = async (event, context) => {
// في تطبيق حقيقي، ستجلب من قاعدة بيانات
const tasks = [
{ id: "1", title: "تعلم React", description: "إتقان أساسيات React", completed: false },
{ id: "2", title: "بناء API", description: "إنشاء API بدون خادم", completed: true },
];
return {
statusCode: 200,
body: JSON.stringify(tasks),
headers: {
"Content-Type": "application/json",
},
};
};
إنشاء دالة تحديث المهمة
// netlify/functions/update-task/[id].js
exports.handler = async (event, context) => {
const taskId = event.pathParameters.id;
const { completed } = JSON.parse(event.body);
// في تطبيق حقيقي ، ستقوم بتحديث المهمة في قاعدة بيانات
// لهذا المثال ، سنسجل فقط المعرف وحالة الإكمال
console.log(`Updating task with ID: ${taskId} to completed: ${completed}`);
return {
statusCode: 200,
body: JSON.stringify({ message: `Task ${taskId} updated to completed: ${completed}` }),
headers: {
"Content-Type": "application/json",
},
};
};
خاتمة
هذا مثال مبسط، لكنه يوضح المبادئ الأساسية لبناء تطبيق CRUD كامل باستخدام React و TypeScript و API بدون خادم. تذكر استبدال البيانات الوهمية باتصال قاعدة بيانات حقيقي لتطبيق جاهز للإنتاج.