الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

لوحة معلومات SvelteKit Supabase (تجريبية)

نص بديل

لوحة تحكم بسيطة مستوحاة من واجهة المستخدم Supabase المصممة باستخدام SvelteKit كواجهة أمامية وSupabase كواجهة خلفية.

إخلاء المسؤولية: هذا المشروع ليس جاهزًا للإنتاج. لم يتم اختبار الوصول المستند إلى الدور بشكل كامل. استخدم على مسؤوليتك الخاصة.

تجريبي

جرب أدوار وطرق عرض مختلفة هنا.

سمات

  • واجهة مستخدم مستوحاة من Supabase
  • منظمة متعددة
  • الوصول على أساس الدور
  • إنشاء المستخدم وحذفه في واجهة مستخدم لوحة المعلومات
  • العروض التوضيحية للجداول والرسوم البيانية
  • الوضع التجريبي (إظهار التلميحات وتعطيل تحديثات قاعدة البيانات)

التقنيات

  • Svelte وSvelteKit كإطار عمل للتطبيق
  • Supabase كقاعدة بيانات وواجهة خلفية
  • TailwindCSS كإطار عمل CSS
  • DaisyUI كمكتبة مكونات Tailwind CSS
  • Supabase Auth Helpers كأدوات مساعدة للمصادقة للعمل مع Supabase
  • مطالبات Supabase المخصصة للوصول المستند إلى المؤسسات المتعددة والأدوار
  • Charts.js وsvelte-chartjs للرسوم البيانية
  • أيقونات الريشة وأيقونات الريشة الأنيقة للأيقونات
  • مغازل تحميل svelte لتحميل المغازل
  • Vercel كمنصة للنشر

المهام

  • تحسين مستندات التطوير
  • إصلاح مشكلات TypeScript
  • إضافة المزيد من طرق عرض الرسم البياني
  • تحديث Supabase-js v2
  • ملفات تعريف المستخدمين
  • وضع الضوء/الظلام
  • تحسين الملاحة المتنقلة
  • PWA

تثبيت

إعداد Supabase

أنشئ مشروعًا جديدًا على Supabase.com وانتقل إلى الإعدادات->واجهة برمجة التطبيقات (API) للتحقق من عنوان URL لمشروعك ومفاتيح واجهة برمجة التطبيقات (API).

استنساخ الريبو 

git clone https://github.com/xulioc/sveltekit-supabase-dashboard.git
cd sveltekit-supabase-dashboard

متغيرات بيئة الإعداد

قم بإنشاء ملف .env جديد 

cp .env.example .env

قم بتحرير ملف .env الخاص بك ليطابق عنوان URL لمشروعك ومفاتيح API 

 # SUPABASE
PUBLIC_SUPABASE_URL= " YOUR PROJECT URL "
PUBLIC_SUPABASE_ANON_KEY= " YOUR PROJECT ANON KEY "
PRIVATE_SUPABASE_SERVICE_KEY= " YOUR PROJECT SERVICE KEY "

تهيئة قاعدة البيانات

قم بتنفيذ sql/init_databse.sql و sql/init_demo_data.sql في محرر Supabase SQL.

التثبيت والتشغيل 

npm install

للبدء في وضع التطوير: 

npm run dev

للبناء والبدء في وضع الإنتاج: 

npm run build
npm run preview

نشر

للنشر في Vercel، يرجى اتباع التعليمات هنا.

تطوير

العثور على مزيد من تفاصيل التطوير هنا.

يساهم

لا تتردد في المساهمة. القضايا وطلبات السحب هي موضع ترحيب.

رخصة

معهد ماساتشوستس للتكنولوجيا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل