How to Build CRUD App with JavaScript?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) อย่างครบถ้วนโดยใช้ javascript เราจะใช้ back4app เพื่อจัดการข้อมูลด้านหลังของคุณอย่างง่ายดาย คู่มือนี้ครอบคลุมการดำเนินการ crud ที่สำคัญ ตั้งแต่การกำหนดค่าโครงการ back4app ไปจนถึงการรวมแอปพลิเคชัน javascript ของคุณกับ parse javascript sdk หรือ rest api ในตอนแรก คุณจะตั้งค่าโครงการบน back4app ที่ชื่อ basic crud app javascript , ซึ่งมีโซลูชันด้านหลังที่แข็งแกร่ง จากนั้นคุณจะกำหนดสคีมาข้อมูลของคุณ—ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app—เพื่อให้เหมาะกับความต้องการของแอปพลิเคชันของคุณ ถัดไป คุณจะจัดการด้านหลังของคุณผ่าน back4app admin app ที่ใช้งานง่าย ซึ่งช่วยให้คุณสามารถดำเนินการข้อมูลผ่านอินเทอร์เฟซการลากและวางที่เรียบง่าย สุดท้าย คุณจะเชื่อมต่อแอปพลิเคชัน javascript ของคุณกับ back4app โดยดำเนินการรับรองความถูกต้องของผู้ใช้ที่ปลอดภัยและฟังก์ชัน crud พื้นฐาน เมื่อสิ้นสุดคู่มือนี้ คุณจะได้สร้างแอปพลิเคชัน javascript ที่พร้อมใช้งานในระดับการผลิต ซึ่งสามารถทำการดำเนินการ crud พื้นฐานทั้งหมดพร้อมการควบคุมการเข้าถึงที่ปลอดภัย จุดสำคัญที่ควรจำ เรียนรู้วิธีพัฒนาแอป crud ที่ใช้ javascript พร้อมกับแบ็กเอนด์ที่สามารถขยายได้ เข้าใจวิธีการจัดโครงสร้างแบ็กเอนด์ของคุณและรวมเข้ากับโค้ด javascript ของคุณได้อย่างราบรื่น เรียนรู้การใช้แอป admin ของ back4app สำหรับการจัดการข้อมูลและการดำเนินการ crud ได้อย่างง่ายดาย สำรวจตัวเลือกการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ด้วย docker เพื่อเปิดตัวแอปพลิเคชัน javascript ของคุณ ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโครงการที่กำหนดค่าแล้ว ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app การตั้งค่าการพัฒนา javascript คุณสามารถใช้ visual studio code หรือโปรแกรมแก้ไขอื่น ๆ ที่คุณชื่นชอบพร้อมกับ node js (เวอร์ชัน 14 หรือใหม่กว่า) ความรู้พื้นฐานเกี่ยวกับ javascript, เฟรมเวิร์กสมัยใหม่ และ rest apis อ้างอิงจาก เอกสาร javascript https //developer mozilla org/en us/docs/web/javascript หากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ของคุณ การตั้งค่าโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ กรอกชื่อโปรเจกต์ basic crud app javascript และทำตามขั้นตอนการตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ถูกสร้างขึ้น มันจะแสดงในแดชบอร์ดของคุณ ซึ่งเป็นการวางรากฐานสำหรับการกำหนดค่าด้านหลังของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาข้อมูลของคุณ การออกแบบโครงสร้างข้อมูล สำหรับแอป crud ของเรา เราจะสร้างคลาสหลักสองคลาส (คอลเลกชัน) บน back4app คลาสเหล่านี้และฟิลด์ของพวกเขามีความสำคัญต่อการจัดการการดำเนินการ crud ที่จำเป็น 1\ รายการ items การเก็บรวบรวม การเก็บรวบรวมนี้เก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท รายละเอียด id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง สรุปสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาของการอัปเดตล่าสุด 2\ ผู้ใช้ users คอลเลกชัน คอลเลกชันนี้จัดการข้อมูลประจำตัวของผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภท รายละเอียด id รหัสวัตถุ สร้าง id ที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสเพื่อการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่อัปเดตบัญชีล่าสุด คุณสามารถสร้างคลาสเหล่านี้และฟิลด์ของพวกเขาได้โดยตรงในแดชบอร์ด back4app สร้างคลาสใหม่ คุณสามารถเพิ่มคอลัมน์ได้โดยการเลือกประเภท ตั้งชื่อฟิลด์ กำหนดค่าเริ่มต้น และตั้งค่าตัวเลือกที่จำเป็น สร้างคอลัมน์ การใช้ ai agent ของ back4app สำหรับการสร้าง schema ai agent ของ back4app ช่วยให้การสร้าง schema ง่ายขึ้นโดยการสร้างโมเดลข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายของคุณ ฟีเจอร์นี้ช่วยเร่งการตั้งค่าโครงการและทำให้แน่ใจว่า schema ของคุณสอดคล้องกับความต้องการ crud ของคุณ วิธีการใช้ ai agent เปิด ai agent เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหา ai agent ในการตั้งค่าโครงการ อธิบาย schema ของคุณ ป้อนคำอธิบายที่ละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่ต้องการ ตรวจสอบและยืนยัน หลังจากการประมวลผล ai agent จะแสดง schema ที่เสนอ ตรวจสอบและยืนยันเพื่อใช้มัน คำอธิบายตัวอย่าง create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection 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 – เชื่อมต่อแอป javascript ของคุณกับ back4app เมื่อมีการตั้งค่าด้านหลังแล้ว ขั้นตอนถัดไปคือการรวมแอปพลิเคชัน javascript ของคุณกับ back4app ตัวเลือก a การใช้ parse javascript sdk รวม parse sdk หากคุณใช้ npm ให้ติดตั้ง sdk โดยการรัน npm install parse เริ่มต้น parse ในแอปพลิเคชันของคุณ สร้างไฟล์เริ่มต้น (เช่น parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 3\ implement crud functions for example, create a module to handle item operations ```javascript // itemsservice js import parse from 'parse'; export const getitems = async () => { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); return \[]; } }; export const createitem = async (title, description) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item created successfully "); } catch (error) { console error("error creating item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; ตัวเลือก b การใช้ rest หรือ graphql หากคุณไม่ต้องการใช้ parse sdk คุณสามารถโต้ตอบกับ back4app ผ่านการเรียก rest ตัวอย่างเช่น เพื่อดึงรายการโดยใช้ rest import fetch from 'node fetch'; export const fetchitemsrest = async () => { try { const 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', }, }); const data = await response json(); console log("items fetched ", data); } catch (error) { console error("error fetching items via rest ", error); } }; รวมการเรียก api เหล่านี้ภายในโมดูล javascript ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การปกป้อง backend ของคุณ การกำหนดค่าการควบคุมการเข้าถึง ตรวจสอบให้แน่ใจว่าข้อมูลของคุณปลอดภัยโดยการตั้งค่ารายการควบคุมการเข้าถึง (acls) ตัวอย่างเช่น เพื่อสร้างรายการที่เข้าถึงได้เฉพาะโดยผู้สร้างเท่านั้น import parse from 'parse'; export const createprivateitem = async (title, description, user) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(user, true); acl setwriteaccess(user, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item created successfully "); } catch (error) { console error("error creating private item ", error); } }; การปรับระดับสิทธิ์ของคลาส (clps) ตั้งค่ากฎการเข้าถึงเริ่มต้นสำหรับคอลเลกชันของคุณผ่านแดชบอร์ด back4app โดยตรวจสอบให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ parse ที่สร้างขึ้นมาเพื่อจัดการการตรวจสอบสิทธิ์ ในแอปพลิเคชัน javascript ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ดังนี้ import parse from 'parse'; export const signupuser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("error during sign up ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login failed ", error); } }; วิธีนี้สามารถขยายได้สำหรับการจัดการเซสชัน การกู้คืนรหัสผ่าน และอื่น ๆ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน javascript ของคุณ back4app ทำให้การปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอป javascript ของคุณโดยใช้วิธีการต่าง ๆ เช่น การบรรจุใน docker 7 1 การสร้างแอปพลิเคชันของคุณ บันเดิลแอปพลิเคชันของคุณ ใช้เครื่องมือสร้างของคุณ (เช่น webpack หรือบันเดลเลอร์ที่คล้ายกัน) เพื่อคอมไพล์โค้ดของคุณ ตรวจสอบการสร้าง ตรวจสอบให้แน่ใจว่าไฟล์ที่บันเดิลมีโมดูลและทรัพยากรที่จำเป็นทั้งหมด 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ โครงสร้างโปรเจกต์ javascript แบบทั่วไปอาจมีลักษณะดังนี้ basic crud app javascript/ \| src/ \| | index js \| | parseconfig js \| | services/ \| | itemsservice js \| | authservice js \| public/ \| | index html \| package json \| readme md ตัวอย่าง parseconfig js // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 7 3 การทำให้แอป javascript ของคุณเป็น docker หากคุณเลือกการบรรจุภัณฑ์ ให้รวม dockerfile ในรากโปรเจกต์ของคุณ \# use an official node js runtime as the base image from node 14 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# define the command to run your application cmd \["npm", "start"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมต่อกับ github repository ของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ javascript ของคุณถูกโฮสต์บน github กำหนดค่าการตั้งค่าการปรับใช้ ในแดชบอร์ด back4app ให้ใช้ web deployment ตัวเลือกเพื่อเชื่อมโยงกับที่เก็บของคุณ (เช่น basic crud app javascript ) และเลือกสาขาที่ต้องการ ตั้งค่าคำสั่ง build และ output ระบุคำสั่งการสร้างของคุณ (เช่น npm run build ) และไดเรกทอรีผลลัพธ์ ปรับใช้ กด deploy และดูบันทึกจนกว่าแอปพลิเคชันของคุณจะออนไลน์ ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้พัฒนาแอปพลิเคชัน crud ที่ใช้ javascript ร่วมกับ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app javascript , จัดโครงสร้าง items และ users คอลเลกชันของคุณ และจัดการแบ็กเอนด์ของคุณโดยใช้ back4app admin app นอกจากนี้ คุณได้เชื่อมต่อแอปพลิเคชัน javascript ของคุณผ่าน parse sdk (หรือ rest api) และดำเนินการมาตรการด้านความปลอดภัยที่เข้มงวด สิ่งที่ควรสำรวจต่อไป เพิ่มฟังก์ชันการทำงาน พิจารณาเพิ่มฟีเจอร์เช่น ตัวกรองการค้นหา, มุมมองรายละเอียด, หรือการอัปเดตข้อมูลแบบเรียลไทม์ ขยายฟีเจอร์แบ็กเอนด์ พิจารณาฟังก์ชันคลาวด์, การรวม api ของบุคคลที่สาม, หรือการดำเนินการควบคุมการเข้าถึงตามบทบาทที่ซับซ้อน เพิ่มพูนความเชี่ยวชาญของคุณ เยี่ยมชม เอกสาร back4app https //www back4app com/docs และสำรวจบทเรียนเพิ่มเติมเพื่อเพิ่มประสิทธิภาพแอปของคุณ ขอให้สนุกกับการเขียนโค้ด และเพลิดเพลินกับการสร้างแอปพลิเคชัน crud ที่ใช้ javascript ขั้นสูงของคุณ!