Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

ภาพรวม คู่มือนี้จะแสดงให้คุณเห็นวิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่มีฟีเจอร์ครบถ้วนโดยใช้ inferno js คุณจะได้เรียนรู้วิธีจัดการการดำเนินการข้อมูลพื้นฐานโดยการพัฒนาระบบ crud ที่จัดการและอัปเดตข้อมูลได้อย่างมีประสิทธิภาพ พื้นฐานด้านแบ็คเอนด์ของเราขับเคลื่อนโดย back4app ซึ่งคุณจะสร้างโปรเจกต์ชื่อ basic crud app infernojs เพื่อจัดการข้อมูลของคุณได้อย่างราบรื่น คุณจะเริ่มต้นด้วยการตั้งค่าโปรเจกต์ back4app ของคุณและออกแบบสคีมาฐานข้อมูลที่สามารถขยายได้โดยการกำหนดคลาสและฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือใช้ back4app ai assistant กระบวนการนี้จะทำให้โครงสร้างข้อมูลของคุณมีความแข็งแกร่งพอสำหรับงาน crud ทั้งหมด หลังจากนั้น คุณจะใช้ส่วนติดต่อผู้ดูแล back4app ซึ่งเป็นเครื่องมือแบบลากและวางที่ไม่ต้องเขียนโค้ดที่ทำให้การจัดการข้อมูลเป็นเรื่องง่าย สุดท้าย คุณจะเชื่อมต่อส่วนหน้า inferno js ของคุณกับ back4app โดยใช้ sdk (หากเหมาะสมกับการตั้งค่าของคุณ) หรือผ่านการเรียก api โดยใช้การควบคุมการเข้าถึงที่เข้มงวดเพื่อความปลอดภัย เมื่อสิ้นสุดการสอนนี้ คุณจะมีแอปพลิเคชันเว็บระดับการผลิตที่มีฟีเจอร์การตรวจสอบสิทธิ์ผู้ใช้ การจัดการข้อมูลแบบไดนามิก และส่วนติดต่อที่ตอบสนอง ข้อมูลเชิงลึกหลัก เชี่ยวชาญฟังก์ชัน crud ด้วยแบ็คเอนด์ที่แข็งแกร่งบน back4app เข้าใจวิธีการออกแบบสคีมาฐานข้อมูลที่สามารถขยายได้และรวมเข้ากับเฟรนต์เอนด์ inferno js ของคุณ สำรวจเครื่องมือการจัดการแบบภาพเพื่อดำเนินการสร้าง อ่าน อัปเดต และลบอย่างง่ายดาย เรียนรู้กลยุทธ์การปรับใช้ รวมถึงการทำคอนเทนเนอร์ด้วย docker ข้อกำหนด บัญชี back4app และโครงการที่สร้างขึ้นใหม่ หากคุณต้องการคำแนะนำ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา inferno js ใช้สตาร์ทเตอร์หรือโบลเลอร์เพลต inferno ที่คุณชื่นชอบ ยืนยันว่าได้ติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) แล้ว ความเข้าใจพื้นฐานเกี่ยวกับ javascript, inferno js, และหลักการ rest api สำหรับรายละเอียดเพิ่มเติม โปรดดูที่ เอกสารของ inferno https //infernojs org/docs/introduction ก่อนที่จะเริ่ม โปรดตรวจสอบให้แน่ใจว่าคุณมี ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ของคุณ การเปิดโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app infernojs และทำตามขั้นตอนบนหน้าจอเพื่อเสร็จสิ้นการสร้าง สร้างโปรเจกต์ใหม่ หลังจากการสร้าง โปรเจกต์ของคุณจะแสดงในแดชบอร์ดของคุณ ซึ่งให้แพลตฟอร์มแบ็คเอนด์ที่มั่นคงสำหรับแอปของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูล การกำหนดโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะสร้างคลาสหลายคลาส ด้านล่างนี้คือตัวอย่างของสองคลาสที่สำคัญพร้อมฟิลด์ของพวกเขา ซึ่งตั้งค่าเพื่อสนับสนุนการดำเนินการ crud 1\ คลาสรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ระบุเมื่อรายการถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ คลาสผู้ใช้ สนาม ประเภท รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสำหรับการสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด สร้างคลาสเหล่านี้ด้วยตนเองบนแดชบอร์ด back4app โดยเลือก “คลาสใหม่” และเพิ่มคอลัมน์ที่จำเป็น สร้างคลาสใหม่ คุณสามารถกำหนดแต่ละฟิลด์โดยการเลือกประเภทข้อมูล, ให้ชื่อ, และตั้งค่าเริ่มต้นหรือข้อกำหนด สร้างคอลัมน์ การใช้ประโยชน์จากผู้ช่วย ai ของ back4app สำหรับการตั้งค่า schema ผู้ช่วย ai ของ back4app ทำให้การสร้าง schema ง่ายขึ้นโดยการสร้างคลาสโดยอัตโนมัติตามคำอธิบายของคุณ วิธีการใช้ผู้ช่วย ai เข้าถึงผู้ช่วย ai ลงชื่อเข้าใช้แดชบอร์ด back4app ของคุณและค้นหาผู้ช่วย ai ในการตั้งค่า รายละเอียดโมเดลข้อมูลของคุณ ป้อนคำอธิบายที่ครอบคลุมเกี่ยวกับคลาสและฟิลด์ที่คุณต้องการ ตรวจสอบและดำเนินการ ผู้ช่วยจะเสนอการกำหนดคลาส ยืนยันและใช้การตั้งค่าเหล่านี้ ตัวอย่างคำสั่ง create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) การใช้ผู้ช่วย ai ช่วยให้การตั้งค่าของคุณมีประสิทธิภาพมากขึ้น, ทำให้มั่นใจในความสอดคล้องและประสิทธิภาพ ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ & ฟังก์ชัน crud แนะนำอินเทอร์เฟซผู้ดูแลระบบ อินเทอร์เฟซผู้ดูแลระบบของ back4app เป็นเครื่องมือที่ทรงพลังที่ไม่ต้องเขียนโค้ดซึ่งมีประสบการณ์การลากและวางสำหรับการจัดการแบ็กเอนด์ของคุณ มันช่วยให้คุณสามารถดำเนินการ crud ได้อย่างง่ายดาย เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ คลิก “แอปผู้ดูแลระบบ” และจากนั้นกด “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าบัญชีผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบเริ่มต้นของคุณ กระบวนการนี้จะกำหนดค่าบทบาทและคลาสระบบที่จำเป็นโดยอัตโนมัติ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้อินเทอร์เฟซผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่านอินเทอร์เฟซผู้ดูแลระบบ ภายในอินเทอร์เฟซผู้ดูแลระบบ คุณสามารถ สร้างรายการ ใช้ตัวเลือก “เพิ่มบันทึก” ภายในคลาส (เช่น รายการ) เพื่อแทรกข้อมูลใหม่ อ่าน/แก้ไขรายการ คลิกที่บันทึกใด ๆ เพื่อดูหรืออัปเดตรายละเอียด ลบรายการ ใช้ฟีเจอร์ลบเพื่อลบบันทึกที่ไม่ต้องการ อินเทอร์เฟซนี้ช่วยเพิ่มความสะดวกในการใช้งานโดยการทำให้ทุกงาน crud ง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ inferno js กับ back4app เมื่อคุณกำหนดค่าด้านหลังของคุณผ่านทางอินเทอร์เฟซผู้ดูแลระบบแล้ว ถึงเวลาที่จะรวมส่วนหน้า inferno js ของคุณเข้าด้วยกัน ตัวเลือก a การใช้ parse sdk ติดตั้ง parse sdk npm install parse เริ่มต้น parse ในแอป inferno ของคุณ สร้างไฟล์กำหนดค่า (เช่น, 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 ไปใช้ในคอมโพเนนต์ inferno ตัวอย่างเช่น สร้างคอมโพเนนต์เพื่อดึงและแสดงรายการ // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } render() { return ( \<div> \<h2>รายการ\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; ตัวเลือก b การใช้ rest หรือ graphql apis หาก parse sdk ไม่เหมาะสมกับสถานการณ์ของคุณ คุณสามารถดำเนินการ crud ผ่าน rest หรือ graphql ได้ ตัวอย่างเช่น การดึงรายการด้วย rest // rest api call to retrieve 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); ฝังการเรียก api เหล่านี้ภายในคอมโพเนนต์ inferno ของคุณตามความจำเป็น ขั้นตอนที่ 5 – เสริมความแข็งแกร่งให้กับ backend ของคุณ การใช้ access control lists (acls) รับประกันความปลอดภัยของข้อมูลโดยการกำหนด acls ตัวอย่างเช่น การสร้างรายการส่วนตัว async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ของคุณ ปรับ clps สำหรับแต่ละคลาสเพื่อบังคับใช้นโยบายการเข้าถึงเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถโต้ตอบกับข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ (ผ่าน parse) สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอป inferno js ของคุณ ให้ดำเนินการฟังก์ชันการลงทะเบียนและการเข้าสู่ระบบตามที่แสดงด้านล่าง // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } กลยุทธ์ที่คล้ายกันใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการตรวจสอบสิทธิ์ทางสังคม การตรวจสอบอีเมล และการกู้คืนรหัสผ่านสามารถตั้งค่าได้ในแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend inferno js ของคุณ ตัวเลือกการปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์ frontend inferno js ของคุณได้อย่างง่ายดายโดยการเชื่อมโยงกับที่เก็บ github ของคุณ 7 1 การสร้างสำหรับการผลิต เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งการสร้างสำหรับการผลิต npm run build คำสั่งนี้จะคอมไพล์แอปพลิเคชันของคุณเป็น build โฟลเดอร์ที่มีทรัพยากรสถิตที่ปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบว่า build โฟลเดอร์รวมถึง index html ไฟล์และโฟลเดอร์ทรัพยากรอื่น ๆ 7 2 การจัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บของคุณควรมีแหล่งที่มาของ inferno js frontend อย่างครบถ้วน โครงสร้างไดเรกทอรีตัวอย่าง basic crud app infernojs 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'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; ผลักดันโค้ดของคุณไปยัง github เริ่มต้น git ในโฟลเดอร์โปรเจกต์ของคุณ git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกสำหรับ inferno js frontend" สร้างที่เก็บ github ตั้งชื่อว่า basic crud app infernojs frontend ผลักดันโปรเจกต์ของคุณ git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 การเชื่อมต่อ github กับการปรับใช้เว็บ back4app ไปที่การปรับใช้เว็บ เข้าสู่ระบบ back4app เลือกโปรเจกต์ของคุณ ( basic crud app infernojs ) และคลิกที่ฟีเจอร์ การปรับใช้เว็บ รวมกับ github ทำตามคำแนะนำเพื่อลิงก์บัญชี github ของคุณ ทำให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บ (เช่น basic crud app infernojs frontend ) และสาขา (โดยปกติคือ main ) ที่มีโค้ดของคุณ 7 4 การตั้งค่าการปรับใช้ กรอกการกำหนดค่าที่เพิ่มเติม คำสั่งสร้าง หากที่เก็บของคุณขาด โฟลเดอร์สร้าง , ให้ระบุคำสั่งเช่น npm run build back4app จะดำเนินการนี้ระหว่างการปรับใช้ โฟลเดอร์ผลลัพธ์ ตั้งค่าเอาต์พุตเป็น build เพื่อให้ back4app รู้ว่าไฟล์สถิตของคุณอยู่ที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรที่จำเป็น (เช่น คีย์ api) ภายในการตั้งค่าการกำหนด 7 5 การทำให้แอปพลิเคชันของคุณเป็น docker หากคุณเลือกการทำให้เป็นคอนเทนเนอร์ ให้รวม dockerfile ในที่เก็บของคุณคล้ายกับ \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกการปรับใช้ docker ใน back4app หากคุณเลือกวิธีนี้ 7 6 การเปิดแอปพลิเคชันของคุณ คลิก deploy เมื่อการตั้งค่าทั้งหมดถูกกำหนดค่าแล้ว ให้กดปุ่ม deploy ดูการสร้าง back4app จะดึงโค้ดของคุณ สร้างโปรเจกต์ของคุณ และปรับใช้ในคอนเทนเนอร์ เข้าถึงแอปของคุณ หลังจากการปรับใช้ back4app จะให้ url ที่แอป inferno js ของคุณออนไลน์ 7 7 การยืนยันการปรับใช้ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าแอปโหลดได้ ทุกเส้นทางทำงานถูกต้อง และทรัพย์สิน (css, js, รูปภาพ) แสดงตามที่คาดหวัง แก้ไขปัญหา ใช้เครื่องมือพัฒนาเพื่อตรวจสอบข้อผิดพลาด หากมีปัญหา ให้ตรวจสอบบันทึกของ back4app และตรวจสอบการตั้งค่า github ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud แบบเต็มรูปแบบด้วย inferno js และ back4app คุณได้ตั้งค่าโครงการ basic crud app infernojs , ออกแบบคลาสข้อมูลของคุณ และใช้ส่วนติดต่อผู้ดูแลระบบที่ใช้งานง่ายสำหรับการจัดการข้อมูล ตอนนี้ส่วนหน้าเชื่อมต่อและมีความปลอดภัยด้วยการควบคุมการเข้าถึงที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุง ui ขยายแอป inferno js ของคุณด้วยมุมมองที่ละเอียด, ความสามารถในการค้นหา, และการแจ้งเตือนแบบเรียลไทม์ เพิ่มฟีเจอร์เพิ่มเติม พิจารณาการนำฟังก์ชัน backend เพิ่มเติม (เช่น cloud code), การรวม api ของบุคคลที่สาม, หรือการแนะนำการเข้าถึงตามบทบาท สำรวจเพิ่มเติม ดำน้ำลึกใน เอกสาร back4app https //www back4app com/docs และบทเรียนเพิ่มเติมสำหรับการปรับแต่งประสิทธิภาพและการรวมที่กำหนดเอง ขอให้สนุกกับการเขียนโค้ดและโชคดีในโครงการในอนาคตของคุณ!