How to Build a Basic CRUD App with Solid?

ภาพรวม ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการพัฒนาแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) แบบครบวงจรโดยใช้ solidjs เราจะใช้ back4app เป็นบริการแบ็กเอนด์ของเรา ซึ่งช่วยให้คุณจัดการข้อมูลได้อย่างง่ายดาย คู่มือนี้จะพาคุณไปตั้งค่าโปรเจกต์ back4app สร้างสคีมาข้อมูลที่ยืดหยุ่น และเขียนการดำเนินการ crud ภายในแอปพลิเคชัน solidjs ในตอนแรก คุณจะตั้งค่าโปรเจกต์ back4app ที่เรียกว่า basic crud app solidjs โปรเจกต์นี้ให้สภาพแวดล้อมการจัดเก็บข้อมูลที่แข็งแกร่งและไม่มีสคีมา คุณจะกำหนดโมเดลข้อมูลของคุณโดยการสร้างคอลเลกชันและฟิลด์ด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app ถัดไป คุณจะจัดการข้อมูลแบ็กเอนด์ของคุณโดยใช้ back4app admin app ที่ใช้งานง่าย สุดท้าย คุณจะรวมแอปพลิเคชัน solidjs ของคุณกับ back4app ผ่าน parse javascript sdk (หรือผ่าน rest/graphql apis ตามที่จำเป็น) ในขณะที่บังคับใช้การควบคุมการเข้าถึงที่ปลอดภัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปพลิเคชัน solidjs ที่พร้อมใช้งานในระดับการผลิต ซึ่งทำงานฟังก์ชัน crud ที่จำเป็นพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูล สิ่งที่คุณจะได้เรียนรู้ วิธีสร้างแอป crud ที่ใช้ solidjs โดยมีแบ็กเอนด์ที่ทันสมัยและไม่ต้องเขียนโค้ด แนวทางปฏิบัติที่ดีที่สุดในการออกแบบแบ็กเอนด์ที่สามารถขยายได้และเชื่อมต่อกับแอป solidjs ของคุณ วิธีนำทางแอป back4app admin เพื่อการดำเนินการข้อมูลที่ราบรื่น กลยุทธ์การปรับใช้ รวมถึงการใช้ docker containerization เพื่อเปิดตัวแอป solidjs ของคุณอย่างราบรื่น ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโปรเจกต์ที่ใช้งานอยู่ ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนาที่ตั้งค่าไว้สำหรับ solidjs เราขอแนะนำให้ใช้ visual studio code หรือโปรแกรมแก้ไขที่คุณชื่นชอบ พร้อมกับ node js (v14 หรือสูงกว่า) ความรู้พื้นฐานเกี่ยวกับ solidjs, javascript สมัยใหม่ และ restful apis ทบทวนกับ เอกสาร solidjs https //www solidjs com/docs หากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโปรเจกต์ การตั้งค่าโปรเจกต์ back4app ของคุณ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “new app” บนแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app solidjs และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างโปรเจกต์ของคุณแล้ว มันจะปรากฏบนแดชบอร์ดของคุณ ซึ่งเป็นการวางรากฐานสำหรับแบ็กเอนด์ของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาข้อมูลของคุณ การออกแบบโครงสร้างข้อมูล สำหรับแอปพลิเคชัน crud นี้ คุณจะตั้งค่าหลายคอลเลกชันในโปรเจกต์ back4app ของคุณ ด้านล่างนี้คือตัวอย่างของคอลเลกชันหลักและฟิลด์ที่จำเป็น 1\ คอลเลกชัน รายการ คอลเลกชันนี้เก็บข้อมูลเกี่ยวกับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่รายการถูกเพิ่ม อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตครั้งล่าสุด 2\ การเก็บรวบรวม ผู้ใช้ คอลเลกชันนี้จัดการข้อมูลประจำตัวผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวผู้ใช้ที่ไม่ซ้ำกัน อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกัน รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าถึงที่ปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตบัญชีล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้และเพิ่มฟิลด์ผ่านแดชบอร์ด back4app ได้ สร้างคลาสใหม่ ในการเพิ่มฟิลด์ใหม่ ให้เลือกประเภทข้อมูลที่เหมาะสม ตั้งชื่อฟิลด์ กำหนดค่าเริ่มต้นหากจำเป็น และทำเครื่องหมายว่าจำเป็นหากจำเป็น สร้างคอลัมน์ การใช้ผู้ช่วย ai ของ back4app สำหรับการสร้าง schema ผู้ช่วย ai ที่รวมอยู่ใน back4app สามารถสร้าง schema ข้อมูลของคุณโดยอัตโนมัติตามคำแนะนำของคุณ ช่วยประหยัดเวลาและรับประกันความสอดคล้อง วิธีการใช้ผู้ช่วย ai เปิดผู้ช่วย ai เข้าถึงได้ผ่านการตั้งค่าโปรเจกต์ของคุณในแดชบอร์ด back4app รายละเอียดโมเดลข้อมูลของคุณ ป้อนคำอธิบายโดยละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่ต้องการ ยืนยันการตั้งค่า ตรวจสอบ schema ที่แนะนำและอนุมัติเพื่อสรุปการกำหนดค่า ตัวอย่างคำสั่ง create two 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 – เปิดใช้งานแดชบอร์ดผู้ดูแลระบบ & การจัดการการดำเนินการข้อมูล แนะนำแดชบอร์ดผู้ดูแลระบบ แดชบอร์ดผู้ดูแลระบบ back4app มีอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดสำหรับการจัดการแบ็กเอนด์อย่างมีประสิทธิภาพ ฟีเจอร์การลากและวางทำให้การทำงาน crud เช่น การเพิ่ม การดู การอัปเดต และการลบข้อมูลเป็นเรื่องง่าย การเปิดใช้งานแดชบอร์ดผู้ดูแลระบบ ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และคลิก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างบัญชีผู้ดูแลระบบเริ่มต้น นี่จะช่วยกำหนดบทบาทที่จำเป็น (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแดชบอร์ดผู้ดูแลระบบเพื่อจัดการข้อมูลของแอปของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud ในแดชบอร์ดผู้ดูแลระบบ ภายในแดชบอร์ด คุณสามารถ เพิ่มบันทึก ใช้ฟีเจอร์ “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อป้อนข้อมูลใหม่ ดู/แก้ไขบันทึก คลิกที่รายการเพื่อดูหรือแก้ไขรายละเอียด ลบบันทึก ลบรายการที่ล้าสมัยหรือไม่ต้องการ อินเทอร์เฟซนี้ทำให้การจัดการข้อมูลง่ายขึ้น โดยมอบประสบการณ์ที่มีประสิทธิภาพและใช้งานง่าย ขั้นตอนที่ 4 – เชื่อมต่อแอปพลิเคชัน solidjs ของคุณกับ back4app เมื่อมีแบ็กเอนด์แล้ว ขั้นตอนถัดไปคือการเชื่อมต่อแอปพลิเคชัน solidjs ของคุณกับ back4app ตัวเลือก a ใช้ parse javascript sdk ติดตั้ง parse javascript 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'; export default parse; 3\ implement crud operations in solidjs here’s an example solidjs service for managing items ```javascript // itemsservice js import parse from ' /parseconfig'; export const fetchitems = async () => { try { const items = parse object extend("items"); const query = new parse query(items); const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); } }; export const additem = async (title, description) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); try { await item save(); console log("item added successfully "); } catch (error) { console error("error adding item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const items = parse object extend("items"); 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 items = parse object extend("items"); 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 apis หากคุณไม่ต้องการใช้ parse sdk คุณสามารถดำเนินการ crud ผ่าน rest ได้ ตัวอย่างเช่น นี่คือวิธีการดึงรายการโดยใช้ rest api 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(); return data results; } catch (error) { console error("error fetching items via rest ", error); } }; รวมการเรียก api เหล่านี้เข้ากับคอมโพเนนต์ solidjs ของคุณตามที่ต้องการ ขั้นตอนที่ 5 – การเพิ่มความปลอดภัยของแบ็คเอนด์ การกำหนดรายการควบคุมการเข้าถึง (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls สำหรับแต่ละวัตถุ ตัวอย่างเช่น เพื่อจำกัดรายการให้เจ้าของเท่านั้นที่สามารถเข้าถึงได้ import parse from ' /parseconfig'; export const addprivateitem = async (title, description, owner) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item added "); } catch (error) { console error("error saving private item ", error); } }; การตั้งค่าการอนุญาตระดับคลาส (clps) กำหนดค่า clps ในแดชบอร์ด back4app ของคุณเพื่อบังคับใช้ข้อจำกัดการเข้าถึงเริ่มต้น เพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถโต้ตอบกับคอลเลกชันบางอย่างได้ ขั้นตอนที่ 6 – การนำการตรวจสอบสิทธิ์ผู้ใช้ไปใช้ การจัดการบัญชีผู้ใช้ back4app ใช้คอลเลกชันผู้ใช้ parse ที่สร้างขึ้นในตัวสำหรับการตรวจสอบสิทธิ์ ในแอป solidjs ของคุณ ให้จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ดังนี้ import parse from ' /parseconfig'; export const registeruser = 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("registration error ", 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 error ", error); } }; กลยุทธ์ที่คล้ายกันสามารถนำมาใช้สำหรับการจัดการเซสชัน การรีเซ็ตรหัสผ่าน และฟีเจอร์การตรวจสอบสิทธิ์อื่นๆ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน solidjs ของคุณ back4app ทำให้กระบวนการปรับใช้ง่ายขึ้น คุณสามารถปรับใช้แอปพลิเคชัน solidjs ของคุณผ่านวิธีการต่างๆ รวมถึง docker 7 1 การเตรียมแอปพลิเคชันของคุณ สร้างแอปพลิเคชันของคุณ ใช้ตัวจัดการแพ็คเกจของคุณเพื่อคอมไพล์แอป solidjs ของคุณ ตัวอย่างเช่น npm run build ตรวจสอบผลลัพธ์การสร้าง ตรวจสอบให้แน่ใจว่าโฟลเดอร์การสร้างมีไฟล์ที่จำเป็นทั้งหมด 7 2 การจัดระเบียบโครงสร้างโปรเจกต์ของคุณ โครงสร้างโปรเจกต์ทั่วไปอาจมีลักษณะดังนี้ basic crud app solidjs/ \| public/ \| | index html \| src/ \| | components/ \| | | app jsx \| | services/ \| | | parseconfig js \| | | itemsservice js \| | | authservice js \| | index jsx \| package json \| readme md 7 3 การทำให้แอปพลิเคชันของคุณเป็น docker หากคุณต้องการบรรจุแอปของคุณในคอนเทนเนอร์ ให้สร้าง dockerfile ที่รากของโปรเจกต์ \# use a lightweight node image from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the application run npm run build \# expose the port (adjust if needed) expose 3000 \# serve the built application cmd \["npx", "serve", "build"] 7 4 การปรับใช้ด้วย back4app web deployment เชื่อมต่อที่เก็บ git ของคุณ ตรวจสอบให้แน่ใจว่าโปรเจกต์ solidjs ของคุณโฮสต์อยู่บน github กำหนดค่าการปรับใช้ ในแดชบอร์ด back4app ของคุณ ให้เลือก web deployment , เชื่อมโยงที่เก็บของคุณ (เช่น basic crud app solidjs ) และเลือกสาขาที่เหมาะสม ตั้งค่าคำสั่งสร้าง กำหนดคำสั่งสร้าง (เช่น npm run build ) และระบุไดเรกทอรีผลลัพธ์ ปรับใช้แอปพลิเคชันของคุณ คลิก deploy และติดตามบันทึกจนกว่าแอปของคุณจะออนไลน์ ขั้นตอนที่ 8 – ความคิดสุดท้ายและการปรับปรุงในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน solidjs crud ที่เชื่อมต่อกับ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app solidjs , กำหนดคอลเลกชัน items และ users ของคุณ และจัดการข้อมูลผ่าน back4app admin dashboard นอกจากนี้ คุณได้เชื่อมต่อแอป solidjs ของคุณโดยใช้ parse javascript sdk (หรือ rest/graphql) และใช้มาตรการรักษาความปลอดภัยที่มั่นคง ขั้นตอนถัดไป ขยายแอปพลิเคชัน เพิ่มฟีเจอร์ขั้นสูง เช่น ตัวกรองการค้นหา, การดูรายละเอียดรายการ, หรือการอัปเดตข้อมูลแบบเรียลไทม์ ปรับปรุง backend ทดลองใช้ฟังก์ชันคลาวด์, การรวม api ของบุคคลที่สาม, หรือการจัดการการเข้าถึงตามบทบาท เรียนรู้เพิ่มเติม ดำน้ำลึกใน เอกสาร back4app https //www back4app com/docs และบทเรียน solidjs เพิ่มเติมเพื่อปรับปรุงแอปพลิเคชันของคุณ ขอให้สนุกกับการเขียนโค้ดและโชคดีในโครงการ solidjs crud ของคุณ!