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

بناء تطبيق CRUD كامل باستخدام SvelteKit و Supabase

Majd Muhtaseb01‏/07‏/202518 دقيقة

مقدمة

سيرشدك هذا البرنامج التعليمي خلال بناء تطبيق CRUD (إنشاء، قراءة، تحديث، حذف) أساسي باستخدام SvelteKit للواجهة الأمامية و Supabase كخلفية لك. يوفر SvelteKit تجربة مطور رائعة، ويبسط Supabase إدارة قواعد البيانات والمصادقة.

المتطلبات الأساسية

• Node.js و npm مثبتان
• حساب Supabase ومشروع مُعدّ

إعداد مشروع SvelteKit

npm create svelte@latest my-crud-app
cd my-crud-app
npm install
npm install @supabase/supabase-js
npm run dev

إنشاء جدول Supabase

في مشروع Supabase الخاص بك، قم بإنشاء جدول باسم items بالأعمدة التالية:

• id (UUID، مفتاح أساسي)
• name (نص)
• description (نص)

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

الاتصال بـ Supabase

قم بإنشاء ملف supabaseClient.js في دليل src/lib:

// src/lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

تأكد من تعيين VITE_SUPABASE_URL و VITE_SUPABASE_ANON_KEY في ملف .env. توجد هذه القيم في إعدادات مشروع Supabase الخاص بك.

بناء عمليات CRUD

قراءة البيانات (+page.svelte)

<script>
  import { supabase } from '$lib/supabaseClient';
  import { onMount } from 'svelte';

  let items = [];

  onMount(async () => {
    const { data, error } = await supabase
      .from('items')
      .select('*');

    if (data) {
      items = data;
    } else {
      console.error(error);
    }
  });
</script>

<h1>العناصر</h1>

{#each items as item (item.id)}
  <div>
    <h2>{item.name}</h2>
    <p>{item.description}</p>
  </div>
{/each}

إنشاء البيانات (+page.svelte - مضاف إلى ما سبق)

<script>
  // ... (الكود السابق)
  let newItemName = '';
  let newItemDescription = '';

  async function createItem() {
    const { data, error } = await supabase
      .from('items')
      .insert([{ name: newItemName, description: newItemDescription }]);

    if (data) {
      items = [...items, ...data]; // إضافة العنصر الجديد إلى واجهة المستخدم
      newItemName = ''; // إعادة تعيين النموذج
      newItemDescription = '';
    } else {
      console.error(error);
    }
  }
</script>

<!-- ... (HTML السابق) -->

<h2>إنشاء عنصر جديد</h2>
<input type="text" bind:value={newItemName} placeholder="الاسم" />
<input type="text" bind:value={newItemDescription} placeholder="الوصف" />
<button on:click={createItem}>إنشاء</button>

تحديث وحذف البيانات

سيتبع تحديث وحذف البيانات نمطًا مشابهًا، باستخدام supabase.from('items').update() و supabase.from('items').delete() على التوالي. ستحتاج إلى إضافة معالجات الأحداث وحقول الإدخال إلى مكونات Svelte الخاصة بك للتعامل مع تفاعلات المستخدم. نظرًا لضيق المساحة، يُترك التنفيذ الكامل كتمرين للقارئ.

خاتمة

يقدم هذا البرنامج التعليمي أساسًا أساسيًا لبناء تطبيق CRUD باستخدام SvelteKit و Supabase. يمكنك التوسع في هذا عن طريق إضافة المصادقة ونماذج بيانات أكثر تعقيدًا وتحسين واجهة المستخدم/تجربة المستخدم. تذكر الرجوع إلى وثائق SvelteKit و Supabase للحصول على معلومات أكثر تفصيلاً.