วิธีการสร้างแบ็คเอนด์โดยใช้เคอร์เซอร์?

โครงการเว็บและมือถือสมัยใหม่มักจะหยุดชะงักที่อุปสรรคแรกสุด การเปลี่ยนแนวคิดให้เป็นแบ็คเอนด์ที่พร้อมสำหรับการผลิต การออกแบบโมเดลข้อมูลด้วยตนเอง การเขียนตรรกะ crud เบื้องต้น การปรับใช้โครงสร้างพื้นฐาน และการทำให้ฟรอนต์เอนด์ซิงค์กันสามารถใช้เวลาหลายวันหรือหลายสัปดาห์ของเวลาวิศวกรรมที่มีค่า บทแนะนำนี้แสดงให้เห็นว่าแพลตฟอร์มแบ็คเอนด์ของ back4app, โปรโตคอล model context platform (mcp) และ ide ที่ช่วยโดย ai ของ cursor ร่วมกันขจัดความยุ่งยากนั้นได้อย่างไร โดยการเดินผ่านการสร้างแอปการจัดการเหตุการณ์ที่เรียบง่าย คุณจะเห็นว่าเครื่องมือเหล่านี้ช่วยให้คุณสร้างโครงสร้าง ปรับใช้ และรวมแบ็คเอนด์ที่ทำงานได้อย่างสมบูรณ์และฟรอนต์เอนด์ที่ตรงกันได้อย่างไร ข้อคิดสำคัญ ค้นพบวิธีการสร้างแบ็คเอนด์ที่พร้อมสำหรับการผลิตบน back4app ในไม่กี่นาทีโดยใช้เอเจนต์ ai ของ cursor และโปรโตคอล mcp รับข้อมูลเชิงลึกเกี่ยวกับการบังคับใช้การควบคุมการเข้าถึงตามบทบาทที่สะอาดด้วยตัวช่วย validateuserrole ที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งแยกการทำงานของผู้จัดงานและผู้เข้าร่วมได้อย่างชัดเจน เรียนรู้วิธีการสร้างและเชื่อมต่อฟรอนต์เอนด์ next js ที่ตอบสนองซึ่งจะใช้ rest apis ของ back4app ของคุณโดยอัตโนมัติ สำรวจการทำให้เป็นคอนเทนเนอร์และการปรับใช้ด้วยคลิกเดียวด้วยคอนเทนเนอร์ของ back4app เพื่อปรับใช้แอป event manager แบบฟูลสแต็กของคุณจาก github ในเวลาอันรวดเร็ว ภาพรวมโครงการ ในบทแนะนำนี้ คุณจะสร้าง แอปการจัดการเหตุการณ์ ที่ให้ผู้ใช้สร้างเหตุการณ์ ลงทะเบียนสำหรับเหตุการณ์ที่สนใจ ดูเหตุการณ์ที่กำลังจะมาถึงหรือที่ลงทะเบียน และยกเลิกการลงทะเบียนเมื่อจำเป็น คุณจะสร้างแบ็กเอนด์ของแอปนี้โดยใช้เครื่องมือ mcp ของ back4app เครื่องมือ mcp ช่วยให้ โมเดลภาษาขนาดใหญ่ (llms) https //en wikipedia org/wiki/large language model เช่น claude 4 sonnet และตัวแทน/เครื่องมือ ai เช่น cursor เพื่อให้สามารถโต้ตอบกับแบ็กเอนด์ของ back4app ได้อย่างราบรื่น ด้วย mcp ผู้ช่วยเขียนโค้ด ai ของคุณสามารถสร้างแอป จัดการฐานข้อมูล (การดำเนินการ crud, การค้นหา) ปรับใช้โค้ดคลาวด์ จัดการการตรวจสอบสิทธิ์ของผู้ใช้ และอื่นๆ ในโครงการ back4app ของคุณ สำหรับบทแนะนำนี้ คุณจะใช้ cursor , โปรแกรมแก้ไขโค้ดที่ขับเคลื่อนด้วย ai ซึ่งรวมโมเดลภาษาขนาดใหญ่เพื่อช่วยให้คุณเขียน ปรับปรุง และเข้าใจโค้ดภายในสภาพแวดล้อมการพัฒนาของคุณ ด้วย cursor และ mcp คุณสามารถเรียกใช้การกระทำของแบ็กเอนด์โดยใช้ภาษาธรรมชาติ ทำให้กระบวนการพัฒนารวดเร็วและเป็นธรรมชาติมากขึ้น การตั้งค่าโครงการ ตอนนี้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับสิ่งที่คุณจะบรรลุในบทแนะนำนี้ ไปข้างหน้าและตั้งค่าความต้องการของโครงการของคุณเพื่อสร้างแบ็กเอนด์ด้วย cursor และ mcp ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมีสิ่งต่อไปนี้ บัญชี back4app คุณสามารถ ลงทะเบียนฟรี https //www back4app com/signup หากคุณยังไม่มีบัญชี cursor https //www cursor com/ ติดตั้งบนเครื่องพัฒนาของคุณ ความคุ้นเคยพื้นฐานกับแนวคิดการพัฒนาฝั่งเซิร์ฟเวอร์ node js v22 หรือสูงกว่า ขั้นตอนที่ 1 สร้างโปรเจกต์ back4app ขั้นตอนแรกคือการเข้าสู่ระบบบัญชี back4app ของคุณและสร้างโปรเจกต์ใหม่ชื่อ “eventmanager ” ขั้นตอนที่ 2 สร้างคีย์บัญชี คุณต้องสร้างคีย์บัญชี back4app เพื่อกำหนดค่า mcp ภายใน cursor และให้สิทธิ์การเข้าถึงเซิร์ฟเวอร์ mcp ไปยังบัญชี back4app ของคุณ ไปที่การตั้งค่าคีย์บัญชีของคุณ เมื่ออยู่ที่นั่น ให้ตั้งชื่อคีย์บัญชีของคุณและสร้างคีย์โดยการคลิกที่ปุ่ม + ตอนนี้คุณควรเห็นคีย์บัญชีที่สร้างขึ้นพร้อมกับวันที่หมดอายุ ขั้นตอนที่ 3 กำหนดค่า mcp ภายใน cursor ดูวิดีโอนี้เพื่อเรียนรู้วิธีเชื่อมต่อ cursor และ back4app เปิดแอป cursor และไปที่ การตั้งค่า > การตั้งค่า cursor > mcp, ที่คุณจะพบหน้าสำหรับกำหนดค่าเซิร์ฟเวอร์ mcp ใน cursor ai คลิกที่ปุ่ม “ เพิ่มเซิร์ฟเวอร์ mcp ทั่วไปใหม่ ” เพื่อสร้างไฟล์ mcp json คุณจะเขียนการกำหนดค่าของคุณสำหรับ mcp ภายในไฟล์นี้ ในการตั้งค่า back4app mcp server ใน cursor ให้วางการตั้งค่าต่อไปนี้ภายใน mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } ตอนนี้ให้แทนที่ \<account key> ด้วยคีย์บัญชี back4app ที่คุณบันทึกไว้ซึ่งคุณสร้างขึ้นในขั้นตอนที่ 3 หากคุณกำลังติดตามบทแนะนำนี้บนเครื่อง windows ให้เปลี่ยนค่าในคีย์ command เป็น npx cmd เมื่อมีการตั้งค่าเหล่านี้อยู่ในที่ คุณก็พร้อมที่จะเริ่มสร้างแบ็กเอนด์ back4app ของคุณด้วย back4app mcp และ cursor สร้างแบ็กเอนด์ด้วย cursor และ back4app ผู้จัดการเหตุการณ์ของคุณจะมีฟีเจอร์ดังต่อไปนี้; ผู้ใช้สามารถสร้างเหตุการณ์ใหม่ ผู้ใช้สามารถลงทะเบียนสำหรับเหตุการณ์ แสดงรายการเหตุการณ์ที่ผู้ใช้ลงทะเบียนไว้ แสดงรายการเหตุการณ์ที่กำลังจะมาถึงของผู้ใช้ ผู้ใช้สามารถยกเลิกการลงทะเบียนเหตุการณ์ เพื่อให้ตรงตามฟีเจอร์เหล่านี้ นี่คือตัวอย่างสคีมาฐานข้อมูล เปิด cursor chat โดยการเปิดใช้งาน ai panel, และดำเนินการเลือก agent โหมดเพื่อทำการเปลี่ยนแปลงในแอปของคุณ นอกจากนี้ให้เลือก llm ที่ต้องการ เช่น claude 4 sonnet รุ่นใหม่ ภายในกล่องแชท ให้เขียนคำสั่งเพื่อสร้างสคีมาที่ออกแบบไว้ ตัวอย่างคำสั่งเพื่อให้บรรลุเป้าหมายนี้คือ design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships คุณจะต้องอนุมัติคำขอเพื่อใช้เครื่องมือของ mcp เมื่อได้รับการอนุมัติ คำขอจะถูกดำเนินการ คุณควรได้รับการตอบกลับว่าฐานข้อมูลถูกสร้างขึ้นสำเร็จแล้ว คุณสามารถยืนยันความสำเร็จได้โดยการตรวจสอบแอปของคุณ แดชบอร์ด สำหรับคลาสที่สร้างขึ้นใหม่ ตอนนี้ที่คุณได้สร้างแบ็กเอนด์และเพิ่มตารางฐานข้อมูลของแอปพลิเคชันของคุณแล้ว คุณจะดำเนินการตรรกะของแอปพลิเคชัน การนำฟีเจอร์ผู้ใช้ไปใช้กับ mcp ในคำอธิบายแอปพลิเคชันของคุณ แอปนี้ควรอนุญาตให้ผู้ใช้ประเภทต่างๆ ทำงานที่แตกต่างกัน เช่น การสร้างเหตุการณ์และการลงทะเบียนสำหรับเหตุการณ์เหล่านั้น ที่นี่คุณจะกำหนดฟังก์ชันที่สร้างขึ้นเพื่อจัดการฟีเจอร์เหล่านี้ การนำการควบคุมการเข้าถึงไปใช้ ฟังก์ชันยูทิลิตี้หลักสำหรับแอปจะถูกเรียกว่า validateuserrole ฟังก์ชันนี้มีหน้าที่ในการตรวจสอบว่าฟีเจอร์ใดบ้างที่มีให้กับผู้ใช้แต่ละประเภท คุณสามารถสร้างฟังก์ชันนี้ด้วยคำสั่งต่อไปนี้ \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error ไปข้างหน้าและยืนยันว่า utils js ถูกสร้างขึ้นพร้อมกับ validateuserrole สร้างฟีเจอร์ผู้ใช้ เพื่อดำเนินการฟีเจอร์ สร้างผู้ใช้ ฟิลด์ ชื่อผู้ใช้ , รหัสผ่าน , อีเมล, และ บทบาท จะต้องถูกส่งผ่านไป ทุกคนสามารถเรียกใช้ฟังก์ชันนี้ ใช้คำสั่งด้านล่างในการสร้างตรรกะการสร้างผู้ใช้ \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames คุณควรได้รับการตอบกลับที่ระบุว่าฟังก์ชันถูกสร้างขึ้นสำเร็จแล้ว คุณสามารถสร้างผู้ใช้ใหม่สำหรับ event manager ได้แล้ว ฟีเจอร์สร้างเหตุการณ์ บทบาท organizer สามารถสร้างเหตุการณ์ใหม่ได้ เพื่อทำเช่นนี้ ฟังก์ชันจะสร้างอ็อบเจ็กต์เหตุการณ์ใหม่และตรวจสอบว่าผู้ใช้ที่มีบทบาท organizer กำลังเรียกฟังก์ชันนี้ คุณจะใช้ฟังก์ชันยูทิลิตี้ที่สร้างขึ้นก่อนหน้านี้เพื่อทำการตรวจสอบนี้ ใช้ตรรกะนี้ในการดำเนินการตามคำสั่งด้านล่าง create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed ฟังก์ชันจะถูกสร้างภายในไฟล์ main js คุณสามารถทดสอบอย่างง่ายภายใน cursor โดยใช้ข้อมูลจำลองและเรียกใช้ back4app rest api ที่เปิดเผย ลงทะเบียนสำหรับฟีเจอร์กิจกรรม ผู้ใช้ต้องมี attendee เพื่อที่จะลงทะเบียนสำหรับกิจกรรม ผู้ใช้ทั้งหมดที่มีบทบาทนี้สามารถเข้าถึงฟีเจอร์ 3 ฟีเจอร์ ฟีเจอร์แรกคือการลงทะเบียนสำหรับกิจกรรมที่สร้างขึ้น ฟังก์ชันนี้สร้างวัตถุการลงทะเบียนใหม่และตั้งค่าค่าบูลีนการลงทะเบียนเป็นจริงสำหรับผู้ใช้ ป้อนคำสั่งต่อไปนี้หรือคำสั่งที่คล้ายกันเพื่อให้ได้ตรรกะนี้ generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message ถัดไป คุณต้องการฟังก์ชันเพื่อค้นหากิจกรรมทั้งหมดที่ผู้ใช้ลงทะเบียน เราจะเรียกฟังก์ชันนี้ว่า listupcomingevents สร้างฟังก์ชันนี้ด้วยคำสั่งแบบนี้ create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found ยืนยันว่าฟังก์ชันถูกสร้างขึ้นสำเร็จภายใน main js และปรับเปลี่ยนโค้ดด้วยตนเองหรือใช้คำสั่งเคอร์เซอร์หากจำเป็น สังเกตในคำสั่งนี้ พารามิเตอร์ของฟังก์ชันไม่ได้ถูกระบุสำหรับตัวแทน ai ของ cursor นี่แสดงให้เห็นว่าตัวแทนใช้ mcp เพื่ออนุมานพารามิเตอร์ที่ฟังก์ชันต้องการโดยการตรวจสอบสคีมาของฐานข้อมูล อย่างไรก็ตาม การให้บริบทมากที่สุดเท่าที่จำเป็นในคำสั่งของคุณเป็นแนวทางปฏิบัติที่ดีเสมอ ฟีเจอร์ยกเลิกการลงทะเบียน ฟีเจอร์สุดท้ายที่ตอบสนองความต้องการของแอปคือฟีเจอร์ยกเลิกการลงทะเบียน เพื่อดำเนินการนี้ ฟังก์ชันจะดึง eventid และ userid ของการลงทะเบียนกิจกรรมที่เลือกและอัปเดตค่าบูลีนของมัน เพิ่มตรรกะข้างต้นไปยังแอปพลิเคชันแบ็กเอนด์ของคุณโดยใช้คำสั่งที่คล้ายกับนี้ create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure คุณสามารถตรวจสอบโค้ดทั้งหมดที่สร้างโดย cursor และ mcp และปรับเปลี่ยนหากจำเป็นใน app dashboard → cloud code , ตามที่แสดงในภาพด้านล่าง ด้วยฟีเจอร์เหล่านี้ คุณได้ตอบสนองความต้องการทั้งหมดสำหรับแบ็คเอนด์ของ event manager แอปพลิเคชันของคุณแล้ว สร้างส่วนหน้าให้กับแบ็คเอนด์ของคุณด้วย mcp โดยใช้ cursor ตอนนี้แบ็คเอนด์ของคุณได้ถูกสร้างและปรับใช้สำเร็จแล้ว คุณจะสร้าง ui ส่วนหน้าสำหรับแอปของคุณ ui นี้จะใช้แบ็คเอนด์ back4app ของคุณโดยใช้ rest api endpoints ของ back4app เพื่อทำเช่นนี้ mcp จะดึงข้อมูลเมตาดาต้าสคีมาแบ็คเอนด์ของคุณ และ cursor จะใช้เมตาดาต้านี้ในการสร้าง ui ของแอปพลิเคชันของคุณด้วยข้อกำหนดการแจ้งเตือนต่อไปนี้ build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive คำสั่งนี้มีเป้าหมายเพื่อสร้างโครงสร้างพื้นฐานของฟรอนต์เอนด์ next js ในขั้นตอนเดียว คุณสามารถขอการเปลี่ยนแปลงเพิ่มเติมได้เสมอหากคุณไม่พอใจกับการสร้างของ cursor ตรวจสอบให้แน่ใจว่า parse ได้ถูกเริ่มต้นอย่างถูกต้องด้วย application id และ javascript key ในกรณีที่ cursor ไม่สามารถจัดการสิ่งนี้ได้ ตัวแปรเหล่านี้ช่วยให้คุณสามารถทำการร้องขอไปยังแอปพลิเคชันแบ็กเอนด์ ภาพด้านบนแสดงแอปพลิเคชัน next js ที่สร้างขึ้นด้วยคำสั่งเดียวโดยใช้ cursor และ mcp ของ back4app ปรับใช้แอปพลิเคชันของคุณ สุดท้าย คุณจะปรับใช้แอปพลิเคชันแบบเต็มสแตกของคุณโดยใช้ฟีเจอร์โฮสติ้งเว็บของ back4apps ในการปรับใช้แอปพลิเคชัน next js ของคุณ ให้สร้าง dockerfile ในไดเรกทอรีรากของโปรเจกต์ของคุณและวางโค้ดต่อไปนี้ไว้ข้างใน \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] dockerfile นี้ทำสิ่งต่อไปนี้ เริ่มจาก node js 14 runtime อย่างเป็นทางการ ตั้งค่าไดเรกทอรีการทำงานเป็น /app คัดลอก package json และ package lock json ไปยังภาพ docker และติดตั้ง dependencies คัดลอกโค้ดแอปพลิเคชันที่เหลือไปยังภาพ docker สร้างแอปพลิเคชัน next js เปิดพอร์ต 3000 สำหรับแอปพลิเคชัน กำหนดคำสั่งในการเริ่มแอปพลิเคชัน คุณจะต้องมี dockerignore ไฟล์ด้วย สร้างไฟล์หนึ่งในไดเรกทอรีรากของโปรเจกต์ของคุณและเพิ่มคำสั่งเหล่านี้ \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore ตอนนี้ รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณเพื่อสร้างและทดสอบภาพ docker docker build t event manager frontend docker run p 3000 3000 event manager frontend คุณจะพบภาพ docker ที่คุณสร้างขึ้นที่ http //localhost 3000 หากคุณได้ตรวจสอบแล้วว่าแอปพลิเคชันของคุณทำงานตามที่ตั้งใจไว้ ก็ถึงเวลาที่จะผลักดันโค้ดของคุณไปยังที่เก็บ github และนำไปใช้งานผ่าน back4app เปิดแอป event manager ของคุณในแดชบอร์ด back4app และไปที่ web deployment เมื่อไปถึงที่นั่น ให้ดำเนินการอนุญาต back4app ให้ดูที่เก็บบัญชีของคุณและเลือกที่เก็บที่คุณได้ผลักดันแอป frontend ที่คุณต้องการนำไปใช้งาน กำหนดชื่อให้กับโครงการของคุณ (เช่น event manager) และคลิกที่ “deploy” ปุ่มที่แสดงในภาพด้านบนเพื่อนำแอปพลิเคชันของคุณไปใช้งาน หากสำเร็จ คุณจะเห็นข้อความการนำไปใช้งานที่พร้อมใช้งาน คุณสามารถเข้าถึงแอปพลิเคชันที่นำไปใช้งานแล้วบนเว็บโดยไปที่ลิงก์ที่ back4app ให้ไว้ในหน้าจอนำไปใช้งานด้านล่าง ขอแสดงความยินดี คุณได้ทำการนำแอปพลิเคชันของคุณไปใช้งานบน back4app สำเร็จแล้ว คุณสามารถเยี่ยมชมโครงการ event manager ที่สร้างขึ้นในบทแนะนำนี้ ที่นี่ https //eventmanager3 3jqdnkfk b4a run/ บทสรุป ในบทความนี้ คุณได้ออกแบบและนำแอปการจัดการเหตุการณ์ด้านหลังที่อนุญาตให้ผู้ใช้จัดการเหตุการณ์ในฐานะผู้จัดงานหรือผู้เข้าร่วม คุณยังได้สร้างส่วนหน้าให้กับแอปพลิเคชันของคุณด้วย next js โดยใช้ cursor เพื่อเร่งความเร็วในการพัฒนา การจับคู่สภาพแวดล้อมการพัฒนาที่เสริมด้วย ai ของ cursor กับ mcp ของ back4app สร้างกระบวนการพัฒนาที่ทรงพลังซึ่งลดเวลาการพัฒนาอย่างมากและทำให้การสร้าง backend ของ back4app ง่ายขึ้น ขอให้สนุกกับการเขียนโค้ด!