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

ในคู่มือนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ solid js และเชื่อมต่อกับแบ็กเอนด์ที่มีความแข็งแกร่งซึ่งขับเคลื่อนโดย back4app บทแนะนำนี้ออกแบบมาเป็นจุดเริ่มต้นที่เหมาะสมเพราะมันครอบคลุมการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) พื้นฐานและแนะนำคุณในการออกแบบส่วนติดต่อผู้ใช้ที่ชัดเจนและใช้งานได้ เมื่อสิ้นสุด คุณจะมีแอปที่ทำงานได้อย่างเต็มที่ซึ่งแสดงให้เห็นถึงวิธีการรวมบริการแบ็กเอนด์ที่จัดการในขณะที่ใช้ solid js สำหรับส่วนหน้าที่ตอบสนอง การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องท้าทายเนื่องจากความซับซ้อนในการตั้งค่าแบ็กเอนด์ การจัดการฐานข้อมูล การจัดการการพิสูจน์ตัวตน และการปรับใช้โครงสร้างพื้นฐาน เพื่อทำให้กระบวนการนี้ง่ายขึ้น เราใช้ back4app ซึ่งเสนอ โซลูชันแบ็กเอนด์เป็นบริการ (baas) , ช่วยให้คุณมุ่งเน้นไปที่การสร้างส่วนหน้าของคุณในขณะที่มันจัดการการโฮสต์ ฐานข้อมูล และ api back4app ให้บริการแบ็กเอนด์ที่ครอบคลุม รวมถึงฐานข้อมูลที่พร้อมใช้งาน การพิสูจน์ตัวตน cloud code สำหรับตรรกะฝั่งเซิร์ฟเวอร์ และ sdk สำหรับการรวมที่ราบรื่น นอกจากนี้ยังรองรับการปรับใช้ในรูปแบบคอนเทนเนอร์ ทำให้เป็นตัวเลือกที่ยืดหยุ่นสำหรับการโฮสต์แอปพลิเคชันแบบฟูลสแต็ก ด้วยเครื่องมือเหล่านี้ คุณสามารถพัฒนาและปรับใช้แอปพลิเคชันได้อย่างรวดเร็วโดยไม่ต้องกังวลเกี่ยวกับการบำรุงรักษาเซิร์ฟเวอร์ ข้อสรุปที่สำคัญ โดยการติดตามบทแนะนำนี้คุณจะได้เรียนรู้ที่จะ เริ่มต้นโปรเจกต์ solid js สมัยใหม่โดยใช้ vite รวมบริการแบ็คเอนด์เข้ากับแอปพลิเคชันของคุณเพื่อจัดการข้อมูล ดำเนินการ crud ที่จำเป็นสำหรับส่วนติดต่อผู้ใช้ที่มีพลศาสตร์และโต้ตอบได้ ปรับใช้ รายการที่ต้องทำ แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ตรวจสอบให้แน่ใจว่าคุณมีเครื่องมือและทักษะเหล่านี้ก่อนที่คุณจะเริ่ม node js และ npm ติดตั้ง node js (แนะนำ lts) จาก nodejs org https //nodejs org/ และตรวจสอบโดยการรัน node v และ npm v ในเทอร์มินัลของคุณ ความรู้พื้นฐานเกี่ยวกับ solid js ความคุ้นเคยกับคอมโพเนนต์ สัญญาณเชิงปฏิกิริยา (ใช้ createsignal ) และไวยากรณ์ jsx เป็นสิ่งจำเป็น หากคุณเป็นมือใหม่ใน solid js ให้พิจารณาทบทวนพื้นฐานก่อน บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com/ เพื่อจัดตั้งและจัดการบริการแบ็คเอนด์ของคุณ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโปรเจกต์ของคุณและเริ่มสร้าง การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโปรเจกต์ solid js ของคุณโดยใช้ vite เพื่อประสบการณ์การพัฒนาที่รวดเร็ว ตรวจสอบว่า node js (เวอร์ชัน lts) ได้ถูกติดตั้งบนเครื่องของคุณแล้ว หากจำเป็น ให้ดาวน์โหลดและติดตั้งจาก nodejs org https //nodejs org/ ยืนยันการติดตั้ง node v npm v เริ่มต้นโปรเจกต์ solid js ของคุณโดยใช้ vite รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ (แทนที่ todo app ด้วยชื่อโปรเจกต์ที่คุณต้องการ) npm create vite\@latest todo app template solid เปลี่ยนไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app ติดตั้งทุกความต้องการที่จำเป็น npm install เริ่มเซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบการตั้งค่าของคุณ npm run dev แอปพลิเคชัน solid js ของคุณควรทำงานได้ในท้องถิ่นแล้ว เปิด url ที่แสดงในเบราว์เซอร์ของคุณเพื่อตรวจสอบ จากนั้นคุณจะตั้งค่าด้านหลังของคุณบน back4app เพื่อจัดการการจัดเก็บข้อมูลและการโต้ตอบ api การสร้าง backend todo back4app มีบริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , มอบฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติทันที ส่วนนี้จะแนะนำคุณในการสร้าง task โมเดลข้อมูลเพื่อเก็บรายการที่ต้องทำของคุณและเชื่อมโยงกับส่วนหน้า solid js ของคุณ การตั้งค่าแอปพลิเคชันแบ็คเอนด์ของคุณ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิกที่ "สร้างแอปใหม่" ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todosolidapp ) และเลือก nodejs/parse เป็นประเภทแบ็คเอนด์ เมื่อสร้างแอปเสร็จแล้ว ให้ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" คลิก "สร้างคลาส" และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่า การอนุญาตระดับคลาส เพื่ออนุญาตให้สาธารณะอ่านและเขียน (คุณสามารถปรับการตั้งค่าเหล่านี้ให้เข้มงวดขึ้นในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดของงาน เสร็จสิ้น (boolean) – สถานะที่บ่งบอกว่างานเสร็จสิ้นหรือไม่ วันครบกำหนด (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสรุปสคีมา การรวม back4app กับ solid js รวม back4app เข้ากับโปรเจกต์ solid js ของคุณโดยใช้ parse javascript sdk เพื่อสื่อสารกับแบ็กเอนด์ของคุณ ติดตั้ง sdk ผ่าน npm npm install parse กำหนดค่า sdk โดยการเริ่มต้นด้วย application id และ javascript key ดึงข้อมูลเหล่านี้จากแดชบอร์ด back4app ของคุณภายใต้ app settings > security & keys ใน src/index jsx (หรือไฟล์เริ่มต้นที่เทียบเท่า) ให้นำเข้าและกำหนดค่า parse ดังนี้ import { render } from "solid js/web"; import ' /index css' import app from " /app"; 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("root")); เมื่อกำหนดค่าด้านหลังเรียบร้อยแล้ว คุณก็พร้อมที่จะสร้าง ui ของ to do list ใน solid js และดำเนินการ crud การพัฒนา frontend ด้วย solid js ตอนนี้ที่ด้านหลังของคุณเชื่อมต่อแล้ว สร้างส่วนติดต่อผู้ใช้สำหรับแอปพลิเคชัน to do list ของคุณโดยใช้ solid js คุณจะสร้างคอมโพเนนต์เพื่อเพิ่ม แสดง อัปเดต และลบงานในขณะที่จัดการสถานะด้วยสัญญาณเชิงปฏิกิริยา การจัดระเบียบคอมโพเนนต์ของคุณ แอปพลิเคชันของคุณจะประกอบด้วยส่วนประกอบหลักเหล่านี้ taskform jsx – จัดการการเพิ่มงานใหม่ tasklist jsx – แสดงงานทั้งหมดและเสนอการควบคุมเพื่อทำให้เสร็จหรือเอาออก taskitem jsx – แสดงงานแต่ละงานพร้อมการกระทำเพื่อทำเครื่องหมายว่าเสร็จหรือลบ สร้าง components โฟลเดอร์ภายใน src และเพิ่มไฟล์เหล่านี้ mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx การจัดการสถานะด้วย solid js ใช้ createsignal และ createeffect ของ solid js สำหรับการจัดการสถานะและผลข้างเคียง เริ่มต้นด้วยการตั้งค่าสถานะใน app jsx import { createsignal, onmount } from "solid js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = createsignal(\[]); 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); } }; onmount(fetchtasks); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks()} fetchtasks={fetchtasks} /> \</div> ); } export default app; สร้างคอมโพเนนต์ฟอร์มงาน ใน taskform jsx , สร้างฟอร์มที่ควบคุมได้เพื่อเพิ่มงาน จัดการค่าข้อมูลด้วย createsignal และส่งข้อมูลไปยัง back4app import { createsignal } from "solid js"; import parse from "parse/dist/parse min js"; function taskform(props) { const \[title, settitle] = createsignal(""); const \[description, setdescription] = createsignal(""); 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(); props 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"; function tasklist(props) { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={props fetchtasks} /> )) )} \</div> ); } export default tasklist; สร้างคอมโพเนนต์รายการงาน ใน taskitem jsx , ตั้งค่าการกระทำเพื่อทำเครื่องหมายงานว่าเสร็จสมบูรณ์หรือเพื่อลบมัน import parse from "parse/dist/parse min js"; function taskitem(props) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick={handlecomplete}> {props task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; การจัดรูปแบบแอปพลิเคชันของคุณ เพิ่มสไตล์ต่อไปนี้ใน index css ไฟล์ใน src โฟลเดอร์ / center the content and add spacing / 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/index jsx import " /index css"; การทำให้ ui เสร็จสมบูรณ์ แอปพลิเคชัน to do list ของคุณที่ใช้ solid js ตอนนี้มีฟรอนต์เอนด์ที่มีพลศาสตร์ซึ่งรวมเข้ากับ back4app และการออกแบบที่กำหนดเอง แอปนี้ให้คุณเพิ่ม แสดง อัปเดต และลบงานในขณะที่รักษาการสื่อสารระหว่างฟรอนต์เอนด์และแบ็กเอนด์อย่างมีประสิทธิภาพ ถัดไป คุณจะปรับใช้แอป solid js ของคุณโดยใช้แพลตฟอร์ม web deployment ของ back4app การปรับใช้ฟรอนต์เอนด์บน back4app web deployment back4app web deployment มีสภาพแวดล้อมที่จัดการอย่างเต็มที่และบรรจุในคอนเทนเนอร์เพื่อปรับใช้แอปพลิเคชันของคุณ ด้วยการปรับใช้ที่ใช้ docker คุณสามารถบรรจุฟรอนต์เอนด์ solid js ของคุณและปรับใช้ได้อย่างง่ายดาย การตั้งค่า vite สำหรับการผลิต แอปพลิเคชัน solid js ที่สร้างด้วย vite จะทำงานในโหมดพัฒนาโดยค่าเริ่มต้น สำหรับการผลิต ให้สร้างเวอร์ชันแบบสแตติกและให้บริการด้วยเว็บเซิร์ฟเวอร์ที่มีน้ำหนักเบาเช่น nginx อัปเดต vite config js ของคุณเพื่อตั้งค่าเส้นทางฐานที่เหมาะสม import { defineconfig } from 'vite'; import solidplugin from 'vite plugin solid'; export default defineconfig({ plugins \[solidplugin()], base ' /', // ensures correct asset paths in containerized environments }); สร้างไฟล์ที่พร้อมสำหรับการผลิต npm run build การสร้าง dockerfile สำหรับแอปของคุณ สร้าง dockerfile ในรากของโปรเจกต์เพื่อกำหนดวิธีการที่แอปของคุณถูกบรรจุในคอนเทนเนอร์ \# use an official lightweight node js image to build the app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# use nginx to serve the static files from nginx\ alpine \# copy custom nginx config for spa routing copy nginx conf /etc/nginx/conf d/default conf \# copy built app from build stage copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] หลังจากสร้าง dockerfile ของคุณแล้ว ให้กำหนดค่า nginx เพื่อจัดการเส้นทางคำขอไปยังไฟล์ index html รากของแอป solid js ของคุณอย่างถูกต้องเมื่อคุณพยายามเข้าถึงเส้นทางโดยตรง เพื่อทำเช่นนี้ ให้สร้าง nginx conf ไฟล์ในไดเรกทอรีรากของโปรเจกต์ของคุณและวางบล็อกโค้ดด้านล่าง server { listen 80; server name localhost; root /usr/share/nginx/html; index index html; \# gzip settings for better performance gzip on; gzip vary on; gzip min length 10240; gzip proxied expired no cache no store private auth; gzip types text/plain text/css text/xml text/javascript application/x javascript application/xml application/javascript; gzip disable "msie \[1 6]\\ "; \# handle static file requests location \\ (?\ jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ { expires 30d; add header cache control "public, max age=2592000"; try files $uri =404; } \# redirect all requests to index html for spa routing location / { try files $uri $uri/ /index html; } \# error pages error page 404 /index html; error page 500 502 503 504 /50x html; location = /50x html { root /usr/share/nginx/html; } } การทดสอบคอนเทนเนอร์ในเครื่อง ก่อนการปรับใช้ ให้สร้างและทดสอบคอนเทนเนอร์ docker ของคุณ docker build t todo solid frontend เรียกใช้คอนเทนเนอร์ docker run p 8080 80 todo solid 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 solid repo เลือก dockerfile deployment และยืนยันการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มกระบวนการสร้าง การติดตามและการจัดการการปรับใช้ หลังจากการปรับใช้ ให้ใช้ back4app dashboard เพื่อ ดูบันทึกสำหรับการดีบัก ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการปรับใช้ใหม่ด้วยการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากต้องการ การทดสอบและการดีบักแอปพลิเคชันของคุณ เมื่อถูกใช้งานแล้ว ให้ทดสอบแอป solid js ของคุณอย่างละเอียด ตรวจสอบการเชื่อมต่อ api เปิดคอนโซลนักพัฒนาของเบราว์เซอร์ (f12 → network) เพื่อตรวจสอบการเรียก api ระหว่างการดำเนินการงาน เพิ่มและดึงงาน ใช้ ui เพื่อเพิ่มงาน จากนั้นรีเฟรชและยืนยันการเก็บข้อมูลในฐานข้อมูลของ back4app การดำเนินการ crud ทดสอบการทำเครื่องหมายว่างานเสร็จสมบูรณ์และการลบ โดยมั่นใจว่าการอัปเดตสะท้อนในแบ็กเอนด์ จัดการกรณีขอบ ตรวจสอบข้อมูลที่กรอกในฟอร์มและจำลองเงื่อนไขเครือข่ายที่ช้าลงโดยใช้เครื่องมือพัฒนาของเบราว์เซอร์ หากเกิดปัญหา ให้ตรวจสอบบันทึกของ back4app หรือทบทวนการกำหนดค่า api ของคุณ แนวทางปฏิบัติที่ดีที่สุดในการใช้บริการ back4app ปรับปรุงประสิทธิภาพและความปลอดภัยของแอปพลิเคชันของคุณโดย การเพิ่มประสิทธิภาพการเรียก api ใช้คำขอแบบกลุ่มสำหรับการดำเนินการหลายรายการและเลือกเฉพาะฟิลด์ที่จำเป็นในคำค้น การรักษาความปลอดภัยตัวแปรสภาพแวดล้อม เก็บข้อมูลรับรองที่ละเอียดอ่อนในตัวแปรสภาพแวดล้อม ด้วย vite ให้สร้างไฟล์ env vite parse app id=your app id vite parse js key=your js key การใช้งาน auto scaling เปิดใช้งานการปรับขนาดอัตโนมัติใน back4app web deployment สำหรับสถานการณ์ที่มีการเข้าชมสูง การเสริมความปลอดภัย ใช้ class level permissions (clps) เพื่อจำกัดการแก้ไขข้อมูลและตั้งค่า acls ตามที่จำเป็น การใช้ cloud code โอนภาระงานที่ซับซ้อนไปยัง cloud code เพื่อปรับปรุงประสิทธิภาพและลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบ full stack โดยใช้ solid js สำหรับส่วนหน้าและบริการแบ็คเอนด์ที่แข็งแกร่งของ back4app บทเรียนนี้ครอบคลุมการเริ่มต้นโปรเจกต์ solid js และการรวม parse sdk จนถึงการปรับใช้แอปของคุณผ่านการทำงานแบบคอนเทนเนอร์บน back4app เมื่อคุณก้าวหน้า คิดเกี่ยวกับการเพิ่มฟีเจอร์เช่นการตรวจสอบผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบริการของบุคคลที่สามเพื่อเสริมสร้างแอปพลิเคชันของคุณ สำหรับรายละเอียดเพิ่มเติมและการสนับสนุน ให้สำรวจ เอกสาร back4app https //www back4app com/docs