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

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ astro และเชื่อมต่อกับบริการแบ็คเอนด์ที่จัดการโดย back4app คู่มือนี้ออกแบบมาสำหรับคุณหากคุณต้องการเชี่ยวชาญการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็นในขณะที่สร้างส่วนหน้าแบบสถิตสมัยใหม่ด้วยข้อมูลที่มีพลศาสตร์โดยใช้ astro เมื่อสิ้นสุดบทแนะนำนี้ แอปพลิเคชันของคุณจะทำงานร่วมกับแบ็คเอนด์ที่จัดการการจัดเก็บข้อมูล การตรวจสอบสิทธิ์ และอื่น ๆ ได้อย่างราบรื่น การพัฒนาแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องท้าทายเนื่องจากการกำหนดค่าของแบ็คเอนด์และการจัดการฐานข้อมูล เพื่อทำให้กระบวนการของคุณง่ายขึ้น เราใช้ back4app— บริการแบ็คเอนด์ที่มีความแข็งแกร่ง —เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนหน้า astro ที่รวดเร็วและเบา back4app ให้บริการฐานข้อมูล nosql ที่จัดการอย่างเต็มที่ การตรวจสอบสิทธิ์ผู้ใช้ cloud code สำหรับตรรกะที่กำหนดเอง และ sdk สำหรับการรวมเข้าที่ราบรื่น ซึ่งช่วยให้คุณสร้างและปรับใช้แอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อคิดสำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโปรเจกต์ astro สมัยใหม่ด้วย vite รวมบริการแบ็คเอนด์เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud ที่จำเป็นสำหรับ รายการที่ต้องทำแบบไดนามิก ปรับใช้แอปพลิเคชันที่ทำงานได้อย่างสมบูรณ์โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี node js และ npm ติดตั้งบนเครื่องของคุณ ตรวจสอบการติดตั้งด้วย node v และ npm v ความรู้พื้นฐานเกี่ยวกับ astro , รวมถึงการจัดการเส้นทางตามไฟล์และการสร้างคอมโพเนนต์ บัญชี back4app เพื่อจัดการบริการแบ็คเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ลงทะเบียน เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะเริ่มสร้างโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มโปรเจกต์ astro ใหม่ ตรวจสอบให้แน่ใจว่าคุณมี node js (เวอร์ชัน lts) ติดตั้งอยู่ หากไม่ให้ดาวน์โหลดจาก nodejs org https //nodejs org/ สร้างโปรเจกต์ astro ของคุณโดยการรัน npm create astro\@latest todo app นำทางไปยังไดเรกทอรีโปรเจกต์ของคุณ cd todo app เริ่มเซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบการตั้งค่า npm run dev แอป astro ของคุณควรเปิดในเบราว์เซอร์ของคุณแล้ว เมื่อส่วนหน้า (frontend) ของคุณพร้อมแล้ว ให้ดำเนินการสร้างส่วนหลัง (backend) ของคุณบน back4app การสร้าง todo backend back4app มีบริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , ซึ่งรวมถึงฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าหลังบ้านของคุณ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปของคุณ (เช่น, todoapp ) และเลือก nodejs/parse เป็นประเภท backend ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" , คลิก "สร้างคลาส" , และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตให้สามารถอ่านและเขียนได้สาธารณะ (คุณสามารถปรับปรุงสิ่งเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – สถานะการทำงานเสร็จ duedate (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสร้างสคีมา การรวม back4app กับ astro คุณจะใช้ parse javascript sdk เพื่อเชื่อมต่อแอป astro ของคุณกับ back4app backend ติดตั้ง parse sdk npm install parse กำหนดค่า sdk โดยการสร้างโมดูลเฉพาะ สำหรับตัวอย่าง สร้างไฟล์ที่ 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; คุณสามารถนำเข้าโมดูลนี้ในคอมโพเนนต์หรือหน้าของ astro ของคุณเพื่อโต้ตอบกับ backend การพัฒนา frontend แอปพลิเคชัน astro ของคุณจะประกอบด้วยคอมโพเนนต์และหน้าเพื่อเพิ่ม แสดง อัปเดต และลบงาน ใช้การจัดการเส้นทางแบบไฟล์ของ astro และคอมโพเนนต์เพื่อสร้างรายการสิ่งที่ต้องทำแบบไดนามิก การจัดโครงสร้างคอมโพเนนต์ของคุณ ในการสร้าง frontend ของคุณ คุณจะใช้ solid js เพื่อใช้ solid js ใน astro ให้ติดตั้งแพ็คเกจ solid js เช่นนี้ npm install solid js สร้าง src/components โฟลเดอร์เพื่อจัดระเบียบส่วนประกอบ ui ของคุณ mkdir src/components คุณจะสร้างส่วนประกอบต่อไปนี้ taskformsolid jsx – สำหรับการเพิ่มงานใหม่ taskitemsolid jsx – เพื่อแสดงงานแต่ละงาน tasklistsolid jsx – เพื่อแสดงรายการงาน todoapp jsx – เพื่อแสดงแอปพลิเคชันทั้งหมด taskformsolid jsx ส่วนประกอบนี้แสดงฟอร์มที่บันทึกรายละเอียดของงานและส่งไปยัง back4app // taskformsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskformsolid(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(); if (props refreshtasks) { props refreshtasks(); } 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> ); } taskitemsolid jsx คอมโพเนนต์นี้แสดงถึงงานแต่ละงาน โดยมีปุ่มเพื่อสลับสถานะการทำงานหรือเพื่อลบงาน // taskitemsolid jsx import { createsignal } from 'solid js'; import parse from ' /lib/parseclient'; export default function taskitemsolid(props) { const \[iscompleted, setiscompleted] = createsignal(props task completed); const togglecomplete = async () => { try { const query = new parse query('task'); const tasktoupdate = await query get(props task id); const newcompletedstate = !iscompleted(); tasktoupdate set('completed', newcompletedstate); await tasktoupdate save(); setiscompleted(newcompletedstate); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error updating task ', error); } }; const deletetask = async () => { try { const query = new parse query('task'); const tasktodelete = await query get(props task id); await tasktodelete destroy(); if (props refreshtasks) { props refreshtasks(); } } catch (error) { console error('error deleting task ', error); } }; return ( \<div class={`task item ${iscompleted() ? 'completed' ''}`}> \<div> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \</div> \<div> \<button onclick={togglecomplete}> {iscompleted() ? 'undo' 'complete'} \</button> \<button onclick={deletetask}>delete\</button> \</div> \</div> ); } tasklistsolid jsx คอมโพเนนต์นี้แสดงรายการงานโดยการวนซ้ำผ่านอาร์เรย์และเรนเดอร์แต่ละ taskitem // tasklistsolid jsx import { for, show } from 'solid js'; import taskitemsolid from ' /taskitemsolid'; export default function tasklistsolid(props) { return ( \<div class="task list"> \<show when={props tasks length > 0} fallback={\<p>no tasks available\</p>}> \<for each={props tasks}> {(task) => ( \<taskitemsolid task={task} refreshtasks={props refreshtasks} /> )} \</for> \</show> \</div> ); } todoapp jsx คอมโพเนนต์นี้นำเข้าและแสดงคอมโพเนนต์อื่น ๆ มันจะแสดงแอปพลิเคชันทั้งหมด // todoapp jsx import { createsignal, onmount, createeffect } from 'solid js'; import parse from ' /lib/parseclient'; import taskformsolid from ' /taskformsolid'; import tasklistsolid from ' /tasklistsolid'; export default function todoapp() { 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 ( <> \<taskformsolid refreshtasks={fetchtasks} /> \<tasklistsolid tasks={tasks()} refreshtasks={fetchtasks} /> \</> ); } การรวมหน้า ในหน้าหลักของคุณ (เช่น, src/pages/index astro ) จัดการสถานะของงานและรวมคอมโพเนนต์ของคุณ \ // index astro import todoapp from ' /components/todoapp'; import layout from ' /layouts/layout astro'; import parse from ' /lib/parseclient'; \ \<layout> \<div class="container"> \<h1>to do list\</h1> \<todoapp client\ load /> \</div> \</layout> การจัดรูปแบบแอปพลิเคชัน เพื่อเพิ่มการจัดรูปแบบพื้นฐานทั่วโลก ให้เพิ่ม css สไตล์ด้านล่างลงใน layouts astro ไฟล์ใน src/layouts ไดเรกทอรี container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } 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; } } ตอนนี้ให้เพิ่ม is\ global แอตทริบิวต์ลงในแท็กสไตล์ \<!doctype html> \<html lang="en"> \<head> \<meta charset="utf 8" /> \<meta name="viewport" content="width=device width" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<meta name="generator" content={astro generator} /> \<title>astro basics\</title> \</head> \<body> \<slot /> \</body> \</html> \<style is\ global> / your styles / \</style> การปรับใช้ frontend บน back4app web deployment back4app web deployment ให้สภาพแวดล้อมที่บรรจุเพื่อโฮสต์แอปพลิเคชัน astro ของคุณ สร้างการผลิต npm run build การสร้าง dockerfile สร้าง dockerfile ในรากโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ \# build stage from node 18 alpine as build workdir /app \# copy package files and install dependencies copy package json package lock json / run npm ci \# copy all files and build the application copy run npm run build \# production stage from node 18 alpine workdir /app \# set environment variables env node env=production env host=0 0 0 0 env port=3000 \# copy the build output from the build stage copy from=build /app/dist/ /dist/ \# install the static file server run npm install g serve \# expose the port expose 3000 \# start serving the static files from the "dist" folder cmd \["serve", " s", "dist", " l", "3000"] การทดสอบ docker container ในเครื่อง สร้างภาพ docker ของคุณ docker build t todo frontend รันคอนเทนเนอร์ docker run p 3000 3000 todo frontend เปิด http //localhost 3000 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป astro ของคุณให้บริการอย่างถูกต้อง การปรับใช้ไปยัง 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/ การทดสอบและการดีบัก หลังจากการปรับใช้ ให้ยืนยันว่าหน้าเว็บ astro ของคุณสามารถสื่อสารกับ back4app backend ได้อย่างถูกต้อง การตรวจสอบ api ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api การดำเนินการงาน เพิ่ม เสร็จสิ้น และลบงานผ่าน ui และตรวจสอบการอัปเดตใน back4app database browser การจัดการข้อผิดพลาด ตรวจสอบบันทึกคอนโซลสำหรับข้อผิดพลาดและทดสอบกรณีขอบเช่นการส่งข้อมูลว่าง การทดสอบประสิทธิภาพ จำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือในเบราว์เซอร์เพื่อตรวจสอบความตอบสนอง แนวทางปฏิบัติที่ดีที่สุดในการใช้ back4app กับ astro เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ คำขอที่มีประสิทธิภาพ ใช้การดำเนินการแบบกลุ่มเมื่อจัดการกับงานหลายรายการ const tasks = \[task1, task2, task3]; parse object saveall(tasks); การค้นหาที่ปรับให้เหมาะสม ดึงข้อมูลเฉพาะฟิลด์ที่จำเป็นเท่านั้น query select('title', 'completed'); การจัดการสิ่งแวดล้อม เก็บกุญแจที่สำคัญในตัวแปรสิ่งแวดล้อม astro parse app id=your app id astro parse js key=your js key ความปลอดภัย ใช้ acls เพื่อจำกัดการเข้าถึง task setacl(new parse acl(parse user current())); การถ่ายโอนภาระงานจากแบ็กเอนด์ ใช้ cloud code สำหรับตรรกะที่ซับซ้อนเพื่อลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กโดยการสร้างส่วนหน้า astro รวมเข้ากับแบ็กเอนด์ของ back4app และปรับใช้โดยใช้เวิร์กโฟลว์ที่บรรจุในคอนเทนเนอร์ บทแนะนำนี้ได้แนะนำคุณผ่านทุกขั้นตอน—ตั้งแต่การพัฒนาท้องถิ่นไปจนถึงการปรับใช้ในคลาวด์—เพื่อให้แน่ใจว่ามีการโต้ตอบที่ราบรื่นระหว่าง ui ของ astro และบริการแบ็กเอนด์ มองไปข้างหน้า พิจารณาการปรับปรุงเช่นการอัปเดตแบบเรียลไทม์ การปรับปรุงการตรวจสอบสิทธิ์ และการรวมระบบของบุคคลที่สาม สำหรับการเรียนรู้เพิ่มเติม โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจทรัพยากรของชุมชน