How to Create a CRUD Application with Svelte?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอป crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ svelte เราจะใช้ back4app เป็นแพลตฟอร์มแบ็กเอนด์ ซึ่งมีแบ็กเอนด์ที่มีโค้ดต่ำที่แข็งแกร่งในการจัดการข้อมูลของแอปของคุณ คู่มือนี้อธิบายวิธีการตั้งค่าโปรเจกต์ back4app ออกแบบสคีมาข้อมูลที่หลากหลาย และดำเนินการ crud ภายในแอปพลิเคชัน svelte ในตอนแรก คุณจะสร้างโปรเจกต์ back4app ที่ชื่อว่า basic crud app svelte โปรเจกต์นี้เป็นพื้นฐานของการตั้งค่าแบ็กเอนด์ของคุณ ซึ่งคุณจะกำหนดสคีมาข้อมูลของคุณด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ที่รวมอยู่ใน back4app ถัดไป คุณจะสำรวจ back4app admin app—อินเทอร์เฟซที่ใช้งานง่ายสำหรับการจัดการข้อมูล—ที่ช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย สุดท้าย คุณจะเชื่อมต่อแอป svelte ของคุณกับ back4app โดยใช้ parse javascript sdk หรือการเรียก api rest/graphql โดยตรง ในขณะที่มั่นใจว่าการจัดการข้อมูลมีความปลอดภัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอป svelte ที่ทำงานได้อย่างสมบูรณ์ซึ่งดำเนินการงาน crud พื้นฐานพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัย สิ่งที่คุณจะได้เรียนรู้ วิธีการตั้งค่าแอป crud ที่ใช้ svelte พร้อมแบ็กเอนด์ที่ยืดหยุ่น วิธีการจัดระเบียบแบ็กเอนด์ของคุณและเชื่อมต่อกับแอป svelte ของคุณ วิธีการใช้ back4app admin app สำหรับการดำเนินการข้อมูลที่ราบรื่น กลยุทธ์ในการปรับใช้แอป svelte ของคุณ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ใช้งานอยู่ ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อขอคำแนะนำ การตั้งค่าการพัฒนา svelte คุณสามารถใช้โปรแกรมแก้ไขโค้ดเช่น vscode และตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js ความคุ้นเคยพื้นฐานกับ svelte, javascript, และ rest apis ตรวจสอบ เอกสาร svelte https //svelte dev/docs หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ของคุณ การเปิดโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ กดปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app svelte และทำตามคำแนะนำบนหน้าจอเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างโปรเจกต์ของคุณ คุณจะเห็นมันบนแดชบอร์ดของคุณ ซึ่งทำหน้าที่เป็นพื้นฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาข้อมูล การจัดโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณต้องกำหนดคอลเลกชันบางอย่างในโปรเจกต์ back4app ของคุณ ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันและฟิลด์หลักที่จำเป็นในการสนับสนุนการดำเนินการ crud ของ svelte ของคุณ 1\ คอลเลกชันรายการ การรวบรวมนี้เก็บข้อมูลสำหรับแต่ละรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งสุดท้ายของรายการ 2\ การรวบรวมผู้ใช้ การรวบรวมนี้จัดการข้อมูลประจำตัวผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับแต่ละผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้และกำหนดฟิลด์ได้โดยตรงจากแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์โดยการเลือกประเภทที่เหมาะสม ตั้งชื่อฟิลด์ กำหนดค่าเริ่มต้น และทำเครื่องหมายว่าจำเป็นต้องใช้ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema อย่างรวดเร็ว ai agent ที่รวมอยู่ใน back4app สามารถตั้งค่า schema ข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายที่ง่าย เครื่องมือนี้ช่วยให้กระบวนการตั้งค่าราบรื่นและมั่นใจว่า schema ของคุณได้รับการปรับให้เหมาะสมสำหรับการดำเนินการ crud วิธีการใช้ ai agent เปิด ai agent ในการตั้งค่าโปรเจกต์ของคุณบนแดชบอร์ด back4app ให้ค้นหา ai agent ระบุความต้องการของ schema ของคุณ ให้คำแนะนำที่ชัดเจนซึ่งระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตรวจสอบ schema ที่เสนอและยืนยันเพื่อใช้มัน ตัวอย่างคำแนะนำ create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีนี้ช่วยประหยัดเวลาและทำให้แน่ใจว่า schema ของแบ็กเอนด์ของคุณตรงตามความต้องการของแอปของคุณอย่างสมบูรณ์ ขั้นตอนที่ 3 – การจัดการข้อมูลด้วยแอปผู้ดูแลระบบ ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีสภาพแวดล้อมที่ไม่ต้องเขียนโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์ของคุณ ด้วยอินเทอร์เฟซแบบลากและวาง คุณสามารถทำการดำเนินการต่างๆ เช่น การเพิ่ม แก้ไข และลบระเบียนได้อย่างง่ายดาย การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าบัญชีผู้ดูแลระบบของคุณ โดยทำตามคำแนะนำเพื่อสร้างข้อมูลประจำตัวของคุณ กระบวนการนี้จะตั้งค่าบทบาท (เช่น b4aadminuser ) และการกำหนดค่าระบบอื่นๆ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของโปรเจกต์ของคุณอย่างมีประสิทธิภาพ แดชบอร์ดแอปผู้ดูแลระบบ วิธีการใช้แอปผู้ดูแลระบบ เพิ่มบันทึกใหม่ ใช้ฟีเจอร์ “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อแนะนำข้อมูลใหม่ ตรวจสอบหรือแก้ไขบันทึก คลิกที่บันทึกเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ต่างๆ ลบบันทึก ลบข้อมูลที่ล้าสมัยหรือไม่จำเป็น อินเทอร์เฟซที่ใช้งานง่ายนี้ทำให้การจัดการข้อมูลเบื้องหลังของคุณเป็นเรื่องง่ายและมีประสิทธิภาพ ขั้นตอนที่ 4 – เชื่อมต่อแอป svelte ของคุณกับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าแล้ว ถึงเวลาที่จะเชื่อมโยงแอปพลิเคชัน svelte ของคุณกับ back4app ตัวเลือก a ใช้ parse javascript sdk ติดตั้ง sdk ใช้ npm หรือ yarn เพื่อติดตั้ง parse javascript sdk npm install parse เริ่มต้น parse ในแอป svelte ของคุณ ในไฟล์ javascript หลักของคุณ (เช่น, src/main js ) ให้เริ่มต้น parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // รหัสการเริ่มต้นแอป svelte ของคุณตามมา ดำเนินการฟังก์ชัน crud สร้างโมดูล (เช่น, src/services/items js ) เพื่อจัดการการดำเนินการ crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error fetching items ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("สร้างรายการสำเร็จ!"); } catch (error) { console error("เกิดข้อผิดพลาดในการสร้างรายการ ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("อัปเดตรายการสำเร็จ!"); } catch (error) { console error("เกิดข้อผิดพลาดในการอัปเดตรายการ ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("ลบรายการสำเร็จ!"); } catch (error) { console error("เกิดข้อผิดพลาดในการลบรายการ ", error); } } ตัวเลือก b การใช้ rest/graphql apis หาก parse sdk ไม่เหมาะสมกับกรณีการใช้งานของคุณ คุณสามารถเรียกใช้ rest หรือ graphql endpoints ของ back4app ได้โดยตรง ตัวอย่างเช่น เพื่อดึงรายการผ่าน rest export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } รวมการเรียก api เหล่านี้ภายในส่วนประกอบ svelte ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การรักษาความปลอดภัยของ backend ของคุณ การใช้ access control lists (acls) เพิ่มความปลอดภัยให้กับข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่มองเห็นได้เฉพาะเจ้าของ import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) กำหนดค่า clps โดยตรงในแดชบอร์ด back4app ของคุณเพื่อจำกัดการเข้าถึงเพื่อให้ผู้ใช้ที่ได้รับการตรวจสอบเท่านั้นที่สามารถโต้ตอบกับคอลเลกชันบางอย่างได้ ขั้นตอนที่ 6 – การนำการตรวจสอบสิทธิ์ผู้ใช้ไปใช้ใน svelte การตั้งค่าบัญชีผู้ใช้ back4app ใช้ประโยชน์จากคอลเลกชันผู้ใช้ที่สร้างขึ้นใน parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอป svelte ของคุณ ให้นำฟังก์ชันการลงทะเบียนและการเข้าสู่ระบบไปใช้คล้ายกับตัวอย่างด้านล่าง import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } วิธีการนี้สามารถขยายเพื่อจัดการเซสชัน การรีเซ็ตรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์เพิ่มเติมได้ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน svelte ของคุณ back4app ทำให้กระบวนการปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอป svelte ของคุณโดยใช้หลายวิธี รวมถึงการสร้าง docker 7 1 สร้างแอปพลิเคชัน svelte ของคุณ คอมไพล์แอปของคุณ รันคำสั่งสร้าง svelte ของคุณ โดยปกติคือ npm run build ตรวจสอบการสร้าง ตรวจสอบให้แน่ใจว่าไฟล์ที่สร้างขึ้น (โดยปกติอยู่ใน public หรือ build โฟลเดอร์) รวมทรัพยากรที่จำเป็นทั้งหมด 7 2 ตัวอย่างโครงสร้างโปรเจกต์ โครงสร้างโปรเจกต์ svelte ที่เป็นมาตรฐานอาจมีลักษณะดังนี้ basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 การสร้าง docker สำหรับแอป svelte ของคุณ หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้สร้าง dockerfile ในรากของโปรเจกต์ของคุณ \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมโยงที่เก็บ github ของคุณ โฮสต์โปรเจกต์ svelte ของคุณบน github ตั้งค่าการปรับใช้ใน back4app ในแดชบอร์ด back4app ให้เลือก web deployment ตัวเลือก เชื่อมต่อที่เก็บของคุณ (เช่น basic crud app svelte ) และเลือกสาขาที่คุณต้องการ กำหนดการตั้งค่าการสร้าง ระบุคำสั่งการสร้างของคุณ (เช่น npm run build ) และชี้ไปที่ไดเรกทอรีผลลัพธ์การสร้าง ปรับใช้แอปพลิเคชันของคุณ คลิก deploy และติดตามบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – สรุปและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ svelte ซึ่งเชื่อมต่อกับ back4app คุณได้ตั้งโปรเจกต์ชื่อ basic crud app svelte , กำหนดการจัดเก็บสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน back4app admin app จากนั้นคุณได้รวมส่วนหน้า svelte ของคุณโดยใช้ parse javascript sdk (หรือ rest/graphql) และเพิ่มมาตรการความปลอดภัยที่แข็งแกร่ง ต่อไปจะทำอย่างไร? ขยายฟังก์ชันการทำงาน เพิ่มฟีเจอร์เช่นการค้นหาขั้นสูง, มุมมองรายละเอียด, หรือการอัปเดตแบบเรียลไทม์ ปรับปรุงตรรกะด้านหลัง ทดลองใช้ฟังก์ชันคลาวด์, การรวม api ของบุคคลที่สาม, หรือการควบคุมการเข้าถึงตามบทบาท ลึกซึ้งในการเรียนรู้ของคุณ สำรวจบทเรียนเพิ่มเติมและ เอกสาร back4app https //www back4app com/docs เพื่อเพิ่มประสิทธิภาพแอปของคุณ ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างแอปพลิเคชัน svelte crud ของคุณ!