How to Build a Redwood.js Frontend and Connect It to a Backend?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการที่ต้องทำโดยใช้ redwood js และเชื่อมต่อกับแบ็กเอนด์ที่จัดการบน back4app คู่มือนี้จะพาคุณผ่านทุกขั้นตอน—ตั้งแต่การตั้งค่าโปรเจกต์ redwood js ของคุณไปจนถึงการรวม parse สำหรับการสื่อสารแบ็กเอนด์—เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างส่วนติดต่อผู้ใช้ที่มีพลศาสตร์และตอบสนองได้ redwood js ถูกออกแบบมาเพื่อลดความซับซ้อนในการพัฒนาแบบฟูลสแต็กโดยการรวมส่วนหน้าที่ใช้ react สมัยใหม่เข้ากับสถาปัตยกรรมแบ็กเอนด์ที่แข็งแกร่ง ในบทแนะนำนี้ คุณจะใช้ back4app เพื่อจัดการบริการแบ็กเอนด์ของคุณ ทำให้คุณสามารถดำเนินการ crud ที่จำเป็นได้โดยไม่ต้องยุ่งยากกับการจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อคิดสำคัญ เมื่อสิ้นสุดคู่มือนี้ คุณจะสามารถ เริ่มต้นโปรเจกต์ redwood js สมัยใหม่ด้วยเครื่องมือมาตรฐานในอุตสาหกรรม เชื่อมต่อส่วนหน้าของ redwood js ของคุณกับแบ็กเอนด์ back4app โดยใช้ parse javascript sdk ดำเนินการ crud เพื่อจัดการกับ รายการที่ต้องทำ บรรจุแอป redwood js ของคุณและปรับใช้ผ่าน back4app web deployment ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ node js และ npm/yarn ติดตั้งบนเครื่องของคุณ ตรวจสอบการติดตั้งด้วย node v และ npm v หรือ yarn v ความรู้พื้นฐานเกี่ยวกับ redwood js , รวมถึงโครงสร้างโปรเจกต์ การจัดการเส้นทาง และส่วนประกอบ ความคุ้นเคยกับแนวคิด react จะเป็นประโยชน์ บัญชี back4app เพื่อจัดตั้งและจัดการบริการแบ็กเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากจำเป็น เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโปรเจกต์ redwood js ของคุณและเชื่อมต่อกับแบ็กเอนด์ที่สามารถปรับขนาดได้ การตั้งค่าโครงการ เริ่มต้นโดยการสร้างแอปพลิเคชัน redwood js ใหม่ เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้ โดยแทนที่ todo app ด้วยชื่อโครงการที่คุณต้องการ yarn create redwood app todo app นำทางไปยังไดเรกทอรีโครงการของคุณ cd todo app ติดตั้งทุกความต้องการ yarn install รันเซิร์ฟเวอร์พัฒนาเพื่อตรวจสอบว่าโครงการของคุณถูกตั้งค่าอย่างถูกต้อง yarn rw dev ไปที่ url ที่แสดงในเทอร์มินัลของคุณเพื่อยืนยันว่าแอป redwood js ของคุณกำลังทำงานอยู่ การตั้งค่าพื้นหลัง todo บน back4app back4app ให้บริการ parse backend ที่จัดการได้ซึ่งทำให้การจัดการข้อมูลสำหรับแอปพลิเคชันของคุณง่ายขึ้น ในส่วนนี้ คุณจะสร้างโมเดลข้อมูลเพื่อเก็บงานสำหรับรายการที่ต้องทำของคุณ การสร้างแอปพลิเคชันพื้นหลังของคุณ เข้าสู่ระบบที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่ " ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todoredwoodapp ) และเลือก nodejs/parse เป็นประเภทพื้นหลัง ใน "ฐานข้อมูล" > "เบราว์เซอร์" ให้คลิก "สร้างคลาส" และเลือก "กำหนดเอง " ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตระดับคลาสให้อนุญาตการอ่านและเขียนสาธารณะ (ปรับการตั้งค่าเหล่านี้ในภายหลังตามที่ต้องการ) เพิ่มฟิลด์ต่อไปนี้ใน task คลาส title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – ว่างานเสร็จสิ้นหรือไม่ duedate (date) – กำหนดเวลาสำหรับงาน คลิก "บันทึก" เพื่อสรุปสคีมา การรวม back4app กับ redwood js ในการเชื่อมต่อแอป redwood js ของคุณกับ back4app ให้ติดตั้ง parse javascript sdk yarn add parse ถัดไป ให้กำหนดค่า parse โดยการสร้างไฟล์ใหม่ใน web/src ไดเรกทอรี ตั้งชื่อว่า parseclient js และเพิ่มโค้ดต่อไปนี้ เปลี่ยน 'your application id' และ 'your javascript key' ด้วยข้อมูลประจำตัวของคุณจากแดชบอร์ด back4app (ภายใต้ app settings > security & keys ) // web/src/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 การตั้งค่านี้ช่วยให้คุณสามารถเรียกใช้วิธีการของ parse จากคอมโพเนนต์ใด ๆ ของ redwood js การสร้างส่วนหน้าโดยใช้ redwood js เมื่อเชื่อมต่อกับแบ็คเอนด์แล้ว ถึงเวลาสร้างอินเทอร์เฟซรายการที่ต้องทำ ใน redwood js หน้าจะถูกวางไว้ภายใต้ web/src/pages ไดเรกทอรี การสร้างหน้า todo สร้างโฟลเดอร์ใหม่ชื่อ todopage ใน web/src/pages และเพิ่มไฟล์ชื่อ todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx เปิด web/src/pages/todopage/todopage jsx และเพิ่มโค้ดต่อไปนี้ // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) 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) } } const addtask = 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() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? 'completed' ''}`} \> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage การกำหนดเส้นทาง เพื่อให้หน้า todo ของคุณเข้าถึงได้ ให้เปิดไฟล์ routes jsx ที่ตั้งอยู่ใน web/src/routes jsx และเพิ่มเส้นทางใหม่ // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; การเพิ่มสไตล์ทั่วโลก เพื่อเพิ่มสไตล์ทั่วโลก ให้เพิ่ม css สไตล์ด้านล่างลงในไฟล์ css ที่ชื่อว่า index css ใน web/src โฟลเดอร์ / web/src/index css / 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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; } } แอป redwood js ของคุณตอนนี้มีอินเทอร์เฟซรายการที่ต้องทำที่ใช้งานได้ซึ่งเชื่อมต่อกับแบ็กเอนด์ back4app การบรรจุและปรับใช้แอป redwood js ของคุณบน back4app การปรับใช้เว็บ back4app เสนอสิ่งแวดล้อมที่บรรจุซึ่งทำให้การปรับใช้แอปง่ายขึ้น ในส่วนนี้ คุณจะบรรจุแอป redwood js ของคุณลงในคอนเทนเนอร์ docker และปรับใช้มัน การเตรียมแอปของคุณสำหรับการผลิต เริ่มต้น สร้างแอป redwood js ของคุณสำหรับการผลิต yarn rw build web การสร้าง dockerfile ในการตั้งค่า docker สำหรับโปรเจกต์ redwood js ของคุณ คุณต้องรันคำสั่งตั้งค่า docker ในเทอร์มินัลของคุณ yarn rw setup docker คำสั่งตั้งค่าทำงานหลายอย่าง มันสร้างไฟล์สี่ไฟล์ dockerfile, dockerignore, docker compose dev yml, และ docker compose prod yml มันเพิ่มแพ็คเกจ @redwoodjs/api server ไปยัง api ด้านและแพ็คเกจ @redwoodjs/web server ไปยังด้านเว็บ มันอัปเดตการตั้งค่า browser open ใน redwood toml หากการตั้งค่านี้ยังคงเป็นจริง จะทำให้เซิร์ฟเวอร์พัฒนาขัดข้องเมื่อรัน docker compose dev yml คำสั่งนี้ให้ dockerfile ที่สร้างแอปพลิเคชัน redwood js ของคุณและเตรียมภาพการผลิตโดยใช้ node js runtime ที่น้อยที่สุด คุณสามารถเริ่มไฟล์ dev compose ด้วย docker compose f /docker compose dev yml up เปิด http //localhost 8390 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป redwood js ของคุณทำงานถูกต้อง การปรับใช้ผ่าน back4app web deployment ผลักดันโปรเจกต์ของคุณไปยัง 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 https //www back4app com/containers และทำตามขั้นตอนเหล่านี้ คลิก "สร้างแอปใหม่" และกรอกรายละเอียดโปรเจกต์ของคุณ เลือก github repository และอนุญาตให้ back4app เลือก todo redwood repository เลือก dockerfile deployment และตรวจสอบการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มกระบวนการปรับใช้ หลังจากการปรับใช้ ใช้ back4app dashboard เพื่อตรวจสอบบันทึก จัดการการสร้าง และตั้งค่าโดเมนที่กำหนดเองหากจำเป็น การทดสอบและการดีบักแอปพลิเคชันของคุณ เมื่อปรับใช้แล้ว ให้แน่ใจว่าแอปของคุณทำงานตามที่คาดหวัง การเชื่อมต่อ api ใช้เครื่องมือพัฒนาเบราว์เซอร์เพื่อตรวจสอบว่าคำขอ api สำหรับการเพิ่ม การสลับ และการลบงานประสบความสำเร็จ การเก็บข้อมูล เพิ่มงานผ่าน ui และรีเฟรชเพื่อยืนยันว่างานยังคงอยู่ในฐานข้อมูล back4app การดำเนินการ crud ทดสอบการสลับและลบงานในขณะที่ตรวจสอบข้อผิดพลาดในคอนโซลหรือบันทึก api กรณีขอบ ตรวจสอบให้แน่ใจว่าการตรวจสอบข้อมูลป้องกันการส่งข้อมูลว่าง แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับการปรับแต่ง สำหรับแอปพลิเคชันที่ปลอดภัยและมีประสิทธิภาพ ให้พิจารณาดังต่อไปนี้ ปรับแต่งคำขอ api ใช้การประมวลผลแบบกลุ่มและดึงเฉพาะฟิลด์ที่จำเป็น ตัวแปรสภาพแวดล้อม ปกป้องข้อมูลรับรองที่สำคัญ (application id และ javascript key) โดยใช้ตัวแปรสภาพแวดล้อม การควบคุมการเข้าถึง ใช้ acl แบบไดนามิกเพื่อให้เฉพาะผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูล โค้ดคลาวด์ โอนภาระงานที่ซับซ้อนไปยัง back4app cloud code เพื่อปรับปรุงประสิทธิภาพและความปลอดภัย บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กโดยใช้ redwood js ที่รวมเข้ากับ back4app backend แล้ว บทเรียนนี้ครอบคลุมทุกอย่างตั้งแต่การเริ่มต้นโครงการและการรวม backend ไปจนถึงการปรับใช้ในรูปแบบคอนเทนเนอร์ เมื่อคุณพัฒนาต่อไป ให้พิจารณาเพิ่มฟีเจอร์เช่นการจัดการผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบุคคลที่สาม สำหรับข้อมูลเพิ่มเติม ให้สำรวจ เอกสาร back4app https //www back4app com/docs และทรัพยากรของ redwood js