How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) ขั้นพื้นฐานโดยใช้ stenciljs บทเรียนนี้จะพาคุณไปสร้างเว็บแอปที่ดำเนินการที่จำเป็นเพื่อจัดการข้อมูลอย่างมีประสิทธิภาพ เราจะเริ่มต้นด้วยการเปิดโปรเจกต์ back4app ที่ชื่อว่า basic crud app stenciljs , ซึ่งจะทำหน้าที่เป็นแบ็คเอนด์ที่แข็งแกร่งของคุณ หลังจากนั้น คุณจะออกแบบฐานข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ขั้นตอนนี้จะช่วยให้แน่ใจว่าฐานข้อมูลของคุณถูกปรับให้รองรับการดำเนินการ crud ทั้งหมดได้อย่างเชื่อถือได้ ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันของคุณได้อย่างราบรื่น เครื่องมือนี้ไม่ต้องเขียนโค้ดช่วยให้การจัดการการดำเนินการ crud ง่ายขึ้น สุดท้าย คุณจะเชื่อมต่อส่วนหน้า stenciljs ของคุณกับ back4app ผ่าน rest/graphql apis แม้ว่า parse sdk จะมีให้ใช้งาน แต่เราจะมุ่งเน้นไปที่การรวม api ที่เหมาะสมกับ stenciljs อย่างสมบูรณ์แบบ เพื่อให้แน่ใจว่าแบ็คเอนด์ของคุณยังคงปลอดภัยผ่านการควบคุมการเข้าถึงที่ทันสมัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีเว็บแอปพลิเคชันที่พร้อมใช้งานในระดับการผลิตซึ่งรองรับฟังก์ชัน crud ที่จำเป็นพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลที่แข็งแกร่ง ข้อมูลเชิงลึกที่สำคัญ เชี่ยวชาญในกระบวนการสร้างแอป crud ด้วยระบบแบ็คเอนด์ที่เชื่อถือได้ เข้าใจวิธีการออกแบบแบ็คเอนด์ที่สามารถขยายได้และเชื่อมต่อกับฟรอนต์เอนด์ stenciljs เรียนรู้การใช้เครื่องมือจัดการแบบไม่ต้องเขียนโค้ด (แอป back4app admin) สำหรับการดำเนินการข้อมูลอย่างมีประสิทธิภาพ ค้นพบกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอปพลิเคชันเว็บของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ใช้งานอยู่ ต้องการความช่วยเหลือ? ตรวจสอบ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา stenciljs ใช้ เอกสาร stenciljs https //stenciljs com/docs/introduction เพื่อจัดตั้งสภาพแวดล้อมของคุณ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, คอมโพเนนต์เว็บ, และ rest apis ทบทวน แนวคิด stenciljs https //stenciljs com/docs หากจำเป็น ขั้นตอนที่ 1 – เริ่มต้นโปรเจกต์ของคุณ การเปิดตัวโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app stenciljs และทำตามคำแนะนำบนหน้าจอเพื่อทำการตั้งค่าให้เสร็จสิ้น สร้างโปรเจกต์ใหม่ เมื่อการตั้งค่าเสร็จสิ้น โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด ซึ่งจะเป็นฐานที่มั่นคงสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การกำหนดโมเดลข้อมูล สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องตั้งค่าหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมกับฟิลด์และประเภทข้อมูลเพื่อช่วยคุณจัดโครงสร้างฐานข้อมูลของคุณสำหรับการดำเนินการ crud ที่มีประสิทธิภาพ 1\ การรวบรวม รายการ การรวบรวมนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การรวบรวมนี้จัดการโปรไฟล์ผู้ใช้และการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุดสำหรับบัญชีผู้ใช้ คุณสามารถเพิ่มคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและเพิ่มคอลัมน์ด้วยประเภทข้อมูลที่เหมาะสม สร้างคลาสใหม่ ทำตามคำแนะนำเพื่อเลือกประเภทข้อมูล กำหนดชื่อฟิลด์ ตั้งค่าค่าปริยาย และระบุว่าฟิลด์นั้นเป็นฟิลด์บังคับหรือไม่ สร้างคอลัมน์ การใช้ตัวแทน ai ของ back4app สำหรับการสร้างสคีมา ตัวแทน ai ของ back4app เป็นเครื่องมือที่เป็นนวัตกรรมซึ่งมีอยู่ในแดชบอร์ดของคุณที่ช่วยในการสร้างสคีมาฐานข้อมูลของคุณโดยอิงจากคำสั่งที่ง่าย ฟีเจอร์นี้ช่วยเร่งการตั้งค่าโครงการและทำให้แน่ใจว่าสคีมาของคุณสอดคล้องกับความต้องการของแอปพลิเคชันของคุณ วิธีการใช้ประโยชน์จากตัวแทน ai เข้าถึงตัวแทน ai เปิดแดชบอร์ด back4app ของคุณและค้นหาตัวแทน ai ในเมนูหรือตั้งค่าโครงการ ป้อนความต้องการสคีมาของคุณ ให้คำสั่งที่ละเอียดซึ่งอธิบายถึงคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน เมื่อ ai agent ประมวลผลคำสั่งของคุณแล้ว ให้ตรวจสอบข้อเสนอแนะสคีมาที่สร้างขึ้นและนำไปใช้ในโครงการของคุณ ตัวอย่างคำสั่ง create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) วิธีนี้ช่วยให้แน่ใจว่าสคีมาของคุณมีความสอดคล้องและได้รับการปรับให้เหมาะสมแล้ว ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & ฟังก์ชัน crud บทนำสู่แอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซแบบไม่ต้องเขียนโค้ดที่ทำให้การจัดการข้อมูลด้านหลังเป็นเรื่องง่าย ระบบลากและวางที่ใช้งานง่ายช่วยให้คุณสามารถดำเนินการ crud ทั้งหมด—สร้าง, อ่าน, อัปเดต, และลบ—ได้อย่างง่ายดาย การเปิดใช้งานแอปผู้ดูแลระบบ เปิดเมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และจากนั้นคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแล โดยการสร้างผู้ใช้ผู้ดูแล ผู้ใช้จะถูกกำหนดบทบาทเริ่มต้นเช่น b4aadminuser และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแล เมื่อเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้แอปผู้ดูแลเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแล ภายในอินเทอร์เฟซนี้คุณสามารถ เพิ่มบันทึก คลิกที่ตัวเลือก “เพิ่มบันทึก” ภายในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดูและแก้ไขบันทึก เลือกบันทึกเพื่อตรวจสอบหรือแก้ไขฟิลด์ของมัน ลบบันทึก ใช้ฟังก์ชันลบเพื่อลบบันทึกที่ล้าสมัย เครื่องมือนี้ช่วยปรับปรุงประสบการณ์ของผู้ใช้โดยการทำให้การจัดการข้อมูลง่ายขึ้น ขั้นตอนที่ 4 – การเชื่อมต่อ stenciljs กับ back4app เมื่อคุณตั้งค่าและจัดการแบ็กเอนด์ผ่านแอปผู้ดูแล ขั้นตอนถัดไปคือการเชื่อมต่อส่วนหน้า stenciljs ของคุณกับ back4app ตัวเลือก a การใช้ rest หรือ graphql apis สำหรับ stenciljs เราจะมุ่งเน้นที่การรวม api เพื่อให้ทุกอย่างง่ายขึ้น ตัวอย่าง การดึงข้อมูลผ่าน rest // example 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 (error) { console error('error retrieving items ', error); } }; fetchitems(); รวมการเรียก api เหล่านี้เข้ากับคอมโพเนนต์ stenciljs ของคุณตามที่ต้องการ ตัวเลือก b การใช้ parse sdk (ถ้าต้องการ) หากคุณต้องการใช้ parse sdk คุณยังสามารถรวมมันเข้ากับโปรเจกต์ stenciljs ของคุณได้เนื่องจากมันเป็นไลบรารี javascript อย่างไรก็ตาม ตัวอย่างของเราที่นี่มุ่งเน้นไปที่การเรียก api ขั้นตอนที่ 5 – เสริมความแข็งแกร่งให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง (acls) รับประกันความปลอดภัยของข้อมูลโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในโปรเจกต์ stenciljs ของคุณ ให้ดำเนินการลงทะเบียนผู้ใช้และการเข้าสู่ระบบดังนี้ // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } โครงสร้างที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน คุณยังสามารถเปิดใช้งานฟีเจอร์ต่างๆ เช่น การเข้าสู่ระบบด้วยโซเชียล การตรวจสอบอีเมล และการรีเซ็ตรหัสผ่านโดยตรงจากแดชบอร์ด back4app ขั้นตอนที่ 7 – การเปิดตัว frontend stenciljs ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน stenciljs ของคุณโดยการปรับใช้โค้ดโดยตรงจากที่เก็บ github 7 1 การสร้างแพ็คเกจการผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล ดำเนินการคำสั่งสร้าง npm run build สิ่งนี้จะสร้าง www โฟลเดอร์ที่มีทรัพย์สินสถิตที่ปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบให้แน่ใจว่า www โฟลเดอร์รวมถึง index html พร้อมกับไฟล์ css, js และภาพที่จำเป็น 7 2 การจัดระเบียบและอัปโหลดโค้ดต้นฉบับของคุณ ที่เก็บของคุณควรประกอบด้วยไฟล์ต้นฉบับทั้งหมดสำหรับแอปพลิเคชัน stenciljs ของคุณ โครงสร้างตัวอย่างอาจเป็น basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md ไฟล์ต้นฉบับตัวอย่าง src/parseconfig ts // src/parseconfig ts 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/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git ในไดเรกทอรีโปรเจกต์ของคุณ (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกของโค้ดส่วนหน้า stenciljs" สร้างรีโพซิทอรี github ใหม่ ตั้งชื่อให้เหมือนกับ basic crud app stenciljs frontend ผลักดันโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 การเชื่อมต่อที่เก็บข้อมูลของคุณผ่านการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ ( basic crud app stenciljs ) และคลิกที่ ส่วนการปรับใช้เว็บ รวม github เชื่อมต่อบัญชี github ของคุณตามคำแนะนำที่ให้ไว้ สิ่งนี้จะทำให้ back4app สามารถเข้าถึงที่เก็บข้อมูลของคุณได้ เลือกที่เก็บข้อมูลและสาขา เลือกที่เก็บข้อมูลของคุณ (เช่น, basic crud app stenciljs frontend ) และเลือกสาขาที่เหมาะสม (เช่น, main ) 7 4 การตั้งค่าการปรับใช้ของคุณ กรุณาใส่รายละเอียดการปรับใช้เพิ่มเติม คำสั่งสร้าง หากที่เก็บของคุณไม่มี www โฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่งสร้าง (เช่น, npm run build ) back4app จะดำเนินการนี้ระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ ตั้งค่าไดเรกทอรีผลลัพธ์เป็น www เพื่อให้ back4app รู้ว่าจะหาฟайлสถิตของคุณที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น, คีย์ api) ในการตั้งค่าการปรับใช้ 7 5 การทำให้โปรเจกต์ stenciljs ของคุณเป็น container ด้วย docker หากคุณชอบ docker สำหรับการปรับใช้ ให้รวม dockerfile ในที่เก็บของคุณคล้ายกับ \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] รวมไฟล์นี้ในที่เก็บของคุณและเลือกการปรับใช้ docker ใน back4app 7 6 การปรับใช้แอปพลิเคชันของคุณ เริ่มการปรับใช้ คลิกที่ deploy ปุ่มหลังจากตั้งค่าของคุณเรียบร้อยแล้ว ดูขั้นตอนการสร้าง back4app จะดึงโค้ดของคุณจาก github, รันคำสั่งสร้าง (ถ้าตั้งค่าไว้), และปรับใช้แอปพลิเคชันที่บรรจุในคอนเทนเนอร์ เข้าถึงแอปพลิเคชันของคุณ เมื่อปรับใช้แล้ว, back4app จะให้ url ที่แอป stenciljs ของคุณออนไลน์ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url เปิด url ที่ให้ไว้ในเว็บเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบว่าแอปพลิเคชันโหลดได้อย่างถูกต้อง, เส้นทางทำงานได้อย่างถูกต้อง, และทรัพยากรทั้งหมด (css, js, รูปภาพ) ถูกให้บริการโดยไม่มีปัญหา ดีบักหากจำเป็น ใช้เครื่องมือพัฒนาในเบราว์เซอร์เพื่อตรวจสอบข้อผิดพลาดใด ๆ ตรวจสอบบันทึกของ back4app และตรวจสอบการตั้งค่า github และการสร้างหากเกิดปัญหา ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์แบบโดยใช้ stenciljs และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app stenciljs , ออกแบบคอลเลกชันสำหรับ items และ users และจัดการข้อมูลด้วย admin app นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้า stenciljs ของคุณกับส่วนหลังและดำเนินการมาตรการรักษาความปลอดภัยที่เข้มงวด ขั้นตอนถัดไป ปรับปรุงส่วนหน้า พิจารณาขยายแอป stenciljs ของคุณด้วยฟีเจอร์ขั้นสูง เช่น การแสดงรายละเอียดของรายการ ความสามารถในการค้นหา และการแจ้งเตือนแบบเรียลไทม์ เพิ่มฟังก์ชันการทำงานเพิ่มเติม รวมตรรกะด้านหลังที่ซับซ้อน (เช่น cloud functions) การรวม api ของบุคคลที่สาม หรือดำเนินการอนุญาตตามบทบาท เพิ่มพูนความรู้ของคุณ สำรวจ เอกสาร back4app https //www back4app com/docs และบทเรียนอื่น ๆ เพื่อให้เข้าใจเพิ่มเติมเกี่ยวกับการปรับแต่งประสิทธิภาพและการรวมที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณได้เรียนรู้ทักษะที่จำเป็นในการสร้าง