วิธีสร้างส่วนหน้า Preact และเชื่อมต่อกับส่วนหลัง?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ preact และเชื่อมต่อกับแบ็คเอนด์ที่มีความแข็งแกร่งซึ่งจัดเตรียมโดย back4app คู่มือนี้เหมาะสำหรับการเริ่มต้นเพราะครอบคลุมการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่สำคัญและพาคุณไปสร้าง ui ที่สะอาดและใช้งานได้ เมื่อสิ้นสุด คุณจะมีแอปที่ทำงานได้เต็มรูปแบบซึ่งแสดงให้คุณเห็นวิธีการรวมแบ็คเอนด์ที่จัดการในขณะที่ใช้ preact สำหรับส่วนหน้าที่เบาและรวดเร็ว การสร้างแอปพลิเคชันแบบฟูลสแต็กอาจซับซ้อน โดยเฉพาะเมื่อจัดการกับการตั้งค่าแบ็คเอนด์ การจัดการฐานข้อมูล การตรวจสอบสิทธิ์ และการปรับใช้ เพื่อทำให้ความท้าทายเหล่านี้ง่ายขึ้น เราใช้ back4app—บริการแบ็คเอนด์ที่สามารถปรับขนาดได้ แบ็คเอนด์เป็นบริการ (baas) —เพื่อให้คุณสามารถมุ่งเน้นไปที่การพัฒนาส่วนหน้าของคุณในขณะที่มันจัดการการโฮสต์ ฐานข้อมูล และ api back4app มอบบริการแบ็คเอนด์ที่ครอบคลุมรวมถึงฐานข้อมูลที่พร้อมใช้งาน การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะฝั่งเซิร์ฟเวอร์ และ sdk สำหรับการรวมที่ราบรื่น นอกจากนี้ยังรองรับการปรับใช้ในรูปแบบคอนเทนเนอร์ ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับแอปพลิเคชันฟูลสแต็กสมัยใหม่ ด้วยทรัพยากรเหล่านี้ คุณสามารถพัฒนาและปรับใช้แอปพลิเคชันได้อย่างรวดเร็วโดยไม่ต้องแบกรับภาระในการจัดการโครงสร้างพื้นฐานเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้คุณจะได้เรียนรู้ที่จะ เริ่มต้นโปรเจกต์ preact สมัยใหม่โดยใช้ vite รวมบริการ backend เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud หลักสำหรับส่วนติดต่อผู้ใช้ที่โต้ตอบได้ ปรับใช้ แอปพลิเคชัน to do list ที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ node js และ npm ติดตั้งเวอร์ชัน lts ล่าสุดของ node js จาก nodejs org https //nodejs org/ และตรวจสอบโดยการรัน node v และ npm v ในเทอร์มินัลของคุณ ความรู้พื้นฐานเกี่ยวกับ preact ควรมีความคุ้นเคยกับคอมโพเนนต์ฟังก์ชัน, hooks (เช่น usestate และ useeffect ), และไวยากรณ์ jsx หากคุณเป็นมือใหม่ใน preact ให้พิจารณาทบทวนพื้นฐานก่อน บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com/ เพื่อจัดตั้งและจัดการบริการ backend ของคุณ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโปรเจกต์ของคุณและเริ่มสร้าง การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโปรเจกต์ preact ของคุณโดยใช้ vite เพื่อประสบการณ์การพัฒนาที่ราบรื่น ยืนยันว่า node js (เวอร์ชัน lts) ได้ถูกติดตั้งแล้ว หากจำเป็นให้ดาวน์โหลดและติดตั้งจาก nodejs org https //nodejs org/ ตรวจสอบโดยการรัน node v npm v เริ่มต้นโปรเจกต์ preact ของคุณโดยใช้ vite รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ (แทนที่ todo app ด้วยชื่อโปรเจกต์ที่คุณต้องการ) npm create vite\@latest todo app template preact นำทางไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app ติดตั้ง dependencies ที่จำเป็น npm install เริ่มเซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบการตั้งค่าของคุณ npm run dev แอปพลิเคชัน preact ของคุณควรทำงานได้ในท้องถิ่นแล้ว เปิด url ที่ให้มาในเบราว์เซอร์ของคุณเพื่อตรวจสอบ จากนั้นคุณจะตั้งค่าด้านหลังของคุณบน back4app เพื่อจัดการการจัดเก็บข้อมูลและการโต้ตอบกับ api การสร้าง backend todo back4app เสนอการบริการแบ็คเอนด์ที่จัดการอย่างเต็มที่ซึ่งข powered by parse , ซึ่งให้บริการฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติทันที ส่วนนี้จะนำคุณไปสู่การสร้าง task โมเดลข้อมูลเพื่อเก็บรายการที่คุณต้องทำและเชื่อมต่อกับส่วนหน้า preact ของคุณ การตั้งค่าแอปพลิเคชันแบ็คเอนด์ของคุณ เข้าสู่ระบบ ไปยัง แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todopreactapp ) และเลือก nodejs/parse เป็นประเภทแบ็คเอนด์ เมื่อแอปถูกสร้างขึ้นแล้ว ให้ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" คลิก "สร้างคลาส" และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการ อนุญาตระดับคลาส เพื่ออนุญาตให้สาธารณะอ่านและเขียน (คุณสามารถปรับการตั้งค่าเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดเกี่ยวกับงาน เสร็จสิ้น (boolean) – ระบุว่างานเสร็จสิ้นหรือไม่ วันครบกำหนด (date) – วันกำหนดเส้นตายสำหรับงาน คลิก "บันทึก" เพื่อเสร็จสิ้นการตั้งค่าโครงสร้างของคุณ การรวม back4app กับ preact รวม back4app เข้ากับโปรเจกต์ preact ของคุณโดยใช้ parse javascript sdk ติดตั้ง sdk ผ่าน npm npm install parse กำหนดค่า sdk โดยการเริ่มต้นด้วย application id และ javascript key ดึงข้อมูลรับรองเหล่านี้จากแดชบอร์ด back4app ของคุณภายใต้ app settings > security & keys ใน src/main jsx , นำเข้าและกำหนดค่า parse ดังนี้ import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) เมื่อเชื่อมต่อกับแบ็กเอนด์แล้ว คุณก็พร้อมที่จะสร้าง ui รายการที่ต้องทำใน preact และดำเนินการ crud การพัฒนา frontend ด้วย preact ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว สร้างส่วนติดต่อผู้ใช้สำหรับแอปพลิเคชันรายการที่ต้องทำของคุณโดยใช้ preact คุณจะสร้างคอมโพเนนต์เพื่อเพิ่ม แสดง อัปเดต และลบงาน ในขณะที่จัดการสถานะด้วย hooks การจัดระเบียบคอมโพเนนต์ของคุณ แอปพลิเคชันของคุณจะรวมคอมโพเนนต์หลักต่อไปนี้ taskform jsx – จัดการการเพิ่มงานใหม่ tasklist jsx – แสดงงานทั้งหมดและให้การควบคุมในการทำให้เสร็จหรือลบงาน taskitem jsx – แทนที่งานแต่ละงานด้วยการกระทำในการสลับการทำให้เสร็จหรือเอางานออก สร้าง components โฟลเดอร์ภายใน src และเพิ่มไฟล์เหล่านี้ mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx การจัดการสถานะด้วย hooks ใช้ hooks ของ preact ( usestate และ useeffect ) สำหรับการจัดการสถานะและผลข้างเคียง เริ่มต้นด้วยการตั้งค่าสถานะใน app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; การสร้างคอมโพเนนต์แบบฟอร์มงาน ใน taskform jsx , สร้างฟอร์มที่ควบคุมได้สำหรับการเพิ่มงาน ใช้ usestate เพื่อจัดการค่าข้อมูลนำเข้าและส่งข้อมูลไปยัง back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; การแสดงรายการงาน ใน tasklist jsx , แสดงรายการงานโดยการแมพผ่านอาร์เรย์งานและใช้ taskitem คอมโพเนนต์ import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; การสร้างคอมโพเนนต์งาน ใน taskitem jsx , สร้างคอมโพเนนต์ที่อนุญาตให้คุณทำเครื่องหมายงานว่าเสร็จสิ้นหรือทำการลบมัน import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; การจัดแต่งสไตล์แอปพลิเคชันของคุณ เพิ่มสไตล์ต่อไปนี้ใน index css ไฟล์ใน src โฟลเดอร์ / container styling / 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; } container p { font size 1rem; } 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; } } นำเข้า css นี้ใน src/main jsx import " /index css"; การทำให้ ui เสร็จสมบูรณ์ แอปพลิเคชัน preact to do list ของคุณตอนนี้มีฟรอนต์เอนด์ที่มีพลศาสตร์ซึ่งรวมเข้ากับ back4app และการจัดสไตล์ที่กำหนดเอง แอปนี้ช่วยให้คุณสามารถเพิ่ม แสดง อัปเดต และลบงานในขณะที่รักษาการสื่อสารระหว่างฟรอนต์เอนด์และแบ็กเอนด์อย่างมีประสิทธิภาพ ถัดไป คุณจะปรับใช้แอป preact ของคุณโดยใช้แพลตฟอร์มการปรับใช้เว็บของ back4app การปรับใช้ frontend บน back4app web deployment back4app web deployment ให้สภาพแวดล้อมที่จัดการอย่างเต็มที่และบรรจุในคอนเทนเนอร์สำหรับการปรับใช้แอปพลิเคชันของคุณ ด้วยการปรับใช้ที่ใช้ docker คุณสามารถบรรจุ frontend ของ preact และปรับใช้ได้อย่างง่ายดาย การกำหนดค่า vite สำหรับการผลิต โครงการ preact ที่สร้างด้วย vite จะทำงานในโหมดพัฒนาโดยค่าเริ่มต้น สำหรับการผลิต ให้สร้างเวอร์ชันสแตติกและให้บริการโดยใช้เว็บเซิร์ฟเวอร์ที่มีน้ำหนักเบาเช่น nginx อัปเดต vite config js ของคุณเพื่อตั้งค่าเส้นทางฐานที่ถูกต้อง import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); สร้างไฟล์ที่พร้อมสำหรับการผลิต npm run build การสร้าง dockerfile สำหรับแอปของคุณ สร้าง dockerfile ในไดเรกทอรีหลักเพื่อกำหนดคอนเทนเนอร์ของคุณ # build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] การทดสอบคอนเทนเนอร์ในเครื่อง ก่อนที่จะปรับใช้ ให้สร้างและทดสอบคอนเทนเนอร์ docker ของคุณในเครื่อง docker build t todo preact frontend เรียกใช้คอนเทนเนอร์ docker run p 8080 80 todo preact frontend เยี่ยมชม http //localhost 8080 ในเบราว์เซอร์ของคุณเพื่อยืนยันว่าแอปของคุณให้บริการอย่างถูกต้อง การผลักดันไปยัง github และการปรับใช้ผ่าน back4app ผลักดันโปรเจกต์ของคุณไปยัง github 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 เข้าสู่ระบบที่ back4app web deployment https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อ และเลือก github repository อนุญาตให้ back4app เข้าถึงที่เก็บของคุณและเลือก todo preact repo เลือก dockerfile deployment และยืนยันการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มกระบวนการสร้าง การติดตามและการจัดการการปรับใช้ หลังจากการปรับใช้ ให้ใช้ back4app dashboard เพื่อ ดูบันทึกสำหรับการแก้ไขปัญหา ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการปรับใช้ใหม่เมื่อมีการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น การทดสอบและการดีบักแอปพลิเคชันของคุณ หลังจากการปรับใช้ ให้ทดสอบแอป preact ของคุณอย่างละเอียด ตรวจสอบการเชื่อมต่อ api เปิดคอนโซลนักพัฒนาของเบราว์เซอร์ของคุณ (f12 → network) เพื่อติดตามการเรียก api ในระหว่างการดำเนินการงาน เพิ่มและดึงงาน ใช้ ui เพื่อเพิ่มงาน จากนั้นรีเฟรชหน้าเพื่อยืนยันความคงอยู่ใน back4app database browser ทดสอบการดำเนินการ crud ตรวจสอบให้แน่ใจว่าการทำเครื่องหมายงานว่าเสร็จสมบูรณ์และการลบถูกสะท้อนอย่างถูกต้องในแบ็กเอนด์ การจัดการกรณีขอบ ตรวจสอบความถูกต้องของข้อมูลฟอร์มและจำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือพัฒนา หากคุณพบปัญหา ให้ตรวจสอบบันทึก back4app หรือเช็คการกำหนดค่า api ของคุณ แนวทางปฏิบัติที่ดีที่สุดในการใช้บริการ back4app ปรับปรุงประสิทธิภาพและความปลอดภัยของแอปพลิเคชันของคุณโดยปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้ เพิ่มประสิทธิภาพการเรียก api ใช้คำขอแบบกลุ่มสำหรับการดำเนินการหลายรายการและเลือกเฉพาะฟิลด์ที่จำเป็นในคำค้นของคุณ รักษาข้อมูลที่ละเอียดอ่อนให้ปลอดภัย เก็บข้อมูลรับรองเช่น application id และ javascript key ในตัวแปรสภาพแวดล้อม ด้วย vite ให้สร้างไฟล์ env vite parse app id=your app id vite parse js key=your js key เปิดใช้งาน auto scaling เปิดใช้งานการปรับขนาดอัตโนมัติใน back4app web deployment เพื่อจัดการการเข้าชมที่สูง เพิ่มความปลอดภัย จำกัดสิทธิ์ระดับคลาส (clps) เพื่อควบคุมการแก้ไขข้อมูลและตั้งค่า acl ตามที่ต้องการ ใช้ cloud code โอนภาระการประมวลผลที่ซับซ้อนไปยัง cloud code เพื่อประสิทธิภาพที่ดีกว่าและลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบ full stack โดยใช้ preact สำหรับส่วนหน้าและบริการแบ็คเอนด์ที่แข็งแกร่งของ back4app บทแนะนำนี้ได้แนะนำคุณในการเริ่มต้นโปรเจกต์ preact การรวม parse sdk และการปรับใช้แอปของคุณโดยใช้กระบวนการทำงานที่บรรจุใน back4app เมื่อคุณพัฒนาต่อไป ให้พิจารณาเพิ่มฟีเจอร์เช่นการตรวจสอบสิทธิ์ผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบุคคลที่สาม สำหรับรายละเอียดเพิ่มเติมและการสนับสนุน โปรดดูที่ เอกสาร back4app https //www back4app com/docs