วิธีสร้าง Frontend ด้วย Sveltekit และเชื่อมต่อกับ Backend?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชัน to do list โดยใช้ sveltekit และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการโดย back4app คู่มือนี้ออกแบบมาสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud ที่สำคัญ (สร้าง, อ่าน, อัปเดต, ลบ) และสร้างอินเทอร์เฟซที่มีพลศาสตร์และตอบสนองได้โดยใช้ sveltekit เมื่อสิ้นสุดบทแนะนำนี้ แอปพลิเคชันของคุณจะทำงานร่วมกับแบ็กเอนด์ที่จัดการการจัดเก็บข้อมูล การตรวจสอบสิทธิ์ และอื่น ๆ ได้อย่างราบรื่น การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจซับซ้อนเนื่องจากการกำหนดค่าของแบ็กเอนด์และการจัดการฐานข้อมูล เพื่อทำให้การทำงานของคุณง่ายขึ้น เราใช้ back4app ซึ่งเป็นบริการแบ็กเอนด์ที่มีความแข็งแกร่ง เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนหน้า sveltekit ที่ยอดเยี่ยม back4app ให้บริการฐานข้อมูล nosql ที่จัดการอย่างเต็มที่ การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะที่กำหนดเอง และ sdk สำหรับการรวมเข้าที่ราบรื่น สิ่งนี้ช่วยให้คุณสร้างและปรับใช้แอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโครงการ sveltekit สมัยใหม่โดยใช้ vite รวมบริการแบ็กเอนด์เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud ที่สำคัญสำหรับ to do list ที่มีพลศาสตร์ ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบโดยการรัน node v และ npm v ความรู้พื้นฐานเกี่ยวกับ sveltekit , รวมถึงการจัดการเส้นทาง ฟังก์ชันโหลด และตัวแปรเชิงปฏิกิริยา บัญชี back4app เพื่อจัดการบริการด้านหลังของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ทำ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มสร้างโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มโปรเจกต์ sveltekit ใหม่ ตรวจสอบให้แน่ใจว่าคุณมี node js (เวอร์ชัน lts) ติดตั้ง หากไม่ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ สร้างโปรเจกต์ sveltekit ของคุณโดยการรัน npx sv create todo app เมื่อถูกถาม ให้เลือกตัวเลือก sveltekit ที่เหมาะสมที่สุดกับโปรเจกต์ของคุณ (เช่น โปรเจกต์โครงกระดูก, typescript หากต้องการ) นำทางไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app เริ่มเซิร์ฟเวอร์พัฒนาเพื่อตรวจสอบการตั้งค่า npm run dev แอป sveltekit ของคุณควรเปิดในเบราว์เซอร์ของคุณแล้ว เมื่อส่วนหน้าเสร็จเรียบร้อย ให้ดำเนินการสร้างแบ็กเอนด์ของคุณบน back4app การสร้างแบ็กเอนด์ todo back4app เสนอการบริการแบ็คเอนด์ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse มันรวมถึงฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าแบ็คเอนด์ของคุณ เข้าสู่ระบบ ไปยัง แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น, todoapp ) และเลือก nodejs/parse เป็นประเภทแบ็คเอนด์ ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และกำหนดค่าให้สามารถอ่านและเขียนได้สาธารณะ (คุณสามารถปรับปรุงสิทธิ์เหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดเกี่ยวกับงาน เสร็จสิ้น (boolean) – สถานะการเสร็จสิ้นของงาน วันครบกำหนด (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ sveltekit คุณจะใช้ parse javascript sdk เพื่อเชื่อมต่อแอป sveltekit ของคุณกับแบ็คเอนด์ back4app ติดตั้ง parse sdk npm install parse กำหนดค่า sdk โดยการแก้ไข src/app html หรือสร้างโมดูลเฉพาะ (เช่น, src/lib/parseclient js ) ตัวอย่างเช่น สร้าง src/lib/parseclient js ด้วยโค้ดต่อไปนี้ import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; คุณสามารถนำเข้าโมดูลนี้ในเส้นทางหรือส่วนประกอบของ sveltekit ของคุณเพื่อโต้ตอบกับ back4app การพัฒนา frontend แอปพลิเคชัน sveltekit ของคุณจะประกอบด้วยเส้นทางและส่วนประกอบเพื่อเพิ่ม แสดง อัปเดต และลบงาน ใช้ประโยชน์จากการจัดเส้นทางตามไฟล์และตัวแปรเชิงโต้ตอบของ sveltekit สำหรับการอัปเดตแบบไดนามิก การจัดโครงสร้างส่วนประกอบของคุณ สร้าง src/lib/components โฟลเดอร์เพื่อจัดระเบียบส่วนประกอบของคุณ mkdir p src/lib/components คุณจะสร้างส่วนประกอบต่อไปนี้ taskform svelte – สำหรับการเพิ่มงานใหม่ tasklist svelte – เพื่อแสดงรายการงาน taskitem svelte – เพื่อแสดงงานแต่ละรายการ taskform svelte ส่วนประกอบนี้แสดงแบบฟอร์มที่บันทึกรายละเอียดงานและส่งไปยัง back4app \<script> import { createeventdispatcher } from 'svelte'; import parse from '$lib/parseclient'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('description', description); task set('completed', false); await task save(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte ส่วนประกอบนี้แสดงถึงงานแต่ละงาน โดยมีปุ่มเพื่อสลับสถานะการเสร็จสิ้นหรือเพื่อลบงาน \<script> import parse from '$lib/parseclient'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte ส่วนประกอบนี้จะแสดงงานทั้งหมดโดยการวนซ้ำผ่านอาร์เรย์และเรนเดอร์แต่ละงานโดยใช้ส่วนประกอบ taskitem \<script> import taskitem from '$lib/components/taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} +page svelte (เส้นทางหลัก) ในเส้นทางหลัก sveltekit ของคุณ (เช่น, src/routes/+page svelte ) จัดการสถานะของงานและรวมส่วนประกอบต่างๆ \<script> import { onmount } from 'svelte'; import parse from '$lib/parseclient'; import taskform from '$lib/components/taskform svelte'; import tasklist from '$lib/components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> การจัดรูปแบบแอปพลิเคชัน สร้างสไตล์ชีตทั่วโลก (เช่น, src/app css ) เพื่อเพิ่มการจัดรูปแบบพื้นฐาน container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } นำเข้าสไตล์ชีตนี้ใน src/app html หรือไฟล์เลย์เอาต์หลักของคุณ การปรับใช้ frontend บน back4app web deployment back4app web deployment ให้สภาพแวดล้อมที่มีการบรรจุเพื่อโฮสต์แอปพลิเคชัน sveltekit ของคุณ การกำหนดค่า vite สำหรับการผลิต อัปเดต vite config js ของคุณหากจำเป็นเพื่อกำหนดเส้นทางพื้นฐานสำหรับสภาพแวดล้อมที่มีการบรรจุ import { sveltekit } from '@sveltejs/kit/vite'; import { defineconfig } from 'vite'; export default defineconfig({ plugins \[sveltekit()], base ' /', }); สร้างการสร้างสำหรับการผลิต npm run build การสร้าง dockerfile ก่อนที่คุณจะสามารถทดสอบคอนเทนเนอร์ docker ของคุณในท้องถิ่น คุณต้องติดตั้ง adapter node ซึ่งสร้างไซต์ของคุณสำหรับ node js เพื่อทำเช่นนี้ ให้รันคำสั่งในเทอร์มินัลของคุณ npm i d @sveltejs/adapter node หลังจากติดตั้ง adapter node , เปิดไฟล์ svelte config js และแทนที่โค้ดที่นั่นด้วยบล็อกโค้ดด้านล่าง import adapter from '@sveltejs/adapter node'; / @type {import('@sveltejs/kit') config} / const config = { &#x9;kit { &#x9; // adapter auto only supports some environments, see https //svelte dev/docs/kit/adapter auto for a list &#x9; // if your environment is not supported, or you settled on a specific environment, switch out the adapter &#x9; // see https //svelte dev/docs/kit/adapters for more information about adapters &#x9; adapter adapter() &#x9;} }; export default config; ตอนนี้ สร้าง dockerfile ในรากโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ from node 22 alpine as builder workdir /app copy package json / run npm ci copy run npm run build run npm prune production from node 22 alpine workdir /app copy from=builder /app/build build/ copy from=builder /app/node modules node modules/ copy package json expose 3000 env node env=production cmd \[ "node", "build" ] การทดสอบ docker container ในเครื่อง สร้างภาพ docker ของคุณ docker build t todo frontend รันคอนเทนเนอร์ docker run p 3000 3000 todo frontend เปิด http //localhost 3000 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป sveltekit ของคุณให้บริการอย่างถูกต้อง การปรับใช้ไปยัง back4app เริ่มต้นรีโพซิทอรี git เพิ่มไฟล์โปรเจกต์ของคุณ และทำการ commit git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main เข้าสู่ระบบที่ back4app web deployment https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อโปรเจกต์ของคุณ และเลือกที่เก็บ github ของคุณ อนุญาต back4app และเลือก การปรับใช้ dockerfile ยืนยันการตั้งค่าการสร้างและคลิก "ปรับใช้" เพื่อเริ่มกระบวนการปรับใช้ การติดตามการปรับใช้ของคุณ หลังจากการปรับใช้ ใช้แดชบอร์ด back4app เพื่อ ดูบันทึกสำหรับการดีบัก ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการสร้างใหม่เมื่อมีการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น เข้าถึงแอปพลิเคชันสดของคุณที่ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ การทดสอบและการดีบัก หลังจากการปรับใช้ ให้ยืนยันว่าฟรอนต์เอนด์ sveltekit ของคุณสื่อสารกับแบ็กเอนด์ back4app ได้อย่างถูกต้อง การตรวจสอบ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api การดำเนินการงาน เพิ่ม เสร็จสิ้น และลบงานผ่าน ui และตรวจสอบการอัปเดตใน back4app database browser การจัดการข้อผิดพลาด ตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดและทดสอบกรณีขอบเช่นการส่งงานที่ว่างเปล่า การทดสอบประสิทธิภาพ จำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือในเบราว์เซอร์เพื่อตรวจสอบความตอบสนอง แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ sveltekit เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอที่มีประสิทธิภาพ ใช้การดำเนินการแบบกลุ่มเมื่อจัดการกับงานหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); การค้นหาที่ปรับให้เหมาะสม ดึงข้อมูลเฉพาะฟิลด์ที่จำเป็นเท่านั้น query select('title', 'completed'); การจัดการสิ่งแวดล้อม เก็บกุญแจที่สำคัญในตัวแปรสิ่งแวดล้อม vite parse app id=your app id vite parse js key=your js key ความปลอดภัย ใช้ acls เพื่อจำกัดการเข้าถึง task setacl(new parse acl(parse user current())); การถ่ายโอนภาระงานไปยัง backend ใช้ cloud code สำหรับตรรกะที่ซับซ้อนเพื่อลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบ full stack โดยการสร้างส่วนหน้า sveltekit รวมเข้ากับ back4app’s backend และปรับใช้โดยใช้กระบวนการที่มีการบรรจุ บทแนะนำนี้ได้แนะนำคุณผ่านทุกขั้นตอน—ตั้งแต่การพัฒนาท้องถิ่นไปจนถึงการปรับใช้ในคลาวด์—เพื่อให้แน่ใจว่ามีการโต้ตอบที่ราบรื่นระหว่าง ui ของ sveltekit และบริการ backend มองไปข้างหน้า พิจารณาการปรับปรุงเช่นการอัปเดตแบบเรียลไทม์ การปรับปรุงการตรวจสอบสิทธิ์ และการรวมกับบุคคลที่สาม สำหรับการเรียนรู้เพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน