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

بناء تطبيق CRUD متكامل باستخدام React و Svelte وخلفية بدون خادم

Majd Muhtaseb06‏/11‏/202515 دقيقة

مقدمة

سيرشدك هذا البرنامج التعليمي خلال إنشاء تطبيق إنشاء وقراءة وتحديث وحذف (CRUD) بسيط باستخدام نقاط القوة في كل من React و Svelte للواجهة الأمامية، إلى جانب خلفية بدون خادم لإدارة البيانات. سنوضح كيف يمكن لهذه التقنيات أن تعمل معًا لبناء تطبيق ويب حديث وفعال.

الواجهة الخلفية بدون خادم (مثال مع AWS Lambda و API Gateway)

لنفترض أن لديك وظيفة Lambda بسيطة تتعامل مع عمليات CRUD لمورد "المنتجات". يعتمد التنفيذ الدقيق على مزود الخدمة بدون خادم الذي اخترته (AWS، Azure، Google Cloud) وقاعدة البيانات (DynamoDB، MongoDB Atlas، إلخ). للإيجاز، سنحذف الكود الخلفي الكامل. اعتبر هذا عنصر نائب يوضح بنية واجهة برمجة التطبيقات.

مثال على نقاط نهاية API:

• GET /products: استرجاع جميع المنتجات
• GET /products/{id}: استرجاع منتج معين عن طريق معرفه
• POST /products: إنشاء منتج جديد
• PUT /products/{id}: تحديث منتج
• DELETE /products/{id}: حذف منتج

مكون React (قائمة المنتجات)

يجلب مكون React هذا ويعرض قائمة المنتجات.

import React, { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/.netlify/functions/products'); // تعديل عنوان URL
      const data = await response.json();
      setProducts(data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

export default ProductList;

مكون Svelte (نموذج المنتج)

يوفر مكون Svelte هذا نموذجًا لإنشاء أو تحديث المنتجات.

<script>
  let name = '';

  async function handleSubmit() {
    const response = await fetch('/.netlify/functions/products', { // تعديل عنوان URL
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name })
    });

    if (response.ok) {
      name = ''; // مسح النموذج
      // تحديث قائمة المنتجات (ستحتاج إلى آلية للتواصل مع React)
      console.log("تم إنشاء المنتج!");
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label for="name">اسم المنتج:</label>
  <input type="text" id="name" bind:value={name} />
  <button type="submit">أضف منتج</button>
</form>

دمج React و Svelte

من المحتمل أنك ستحتاج إلى أداة بناء (مثل Webpack أو Parcel) لتجميع كل من مكونات React و Svelte في تطبيقك. تعتبر بنية الواجهات الأمامية الصغيرة أو استخدام مكونات الويب من الأساليب الشائعة هنا. سيركز هذا البرنامج التعليمي على إظهار الوظائف الأساسية بدلاً من ذلك.

خاتمة

يوضح هذا المثال المبادئ الأساسية للجمع بين React و Svelte وخلفية بدون خادم لعمليات CRUD. في حين أن المزيد من التطوير مطلوب لتطبيق جاهز للإنتاج (معالجة الأخطاء، وإدارة الحالة، والتواصل بين المكونات)، إلا أن هذا يوفر نقطة انطلاق للاستفادة من هذه التقنيات القوية معًا. تذكر تعديل نقاط نهاية API وتنفيذ وظائف بدون خادم بناءً على النظام الأساسي الذي اخترته.