How to Create a CRUD App with Gatsby?

บทนำ ในคู่มือนี้ คุณจะได้ค้นพบวิธีการสร้างแอปพลิเคชันเว็บ crud (สร้าง, อ่าน, อัปเดต, ลบ) โดยใช้ gatsby เราจะใช้ back4app เป็นแบ็กเอนด์คลาวด์ของคุณเพื่อจัดการข้อมูลได้อย่างง่ายดาย คู่มานี้จะพาคุณไปตั้งค่าโปรเจกต์ back4app กำหนดสคีมาที่ยืดหยุ่น และเชื่อมต่อแอป gatsby ของคุณกับการเรียก api rest หรือ graphql เพื่อดำเนินการ crud ในตอนแรก คุณจะตั้งค่าโปรเจกต์ back4app ที่ชื่อ basic crud app gatsby โปรเจกต์นี้จะให้คุณเข้าถึงฐานข้อมูลที่ไม่สัมพันธ์ที่มีความแข็งแกร่ง คุณจะออกแบบสคีมาข้อมูลของคุณโดยการสร้างคลาสและฟิลด์ในแดชบอร์ด back4app ด้วยตนเองหรือโดยการใช้ ai agent ของ back4app ถัดไป คุณจะใช้ back4app admin app—ซึ่งเป็นอินเทอร์เฟซแบบลากและวาง—เพื่อจัดการงานด้านข้อมูลได้อย่างง่ายดาย สุดท้าย คุณจะรวมแอป gatsby ของคุณเข้ากับ api ของ back4app (ผ่าน rest หรือ graphql) เพื่อดำเนินการ crud ที่ปลอดภัย เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้พัฒนาแอป gatsby ที่พร้อมใช้งานในระดับการผลิตซึ่งดำเนินการ crud พื้นฐานพร้อมการจัดการข้อมูลที่ปลอดภัยและการตรวจสอบสิทธิ์ผู้ใช้ ข้อสรุปสำคัญ เรียนรู้วิธีการสร้างแอปพลิเคชัน crud ด้วย gatsby ที่มีแบ็คเอนด์แบบ low code เข้าใจวิธีการจัดโครงสร้างแบ็คเอนด์ของคุณและเชื่อมโยงกับเว็บไซต์ gatsby สมัยใหม่ ใช้แอป admin ที่ใช้งานง่ายของ back4app เพื่อจัดการการสร้าง อ่าน อัปเดต และลบข้อมูล ค้นพบตัวเลือกการปรับใช้รวมถึงกลยุทธ์การบรรจุภัณฑ์สำหรับแอป gatsby ของคุณ ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโครงการที่ใช้งานอยู่ ต้องการความช่วยเหลือ? ดูที่ เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อม node js ที่ติดตั้ง gatsby cli ใช้ node js https //nodejs org/ และติดตั้ง gatsby ผ่าน npm install g gatsby cli ความคุ้นเคยกับ react, graphql, และ rest apis ตรวจสอบ เอกสาร react https //reactjs org/docs/getting started html หากจำเป็น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ของคุณ การสร้างโปรเจกต์ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app gatsby และทำตามขั้นตอนการตั้งค่า สร้างโปรเจกต์ใหม่ หลังจากสร้างเสร็จ โปรเจกต์ของคุณจะปรากฏบนแดชบอร์ด พร้อมสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การกำหนดโมเดลข้อมูลของคุณ การกำหนดค่า schema ของคุณ สำหรับแอป crud นี้ คุณต้องตั้งค่าหลายคลาสใน back4app ด้านล่างนี้คือตัวอย่างของคลาสและฟิลด์ที่จำเป็น 1\ คลาส items คลาสนี้เก็บรายละเอียดเกี่ยวกับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อของรายการ คำอธิบาย สตริง คำอธิบายสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่สร้างรายการ อัปเดตเมื่อ วันที่ เวลาที่รายการถูกปรับปรุงล่าสุด 2\ ประเภทผู้ใช้ คลาสนี้จัดการข้อมูลประจำตัวผู้ใช้และการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ สร้าง id ที่ไม่ซ้ำกันโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการเข้าสู่ระบบ สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาของการอัปเดตบัญชีล่าสุด คุณสามารถเพิ่มคลาสและฟิลด์เหล่านี้โดยตรงในแดชบอร์ด back4app สร้างคลาสใหม่ คุณสามารถกำหนดฟิลด์โดยการเลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ตั้งค่าดีฟอลต์ และทำเครื่องหมายฟิลด์ที่จำเป็น สร้างคอลัมน์ การใช้ back4app ai agent สำหรับการสร้าง schema ตัวแทน ai ของ back4app สามารถสร้างสคีมาของคุณโดยอัตโนมัติตามข้อกำหนดของคุณ สิ่งนี้ช่วยเร่งการตั้งค่าและทำให้มั่นใจว่าสิ่งที่คุณทำงานอยู่รองรับการดำเนินการ crud ทั้งหมด วิธีการใช้ตัวแทน ai เปิดตัวแทน ai ลงชื่อเข้าใช้แดชบอร์ด back4app ของคุณและค้นหาตัวแทน ai ภายใต้การตั้งค่าโครงการของคุณ ป้อนความต้องการของคุณ อธิบายคลาสและฟิลด์ที่คุณต้องการ ตรวจสอบและใช้ ตัวแทนจะเสนอแนะสคีมา ตรวจสอบและยืนยันเพื่อดำเนินการ ตัวอย่างคำสั่ง create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class 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 – เชื่อมต่อแอป gatsby ของคุณกับ back4app เมื่อคุณตั้งค่าด้านหลังเสร็จแล้ว ขั้นตอนถัดไปคือการเชื่อมต่อแอป gatsby ของคุณกับ back4app การใช้ api calls ใน gatsby เราจะใช้ rest หรือ graphql calls เพื่อสื่อสารกับ back4app ตัวเลือกที่สองคือการใช้ sdk การดึงข้อมูลโดยใช้ rest คุณสามารถใช้ fetch api ของ javascript เพื่อดึงข้อมูล ตัวอย่างเช่น เพื่อโหลดรายการจาก back4app // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { 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 ', error); return \[]; } }; การส่งข้อมูลผ่าน rest ในการเพิ่มรายการใหม่ ให้ใช้คำขอ post // src/services/api js export const createitem = async (title, description) => { 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({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; คุณสามารถดำเนินการอัปเดตและลบฟังก์ชันได้ในลักษณะเดียวกันโดยใช้วิธี put/post และ delete รวมการเรียก api เหล่านี้เข้ากับหน้า gatsby หรือส่วนประกอบของคุณเพื่อจัดการข้อมูลแบบไดนามิก ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การดำเนินการควบคุมการเข้าถึง ปกป้องข้อมูลของคุณโดยการตั้งค่ารายการควบคุมการเข้าถึง (acls) ใน back4app ตัวอย่างเช่น เพื่อสร้างรายการที่มองเห็นได้เฉพาะเจ้าของเท่านั้น // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; การอนุญาตระดับคลาส (clps) ตั้งค่า clps ในแดชบอร์ด back4app ของคุณเพื่อบังคับใช้กฎการเข้าถึงเริ่มต้น โดยให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงคลาสเฉพาะได้ ขั้นตอนที่ 6 – การเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ใน gatsby back4app ใช้คลาสผู้ใช้ที่สร้างขึ้นใน parse สำหรับการตรวจสอบสิทธิ์ ในแอป gatsby ของคุณ จัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ผ่านการเรียก api ตัวอย่าง การลงทะเบียนผู้ใช้ // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('https //parseapi back4app com/users', { 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({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; ตัวอย่าง การเข้าสู่ระบบผู้ใช้ // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; วิธีการนี้สามารถขยายเพื่อจัดการเซสชัน การรีเซ็ตรหัสผ่าน และอื่น ๆ ได้ ขั้นตอนที่ 7 – การปรับใช้แอปพลิเคชัน gatsby ของคุณ back4app รองรับกระบวนการปรับใช้ที่ราบรื่น คุณสามารถปรับใช้แอป gatsby ของคุณโดยใช้หลายวิธี รวมถึงการทำให้เป็นคอนเทนเนอร์ 7 1 การสร้างเว็บไซต์ gatsby ของคุณ ติดตั้ง dependencies รัน npm install สร้างเว็บไซต์ ใช้คำสั่ง build ของ gatsby gatsby build ทดสอบในเครื่อง ให้บริการการสร้างผลิตภัณฑ์ของคุณเพื่อตรวจสอบฟังก์ชันการทำงาน gatsby serve 7 2 ภาพรวมโครงสร้างโปรเจกต์ โครงสร้างโปรเจกต์ gatsby แบบทั่วไปอาจมีลักษณะดังนี้ basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 การทำ docker ของแอปพลิเคชัน gatsby ของคุณ หากคุณต้องการการปรับใช้ในรูปแบบคอนเทนเนอร์ ให้เพิ่ม dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 การปรับใช้ผ่าน back4app web deployment เชื่อมโยงที่เก็บของคุณ โฮสต์โค้ดต้นฉบับ gatsby ของคุณบน github กำหนดค่าการปรับใช้ ในแดชบอร์ด back4app ให้เลือก web deployment , เชื่อมต่อที่เก็บของคุณ (เช่น basic crud app gatsby ), และเลือกสาขา ตั้งค่าคำสั่งสร้าง ระบุคำสั่งสร้าง (เช่น npm run build ) และไดเรกทอรีผลลัพธ์ ปรับใช้ คลิก deploy และติดตามบันทึกจนกว่าเว็บไซต์ของคุณจะออนไลน์ ขั้นตอนที่ 8 – สรุปและขั้นตอนถัดไป ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ gatsby ซึ่งเชื่อมต่อกับ back4app คุณได้ตั้งค่าโครงการชื่อ basic crud app gatsby , กำหนดโมเดลข้อมูลของคุณ จัดการข้อมูลด้วย admin app และเชื่อมต่อส่วนหน้าของ gatsby ของคุณกับ back4app โดยใช้ rest/graphql api calls ขั้นตอนถัดไป ปรับปรุงแอปของคุณ พิจารณาเพิ่มการค้นหาขั้นสูง มุมมองรายละเอียด หรือการอัปเดตแบบเรียลไทม์ ขยายความสามารถของ backend สำรวจฟังก์ชันคลาวด์ การรวม api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาทที่ปรับปรุง เรียนรู้เพิ่มเติม เยี่ยมชม เอกสาร back4app https //www back4app com/docs เพื่อข้อมูลเชิงลึกและบทเรียนเพิ่มเติม ขอให้สนุกกับการเขียนโค้ดและเพลิดเพลินกับการสร้างแอปพลิเคชัน crud ด้วย gatsby ของคุณ!