วิธีสร้างแอป CRUD ด้วย ReactJS?

บทนำ ในบทเรียนนี้ คุณจะสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) ที่ครอบคลุมโดยใช้ reactjs คู่มือนี้ออกแบบมาเพื่อดำเนินการพื้นฐานของแอปพลิเคชันซอฟต์แวร์โดยแสดงให้เห็นว่าคุณจะสร้างแอป crud ที่จัดการและอัปเดตข้อมูลได้อย่างมีประสิทธิภาพได้อย่างไร คุณจะเริ่มต้นด้วยการสร้างและกำหนดค่าโครงการ back4app ที่ชื่อว่า basic crud app reactjs , ซึ่งทำหน้าที่เป็นระบบแบ็คเอนด์ที่แข็งแกร่งสำหรับแอปพลิเคชันเว็บของคุณ ถัดไป คุณจะออกแบบสคีมาฐานข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์โดยละเอียด—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent จากนั้น คุณจะใช้ back4app admin app—เครื่องมือการจัดการที่ใช้งานง่ายพร้อมกับอินเทอร์เฟซแบบลากและวาง—เพื่อจัดการข้อมูลในคอลเลกชันของคุณได้อย่างง่ายดาย อินเทอร์เฟซผู้ดูแลระบบนี้ช่วยปรับปรุงประสบการณ์ของผู้ใช้และทำให้การใช้งานอินเทอร์เฟซง่ายขึ้น ช่วยให้ผู้ใช้สามารถดำเนินการ crud ได้อย่างรวดเร็ว สุดท้าย คุณจะปรับใช้ส่วนหน้า reactjs ของคุณและรวมเข้ากับ back4app โดยใช้ rest/graphql (หรือ parse sdk เมื่อมีให้ใช้) ในขณะที่รักษาความปลอดภัยให้กับแบ็คเอนด์ของคุณด้วยการควบคุมการเข้าถึงขั้นสูง เมื่อสิ้นสุดคู่มือนี้ คุณจะได้สร้างแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิต ซึ่งไม่เพียงแต่รองรับการดำเนินการ crud พื้นฐาน แต่ยังรวมถึงการตรวจสอบสิทธิ์ผู้ใช้และความสามารถในการอัปเดตข้อมูลที่แข็งแกร่งด้วย ข้อคิดสำคัญ เรียนรู้วิธีการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้ระบบการจัดการฐานข้อมูลที่เชื่อถือได้ ได้รับข้อมูลเชิงปฏิบัติเกี่ยวกับการออกแบบแบ็กเอนด์ที่สามารถขยายได้และการรวมเข้ากับฟรอนต์เอนด์ reactjs เพื่อปรับปรุงประสบการณ์ของผู้ใช้ ค้นพบวิธีการใช้เครื่องมือการจัดการแบบลากและวาง (แอป back4app admin) เพื่อทำให้การสร้าง อ่าน อัปเดต และลบข้อมูลง่ายขึ้น เข้าใจเทคนิคการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอปพลิเคชันเว็บของคุณได้อย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app และโปรเจกต์ใหม่ที่ตั้งค่าไว้ หากคุณต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา reactjs ใช้ create react app https //create react app dev/docs/getting started/ หรือเครื่องมือที่คล้ายกัน ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 ขึ้นไป) ความเข้าใจพื้นฐานเกี่ยวกับ javascript, reactjs, และ rest apis ตรวจสอบ เอกสาร reactjs https //reactjs org/docs/getting started html หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ การสร้างโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “new app” ในแดชบอร์ดของคุณ กรอกชื่อโปรเจกต์ basic crud app reactjs และทำตามคำแนะนำเพื่อสร้างโปรเจกต์ของคุณ สร้างโปรเจกต์ใหม่ เมื่อสร้างเสร็จแล้ว โปรเจกต์ใหม่ของคุณจะปรากฏในแดชบอร์ด back4app ของคุณ ซึ่งจะเป็นพื้นฐานที่มั่นคงสำหรับการกำหนดค่าด้านหลังและการจัดการโปรเจกต์ของคุณ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูล การออกแบบโมเดลข้อมูลของคุณ สำหรับแอป crud พื้นฐาน คุณจะสร้างหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างของคอลเลกชันที่คุณจะต้องใช้ โดยระบุฟิลด์และประเภทข้อมูลที่จำเป็นเพื่อช่วยให้คุณตั้งค่ารูปแบบฐานข้อมูลของคุณได้อย่างมีประสิทธิภาพ คอลเลกชันเหล่านี้ถูกออกแบบมาเพื่อดำเนินการ crud พื้นฐานที่ช่วยให้ผู้ใช้สามารถสร้าง อ่าน อัปเดต และลบข้อมูลได้ 1\ คอลเลกชันรายการ คอลเลกชันนี้เก็บข้อมูลเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่รายการถูกปรับปรุงล่าสุด 2\ การรวบรวมผู้ใช้ คอลเลกชันนี้เก็บข้อมูลผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาที่บัญชีผู้ใช้ถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่บัญชีผู้ใช้ถูกอัปเดต คุณสามารถตั้งค่าการรวบรวมเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละการรวบรวมและเพิ่มคอลัมน์เพื่อกำหนดฟิลด์ต่างๆ สร้างคลาสใหม่ คุณสามารถสร้างฟิลด์สำหรับฐานข้อมูลของคุณได้อย่างง่ายดายโดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ตั้งค่าเป็นค่าเริ่มต้น และกำหนดว่าจำเป็นต้องใช้หรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent เป็นเครื่องมือที่ทรงพลังซึ่งสามารถใช้งานได้โดยตรงจากแดชบอร์ด back4app ของคุณ มันช่วยให้คุณสร้างสคีมาฐานข้อมูลของคุณโดยอัตโนมัติตามคำสั่งที่อธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ฟังก์ชันนี้ช่วยประหยัดเวลาอย่างมากสำหรับการจัดการโครงการและช่วยให้แน่ใจว่าระบบการจัดการฐานข้อมูลของคุณถูกตั้งค่าให้ทำงานตามการดำเนินการพื้นฐานที่จำเป็นสำหรับแอปพลิเคชันเว็บของคุณ วิธีการใช้ ai agent เปิด ai agent เข้าสู่ระบบในแดชบอร์ด back4app ของคุณและค้นหา ai agent ในเมนูหรือตั้งค่าโครงการของคุณ อธิบายโมเดลข้อมูลของคุณ ในอินเทอร์เฟซ ai agent ให้วางคำสั่งที่ละเอียดซึ่งระบุถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและใช้ เมื่อส่งแล้ว ai agent จะสร้างคอลเลกชันและการกำหนดฟิลด์ ตรวจสอบข้อเสนอเหล่านี้และนำไปใช้ในโครงการของคุณ ตัวอย่างคำสั่ง create the following collections in my back4app application 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 agent ในลักษณะนี้ช่วยประหยัดเวลาและทำให้แน่ใจว่าสคีมาของคุณมีความสอดคล้องและเหมาะสมกับความต้องการของแอปพลิเคชันของคุณ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app เป็นอินเทอร์เฟซที่ทรงพลังและไม่ต้องเขียนโค้ดที่ช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ของคุณได้ เครื่องมือนี้มีอินเทอร์เฟซผู้ใช้แบบลากและวางที่ช่วยให้ผู้ใช้สามารถดำเนินการ crud ได้อย่างง่ายดาย เช่น การสร้าง อ่าน อัปเดต และลบระเบียน การเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ คลิกที่ “แอปผู้ดูแลระบบ” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” กำหนดค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบคนแรกของคุณ กระบวนการนี้ยังตั้งค่าบทบาท (เช่น, b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การใช้แอปผู้ดูแลระบบสำหรับการดำเนินการ crud ภายในแอปผู้ดูแลระบบคุณสามารถ สร้างบันทึก คลิกที่ปุ่ม “เพิ่มบันทึก” ภายในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ อ่าน/อัปเดตบันทึก เลือกบันทึกใด ๆ เพื่อดูรายละเอียดหรือแก้ไขฟิลด์ เพื่อให้การอัปเดตข้อมูลเป็นไปอย่างราบรื่น ลบบันทึก ใช้ตัวเลือกลบเพื่อลบบันทึกที่ไม่จำเป็นอีกต่อไป เครื่องมือการจัดการที่ใช้งานง่ายนี้ช่วยปรับปรุงประสบการณ์ผู้ใช้โดยรวมโดยการให้ส่วนติดต่อที่เรียบง่ายสำหรับฟังก์ชัน crud ขั้นตอนที่ 4 – การรวม reactjs กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกตั้งค่าและจัดการผ่านแอปผู้ดูแลระบบแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า reactjs ของคุณกับ back4app ตัวเลือก a การใช้ parse sdk ติดตั้ง parse sdk npm install parse เริ่มต้น parse ในแอป react ของคุณ สร้างไฟล์ (เช่น, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // แทนที่ด้วยข้อมูลประจำตัว back4app ของคุณ parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ใช้ parse ในคอมโพเนนต์ react ตัวอย่างเช่น สร้างคอมโพเนนต์เพื่อดึงและแสดงรายการ // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("เกิดข้อผิดพลาดในการดึงรายการ ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>รายการ\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; ตัวเลือก b การใช้ rest หรือ graphql หากสภาพแวดล้อมของคุณไม่รองรับ parse sdk คุณสามารถทำการดำเนินการ crud โดยใช้ rest หรือ graphql ตัวอย่างเช่น เพื่อดึงรายการโดยใช้ rest // example rest call to fetch items 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); รวมการเรียก api เหล่านี้เข้ากับคอมโพเนนต์ react ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ รายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการกำหนด acls ให้กับวัตถุ ตัวอย่างเช่น การสร้างรายการส่วนตัว async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } การอนุญาตระดับคลาส (clps) ในแดชบอร์ด back4app ให้กำหนด clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดกฎการเข้าถึงเริ่มต้น สิ่งนี้จะช่วยให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการตรวจสอบสิทธิ์ ในแอป react ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ดังนี้ // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; วิธีการที่คล้ายกันสามารถใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล และการรีเซ็ตรหัสผ่านสามารถกำหนดค่าได้ในแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend reactjs ของคุณด้วย web deployment ฟีเจอร์ web deployment ของ back4app ช่วยให้คุณโฮสต์ frontend reactjs ของคุณได้อย่างราบรื่นโดยการปรับใช้โค้ดของคุณจาก github repository ในส่วนนี้ คุณจะได้เรียนรู้วิธีการเตรียมการสร้างสำหรับการผลิต คอมมิตโค้ดต้นฉบับของคุณไปยัง github รวม repository ของคุณกับ web deployment และปรับใช้เว็บไซต์ของคุณ 7 1 เตรียมการสร้างสำหรับการผลิตของคุณ เปิดโฟลเดอร์โปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build คำสั่งนี้จะสร้าง build โฟลเดอร์ที่มีไฟล์สแตติกที่ถูกปรับให้เหมาะสมทั้งหมด (รวมถึง index html , javascript, css, และภาพ) ตรวจสอบการสร้าง ตรวจสอบว่า build โฟลเดอร์มีไฟล์ index html พร้อมกับโฟลเดอร์ย่อยที่จำเป็น 7 2 จัดระเบียบและอัปโหลดโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรมีโค้ดต้นฉบับทั้งหมดสำหรับส่วนหน้า reactjs ของคุณ โครงสร้างไฟล์ทั่วไปอาจมีลักษณะดังนี้ basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ไฟล์โค้ดต้นฉบับตัวอย่าง src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init เพิ่มไฟล์ต้นทางของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกของโค้ดต้นทาง reactjs frontend" สร้างที่เก็บ github ตัวอย่างเช่น สร้างที่เก็บชื่อ basic crud app reactjs frontend บน github ผลักดันโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 รวมรีโพซิทอรี github ของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ ไปที่โปรเจกต์ของคุณ (basic crud app reactjs) และคลิกที่ ฟีเจอร์การปรับใช้เว็บ เชื่อมต่อกับ github หากคุณยังไม่ได้ทำ ให้รวมบัญชี github ของคุณโดยทำตามคำแนะนำที่ปรากฏบนหน้าจอ การเชื่อมต่อนี้ช่วยให้ back4app เข้าถึงรีโพซิทอรีของคุณได้ เลือกรีโพซิทอรีและสาขาของคุณ เลือกรีโพซิทอรีที่คุณสร้างขึ้น (เช่น, basic crud app reactjs frontend ) และเลือกสาขา (เช่น, main ) ที่มีโค้ด reactjs ของคุณ 7 4 กำหนดค่าการปรับใช้ของคุณ ให้รายละเอียดการกำหนดค่าเพิ่มเติม คำสั่งสร้าง หากที่เก็บของคุณไม่มี โฟลเดอร์สร้าง , ให้ระบุคำสั่งสร้าง (เช่น, npm run build ) back4app จะเรียกใช้คำสั่งนี้ระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ ตั้งค่าไดเรกทอรีผลลัพธ์เป็น build เพื่อให้ back4app รู้ว่าโฟลเดอร์ใดมีไฟล์เว็บไซต์แบบสแตติกของคุณ ตัวแปรสภาพแวดล้อม หากแอปพลิเคชันของคุณขึ้นอยู่กับตัวแปรสภาพแวดล้อมใด ๆ (เช่น, คีย์ api) ให้เพิ่มพวกเขาในการตั้งค่าการกำหนดค่า 7 5 ทำให้โปรเจกต์แอปพลิเคชัน reactjs ของคุณเป็น docker หากคุณต้องการใช้ docker สำหรับการปรับใช้ คุณสามารถทำให้แอปพลิเคชัน reactjs ของคุณเป็นคอนเทนเนอร์ รวม dockerfile ในที่เก็บของคุณด้วยเนื้อหาที่คล้ายกับต่อไปนี้ \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] รวมไฟล์ dockerfile นี้ในที่เก็บของคุณ จากนั้นในค่าการปรับใช้เว็บของคุณ ให้เลือกตัวเลือกการปรับใช้ docker เพื่อสร้างและปรับใช้แอปพลิเคชันที่บรรจุในคอนเทนเนอร์ของคุณ 7 6 ปรับใช้แอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ เมื่อคุณได้กำหนดค่าการตั้งค่าการปรับใช้แล้ว ให้คลิกที่ ปรับใช้ ปุ่ม ติดตามกระบวนการสร้าง back4app จะดึงโค้ดของคุณจาก github ดำเนินการคำสั่งสร้าง (ถ้ากำหนดค่าไว้) และปรับใช้แอปของคุณภายในคอนเทนเนอร์ รับ url ของคุณ หลังจากการปรับใช้เสร็จสิ้น back4app จะให้ url ที่แอปพลิเคชัน reactjs ของคุณโฮสต์อยู่ 7 7 ตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเว็บเบราว์เซอร์ของคุณเพื่อดูเว็บไซต์ที่ปรับใช้แล้ว ทดสอบแอปพลิเคชัน ตรวจสอบว่าแอปพลิเคชันของคุณโหลดได้อย่างถูกต้อง เส้นทางทั้งหมดทำงานตามที่คาดหวัง และทรัพย์สินทั้งหมด (css, javascript, รูปภาพ) ถูกให้บริการอย่างถูกต้อง แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาในเบราว์เซอร์ของคุณเพื่อตรวจสอบข้อผิดพลาด หากมีปัญหาเกิดขึ้น ให้ตรวจสอบบันทึกการปรับใช้ใน back4app และตรวจสอบการรวม github และการตั้งค่าการสร้างของคุณ ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ขอแสดงความยินดี! คุณได้สร้างแอป crud เบื้องต้นที่สมบูรณ์ด้วย reactjs และ back4app คุณได้กำหนดโปรเจกต์ชื่อ basic crud app reactjs , ออกแบบคอลเลกชันฐานข้อมูลที่ละเอียดสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน admin app ที่ทรงพลัง คุณยังได้รวมส่วนหน้า reactjs ของคุณกับส่วนหลังและปกป้องข้อมูลของคุณด้วยการควบคุมการเข้าถึงที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุงส่วนหน้า ขยายแอป reactjs ของคุณด้วยฟีเจอร์เช่นการดูรายละเอียดของรายการ, ฟังก์ชันการค้นหา, และการแจ้งเตือนแบบเรียลไทม์ รวมฟีเจอร์เพิ่มเติม พิจารณาเพิ่มตรรกะส่วนหลังที่ซับซ้อนมากขึ้น (เช่น cloud functions), การรวม api ของบุคคลที่สาม, หรือการควบคุมการเข้าถึงตามบทบาท สำรวจแหล่งข้อมูลเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs และบทเรียนเพิ่มเติมเพื่อเจาะลึกในด้านการเพิ่มประสิทธิภาพและการรวมที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณมีทักษะในการสร้างแบ็กเอนด์ crud ที่แข็งแกร่งและสามารถขยายได้สำหรับแอปพลิเคชัน reactjs ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!