How to Build a Svelte Frontend and Connect It to a Backend?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการที่ต้องทำโดยใช้ svelte และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการโดย back4app คู่มือนี้ออกแบบมาสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud ที่สำคัญ (สร้าง, อ่าน, อัปเดต, ลบ) และสร้างอินเทอร์เฟซที่ใช้งานง่ายโดยใช้ svelte เมื่อสิ้นสุด คุณจะสามารถทำให้แอปพลิเคชันของคุณทำงานร่วมกับแบ็กเอนด์ที่จัดการการจัดเก็บข้อมูล การตรวจสอบสิทธิ์ และอื่น ๆ ได้อย่างราบรื่น การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจซับซ้อนเนื่องจากการกำหนดค่าของแบ็กเอนด์และการจัดการฐานข้อมูล เพื่อทำให้การทำงานของคุณง่ายขึ้น เราใช้ back4app—บริการแบ็กเอนด์ที่แข็งแกร่ง backend as a service —เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนหน้าที่มีพลศาสตร์ด้วย svelte back4app ให้บริการฐานข้อมูล nosql ที่จัดการอย่างเต็มที่ การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะที่กำหนดเอง และ sdk สำหรับการรวมที่ราบรื่น สิ่งนี้ช่วยให้คุณสามารถปรับใช้แอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโครงการ svelte สมัยใหม่ด้วย vite รวมบริการแบ็กเอนด์เข้ากับแอปของคุณเพื่อจัดการข้อมูล ดำเนินการ crud ที่สำคัญสำหรับ รายการที่ต้องทำ ที่มีพลศาสตร์ ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ svelte , รวมถึงคอมโพเนนต์ ตัวแปรเชิงปฏิกิริยา และการจัดการเหตุการณ์ บัญชี back4app เพื่อจัดการบริการแบ็คเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่มีบัญชี เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มสร้างโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มโปรเจกต์ svelte ใหม่โดยใช้ vite ตรวจสอบให้แน่ใจว่าคุณมี node js (เวอร์ชัน lts) ติดตั้ง หากไม่ ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ สร้างโปรเจกต์ svelte ของคุณโดยการรัน npm create vite\@latest todo app template svelte เปลี่ยนไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app ติดตั้ง dependencies ที่จำเป็น npm install เริ่มเซิร์ฟเวอร์พัฒนาเพื่อตรวจสอบการตั้งค่า npm run dev เปิด url ที่ให้มาในเบราว์เซอร์ของคุณเพื่อดูแอป svelte ของคุณทำงานอยู่ เมื่อส่วนหน้าเสร็จแล้ว ให้ดำเนินการสร้างส่วนหลังของคุณบน back4app การสร้าง todo backend back4app มีบริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse มันรวมถึงฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างโดยอัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าหลังบ้านของคุณ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น, todoapp ) และเลือก nodejs/parse เป็นประเภท backend ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตให้สามารถอ่านและเขียนสาธารณะ (คุณสามารถปรับปรุงสิ่งเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดเกี่ยวกับงาน เสร็จสิ้น (boolean) – สถานะการเสร็จสิ้นของงาน วันครบกำหนด (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ svelte ในการเชื่อมต่อแอป svelte ของคุณกับ back4app คุณจะใช้ parse javascript sdk ติดตั้ง parse sdk npm install parse กำหนดค่า sdk โดยการแก้ไข src/main js ไฟล์ นำเข้า sdk และเริ่มต้นด้วย application id และ javascript key จาก back4app dashboard (ค้นหาได้ที่ app settings > security & keys ) import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; เมื่อเชื่อมต่อกับแบ็กเอนด์แล้ว คุณสามารถสร้างอินเทอร์เฟซ to do list และดำเนินการ crud ได้แล้ว การพัฒนา frontend แอปพลิเคชัน svelte ของคุณจะประกอบด้วยคอมโพเนนต์ที่ให้คุณเพิ่ม แสดง อัปเดต และลบงาน คุณจะใช้ความสามารถในการตอบสนองของ svelte สำหรับการอัปเดตแบบไดนามิก การจัดโครงสร้างคอมโพเนนต์ของคุณ สร้าง components โฟลเดอร์ภายใน src เพื่อจัดระเบียบคอมโพเนนต์ svelte ของคุณ mkdir src/components คุณจะสร้างส่วนประกอบต่อไปนี้ taskform svelte – สำหรับเพิ่มงานใหม่ tasklist svelte – เพื่อแสดงรายการงาน taskitem svelte – เพื่อแทนที่งานแต่ละงาน taskform svelte ส่วนประกอบนี้แสดงแบบฟอร์มที่บันทึกรายละเอียดของงานและส่งไปยัง back4app \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; 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 'parse/dist/parse min js'; 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 ' /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} app svelte ในคอมโพเนนต์หลักของคุณ จัดการสถานะของแอปพลิเคชันและรวมคอมโพเนนต์งานของคุณเข้าด้วยกัน \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /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/global 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/main js import ' /global css'; การปรับใช้ frontend บน back4app web deployment back4app web deployment มีสภาพแวดล้อมที่บรรจุในคอนเทนเนอร์เพื่อโฮสต์แอปพลิเคชัน svelte ของคุณ การกำหนดค่า vite สำหรับการผลิต ปรับแต่ง vite config js หากจำเป็นเพื่อกำหนดเส้นทางพื้นฐานให้ถูกต้องสำหรับสภาพแวดล้อมที่บรรจุในคอนเทนเนอร์ import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); สร้างการสร้างสำหรับการผลิต npm run build การสร้าง dockerfile สร้าง dockerfile ในไดเรกทอรีหลักด้วยเนื้อหาดังต่อไปนี้ \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] การทดสอบ docker container ในเครื่อง สร้างภาพ docker ของคุณ docker build t todo frontend รันคอนเทนเนอร์ docker run p 8080 80 todo frontend เปิด http //localhost 8080 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป svelte ของคุณให้บริการอย่างถูกต้อง การปรับใช้ไปยัง back4app เริ่มต้นรีโพซิทอรี git เพิ่มไฟล์โปรเจกต์ของคุณและทำการคอมมิต 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/ การทดสอบและการดีบัก หลังจากการปรับใช้ ยืนยันว่าฟรอนต์เอนด์ svelte ของคุณสามารถสื่อสารกับแบ็กเอนด์ back4app ได้อย่างถูกต้อง การตรวจสอบ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api การดำเนินการงาน เพิ่ม เสร็จสิ้น และลบงานผ่าน ui และตรวจสอบการอัปเดตใน back4app database browser การจัดการข้อผิดพลาด ตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดและทดสอบกรณีขอบเช่นการส่งงานที่ว่างเปล่า การทดสอบประสิทธิภาพ จำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือในเบราว์เซอร์เพื่อตรวจสอบความตอบสนอง แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ svelte เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอที่มีประสิทธิภาพ ใช้การดำเนินการแบบกลุ่มเมื่อจัดการกับงานหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); การค้นหาที่ปรับให้เหมาะสม ดึงเฉพาะฟิลด์ที่จำเป็น query select('title', 'completed'); ตัวแปรสภาพแวดล้อม เก็บกุญแจที่ละเอียดอ่อนใน env ไฟล์ 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 โดยการสร้างส่วนหน้า svelte รวมเข้ากับแบ็กเอนด์ของ back4app และปรับใช้โดยใช้เวิร์กโฟลว์ที่บรรจุในคอนเทนเนอร์ บทเรียนนี้ได้พาคุณผ่านทุกขั้นตอน—จากการพัฒนาท้องถิ่นไปจนถึงการปรับใช้ในคลาวด์—เพื่อให้แน่ใจว่ามีการโต้ตอบที่ราบรื่นระหว่าง ui svelte ของคุณและบริการแบ็กเอนด์ มองไปข้างหน้า พิจารณาการปรับปรุงแอปของคุณด้วยการอัปเดตแบบเรียลไทม์ การตรวจสอบสิทธิ์ที่ดีขึ้น และการรวมกับบุคคลที่สาม สำหรับการเรียนรู้เพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน