العودة للمقالات

بناء تطبيق CRUD كامل باستخدام React و TypeScript و API بدون خادم

Majd Muhtaseb24‏/06‏/202515 دقيقة

مقدمة

ستوجهك هذه المقالة خلال بناء تطبيق 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 بدون خادم. تذكر استبدال البيانات الوهمية باتصال قاعدة بيانات حقيقي لتطبيق جاهز للإنتاج.