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

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ทำงานได้อย่างสมบูรณ์โดยใช้ ractive js บทเรียนนี้ครอบคลุมกระบวนการทำงานทั้งหมดตั้งแต่การตั้งค่าโปรเจกต์ back4app ของคุณไปจนถึงการออกแบบสคีมาฐานข้อมูลของคุณ และในที่สุดการรวมส่วนติดต่อ ractive js ของคุณกับแบ็กเอนด์ของคุณ โปรเจกต์นี้มีชื่อว่า basic crud app ractive , จะทำหน้าที่เป็นโซลูชันการจัดการข้อมูลที่แข็งแกร่งสำหรับแอปพลิเคชันเว็บของคุณ คุณจะเริ่มต้นด้วยการเริ่มต้นโปรเจกต์ back4app การกำหนดค่าคอลเลกชันและฟิลด์ด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent ถัดไป คุณจะใช้ back4app admin app ที่ใช้งานง่ายสำหรับการจัดการข้อมูลอย่างตรงไปตรงมา ตามด้วยการรวมส่วนติดต่อ ractive js ของคุณกับ back4app ผ่านการเรียก rest api คู่มือนี้ยังอธิบายวิธีการรักษาความปลอดภัยให้กับแบ็กเอนด์ของคุณโดยใช้วิธีการควบคุมการเข้าถึงขั้นสูง เมื่อสิ้นสุด คุณจะมีแอป crud ที่มีคุณภาพสำหรับการผลิตซึ่งไม่เพียงแต่ทำงานที่จำเป็น แต่ยังรองรับการตรวจสอบสิทธิ์ผู้ใช้และการจัดการข้อมูลอย่างปลอดภัย จุดสำคัญ สร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพด้วย backend ที่เชื่อถือได้ เข้าใจวิธีการออกแบบสคีมาข้อมูลที่ขยายได้และเชื่อมต่อกับ frontend ของ ractive js ใช้ส่วนติดต่อการจัดการแบบลากและวาง (back4app admin app) สำหรับการดำเนินการ crud ที่ง่ายดาย เรียนรู้กลยุทธ์การปรับใช้รวมถึงการทำให้เป็นคอนเทนเนอร์ docker สำหรับการเปิดตัวแอปเว็บอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app ที่ใช้งานอยู่พร้อมกับโปรเจกต์ใหม่ที่สร้างขึ้น ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app เพื่อคำแนะนำ การตั้งค่าการพัฒนา ractive js ตั้งค่าโปรเจกต์ของคุณโดยใช้ boilerplate หรือการกำหนดค่าที่คุณต้องการ โดยต้องมั่นใจว่าคุณได้ติดตั้ง node js (v14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, ractive js, และ rest apis ตรวจสอบ เอกสาร ractive js https //ractive js org/ ตามที่จำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ เริ่มโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app ractive และทำตามคำแนะนำบนหน้าจอเพื่อสร้างมัน สร้างโปรเจกต์ใหม่ หลังจากตั้งค่า โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด พร้อมสำหรับการกำหนดค่าด้านหลังเพิ่มเติม ขั้นตอนที่ 2 – การออกแบบสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะต้องกำหนดหลายคอลเลกชันเพื่อจัดการข้อมูลของคุณ ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันพร้อมฟิลด์และประเภทข้อมูลที่แนะนำ เพื่อให้แน่ใจว่าด้านหลังได้รับการปรับให้เหมาะสมสำหรับฟังก์ชัน crud 1\ การเก็บรวบรวม รายการ การเก็บรวบรวมนี้มีรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาสร้างบันทึก อัปเดตเมื่อ วันที่ เวลาที่อัปเดตล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ การรวบรวมนี้จัดการข้อมูลผู้ใช้และการตรวจสอบสิทธิ์ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวหลักที่สร้างโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสเพื่อการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสำหรับการสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และเพิ่มคอลัมน์ที่จำเป็น สร้างคลาสใหม่ กำหนดฟิลด์โดยการเลือกประเภทข้อมูลที่เหมาะสม ตั้งชื่อคอลัมน์ และตั้งค่าเริ่มต้นหรือค่าที่จำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema อัตโนมัติ back4app ai agent สามารถสร้าง schema ของคุณโดยอัตโนมัติตามคำสั่งของคุณ เครื่องมือนี้มีประสิทธิภาพช่วยให้การจัดการโครงการง่ายขึ้นโดยการสร้างคอลเลกชันและฟิลด์ของคุณอย่างรวดเร็ว วิธีการใช้งาน ai agent เข้าถึง ai agent จากแดชบอร์ดของโครงการของคุณ ป้อนคำสั่งที่ละเอียดเพื่ออธิบายคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและใช้ schema ที่สร้างขึ้นโดยอัตโนมัติในโครงการของคุณ ตัวอย่างคำสั่ง create these collections for 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 admin มีโซลูชันที่ไม่ต้องเขียนโค้ดเพื่อจัดการข้อมูลแบ็กเอนด์ของคุณ อินเทอร์เฟซแบบลากและวางช่วยให้การดำเนินการ crud เช่น การเพิ่ม แก้ไข หรือการลบระเบียนเป็นเรื่องง่าย วิธีเปิดใช้งานแอป admin ไปที่เมนู “เพิ่มเติม” บนแดชบอร์ด back4app ของคุณ เลือก “admin app” และคลิก “เปิดใช้งาน admin app ” ตั้งค่าผู้ดูแลระบบคนแรกของคุณ ซึ่งยังตั้งค่าบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งาน admin app เมื่อเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอป admin เพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอป admin การจัดการข้อมูลผ่านแอป admin การเพิ่มรายการ ใช้ตัวเลือก “เพิ่มระเบียน” ในคอลเลกชัน (เช่น รายการ) เพื่อป้อนข้อมูลใหม่ การดู/แก้ไขระเบียน เลือกระเบียนใด ๆ เพื่อตรวจสอบรายละเอียดหรืออัปเดตฟิลด์ การลบรายการ ใช้ฟังก์ชันลบเพื่อลบระเบียนที่ล้าสมัย อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยให้การทำงาน crud ทั้งหมดเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ ractive js กับ back4app ตอนนี้แบ็กเอนด์ของคุณพร้อมแล้ว ถึงเวลาที่จะเชื่อมต่อส่วนหน้า ractive js ของคุณกับ back4app การใช้ rest api calls กับ ractive js เนื่องจาก ractive js ไม่มี parse sdk ที่เฉพาะเจาะจง คุณจะใช้การเรียก rest api เพื่อดำเนินการ crud ตัวอย่าง การดึงข้อมูลรายการ สร้างคอมโพเนนต์ ractive ที่ดึงและแสดงข้อมูลจากคอลเลกชัน items ของ back4app ของคุณ items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); items js คุณสามารถรวมการโต้ตอบ api เหล่านี้เข้ากับส่วนประกอบ ractive js ของคุณเพื่อจัดการการดำเนินการ crud ทั้งหมด ขั้นตอนที่ 5 – การเสริมความปลอดภัยของ backend การดำเนินการควบคุมการเข้าถึง เสริมความปลอดภัยโดยการตั้งค่ารายการควบคุมการเข้าถึง (acl) บนวัตถุของคุณ ตัวอย่างเช่น เพื่อทำให้รายการเป็นส่วนตัว async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } การกำหนดสิทธิ์ระดับคลาส ในแดชบอร์ด back4app ปรับระดับการอนุญาตของคลาส (clps) สำหรับแต่ละคอลเลกชันเพื่อกำหนดนโยบายการเข้าถึงเริ่มต้น ขั้นตอนนี้ช่วยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การจัดการการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ของ parse เพื่อจัดการการตรวจสอบสิทธิ์ ใช้การลงทะเบียนผู้ใช้และการเข้าสู่ระบบผ่านการเรียก rest api ในแอปพลิเคชัน ractive js ของคุณ ตัวอย่าง การลงทะเบียนผู้ใช้ async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } ใช้รูทีนที่คล้ายกันสำหรับการเข้าสู่ระบบและการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการกู้คืนรหัสผ่านและการตรวจสอบอีเมลสามารถตั้งค่าได้ผ่านแดชบอร์ด back4app ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า ractive js ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน ractive js ของคุณโดยการเชื่อมโยงกับที่เก็บ github ของคุณ 7 1 การสร้างเวอร์ชันการผลิตของคุณ เปิดโฟลเดอร์โปรเจกต์ของคุณในเทอร์มินัล ดำเนินการสร้างกระบวนการ (อาจเป็นคำสั่งที่กำหนดเองตามการตั้งค่าของคุณ เช่น การใช้ rollup หรือ webpack) ตรวจสอบให้แน่ใจว่าโฟลเดอร์การผลิตของคุณ (โดยทั่วไปจะตั้งชื่อว่า dist หรือ build ) มีไฟล์สถิตของคุณ 7 2 การจัดระเบียบและการส่งโค้ดของคุณ ที่เก็บโปรเจกต์ของคุณควรมีโครงสร้างที่ชัดเจน เช่น basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md ไฟล์ตัวอย่าง ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; การส่งโค้ดของคุณ เริ่มต้นที่เก็บ git git init เพิ่มไฟล์ของคุณ git add ส่งการเปลี่ยนแปลง git commit m "การส่งครั้งแรกสำหรับ ractive js frontend" สร้างที่เก็บ github (เช่น, basic crud app ractive ) และส่งโค้ดของคุณ git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 การเชื่อมโยงที่เก็บข้อมูลของคุณกับการปรับใช้เว็บ back4app เข้าสู่ระบบแดชบอร์ด back4app ของคุณ เลือกโปรเจกต์ของคุณ ( basic crud app ractive ) และเลือก web deployment ตัวเลือก เชื่อมต่อบัญชี github ของคุณตามที่แนะนำ เลือกที่เก็บข้อมูลและสาขา (โดยปกติคือ main ) ที่มีโค้ด ractive js ของคุณ 7 4 การตั้งค่าพารามิเตอร์การปรับใช้ กำหนดค่าดังต่อไปนี้ คำสั่งสร้าง ระบุคำสั่งสร้างของคุณ (เช่น npm run build ) ไดเรกทอรีผลลัพธ์ ตั้งค่าให้เป็นโฟลเดอร์การผลิตของคุณ (เช่น build หรือ dist ) ตัวแปรสภาพแวดล้อม รวมคีย์ api หรือค่าคอนฟิกที่จำเป็น 7 5 การทำให้เป็นคอนเทนเนอร์ด้วย docker (ไม่บังคับ) หากคุณต้องการปรับใช้ผ่าน docker ให้รวม dockerfile ในโปรเจกต์ของคุณ \# base build stage using node js 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 entire app and build it copy run npm run build \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 การเปิดใช้งานแอปพลิเคชันของคุณ คลิกที่ deploy ปุ่มใน back4app ติดตามกระบวนการปรับใช้เมื่อ back4app ดึงและสร้างที่เก็บของคุณ เมื่อเสร็จสิ้น back4app จะให้ url สำหรับแอป ractive js ที่โฮสต์ของคุณ 7 7 การตรวจสอบการปรับใช้ เปิด url ที่ให้ไว้ในเบราว์เซอร์ของคุณ ทดสอบทุกเส้นทางเพื่อให้แน่ใจว่าทรัพย์สินทุกอย่าง (css, js, รูปภาพ) โหลดอย่างถูกต้อง หากเกิดปัญหา ให้ตรวจสอบบันทึกการปรับใช้และตรวจสอบการตั้งค่าการสร้างของคุณ ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำงานได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud ที่สมบูรณ์แบบโดยใช้ ractive js และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app ractive , กำหนดคอลเลกชันที่ชัดเจนสำหรับ items และ users และใช้ admin app ที่ใช้งานง่ายสำหรับการจัดการแบ็คเอนด์ นอกจากนี้ คุณยังได้รวม ractive js frontend ของคุณกับแบ็คเอนด์และเสริมความปลอดภัยของข้อมูลของคุณ ขั้นตอนถัดไป ปรับปรุง ui ของคุณ เพิ่มฟีเจอร์เช่นมุมมองรายละเอียด ฟังก์ชันการค้นหา หรือการอัปเดตแบบเรียลไทม์ ขยายแบ็คเอนด์ของคุณ รวมตรรกะแบ็คเอนด์ขั้นสูงเช่นฟังก์ชันคลาวด์หรือบริการ api ของบุคคลที่สาม ลึกซึ้งในการเรียนรู้ของคุณ สำรวจ เอกสาร back4app https //www back4app com/docs เพื่อการกำหนดค่าที่ซับซ้อนและการปรับแต่งที่มากขึ้น ด้วยบทเรียนนี้ คุณมีความเชี่ยวชาญในการสร้างแบ็คเอนด์ crud ที่สามารถปรับขนาดได้สำหรับแอปพลิเคชัน ractive js ของคุณโดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!