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

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

المؤلفMajd Muhtaseb28‏/05‏/202515 دقيقة
بناء تطبيق CRUD كامل باستخدام SvelteKit و Prisma

مقدمة

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

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

  • تثبيت Node.js و npm (أو pnpm أو yarn)
  • معرفة أساسية بـ Svelte و SvelteKit
  • Docker (اختياري، لقاعدة بيانات محلية)

إعداد المشروع

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

    npm create svelte@latest my-crud-app
    cd my-crud-app
    npm install
    
  2. تثبيت Prisma:

    npm install @prisma/client prisma --save-dev
    npx prisma init --datasource-provider postgresql
    

    (عدّل مزود مصدر البيانات حسب الحاجة، على سبيل المثال، mysql، sqlite.)

  3. حدّث ملف .env الخاص بك بعنوان URL لقاعدة البيانات. إذا كنت تستخدم Docker، يمكنك استخدام شيء مثل: DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"

  4. حدد نموذج البيانات الخاص بك في prisma/schema.prisma. على سبيل المثال، نموذج Todo بسيط:

    generator client {
      provider = "prisma-client-js"
    }
    
    datasource db {
      provider = "postgresql" // أو المزود الذي اخترته
      url      = env("DATABASE_URL")
    }
    
    model Todo {
      id        Int      @id @default(autoincrement())
      text      String
      completed Boolean  @default(false)
      createdAt DateTime @default(now())
    }
    
  5. قم بإنشاء عميل Prisma وتشغيل عمليات الترحيل:

    npx prisma generate
    npx prisma migrate dev --name init
    

بناء نقاط نهاية API (مسارات SvelteKit)

أنشئ نقاط نهاية API في src/routes/api/todos/+server.ts (GET و POST) و src/routes/api/todos/[id]/+server.ts (GET و PUT و DELETE):

src/routes/api/todos/+server.ts (GET & POST)

import { json } from '@sveltejs/kit';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  const todos = await prisma.todo.findMany();
  return json(todos);
}

export async function POST({ request }) {
  const { text } = await request.json();
  const todo = await prisma.todo.create({
    data: { text },
  });
  return json(todo, { status: 201 });
}

src/routes/api/todos/[id]/+server.ts (GET, PUT & DELETE)

import { json, error } from '@sveltejs/kit';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET({ params }) {
  const { id } = params;
  const todo = await prisma.todo.findUnique({
    where: { id: parseInt(id) },
  });

  if (!todo) {
    throw error(404, 'Todo not found');
  }

  return json(todo);
}

export async function PUT({ params, request }) {
  const { id } = params;
  const { text, completed } = await request.json();

  const todo = await prisma.todo.update({
    where: { id: parseInt(id) },
    data: { text, completed },
  });

  return json(todo);
}


export async function DELETE({ params }) {
  const { id } = params;
  await prisma.todo.delete({
    where: { id: parseInt(id) },
  });

  return json({ success: true });
}

إنشاء الواجهة الأمامية لـ Svelte

  1. عرض المهام (src/routes/+page.svelte)

    <script>
      import { onMount } from 'svelte';
    
      let todos = [];
      let newTodo = '';
    
      async function fetchTodos() {
        const response = await fetch('/api/todos');
        todos = await response.json();
      }
    
      async function addTodo() {
        if (newTodo.trim() === '') return;
        const response = await fetch('/api/todos', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ text: newTodo }),
        });
        if (response.ok) {
          newTodo = '';
          await fetchTodos();
        }
      }
    
      async function deleteTodo(id) {
        const response = await fetch(`/api/todos/${id}`, {
          method: 'DELETE',
        });
        if (response.ok) {
          await fetchTodos();
        }
      }
    
      onMount(fetchTodos);
    </script>
    
    <h1>تطبيق المهام</h1>
    <input bind:value={newTodo} placeholder="أضف مهمة" />
    <button on:click={addTodo}>إضافة</button>
    
    <ul>
      {#each todos as todo (todo.id)}
        <li>
          {todo.text}
          <button on:click={() => deleteTodo(todo.id)}>حذف</button>
        </li>
      {/each}
    </ul>
    

تشغيل التطبيق

  1. ابدأ خادم تطوير SvelteKit:

    npm run dev -- --open
    

خاتمة

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