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

من الصفر إلى الإنتاج: بناء تطبيق كامل باستخدام SvelteKit و Supabase

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

مقدمة

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

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

• تثبيت Node.js و npm
• حساب Supabase (الخطة المجانية متاحة)
• فهم أساسي لـ JavaScript و HTML و CSS

الخطوة الأولى: إعداد مشروع SvelteKit الخاص بك

أولاً، لنقم بإنشاء مشروع SvelteKit جديد باستخدام الأمر التالي:

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

اختر "تطبيق SvelteKit" والخيارات الافتراضية الأخرى أثناء عملية الإعداد.

الخطوة الثانية: إعداد Supabase

1. قم بإنشاء مشروع جديد في حساب Supabase الخاص بك.

2. بمجرد إنشاء مشروعك، انتقل إلى محرر SQL وأنشئ جدول todos بالبنية التالية:

   CREATE TABLE todos (
       id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
       text VARCHAR(255) NOT NULL,
       completed BOOLEAN NOT NULL DEFAULT FALSE,
       created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
   );
   

3. انتقل إلى إعدادات مشروعك وانسخ عنوان URL ومفتاح anon الخاص بـ Supabase. ستحتاج إليهما لتوصيل تطبيق SvelteKit الخاص بك بقاعدة بيانات Supabase الخاصة بك.

الخطوة الثالثة: توصيل SvelteKit بـ Supabase

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

npm install @supabase/supabase-js

قم بإنشاء ملف supabaseClient.js في الدليل src/lib بالكود التالي، مع استبدال العناصر النائبة بعنوان URL ومفتاح anon الخاصين بـ Supabase:

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

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

الخطوة الرابعة: بناء واجهة مستخدم قائمة المهام

لنقم بإنشاء واجهة مستخدم بسيطة لعرض وإدارة مهامنا. عدّل src/routes/+page.svelte كما يلي:

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

  let todos = [];
  let newTodo = '';

  onMount(async () => {
    await fetchTodos();
  });

  async function fetchTodos() {
    const { data, error } = await supabase.from('todos').select('*').order('created_at', { ascending: false });
    if (error) {
      console.error('Error fetching todos:', error);
    } else {
      todos = data;
    }
  }

  async function addTodo() {
    if (newTodo.trim() === '') return;

    const { data, error } = await supabase
      .from('todos')
      .insert([{ text: newTodo }])
      .select();

    if (error) {
      console.error('Error adding todo:', error);
    } else {
      todos = [...data, ...todos];
      newTodo = '';
    }
  }

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

    if (error) {
      console.error('Error updating todo:', error);
    } else {
      todos = todos.map(todo => todo.id === id ? {...todo, completed: !completed} : todo);
      todos = [...todos];
    }
  }

  async function deleteTodo(id) {
    const { error } = await supabase.from('todos').delete().eq('id', id);
    if (error) {
      console.error('Error deleting todo:', error);
    } else {
      todos = todos.filter(todo => todo.id !== id);
    }
  }
</script>

<main>
  <h1>قائمة المهام</h1>

  <input type="text" bind:value={newTodo} placeholder="أضف مهمة جديدة" on:keydown={(e) => e.key === 'Enter' ? addTodo() : null}>
  <button on:click={addTodo}>أضف</button>

  <ul>
    {#each todos as todo (todo.id)}
      <li>
        <input type="checkbox" checked={todo.completed} on:click={() => toggleComplete(todo.id, todo.completed)}>
        <span class:completed={todo.completed}>{todo.text}</span>
        <button on:click={() => deleteTodo(todo.id)}>حذف</button>
      </li>
    {/each}
  </ul>
</main>

<style>
  .completed {
    text-decoration: line-through;
    color: gray;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  li span {
    margin-left: 0.5rem;
    margin-right: auto;
  }
</style>

الخطوة الخامسة: تشغيل التطبيق الخاص بك

ابدأ خادم التطوير:

npm run dev

افتح متصفحك وانتقل إلى http://localhost:5173. يجب أن ترى تطبيق المهام الخاص بك قيد التشغيل.

خاتمة

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