How to Build a Basic CRUD App with Meteor? A Step-by-Step Guide

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้การพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) โดยใช้ meteor เราจะรวมแอป meteor ของคุณเข้ากับ back4app เป็นบริการด้านหลัง เพื่อให้การจัดการข้อมูลของคุณมีความแข็งแกร่งและสามารถขยายได้ ตลอดทั้งบทเรียน คุณจะตั้งค่าโครงการชื่อ basic crud app meteor , กำหนดสคีมาของฐานข้อมูล และกำหนดค่าคอลเลกชันของคุณ—ทั้งหมดนี้ในขณะที่ใช้ฟีเจอร์ที่ทรงพลังของ back4app คุณจะได้เห็นวิธีการใช้แอปผู้ดูแล back4app สำหรับการจัดการข้อมูลอย่างมีประสิทธิภาพ และวิธีการรักษาความปลอดภัยให้กับบริการด้านหลังของคุณด้วยมาตรการควบคุมการเข้าถึงที่ทันสมัย เมื่อสิ้นสุด คุณจะมีแอป meteor ที่พร้อมใช้งานในระดับการผลิตซึ่งรองรับการดำเนินการ crud พร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ ข้อคิดหลัก พัฒนาฟังก์ชัน crud ที่จัดการการดำเนินการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้ back4app ออกแบบและดำเนินการบริการด้านหลังที่สามารถขยายได้ซึ่งจับคู่กับส่วนหน้า meteor ใช้แอปผู้ดูแล back4app ที่สามารถลากและวางได้เพื่อลดความซับซ้อนในการดำเนินการข้อมูล เรียนรู้กลยุทธ์การปรับใช้ รวมถึงการใช้ docker containerization สำหรับแอป meteor ของคุณ ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ใหม่ สำหรับคำแนะนำในการตั้งค่า ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา meteor ติดตั้ง meteor จาก เว็บไซต์ทางการของ meteor https //www meteor com/install และตรวจสอบให้แน่ใจว่า node js (v14 หรือใหม่กว่า) พร้อมใช้งาน ความรู้พื้นฐานเกี่ยวกับ javascript, meteor และ rest apis ปรึกษา เอกสาร meteor https //docs meteor com/ เพื่อข้อมูลเพิ่มเติมหากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ การตั้งค่าโปรเจกต์ back4app ของคุณ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิกที่ตัวเลือก “แอปใหม่” บนแดชบอร์ดของคุณ กรอกชื่อโปรเจกต์ basic crud app meteor และทำตามคำแนะนำเพื่อสร้างโปรเจกต์ของคุณ สร้างโปรเจกต์ใหม่ หลังจากการสร้าง โปรเจกต์ของคุณจะถูกแสดงในแดชบอร์ด back4app ของคุณ ซึ่งจะวางรากฐานที่มั่นคงสำหรับการตั้งค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูล การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud พื้นฐาน คุณจะต้องมีหลายคอลเลกชัน ด้านล่างนี้คือตัวอย่างที่แสดงรายละเอียดคอลเลกชันและฟิลด์ที่จำเป็นในการจัดการการดำเนินการข้อมูลอย่างมีประสิทธิภาพ 1\ คอลเลกชัน รายการ คอลเลกชันนี้มีรายละเอียดสำหรับทุกรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ทำเครื่องหมายการสร้างรายการ อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การเก็บรวบรวมนี้จัดการข้อมูลผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาที่สร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด เพิ่มคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการสร้างคลาสใหม่สำหรับแต่ละคลาสและกำหนดฟิลด์ที่เกี่ยวข้อง สร้างชั้นเรียนใหม่ สร้างแต่ละฟิลด์โดยการเลือกประเภทของมัน กำหนดชื่อ เพิ่มค่าเริ่มต้นหากจำเป็น และระบุว่ามันเป็นฟิลด์ที่จำเป็นหรือไม่ สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema back4app ai agent ช่วยให้การสร้าง schema เป็นไปอย่างราบรื่นโดยตรงจากแดชบอร์ดของคุณ โดยการให้คำแนะนำที่ชัดเจนเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ai agent สามารถสร้าง schema ฐานข้อมูลของคุณโดยอัตโนมัติ วิธีการใช้ ai agent เข้าถึง ai agent ไปที่ส่วน ai agent ในแดชบอร์ด back4app ของคุณ อธิบาย 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 app & ทำการดำเนินการ crud ภาพรวมของอินเทอร์เฟซผู้ดูแลระบบ admin app ของ back4app เป็นเครื่องมือที่ใช้งานง่าย ไม่มีโค้ด ที่ช่วยให้คุณจัดการข้อมูลด้านหลังได้อย่างง่ายดายผ่านการลากและวาง มันทำให้การสร้าง การอ่าน การอัปเดต และการลบระเบียนเป็นเรื่องง่าย เปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบ สร้างผู้ใช้ผู้ดูแลระบบเริ่มต้น ซึ่งยังตั้งค่าบทบาทเริ่มต้นเช่น b4aadminuser พร้อมกับคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อเริ่มจัดการข้อมูลของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การใช้แอปผู้ดูแลระบบสำหรับงาน crud ภายในแอปผู้ดูแลระบบ คุณสามารถ เพิ่มบันทึก คลิก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก เลือกบันทึกเพื่อตรวจสอบหรือเปลี่ยนรายละเอียด ลบบันทึก ลบบันทึกที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยทำให้การดำเนินการข้อมูลเป็นเรื่องง่าย ขั้นตอนที่ 4 – การรวม meteor กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าและจัดการผ่านแอปผู้ดูแลระบบ ถึงเวลาที่จะเชื่อมต่อแอป meteor ของคุณกับ back4app การใช้ rest apis ใน meteor คุณสามารถรวมเข้ากับ back4app โดยการเรียก rest api ตัวอย่าง การดึงข้อมูลผ่าน rest ด้านล่างนี้คือตัวอย่างโค้ดเพื่อดึงรายการจาก back4app ในวิธีการ meteor // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to fetch items '); } } }); รวมการเรียก rest ที่คล้ายกันภายในส่วนประกอบหรือวิธีการ meteor ของคุณเพื่อสร้าง, อัปเดต, และลบระเบียน ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การใช้ access control lists (acls) ปกป้องข้อมูลของคุณโดยการกำหนด acls ให้กับวัตถุของคุณ ตัวอย่างเช่น เพื่อสร้างรายการที่มองเห็นได้เฉพาะเจ้าของ async function createsecureitem(itemdata, owneruser) { const itempayload = { title itemdata title, description itemdata description, acl { \[owneruser id] { read true, write true }, ' ' { read false, write false } } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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(itempayload) }); const data = await response json(); return data; } catch (error) { console error('error creating secure item ', error); } } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ของคุณ ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อควบคุมกฎการเข้าถึงเริ่มต้น ขั้นตอนนี้ช่วยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ meteor back4app ใช้คลาสผู้ใช้ของ parse สำหรับการตรวจสอบสิทธิ์ แต่ใน meteor คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก rest มาตรฐาน ตัวอย่าง การลงทะเบียนผู้ใช้ผ่าน rest // /imports/api/auth js import { http } from 'meteor/http'; export const signupuser = async (username, password, email) => { try { const response = await http post('https //parseapi back4app com/users', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data { username, password, email } }); return response data; } catch (error) { throw new meteor error('signup failed', error message); } }; ดำเนินการสร้างวิธีการที่คล้ายกันสำหรับการเข้าสู่ระบบผู้ใช้และการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่านสามารถจัดการได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า meteor ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้การโฮสต์แอปพลิเคชัน meteor ของคุณโดยการเชื่อมโยงกับที่เก็บ github ทำตามขั้นตอนเหล่านี้เพื่อปรับใช้แอป meteor ของคุณ 7 1 สร้างการผลิตของคุณ เปิดเทอร์มินัลในไดเรกทอรีโปรเจกต์ของคุณ สร้างแอป meteor ของคุณ meteor build /output directory คำสั่งนี้จะสร้างไดเรกทอรีการสร้างที่มีทรัพย์สินสถิตที่ปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบให้แน่ใจว่าผลลัพธ์การสร้างรวมถึง index html และไดเรกทอรีทรัพย์สินที่จำเป็น 7 2 จัดระเบียบและอัปโหลดโค้ดของคุณ ที่เก็บ github ของคุณควรมีโค้ดต้นฉบับทั้งหมดของแอป meteor ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app meteor/ ├── meteor/ ├── client/ │ └── main html ├── server/ │ └── main js ├── imports/ │ ├── api/ │ │ ├── items js │ │ └── auth js │ └── startup/ │ └── index js ├── package json └── readme md ไฟล์ตัวอย่าง /imports/api/items js // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to retrieve items '); } } }); ส่งโค้ดของคุณไปยัง github เริ่มต้น git ในโฟลเดอร์โปรเจกต์ของคุณ (ถ้ายังไม่ได้ทำ) git init เพิ่มไฟล์ต้นฉบับทั้งหมด git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial meteor crud app commit" สร้างที่เก็บ github (เช่น, basic crud app meteor ) ผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app meteor git git push u origin main 7 3 การเชื่อมต่อ github กับการปรับใช้เว็บ back4app เข้าถึงการปรับใช้เว็บ ลงชื่อเข้าใช้ back4app ไปที่โปรเจกต์ basic crud app meteor ของคุณ และคลิกที่ตัวเลือก web deployment เชื่อมโยงบัญชี github ของคุณ ทำตามคำแนะนำบนหน้าจอเพื่อรวมบัญชี github ของคุณ เลือกที่เก็บและสาขา เลือกที่เก็บของคุณ (เช่น, basic crud app meteor ) และสาขาที่มีโค้ดของคุณ (เช่น, main ) 7 4 การกำหนดค่าการปรับใช้ กำหนดการตั้งค่าต่อไปนี้ คำสั่งสร้าง หากที่เก็บของคุณไม่มีโฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่งสร้าง (เช่น, meteor build /output directory ) โฟลเดอร์ผลลัพธ์ ระบุโฟลเดอร์ (เช่น โฟลเดอร์ผลลัพธ์) ที่เก็บทรัพย์สินแบบสแตติกของคุณ ตัวแปรสภาพแวดล้อม เพิ่มคีย์ api หรือการกำหนดค่าที่จำเป็น 7 5 การทำให้แอป meteor ของคุณเป็น docker (ไม่บังคับ) หาก docker เป็นตัวเลือกการปรับใช้ของคุณ ให้รวม dockerfile เช่นด้านล่าง \# use the official node image as a base from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the meteor app run meteor build /output directory \# serve with nginx from nginx\ stable alpine copy from=build /app/output/bundle/programs/web browser /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] เลือกตัวเลือกการปรับใช้ docker ใน back4app หากคุณเลือกการทำให้เป็นคอนเทนเนอร์ 7 6 การสรุปการปรับใช้ของคุณ ปรับใช้แอปพลิเคชัน คลิกที่ ปรับใช้ หลังจากที่การตั้งค่าทั้งหมดเสร็จสมบูรณ์ ตรวจสอบการสร้าง back4app จะดึงโค้ดของคุณ รันคำสั่งสร้าง และปรับใช้แอปของคุณ เข้าถึง url ของคุณ เมื่อปรับใช้แล้ว back4app จะให้ url ที่แอป meteor ของคุณออนไลน์ 7 7 การตรวจสอบการปรับใช้ เยี่ยมชม url เปิด url ที่ให้ไว้ในเบราว์เซอร์ของคุณ ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าทุกเส้นทาง สไตล์ และสคริปต์ทำงานได้อย่างถูกต้อง ดีบักตามต้องการ ใช้เครื่องมือพัฒนาเบราว์เซอร์และบันทึก back4app เพื่อแก้ไขปัญหาใด ๆ ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์แบบโดยใช้ meteor และรวมเข้ากับ back4app อย่างสำเร็จ คุณได้ตั้งค่าโครงการชื่อ basic crud app meteor , ออกแบบสคีมาฐานข้อมูลที่แข็งแกร่งสำหรับ items และ users และจัดการข้อมูลผ่าน admin app นอกจากนี้ คุณได้รวมส่วนหน้า meteor ของคุณกับ back4app โดยใช้ rest apis และใช้มาตรการด้านความปลอดภัยเพื่อปกป้องข้อมูล ขั้นตอนถัดไป ขยายส่วนหน้า เพิ่มฟีเจอร์เช่น มุมมองรายละเอียด, ฟังก์ชันการค้นหา, และการอัปเดตแบบเรียลไทม์ ดำเนินการตรรกะด้านหลังที่ซับซ้อน พิจารณาใช้วิธีการของ meteor สำหรับการดำเนินการที่ซับซ้อนมากขึ้นหรือรวม api ของบุคคลที่สามเพิ่มเติม ปรึกษาแหล่งข้อมูลเพิ่มเติม สำรวจ เอกสาร back4app https //www back4app com/docs และ คู่มือ meteor https //docs meteor com/ เพื่อให้เข้าใจลึกซึ้งเกี่ยวกับประสิทธิภาพและการปรับแต่ง ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างด้วย meteor และ back4app!