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

بناء تطبيق متكامل باستخدام SvelteKit وقاعدة بيانات لا خادمية: دليل خطوة بخطوة

Majd Muhtaseb27‏/05‏/202518 دقيقة

مقدمة

سيأخذك هذا الدليل خلال إنشاء تطبيق أساسي متكامل باستخدام SvelteKit وقاعدة بيانات لا خادمية. سنركز على تطبيق بسيط "للمهام". سنستخدم Supabase لقاعدة البيانات اللا خادمية والمصادقة.

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

• Node.js و npm مثبتان
• حساب Supabase (الخطة المجانية كافية)

الخطوة 1: إنشاء مشروع SvelteKit

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

اختر الخيارات التالية أثناء إنشاء المشروع:

• "Skeleton project" (مشروع هيكلي)
• TypeScript: لا
• ESLint: نعم
• Prettier: نعم
• Playwright: لا

الخطوة 2: إعداد Supabase

1. قم بإنشاء مشروع جديد في Supabase.

2. احصل على عنوان URL الخاص بـ Supabase ومفتاح Anon من إعدادات المشروع.

3. قم بإنشاء جدول todos في قاعدة بيانات Supabase الخاصة بك بالأعمدة التالية:

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

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

الخطوة 3: تثبيت عميل Supabase

npm install @supabase/supabase-js

الخطوة 4: تهيئة عميل Supabase في SvelteKit

قم بإنشاء ملف 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);

قم بإنشاء ملف .env في جذر مشروعك وأضف عنوان URL الخاص بـ Supabase ومفتاح Anon:

VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"

تذكر أن تسبق متغيرات البيئة بـ VITE_ حتى يعرضها SvelteKit للمتصفح.

الخطوة 5: جلب وعرض المهام

قم بتحرير src/routes/+page.svelte:

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

    let todos = [];

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

        if (data) {
            todos = data;
        }

        if (error) {
            console.error('خطأ في جلب المهام:', error);
        }
    });
</script>

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

{#each todos as todo (todo.id)}
    <p>{todo.task} - {todo.completed ? 'مكتملة' : 'غير مكتملة'}</p>
{/each}

الخطوة 6: إضافة مهمة

أضف نموذجًا إلى src/routes/+page.svelte:

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

    let todos = [];
    let newTask = '';

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

    async function fetchTodos() {
        const { data, error } = await supabase
            .from('todos')
            .select('*')
            .order('id', { ascending: false });

        if (data) {
            todos = data;
        }

        if (error) {
            console.error('خطأ في جلب المهام:', error);
        }
    }

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

        const { data, error } = await supabase
            .from('todos')
            .insert([{ task: newTask }])
            .select(); // تحديد الصف الذي تم إدراجه

        if (data) {
            todos = [data[0], ...todos]; // إضافة المهمة الجديدة إلى بداية القائمة
            newTask = '';
        }

        if (error) {
            console.error('خطأ في إضافة مهمة:', error);
        }
    }
</script>

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

<form on:submit|preventDefault={addTodo}>
    <input type="text" bind:value={newTask} placeholder="أضف مهمة" />
    <button type="submit">أضف</button>
</form>

{#each todos as todo (todo.id)}
    <p>{todo.task} - {todo.completed ? 'مكتملة' : 'غير مكتملة'}</p>
{/each}

الخطوة 7: تشغيل التطبيق

npm run dev -- --open

يجب أن يتم تشغيل تطبيق SvelteKit الخاص بك الآن وعرض المهام التي تم جلبها من Supabase. يمكنك إضافة مهام جديدة عبر النموذج.

خاتمة

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