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

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

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

مقدمة

تشرح هذه المقالة كيفية بناء تطبيق 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. يمكنك التوسع في هذا الأساس عن طريق إضافة ميزات مثل تعديل المهام، ووضع علامة عليها كمكتملة، وتنفيذ مصادقة المستخدم. تذكر التعامل مع الأخطاء بأمان وإضافة التحقق المناسب.