How to Build a Backend for jQuery?

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้ วิธีการสร้างแบ็กเอนด์สำหรับ jquery โดยใช้ back4app เราจะรวมฟีเจอร์ที่สำคัญของ back4app—การจัดการฐานข้อมูล, cloud code, rest และ graphql apis, การตรวจสอบสิทธิผู้ใช้, และการค้นหาแบบเรียลไทม์—เพื่อสร้างแบ็กเอนด์ที่ปลอดภัยและสามารถขยายได้ แบ็กเอนด์นี้จะสื่อสารกับฟรอนต์เอนด์ที่ใช้ jquery ของคุณผ่านการเรียก ajax และวิธีการ jquery ทั่วไปอื่นๆ สภาพแวดล้อมที่ใช้งานง่ายของ back4app ช่วยลดเวลาที่จำเป็นในการตั้งค่าเซิร์ฟเวอร์หรือฐานข้อมูล โดยการทำตามขั้นตอนง่ายๆ คุณจะได้รับประสบการณ์จริงเกี่ยวกับ acls, สิทธิ์ระดับคลาส, การสร้างโมเดลข้อมูล, การอัปโหลดไฟล์, และอื่นๆ เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีพื้นฐานที่มั่นคงสำหรับแอป jquery ที่ทำงานได้เต็มรูปแบบซึ่งเชื่อมต่อกับแบ็กเอนด์ของ back4app คุณจะพร้อมที่จะเพิ่มตรรกะที่กำหนดเอง, รวม api ภายนอก, และรักษาความปลอดภัยข้อมูลของคุณด้วยการควบคุมที่ละเอียด ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณไม่มีบัญชี คุณสามารถสร้างบัญชีได้ฟรี ทำตามคำแนะนำข้างต้นเพื่อเตรียมโครงการของคุณ สภาพแวดล้อม jquery พื้นฐาน คุณสามารถดาวน์โหลด jquery ได้จาก เว็บไซต์ทางการ https //jquery com/download/ node js (เวอร์ชัน 14 หรือสูงกว่า) ติดตั้ง (ไม่บังคับ) แม้ว่า node js จะไม่จำเป็นต้องใช้สำหรับ jquery ในเบราว์เซอร์ แต่คุณอาจต้องใช้มันสำหรับการรันเซิร์ฟเวอร์ทดสอบในเครื่องหรือการติดตั้งแพ็คเกจ npm หากคุณต้องการทำการทดสอบในเครื่อง ติดตั้ง node js https //nodejs org/en/download/ ความคุ้นเคยกับ javascript และพื้นฐาน jquery เอกสารทางการของ jquery https //api jquery com/ ตรวจสอบให้แน่ใจว่าคุณมีสิ่งที่จำเป็นทั้งหมดก่อนเริ่ม เพื่อที่คุณจะได้ติดตามได้อย่างราบรื่นเมื่อสร้างส่วนหน้าที่ใช้ jquery และเชื่อมต่อกับ back4app ขั้นตอนที่ 1 – การตั้งค่าโครงการ back4app สร้างโครงการใหม่ เพื่อเริ่มโครงการ backend jquery ของคุณ ให้สร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” ในแดชบอร์ด back4app ของคุณ ตั้งชื่อแอปของคุณ (เช่น “jquery backend tutorial”) เมื่อโปรเจกต์ถูกสร้างขึ้น คุณจะเห็นมันในแดชบอร์ด back4app ของคุณ นี่จะเป็นฐานสำหรับการกำหนดค่าด้านหลังของคุณสำหรับ jquery เชื่อมต่อกับ parse sdk back4app ใช้ parse platform สำหรับข้อมูลและฟีเจอร์เรียลไทม์ หากคุณต้องการใช้ parse sdk โดยตรงกับ jquery คุณสามารถโหลดมันเป็นสคริปต์ใน html ของคุณได้ ดึงคีย์ parse ของคุณ ในแดชบอร์ด back4app ให้เปิด “การตั้งค่าแอป” หรือ “ความปลอดภัย & คีย์” ของแอปของคุณเพื่อค้นหา application id javascript key parse server url (ปกติคือ https //parseapi back4app com ) รวม parse sdk ในไฟล์ html ของคุณ ใน jquery สภาพแวดล้อม คุณสามารถโหลด jquery ก่อน จากนั้นโหลด parse และโต้ตอบกับวัตถุ parse ในสคริปต์ของคุณ การเชื่อมต่อนี้จะทำให้แน่ใจว่าการเรียกข้อมูลทั้งหมดไปยัง back4app backend ของคุณจะผ่าน parse platform ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การบันทึกและการค้นหาข้อมูล หลังจากที่ได้รวม parse sdk แล้ว คุณสามารถบันทึกและดึงข้อมูลจากฐานข้อมูล back4app ได้ นี่คือตัวอย่างง่ายๆ ของการสร้างและดึงวัตถุ “todo” โดยใช้ jquery และ parse คุณยังสามารถเรียกใช้ rest apis โดยใช้ curl 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 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } การออกแบบสคีมาและประเภทข้อมูล ในแดชบอร์ด back4app ไปที่ “ฐานข้อมูล” สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์เช่น ชื่อ (string) และ iscompleted (boolean) คุณยังสามารถให้ parse สร้างคอลัมน์โดยอัตโนมัติเมื่อคุณบันทึกวัตถุเป็นครั้งแรก การใช้ ai agent back4app มี ai agent สำหรับการสร้างโมเดลข้อมูล เปิด ai agent ในแดชบอร์ดหรือเมนูของแอปของคุณ อธิบายโมเดลข้อมูลของคุณ (เช่น “สร้างแอป todo ด้วยสคีมาคลาส ”) ให้ ai agent สร้างสคีมา ข้อมูลเชิงสัมพันธ์ หากคุณมี หมวดหมู่ ที่เชื่อมโยงกับหลาย งานที่ต้องทำ คุณสามารถใช้ pointers หรือ relations การค้นหาสด สำหรับการอัปเดตแบบเรียลไทม์ในแอป jquery ของคุณ เปิดใช้งานการค้นหาสด ในแดชบอร์ด back4app ของคุณภายใต้ การตั้งค่าเซิร์ฟเวอร์ เริ่มต้นการสมัครสมาชิกการค้นหาสด การสมัครสมาชิกนี้จะแจ้งให้คุณทราบแบบเรียลไทม์เมื่อมีการสร้าง อัปเดต หรือ ลบวัตถุ “todo” ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps กลไกความปลอดภัยของ back4app acls (รายการควบคุมการเข้าถึง) และ clps (การอนุญาตระดับคลาส) ช่วยให้คุณควบคุมว่าใครสามารถอ่านและเขียนข้อมูลที่ระดับวัตถุหรือระดับคลาสได้ รายการควบคุมการเข้าถึง (acls) acl ถูกตั้งค่าบนวัตถุแต่ละรายการเพื่อจำกัดการเข้าถึง สิทธิ์ระดับคลาส (clps) clps ควบคุมสิทธิ์เริ่มต้นสำหรับทั้งคลาส ในแดชบอร์ด back4app ของคุณ , เปิด ฐานข้อมูล ส่วน เลือกคลาสของคุณ (เช่น “todo”) ไปที่สิทธิ์ระดับคลาส แท็บเพื่อกำหนดการเข้าถึงสาธารณะ, ที่ได้รับการรับรอง, หรือที่อิงตามบทบาท รวม acl สำหรับความปลอดภัยระดับวัตถุเข้ากับ clps สำหรับข้อจำกัดที่กว้างขึ้น สำหรับข้อมูลเพิ่มเติม ดูที่ แนวทางความปลอดภัยของแอป https //www back4app com/docs/security/parse security ขั้นตอนที่ 4 – การเขียนและการปรับใช้ฟังก์ชันคลาวด์ โค้ดคลาวด์ ทำงาน javascript ที่กำหนดเองบนฝั่งเซิร์ฟเวอร์ ช่วยให้คุณเพิ่มตรรกะทางธุรกิจ, การตรวจสอบข้อมูล, หรือการเรียก api ภายนอก มันทำงานอย่างไร คุณวางโค้ดของคุณใน main js (หรือไฟล์ที่คล้ายกัน), นำไปใช้งานที่ back4app, และให้ parse server จัดการการทำงาน คุณยังสามารถใช้โมดูล npm สำหรับตรรกะที่ซับซ้อนมากขึ้น // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); นำฟังก์ชันของคุณไปใช้งาน ผ่านทาง https //www back4app com/docs/local development/parse cli b4a deploy ผ่านแดชบอร์ด ในแดชบอร์ดของแอปของคุณ, ไปที่ cloud code > functions คัดลอก/วางฟังก์ชันลงใน main js คลิก deploy เรียกใช้ฟังก์ชันของคุณ จาก jquery คุณสามารถเรียกใช้ cloud function ได้ดังนี้ ขั้นตอนที่ 5 – การกำหนดค่าการตรวจสอบสิทธิ์ผู้ใช้ การตรวจสอบสิทธิ์ผู้ใช้ใน back4app back4app ใช้ parse user คลาสสำหรับการตรวจสอบสิทธิ์ การเข้ารหัสรหัสผ่าน โทเค็นเซสชัน และการจัดเก็บข้อมูลอย่างปลอดภัยจะถูกจัดการโดยอัตโนมัติ การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ การจัดการเซสชัน คุณสามารถดึงผู้ใช้ปัจจุบัน const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } ออกจากระบบ parse user logout(); การรวมการเข้าสังคม back4app รองรับ google, facebook, apple และผู้ให้บริการ oauth อื่นๆ สำหรับข้อมูลเพิ่มเติม โปรดดูที่ เอกสารการเข้าสังคม https //www back4app com/docs/platform/sign in with apple ขั้นตอนที่ 6 – การจัดการการจัดเก็บไฟล์ การอัปโหลดและดึงไฟล์ ใช้ parse file เพื่อจัดการการอัปโหลด คุณสามารถเก็บไฟล์ในคลาสโดยการกำหนดให้กับฟิลด์ const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); การดึง url ของไฟล์ const imagefile = photo get('imagefile'); const imageurl = imagefile url(); ความปลอดภัยของไฟล์ คุณสามารถจัดการว่าใครสามารถอัปโหลดไฟล์ได้โดยการปรับเปลี่ยนการตั้งค่าการอัปโหลดไฟล์ใน parse server { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } ขั้นตอนที่ 7 – การกำหนดเวลางานด้วย 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); } }); ในแดชบอร์ด ไปที่ app settings > server settings > background jobs เพื่อกำหนดเวลา ขั้นตอนที่ 8 – การรวม webhooks webhooks ให้แอปของคุณส่งคำขอ http ไปยังบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่าง ไปที่ เพิ่มเติม > webhooks ในแดชบอร์ด back4app ของคุณ เพิ่ม webhook ใหม่ พร้อมกับจุดสิ้นสุดภายนอกของคุณ กำหนดค่า ทริกเกอร์สำหรับเหตุการณ์เช่น “บันทึกใหม่ในคลาส todo ” คุณอาจรวม slack หรือเกตเวย์การชำระเงินเช่น stripe โดยการส่งข้อมูลเหตุการณ์ผ่าน webhooks ขั้นตอนที่ 9 – สำรวจแผงผู้ดูแล back4app แอป back4app admin app มีอินเทอร์เฟซที่ไม่ใช่เทคนิคและใช้เว็บสำหรับการดำเนินการ crud การเปิดใช้งานแอปผู้ดูแล ไปที่ app dashboard > more > admin app และคลิก “เปิดใช้งาน admin app” สร้างผู้ใช้ admin คนแรก , ซึ่งจะสร้างบทบาทใหม่ (b4aadminuser) และคลาสในสคีมาของคุณโดยอัตโนมัติ เลือก subdomain สำหรับการเข้าถึงแอปผู้ดูแลระบบ เข้าสู่ระบบ โดยใช้ข้อมูลประจำตัวผู้ดูแลระบบใหม่ของคุณ เมื่อเปิดใช้งาน แอปผู้ดูแลระบบนี้จะช่วยให้คุณจัดการข้อมูลหรือมอบสิทธิ์การเข้าถึงให้กับสมาชิกในทีมโดยไม่ต้องเขียนโค้ด บทสรุป ในคู่มือนี้ คุณได้เรียนรู้วิธีการสร้างแบ็กเอนด์สำหรับ jquery ด้วย back4app คุณ สร้างโปรเจกต์ back4app ใหม่เป็นพื้นฐานของแบ็กเอนด์ของคุณ ตั้งค่าฐานข้อมูล รวมถึงการออกแบบสคีมาและความสัมพันธ์ของข้อมูล ใช้ acls และ clps สำหรับความปลอดภัยที่ละเอียด ปรับใช้ cloud code สำหรับตรรกะฝั่งเซิร์ฟเวอร์ที่กำหนดเอง กำหนดค่าการตรวจสอบสิทธิ์ผู้ใช้ การจัดเก็บไฟล์ และการอัปเดตแบบเรียลไทม์ กำหนดเวลางานเบื้องหลังและรวมเว็บฮุกสำหรับบริการภายนอก สำรวจแผงผู้ดูแลระบบ back4app สำหรับการจัดการข้อมูลที่ง่ายขึ้น ตอนนี้คุณมีความพร้อมที่จะขยายการตั้งค่า jquery + back4app พื้นฐานนี้ให้เป็นโซลูชันการผลิตเต็มรูปแบบ ต่อไปให้รวมฟีเจอร์ขั้นสูงเช่นการเข้าสังคม หรือกฎความปลอดภัยที่ละเอียดมากขึ้น สนุกกับการสร้างแอปพลิเคชันที่ขยายขนาดได้และขับเคลื่อนด้วยข้อมูล! ขั้นตอนถัดไป เตรียมพร้อมสำหรับการผลิต เพิ่มสิทธิ์การเข้าถึงตามบทบาทขั้นสูง กลยุทธ์การแคช และการปรับแต่งประสิทธิภาพ รวม api ของบุคคลที่สาม สำหรับการชำระเงิน การส่งข้อความ หรือการวิเคราะห์ สำรวจเอกสาร back4app ดำดิ่งลึกลงไปในความปลอดภัยขั้นสูง บันทึก หรือการวิเคราะห์ สร้างแอปจริง ใช้ความเรียบง่ายของ jquery ร่วมกับบริการแบ็กเอนด์ที่ทรงพลังของ back4app