How to a Basic CRUD App with Alpine.js?

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้การสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ alpine js บทเรียนนี้จะพาคุณผ่านการดำเนินการหลักที่จำเป็นในการจัดการข้อมูลแบบไดนามิก โดยใช้ back4app เป็นบริการแบ็คเอนด์ที่แข็งแกร่งของคุณ เราจะเริ่มต้นด้วยการตั้งค่าโครงการ back4app ใหม่ที่ชื่อว่า basic crud app alpinejs โครงการนี้จะทำหน้าที่เป็นแบ็คเอนด์ของคุณในการจัดการข้อมูล หลังจากเริ่มต้นโครงการของคุณแล้ว คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะทำด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ขั้นตอนนี้จะทำให้แน่ใจว่าแบ็คเอนด์ของคุณมีโครงสร้างที่เหมาะสมสำหรับการดำเนินการ crud ที่เชื่อถือได้ ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นเครื่องมือที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันของคุณได้อย่างง่ายดาย อินเทอร์เฟซนี้ช่วยให้การจัดการข้อมูลเป็นไปอย่างราบรื่น สุดท้าย คุณจะเชื่อมต่อส่วนหน้า alpine js ของคุณกับ back4app โดยใช้ rest หรือ graphql apis และรักษาความปลอดภัยให้กับแบ็คเอนด์ของคุณด้วยการควบคุมการเข้าถึงที่แข็งแกร่ง เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีเว็บแอปที่พร้อมใช้งานในระดับการผลิตซึ่งรองรับการดำเนินการ crud พื้นฐานพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการอัปเดตข้อมูลที่ปลอดภัย สิ่งที่คุณจะได้เรียนรู้ วิธีการสร้างแอปพลิเคชัน crud ด้วยบริการ backend ที่มีประสิทธิภาพ วิธีการออกแบบโมเดลข้อมูลที่สามารถขยายได้และเชื่อมโยงกับ frontend ของ alpine js เคล็ดลับในการใช้เครื่องมือจัดการแบบลากและวางสำหรับการจัดการคอลเลกชัน กลยุทธ์ในการปรับใช้แอปพลิเคชันของคุณโดยใช้เทคนิคการบรรจุและการปรับใช้เว็บ ข้อกำหนดเบื้องต้น ก่อนที่จะเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโครงการใหม่พร้อมใช้งาน ดูที่ https //www back4app com/docs/get started/new parse app เพื่อขอความช่วยเหลือ สภาพแวดล้อมการพัฒนา alpine js รวม alpine js ผ่าน cdn หรือ npm ตามการตั้งค่าโครงการของคุณ ความคุ้นเคยกับ javascript, alpine js, และหลักการ rest api ดูที่ https //alpinejs dev/start เพื่อรายละเอียดเพิ่มเติม ขั้นตอนที่ 1 – เริ่มต้นโครงการของคุณ การตั้งค่าโปรเจกต์ back4app ใหม่ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” ระบุชื่อโปรเจกต์ basic crud app alpinejs และทำตามคำแนะนำ สร้างโปรเจกต์ใหม่ หลังจากสร้างเสร็จ โปรเจกต์ของคุณจะแสดงในแดชบอร์ด พร้อมสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การกำหนดรูปแบบข้อมูลของคุณ สำหรับแอป crud ของเรา คุณจะต้องตั้งค่าคอลเลกชันหลักสองสามรายการ ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทข้อมูลเพื่อเป็นแนวทางในการตั้งค่าโครงสร้างของคุณ คอลเลกชันเหล่านี้ช่วยอำนวยความสะดวกในการดำเนินการ crud ที่สำคัญ 1\ คอลเลกชันรายการ การรวบรวมนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือตำแหน่งของรายการ คำอธิบาย สตริง สรุปสั้น ๆ เกี่ยวกับรายการ สร้างเมื่อ วันที่ เวลาสำหรับการสร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวมผู้ใช้ การเก็บรวบรวมนี้เก็บข้อมูลรับรองและรายละเอียดของผู้ใช้ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวผู้ใช้ที่ไม่ซ้ำกัน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชถูกเก็บอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคลาสและกำหนดคอลัมน์ตามนั้น สร้างคลาสใหม่ คุณสามารถตั้งค่าฟิลด์โดยการเลือกประเภท ตั้งชื่อพวกเขา เพิ่มค่าพื้นฐาน และทำเครื่องหมายว่าจำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยในการสร้าง schema โดยอัตโนมัติ มันสร้างคอลเลกชันของคุณตามคำสั่งที่อธิบายฟิลด์ที่คุณต้องการ วิธีการใช้ ai agent เปิด ai agent จากแดชบอร์ด back4app ของคุณ ป้อนคำอธิบายที่ละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่ต้องการ ตรวจสอบ schema ที่แนะนำและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง create the following collections 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) เครื่องมือนี้ช่วยประหยัดเวลาและรับประกัน schema ที่สอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ & ฟีเจอร์ crud แนะนำแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซแบบไม่มีโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์ของคุณ ฟีเจอร์การลากและวางทำให้การทำงาน crud ง่ายและมีประสิทธิภาพ วิธีเปิดใช้งานแอปผู้ดูแลระบบ ไปที่ส่วน “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก แอปผู้ดูแลระบบ และจากนั้นคลิก เปิดใช้งานแอปผู้ดูแลระบบ ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบแรกของคุณเพื่อกำหนดบทบาทและคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ เมื่อเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ด้วยแอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบ คุณสามารถ สร้างบันทึก คลิกปุ่ม “เพิ่มบันทึก” ในคอลเลกชันเช่น items อ่านและอัปเดตบันทึก เลือกบันทึกเพื่อดูรายละเอียดหรือทำการแก้ไข ลบบันทึก ลบรายการที่ไม่ต้องการโดยใช้ฟังก์ชันลบ อินเทอร์เฟซนี้ทำให้การจัดการข้อมูลง่ายขึ้นด้วยการออกแบบที่ใช้งานง่ายและการลากและวาง ขั้นตอนที่ 4 – เชื่อมต่อ alpine js กับ back4app เมื่อแบ็กเอนด์ของคุณพร้อมแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า alpine js ของคุณกับ back4app การใช้ rest/graphql apis คุณจะใช้ rest หรือ graphql เพื่อโต้ตอบกับแบ็กเอนด์ของคุณ ตัวอย่าง การดึงรายการผ่าน rest // sample rest api call using fetch async function loaditems() { 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 loaded ', data results); } catch (error) { console error('error loading items ', error); } } loaditems(); รวมการเรียก api เหล่านี้ภายในคอมโพเนนต์ alpine js ของคุณเพื่อดำเนินการ crud ขั้นตอนที่ 5 – ปกป้องแบ็กเอนด์ของคุณ การตั้งค่ารายการควบคุมการเข้าถึง (acls) รักษาความปลอดภัยข้อมูลของคุณโดยการใช้ acls กับบันทึกของคุณ ตัวอย่างเช่น เพื่อสร้างรายการส่วนตัว async function addprivateitem(data, owner) { const itemdata = { title data title, description data description }; // define acl settings only the owner has read/write privileges const aclsettings = { " " { "read" false, "write" false }, \[owner] { "read" true, "write" true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ itemdata, acl aclsettings }) }); const result = await response json(); console log('private item added ', result); } catch (error) { console error('error adding private item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้นโยบายการเข้าถึงเริ่มต้น เพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในโปรเจกต์ alpine js ของคุณ ให้จัดการการลงทะเบียนผู้ใช้และการเข้าสู่ระบบผ่านการเรียก api ตัวอย่าง การลงทะเบียนผู้ใช้ด้วย alpine js sign up วิธีการที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า alpine js ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์ส่วนหน้า alpine js ของคุณได้อย่างง่ายดาย ในส่วนนี้ คุณจะเตรียมการสร้างผลิตภัณฑ์ของคุณ คอมมิตโค้ดของคุณไปยัง github เชื่อมต่อที่เก็บของคุณกับการปรับใช้เว็บ และเปิดตัวแอปของคุณ 7 1 สร้างสินทรัพย์การผลิตของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้างของคุณ (หากใช้กระบวนการสร้างสำหรับ alpine js) npm run build นี่จะสร้างโฟลเดอร์ (โดยปกติคือ dist หรือ build ) ที่มีไฟล์สถิตที่ปรับให้เหมาะสมแล้ว ยืนยันว่าโฟลเดอร์สร้างของคุณมี index html พร้อมกับสินทรัพย์ที่จำเป็น 7 2 จัดระเบียบและอัปโหลดไฟล์ต้นฉบับของคุณ ที่เก็บ github ของคุณควรเก็บไฟล์ต้นฉบับทั้งหมดสำหรับโปรเจกต์ alpine js ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app alpinejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ไฟล์ตัวอย่าง src/main js document addeventlistener('alpine\ init', () => { alpine data('itemsapp', () => ({ items \[], newitemtitle '', newitemdescription '', async loaditems() { 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(); this items = data results; } catch (error) { console error('failed to load items ', error); } }, async additem() { const payload = { title this newitemtitle, description this newitemdescription }; try { await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(payload) }); this newitemtitle = ''; this newitemdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } })); }); การส่งโค้ดของคุณไปยัง github เริ่มต้นรีโพซิทอรี git ในโฟลเดอร์โปรเจกต์ของคุณ git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit of alpine js frontend" สร้างรีโพซิทอรีใหม่บน github (เช่น, basic crud app alpinejs frontend ) ผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app alpinejs frontend git git push u origin main 7 3 การเชื่อมโยงที่เก็บ github ของคุณกับการปรับใช้เว็บ ลงชื่อเข้าใช้แดชบอร์ด back4app ของคุณและเลือกโปรเจกต์ของคุณ ( basic crud app alpinejs ) เปิด web deployment ส่วน เชื่อมต่อบัญชี github ของคุณและเลือกที่เก็บและสาขาที่มีโค้ด alpine js ของคุณ 7 4 การกำหนดค่าการตั้งค่าการปรับใช้ คำสั่งสร้าง หากโครงการของคุณไม่มีโฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่ง (เช่น npm run build ) ไดเรกทอรีผลลัพธ์ ตั้งค่าให้เป็นโฟลเดอร์ที่มีไฟล์สถิตของคุณ (เช่น build หรือ dist ) ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรที่จำเป็น เช่น คีย์ api 7 5 การทำให้แอปพลิเคชัน alpine js ของคุณเป็น docker (ไม่บังคับ) หากคุณต้องการปรับใช้โดยใช้ docker ให้รวม dockerfile เช่น \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install copy package json / run npm install \# copy source and build app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกตัวเลือก docker ในการกำหนดค่าการปรับใช้เว็บของคุณหากต้องการ 7 6 การเปิดตัวแอปพลิเคชันของคุณ คลิกที่ deploy ปุ่มใน back4app ติดตามกระบวนการปรับใช้เมื่อ back4app ดึงโค้ดของคุณ สร้างมัน และปรับใช้มัน เมื่อปรับใช้แล้ว คุณจะได้รับ url ที่แอปพลิเคชัน alpine js ของคุณถูกโฮสต์ 7 7 การทดสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ในเบราว์เซอร์ของคุณ ตรวจสอบว่าแอปของคุณโหลดได้อย่างถูกต้อง เส้นทางทำงานตามที่คาดหวัง และทรัพยากรถูกให้บริการอย่างถูกต้อง แก้ไขปัญหาใด ๆ โดยการตรวจสอบบันทึกคอนโซลของเบราว์เซอร์และบันทึกการปรับใช้ของ back4app ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์โดยใช้ alpine js และ back4app คุณได้ตั้งค่า basic crud app alpinejs โครงการ สร้างคอลเลกชันฐานข้อมูลที่ละเอียด และใช้เครื่องมือจัดการข้อมูลแบบไม่มีโค้ด นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้า alpine js ของคุณกับส่วนหลังโดยใช้ rest apis และมั่นใจว่าการจัดการข้อมูลมีความปลอดภัย ขั้นตอนถัดไป ปรับปรุง ui ของคุณ ขยายส่วนประกอบ alpine js ของคุณด้วยฟีเจอร์ขั้นสูง เช่น มุมมองรายการที่ละเอียดหรือการอัปเดตแบบเรียลไทม์ เพิ่มฟังก์ชันการทำงานเพิ่มเติม สำรวจการรวมตรรกะด้านหลังเพิ่มเติม api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงที่ซับซ้อน การเรียนรู้เพิ่มเติม เยี่ยมชม https //www back4app com/docs และแหล่งข้อมูลเพิ่มเติมเพื่อเพิ่มความเข้าใจของคุณเกี่ยวกับการรวมที่ซับซ้อน ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างโปรเจกต์ถัดไปของคุณ!