How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) อย่างง่ายโดยใช้เฟรมเวิร์ก aurelia บทแนะนำนี้อธิบายวิธีการสร้างแอปพลิเคชันที่สามารถจัดการการดำเนินการข้อมูลที่จำเป็นโดยการรวม aurelia กับ back4app เป็นบริการแบ็กเอนด์ของคุณ ในตอนแรก คุณจะตั้งค่าโครงการ back4app ที่ชื่อว่า basic crud app aurelia เพื่อใช้เป็นระบบการจัดการข้อมูลที่มีประสิทธิภาพของคุณ ถัดไป คุณจะกำหนดโครงสร้างฐานข้อมูลที่สามารถขยายได้โดยการกำหนดคอลเลกชันและฟิลด์ด้วยตนเอง—หรือโดยการใช้ back4app ai agent—เพื่อให้แน่ใจว่าการดำเนินการข้อมูลมีความเชื่อถือได้ จากนั้น คุณจะใช้ประโยชน์จาก back4app admin app ซึ่งมีอินเทอร์เฟซแบบลากและวางสำหรับการจัดการข้อมูลของคุณอย่างง่ายดาย สุดท้าย คุณจะเชื่อมต่อส่วนหน้า aurelia ของคุณกับ back4app โดยใช้การเรียก rest/graphql (หรือ parse sdk ตามที่เหมาะสม) และรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณด้วยการควบคุมการเข้าถึงที่ละเอียด เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิตพร้อมฟังก์ชัน crud ที่สมบูรณ์ การตรวจสอบสิทธิ์ผู้ใช้ และการจัดการข้อมูลที่ปลอดภัย ข้อมูลเชิงลึกหลัก สร้างแอปพลิเคชัน crud ด้วยบริการแบ็คเอนด์ที่เชื่อถือได้ acquire practical skills for designing a scalable backend and linking it to an aurelia frontend สำรวจอินเทอร์เฟซผู้ดูแลระบบแบบไม่มีโค้ด (back4app admin app) สำหรับการดำเนินการข้อมูลที่ราบรื่น เรียนรู้วิธีการปรับใช้แอปพลิเคชันของคุณโดยใช้เทคนิคสมัยใหม่ รวมถึงการทำให้เป็นคอนเทนเนอร์ ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ที่มีโครงการที่ใช้งานอยู่ เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณต้องการคำแนะนำ การตั้งค่าการพัฒนา aurelia ใช้ aurelia cli หรือเครื่องมือที่คล้ายกัน; ตรวจสอบให้แน่ใจว่าคุณติดตั้ง node js (เวอร์ชัน 14 หรือใหม่กว่า) ความชำนาญพื้นฐานใน javascript, aurelia, และ rest apis ปรึกษา เอกสาร aurelia https //aurelia io/docs สำหรับรายละเอียดเพิ่มเติมหากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโครงการของคุณ การสร้างโปรเจกต์ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ กดปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ กรอกชื่อโปรเจกต์ basic crud app aurelia และทำตามขั้นตอนการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างเสร็จ โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด พร้อมสำหรับการกำหนดค่าด้านหลังและการจัดการข้อมูล ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูล สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน ด้านล่างคือตัวอย่างของคอลเลกชันที่จำเป็นพร้อมกับฟิลด์และประเภทข้อมูลที่จำเป็นเพื่อสนับสนุนการดำเนินการ crud อย่างมีประสิทธิภาพ 1\ คอลเลกชันรายการ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาที่รายการถูกแก้ไขล่าสุด 2\ การรวบรวมผู้ใช้ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ คีย์หลักที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันสำหรับการตรวจสอบบัญชี รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ผู้ใช้ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาของการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคลาสและกำหนดคอลัมน์ที่จำเป็น สร้างชั้นเรียนใหม่ ตั้งค่าฟิลด์ฐานข้อมูลของคุณได้อย่างง่ายดายโดยการเลือกประเภทข้อมูลที่ถูกต้อง กำหนดชื่อฟิลด์ ตั้งค่าค่าเริ่มต้น และระบุว่าฟิลด์นั้นเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การสร้าง schema ง่ายขึ้นโดยให้คุณอธิบายโมเดลข้อมูลของคุณผ่านคำสั่ง เครื่องมือนี้จะสร้างคอลเลกชันและฟิลด์โดยอัตโนมัติตามความต้องการของคุณ ขั้นตอนการใช้ ai agent เริ่มต้น ai agent เปิดแดชบอร์ด back4app ของคุณและค้นหา ai agent ภายใต้การตั้งค่าโปรเจกต์ อธิบาย schema ของคุณ ป้อนคำสั่งที่ละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตรวจสอบข้อเสนอ schema ที่สร้างขึ้นและนำไปใช้ในโปรเจกต์ของคุณ ตัวอย่างคำสั่ง create the following 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) วิธีนี้ช่วยเร่งกระบวนการสร้าง schema และรับประกันโครงสร้างที่สอดคล้องกันสำหรับแอปพลิเคชันของคุณ ขั้นตอนที่ 3 – เปิดใช้งาน admin interface & ฟังก์ชัน crud สำรวจ admin interface แอป back4app admin เป็นโซลูชันที่แข็งแกร่งและไม่มีโค้ดที่ช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ของคุณผ่านอินเทอร์เฟซที่ใช้งานง่ายแบบลากและวาง เครื่องมือนี้ช่วยให้การดำเนินการ crud ง่ายขึ้น เปิดใช้งาน admin app เปิดเมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” จากนั้นคลิก “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลของคุณ โดยการสร้างบัญชีผู้ดูแลเริ่มต้นของคุณ ซึ่งยังตั้งค่าบทบาทเริ่มต้น (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งานแล้ว ให้ลงชื่อเข้าใช้แอปผู้ดูแลเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแล การดำเนินการ crud ด้วยแอปผู้ดูแล ภายในอินเทอร์เฟซนี้คุณสามารถ สร้างรายการ ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อเพิ่มข้อมูลใหม่ ดู/แก้ไขรายการ คลิกที่บันทึกใด ๆ เพื่อดูรายละเอียดหรือทำการเปลี่ยนแปลง ลบรายการ เลือกตัวเลือกลบเพื่อลบข้อมูลที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซนี้ช่วยให้การดำเนินการด้านข้อมูลของคุณมีประสิทธิภาพมากขึ้น โดยปรับปรุงประสบการณ์ผู้ใช้ด้วยการออกแบบที่ใช้งานง่าย ขั้นตอนที่ 4 – การเชื่อมต่อ aurelia กับ back4app เมื่อคุณตั้งค่าและจัดการแบ็กเอนด์ผ่านแอปผู้ดูแลระบบแล้ว ก็ถึงเวลาที่จะเชื่อมต่อฟรอนต์เอนด์ aurelia ของคุณกับ back4app การใช้ rest หรือ graphql คุณสามารถใช้ rest หรือ graphql apis ได้ ตัวอย่างเช่น เพื่อดึงข้อมูลรายการผ่าน rest // example rest request to get items async function fetchitems() { 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 fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); รวมการเรียก api เหล่านี้ภายในส่วนประกอบของ aurelia ของคุณตามความจำเป็น ขั้นตอนที่ 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); // configure acl restrict access to the owner only 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 saving secure item ', error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้กฎความปลอดภัยเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse เพื่อจัดการการตรวจสอบสิทธิ์ ในแอป aurelia ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ได้ตามที่แสดงด้านล่าง // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(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('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } รูปแบบที่คล้ายกันสามารถนำไปใช้สำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟังก์ชันเพิ่มเติม เช่น การรวมการเข้าสู่ระบบผ่านโซเชียล การตรวจสอบอีเมล และการรีเซ็ตรหัสผ่าน สามารถกำหนดค่าผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend ของคุณด้วยการปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณสามารถโฮสต์แอปพลิเคชัน aurelia ของคุณได้อย่างมีประสิทธิภาพโดยการปรับใช้โค้ดจากที่เก็บ github ในส่วนนี้ คุณจะเตรียมการสร้างผลิตภัณฑ์ของคุณ ทำการคอมมิตโค้ดของคุณไปยัง github เชื่อมต่อที่เก็บของคุณกับการปรับใช้เว็บ และปรับใช้เว็บไซต์ของคุณ 7 1 สร้างการสร้างผลิตภัณฑ์ของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล ดำเนินการคำสั่งสร้าง au build env production คำสั่งนี้จะสร้าง dist โฟลเดอร์ที่มีทรัพย์สินสถิตที่ปรับให้เหมาะสมของคุณ ยืนยันการสร้าง ตรวจสอบให้แน่ใจว่า dist โฟลเดอร์รวมถึง index html และไดเรกทอรีย่อยที่จำเป็นสำหรับ javascript, css, และภาพ 7 2 จัดระเบียบและอัปโหลดโค้ดโปรเจกต์ของคุณ ที่เก็บ github ของคุณควรเก็บไฟล์ต้นฉบับทั้งหมดสำหรับส่วนหน้า aurelia ของคุณ โครงสร้างตัวอย่างอาจเป็นดังนี้ basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md ไฟล์ตัวอย่าง src/parse config 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 import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } การส่งโค้ดของคุณไปยัง github เริ่มต้น git ในโฟลเดอร์โปรเจกต์ของคุณ (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกเริ่มต้นของแหล่งข้อมูลเฟรนต์เอนด์ aurelia" สร้างที่เก็บข้อมูลบน github (เช่น, basic crud app aurelia frontend ) ส่งโค้ดของคุณไปยัง github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 การเชื่อมโยงที่เก็บข้อมูล github ของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ ไปที่โปรเจกต์ของคุณ (basic crud app aurelia) และเลือก การปรับใช้เว็บ ตัวเลือก เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อรวมบัญชี github ของคุณ โดยให้ back4app เข้าถึงที่เก็บข้อมูลของคุณ เลือกที่เก็บข้อมูลและสาขาของคุณ เลือกที่เก็บข้อมูล (เช่น, basic crud app aurelia frontend ) และสาขา (เช่น, main ) ที่มีโค้ดของคุณ 7 4 การกำหนดค่าการปรับใช้ ตั้งค่ารายละเอียดการกำหนดค่าต่อไปนี้ คำสั่งสร้าง หากโฟลเดอร์ dist ยังไม่ได้สร้างล่วงหน้า ให้ระบุคำสั่ง (เช่น au build env production ) ที่ back4app จะดำเนินการ ไดเรกทอรีผลลัพธ์ ตั้งค่านี้เป็น dist เพื่อให้ back4app รู้ว่าไฟล์สถิตของคุณอยู่ที่ไหน ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) ในการตั้งค่าการกำหนดค่า 7 5 การทำให้แอปพลิเคชัน aurelia ของคุณเป็นคอนเทนเนอร์ (docker) หากคุณต้องการการปรับใช้ docker ให้รวม dockerfile ในที่เก็บของคุณที่คล้ายกับต่อไปนี้ \# use an official node image as the build environment from node 16 alpine as build \# set 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 au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] กำหนดค่าตัวเลือกการปรับใช้ docker ในการปรับใช้เว็บตามนั้น 7 6 การปรับใช้แอปพลิเคชันของคุณ กดปุ่ม deploy หลังจากตั้งค่าการปรับใช้แล้ว ให้คลิก deploy ตรวจสอบกระบวนการสร้าง back4app จะดึงโค้ดของคุณจาก github ดำเนินการคำสั่งสร้างหากจำเป็น และปรับใช้แอปพลิเคชันของคุณในคอนเทนเนอร์ ดึง url ของคุณ เมื่อการปรับใช้เสร็จสิ้น back4app จะให้ url ที่แอปพลิเคชัน aurelia ของคุณโฮสต์อยู่ 7 7 การตรวจสอบการปรับใช้ของคุณ เปิด url ที่ให้มา เยี่ยมชม url ในเบราว์เซอร์ของคุณเพื่อดูเว็บไซต์สดของคุณ ทดสอบแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณโหลดได้อย่างถูกต้อง เส้นทางทำงานตามที่ตั้งใจไว้ และทรัพย์สินทั้งหมด (css, javascript, รูปภาพ) ถูกให้บริการ แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์เพื่อตรวจสอบปัญหาใด ๆ และตรวจสอบบันทึกการปรับใช้ของ back4app หากจำเป็น ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์แบบโดยใช้ aurelia และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app aurelia , กำหนดโครงสร้างฐานข้อมูลที่ครอบคลุมสำหรับ items และ users และจัดการข้อมูลของคุณโดยใช้ back4app admin app คุณยังได้รวมส่วนหน้าของ aurelia เข้ากับส่วนหลังและดำเนินการมาตรการรักษาความปลอดภัยที่แข็งแกร่ง ขั้นตอนถัดไป ปรับปรุง ui ของคุณ ขยายแอปพลิเคชัน aurelia ของคุณด้วยมุมมองที่ละเอียด ฟังก์ชันการค้นหา และการอัปเดตข้อมูลแบบเรียลไทม์ เพิ่มฟีเจอร์ขั้นสูง พิจารณาการรวมฟังก์ชันคลาวด์ api ของบุคคลที่สาม หรือสิทธิ์ตามบทบาท สำรวจเพิ่มเติม ตรวจสอบ เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูล aurelia เพิ่มเติมเพื่อคำแนะนำที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการปรับแต่งและการเพิ่มประสิทธิภาพ ขอให้สนุกกับการเขียนโค้ดและโชคดีในเส้นทางการพัฒนาของคุณ!