วิธีการสร้าง Backend ด้วย Windsurf?

windsurf ide ช่วยให้คุณสามารถรวมเครื่องมือภายนอกที่มีเซิร์ฟเวอร์ mcp ที่ใช้งานอยู่เข้าด้วยกันผ่านโปรโตคอล mcp สิ่งนี้ช่วยให้คุณสามารถดำเนินการงานและอ่านข้อมูลจากแหล่งข้อมูลเหล่านั้นโดยไม่ต้องออกจาก ide ของคุณโดยใช้คำสั่ง ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแบ็กเอนด์และส่วนติดต่อผู้ใช้ (ui) สำหรับการจัดตารางนัดหมายโดยใช้เซิร์ฟเวอร์ back4app mcp ผ่าน windsurf ide และนำไปใช้งานบนคอนเทนเนอร์ back4app ข้อสรุปที่สำคัญ คุณสามารถดูตัวติดตามค่าใช้จ่ายส่วนตัวแบบสดที่สร้างขึ้นในบทแนะนำนี้โดยใช้ ลิงก์นี้ เรียนรู้วิธีการสร้างแบ็กเอนด์บน back4app โดยใช้ windsurf และเซิร์ฟเวอร์ back4app mcp สำรวจวิธีการที่ความสัมพันธ์ถูกสร้างแบบจำลองระหว่างคลาสบน back4app สำรวจวิธีการที่การตรวจสอบสิทธิ์และการอนุญาตตามบทบาทถูกนำไปใช้โดย back4app โดยใช้คลาสในตัวของพวกเขา นำแอปของคุณไปใช้งานในไม่กี่คลิกโดยใช้คอนเทนเนอร์ back4app ข้อกำหนดเบื้องต้น ในการติดตามบทแนะนำนี้ คุณต้องมีสิ่งต่อไปนี้ บัญชี back4app คุณสามารถ ลงทะเบียนฟรี หากคุณยังไม่มีบัญชี ติดตั้ง windsurf ide บนระบบของคุณ ความคุ้นเคยพื้นฐานกับแนวคิดการพัฒนาฝั่งเซิร์ฟเวอร์ ภาพรวมโครงการ โปรแกรมจัดตารางนัดหมาย ในบทแนะนำนี้ คุณจะสร้างโปรแกรมจัดตารางนัดหมายที่รองรับสองบทบาท ผู้ให้บริการ ที่ลงทะเบียนบริการที่พวกเขาเสนอและ ลูกค้า ที่จองบริการเหล่านั้น ผู้ให้บริการจะกำหนดบริการแต่ละรายการด้วยชื่อ ระยะเวลา และราคา ลูกค้าจะเรียกดูบริการที่มีอยู่ เลือกวันที่และเวลา และยืนยันการจอง เมื่อมีการจองแล้ว การนัดหมายจะแสดงในแดชบอร์ดของทั้งผู้ให้บริการและลูกค้า โดยมีสถานะที่คุณสามารถอัปเดตหรือยกเลิกได้ตามต้องการ โครงการนี้จะมี 4 คลาส user , role , appointment , และ service คลาส user และ role เป็นส่วนหนึ่งของคลาสที่สร้างไว้ใน back4app และจะถูกใช้สำหรับการตรวจสอบสิทธิ์และการควบคุมการเข้าถึง คลาส service จะกำหนดรายละเอียดของแต่ละข้อเสนอ ชื่อ ระยะเวลา และราคา เพื่อให้ผู้ให้บริการสามารถแสดงสิ่งที่พวกเขาเสนอและลูกค้าสามารถเรียกดูข้อเสนอได้ คลาส appointment จะเชื่อมโยงลูกค้าและผู้ให้บริการกับบริการที่เลือกในฟิลด์ starttime และ endtime ที่เฉพาะเจาะจง ติดตามสถานะ (“รอดำเนินการ”, “ยืนยัน”, “ยกเลิก”) และใช้ acl ระดับวัตถุเพื่อให้เฉพาะลูกค้าที่ทำการจองและผู้ให้บริการของพวกเขาสามารถอ่านหรือแก้ไขการนัดหมายแต่ละครั้งได้ นี่คือแผนภาพความสัมพันธ์ของเอนทิตีเพื่อช่วยให้คุณมองเห็นสคีม่า ตอนนี้คุณมีแนวคิดคร่าวๆ เกี่ยวกับสิ่งที่คุณจะสร้าง ในส่วนถัดไป คุณจะตั้งค่าเซิร์ฟเวอร์ back4app mcp ด้วย windsurf และเริ่มเขียนคำสั่งที่จะสร้างแอปที่อธิบายไว้ในส่วนนี้ การเชื่อมต่อ back4app และ windsurf ดูวิดีโอด้านล่างเพื่อดูการสอนเกี่ยวกับวิธีการเชื่อมต่อ windsurf กับ back4app ในการเชื่อมต่อเซิร์ฟเวอร์ back4app mcp กับ windsurf ก่อนอื่นคุณต้องมีคีย์บัญชี back4app ในการดึงข้อมูลนี้ ให้เข้าสู่ระบบบัญชี back4app ของคุณ และในแดชบอร์ดผู้ใช้ของคุณ ให้คลิกที่เมนูดรอปดาวน์ในแถบเมนูและเลือก account keys ในหน้า account keys ให้ตั้งชื่อคีย์บัญชีของคุณ คัดลอกคีย์ที่สร้างขึ้น และเก็บรักษาไว้อย่างปลอดภัย ถัดไป เปิด windsurf และคลิกที่ไอคอนค้อนบนผู้ช่วย cascade ซึ่งจะเปิดเมนูดรอปดาวน์ที่มีปุ่มกำหนดค่า ให้คลิกที่มัน ปุ่มกำหนดพาคุณไปยังหน้าจัดการปลั๊กอิน คลิกที่ปุ่ม “ดูการตั้งค่าดิบ” และวางวัตถุการกำหนดค่าด้านล่างลงในไฟล์ { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } แทนที่ \<account key> ด้วยคีย์บัญชีของคุณ บันทึกไฟล์และรีเฟรช windsurf หากคุณกำลังติดตามบทแนะนำนี้บนเครื่อง windows ให้เปลี่ยนค่าของคีย์คำสั่งเป็น npx cmd การสร้าง backend ด้วย windsurf ในการสร้าง backend ของการนัดหมายด้วย windsurf คุณต้องป้อนคำสั่งให้ cascade assistant สร้างแอปใหม่ด้วยชื่อที่คุณระบุ พร้อมกับตารางฐานข้อมูลที่จำเป็น คุณสามารถทำสิ่งนี้สำหรับการนัดหมายโดยใช้คำสั่งด้านล่าง create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict คำสั่งนี้บอก windsurf ให้สร้าง backend “appointment scheduler” โดยการสร้างโมเดลข้อมูลใหม่สองโมเดล service และ appointment พร้อมความสัมพันธ์และฟิลด์ที่เหมาะสม นอกจากนี้ยังมีการใช้งาน hook ก่อนบันทึกฝั่งเซิร์ฟเวอร์บน appointment ที่ป้องกันการจองที่ทับซ้อนกันสำหรับ provider เดียวกัน windsurf บันทึกคำขอทั้งหมดที่ทำเมื่อพยายามทำงานให้สำเร็จ และเมื่อเสร็จสิ้นการดำเนินการ มันจะให้สรุปของงานนั้น ตอนนี้ที่แอปและคลาสฐานข้อมูลถูกสร้างขึ้นแล้ว ต่อไปคุณสามารถดำเนินการตรวจสอบสิทธิ์สำหรับแบ็กเอนด์ของคุณได้ การดำเนินการตรวจสอบสิทธิ์และการอนุญาตในแบ็กเอนด์ สำหรับแอปนี้ คุณต้องมั่นใจว่าผู้ใช้สามารถเข้าสู่ระบบได้อย่างปลอดภัยและทำสิ่งที่พวกเขาควรทำเท่านั้น ตัวอย่างเช่น ผู้ใช้ที่ลงทะเบียนเป็นผู้ให้บริการเท่านั้นที่สามารถแสดงรายการบริการได้ และเฉพาะผู้ให้บริการที่แสดงรายการบริการเท่านั้นที่สามารถอัปเดตบริการได้ คุณสามารถทำสิ่งนี้สำหรับการจัดตารางนัดหมายโดยใช้คำสั่งด้านล่าง update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation คำสั่งด้านบนสั่งให้ windsurf เปิดใช้งานการลงทะเบียนและเข้าสู่ระบบด้วยอีเมล/รหัสผ่าน กำหนดและมอบหมายบทบาท “provider” และ “client” บังคับการอนุญาตระดับคลาสเพื่อให้เฉพาะผู้ให้บริการจัดการบริการในขณะที่ผู้ใช้ที่ตรวจสอบสิทธิ์จัดการการนัดหมาย และใช้ acl ของวัตถุพร้อมกับ hook ก่อนบันทึกใน appointment เพื่อให้สิทธิ์เข้าถึงเฉพาะลูกค้าที่จองและผู้ให้บริการและตรวจสอบบทบาทของพวกเขา ตอนนี้ที่คุณได้ตั้งค่าการตรวจสอบสิทธิ์และการอนุญาตตามบทบาทแล้ว คุณสามารถดำเนินการสร้าง crud endpoints ที่จำเป็นสำหรับแอปให้ทำงานได้ การดำเนินการฟังก์ชัน crud สำหรับบริการและการนัดหมาย แอปของคุณต้องอนุญาตให้ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์สร้างบริการ (ผู้ให้บริการ) และจองการนัดหมายในบริการที่สร้างขึ้นแล้ว (ลูกค้า) ผู้ใช้ยังต้องสามารถแก้ไข ลบ และดูบริการและการนัดหมายได้อีกด้วย คุณสามารถทำสิ่งนี้สำหรับตัวจัดตารางการนัดหมายโดยใช้คำสั่งด้านล่าง add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response คำสั่งนี้สั่งให้ windsurf สร้างจุดสิ้นสุด cloud code สำหรับทั้งคลาสบริการและการนัดหมาย โดยดำเนินการสร้าง อ่าน อัปเดต และลบ ขณะบังคับใช้การตรวจสอบสิทธิ์และการตรวจสอบตามบทบาทเพื่อให้เฉพาะผู้ให้บริการเท่านั้นที่สามารถจัดการบริการและเฉพาะลูกค้าที่จองหรือผู้ให้บริการที่ได้รับมอบหมายเท่านั้นที่สามารถจัดการการนัดหมายของตนได้ การสร้างส่วนหน้า คุณสามารถใช้ประโยชน์จากบริบทที่ windsurf มีจากการสร้างแบ็กเอนด์ของคุณบน back4app เพื่อขอให้มันสร้างส่วนหน้าที่ตรงกับสคีมาและความต้องการสำหรับแอปของคุณ คุณสามารถทำสิ่งนี้สำหรับตัวจัดตารางการนัดหมายโดยใช้คำสั่งด้านล่าง generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react โดยใช้คำสั่งข้างต้นหรือคำสั่งที่คล้ายกัน windsurf จะสร้างส่วนหน้าที่ตรงกับสคีมาของแบ็กเอนด์ของคุณและเชื่อมต่อกับแบ็กเอนด์ของคุณ ไฟล์โปรเจกต์จะถูกเก็บไว้ภายใต้ /\<user>/cascadeprojects/\<app name> cd เข้าไปในแอปและเรียกใช้โดยใช้คำแนะนำที่ให้ไว้ใน readme และทำการปรับเปลี่ยนใด ๆ ที่คุณต้องการ ตอนนี้ โปรเจกต์ของคุณเสร็จสมบูรณ์ ในส่วนถัดไป คุณจะนำไปใช้งานบน back4app containers การปรับใช้แอปของคุณบน back4app containers back4app containers ช่วยให้คุณสามารถปรับใช้แอปของคุณได้อย่างง่ายดายโดยใช้ dockerfile และ github repository ในการปรับใช้แอปของคุณบน back4app containers คุณต้องรวม dockerfile ไว้ใน repository ของคุณก่อน คุณสามารถขอให้ claude สร้างหนึ่งโดยใช้คำสั่งด้านล่าง generate a docker file for the ui of my appointment scheduler หรือคุณสามารถใช้ dockerfile ที่ให้ไว้ด้านล่าง from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] หลังจากเพิ่ม dockerfile และผลักดันไปยัง github ให้ไปที่แดชบอร์ดแอป back4app ของคุณ คลิกที่ แดชบอร์ด ดรอปดาวน์ และเลือก แพลตฟอร์มการปรับใช้เว็บ ตัวเลือก ในหน้าการปรับใช้ คลิกที่ปุ่ม “ปรับใช้เว็บแอป” และให้ back4app เข้าถึง repository ที่คุณต้องการปรับใช้ เลือกแอปที่คุณต้องการปรับใช้ กรอกรายละเอียดการปรับใช้ และคลิกที่ ปรับใช้ ปุ่ม การคลิกปุ่มจะเริ่มกระบวนการปรับใช้ และเมื่อเสร็จสิ้น คุณจะได้รับ url ที่ใช้งานได้สำหรับแอป คุณสามารถดูตัวติดตามค่าใช้จ่ายส่วนตัวที่สร้างขึ้นในบทแนะนำนี้ได้โดยใช้ ลิงก์นี้ บทสรุป ในบทความนี้ คุณได้สร้างตัวจัดการนัดหมายโดยใช้เซิร์ฟเวอร์ back4app mcp และ windsurf จากนั้นได้ปรับใช้ด้วย back4app containers นี่แสดงให้เห็นถึงชุดเครื่องมือทั้งหมดของ back4app ที่ช่วยให้คุณสามารถเคลื่อนจากการคิดไอเดียไปสู่การเปิดตัวได้โดยมีค่าใช้จ่ายน้อยที่สุด ในขั้นตอนถัดไป คุณสามารถขยายโครงการด้วยฟีเจอร์เช่นการซิงค์ปฏิทิน การแจ้งเตือนทางอีเมลอัตโนมัติ หรือการวิเคราะห์แนวโน้มการจอง การปรับปรุงทั้งหมดเหล่านี้เข้ากันได้อย่างเป็นธรรมชาติในกระบวนการทำงานของ back4app ออกแบบและกำหนดคลาสใหม่หรือ cloud functions ด้วย windsurf รักษาความปลอดภัยด้วย hooks ก่อนบันทึก และปล่อยการอัปเดตผ่าน back4app containers วิธีการนี้ช่วยให้คุณสามารถเพิ่มฟีเจอร์ใหม่ให้กับแอปของคุณโดยไม่รบกวนผู้ใช้