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

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

Majd Muhtaseb05‏/07‏/202515 دقيقة

مقدمة

يشرح هذا البرنامج التعليمي كيفية بناء تطبيق متكامل (full-stack) باستخدام نقاط القوة في SvelteKit و Laravel، ونشره في بيئة بدون خادم (serverless). توفر SvelteKit تجربة تطوير رائعة لبناء واجهات أمامية سريعة وتفاعلية، بينما يوفر Laravel إطار عمل خلفي قوي وغني بالميزات. من خلال نشر Laravel API كوظيفة بدون خادم، يمكننا تحقيق قابلية التوسع وفعالية التكلفة.

إعداد Laravel API

أولاً، نحتاج إلى مشروع Laravel. استخدم Composer لإنشاء مشروع جديد:

composer create-project laravel/laravel api
cd api

بعد ذلك، حدد نقطة نهاية API بسيطة، على سبيل المثال، استرداد قائمة بالمنتجات. أنشئ وحدة تحكم:

php artisan make:controller ProductController

في app/Http/Controllers/ProductController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index()
    {
        $products = [
            ['id' => 1, 'name' => 'المنتج أ', 'price' => 20],
            ['id' => 2, 'name' => 'المنتج ب', 'price' => 30],
        ];

        return response()->json($products);
    }
}

حدد المسار (route) في routes/api.php:

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

Route::middleware('api')->group(function () {
    Route::get('/products', [ProductController::class, 'index']);
});

يمكن نشر هذا API في بيئة بدون خادم مثل AWS Lambda باستخدام خدمات مثل Bref أو Laravel Vapor. يعتمد تكوين النشر بدون خادم على النظام الأساسي المختار.

إنشاء الواجهة الأمامية باستخدام SvelteKit

الآن، دعنا نقم بإعداد الواجهة الأمامية باستخدام SvelteKit.

npm create svelte@latest frontend
cd frontend
npm install

أنشئ صفحة لجلب وعرض المنتجات من Laravel API. في src/routes/+page.svelte:

<script>
  let products = [];

  async function getProducts() {
    const res = await fetch('YOUR_LARAVEL_API_ENDPOINT/api/products'); // استبدل بنقطة نهاية API الفعلية الخاصة بك
    products = await res.json();
  }

  getProducts();
</script>

<h1>المنتجات</h1>

{#each products as product (product.id)}
  <div>
    {product.name} - ${product.price}
  </div>
{/each}

تذكر استبدال YOUR_LARAVEL_API_ENDPOINT بعنوان URL الفعلي حيث تم نشر Laravel API الخاص بك.

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

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

npm run dev

افتح متصفحك وانتقل إلى عنوان URL لتطبيق SvelteKit (عادةً http://localhost:5173). يجب أن ترى قائمة المنتجات التي تم جلبها من Laravel API الخاص بك.

خاتمة

أوضح هذا البرنامج التعليمي كيفية الجمع بين SvelteKit و Laravel API بدون خادم لبناء تطبيق متكامل (full-stack) حديث وقابل للتطوير. من خلال الاستفادة من نقاط القوة في كلا الإطارين والنشر بدون خادم، يمكنك إنشاء حلول فعالة وفعالة من حيث التكلفة. تذكر التعامل مع سيناريوهات الأخطاء وتنفيذ المصادقة والترخيص المناسبين لبيئات الإنتاج. يمكن أن تتضمن التحسينات الإضافية استخدام قاعدة بيانات داخل Laravel API وإضافة المزيد من مكونات واجهة المستخدم المعقدة في SvelteKit.