How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ขั้นพื้นฐานโดยใช้ redwoodjs บทเรียนนี้จะพาคุณผ่านกระบวนการตั้งค่าโปรเจกต์ของคุณด้วย back4app เป็นบริการแบ็กเอนด์ ออกแบบสคีมาฐานข้อมูลที่แข็งแกร่ง และรวมเข้ากับส่วนหน้าของ redwoodjs โดยการทำตามขั้นตอนเหล่านี้ คุณจะสร้างแอปพลิเคชันที่พร้อมใช้งานในระดับการผลิตซึ่งจัดการข้อมูลได้อย่างมีประสิทธิภาพในขณะที่ใช้เทคนิคการพัฒนาสมัยใหม่ ข้อมูลเชิงลึกที่สำคัญ เชี่ยวชาญในการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วยบริการแบ็กเอนด์ที่ทรงพลัง ค้นพบวิธีการออกแบบฐานข้อมูลที่สามารถขยายได้และรวมเข้ากับส่วนติดต่อของ redwoodjs เพื่อเพิ่มการมีส่วนร่วมของผู้ใช้ สำรวจการใช้เครื่องมือจัดการแบบลากและวางที่ไม่มีโค้ด—แอป back4app admin—เพื่อทำให้การดำเนินการ crud ราบรื่น เรียนรู้กลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker เพื่อเปิดตัวแอปพลิเคชันเว็บของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ที่ใช้งานอยู่พร้อมโปรเจกต์ใหม่ที่พร้อมใช้งาน หากคุณต้องการคำแนะนำ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app ตั้งค่าสภาพแวดล้อมการพัฒนา redwoodjs ใช้ redwoodjs cli เพื่อสร้างแอปพลิเคชันของคุณ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความเข้าใจพื้นฐานเกี่ยวกับ javascript, redwoodjs และ graphql สำหรับรายละเอียดเพิ่มเติม โปรดเยี่ยมชม เอกสารประกอบ redwoodjs https //redwoodjs com/docs/introduction ขั้นตอนที่ 1 – เริ่มโปรเจกต์ของคุณ เริ่มโปรเจกต์ back4app ใหม่ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือก “แอปใหม่” เพื่อเริ่มโปรเจกต์ใหม่ ตั้งชื่อโปรเจกต์ของคุณ basic crud app redwoodjs และทำตามคำแนะนำในการตั้งค่า สร้างโปรเจกต์ใหม่ โปรเจกต์ของคุณจะปรากฏในแดชบอร์ด ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าและการจัดการแบ็คเอนด์ของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูล การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะออกแบบหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างของสองคอลเลกชันที่สำคัญพร้อมกับฟิลด์ที่จำเป็น การตั้งค่าเหล่านี้มีความสำคัญต่อการเปิดใช้งานฟังก์ชัน crud ที่เชื่อถือได้ 1\ คอลเลกชัน รายการ คอลเลกชันนี้มีรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง บทสรุปสั้น ๆ ที่อธิบายรายการ สร้างเมื่อ วันที่ เวลาสร้างบันทึก อัปเดตเมื่อ วันที่ เวลาของการอัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ คอลเลกชันนี้เก็บข้อมูลรับรองและรายละเอียดของผู้ใช้ สนาม ประเภทข้อมูล วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาของการอัปเดตล่าสุด คุณสามารถกำหนดค่าคอลเลกชันเหล่านี้ได้โดยตรงในแดชบอร์ด back4app โดยการสร้างคลาสใหม่และเพิ่มคอลัมน์ที่เหมาะสม สร้างคลาสใหม่ กำหนดแต่ละฟิลด์โดยการเลือกประเภท ตั้งชื่อ และตั้งค่าสถานะเริ่มต้นหรือสถานะที่จำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ซึ่งสามารถเข้าถึงได้จากแดชบอร์ดของคุณ สามารถสร้าง schema ฐานข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายที่ให้ไว้ ฟีเจอร์นี้ช่วยเร่งการตั้งค่าของ schema ที่สอดคล้องกันสำหรับแอปพลิเคชันของคุณอย่างมีนัยสำคัญ วิธีการใช้ ai agent เริ่มต้น ai agent เข้าถึงตัวแทนจากแดชบอร์ด back4app หรือการตั้งค่าโปรเจกต์ของคุณ รายละเอียดโมเดลข้อมูลของคุณ ป้อนคำอธิบายที่ครอบคลุม outlining คอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและนำไปใช้ ตรวจสอบข้อเสนอ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำอธิบาย create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) การใช้วิธีการที่ขับเคลื่อนด้วย ai นี้ไม่เพียงแต่ช่วยประหยัดเวลา แต่ยังรับประกัน schema ที่ได้รับการปรับให้เหมาะสมและสม่ำเสมอ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & จัดการการดำเนินการ crud บทนำสู่แอปผู้ดูแลระบบ แอปผู้ดูแล back4app เป็นอินเทอร์เฟซที่ใช้งานง่ายและไม่ต้องเขียนโค้ด ซึ่งช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ได้อย่างง่ายดาย ฟังก์ชันการลากและวางทำให้การดำเนินการ crud—เช่น การเพิ่ม การดู การอัปเดต และการลบข้อมูล—เป็นเรื่องง่ายดาย วิธีเปิดใช้งานแอปผู้ดูแล ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลของคุณ โดยการสร้างผู้ใช้ผู้ดูแลเริ่มต้น ซึ่งยังสร้างบทบาท (เช่น, b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งาน ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแล การดำเนินการ crud ผ่านแอปผู้ดูแล ภายในแอปผู้ดูแล คุณสามารถ เพิ่มข้อมูลใหม่ ใช้ปุ่ม “เพิ่มข้อมูล” ในคอลเลกชัน (เช่น, รายการ) เพื่อแทรกข้อมูลใหม่ ดูและแก้ไขข้อมูล คลิกที่ข้อมูลเพื่อดูรายละเอียดและทำการอัปเดต ลบข้อมูล เลือกตัวเลือกลบเพื่อลบข้อมูลที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้การจัดการข้อมูลเป็นเรื่องง่ายมาก ขั้นตอนที่ 4 – การรวม redwoodjs กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าและจัดการได้ผ่านแอปผู้ดูแลระบบแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า redwoodjs ของคุณกับ back4app การใช้การรวม api graphql redwoodjs ถูกสร้างขึ้นรอบๆ graphql ทำให้มันเป็นคู่ที่สมบูรณ์แบบสำหรับการรวมเข้ากับ back4app ผ่านการเรียก api แทนที่จะใช้ sdk คุณจะโต้ตอบกับแบ็กเอนด์ของคุณโดยใช้คำถามและการเปลี่ยนแปลง graphql การตั้งค่าโปรเจกต์ redwoodjs ของคุณ สร้างแอปพลิเคชัน redwoodjs ใหม่ yarn create redwood app basic crud app redwood ไปที่ไดเรกทอรีโปรเจกต์ของคุณ cd basic crud app redwood กำหนดค่าตัวแปรสภาพแวดล้อมของคุณ ในไฟล์ env ของคุณ ให้เพิ่มข้อมูลประจำตัว back4app ของคุณ back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com การดึงข้อมูลด้วย redwoodjs cells redwoodjs cells ทำให้การดึงข้อมูลง่ายขึ้น นี่คือตัวอย่างของเซลล์ที่ดึงรายการ // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; คุณสามารถรวมการสอบถามและการเปลี่ยนแปลง graphql ที่คล้ายกันในส่วนประกอบ redwoodjs ของคุณเพื่อดำเนินการ crud ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง ปกป้องข้อมูลของคุณโดยการตั้งค่ารายการควบคุมการเข้าถึง (acls) โดยตรงบนวัตถุ ตัวอย่างเช่น เมื่อสร้างรายการส่วนตัว คุณสามารถมั่นใจได้ว่าเฉพาะเจ้าของเท่านั้นที่มีสิทธิ์อ่าน/เขียน async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } การกำหนดสิทธิ์ระดับคลาส ภายในแดชบอร์ด back4app ให้ตั้งค่าการอนุญาตระดับคลาส (clps) สำหรับแต่ละคอลเลกชันเพื่อจำกัดการเข้าถึงสำหรับผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์หรือบทบาทเฉพาะ เพื่อให้ข้อมูลของคุณยังคงปลอดภัย ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ของผู้ใช้ การตั้งค่าการจัดการบัญชี back4app ใช้ระบบผู้ใช้ที่แข็งแกร่งซึ่งคุณสามารถรวมเข้ากับ redwoodjs สำหรับการตรวจสอบสิทธิ์ของผู้ใช้ ในแอป redwoodjs ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ผ่านการเรียก api ตัวอย่าง การลงทะเบียนผู้ใช้ // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; วิธีการที่คล้ายกันสามารถใช้สำหรับการเข้าสู่ระบบและการรักษาเซสชันผู้ใช้ ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณด้วย redwoodjs ผ่านการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ทำให้การโฮสต์ frontend ของคุณด้วย redwoodjs เป็นเรื่องง่าย ทำตามขั้นตอนเหล่านี้เพื่อผลักดันโค้ดของคุณไปยังการผลิต 7 1 สร้างเวอร์ชันการผลิตของคุณ เปิดโฟลเดอร์โปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง yarn rw build สิ่งนี้จะสร้าง web/dist โฟลเดอร์ที่มีไฟล์สถิตที่ปรับให้เหมาะสมของคุณ ตรวจสอบผลลัพธ์การสร้าง ตรวจสอบว่า web/dist โฟลเดอร์มี index html พร้อมกับทรัพยากรที่จำเป็นทั้งหมด 7 2 จัดระเบียบและคอมมิตโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรมีซอร์สโค้ดทั้งหมดสำหรับแอปพลิเคชัน redwoodjs ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json การส่งข้อมูลไปยัง github เริ่มต้น git (ถ้าจำเป็น) git init จัดเตรียมไฟล์ของคุณ git add บันทึกโค้ดของคุณ git commit m "initial commit for redwoodjs crud frontend" สร้างที่เก็บข้อมูล github (เช่น, basic crud app redwood ) และส่งโค้ดของคุณ git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 รวมเข้ากับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ จากแดชบอร์ด back4app ของคุณภายใต้โปรเจกต์ของคุณ (basic crud app redwood) เชื่อมต่อบัญชี github ของคุณ หากคุณยังไม่ได้ทำตามคำแนะนำ เลือกที่เก็บและสาขาของคุณ (เช่น, main ) ที่มีโค้ด redwoodjs ของคุณ 7 4 ตั้งค่าพารามิเตอร์การปรับใช้ คำสั่งสร้าง ระบุ yarn rw build หากที่เก็บของคุณไม่มีการแจกจ่ายที่สร้างไว้ล่วงหน้า ไดเรกทอรีผลลัพธ์ กำหนดค่าไดเรกทอรีผลลัพธ์เป็น web/dist ตัวแปรสภาพแวดล้อม รวมตัวแปรสภาพแวดล้อมที่จำเป็น เช่น คีย์ back4app ของคุณ 7 5 การสร้างคอนเทนเนอร์ด้วย docker หากคุณชอบ docker สำหรับการปรับใช้ ให้รวม dockerfile ในที่เก็บของคุณ ตัวอย่างเช่น \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 การปรับใช้แอปพลิเคชัน กดปุ่ม deploy ใน back4app หลังจากที่คุณได้ทำการกำหนดค่าของคุณเสร็จสิ้นแล้ว ติดตามกระบวนการปรับใช้ back4app จะดึงโค้ดของคุณ สร้างโปรเจกต์ และปรับใช้ในสภาพแวดล้อมที่มีการบรรจุภัณฑ์ ดึง url ของแอปพลิเคชันของคุณ เมื่อปรับใช้แล้ว จะมี url ที่ให้ไว้ซึ่งแอปพลิเคชัน redwoodjs ของคุณถูกโฮสต์ 7 7 ตรวจสอบการปรับใช้ของคุณ เปิด url ที่ให้ไว้ ในเบราว์เซอร์ของคุณเพื่อยืนยันว่าเว็บไซต์โหลด ทดสอบฟังก์ชันการทำงานของแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าหน้า เส้นทาง และทรัพย์สินทั้งหมดโหลดอย่างถูกต้อง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึกการปรับใช้ back4app สำหรับการดีบักที่จำเป็น ขั้นตอนที่ 8 – ความคิดสุดท้ายและทิศทางในอนาคต ขอแสดงความยินดีที่คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ redwoodjs โดยใช้ back4app! คุณได้ตั้งค่าโครงการที่ชื่อว่า basic crud app redwood , สร้างคอลเลกชันฐานข้อมูลที่ละเอียดสำหรับรายการและผู้ใช้ และรวมส่วนหน้าที่สะอาดเข้ากับการจัดการข้อมูลที่แข็งแกร่งและความปลอดภัย ต่อไปคืออะไร? ปรับปรุงส่วนหน้าของคุณ เพิ่มฟีเจอร์ในแอปพลิเคชัน redwoodjs ของคุณ เช่น หน้าแสดงรายละเอียดรายการ ฟังก์ชันการค้นหา และการอัปเดตแบบเรียลไทม์ รวมฟีเจอร์ขั้นสูง พิจารณาเพิ่มฟังก์ชันที่ไม่มีเซิร์ฟเวอร์ การรวมระบบจากบุคคลที่สาม หรือการควบคุมการเข้าถึงที่ซับซ้อนมากขึ้น สำรวจแหล่งข้อมูลเพิ่มเติม ดำดิ่งลึกลงไปใน เอกสาร back4app https //www back4app com/docs และ คู่มือ redwoodjs https //redwoodjs com/docs เพื่อการปรับปรุงเพิ่มเติม โดยการติดตามบทแนะนำนี้ คุณมีความรู้ในการพัฒนาพื้นหลัง crud ที่สามารถปรับขนาดได้และรวมเข้ากับส่วนหน้าที่ทันสมัยของ redwoodjs ได้อย่างราบรื่นโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!