How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ marionette js บทเรียนนี้จะแสดงให้คุณเห็นวิธีการตั้งค่าแอปพลิเคชันที่จัดการการดำเนินการข้อมูลได้อย่างมีประสิทธิภาพ เราจะเริ่มต้นด้วยการตั้งค่าโครงการ back4app ที่เรียกว่า basic crud app marionettejs , ซึ่งทำหน้าที่เป็นแบ็คเอนด์ที่ทรงพลังสำหรับแอปพลิเคชันของคุณ หลังจากกำหนดค่าโครงการของคุณแล้ว คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent วิธีการนี้ช่วยให้แน่ใจว่าแบ็คเอนด์ของคุณมีการจัดระเบียบที่ดีและสามารถจัดการการดำเนินการ crud ได้อย่างเชื่อถือได้ ถัดไป คุณจะใช้ back4app admin app—ซึ่งเป็นอินเทอร์เฟซแบบลากและวาง—เพื่อจัดการคอลเลกชันของคุณได้อย่างง่ายดาย ทำให้คุณสามารถดำเนินการสร้าง, อ่าน, อัปเดต, และลบได้อย่างสะดวก สุดท้าย คุณจะรวมส่วนหน้า marionette js ของคุณเข้ากับ back4app โดยใช้ rest/graphql (หรือ parse sdk หากมีการใช้งาน) ในขณะที่มั่นใจว่าแบ็คเอนด์ของคุณยังคงปลอดภัยด้วยการควบคุมการเข้าถึงขั้นสูง เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชันเว็บที่พร้อมใช้งานในระดับการผลิตซึ่งรองรับการดำเนินการ crud พร้อมกับการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลที่ปลอดภัย ข้อคิดสำคัญ สร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้แบ็คเอนด์ที่แข็งแกร่ง รับข้อมูลเชิงลึกเกี่ยวกับการสร้างแบ็คเอนด์ที่สามารถขยายได้และเชื่อมต่อกับเฟรนต์เอนด์ marionette js เรียนรู้การใช้ส่วนติดต่อการจัดการแบบไม่มีโค้ด (back4app admin app) เพื่อทำให้การดำเนินการข้อมูลง่ายขึ้น เข้าใจเทคนิคการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อเปิดตัวแอปพลิเคชันของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม โปรดตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ที่มีการตั้งค่าโครงการใหม่ สำหรับคำแนะนำ ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา marionette js คุณสามารถใช้โบลเลอร์แพลตหรือชุดเริ่มต้นสำหรับ marionette js ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node js (เวอร์ชัน 14 หรือสูงกว่า) ความเข้าใจพื้นฐานเกี่ยวกับ javascript, marionette js, และ rest apis ดูที่ เอกสาร marionette js https //marionettejs com/docs/master/ สำหรับรายละเอียดเพิ่มเติม ขั้นตอนที่ 1 – การตั้งค่าโครงการ การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “new app” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app marionettejs และทำตามคำแนะนำ สร้างโปรเจกต์ใหม่ หลังจากสร้างโปรเจกต์แล้ว มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งจะเป็นพื้นฐานสำหรับการกำหนดค่าและการจัดการแบ็คเอนด์ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอป crud นี้ คุณจะต้องกำหนดหลายคอลเลกชัน นี่คือตัวอย่างของคอลเลกชันที่คุณอาจสร้าง รวมถึงฟิลด์และประเภทข้อมูลที่จะขับเคลื่อนฐานข้อมูลของคุณ 1\ คอลเลกชันรายการ การรวบรวมนี้เก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ เกี่ยวกับรายการนี้ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวมผู้ใช้ การเก็บรวบรวมนี้เก็บข้อมูลรับรองผู้ใช้และรายละเอียดโปรไฟล์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ผู้ใช้ สร้างเมื่อ วันที่ เวลาสำหรับการสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคอลเลกชันเหล่านี้ด้วยตนเองบนแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและกำหนดฟิลด์ที่เกี่ยวข้องของพวกเขา สร้างชั้นเรียนใหม่ คุณสามารถสร้างฟิลด์ได้โดยการเลือกประเภทข้อมูล, ให้ชื่อ, ตั้งค่าค่าพื้นฐาน, และทำเครื่องหมายว่าจำเป็นหากต้องการ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การสร้าง schema ง่ายขึ้นโดยการสร้างคอลเลกชันและฟิลด์จากคำอธิบาย วิธีการใช้ ai agent เริ่มต้น ai agent เข้าถึงได้ผ่านเมนูแดชบอร์ด back4app หรือการตั้งค่าโปรเจกต์ของคุณ อธิบายโมเดลข้อมูลของคุณ วางคำอธิบายที่ละเอียดซึ่งระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน ตรวจสอบ schema ที่แนะนำและนำไปใช้กับโปรเจกต์ของคุณ ตัวอย่างคำอธิบาย 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) วิธีนี้ช่วยประหยัดเวลาและรับประกันความสอดคล้องใน schema ของฐานข้อมูลของคุณ ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบ & ทำการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app มีอินเทอร์เฟซแบบไม่ต้องเขียนโค้ดที่สามารถลากและวางเพื่อจัดการข้อมูลด้านหลังของคุณ มันทำให้การดำเนินการ crud เช่นการสร้าง, อ่าน, อัปเดต, และลบระเบียนง่ายขึ้น การเปิดใช้งานแอปผู้ดูแลระบบ เปิดเมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” จากนั้นคลิก “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแล โดยการสร้างผู้ใช้ผู้ดูแล ซึ่งจะกำหนดบทบาทเริ่มต้นเช่น b4aadminuser เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งาน ให้ลงชื่อเข้าใช้แอปผู้ดูแลเพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแล การใช้แอปผู้ดูแลสำหรับงาน crud สร้างบันทึก ใช้ปุ่ม “เพิ่มบันทึก” เพื่อแทรกข้อมูลใหม่ลงในคอลเลกชัน อ่าน/อัปเดตบันทึก คลิกที่บันทึกเพื่อดูหรือแก้ไขรายละเอียด ลบบันทึก ลบบันทึกที่ล้าสมัยโดยใช้ตัวเลือกลบ อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยปรับปรุงการโต้ตอบของผู้ใช้โดยการทำให้การจัดการข้อมูลง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อ marionette js กับ back4app เมื่อคุณตั้งค่าและจัดการ backend ผ่าน admin app แล้ว ขั้นตอนถัดไปคือการรวม frontend ของคุณที่ใช้ marionette js กับ back4app ตัวเลือก a ใช้ parse sdk (ถ้าใช้ได้) ติดตั้ง parse sdk npm install parse เริ่มต้น parse ในแอปพลิเคชัน marionette js ของคุณ สร้างไฟล์การกำหนดค่า (เช่น, app/parseconfig js ) // app/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 ในมุมมอง marionette ตัวอย่างเช่น สร้างมุมมองเพื่อดึงและแสดงรายการ // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>รายการ\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("เกิดข้อผิดพลาดในการดึงรายการ ", error); } }, serializedata() { return { items this items }; } }); ตัวเลือก b ใช้ rest หรือ graphql หาก parse sdk ไม่ใช่ตัวเลือก คุณสามารถโต้ตอบกับ back4app โดยใช้ rest หรือ graphql เรียกดู ตัวอย่างเช่น เพื่อดึงรายการผ่าน rest // example rest call to retrieve 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); รวมการเรียก api เหล่านี้เข้ากับมุมมองหรือคอนโทรลเลอร์ของ marionette js ตามที่จำเป็น ขั้นตอนที่ 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); // configure acl restrict access solely 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('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) ในแดชบอร์ด back4app ให้กำหนด clps สำหรับแต่ละคอลเลกชันเพื่อบังคับใช้กฎการเข้าถึงเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การสร้างบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอป marionette js ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบตามที่แสดงด้านล่าง // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); สามารถปฏิบัติตามรูปแบบที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการเข้าสู่ระบบผ่านโซเชียลหรือการรีเซ็ตรหัสผ่านสามารถกำหนดค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ frontend marionette js ของคุณด้วย web deployment ฟีเจอร์ web deployment ของ back4app ช่วยให้คุณโฮสต์ frontend marionette js ของคุณได้อย่างราบรื่นโดยการเชื่อมโยงกับ github repository ของคุณ 7 1 – การสร้างเวอร์ชันการผลิตของคุณ ไปที่ไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล เรียกใช้คำสั่ง build npm run build สิ่งนี้จะสร้าง build โฟลเดอร์ที่มีไฟล์สแตติกที่ปรับให้เหมาะสม (html, js, css, รูปภาพ) ยืนยันการสร้าง ตรวจสอบว่า build โฟลเดอร์มีไฟล์ index html พร้อมกับทรัพยากรที่จำเป็น 7 2 – การจัดระเบียบและอัปโหลดโค้ดต้นฉบับของคุณ repository ของคุณควรมีโค้ดต้นฉบับทั้งหมดสำหรับ frontend marionette js ของคุณ โครงสร้างไฟล์ตัวอย่างคือ basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md ไฟล์การกำหนดค่าตัวอย่าง app/parseconfig js // app/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; ไฟล์แอปพลิเคชันตัวอย่าง app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); การส่งข้อมูลไปยัง github เริ่มต้นที่เก็บ git (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกครั้งแรกสำหรับ marionette js frontend" สร้างที่เก็บใน github (เช่น, basic crud app marionettejs frontend ) ส่งโค้ดของคุณ git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – การรวมที่เก็บของคุณกับการปรับใช้เว็บ เข้าถึงการปรับใช้เว็บ ในแดชบอร์ด back4app ของคุณ ให้เลือกโปรเจกต์ของคุณ (basic crud app marionettejs) และคลิกที่ การปรับใช้เว็บ เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อลิงก์บัญชี github ของคุณเพื่อให้ back4app สามารถเข้าถึงที่เก็บของคุณได้ เลือกที่เก็บและสาขา เลือกที่เก็บ (เช่น, basic crud app marionettejs frontend ) และสาขา (เช่น, main ) ที่มีโค้ดของคุณ 7 4 – การกำหนดค่าการปรับใช้ของคุณ ระบุการตั้งค่าเพิ่มเติม คำสั่งสร้าง หากไม่มี build โฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ตั้งค่าคำสั่งสร้าง (เช่น npm run build ) back4app จะดำเนินการนี้ในระหว่างการปรับใช้ ไดเรกทอรีผลลัพธ์ ระบุ build เป็นโฟลเดอร์ที่มีไฟล์สถิตของคุณ ตัวแปรสภาพแวดล้อม ให้ตัวแปรสภาพแวดล้อมที่จำเป็น (เช่น คีย์ api) ในการตั้งค่าการปรับใช้ 7 5 – การทำให้แอปพลิเคชัน marionette js ของคุณเป็น docker หากคุณต้องการใช้ docker สำหรับการปรับใช้ ให้ทำให้แอปพลิเคชันของคุณเป็นคอนเทนเนอร์โดยการรวม dockerfile ในที่เก็บของคุณ \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] กำหนดค่าการปรับใช้เว็บเพื่อใช้ตัวเลือก docker หากต้องการ 7 6 – การปรับใช้แอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ กำหนดค่าการปรับใช้ของคุณให้เสร็จสิ้นและคลิก ปรับใช้ ตรวจสอบการสร้าง back4app จะดึงโค้ด github ของคุณ รันคำสั่งสร้าง และปรับใช้คอนเทนเนอร์ของคุณ รับ url ของคุณ เมื่อปรับใช้แล้ว back4app จะให้ url ที่แอปพลิเคชัน marionette js ของคุณโฮสต์อยู่ 7 7 – การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ เปิด url การปรับใช้ในเบราว์เซอร์ของคุณ ทดสอบแอปพลิเคชัน ตรวจสอบว่าแอปพลิเคชันโหลดได้อย่างถูกต้องและฟังก์ชันทั้งหมด (เส้นทาง, สินทรัพย์) ทำงานได้ แก้ไขปัญหาหากจำเป็น ใช้เครื่องมือพัฒนาเบราว์เซอร์และตรวจสอบบันทึกการปรับใช้บน back4app หากมีปัญหาเกิดขึ้น ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud โดยใช้ marionette js และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app marionettejs , สร้างคอลเลกชันฐานข้อมูลที่ละเอียดสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน admin app คุณยังเชื่อมต่อส่วนหน้า marionette js ของคุณกับส่วนหลังและดำเนินการมาตรการด้านความปลอดภัยที่เข้มงวด การปรับปรุงในอนาคต ปรับปรุงส่วนหน้า เพิ่มฟีเจอร์เช่น มุมมองที่ละเอียด ความสามารถในการค้นหา และการอัปเดตแบบเรียลไทม์ ขยายฟังก์ชันการทำงานของส่วนหลัง พิจารณาการรวม cloud functions, api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาทที่ซับซ้อน การเรียนรู้เพิ่มเติม สำรวจแหล่งข้อมูลเพิ่มเติมใน เอกสาร back4app https //www back4app com/docs เพื่อการปรับแต่งและการรวมที่ซับซ้อนมากขึ้น โดยการติดตามบทแนะนำนี้ คุณมีความรู้ในการสร้างแอปพลิเคชัน crud ที่แข็งแกร่งและปรับขนาดได้โดยใช้ marionette js และ back4app ขอให้สนุกกับการเขียนโค้ด!