หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

SvelteKit Supabase แดชบอร์ด (เบต้า)

ข้อความแสดงแทน

แดชบอร์ดที่เรียบง่ายซึ่งได้รับแรงบันดาลใจจาก Supabase UI ที่สร้างด้วย SvelteKit เป็นส่วนหน้าและ Supabase เป็นแบ็กเอนด์

การปฏิเสธความรับผิด: โครงการนี้ยังไม่พร้อมสำหรับการผลิต การเข้าถึงตามบทบาทยังไม่ได้รับการทดสอบอย่างสมบูรณ์ ใช้ความเสี่ยงของคุณเอง

สาธิต

ลองใช้บทบาทการเข้าถึงและมุมมองที่แตกต่างกันที่นี่

คุณสมบัติ

  • UI ที่ได้รับแรงบันดาลใจจาก Supabase
  • หลายองค์กร
  • การเข้าถึงตามบทบาท
  • การสร้างและการลบผู้ใช้ใน UI แดชบอร์ด
  • มุมมองสาธิตตารางและแผนภูมิ
  • โหมดสาธิต (แสดงคำแนะนำและปิดใช้งานการอัพเดตฐานข้อมูล)

เทคโนโลยี

  • Svelte และ SvelteKit เป็นเฟรมเวิร์กแอปพลิเคชัน
  • Supabase เป็นฐานข้อมูลและแบ็กเอนด์
  • TailwindCSS เป็นเฟรมเวิร์ก CSS
  • DaisyUI เป็นไลบรารีคอมโพเนนต์ Tailwind CSS
  • Supabase Auth Helpers เป็นยูทิลิตี้ Auth สำหรับการทำงานกับ Supabase
  • การอ้างสิทธิ์แบบกำหนดเองของ Supabase สำหรับการเข้าถึงหลายองค์กรและตามบทบาท
  • Charts.js และ svelte-chartjs สำหรับแผนภูมิ
  • ไอคอนขนนกและไอคอนขนนกขนาดเล็กสำหรับไอคอน
  • สปินเนอร์โหลดแบบ svelte สำหรับการโหลดสปินเนอร์
  • Vercel เป็นแพลตฟอร์มการปรับใช้

สิ่งที่ต้องทำ

  • ปรับปรุงเอกสารการพัฒนา
  • แก้ไขปัญหา TypeScript
  • เพิ่มมุมมองแผนภูมิเพิ่มเติม
  • อัปเดต supabase-js เวอร์ชัน 2.0
  • โปรไฟล์ผู้ใช้
  • โหมดแสง/มืด
  • ปรับปรุงการนำทางบนมือถือ
  • กปภ

การติดตั้ง

ตั้งค่า Supabase

สร้างโปรเจ็กต์ใหม่ที่ supabase.com และไปที่การตั้งค่า -> API เพื่อตรวจสอบ URL โปรเจ็กต์และคีย์ API ของคุณ

โคลน repo 

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 Editor

ติดตั้งและเรียกใช้ 

npm install

หากต้องการเริ่มต้นในโหมดการพัฒนา: 

npm run dev

หากต้องการสร้างและเริ่มต้นในโหมดการใช้งานจริง: 

npm run build
npm run preview

ปรับใช้

หากต้องการปรับใช้กับ Vercel โปรดทำตามคำแนะนำที่นี่

การพัฒนา

ค้นหารายละเอียดการพัฒนาเพิ่มเติมได้ที่นี่

มีส่วนช่วย

รู้สึกอิสระที่จะมีส่วนร่วม ยินดีรับประเด็นและคำขอดึง

ใบอนุญาต

เอ็มไอที

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด