How to Build a Backend for Gatsby?

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้ วิธีสร้างแบ็กเอนด์สำหรับ gatsby โดยใช้ back4app เราจะแสดงให้คุณเห็นวิธีการรวมฟีเจอร์ของ back4app—เช่น การจัดการฐานข้อมูล, ฟังก์ชัน cloud code, rest api และ ความสามารถในการสอบถาม graphql การตรวจสอบสิทธิ์ผู้ใช้ และการสอบถามแบบเรียลไทม์ (live queries)—เพื่อสร้างแบ็กเอนด์ที่ปลอดภัย ขยายตัวได้ และแข็งแกร่งซึ่งสามารถเข้าถึงได้จาก เว็บไซต์ gatsby ของคุณ คุณจะได้เห็นด้วยว่า การตั้งค่าอย่างรวดเร็วและสภาพแวดล้อมที่ใช้งานง่ายของ back4app สามารถลดเวลาและความพยายามในการจัดการงานแบ็กเอนด์ได้อย่างมาก เมื่อสิ้นสุด คุณจะรู้ว่าควร สร้างแบ็กเอนด์สำหรับ gatsby ที่เก็บและเรียกคืนข้อมูล จัดการการตรวจสอบสิทธิ์ รวมฟังก์ชันคลาวด์ และอื่น ๆ นี่จะช่วยให้คุณสามารถรวมตรรกะที่กำหนดเองได้อย่างง่ายดาย เพิ่ม api ของบุคคลที่สาม หรือขยายโมเดลข้อมูลของคุณโดยไม่ต้องกังวลเกี่ยวกับการบำรุงรักษาเซิร์ฟเวอร์แบบดั้งเดิม สิ่งที่คุณจะสร้างและทำไมมันถึงมีค่า การรวมแบ็กเอนด์ที่สมบูรณ์ คุณจะสร้างโครงสร้างแบ็กเอนด์ที่ขยายตัวได้สำหรับเว็บไซต์ gatsby ของคุณ โดยรวม parse sdk ซึ่งเหมาะสำหรับความต้องการข้อมูลที่มีพลศาสตร์ การประหยัดเวลา back4app มีเครื่องมือเช่น ai agent, การสอบถามแบบเรียลไทม์ และงานคลาวด์ที่ช่วยเร่งการสร้างแบ็กเอนด์ ทักษะที่ขยายได้ หลังจากเสร็จสิ้น คุณจะสามารถปรับใช้แนวคิดเหล่านี้สำหรับฟีเจอร์ gatsby ที่ซับซ้อนมากขึ้น เช่น การสร้างหน้า ในเวลาสร้างหรือเชื่อมต่อกับฟังก์ชันที่ไม่มีเซิร์ฟเวอร์สำหรับการดำเนินการแบบพลศาสตร์ ข้อกำหนดเบื้องต้น บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณยังไม่มีบัญชี คุณสามารถสร้างบัญชีได้ฟรี ทำตามคำแนะนำข้างต้นเพื่อเตรียมโครงการของคุณ สภาพแวดล้อมการพัฒนา gatsby พื้นฐาน คุณสามารถตั้งค่านี้ได้โดยการติดตั้ง gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli และรัน ติดตั้ง node js (เวอร์ชัน 14 หรือสูงกว่า) ติดตั้ง node js https //nodejs org/en/download/ ความคุ้นเคยกับ javascript และแนวคิดของ gatsby เอกสารอย่างเป็นทางการของ gatsby https //www gatsbyjs com/docs/ อ่านเอกสารหรือบทแนะนำสำหรับผู้เริ่มต้นหากคุณเป็นมือใหม่กับ gatsby ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าข้อกำหนดเหล่านี้แล้ว สิ่งนี้จะช่วยให้คุณมีประสบการณ์ที่ราบรื่นเมื่อคุณ สร้างไฟล์ใหม่ สำหรับการกำหนดค่าหรือรันคำสั่ง graphql ในสภาพแวดล้อม gatsby ของคุณ ขั้นตอนที่ 1 – การตั้งค่าโครงการ back4app สร้างโครงการใหม่ ขั้นตอนแรกใน การสร้างแบ็กเอนด์สำหรับ gatsby บน back4app คือการสร้างโครงการใหม่ หากคุณยังไม่ได้ทำ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อแอปของคุณ (เช่น “gatsby backend tutorial”) หลังจากที่คุณสร้างโปรเจกต์แล้ว มันจะปรากฏในแดชบอร์ด back4app ของคุณ เราจะใช้โปรเจกต์นี้เป็นแกนหลักของแบ็กเอนด์ของเรา เชื่อมต่อกับ parse sdk back4app ใช้ parse platform ในการจัดการข้อมูลของคุณ เสนอฟีเจอร์เรียลไทม์ จัดการการตรวจสอบผู้ใช้ และอื่นๆ สำหรับ gatsby คุณยังสามารถ npm install parse และจากนั้นรวมเข้ากับไฟล์ต้นทางของคุณ ดึงคีย์ parse ของคุณ ในแดชบอร์ด back4app ของคุณ ให้ค้นหา application id และ javascript key , โดยปกติจะอยู่ภายใต้ “app settings” หรือ “security & keys ” คุณจะพบ parse server url (มักจะเป็นอะไรบางอย่างเช่น https //parseapi back4app com ) ติดตั้ง parse sdk ในเว็บไซต์ gatsby ของคุณ npm install parse สร้าง parseconfig js ในไดเรกทอรีรากของโปรเจกต์ gatsby ของคุณหรือภายใน src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; เมื่อใดก็ตามที่คุณนำเข้า parse จาก parseconfig js ในไฟล์ gatsby ของคุณ (เช่น ใน gatsby node js , gatsby browser js , หรือหน้า/คอมโพเนนต์) คุณจะมีอินสแตนซ์ที่ตั้งค่าไว้ล่วงหน้าพร้อมที่จะทำการค้นหากับแบ็กเอนด์ back4app ของคุณ ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การสร้างโมเดลข้อมูล ใน back4app ข้อมูลจะถูกจัดการเป็น “คลาส” (คล้ายกับตาราง) โดยมีฟิลด์สำหรับข้อมูลของคุณ มาสร้างคลาส “todo” เพื่อการสาธิตกันเถอะ เราจะแสดงวิธีการบางอย่างที่คุณสามารถ บันทึกและดึงข้อมูล ใน gatsby ด้วย parse ไปที่ส่วน “database” ในแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์เช่น title (string) และ iscompleted (boolean) หรือคุณสามารถให้ parse สร้างคอลัมน์โดยอัตโนมัติเมื่อวัตถุถูกบันทึกครั้งแรกจากโค้ดของคุณ การสร้างโมเดลข้อมูลด้วย ai agent back4app มี ai agent เพื่อช่วยกำหนดโครงสร้างข้อมูลของคุณ เปิด ai agent จากแดชบอร์ดแอปของคุณหรือเมนู อธิบายโมเดลข้อมูลของคุณ (เช่น “กรุณาสร้างสคีมาของแอป todo ใหม่ที่มีชื่อและสถานะการเสร็จสิ้น ”) ให้ ai agent สร้าง สคีมาสำหรับคุณ การอ่านและเขียนข้อมูลโดยใช้ sdk ตัวอย่างโค้ดใน gatsby อาจมีลักษณะดังนี้ (เช่น ในหน้าแบบ react หรือใน gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } การอ่านและเขียนข้อมูลโดยใช้ rest api นอกจากนี้ คุณสามารถโต้ตอบกับฐานข้อมูลผ่านทาง rest api curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo การอ่านและเขียนข้อมูลโดยใช้ graphql api back4app ยังรองรับ graphql api , ดังนั้นคุณสามารถรันคำสั่งค้นหาหรือการเปลี่ยนแปลงได้เช่น mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } นี่สะดวกโดยเฉพาะหากคุณต้องการให้เว็บไซต์ gatsby ของคุณดึงข้อมูลผ่านการสอบถาม graphql ในระหว่างการสร้าง การทำงานกับ live queries gatsby เป็นเครื่องมือสร้างเว็บไซต์แบบสแตติก แต่คุณยังสามารถตั้งค่าการเชื่อมต่อแบบเรียลไทม์ที่มีพลศาสตร์โดยใช้ parse live queries สิ่งนี้สามารถมีประโยชน์ในโค้ดที่รันในเบราว์เซอร์หรือในฮุคเซิร์ฟเวอร์ที่ไม่มีเซิร์ฟเวอร์ของคุณ เปิดใช้งาน live queries ในแดชบอร์ด back4app ของคุณ (ภายใต้การตั้งค่าเซิร์ฟเวอร์) เพิ่ม url เซิร์ฟเวอร์ live query ไปที่ parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; สมัครสมาชิก เพื่อรับการแจ้งเตือนแบบเรียลไทม์ async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } สิ่งนี้จะส่งการอัปเดตข้อมูลแบบเรียลไทม์ไปยังส่วนหน้าของโปรเจกต์ gatsby ของคุณ ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps acls และ clps คืออะไร? acls (access control lists) ให้คุณกำหนดสิทธิ์ในวัตถุแต่ละรายการ ขณะที่ clps (class level permissions) ใช้กับคลาสทั้งหมดในฐานข้อมูล back4app ของคุณ การตั้งค่าความปลอดภัยระดับคลาส ไปที่ ฐานข้อมูล ในแดชบอร์ด back4app ของคุณ เลือกคลาส (เช่น, todo ) คลิกที่ การอนุญาตระดับคลาส แท็บ กำหนดค่าว่าคลาสนั้นสามารถอ่านได้สาธารณะ, ต้องการการตรวจสอบสิทธิ์, หรือถูกจำกัดเฉพาะบทบาทบางอย่าง การใช้ acls ในโค้ด ในโค้ด gatsby ของคุณ, คุณสามารถกำหนด acls สำหรับแต่ละวัตถุใหม่ async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } ขั้นตอนที่ 4 – การเขียนฟังก์ชัน cloud code ทำไมต้องใช้ cloud code? ด้วย cloud code, คุณสามารถเพิ่มตรรกะฝั่งเซิร์ฟเวอร์ที่กำหนดเองไปยังแบ็กเอนด์ back4app ของคุณ นี่เป็นสิ่งที่ดีสำหรับกฎทางธุรกิจ, การแปลง rest api , ทริกเกอร์, หรือการตรวจสอบข้อมูลที่คุณอาจต้องการเก็บให้ปลอดภัยและไม่อยู่ในฝั่งลูกค้า ตัวอย่างฟังก์ชัน cloud // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); การปรับใช้ cloud code ผ่าน back4app cli ติดตั้งและกำหนดค่า cli จากนั้นรัน b4a deploy ผ่าน dashboard ไปที่ cloud code > functions ในแดชบอร์ดของคุณ วางโค้ดของคุณลงใน main js , และคลิก deploy การเรียกใช้ฟังก์ชันของคุณ จาก gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } ขั้นตอนที่ 5 – การกำหนดค่าการตรวจสอบสิทธิ์ คลาสผู้ใช้ parse back4app ใช้ parse user คลาสสำหรับการตรวจสอบสิทธิ์ โดยค่าเริ่มต้นจะจัดการการเข้ารหัสรหัสผ่าน เซสชัน และการจัดเก็บข้อมูลอย่างปลอดภัย ลงทะเบียนและเข้าสู่ระบบใน gatsby import parse from ' /parseconfig'; // signup async function signupuser(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 signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } หลังจากเข้าสู่ระบบแล้ว คุณสามารถเรียกใช้ parse user current() เพื่อตรวจสอบว่าผู้ใช้ได้เข้าสู่ระบบหรือไม่ การเข้าสู่ระบบด้วยโซเชียล คุณสามารถรวม google , facebook , apple , และผู้ให้บริการอื่น ๆ ด้วยการตั้งค่าเพิ่มเติม อ่านเพิ่มเติมใน เอกสารการเข้าสู่ระบบด้วยโซเชียล https //www back4app com/docs/platform/sign in with apple ขั้นตอนที่ 6 – การจัดการการจัดเก็บไฟล์ การอัปโหลดไฟล์ ใช้ parse file เพื่ออัปโหลดภาพหรือไฟล์อื่น ๆ ตัวอย่างเช่น ในคอมโพเนนต์ gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } คุณสามารถแนบไฟล์นี้กับวัตถุ parse เก็บไว้ และภายหลังเรียกคืน url ของไฟล์เพื่อแสดงในเว็บไซต์ gatsby ของคุณ ขั้นตอนที่ 7 – การตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน ทำไมมันถึงสำคัญ การตรวจสอบอีเมลยืนยันที่อยู่อีเมลของผู้ใช้ และการรีเซ็ตรหัสผ่านช่วยปรับปรุงประสบการณ์ของผู้ใช้ ทั้งสองอย่างนี้สามารถตั้งค่าได้ง่ายใน back4app ไปที่การตั้งค่าอีเมลของแอปของคุณ ในแดชบอร์ด เปิดใช้งานการตรวจสอบอีเมล และตั้งค่าเทมเพลตอีเมลรีเซ็ตรหัสผ่าน ใช้วิธีการของ parse sdk (เช่น, parse user requestpasswordreset(email) ) เพื่อกระตุ้นอีเมลรีเซ็ต ขั้นตอนที่ 8 – การกำหนดตารางงานด้วย cloud jobs ภาพรวมของ cloud jobs ใช้ cloud jobs สำหรับการทำงานอัตโนมัติที่เกิดขึ้นซ้ำ เช่น การลบข้อมูลที่ล้าสมัยหรือการส่งข้อมูลสรุปรายวัน ตัวอย่างเช่น // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); จากนั้นกำหนดตารางงานภายใต้ การตั้งค่าแอป > การตั้งค่าเซิร์ฟเวอร์ > งานพื้นหลัง ขั้นตอนที่ 9 – การรวม webhooks webhooks ช่วยให้แอป back4app ของคุณส่งคำขอ http ไปยังบริการภายนอกเมื่อเกิดเหตุการณ์เฉพาะ เช่น การสร้างระเบียนใหม่ ไปที่ แดชบอร์ด back4app ของคุณ > เพิ่มเติม > webhooks เพิ่ม webhook ใหม่ , โดยระบุ url จุดสิ้นสุดสำหรับบริการภายนอก เลือก สิ่งที่กระตุ้น webhook (เช่น aftersave ในคลาส todo) คุณยังสามารถรวมกับ slack หรือเกตเวย์การชำระเงินโดยการเพิ่มจุดสิ้นสุดที่เหมาะสม ขั้นตอนที่ 10 – การสำรวจแผงผู้ดูแล back4app back4app’s admin app เป็นอินเทอร์เฟซที่มุ่งเน้นโมเดลสำหรับการจัดการข้อมูล คุณสามารถให้ผู้ใช้ที่ไม่ใช่เทคนิคเข้าถึงอย่างปลอดภัยเพื่อทำการดำเนินการ crud บนคลาสของคุณ การเปิดใช้งาน admin app ไปที่ app dashboard > more > admin app และคลิก “enable admin app ” จากนั้น สร้างผู้ใช้ admin และเลือกซับโดเมนสำหรับอินเทอร์เฟซผู้ดูแล คุณสามารถเข้าสู่ระบบ admin app ของคุณเพื่อดูและแก้ไขข้อมูลโดยไม่ต้องเขียนโค้ด บทสรุป ในบทแนะนำนี้ คุณได้ค้นพบ วิธีการสร้างแบ็คเอนด์สำหรับ gatsby โดยใช้ back4app คุณได้เรียนรู้ที่จะ กำหนดค่าฐานข้อมูลที่ปลอดภัย ด้วยคลาส ฟิลด์ที่กำหนดเอง และความสัมพันธ์ ใช้ parse sdk , พร้อมกับ rest api และ graphql query สำหรับการทำธุรกรรมข้อมูล ตั้งค่า acls และ clps เพื่อความปลอดภัยของข้อมูล เขียนและปรับใช้ cloud code เพื่อขยายตรรกะธุรกิจและทริกเกอร์ จัดการการตรวจสอบสิทธิ์ผู้ใช้ ด้วยการลงทะเบียน เข้าสู่ระบบ รีเซ็ตรหัสผ่าน และการตรวจสอบอีเมล จัดการการจัดเก็บไฟล์ สำหรับภาพและเอกสาร กำหนดตารางงานอัตโนมัติ ด้วย cloud jobs รวมบริการภายนอก ผ่าน webhooks ใช้ประโยชน์จาก admin app สำหรับการจัดการข้อมูลอย่างง่าย ด้วยทักษะเหล่านี้ เว็บไซต์ gatsby ของคุณสามารถใช้ประโยชน์จากฟีเจอร์ที่มีพลศาสตร์ที่ทรงพลัง ในขณะที่ยังคงใช้ประโยชน์จากการเรนเดอร์แบบสแตติกของ gatsby ได้ จากที่นี่ คุณสามารถ ขยายโมเดลข้อมูลของคุณ และเพิ่มตรรกะทางธุรกิจขั้นสูง รวม api ภายนอกเพิ่มเติม เพื่อแพลตฟอร์มที่ครอบคลุมอย่างแท้จริง ติดตามเอกสารทางการของ back4app เพื่อการเจาะลึกในด้านความปลอดภัย ประสิทธิภาพ และการวิเคราะห์ ทดลองใช้ฟีเจอร์ในช่วงเวลาการสร้างของ gatsby —ตัวอย่างเช่น “ สร้างหน้า ” จากข้อมูลพลศาสตร์ หรือจัดตั้ง “ gatsby source ” ปลั๊กอินสำหรับแบ็กเอนด์ back4app ของคุณ ตอนนี้คุณมีพื้นฐานที่แข็งแกร่งสำหรับการสร้างแอปที่ขับเคลื่อนด้วยข้อมูลในอนาคตด้วย gatsby และ back4app