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

ภาพรวม ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่มีฟีเจอร์ครบถ้วนโดยใช้ knockout js บทเรียนนี้แสดงให้เห็นถึงวิธีการดำเนินการที่จำเป็นภายในแอปเว็บในขณะที่ใช้ back4app เป็นบริการแบ็กเอนด์ของคุณ เราจะเริ่มต้นด้วยการตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app knockout , เพื่อสร้างระบบการจัดการข้อมูลที่เชื่อถือได้สำหรับแอปพลิเคชันของคุณ หลังจากนั้น คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการกำหนดคอลเลกชันและฟิลด์—ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent—เพื่อให้แน่ใจว่าแอปของคุณสามารถจัดการการดำเนินการ crud ทั้งหมดได้อย่างมีประสิทธิภาพ ถัดไป คุณจะใช้ back4app admin app ซึ่งเป็นเครื่องมือที่ใช้งานง่ายแบบลากและวาง เพื่อจัดการคอลเลกชันของคุณได้อย่างง่ายดาย อินเทอร์เฟซนี้ทำให้กระบวนการดำเนินการ crud ง่ายขึ้น สุดท้าย คุณจะรวมส่วนหน้าของ knockout js เข้ากับ back4app โดยใช้การเรียก rest api การรวมนี้จะครอบคลุมแนวทางปฏิบัติด้านความปลอดภัยของแบ็กเอนด์ด้วยการควบคุมการเข้าถึงที่เหมาะสม เมื่อสิ้นสุดการสอนนี้ คุณจะได้สร้างเว็บแอปที่พร้อมใช้งานในระดับการผลิต ซึ่งรองรับฟังก์ชัน crud พื้นฐาน รวมถึงการตรวจสอบสิทธิ์ผู้ใช้ และมีการจัดการข้อมูลที่แข็งแกร่ง ข้อคิดสำคัญ เข้าใจวิธีการพัฒนาแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้ back4app ได้รับประสบการณ์จริงในการออกแบบแบ็กเอนด์ที่สามารถขยายได้และเชื่อมโยงกับฟรอนต์เอนด์ knockout js เรียนรู้การใช้เครื่องมือผู้ดูแลระบบแบบไม่มีโค้ด (back4app admin app) สำหรับการดำเนินการสร้าง อ่าน อัปเดต และลบ ค้นพบกลยุทธ์การปรับใช้ รวมถึงการใช้ docker containerization เพื่อเปิดตัวเว็บแอปของคุณอย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app และโครงการที่ใช้งานอยู่ ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณต้องการคำแนะนำ ตั้งค่าสภาพแวดล้อมการพัฒนาสำหรับ knockout js รวมไลบรารีผ่าน cdn หรือติดตั้งผ่าน npm หากคุณต้องการการตั้งค่าแบบโมดูล ความรู้พื้นฐานเกี่ยวกับ javascript, knockout js, และ rest apis ปรึกษา เอกสาร knockout js https //knockoutjs com/documentation/introduction html สำหรับการแนะนำ ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การตั้งค่าโครงการ back4app ของคุณ เข้าถึงบัญชี back4app ของคุณ เลือกตัวเลือก “แอปใหม่” จากแดชบอร์ดของคุณ กรอกชื่อโครงการ basic crud app knockout และทำตามขั้นตอนการตั้งค่า สร้างโครงการใหม่ เมื่อสร้างเสร็จแล้ว โครงการของคุณจะปรากฏบนแดชบอร์ดของคุณ ซึ่งเป็นกระดูกสันหลังสำหรับการกำหนดค่าฝั่งหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การออกแบบโครงสร้างข้อมูล สำหรับแอป crud นี้ คุณจะสร้างหลายคอลเลกชัน ด้านล่างเป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทข้อมูลที่แนะนำเพื่อเป็นแนวทางในการออกแบบฐานข้อมูลของคุณ สคีมานี้สนับสนุนการดำเนินการ crud พื้นฐาน 1\ คอลเลกชันรายการ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ สร้างคีย์ที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาของการอัปเดตครั้งล่าสุด 2\ การรวบรวมผู้ใช้ สนาม ประเภทข้อมูล รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำกันสำหรับผู้ใช้แต่ละคน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง แฮชที่ปลอดภัยของรหัสผ่านของผู้ใช้ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคอลเลกชันและกำหนดฟิลด์ต่างๆ สร้างคลาสใหม่ กำหนดฟิลด์ของคุณโดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ตั้งค่าค่าพื้นฐาน และทำเครื่องหมายฟิลด์ที่จำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema อัตโนมัติ back4app ai agent ช่วยให้การสร้าง schema ง่ายขึ้นโดยตรงจากแดชบอร์ดของคุณ มันสามารถสร้างคอลเลกชันและฟิลด์โดยอัตโนมัติตามคำอธิบายของคุณ ขั้นตอนในการใช้ ai agent เริ่มต้น ai agent เข้าถึงได้ผ่านแดชบอร์ด back4app หรือการตั้งค่าโปรเจกต์ของคุณ รายละเอียดโมเดลข้อมูลของคุณ วางคำอธิบายที่ระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและใช้ เอเจนต์จะเสนอ 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 – เปิดใช้งานแอปผู้ดูแลระบบและจัดการการดำเนินการ crud ภาพรวมของอินเทอร์เฟซผู้ดูแลระบบ แอปผู้ดูแลระบบ back4app ให้โซลูชันที่ไม่ต้องเขียนโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์ของคุณ อินเทอร์เฟซที่ใช้งานง่ายแบบลากและวางช่วยให้การดำเนินการ crud เป็นไปอย่างราบรื่น วิธีเปิดใช้งานแอปผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิกที่ “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างผู้ใช้ผู้ดูแลระบบคนแรก ซึ่งยังช่วยกำหนดบทบาทเช่น b4aadminuser และคอลเลกชันระบบที่จำเป็น เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งาน ให้ลงชื่อเข้าใช้แอปผู้ดูแลระบบเพื่อเริ่มการจัดการข้อมูล แดชบอร์ดแอปผู้ดูแลระบบ การใช้อินเทอร์เฟซผู้ดูแลระบบสำหรับ crud ภายในแอปผู้ดูแลระบบคุณสามารถ เพิ่มบันทึก คลิกที่ปุ่ม “เพิ่มบันทึก” ในคอลเลกชัน (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก เลือกบันทึกเพื่อตรวจสอบรายละเอียดหรืออัปเดตฟิลด์ ลบบันทึก ลบรายการใด ๆ ที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่เรียบง่ายนี้ช่วยเพิ่มความสะดวกในการใช้งานและเร่งการจัดการข้อมูลของคุณ ขั้นตอนที่ 4 – เชื่อมต่อ knockout js กับ back4app เมื่อคุณมีแบ็กเอนด์เรียบร้อยแล้ว ถึงเวลาที่จะรวมฟรอนต์เอนด์ knockout js ของคุณโดยใช้การเรียก rest api การใช้ rest api สำหรับการดำเนินการ crud เนื่องจาก parse sdk มักจะไม่ถูกใช้ร่วมกับ knockout js คุณจะทำการเรียก api โดยตรง ด้านล่างนี้เป็นตัวอย่างวิธีการจัดการงาน crud ตัวอย่างการดึงรายการ // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); ตัวอย่าง viewmodel ของ knockout js ด้านล่างนี้เป็นตัวอย่าง viewmodel สำหรับการจัดการรายการของคุณ function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); viewmodel นี้รวมการเรียก api สำหรับการสร้างและลบรายการในขณะที่จัดการสถานะด้วย knockout js observables ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ รายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการกำหนด acls ให้กับแต่ละวัตถุ ตัวอย่างเช่น เพื่อทำให้รายการเข้าถึงได้เฉพาะผู้สร้างเท่านั้น function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } สิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบหรือได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อน ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ในการจัดการการตรวจสอบสิทธิ์ ในแอป knockout js ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก rest api ตัวอย่าง การลงทะเบียนผู้ใช้ function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } สามารถใช้วิธีการที่คล้ายกันสำหรับการเข้าสู่ระบบของผู้ใช้และการจัดการเซสชัน ฟีเจอร์เพิ่มเติมเช่นการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่านสามารถกำหนดค่าผ่าน back4app ขั้นตอนที่ 7 – การปรับใช้ส่วนหน้า knockout js ของคุณโดยใช้การปรับใช้เว็บ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์ส่วนหน้า knockout js ของคุณได้อย่างง่ายดายโดยการเชื่อมโยงกับที่เก็บ github ของคุณ ทำตามขั้นตอนเหล่านี้ 7 1 สร้างไฟล์ผลิตภัณฑ์ของคุณ เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันกระบวนการสร้างของคุณ หากคุณใช้เครื่องมือสร้างเช่น webpack ให้รันคำสั่งที่เหมาะสม (เช่น, npm run build ) เพื่อคอมไพล์ทรัพย์สินของคุณ ยืนยันการสร้าง ตรวจสอบให้แน่ใจว่าโฟลเดอร์การสร้างของคุณมี index html และทรัพย์สินสถิติตามที่ต้องการทั้งหมด 7 2 จัดระเบียบและคอมมิตโค้ดของคุณไปยัง github ที่เก็บของคุณควรมีไฟล์ต้นฉบับทั้งหมดสำหรับส่วนหน้า knockout js ของคุณ โครงสร้างตัวอย่างอาจเป็น basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md ไฟล์ตัวอย่าง src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); การคอมมิตและผลักดันโค้ดไปยัง github เริ่มต้น git (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "initial commit for knockout js frontend" สร้างที่เก็บ github (เช่น, basic crud app knockout frontend ) ส่งโค้ดของคุณ git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 การเชื่อมโยงที่เก็บ github ของคุณกับการปรับใช้เว็บ เข้าถึงฟีเจอร์การปรับใช้เว็บ ในแดชบอร์ด back4app ของคุณ ให้เลือกโปรเจกต์ของคุณ (basic crud app knockout) และคลิกที่ การปรับใช้เว็บ เชื่อมต่อกับ github ทำตามคำแนะนำเพื่อรวมบัญชี github ของคุณ เลือกที่เก็บและสาขาของคุณ เลือกที่เก็บของคุณ (เช่น, basic crud app knockout frontend ) และสาขา (เช่น, main ) ที่มีโค้ดของคุณ 7 4 การตั้งค่าการปรับใช้ คำสั่งสร้าง หากที่เก็บของคุณไม่มีโฟลเดอร์ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่งสร้าง (เช่น npm run build ) ไดเรกทอรีผลลัพธ์ ตั้งค่านี้ให้เป็นโฟลเดอร์ที่มีไฟล์สถิตของคุณ (เช่น build หรือ public ) ตัวแปรสภาพแวดล้อม เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็น เช่น คีย์ api 7 5 การทำให้แอปพลิเคชันของคุณเป็นคอนเทนเนอร์ด้วย docker (ไม่บังคับ) หากคุณต้องการใช้ docker ให้รวม dockerfile ในที่เก็บของคุณ \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files 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 จะให้ url เพื่อเข้าถึงแอป knockout js ของคุณ 7 7 การทดสอบการปรับใช้ เปิด url ที่ให้มา ตรวจสอบว่าแอปของคุณโหลดได้อย่างถูกต้อง รันการทดสอบ ตรวจสอบให้แน่ใจว่าทุกเส้นทางและทรัพย์สิน (css, js, รูปภาพ) ทำงาน ดีบักหากจำเป็น ใช้เครื่องมือพัฒนาเพื่อตรวจสอบข้อผิดพลาดใด ๆ และอ้างอิงไปยังบันทึกการปรับใช้ของ back4app ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud เบื้องต้นโดยใช้ knockout js และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app knockout , สร้างคอลเลกชันที่ละเอียดสำหรับ items และ users และจัดการข้อมูลของคุณผ่าน admin app นอกจากนี้ คุณได้รวมส่วนหน้าของ knockout js เข้ากับส่วนหลังของคุณโดยใช้การเรียก rest api และดำเนินการควบคุมการเข้าถึงที่ปลอดภัย ขั้นตอนถัดไป ขยายส่วนหน้าของคุณ ปรับปรุงแอปของคุณด้วยฟีเจอร์เช่นการดูรายละเอียดของรายการ, ความสามารถในการค้นหา, หรือการอัปเดตแบบสด เพิ่มตรรกะด้านหลังที่ซับซ้อน สำรวจการใช้ cloud functions หรือการรวมบริการของบุคคลที่สาม ดำน้ำลึก ปรึกษา เอกสาร back4app https //www back4app com/docs เพื่อการปรับแต่งเพิ่มเติมและการรวมที่ซับซ้อน โดยการติดตามบทแนะนำนี้ คุณมีความรู้ในการสร้างแอป crud ที่แข็งแกร่งและปรับขนาดได้ด้วย knockout js โดยใช้ back4app ขอให้สนุกกับการเขียนโค้ด!