How to Build a Backend for Astro?

บทนำ ในคู่มือนี้เกี่ยวกับ วิธีสร้างแบ็กเอนด์สำหรับแอสโตร , คุณจะได้เรียนรู้วิธีสร้างแบ็กเอนด์ที่สมบูรณ์ด้วย back4app สำหรับโปรเจกต์แอสโตรของคุณ เราจะพูดถึงการรวมฟีเจอร์ที่สำคัญของ back4app รวมถึงการจัดการฐานข้อมูล ฟังก์ชันคลาวด์ การตรวจสอบสิทธิ์ การจัดเก็บไฟล์ การค้นหาแบบเรียลไทม์ และอื่นๆ—แสดงให้เห็นถึงแนวทางที่เป็นประโยชน์ในการสร้างแอปพลิเคชันที่รวดเร็วด้วยเครื่องมือสมัยใหม่ โดยการใช้ประโยชน์จากสภาพแวดล้อมของ back4app คุณจะข้ามการทำงานหนักมากมาย เช่น การกำหนดค่าเซิร์ฟเวอร์หรือการเขียนชั้นความปลอดภัยจากศูนย์ การตั้งค่านี้ช่วยประหยัดเวลาและความพยายามของคุณ ในขณะที่ยังให้คุณกำหนดจุดสิ้นสุดสำหรับตรรกะฝั่งเซิร์ฟเวอร์ที่แข็งแกร่ง คุณจะได้เห็นวิธีการรวมตัวแปรสภาพแวดล้อมในโปรเจกต์แอสโตรของคุณ ทำให้การจัดเก็บข้อมูลรับรองหรือข้อมูลที่ละเอียดอ่อนอื่นๆ เป็นเรื่องง่ายขึ้น เมื่อคุณเสร็จสิ้น คุณจะมีโครงสร้างแบ็กเอนด์ที่สามารถปรับขนาดได้สำหรับแอสโตรและรู้วิธีจัดการข้อมูลด้วย rest, graphql, การตรวจสอบสิทธิ์ผู้ใช้, เหตุการณ์เรียลไทม์ และอื่นๆ คุณจะพร้อมที่จะเพิ่มตรรกะของคุณเองสำหรับความต้องการในโลกจริงในขณะที่ยังคงรักษาพื้นฐานความปลอดภัยที่แข็งแกร่ง ข้อกำหนดเบื้องต้น บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app โครงการ astro การตั้งค่า astro https //docs astro build/en/getting started/ ตรวจสอบให้แน่ใจว่าคุณมีสภาพแวดล้อมการพัฒนา astro พื้นฐานและติดตั้ง node js ติดตั้ง node js (เวอร์ชัน 14 หรือสูงกว่า) การติดตั้ง node js https //nodejs org/en/download/ ความคุ้นเคยกับแนวคิดด้านหน้าและด้านเซิร์ฟเวอร์ คุณควรรู้วิธีสร้างหรือแก้ไข astro ไฟล์ จัดการตัวแปรสภาพแวดล้อม และทำการร้องขอแบบโพสต์ง่ายๆ ด้วย fetch หรือไลบรารีที่คล้ายกัน ตรวจสอบให้แน่ใจว่ามีข้อกำหนดเบื้องต้นเหล่านี้ก่อนที่คุณจะเริ่มต้น การมีบัญชี back4app ของคุณ สภาพแวดล้อม astro และความรู้พื้นฐานเกี่ยวกับ javascript จะช่วยให้คุณติดตามบทแนะนำนี้ได้อย่างราบรื่นมากขึ้น ขั้นตอนที่ 1 – สร้างโปรเจกต์ใหม่บน back4app และเชื่อมต่อ สร้างโปรเจกต์ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิก แอปใหม่ ในแดชบอร์ด back4app ของคุณและตั้งชื่อให้กับมัน (เช่น “astro backend tutorial”) ดึงข้อมูลรับรอง back4app ในแดชบอร์ด back4app ของคุณ ภายใต้ การตั้งค่าแอป หรือ ความปลอดภัย & คีย์ , จดบันทึก application id , rest api key , และ url ของเซิร์ฟเวอร์ ( https //parseapi back4app com โดยค่าเริ่มต้น) ตัวแปรสภาพแวดล้อมเหล่านี้จะถูกใช้ในการรวม astro ของคุณ เชื่อมต่อ astro กับ back4app ผ่าน apis เนื่องจากเราไม่ได้ใช้ parse sdk โดยตรง เราจะทำการร้องขอโดยใช้ fetch หรือไลบรารีอื่นจากไฟล์ astro ของเรา เก็บข้อมูลรับรองของคุณในตัวแปรสภาพแวดล้อมเพื่อความปลอดภัย ตัวอย่างเช่น ในไฟล์ env ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การสร้างโมเดลข้อมูล สร้างโมเดลข้อมูลด้วยตนเอง ไปที่แดชบอร์ด back4app ของคุณและคลิกที่ ฐานข้อมูล สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มฟิลด์เช่น title (string) และ iscompleted (boolean) ใช้ ai agent เพื่อสร้างโมเดลข้อมูล เปิด ai agent จากแดชบอร์ดแอปของคุณ อธิบายสคีมาของคุณในภาษาธรรมดา (เช่น “สร้างแอป todo ใหม่ที่มีคลาสที่มีฟิลด์ title และ iscompleted ”) ตัวแทนจะสร้างคลาสและฟิลด์ให้คุณ การอ่านและเขียนข้อมูลโดยใช้ rest api เมื่อโมเดลข้อมูลของคุณพร้อมแล้ว ให้เรากำหนดจุดสิ้นสุดภายในคอมโพเนนต์ astro หรือไฟล์ฝั่งเซิร์ฟเวอร์เพื่อจัดการคำขอโพสต์และคำขออ่าน ตัวอย่างเช่น คุณอาจสร้างไฟล์เช่น src/pages/api/todos astro \ import type { apiroute } from 'astro'; export const post apiroute = async ({ request }) => { const body = await request json(); // "create" a todo const url = `${import meta env back4app server url}/classes/todo`; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ title body title, iscompleted body iscompleted }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); }; export const get apiroute = async () => { // "read" all todos const url = `${import meta env back4app server url}/classes/todo`; const response = await fetch(url, { method 'get', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key } }); const data = await response json(); return new response(json stringify(data), { status 200 }); }; \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<meta name="generator" content="astro generator" /> \<title>todos api\</title> \</head> \<body> \<h1>api for todo\</h1> \</body> \</html> ตัวอย่างนี้ใช้ตัวแปรสภาพแวดล้อม ( import meta env ) เพื่อเก็บข้อมูลรับรอง back4app ของคุณ เรากำหนดสองวิธีในไฟล์เดียว export const post สำหรับการสร้าง todo และ export const get สำหรับการดึง todos ทั้งหมด คุณสามารถปรับให้เหมาะกับโครงสร้างคอมโพเนนต์เลย์เอาต์และหน้าเว็บไซต์อื่น ๆ ได้ การอ่านและเขียนข้อมูลโดยใช้ graphql api ในลักษณะเดียวกัน คุณสามารถทำการร้องขอ graphql จากหน้า astro ของคุณ \ export async function post({ request }) { const body = await request json(); const url = `${import meta env back4app server url}/graphql`; const query = ` mutation { createtodo(input { fields { title "${body title}" iscompleted ${body iscompleted} } }) { todo { objectid title iscompleted } } } `; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ query }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); } \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<title>todos graphql\</title> \</head> \<body> \<h1>graphql endpoint for todos\</h1> \</body> \</html> การทำงานกับ live queries (ตัวเลือก) live queries ช่วยให้การอัปเดตข้อมูลแบบเรียลไทม์เป็นไปได้ เพื่อใช้งาน คุณต้องเปิดใช้งาน live queries ในแดชบอร์ด back4app และกำหนดค่าการเชื่อมต่อ websocket อย่างไรก็ตาม หากคุณกำลังสร้างเว็บไซต์ astro แบบสแตติก คุณอาจรวมการอัปเดตแบบเรียลไทม์ผ่านสคริปต์ฝั่งไคลเอนต์ที่ชี้ไปที่ wss\ //your subdomain b4a io live queries สามารถส่งการเปลี่ยนแปลงไปยังไคลเอนต์ที่เชื่อมต่อของคุณเมื่อมีการสร้าง อัปเดต หรือ ลบระเบียน ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps acls (access control lists) และ clps (class level permissions) เป็นพื้นฐานในการควบคุมการเข้าถึงข้อมูล คุณสามารถกำหนดค่าได้ในส่วนของ database ในแดชบอร์ด back4app ของคุณ ตัวอย่างเช่น จำกัดการอ่าน/เขียนเฉพาะผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์เท่านั้น ใช้ acls สำหรับความปลอดภัยต่อวัตถุแต่ละรายการ ใช้ แนวทางความปลอดภัยของ back4app https //www back4app com/docs/security/parse security เพื่อให้แน่ใจว่าข้อมูลของคุณยังคงได้รับการปกป้อง คุณยังสามารถตั้งกฎเหล่านี้จากแดชบอร์ดได้ โดยมั่นใจว่าถึงแม้ว่าการเรียก rest ของคุณจะเปิดอยู่ แต่เฉพาะข้อมูลประจำตัวที่ถูกต้องเท่านั้นที่สามารถแก้ไขหรือดูข้อมูลได้ ขั้นตอนที่ 4 – การเขียนฟังก์ชัน cloud code ทำไมต้องใช้ cloud code คุณสามารถย้ายตรรกะทางธุรกิจที่สำคัญไปยังฝั่งเซิร์ฟเวอร์ เพื่อหลีกเลี่ยงการเปิดเผยความลับหรือความจำเป็นในการดูแลเซิร์ฟเวอร์แยกต่างหาก cloud code สามารถฟังการกระตุ้น (beforesave, aftersave) หรือจัดการกับจุดสิ้นสุดที่กำหนดเองได้ ตัวอย่าง // main js (cloud code) parse cloud define('greetuser', async (request) => { const username = request params name || 'guest'; return `hello, ${username}! welcome to the astro project `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); ปรับใช้สิ่งนี้ผ่าน back4app cli https //www back4app com/docs/local development/parse cli หรือโดยตรงในส่วนของ cloud code ในแดชบอร์ด back4app ของคุณ เรียกใช้ฟังก์ชัน จาก astro คุณสามารถกำหนดจุดสิ้นสุดที่ใช้ fetch เพื่อเรียกใช้ cloud function ของคุณ \ export async function post({ request }) { const body = await request json(); const url = `${import meta env back4app server url}/functions/greetuser`; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ name body name }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); } \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<title>cloud code greet\</title> \</head> \<body> \<h1>greet function endpoint\</h1> \</body> \</html> ขั้นตอนที่ 5 – การกำหนดค่าการรับรองความถูกต้อง back4app ใช้ user คลาสในการจัดการบัญชีผู้ใช้ ด้วย rest คุณสามารถจัดการการลงทะเบียน การเข้าสู่ระบบ หรือการออกจากระบบ ตัวอย่างเช่น การ ลงทะเบียน ผู้ใช้ใหม่ curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest key" \\ h "content type application/json" \\ d '{"username" "user1","password" "secret123","email" "user1\@example com"}' \\ https //parseapi back4app com/users คุณสามารถทำซ้ำตรรกะนี้จาก astro ด้วย fetch ในลักษณะเดียวกัน โดยใช้ตัวแปรสภาพแวดล้อม เมื่อเข้าสู่ระบบแล้ว ผู้ใช้จะได้รับโทเค็นเซสชันสำหรับคำขอถัดไป การเข้าสู่ระบบด้วยโซเชียล สำหรับผู้ให้บริการโซเชียล (เช่น google หรือ apple) ให้ใช้จุดสิ้นสุดเฉพาะหรือกำหนดค่า oauth flow โปรดดูที่ เอกสารการเข้าสู่ระบบด้วย apple https //www back4app com/docs/platform/sign in with apple หรือคู่มือการเข้าสู่ระบบโซเชียลอื่น ๆ เพื่อรวมการรับรองความถูกต้องขั้นสูง นี่เป็นสิ่งที่มีประโยชน์โดยเฉพาะหากคุณต้องการให้ผู้คนเข้าสู่ระบบจากโปรเจกต์ astro ของคุณโดยมีความยุ่งยากน้อยที่สุด ขั้นตอนที่ 6 – การจัดการการเก็บไฟล์ ในการเก็บไฟล์ใน back4app คุณจะต้องส่งไฟล์เหล่านั้นด้วย rest api ตัวอย่างเช่น curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest key" \\ h "content type image/png" \\ \ data binary "@path/to/local/image png" \\ https //parseapi back4app com/files/myimage png การตอบกลับจะมี url ของไฟล์ คุณสามารถเชื่อมโยง url นั้นกับระเบียน เช่น photo คลาสอ็อบเจ็กต์ เพื่อให้แน่ใจว่าคุณติดตามการอ้างอิงไปยังไฟล์ในฐานข้อมูลของคุณ คุณยังสามารถควบคุมว่าใครสามารถอัปโหลดได้โดยการปรับการตั้งค่าความปลอดภัยของไฟล์ในการกำหนดค่าของแอปของคุณ ขั้นตอนที่ 7 – การตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน เปิดใช้งานการตรวจสอบอีเมล ใน การตั้งค่าแอป ในแดชบอร์ด back4app ให้เปิดใช้งานการตรวจสอบอีเมลและปรับแต่งเทมเพลตอีเมลการตรวจสอบของคุณ ตั้งค่าการรีเซ็ตรหัสผ่าน ในทำนองเดียวกัน ให้กำหนดค่าอีเมลการรีเซ็ตรหัสผ่านของคุณและตรวจสอบให้แน่ใจว่า user คลาสมีที่อยู่อีเมลที่ถูกต้อง กระบวนการ เมื่อผู้ใช้ขอรีเซ็ตจากโปรเจกต์ astro ของคุณ (ผ่านการเรียก api) back4app จะส่งอีเมลโดยอัตโนมัติพร้อมลิงก์ที่ปลอดภัยเพื่อเปลี่ยนรหัสผ่านของพวกเขา ขั้นตอนที่ 8 – การกำหนดตารางงานด้วย cloud jobs ใช้ cloud jobs เพื่อกำหนดตารางงานการบำรุงรักษาหรือภารกิจอื่น ๆ ที่เกิดซ้ำ // main js parse cloud job('cleanupoldtodos', async () => { const query = new parse query('todo'); const now = new date(); const thirty days = 30 24 60 60 1000; query lessthan('createdat', new date(now thirty days)); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); ปรับใช้โค้ดของคุณ จากนั้นกำหนดเวลางานจาก การตั้งค่าเซิร์ฟเวอร์ > งานพื้นหลัง ในคอนโซล back4app นี่จะทำให้การทำงานอัตโนมัติเช่นการทำความสะอาดข้อมูล การส่งอีเมล หรือฟังก์ชันประจำใด ๆ ที่คุณต้องการให้ทำในช่วงเวลาที่กำหนด ขั้นตอนที่ 9 – การรวม webhooks webhooks ช่วยให้คุณสามารถแจ้งบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่างในแอป back4app ของคุณ ตัวอย่างเช่น คุณสามารถส่งข้อมูลไปยัง slack ทุกครั้งที่มีการสร้าง todo ใหม่ ไปที่ เพิ่มเติม > webhooks ในแดชบอร์ด back4app ของคุณ เพิ่ม webhook ที่ชี้ไปยัง url ของ slack เลือกเหตุการณ์ (เช่น, วัตถุที่สร้างขึ้น ในคลาส todo) สิ่งนี้ช่วยให้การไหลของคำขอ/การตอบกลับทำให้ระบบภายนอกของคุณซิงค์กับข้อมูลของแอปพลิเคชันที่ใช้ astro ของคุณ ขั้นตอนที่ 10 – การสำรวจแผงผู้ดูแล back4app แอป ผู้ดูแล back4app เป็นแผงการจัดการที่ใช้งานง่ายสำหรับการแก้ไขข้อมูล มันมีประโยชน์โดยเฉพาะสำหรับสมาชิกในทีมที่ไม่ใช่เทคนิคที่ต้องการเข้าถึงฐานข้อมูลของคุณโดยตรง เปิดใช้งาน แอปผู้ดูแลระบบภายใต้ เพิ่มเติม > แอปผู้ดูแลระบบ สร้าง ผู้ใช้ผู้ดูแลระบบเพื่อการเข้าถึงที่ปลอดภัย ใช้ แผงนี้เพื่อดำเนินการ crud อย่างรวดเร็ว ตรวจสอบบันทึก หรือกำหนดค่าการตั้งค่าที่ซับซ้อนมากขึ้น บทสรุป คุณได้สร้างแบ็คเอนด์ที่ปลอดภัยและมีประสิทธิภาพสำหรับโครงการ astro โดยใช้ back4app สำเร็จแล้ว ตลอดทั้งบทแนะนำนี้ คุณ กำหนดและกำหนดค่า โครงสร้างฐานข้อมูล ใช้ rest และ graphql apis เพื่ออ่านและเขียนข้อมูล รักษาความปลอดภัยข้อมูล ด้วย acls, clps, และการตรวจสอบสิทธิ์ผู้ใช้ ขยายตรรกะ ผ่าน cloud code และงานที่กำหนดเวลา จัดการการจัดเก็บไฟล์ สำหรับภาพหรือเอกสาร รวม webhooks สำหรับการแจ้งเตือนภายนอก สำรวจ แผงผู้ดูแลระบบเพื่อการจัดการข้อมูลที่ง่ายขึ้น วิธีการนี้เน้นย้ำถึงวิธีการสร้างแบ็คเอนด์สำหรับ astro ที่เชื่อถือได้ ขยายขนาดได้ และง่ายต่อการบำรุงรักษา โดยการใช้ตัวแปรสภาพแวดล้อม คุณจะเก็บข้อมูลรับรองของคุณให้ปลอดภัยในขณะที่ทำให้โค้ดของคุณยังคงยืดหยุ่นสำหรับการเติบโตในอนาคต ขั้นตอนถัดไป ปรับใช้โปรเจกต์ astro ของคุณ กับแพลตฟอร์มโฮสติ้งที่รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์หรือสภาพแวดล้อมที่ใช้ node เพิ่มฟีเจอร์ขั้นสูง , เช่น การควบคุมการเข้าถึงตามบทบาทหรือการรวมการชำระเงินเฉพาะ โดยใช้ cloud code หรือ api ภายนอก ปรับปรุงประสิทธิภาพ โดยการใช้กลยุทธ์การแคชและปรับการตั้งค่าคอนเทนต์ใน viewport ของคุณเพื่อประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น ตรวจสอบเอกสาร back4app เพื่อเรียนรู้เกี่ยวกับบันทึก การวิเคราะห์ และมาตรการรักษาความปลอดภัยที่ซับซ้อนมากขึ้น ดำเนินการสำรวจฟีเจอร์เรียลไทม์ด้วย live queries และสร้างแอปพลิเคชันที่มีพลศาสตร์และร่วมมือกันอย่างแท้จริง