How to Build a CRUD App with Astro?

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชันเว็บ crud (สร้าง, อ่าน, อัปเดต, และลบ) โดยใช้ astro บทแนะนำนี้จะพาคุณไปตั้งค่าโครงการ back4app—แบ็คเอนด์ที่แข็งแกร่งของเรา—และออกแบบโครงสร้างข้อมูลที่รองรับการดำเนินการพื้นฐาน เราจะสร้างส่วนหน้า astro ที่สื่อสารกับ back4app ผ่าน rest/graphql apis เพื่อให้แน่ใจว่าการจัดการข้อมูลมีความปลอดภัยและมีประสิทธิภาพ เมื่อสิ้นสุดคู่มือนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิตพร้อมด้วยการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลที่ปลอดภัย สิ่งที่คุณจะได้เรียนรู้ วิธีการจัดโครงสร้างแอปพลิเคชัน crud ด้วย astro และ back4app การออกแบบแบ็คเอนด์ที่สามารถขยายได้ด้วยคอลเลกชันที่กำหนดเอง การใช้ส่วนติดต่อผู้ดูแลระบบแบบลากและวางเพื่อการจัดการข้อมูลที่ง่ายดาย การรวมส่วนหน้า astro ของคุณกับ back4app โดยใช้ rest หรือ graphql การปรับใช้โครงการ astro ของคุณและการทำให้เป็นคอนเทนเนอร์ด้วย docker หากจำเป็น ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม โปรดยืนยันว่าคุณมี บัญชี back4app ที่มีโครงการใหม่พร้อมแล้ว ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ การตั้งค่าสภาพแวดล้อมการพัฒนา astro ใช้ เอกสาร astro https //docs astro build เพื่อเริ่มต้น ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14+) แล้ว ความคุ้นเคยพื้นฐานกับ javascript, astro, และ rest apis เยี่ยมชม เอกสาร astro https //docs astro build หากคุณต้องการการทบทวน ขั้นตอนที่ 1 – การเริ่มต้นโครงการของคุณ การเริ่มโครงการ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app astro และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างเสร็จ โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด back4app ของคุณ—ฐานสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud ของเรา คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทเพื่อช่วยให้คุณกำหนดค่าความสอดคล้องของฐานข้อมูลได้อย่างมีประสิทธิภาพ โครงสร้างนี้สนับสนุนการดำเนินการ crud ที่มีประสิทธิภาพ 1\ การรวบรวมรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง ภาพรวมสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่แก้ไขล่าสุด 2\ คอลเลกชันผู้ใช้ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เมื่อบัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุดสำหรับบัญชี คุณสามารถกำหนดค่าคอลเลกชันเหล่านี้ในแดชบอร์ด back4app ของคุณได้โดยการสร้างคลาสใหม่และเพิ่มคอลัมน์ที่เหมาะสม สร้างชั้นเรียนใหม่ ในการเพิ่มฟิลด์ ให้เลือกประเภทข้อมูล กำหนดชื่อฟิลด์ กำหนดค่าเริ่มต้นหากจำเป็น และระบุว่าฟิลด์นั้นจำเป็นหรือไม่ สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการตั้งค่า schema ai agent ที่รวมอยู่ใน back4app สามารถสร้าง schema ของคุณโดยอัตโนมัติ อธิบายคอลเลกชันและฟิลด์ที่คุณต้องการในอินเทอร์เฟซ ai agent ตรวจสอบคำแนะนำของมัน และนำไปใช้ในโครงการของคุณ ตัวอย่างคำสั่ง create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) เครื่องมือนี้ช่วยเร่งการตั้งค่าในขณะที่มั่นใจว่า schema ของคุณตรงตามข้อกำหนดของแอปพลิเคชัน ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ & การดำเนินการ crud สำรวจอินเทอร์เฟซผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app เป็นเครื่องมือที่ไม่ต้องเขียนโค้ดที่ให้อินเทอร์เฟซภาพเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ การออกแบบแบบลากและวางช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ เปิดเมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบเริ่มต้น นี่จะกำหนดบทบาทเริ่มต้น (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการข้อมูลด้วยอินเทอร์เฟซผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบคุณสามารถ เพิ่มบันทึก คลิก “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก คลิกที่บันทึกเพื่อดูหรือแก้ไขฟิลด์ของมัน ลบบันทึก ลบรายการที่ล้าสมัยได้อย่างง่ายดาย เครื่องมือนี้ทำให้การดำเนินการ crud ง่ายขึ้นด้วยอินเทอร์เฟซที่ใช้งานง่าย ขั้นตอนที่ 4 – เชื่อมต่อ astro กับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ถึงเวลาที่จะรวมฟรอนต์เอนด์ astro ของคุณ การใช้ rest/graphql apis เนื่องจาก astro เป็นเครื่องมือสร้างเว็บไซต์แบบสแตติกที่ปรับให้เหมาะสมกับประสิทธิภาพ เราจะติดต่อกับ back4app โดยใช้ rest หรือ graphql apis วิธีนี้หลีกเลี่ยงความจำเป็นในการใช้ parse sdk ตัวอย่าง การดึงรายการผ่าน rest ด้านล่างนี้คือตัวอย่างการเรียก rest api ภายในคอมโพเนนต์ astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> รวมการเรียก api ที่คล้ายกันสำหรับการสร้าง การอัปเดต และการลบระเบียนภายในคอมโพเนนต์ astro ของคุณ ขั้นตอนที่ 5 – การปกป้องแบ็คเอนด์ของคุณ การใช้ access control lists (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุ ตัวอย่างเช่น เพื่อสร้างรายการที่เจ้าของเท่านั้นที่สามารถแก้ไขได้ async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดว่าใครสามารถเข้าถึงและแก้ไขข้อมูลของคุณได้ ขั้นตอนที่ 6 – การเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการลงทะเบียนผู้ใช้และการเข้าสู่ระบบ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการตรวจสอบสิทธิ์ ในโปรเจกต์ astro ของคุณ ให้สร้างคอมโพเนนต์สำหรับการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> คุณสามารถสร้างคอมโพเนนต์ที่คล้ายกันสำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า astro ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณสามารถโฮสต์โปรเจกต์ astro ของคุณได้อย่างราบรื่นโดยการเชื่อมต่อกับที่เก็บ github ของคุณ 7 1 การสร้างเวอร์ชันการผลิตของคุณ เปิดเทอร์มินัลในไดเรกทอรีโปรเจกต์ของคุณ รันคำสั่งสร้าง npm run build สิ่งนี้จะสร้าง dist โฟลเดอร์ที่มีทรัพย์สินแบบสแตติกของคุณ ตรวจสอบการสร้าง ตรวจสอบให้แน่ใจว่า dist โฟลเดอร์มี index html พร้อมกับไดเรกทอรีทรัพย์สินอื่น ๆ 7 2 การจัดระเบียบที่เก็บโปรเจกต์ของคุณ ที่เก็บของคุณควรมีรหัสต้นฉบับ astro ที่สมบูรณ์ โครงสร้างตัวอย่างอาจเป็น basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md ไฟล์ตัวอย่าง src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 การคอมมิตและผลักดันโค้ดของคุณไปยัง github เริ่มต้น git repository (ถ้ายังไม่ได้ทำ) git init เพิ่มไฟล์ทั้งหมด git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit for astro frontend" สร้าง repository บน github (เช่น, basic crud app astro ) และ push git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 การเชื่อมโยง github กับการปรับใช้เว็บ back4app เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ ไปที่โครงการของคุณ ( basic crud app astro ) และเลือก การปรับใช้เว็บ ตัวเลือก เชื่อมต่อบัญชี github ของคุณ ทำตามคำแนะนำเพื่ออนุญาตให้ back4app เข้าถึงที่เก็บของคุณ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บ (เช่น basic crud app astro ) และสาขา (โดยปกติคือ main ) 7 5 การกำหนดค่าการตั้งค่าการปรับใช้ คำสั่งสร้าง ระบุคำสั่งสร้าง (เช่น npm run build ) หากที่เก็บของคุณไม่มีผลลัพธ์ที่สร้างไว้ล่วงหน้า ไดเรกทอรีผลลัพธ์ ตั้งค่าเป็น dist เพื่อให้ back4app รู้ว่าจะหาฟайлสถิตของคุณที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรที่จำเป็น เช่น คีย์ api 7 6 การทำให้แอปพลิเคชัน astro ของคุณเป็น docker (ไม่บังคับ) หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้รวม dockerfile เช่น \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] รวมการตั้งค่า docker ในการกำหนดค่าการปรับใช้เว็บของคุณหากต้องการ 7 7 การเปิดตัวแอปพลิเคชันของคุณ กดปุ่ม deploy ในส่วนการปรับใช้เว็บ ติดตามกระบวนการสร้าง back4app จะดึงโค้ดของคุณ สร้างมัน และปรับใช้แอปพลิเคชันของคุณ รับ url ของคุณ เมื่อปรับใช้แล้ว back4app จะจัดหา url ที่เว็บไซต์ของคุณออนไลน์ ขั้นตอนที่ 8 – สรุปและการปรับปรุงในอนาคต ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์ด้วย astro และ back4app โครงการของคุณรวมถึงแบ็คเอนด์ที่มีคอลเลกชันรายละเอียดสำหรับรายการและผู้ใช้ และฟรอนต์เอนด์ที่ทำการดำเนินการ crud ทั้งหมดผ่าน rest/graphql apis ขั้นตอนถัดไป ปรับปรุงฟรอนต์เอนด์ เพิ่มฟีเจอร์เช่นมุมมองรายละเอียด, ความสามารถในการค้นหา, และการแจ้งเตือนแบบเรียลไทม์ ขยายฟังก์ชันการทำงานของแบ็คเอนด์ พิจารณาการรวมฟังก์ชันคลาวด์หรือจุดสิ้นสุด api เพิ่มเติมสำหรับตรรกะที่ซับซ้อนมากขึ้น เจาะลึก สำรวจแหล่งข้อมูลเพิ่มเติมใน เอกสาร back4app https //www back4app com/docs และ เอกสาร astro https //docs astro build สำหรับหัวข้อขั้นสูง โดยการติดตามบทแนะนำนี้ คุณมีความรู้ในการสร้างแอปพลิเคชัน crud ที่แข็งแกร่งและปรับขนาดได้โดยใช้ astro และ back4app สนุกกับการเขียนโค้ดและสำรวจความเป็นไปได้ใหม่ๆ!