How to Create a CRUD Application with Remix?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ remix js เราจะใช้ back4app เป็นบริการแบ็คเอนด์ของเราเพื่อจัดการการจัดเก็บข้อมูลอย่างราบรื่น คู่มือนี้ครอบคลุมการตั้งค่าโครงการ back4app การออกแบบสคีมาข้อมูลแบบไดนามิก และการเชื่อมต่อการดำเนินการ crud ในแอปพลิเคชัน remix js ของคุณ ในตอนแรก คุณจะตั้งค่าโครงการ back4app ซึ่งเราจะเรียกว่า basic crud app remix , ซึ่งให้บริการที่เก็บข้อมูลแบบไม่สัมพันธ์ที่สามารถขยายได้ จากนั้น คุณจะสร้างโมเดลข้อมูลโดยการสร้างคอลเลกชันและฟิลด์ด้วยตนเองผ่านแดชบอร์ด back4app หรือแม้แต่ใช้ ai agent ที่รวมอยู่สำหรับการตั้งค่าอัตโนมัติ ถัดไป คุณจะสำรวจแอปพลิเคชัน back4app admin—อินเทอร์เฟซที่ใช้งานง่ายที่ช่วยให้คุณจัดการข้อมูลได้อย่างง่ายดายโดยใช้การลากและวาง สุดท้าย คุณจะเชื่อมต่อแอปพลิเคชัน remix js ของคุณกับ back4app ผ่านการเรียก rest api เพื่อให้แน่ใจว่าฟังก์ชัน crud ของคุณ รวมถึงการตรวจสอบสิทธิ์ผู้ใช้ มีความแข็งแกร่งและปลอดภัย เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชัน remix js ที่พร้อมใช้งานในระดับการผลิต ซึ่งสามารถทำการดำเนินการ crud พื้นฐานพร้อมกับการจัดการผู้ใช้ที่ปลอดภัยได้ สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอป crud ด้วย remix js และแบ็คเอนด์ที่เชื่อถือได้ แนวทางปฏิบัติที่ดีที่สุดในการจัดโครงสร้างแบ็คเอนด์ของคุณและการรวมเข้ากับฟรอนต์เอนด์ remix js วิธีการใช้แอป back4app admin เพื่อทำให้การจัดการข้อมูลง่ายขึ้น เทคนิคในการปรับใช้แอปพลิเคชัน remix js ของคุณ รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app พร้อมโครงการใหม่ที่พร้อมใช้งาน ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา remix js ที่ใช้งานได้ คุณสามารถใช้โปรแกรมแก้ไขโค้ดสมัยใหม่ใดก็ได้ เช่น vs code ต้องติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, react และ restful apis หากต้องการทบทวน ให้ตรวจสอบ เอกสาร remix https //remix run/docs ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ของคุณ การเริ่มต้นโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ กดปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app remix และทำตามขั้นตอนเพื่อเสร็จสิ้นกระบวนการสร้าง สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณพร้อมแล้ว มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งเป็นพื้นฐานสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 2 – การสร้างโมเดลข้อมูลของคุณ การสร้างโครงสร้างข้อมูล สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชันใน back4app ด้านล่างนี้คือตัวอย่างของคอลเลกชันหลักและฟิลด์ที่จะสนับสนุนฟังก์ชันการทำงาน crud ของคุณ 1\ คอลเลกชันรายการ การรวบรวมนี้จะเก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ สร้างหมายเลขประจำตัวที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ที่อธิบายรายการ สร้างเมื่อ วันที่ เวลาที่เพิ่มรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการแก้ไขล่าสุด 2\ การเก็บรวบรวมผู้ใช้ การรวบรวมนี้จัดการข้อมูลประจำตัวของผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสเพื่อการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่บัญชีถูกอัปเดต คุณสามารถสร้างคอลเลกชันเหล่านี้และเพิ่มฟิลด์โดยตรงจากแดชบอร์ด back4app สร้างชั้นเรียนใหม่ ในการเพิ่มฟิลด์ใหม่ เพียงแค่เลือกประเภทข้อมูล ป้อนชื่อฟิลด์ และตั้งค่าเริ่มต้นหรือทางเลือกที่จำเป็นตามต้องการ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema เอเจนต์ ai ที่รวมเข้ากับ back4app สามารถสร้างสคีมาของคุณโดยอัตโนมัติตามคำอธิบายของคุณ ทำให้การตั้งค่าเริ่มต้นเป็นไปอย่างราบรื่น วิธีการใช้เอเจนต์ ai เข้าถึงเอเจนต์ ai เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหาเอเจนต์ ai ในการตั้งค่าโปรเจกต์ของคุณ อธิบายโมเดลข้อมูลของคุณ ให้คำอธิบายโดยละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน เอเจนต์ ai จะนำเสนอสคีมาที่เสนอ ตรวจสอบรายละเอียดและยืนยันการตั้งค่า ตัวอย่างคำสั่ง create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีการที่ช่วยโดย ai นี้ช่วยเร่งกระบวนการและทำให้แน่ใจว่าสคีมาของคุณถูกปรับให้เหมาะสมกับความต้องการของแอปของคุณอย่างสมบูรณ์ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดซึ่งทำให้การจัดการข้อมูลด้านหลังง่ายขึ้น ฟีเจอร์การลากและวางทำให้การดำเนินการ crud—เช่น การเพิ่ม แก้ไข และลบระเบียน—เป็นไปอย่างมีสติปัญญามากขึ้น การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าบัญชีผู้ดูแลระบบของคุณ โดยการป้อนข้อมูลประจำตัวของคุณ นี่จะกำหนดบทบาท (เช่น b4aadminuser ) และคลาสระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณได้อย่างง่ายดาย แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการงาน crud ผ่านแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มระเบียนใหม่ ใช้ปุ่ม “เพิ่มระเบียน” ภายในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ ตรวจสอบและแก้ไขระเบียน คลิกที่ระเบียนใด ๆ เพื่อดูรายละเอียดและทำการแก้ไข ลบระเบียน ลบระเบียนใด ๆ ที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยเพิ่มประสบการณ์การจัดการข้อมูลของคุณอย่างมาก ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน remix js ของคุณกับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าแล้ว ถึงเวลาที่จะรวมแอป remix js ของคุณกับ back4app การใช้ rest api calls ใน remix js เนื่องจาก parse sdk มักจะไม่ถูกใช้ร่วมกับ remix js คุณจะทำการดำเนินการ crud ผ่านคำขอ rest api 1\ การตั้งค่าโปรเจกต์ remix js ของคุณ หากคุณยังไม่ได้ทำ ให้สร้างโปรเจกต์ remix ใหม่ npx create remix\@latest ทำตามคำแนะนำเพื่อเลือกเป้าหมายการปรับใช้ของคุณ 2\ การทำคำขอ api จาก remix สร้างไฟล์เส้นทาง api ภายใต้ app/routes ไดเรกทอรีเพื่อจัดการการดำเนินการ crud ตัวอย่างเช่น คุณอาจมีไฟล์ที่เรียกว่า items server js ที่รวมฟังก์ชันสำหรับการดึงข้อมูล การสร้าง การอัปเดต และการลบรายการ ตัวอย่าง การดึงรายการ // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } ในทำนองเดียวกัน คุณสามารถสร้างเส้นทาง post, put และ delete เพื่อจัดการการสร้าง การอัปเดต และการลบรายการ 3\ การเชื่อมต่อส่วนประกอบ ui ในคอมโพเนนต์ remix ของคุณ คุณสามารถใช้ hooks เช่น useloaderdata เพื่อดึงข้อมูลและ fetch ฟังก์ชัน api หรือฟังก์ชันการกระทำเพื่อส่งข้อมูลกลับไปยัง back4app ตัวอย่างเช่น ในคอมโพเนนต์ react ของคุณ // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } รวม api ที่คล้ายกันสำหรับการอัปเดตและลบในการกระทำ remix ของคุณ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) เสริมความปลอดภัยของข้อมูลโดยการตั้งค่า acls สำหรับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่เข้าถึงได้เฉพาะโดยผู้สร้าง // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { const response = await fetch("https //parseapi back4app com/classes/items", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } การอนุญาตในระดับคลาส (clps) ปรับ clps ในแดชบอร์ด back4app ของคุณเพื่อบังคับใช้นโยบายความปลอดภัยเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงคอลเลกชันเฉพาะได้ ขั้นตอนที่ 6 – การเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าการจัดการผู้ใช้ back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นใน parse สำหรับการจัดการการพิสูจน์ตัวตน ในแอปพลิเคชัน remix ของคุณ ให้จัดการการลงทะเบียนผู้ใช้และการเข้าสู่ระบบโดยใช้การเรียก api ตัวอย่าง จุดสิ้นสุดการลงทะเบียนผู้ใช้ // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); const response = await fetch("https //parseapi back4app com/users", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", }, body json stringify({ username, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } ดำเนินการสร้างจุดสิ้นสุดที่คล้ายกันสำหรับการเข้าสู่ระบบ การจัดการเซสชัน และการรีเซ็ตรหัสผ่าน ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน remix js ของคุณ back4app รองรับการปรับใช้ที่ราบรื่น คุณสามารถปรับใช้แอป remix js ของคุณโดยใช้กลยุทธ์ต่างๆ รวมถึง docker 7 1 การสร้างแอปพลิเคชัน remix js ของคุณ การคอมไพล์และบันเดิล ใช้ตัวจัดการแพ็คเกจและสคริปต์การสร้างของคุณ (เช่น ผ่าน npm run build ) เพื่อคอมไพล์แอปของคุณ ตรวจสอบผลลัพธ์ ตรวจสอบให้แน่ใจว่าผลลัพธ์การสร้างของคุณมีไฟล์ที่จำเป็นทั้งหมด 7 2 ตัวอย่างโครงสร้างโปรเจกต์ โปรเจกต์ remix js ที่เป็นมาตรฐานอาจมีลักษณะดังนี้ basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 3 การทำ dockerize แอปพลิเคชันของคุณ หากคุณเลือกการทำคอนเทนเนอร์ ให้เพิ่ม dockerfile ในรากของโปรเจกต์ของคุณ \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมต่อที่เก็บของคุณ โฮสต์โค้ดแหล่ง remix js ของคุณบน github กำหนดค่าการปรับใช้ ในแดชบอร์ด back4app ของคุณ ให้เลือก web deployment ฟีเจอร์ เชื่อมโยงที่เก็บของคุณ (เช่น basic crud app remix ) และเลือกสาขาที่ถูกต้อง ตั้งค่าคำสั่ง build และ output ระบุคำสั่งสร้างของคุณ (เช่น npm run build ) และไดเรกทอรีผลลัพธ์ ปรับใช้แอปของคุณ คลิก deploy และติดตามบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud โดยใช้ remix js ที่รวมเข้ากับ back4app แล้ว ในคู่มือนี้ คุณได้ตั้งค่าโครงการที่เรียกว่า basic crud app remix , กำหนดคอลเลกชันสำหรับ items และ users และจัดการข้อมูลผ่าน back4app admin app จากนั้นคุณได้เชื่อมต่อแอป remix js ของคุณกับ back4app ผ่านการเรียก rest api และดำเนินการรับรองความถูกต้องของผู้ใช้และมาตรการป้องกันข้อมูลอย่างปลอดภัย ขั้นตอนถัดไป ปรับปรุงแอปพลิเคชันของคุณ พิจารณาเพิ่มฟีเจอร์เพิ่มเติม เช่น ฟังก์ชันการค้นหา, การดูรายละเอียดรายการ หรือการอัปเดตแบบเรียลไทม์ ขยายความสามารถของ backend มองหาฟังก์ชันคลาวด์, การรวม api ภายนอก หรือการควบคุมการเข้าถึงที่ซับซ้อนมากขึ้น เรียนรู้ต่อไป เยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจบทเรียน remix js เพิ่มเติมเพื่อเพิ่มประสิทธิภาพแอปของคุณ ขอให้สนุกกับการเขียนโค้ดและขอให้โชคดีในเส้นทาง remix js ของคุณ!