بناء تطبيق CRUD كامل باستخدام SvelteKit و Supabase
مقدمة
توضح هذه المقالة كيفية إنشاء تطبيق CRUD (إنشاء، قراءة، تحديث، حذف) بسيط ولكنه فعال باستخدام SvelteKit و Supabase. يوفر SvelteKit تجربة تطوير سريعة وفعالة لإنشاء تطبيقات الويب، بينما تقدم Supabase حلاً كاملاً للخلفية كخدمة مع قاعدة بيانات PostgreSQL، والمصادقة، وقدرات الوقت الفعلي.
المتطلبات الأساسية
- Node.js و npm مثبتان
- حساب ومشروع Supabase تم إنشاؤهما
إعداد مشروع SvelteKit الخاص بك
-
إنشاء مشروع SvelteKit جديد:
npm create svelte@latest my-sveltekit-app cd my-sveltekit-app npm install
-
تثبيت عميل JavaScript الخاص بـ Supabase:
npm install @supabase/supabase-js
الاتصال بـ Supabase
-
استرجع عنوان URL الخاص بـ Supabase ومفتاح anon من لوحة معلومات مشروع Supabase الخاص بك.
-
إنشاء ملف
.env
في جذر مشروع SvelteKit الخاص بك:VITE_SUPABASE_URL="عنوان_URL_الخاص_بك" VITE_SUPABASE_ANON_KEY="مفتاح_ANON_الخاص_بك"
-
تهيئة عميل 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. يمكنك توسيع هذا التطبيق بإضافة ميزات مثل المصادقة والتحديثات في الوقت الفعلي ونماذج بيانات أكثر تعقيدًا. تذكر معالجة الأخطاء بأمان وتحسين التعليمات البرمجية الخاصة بك للأداء.