How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

ภาพรวม ในคู่มือนี้ คุณจะสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ง่ายด้วย sveltekit เราจะแสดงวิธีการดำเนินการข้อมูลมาตรฐานและจัดการแบ็กเอนด์ของเว็บแอปของคุณด้วย back4app คู่มือนี้เริ่มต้นด้วยการตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app sveltekit , ซึ่งทำหน้าที่เป็นแบ็กเอนด์ที่แข็งแกร่งของคุณ จากนั้นคุณจะออกแบบสคีมาฐานข้อมูลที่ปรับเปลี่ยนได้โดยการสร้างคอลเลกชันและฟิลด์ด้วยตนเอง หรือโดยการใช้ back4app ai agent ซึ่งจะทำให้แน่ใจว่าโมเดลข้อมูลของคุณได้รับการปรับให้เหมาะสมสำหรับการดำเนินการ crud ที่มีประสิทธิภาพ ถัดไป คุณจะใช้ back4app admin app—เครื่องมือที่ไม่ต้องเขียนโค้ดและลากและวาง—เพื่อจัดการคอลเลกชันของคุณ ทำให้กระบวนการจัดการข้อมูลของคุณมีความคล่องตัว สุดท้าย คุณจะรวมส่วนหน้า sveltekit ของคุณกับ back4app โดยใช้ rest apis มาตรการความปลอดภัยขั้นสูง เช่น การควบคุมการเข้าถึง จะถูกกำหนดค่าเพื่อปกป้องแบ็กเอนด์ของคุณ เมื่อสิ้นสุดคู่มือนี้ คุณจะมีเว็บแอปพลิเคชันที่พร้อมสำหรับการผลิตซึ่งรองรับการดำเนินการ crud พร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการอัปเดตข้อมูลแบบไดนามิก จุดสำคัญ เชี่ยวชาญในการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วยแบ็กเอนด์ที่เชื่อถือได้ เข้าใจวิธีการจัดโครงสร้างฐานข้อมูลที่สามารถขยายได้และเชื่อมต่อกับส่วนหน้า sveltekit เรียนรู้วิธีการใช้เครื่องมือบริหารจัดการแบบภาพ (back4app admin app) เพื่อดำเนินการข้อมูลได้อย่างราบรื่น สำรวจกลยุทธ์การปรับใช้ รวมถึงการใช้ docker เพื่อเปิดตัวแอปพลิเคชันของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโครงการใหม่พร้อมใช้งาน ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ สภาพแวดล้อมการพัฒนา sveltekit ติดตั้ง sveltekit ตาม เอกสารอย่างเป็นทางการ https //kit svelte dev/docs ความเข้าใจพื้นฐานเกี่ยวกับ javascript, sveltekit, และ rest apis ดูที่ เอกสาร sveltekit https //kit svelte dev/docs สำหรับรายละเอียดเพิ่มเติม ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การตั้งค่าโครงการ back4app ใหม่ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ คลิกที่ปุ่ม “new app” บนแดชบอร์ดของคุณ กรอกชื่อโปรเจกต์ basic crud app sveltekit และทำตามคำแนะนำบนหน้าจอเพื่อสร้างโปรเจกต์ของคุณ สร้างโปรเจกต์ใหม่ หลังจากสร้างเสร็จ โปรเจกต์ใหม่ของคุณจะปรากฏบนแดชบอร์ดของคุณ ซึ่งให้แพลตฟอร์มที่เสถียรสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูล การกำหนดรูปแบบข้อมูลของคุณ สำหรับแอป crud ของเรา เราจำเป็นต้องสร้างหลายคอลเลกชัน นี่คือตัวอย่างที่แสดงคอลเลกชันที่จำเป็นและฟิลด์ของพวกเขาเพื่อกำหนดสคีมาฐานข้อมูลของคุณสำหรับการดำเนินการ crud 1\ การรวบรวมรายการ การรวบรวมนี้มีรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง ภาพรวมสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้เก็บข้อมูลรับรองผู้ใช้และรายละเอียดโปรไฟล์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลผู้ใช้ที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตโปรไฟล์ล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและเพิ่มคอลัมน์ที่เกี่ยวข้อง สร้างคลาสใหม่ กำหนดแต่ละฟิลด์โดยการเลือกประเภทข้อมูลที่เหมาะสม ตั้งชื่อมัน ตั้งค่าเริ่มต้น และทำเครื่องหมายว่าจำเป็นหากจำเป็น สร้างคอลัมน์ การสร้างสคีม่าอัตโนมัติด้วย back4app ai agent back4app ai agent ช่วยทำให้กระบวนการตั้งค่าสคีม่าง่ายขึ้นโดยตรงจากแดชบอร์ดของคุณ โดยการป้อนข้อความที่อธิบายคอลเลกชันและฟิลด์ของคุณ คุณสามารถสร้างโครงสร้างฐานข้อมูลของคุณโดยอัตโนมัติ วิธีการใช้ ai agent เข้าถึง ai agent เปิดแดชบอร์ด back4app ของคุณและไปที่ ai agent ภายในการตั้งค่าโปรเจกต์ของคุณ อธิบายโมเดลของคุณ วางข้อความที่ละเอียดซึ่งอธิบายคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน หลังจากส่งแล้ว ให้ตรวจสอบคอลเลกชันและการกำหนดฟิลด์ที่สร้างขึ้น จากนั้นนำไปใช้กับโปรเจกต์ของคุณ ตัวอย่างข้อความ create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) วิธีการนี้ช่วยประหยัดเวลาและทำให้แน่ใจว่าสคีม่าของคุณมีความสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและดำเนินการ crud แนะนำแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่มองเห็นได้เพื่อจัดการแบ็กเอนด์ของคุณได้อย่างง่ายดาย ด้วยฟีเจอร์การลากและวาง การดำเนินการ crud จะกลายเป็นเรื่องง่าย เปิดใช้งานแอปผู้ดูแลระบบ ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” จากนั้นคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบ สร้างผู้ใช้ผู้ดูแลระบบเริ่มต้นเพื่อกำหนดบทบาท (เช่น, b4aadminuser ) และการรวบรวมระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบคุณสามารถ เพิ่มบันทึก คลิกปุ่ม “เพิ่มบันทึก” ในการรวบรวมใด ๆ (เช่น, รายการ) เพื่อสร้างรายการใหม่ ดูและแก้ไขบันทึก เลือกบันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบบันทึก ใช้ตัวเลือกลบเพื่อลบรายการที่ไม่ต้องการอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้กระบวนการจัดการข้อมูลของคุณมีประสิทธิภาพมากขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ sveltekit กับ back4app เมื่อคุณกำหนดค่าด้านหลังผ่านแอปผู้ดูแลระบบแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า sveltekit ของคุณกับ back4app การใช้ rest apis ใน sveltekit คุณจะดำเนินการ crud โดยใช้การเรียก rest api ตัวอย่างการดึงข้อมูล สร้าง endpoint หรือ component ของ sveltekit ที่ดึงรายการจาก back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> รวมการเรียก api ที่คล้ายกันภายใน component ของ sveltekit ของคุณสำหรับการสร้าง, อัปเดต, และลบข้อมูล ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การกำหนดรายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acl สำหรับแต่ละวัตถุ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } การตั้งค่าการอนุญาตระดับคลาส (clps) ในแดชบอร์ด back4app ให้กำหนด clps สำหรับแต่ละคอลเลกชันเพื่อให้ผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การจัดการบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการตรวจสอบสิทธิ์ ในแอป sveltekit ของคุณ ให้ตั้งค่าฟอร์มการลงทะเบียนและการเข้าสู่ระบบที่โต้ตอบกับ back4app ผ่านการเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> วิธีการที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า sveltekit ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์ส่วนหน้า sveltekit ของคุณโดยการเชื่อมโยงกับที่เก็บ github ส่วนนี้จะครอบคลุมวิธีการสร้างไฟล์ผลิตภัณฑ์ของคุณ ผลักดันโค้ดต้นฉบับของคุณ และปรับใช้เว็บไซต์ของคุณ 7 1 การสร้างการสร้างผลิตภัณฑ์ เปิดเทอร์มินัลของคุณในไดเรกทอรีโปรเจกต์ รันคำสั่งสร้าง npm run build นี่จะสร้าง build (หรือ output ) โฟลเดอร์ที่มีทรัพยากรสถิตที่ปรับให้เหมาะสมแล้ว ตรวจสอบการสร้าง ตรวจสอบว่าโฟลเดอร์ build มี index html และไดเรกทอรีทรัพยากรที่จำเป็นทั้งหมด 7 2 การจัดโครงสร้างและอัปโหลดโค้ดของคุณ ที่เก็บของคุณควรมีโค้ดต้นฉบับ sveltekit ที่สมบูรณ์ โครงสร้างทั่วไปอาจเป็น basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md ไฟล์ api ตัวอย่าง src/lib/api js export const fetchitems = async () => { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await res json(); return data results; }; การส่งข้อมูลไปยัง github เริ่มต้น git (ถ้ายังไม่ได้ทำ) git init เพิ่มไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกสำหรับ sveltekit frontend" สร้างที่เก็บ github ตั้งชื่อมัน เช่น basic crud app sveltekit ส่งโค้ดของคุณ git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 การเชื่อมโยงที่เก็บ github ของคุณกับการปรับใช้เว็บ เปิดการปรับใช้เว็บ เข้าสู่ระบบ back4app ไปที่โปรเจกต์ของคุณ (basic crud app sveltekit) และเลือก ตัวเลือกการปรับใช้เว็บ เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อเชื่อมโยงบัญชี github ของคุณเพื่อให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บ sveltekit ของคุณ (เช่น basic crud app sveltekit ) และสาขาที่มีโค้ดของคุณ (ปกติคือ main ) 7 4 การตั้งค่าการปรับใช้ของคุณ โปรดตั้งค่าข้อมูลเพิ่มเติมเหล่านี้ คำสั่งสร้าง หากไม่มีโฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่ง (เช่น npm run build ) ไดเรกทอรีเอาต์พุต ระบุโฟลเดอร์ (โดยปกติคือ build หรือ output ) ที่เก็บไฟล์สถิตของคุณ ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรที่จำเป็น เช่น คีย์ api 7 5 การทำให้แอปพลิเคชัน sveltekit ของคุณเป็น docker หาก docker เป็นตัวเลือกในการปรับใช้ของคุณ ให้รวม dockerfile ในที่เก็บของคุณ \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] กำหนดค่าการปรับใช้เว็บเพื่อใช้ docker หากต้องการ 7 6 การปรับใช้แอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ เมื่อการตั้งค่าเสร็จสมบูรณ์ ให้กดปุ่ม ปรับใช้ ติดตามการปรับใช้ back4app จะดึงโค้ดของคุณ รันการสร้าง และปรับใช้แอปของคุณในคอนเทนเนอร์ รับ url ของคุณ เมื่อการปรับใช้สำเร็จ back4app จะให้ url สำหรับแอป sveltekit ที่โฮสต์ของคุณ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url เปิด url ที่ให้ไว้ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ยืนยันว่าแอปของคุณโหลดได้อย่างถูกต้อง เส้นทางทำงาน และทรัพยากรทั้งหมดถูกให้บริการอย่างถูกต้อง ดีบักหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์เพื่อตรวจสอบข้อผิดพลาด และตรวจสอบบันทึกของ back4app เพื่อการแก้ไขปัญหา ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดีในการสร้างแอปพลิเคชัน crud ที่สมบูรณ์ด้วย sveltekit และ back4app! คุณได้ตั้งค่าโครงการที่เรียกว่า basic crud app sveltekit , สร้างคอลเลกชันที่ละเอียดสำหรับ items และ users และจัดการแบ็กเอนด์ของคุณผ่าน admin app นอกจากนี้ คุณได้รวมหน้า sveltekit ของคุณผ่าน rest apis และใช้การควบคุมการเข้าถึงที่เข้มงวด การปรับปรุงในอนาคต ขยายหน้าเว็บของคุณ ปรับปรุงแอป sveltekit ของคุณด้วยมุมมองที่ละเอียด ความสามารถในการค้นหา และการแจ้งเตือนแบบเรียลไทม์ เพิ่มฟีเจอร์ขั้นสูง ดำเนินการตรรกะฝั่งเซิร์ฟเวอร์ (เช่น cloud functions) รวม api ของบุคคลที่สาม หรือเปิดใช้งานการอนุญาตตามบทบาท เพิ่มพูนความรู้ของคุณ เยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจบทเรียนเพิ่มเติมเพื่อปรับปรุงประสิทธิภาพและการรวมที่กำหนดเอง บทเรียนนี้ได้มอบทักษะที่จำเป็นในการสร้างแบ็กเอนด์ crud ที่สามารถปรับขนาดได้สำหรับแอปพลิเคชัน sveltekit ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ดและสร้างสรรค์!