How to Create a CRUD Application with Ember.js?

บทนำ ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ง่ายด้วย ember js เราจะพึ่งพา back4app เป็นบริการแบ็คเอนด์เพื่อจัดการข้อมูลของคุณได้อย่างง่ายดาย คู่มือนี้ครอบคลุมการดำเนินการพื้นฐานทั้งหมดของระบบ crud โดยแสดงให้คุณเห็นวิธีการตั้งค่าโครงการ back4app ออกแบบโมเดลข้อมูลที่มีพลศาสตร์ และรวมการดำเนินการ crud เข้ากับแอปพลิเคชัน ember js ในตอนเริ่มต้น คุณจะสร้างโครงการ back4app ที่ชื่อว่า basic crud app ember ซึ่งให้โซลูชันการจัดเก็บข้อมูลที่ไม่สัมพันธ์กันที่เชื่อถือได้สำหรับแอปของคุณ คุณจะกำหนดโครงสร้างข้อมูลของคุณโดยการตั้งค่าโมเดลและฟิลด์ด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app ถัดไป คุณจะสำรวจ back4app admin app—อินเทอร์เฟซที่ไม่ต้องเขียนโค้ดที่ให้คุณจัดการข้อมูลด้วยการลากและวางอย่างง่ายดาย สุดท้าย คุณจะรวมแอป ember js ของคุณกับ back4app ผ่านการเรียก api โดยดำเนินการควบคุมการเข้าถึงที่ปลอดภัยในระหว่างทาง เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชัน ember js ที่พร้อมสำหรับการผลิตซึ่งสามารถดำเนินการ crud ทั้งหมดได้ รวมถึงการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูลที่มีประสิทธิภาพ ข้อคิดสำคัญ สร้างแอปพลิเคชัน crud ที่ใช้ ember js โดยมีแพลตฟอร์มแบ็คเอนด์ที่แข็งแกร่งรองรับ เข้าใจวิธีการจัดโครงสร้างและรวมแบ็คเอนด์ที่สามารถขยายได้กับส่วนหน้า ember js ใช้แอป admin ที่ใช้งานง่ายของ back4app เพื่อทำการสร้าง อ่าน อัปเดต และลบข้อมูลได้อย่างง่ายดาย เรียนรู้เกี่ยวกับกลยุทธ์การปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อการส่งมอบแอปพลิเคชันที่ราบรื่น ข้อกำหนดเบื้องต้น ก่อนที่จะเริ่มโปรดยืนยันว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ใหม่สร้างขึ้น ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา ember js ติดตั้ง ember cli และตั้งค่าสภาพแวดล้อมของคุณโดยทำตาม คู่มือ ember js https //guides emberjs com/release/ ความคุ้นเคยพื้นฐานกับ ember js, javascript, และ rest apis ทบทวนหัวข้อเหล่านี้หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ การเริ่มต้นโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ กำหนดชื่อโปรเจกต์ basic crud app ember และทำตามคำแนะนำถัดไปเพื่อเสร็จสิ้นการตั้งค่าโปรเจกต์ สร้างโปรเจกต์ใหม่ เมื่อสร้างโปรเจกต์เสร็จแล้ว มันจะปรากฏในแดชบอร์ดของคุณและเป็นพื้นฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การออกแบบโมเดลข้อมูล การจัดโครงสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดโมเดลหลายตัวในโปรเจกต์ back4app ของคุณ ด้านล่างนี้เป็นตัวอย่างที่แสดงโมเดลหลักและฟิลด์ที่จำเป็นสำหรับการดำเนินการ crud 1\ โมเดลรายการ โมเดลนี้เก็บข้อมูลเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ระบุเมื่อรายการถูกเพิ่มเข้ามา อัปเดตเมื่อ วันที่ เวลาที่ทำเครื่องหมายการอัปเดตครั้งล่าสุด 2\ โมเดลผู้ใช้ โมเดลนี้จัดการการตรวจสอบสิทธิ์และข้อมูลประจำตัวของผู้ใช้ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านผู้ใช้ที่เข้ารหัสแล้ว สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่บัญชีถูกอัปเดต คุณสามารถสร้างโมเดลเหล่านี้และกำหนดฟิลด์ของพวกเขาได้โดยตรงภายในแดชบอร์ด back4app สร้างคลาสใหม่ คุณสามารถเพิ่มฟิลด์ได้โดยการเลือกประเภทข้อมูล, ป้อนชื่อฟิลด์, ตั้งค่าค่าพื้นฐาน, และทำเครื่องหมายว่ามันเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้เอเจนต์ ai ของ back4app สำหรับการสร้างสคีมา เอเจนต์ ai ของ back4app เป็นฟีเจอร์อัจฉริยะภายในแดชบอร์ดของคุณที่สามารถกำหนดค่าข้อมูลสคีมาโดยอัตโนมัติตามข้อกำหนดของคุณ เครื่องมือนี้ช่วยให้การเริ่มต้นโครงการง่ายขึ้นโดยการทำให้แน่ใจว่าโมเดลข้อมูลของคุณได้รับการปรับให้เหมาะสมสำหรับการดำเนินการ crud วิธีการใช้เอเจนต์ ai เปิดเอเจนต์ ai เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหาเอเจนต์ ai ในการตั้งค่าโครงการ ให้รายละเอียดโมเดลของคุณ ส่งคำอธิบายรายละเอียดของโมเดลและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน เอเจนต์ ai จะสร้างสคีมาที่แนะนำ ยืนยันรายละเอียดเพื่อใช้การกำหนดค่า ตัวอย่างคำสั่ง create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีการที่ใช้ ai นี้ช่วยประหยัดเวลาและทำให้โครงสร้างข้อมูลของคุณสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud ภาพรวมของแอปผู้ดูแลระบบ แอปผู้ดูแล back4app ให้แพลตฟอร์มที่ใช้งานง่ายและไม่ต้องเขียนโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์ของคุณ อินเทอร์เฟซแบบลากและวางช่วยให้คุณสามารถทำงาน crud ได้อย่างง่ายดาย เช่น การเพิ่ม การดู การอัปเดต และการลบระเบียน การเปิดใช้งานแอปผู้ดูแล ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” และคลิกที่ “เปิดใช้งานแอปผู้ดูแล ” กำหนดค่าข้อมูลประจำตัวผู้ดูแลของคุณ โดยการสร้างบัญชีผู้ดูแลเริ่มต้น นี่จะตั้งค่าบทบาท (เช่น, b4aadminuser ) และโมเดลระบบ เปิดใช้งานแอปผู้ดูแล เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ผ่านแอปผู้ดูแล ภายในแอปผู้ดูแล คุณสามารถ แทรกระเบียน คลิกที่ปุ่ม “เพิ่มระเบียน” ภายในโมเดล (เช่น, รายการ) เพื่อป้อนข้อมูลใหม่ ตรวจสอบ/แก้ไขระเบียน เลือกระเบียนใด ๆ เพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบระเบียน ลบรายการที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่เรียบง่ายนี้ช่วยปรับปรุงประสิทธิภาพในการจัดการข้อมูลอย่างมีนัยสำคัญ ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน ember js ของคุณกับ back4app เมื่อคุณกำหนดค่าด้านหลังเสร็จแล้ว ถึงเวลาที่จะเชื่อมต่อแอปพลิเคชัน ember js ของคุณกับ back4app การใช้ api calls ใน ember js ember js ใช้ ember data สำหรับการจัดการการดำเนินการข้อมูล ในบทเรียนนี้ คุณจะใช้ rest adapter เพื่อโต้ตอบกับ back4app backend ของคุณ 1\ การกำหนดค่า rest adapter สร้างหรืออัปเดต adapter ของแอปพลิเคชันของคุณ (เช่น, app/adapters/application js ) ด้วยการกำหนดค่าดังต่อไปนี้ import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ การกำหนดโมเดล ember data สร้างโมเดล ember สำหรับ item (เช่น, app/models/item js ) import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } และเช่นเดียวกันสำหรับ user (เช่น, app/models/user js ) import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ การดำเนินการ crud ใช้บริการ store ของ ember data เพื่อดำเนินการ crud ตัวอย่างเช่น เพื่อดึงข้อมูลรายการทั้งหมด คุณอาจสร้างเส้นทางที่คล้ายกับ import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } คุณสามารถเพิ่ม อัปเดต หรือ ลบระเบียนได้เช่นกันโดยใช้วิธี api ของ ember data ทางเลือก การใช้ fetch แบบเนทีฟสำหรับการเรียก api หากคุณไม่ต้องการใช้ ember data คุณสามารถใช้การเรียก fetch แบบเนทีฟได้ ตัวอย่างเช่น การดึงรายการ async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } รวมการเรียก api เหล่านี้เข้ากับคอมโพเนนต์หรือบริการของ ember ตามที่ต้องการ ขั้นตอนที่ 5 – การเพิ่มความปลอดภัยสำหรับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง ปกป้องข้อมูลของคุณโดยการกำหนดรายการควบคุมการเข้าถึง (acls) สำหรับแต่ละวัตถุ ตัวอย่างเช่น เมื่อสร้างรายการที่ควรจะมองเห็นได้เฉพาะเจ้าของ คุณสามารถปรับการตั้งค่า acl ผ่านการเรียก api ของคุณ การอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ให้ตั้งค่า clps เพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงโมเดลบางอย่างได้ ซึ่งจะเพิ่มชั้นความปลอดภัยเพิ่มเติมโดยการบังคับใช้กฎการเข้าถึงเริ่มต้น ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ใน ember js การตั้งค่าบัญชีผู้ใช้ back4app ใช้โมเดลผู้ใช้ parse สำหรับการจัดการการตรวจสอบสิทธิ์ ในแอปพลิเคชัน ember js ของคุณ คุณสามารถสร้างบริการเพื่อจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ผ่านการเรียก api ตัวอย่างเช่น สร้างบริการการตรวจสอบสิทธิ์ ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } บริการนี้สามารถถูกฉีดเข้าไปในเส้นทางหรือส่วนประกอบของคุณเพื่อจัดการการจัดการเซสชัน การรีเซ็ตรหัสผ่าน และงานที่เกี่ยวข้องกับการตรวจสอบสิทธิ์อื่น ๆ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน ember js ของคุณ back4app รองรับกลยุทธ์การปรับใช้ที่หลากหลาย คุณสามารถปรับใช้แอปพลิเคชัน ember js ของคุณโดยใช้วิธีการเช่นการทำให้เป็นคอนเทนเนอร์ docker 7 1 การสร้างแอปพลิเคชัน ember ของคุณ สร้างแอปพลิเคชันของคุณ รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ ember build environment=production ตรวจสอบผลลัพธ์ ตรวจสอบให้แน่ใจว่า dist/ โฟลเดอร์มีทรัพย์สินที่พร้อมสำหรับการผลิตของคุณ 7 2 ภาพรวมโครงสร้างโปรเจกต์ โปรเจกต์ ember js ที่เป็นมาตรฐานอาจถูกจัดระเบียบดังนี้ basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 การทำ dockerize แอปพลิเคชัน ember ของคุณ หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้รวม dockerfile ไว้ที่รากโปรเจกต์ของคุณ \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมต่อที่เก็บ github ของคุณ โฮสต์โปรเจกต์ ember js ของคุณบน github กำหนดค่าการตั้งค่าการปรับใช้ ในแดชบอร์ด back4app ของคุณ ให้ไปที่ web deployment , เชื่อมโยงที่เก็บของคุณ (เช่น basic crud app ember ), และเลือกสาขาที่ต้องการ ตั้งค่าคำสั่งการสร้าง กำหนดคำสั่งการสร้างของคุณ (เช่น ember build environment=production ) และระบุไดเรกทอรีผลลัพธ์ ปรับใช้แอปของคุณ คลิก deploy และติดตามบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ทำได้ดีมาก! ตอนนี้คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ ember js ซึ่งเชื่อมต่อกับ back4app แล้ว ในบทแนะนำนี้ คุณได้ตั้งค่าโครงการชื่อ basic crud app ember , ออกแบบโมเดลสำหรับ items และ users และจัดการแบ็กเอนด์ของคุณผ่าน back4app admin app คุณยังเชื่อมต่อแอป ember js ของคุณโดยใช้การเรียก api และนำแนวทางปฏิบัติด้านความปลอดภัยที่แข็งแกร่งมาใช้ ขั้นตอนถัดไป ปรับปรุงแอปพลิเคชันของคุณ พิจารณาเพิ่มฟีเจอร์เช่นฟังก์ชันการค้นหาขั้นสูง, มุมมองรายละเอียด, หรือการอัปเดตแบบเรียลไทม์ ขยายความสามารถของแบ็กเอนด์ สำรวจฟังก์ชันคลาวด์, รวม api ของบุคคลที่สาม, หรือจัดตั้งการควบคุมการเข้าถึงตามบทบาท เพิ่มพูนความเข้าใจของคุณ เยี่ยมชม เอกสาร back4app https //www back4app com/docs และแหล่งข้อมูล ember js อื่น ๆ สำหรับหัวข้อที่มีความซับซ้อนมากขึ้น ขอให้สนุกกับการเขียนโค้ดและขอให้โชคดีในเส้นทางของคุณกับ ember js!