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

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

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

مقدمة

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

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

• Node.js و npm مثبتان
• حساب ومشروع Supabase تم إنشاؤهما

إعداد مشروع SvelteKit الخاص بك

1. إنشاء مشروع SvelteKit جديد:

   npm create svelte@latest my-sveltekit-app
   cd my-sveltekit-app
   npm install
   

2. تثبيت عميل JavaScript الخاص بـ Supabase:

   npm install @supabase/supabase-js
   

الاتصال بـ Supabase

1. استرجع عنوان URL الخاص بـ Supabase ومفتاح anon من لوحة معلومات مشروع Supabase الخاص بك.

2. إنشاء ملف .env في جذر مشروع SvelteKit الخاص بك:

   VITE_SUPABASE_URL="عنوان_URL_الخاص_بك"
   VITE_SUPABASE_ANON_KEY="مفتاح_ANON_الخاص_بك"
   

3. تهيئة عميل Supabase في src/lib/supabaseClient.js:

   import { createClient } from '@supabase/supabase-js';
   import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
   
   export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY);
   

إنشاء نموذج البيانات (المهام)

لنفترض أننا نقوم ببناء تطبيق لإدارة المهام. قم بإنشاء جدول باسم tasks في قاعدة بيانات Supabase الخاصة بك مع الأعمدة التالية:

• id (UUID، مفتاح أساسي)
• task (نص)
• completed (منطقي، القيمة الافتراضية: false)

تنفيذ عمليات CRUD

1. قراءة المهام (GET)

في src/routes/+page.svelte:

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

  let tasks = [];

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

    if (data) {
      tasks = data;
    }

    if (error) {
      console.error('Error fetching tasks:', error);
    }
  });
</script>

<h1>المهام</h1>

{#each tasks as task (task.id)}
  <div>
    <input type="checkbox" checked={task.completed} />
    {task.task}
  </div>
{/each}

2. إنشاء المهام (POST)

أضف حقل إدخال وزرًا لإنشاء مهام جديدة:

<script>
  // ... (الكود السابق)

  let newTask = '';

  async function createTask() {
    const { data, error } = await supabase
      .from('tasks')
      .insert([{ task: newTask }]);

    if (data) {
      tasks = [...tasks, data[0]]; // أضف المهمة الجديدة إلى المصفوفة المحلية
      newTask = ''; // امسح حقل الإدخال
    }

    if (error) {
      console.error('Error creating task:', error);
    }
  }
</script>

// ... (الكود السابق)

<input type="text" bind:value={newTask} placeholder="أضف مهمة جديدة" />
<button on:click={createTask}>أضف مهمة</button>

3. تحديث المهام (PUT/PATCH)

قم بتعديل قائمة المهام لتضمين دالة لتحديث حالة الإكمال:

<script>
  // ... (الكود السابق)

  async function updateTask(task) {
    const { error } = await supabase
      .from('tasks')
      .update({ completed: !task.completed })
      .eq('id', task.id);

    if (error) {
      console.error('Error updating task:', error);
    }
  }
</script>

{#each tasks as task (task.id)}
  <div>
    <input type="checkbox" checked={task.completed} on:change={() => updateTask(task)} />
    {task.task}
  </div>
{/each}

4. حذف المهام (DELETE)

أضف زر حذف لكل مهمة:

<script>
  // ... (الكود السابق)

  async function deleteTask(task) {
    const { error } = await supabase
      .from('tasks')
      .delete()
      .eq('id', task.id);

    if (error) {
      console.error('Error deleting task:', error);
    }
  }
</script>

{#each tasks as task (task.id)}
  <div>
    <input type="checkbox" checked={task.completed} on:change={() => updateTask(task)} />
    {task.task}
    <button on:click={() => deleteTask(task)}>حذف</button>
  </div>
{/each}

خاتمة

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