วิธีสร้างส่วนหน้าของ Remix และเชื่อมต่อกับส่วนหลัง?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการที่ต้องทำโดยใช้ remix และเชื่อมต่อกับบริการแบ็กเอนด์ที่จัดการบน back4app คู่มือนี้ออกแบบมาเพื่อช่วยให้คุณเชี่ยวชาญการดำเนินการ crud ที่สำคัญและออกแบบส่วนติดต่อผู้ใช้ที่มีพลศาสตร์โดยใช้ remix การสร้างแอปพลิเคชันแบบฟูลสแต็กเกี่ยวข้องกับการตั้งค่าทั้งส่วนหน้าและส่วนหลัง โดยการใช้ back4app คุณสามารถใช้ประโยชน์จากแบ็กเอนด์ที่สามารถปรับขนาดได้ (baas) ดังนั้นคุณจึงสามารถมุ่งเน้นไปที่การสร้างประสบการณ์ผู้ใช้ที่น่าสนใจโดยไม่ต้องยุ่งยากกับการกำหนดค่าเซิร์ฟเวอร์ back4app มีฐานข้อมูลที่พร้อมใช้งาน การตรวจสอบสิทธิ์ ฟังก์ชันคลาวด์ และ sdk สำหรับการรวมเข้าที่ราบรื่น ด้วยความสามารถเหล่านี้ คุณสามารถสร้างต้นแบบ สร้าง และปรับใช้แอปพลิเคชัน remix ของคุณได้อย่างรวดเร็ว ข้อคิดสำคัญ โดยการติดตามบทแนะนำนี้ คุณจะ เริ่มต้นโครงการ remix สมัยใหม่โดยใช้เครื่องมือมาตรฐานในอุตสาหกรรม เชื่อมต่อส่วนหน้าของ remix ของคุณกับแบ็กเอนด์ back4app โดยใช้ parse sdk ดำเนินการ crud เพื่อจัดการกับ รายการที่ต้องทำ บรรจุแอป remix ของคุณและปรับใช้ผ่าน back4app web deployment ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ node js และ npm ติดตั้งในระบบของคุณ ตรวจสอบโดยการรัน node v และ npm v ในเทอร์มินัลของคุณ ความรู้พื้นฐานเกี่ยวกับ remix , รวมถึงการจัดการเส้นทาง ตัวโหลด และการดำเนินการ ความคุ้นเคยกับแนวคิดของ react จะเป็นประโยชน์เนื่องจาก remix สร้างขึ้นจาก react บัญชี back4app เพื่อกำหนดค่าและจัดการบริการแบ็กเอนด์ของคุณ ลงทะเบียนที่ back4app https //www back4app com/ หากคุณยังไม่ได้ลงทะเบียน ด้วยเครื่องมือเหล่านี้ในมือ คุณพร้อมที่จะสร้างแอปพลิเคชัน remix ของคุณและรวมเข้ากับแบ็กเอนด์ที่แข็งแกร่ง การตั้งค่าโครงการ ก่อนอื่นให้ตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโครงการ remix ของคุณ นี่จะช่วยให้คุณมีพื้นฐานที่สะอาดและมีประสิทธิภาพสำหรับแอปพลิเคชันของคุณ เริ่มต้นด้วยการติดตั้งโครงการ remix โดยใช้คำสั่งต่อไปนี้ เปลี่ยน todo app เป็นชื่อโครงการที่คุณต้องการ npx create remix\@latest todo app นำทางไปยังไดเรกทอรีโครงการใหม่ของคุณ cd todo app เรียกใช้เซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบว่าทุกอย่างทำงานได้ npm run dev เปิด url ที่ให้ไว้ในเทอร์มินัลของคุณเพื่อตรวจสอบว่าแอป remix ของคุณทำงานสำเร็จ การตั้งค่าพื้นหลัง todo บน back4app back4app เสนอ backend ที่มีการจัดการที่ทรงพลังซึ่งขับเคลื่อนโดย parse คุณจะสร้างโมเดลข้อมูลสำหรับงานของคุณ ซึ่งจะทำหน้าที่เป็นกระดูกสันหลังสำหรับแอปพลิเคชัน to do list ของคุณ การสร้างแอปพลิเคชัน backend ของคุณ เข้าสู่ระบบที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todoremixapp ) และเลือก nodejs/parse เป็นประเภท backend ใน "ฐานข้อมูล" > "เบราว์เซอร์" ส่วน, คลิก "สร้างคลาส" และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่าการอนุญาตระดับคลาสให้อนุญาตการอ่านและเขียนสาธารณะ (คุณสามารถปรับแต่งการตั้งค่าเหล่านี้ได้ในภายหลัง) เพิ่มฟิลด์ต่อไปนี้ใน task คลาส title (string) – ชื่อของงาน description (string) – รายละเอียดเกี่ยวกับงาน completed (boolean) – ระบุว่างานเสร็จสิ้นหรือไม่ duedate (date) – กำหนดเส้นตายสำหรับงาน คลิก "บันทึก" เพื่อสรุปสคีมา การรวม back4app กับ remix คุณจะใช้ parse javascript sdk เพื่อเชื่อมต่อแอป remix ของคุณกับ back4app ติดตั้ง sdk โดยการรัน npm install parse ถัดไป ให้กำหนดค่า parse ภายในแอป remix ของคุณ เปิดไฟล์ app/root tsx และเพิ่มโค้ดการเริ่มต้นต่อไปนี้ที่ด้านบน แทนที่ 'your application id' และ 'your javascript key' ด้วยข้อมูลประจำตัวของคุณจาก back4app dashboard (ภายใต้ app settings > security & keys ) // app/root tsx import parse from "parse"; import react from "react"; 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 as any) serverurl = parse server url; เพื่อให้แน่ใจว่า parse ได้รับการเริ่มต้นอย่างสมบูรณ์เมื่อฟังก์ชันโหลดของคุณทำงาน โดยเฉพาะอย่างยิ่งในฝั่งเซิร์ฟเวอร์ เพิ่มโค้ดนี้ใน layout ฟังก์ชันใน root tsx ไฟล์ // app/root tsx export function layout({ children } { children react reactnode }) { react useeffect(() => { if (typeof window !== 'undefined') { parse initialize(parse app id, parse js key); (parse as any) serverurl = "https //parseapi back4app com/"; } }, \[]); // rest of the layout function } การตั้งค่านี้ช่วยให้เส้นทางและการกระทำของ remix ของคุณสามารถโต้ตอบกับแบ็กเอนด์ back4app ได้อย่างราบรื่น การสร้างส่วนหน้าโดยใช้ remix เมื่อคุณตั้งค่าแบ็กเอนด์เสร็จแล้ว คุณจะสร้างอินเทอร์เฟซ to do list โดยใช้ remix ซึ่งเกี่ยวข้องกับการสร้างเส้นทาง, โหลดเดอร์, และการกระทำเพื่อจัดการการดึงข้อมูลและการเปลี่ยนแปลง การจัดโครงสร้างเส้นทางของคุณ ใน remix เส้นทางแต่ละเส้นทางจะตรงกับไฟล์ภายใต้ app/routes ไดเรกทอรี เปิด app/routes/ index tsx และเพิ่มโค้ดต่อไปนี้เพื่อกำหนดโครงสร้างและการดำเนินการข้อมูลของหน้า // app/routes/ index tsx import { json, redirect } from "@remix run/node"; import { useloaderdata, form } from "@remix run/react"; import as parse from "parse"; export const loader = async () => { if (typeof window === "undefined") { try { const response = await fetch( "https //parseapi back4app com/classes/task", { headers { "x parse application id" "your application id", "x parse javascript key" "your javascript key", }, } ); const data = await response json(); return json({ tasks data results map((task) => ({ id task objectid, task })), }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } else { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); const tasks = results map((task) => ({ id task id, task tojson() })); return json({ tasks }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } }; export const action = async ({ request }) => { const formdata = await request formdata(); const actiontype = formdata get("actiontype"); // parse server details const parseserverurl = "https //parseapi back4app com"; const headers = { "x parse application id" "your application id", "x parse javascript key" "your javascript key", "content type" "application/json", }; try { if (actiontype === "add") { const title = formdata get("title"); const description = formdata get("description"); // create task using rest api const response = await fetch(`${parseserverurl}/classes/task`, { method "post", headers, body json stringify({ title, description, completed false, }), }); if (!response ok) { throw new error(`failed to add task ${response status}`); } } else if (actiontype === "toggle") { const id = formdata get("id"); // first get the current task to check its completed status const getresponse = await fetch(`${parseserverurl}/classes/task/${id}`, { headers, }); if (!getresponse ok) { throw new error(`failed to get task ${getresponse status}`); } const task = await getresponse json(); const updateresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "put", headers, body json stringify({ completed !task completed, }), } ); if (!updateresponse ok) { throw new error(`failed to update task ${updateresponse status}`); } } else if (actiontype === "delete") { const id = formdata get("id"); const deleteresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "delete", headers, } ); if (!deleteresponse ok) { throw new error(`failed to delete task ${deleteresponse status}`); } } return redirect("/"); } catch (error) { console error("error processing action ", error); return json({ error error message }, { status 400 }); } }; export default function todoroute() { const { tasks } = useloaderdata(); return ( \<div classname="container"> \<h1>to do list\</h1> \<form method="post" classname="form"> \<input type="hidden" name="actiontype" value="add" /> \<input type="text" name="title" placeholder="task title" required /> \<input type="text" name="description" placeholder="description" 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> \<form method="post"> \<input type="hidden" name="actiontype" value="toggle" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">{task completed ? "undo" "complete"}\</button> \</form> \<form method="post"> \<input type="hidden" name="actiontype" value="delete" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">delete\</button> \</form> \</div> )) )} \</div> \</div> ); } เส้นทางนี้ใช้โหลดเดอร์และการกระทำของ remix เพื่อดึงข้อมูลงานจาก back4app และจัดการกับการโต้ตอบของผู้ใช้ เช่น การเพิ่ม การสลับ และการลบงาน การจัดรูปแบบแอป remix ของคุณ สร้างไฟล์ css ที่ app/global css เพื่อกำหนดรูปลักษณ์และความรู้สึกพื้นฐานของแอปพลิเคชันของคุณ / app/global 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; } } นำเข้าไฟล์ css ใน app/root tsx โดยการเพิ่ม // app/root tsx import " /global css"; แอป remix ของคุณตอนนี้มีอินเทอร์เฟซ to do list ที่ใช้งานได้ซึ่งเชื่อมต่อกับแบ็กเอนด์ของ back4app การบรรจุและการปรับใช้แอป remix ของคุณบน back4app การปรับใช้เว็บ back4app เสนอสิ่งแวดล้อมที่บรรจุสำหรับแอปพลิเคชันของคุณ คุณจะบรรจุแอป remix ของคุณลงในคอนเทนเนอร์ docker และปรับใช้มัน การกำหนดค่า remix สำหรับการผลิต ก่อนที่จะบรรจุ ให้สร้างแอป remix ของคุณเป็นแพ็คเกจที่พร้อมสำหรับการผลิต npm run build การสร้าง dockerfile สร้าง dockerfile ในรากของโปรเจกต์ของคุณด้วยเนื้อหาดังต่อไปนี้ \# stage 1 build the remix app from node 18 alpine as builder workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using a lightweight node server from node 18 alpine workdir /app copy from=builder /app/build /build copy from=builder /app/package json / run npm install production expose 3000 cmd \["npm", "run", "start"] dockerfile นี้จะสร้างโปรเจกต์ remix ของคุณและเตรียมพร้อมสำหรับการผลิตโดยใช้ node js runtime ที่มีขนาดเล็ก การสร้างและทดสอบ docker container ของคุณ สร้างภาพ docker ของคุณในเครื่อง docker build t todo remix frontend เรียกใช้คอนเทนเนอร์เพื่อตรวจสอบการปรับใช้ docker run p 8080 3000 todo remix frontend เยี่ยมชม http //localhost 8080 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าแอป remix ของคุณทำงานถูกต้อง การปรับใช้ผ่าน 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 remix repository เลือก dockerfile deployment และยืนยันการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มการสร้างของคุณ หลังจากการปรับใช้ ให้ติดตามคอนเทนเนอร์ของคุณผ่านแดชบอร์ด back4app คุณสามารถดูบันทึก จัดการการสร้าง และกำหนดค่าชื่อโดเมนที่กำหนดเอง การทดสอบและการดีบักแอปพลิเคชันของคุณ เมื่อปรับใช้แล้ว ให้แน่ใจว่าแอปพลิเคชันของคุณทำงานตามที่คาดหวัง นี่คือวิธีการตรวจสอบการรวมกันของส่วนหน้าและส่วนหลัง การเชื่อมต่อ api เปิดคอนโซลนักพัฒนาของเบราว์เซอร์ของคุณ (f12) และตรวจสอบคำขอเครือข่ายเมื่อเพิ่ม เปลี่ยนสถานะ หรือลบงาน การเก็บข้อมูล เพิ่มงานผ่าน ui และรีเฟรชหน้าเพื่อยืนยันว่ามันถูกบันทึก ตรวจสอบการเปลี่ยนแปลงใน back4app database browser ภายใต้ คลาสงาน การดำเนินการ crud ทดสอบการเปลี่ยนสถานะการเสร็จสิ้นและการลบงาน หากมีปัญหาให้ตรวจสอบคอนโซลและบันทึก api การจัดการกรณีขอบ ลองส่งข้อมูลที่ว่างเปล่าเพื่อให้แน่ใจว่าการตรวจสอบของคุณมีประสิทธิภาพ แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับการเพิ่มประสิทธิภาพ ปฏิบัติตามคำแนะนำเหล่านี้เพื่อเพิ่มความปลอดภัย ประสิทธิภาพ และความสามารถในการปรับขนาด เพิ่มประสิทธิภาพการเรียก api ใช้คำขอแบบกลุ่มและเลือกเฉพาะฟิลด์ที่จำเป็นในคำค้น ตัวแปรสภาพแวดล้อม เก็บกุญแจที่สำคัญ (application id และ javascript key) ในไฟล์ env และอ้างอิงอย่างปลอดภัย การควบคุมการเข้าถึง ใช้ acl แบบไดนามิกเพื่อลดการเปลี่ยนแปลงข้อมูลให้กับผู้ใช้ที่ได้รับการรับรอง โค้ดคลาวด์ ส่งมอบตรรกะที่ซับซ้อนไปยัง back4app cloud code เพื่อเพิ่มประสิทธิภาพและความปลอดภัย บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็กด้วย remix และเชื่อมต่อกับ back4app backend สำเร็จแล้ว บทแนะนำนี้ได้แนะนำคุณในการเริ่มต้นโปรเจกต์ remix การรวมบริการจัดการสำหรับการโต้ตอบกับ backend และการบรรจุแอปพลิเคชันของคุณสำหรับการปรับใช้ ตอนนี้แอปของคุณออนไลน์แล้ว ให้พิจารณาขยายฟีเจอร์ด้วยการจัดการผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ หรือการรวมกับบุคคลที่สาม สำหรับคำแนะนำเพิ่มเติม ให้สำรวจ เอกสาร back4app https //www back4app com/docs และทรัพยากร remix