How to Build a Backend for htmx?

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการสร้างแบ็กเอนด์ที่สมบูรณ์สำหรับแอปเว็บ htmx โดยใช้ back4app เราจะเดินผ่านการรวมฟีเจอร์ที่จำเป็นของ back4app เช่น การจัดการฐานข้อมูล, ฟังก์ชัน cloud code, rest และ graphql apis, การตรวจสอบสิทธิ์ผู้ใช้, การจัดเก็บไฟล์, และการค้นหาแบบเรียลไทม์ (live queries) เพื่อสร้างแบ็กเอนด์ที่ปลอดภัย, ขยายได้, และแข็งแกร่งที่สื่อสารกับส่วนหน้าของคุณได้อย่างราบรื่น การใช้ htmx ซึ่งเป็นไลบรารี javascript สมัยใหม่ที่ใช้แอตทริบิวต์ html เพื่อจัดการการโต้ตอบด้านลูกค้า สามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมากในขณะที่มุ่งเน้นไปที่การเรนเดอร์ด้านเซิร์ฟเวอร์ โดยการรวม htmx กับเฟรมเวิร์กด้านเซิร์ฟเวอร์ที่ทรงพลังและเครื่องมือสร้างเทมเพลตของ back4app นักพัฒนาสามารถสร้างแอปเว็บแบบฟูลสแต็กได้อย่างง่ายดายและมีประสิทธิภาพ เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างแบ็กเอนด์ที่ปรับแต่งสำหรับการรวม htmx ซึ่งช่วยให้การดำเนินการข้อมูลเป็นไปอย่างราบรื่นและปรับปรุงประสบการณ์ด้านลูกค้าด้วยการอัปเดตหน้า html แบบไดนามิกโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสิ้น คุณจะต้องมี บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app หากคุณยังไม่มีบัญชี คุณสามารถสร้างบัญชีได้ฟรี ทำตามคำแนะนำข้างต้นเพื่อเตรียมโครงการของคุณ การตั้งค่า htmx เบื้องต้น รวม ไลบรารี htmx https //htmx org/ ในหน้า html ของคุณโดยใช้ สภาพแวดล้อมการพัฒนาเว็บ ตรวจสอบให้แน่ใจว่าคุณมีการตั้งค่าเซิร์ฟเวอร์ท้องถิ่นหรือใช้เฟรมเวิร์กด้านเซิร์ฟเวอร์เพื่อให้บริการเทมเพลต html ของคุณ ความคุ้นเคยกับ html, css, และ javascript เอกสาร htmx https //htmx org/docs/ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับแอตทริบิวต์ html และการพัฒนาแอปเว็บ ตรวจสอบให้แน่ใจว่าคุณมีข้อกำหนดเบื้องต้นทั้งหมดนี้ก่อนที่คุณจะเริ่มต้น การตั้งค่าโปรเจกต์ back4app ของคุณและเตรียมสภาพแวดล้อม htmx ในเครื่องของคุณจะช่วยให้คุณติดตามได้ง่ายขึ้น ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ back4app สร้างโปรเจกต์ใหม่ ขั้นตอนแรกในการสร้างแบ็กเอนด์ htmx ของคุณบน back4app คือการสร้างโปรเจกต์ใหม่ หากคุณยังไม่ได้สร้าง โปรดทำตามขั้นตอนเหล่านี้ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” ในแดชบอร์ด back4app ของคุณ ตั้งชื่อแอปของคุณ (เช่น “htmx backend tutorial”) เมื่อโครงการถูกสร้างขึ้น คุณจะเห็นมันถูกแสดงในแดชบอร์ด back4app ของคุณ โครงการนี้จะเป็นพื้นฐานสำหรับการตั้งค่าด้านหลังทั้งหมดที่กล่าวถึงในบทแนะนำนี้ connect via rest api back4app ขึ้นอยู่กับ parse platform ในการจัดการข้อมูลของคุณ, ให้ฟีเจอร์เรียลไทม์, จัดการการตรวจสอบสิทธิ์ของผู้ใช้, และอื่นๆ ขณะที่ htmx เองเป็นไลบรารีฝั่งไคลเอนต์, การเชื่อมต่อส่วนหน้าของ htmx กับ back4app เกี่ยวข้องกับการทำ rest api calls โดยตรงจาก html และ javascript ของคุณ ดึงคีย์ parse ของคุณ ในแดชบอร์ด back4app ของคุณ ให้ไปที่ส่วน “การตั้งค่าแอป” หรือ “ความปลอดภัย & คีย์” เพื่อค้นหา รหัสประจำแอป , คีย์ api rest , และ url ของ parse server (มักอยู่ในรูปแบบ https //parseapi back4app com ) ด้วยคีย์เหล่านี้ คุณสามารถใช้ htmx เพื่อเรียกจุดสิ้นสุดของแบ็คเอนด์ของคุณและจัดการกับเทมเพลต html ของคุณตามนั้น ตัวอย่างเช่น คุณอาจใช้คำขอ fetch ของ javascript ร่วมกับแอตทริบิวต์ htmx เพื่อโต้ตอบกับข้อมูลของคุณผ่านการเรียก rest step 2 – setting up the database saving and querying data เมื่อคุณตั้งค่าโครงการ back4app ของคุณเสร็จแล้ว คุณสามารถเริ่มบันทึกและเรียกคืนข้อมูลโดยใช้การเรียก api แบบ rest ซึ่งคุณสามารถเรียกใช้จากคำขอ htmx หรือ javascript ธรรมดา วิธีที่ง่ายที่สุดในการสร้างระเบียนคือการทำการร้องขอ post ไปยังเซิร์ฟเวอร์ parse 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 ในทำนองเดียวกัน คุณสามารถสอบถามข้อมูลได้ curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo คุณยังสามารถใช้คำสั่ง graphql ตามที่ต้องการเพื่อโต้ตอบกับฐานข้อมูลของคุณจากด้านลูกค้าได้ schema design and data types ตามค่าเริ่มต้น, parse อนุญาตให้ สร้าง schema ตามต้องการ , แต่คุณยังสามารถกำหนดคลาสและประเภทข้อมูลของคุณในแดชบอร์ด back4app เพื่อควบคุมได้มากขึ้น ไปที่ส่วน “ฐานข้อมูล” ในแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์ที่เกี่ยวข้อง เช่น ชื่อ (string) และ iscompleted (boolean) back4app รองรับประเภทข้อมูลต่างๆ เช่น string , number , boolean , object , date , file , pointer, array, relation , geopoint , และ polygon ใช้เหล่านี้เพื่อออกแบบสคีมาที่แข็งแกร่งสำหรับแอปพลิเคชันที่ขับเคลื่อนด้วย htmx back4app มี ai agent ที่สามารถช่วยคุณออกแบบโมเดลข้อมูลของคุณ เปิด ai agent จากแดชบอร์ดแอปของคุณหรือในเมนู อธิบายโมเดลข้อมูลของคุณ ในภาษาที่เข้าใจง่าย (เช่น “กรุณาสร้างแอป todo ใหม่ที่ back4app พร้อมกับสคีมาของคลาสที่สมบูรณ์”) ให้เอไอเอเจนต์สร้างสคีมาสำหรับคุณ การใช้ ai agent สามารถช่วยประหยัดเวลาในการตั้งค่าฐานข้อมูลของคุณและรับประกันความสอดคล้องในแอปพลิเคชันของคุณ relational data หากคุณมีข้อมูลเชิงสัมพันธ์ เช่น การเชื่อมโยงงานกับหมวดหมู่ คุณสามารถใช้ pointers หรือ relations ใน parse ผ่านการเรียก rest api ตัวอย่างเช่น การเพิ่มพอยเตอร์ // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } เมื่อคุณทำการค้นหา ให้รวมข้อมูลตัวชี้ตามที่จำเป็น // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } live queries สำหรับการอัปเดตแบบเรียลไทม์ back4app มี live queries ในขณะที่ htmx มุ่งเน้นไปที่การเรนเดอร์ด้านเซิร์ฟเวอร์และแอตทริบิวต์ html การรวมการอัปเดตแบบสดสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก เปิดใช้งาน live queries ในแดชบอร์ด back4app ของคุณภายใต้แอปของคุณ การตั้งค่าเซิร์ฟเวอร์ ตรวจสอบให้แน่ใจว่า “live queries” ถูกเปิดใช้งาน เริ่มต้นการสมัครสมาชิก live query โดยใช้ javascript ร่วมกับ htmx triggers หากจำเป็น (หมายเหตุ การค้นหาสดมักต้องการ parse sdk; อย่างไรก็ตาม พวกเขายังสามารถทำงานร่วมกับ htmx โดยการอัปเดตส่วนต่าง ๆ ของหน้าเมื่อข้อมูลเปลี่ยนแปลง ตัวอย่างนี้แสดงให้เห็นถึงแนวคิด ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } การสมัครสมาชิกนี้สามารถกระตุ้นคำขอ htmx หรืออัปเดตเทมเพลต html แบบไดนามิกเพื่อสะท้อนการเปลี่ยนแปลงในฝั่งลูกค้าได้ step 3 – applying security with acls and clps back4app security mechanism back4app ให้ความสำคัญกับความปลอดภัยโดยการจัดเตรียม access control lists (acls) และ class level permissions (clps) ฟีเจอร์เหล่านี้ช่วยให้คุณสามารถจำกัดว่าใครสามารถอ่านหรือเขียนข้อมูลได้ตามวัตถุหรือระดับคลาส ทำให้มั่นใจได้ว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูลของคุณได้ access control lists (acls) การ acl ถูกนำไปใช้กับวัตถุแต่ละชิ้นเพื่อตัดสินใจว่าผู้ใช้ บทบาท หรือสาธารณะสามารถทำการอ่าน/เขียนได้หรือไม่ ตัวอย่างเช่น async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } เมื่อคุณบันทึกวัตถุ มันจะมี acl ที่ป้องกันไม่ให้ใครอ่านหรือแก้ไขนอกจากผู้ใช้ที่ระบุไว้ class level permissions (clps) clps กำหนดสิทธิ์เริ่มต้นของทั้งชั้นเรียน เช่น ชั้นเรียนสามารถอ่านหรือเขียนได้สาธารณะหรือไม่ หรือเฉพาะบทบาทบางอย่างเท่านั้นที่สามารถเข้าถึงได้ ไปที่แดชบอร์ด back4app ของคุณ , เลือกแอปของคุณ และเปิด ฐานข้อมูล ส่วน เลือกคลาส (เช่น “todo”) เปิดการอนุญาตระดับชั้นเรียน แท็บ กำหนดค่าพื้นฐานของคุณ เช่น “ต้องการการตรวจสอบสิทธิ์” สำหรับการอ่านหรือเขียน หรือ “ไม่มีการเข้าถึง” สำหรับสาธารณะ สิทธิ์เหล่านี้กำหนดพื้นฐาน ในขณะที่ acls ปรับแต่งสิทธิ์สำหรับวัตถุแต่ละรายการ โมเดลความปลอดภัยที่แข็งแกร่งมักจะรวมทั้ง clps (ข้อจำกัดกว้าง) และ acls (ข้อจำกัดเฉพาะต่อวัตถุ) สำหรับข้อมูลเพิ่มเติมไปที่ แนวทางความปลอดภัยของแอป https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions cloud code เป็นฟีเจอร์ของสภาพแวดล้อม parse server ที่ช่วยให้คุณสามารถรันโค้ด javascript ที่กำหนดเองบนฝั่งเซิร์ฟเวอร์ โดยการเขียน cloud code คุณสามารถขยายแบ็กเอนด์ back4app ของคุณด้วยตรรกะทางธุรกิจเพิ่มเติม การตรวจสอบความถูกต้อง ทริกเกอร์ และการรวมระบบที่ทำงานได้อย่างปลอดภัยและมีประสิทธิภาพบน parse server how it works เมื่อคุณเขียน cloud code คุณมักจะวางฟังก์ชัน javascript, ทริกเกอร์ และโมดูล npm ที่จำเป็นไว้ใน main js ไฟล์นี้จะถูกนำไปใช้งานในโปรเจกต์ back4app ของคุณ ซึ่งจะถูกดำเนินการภายในสภาพแวดล้อมของ parse server // 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'); } }); ปรับใช้ cloud code ของคุณโดยใช้ back4app cli หรือผ่านแดชบอร์ด calling your function จากอินเทอร์เฟซที่ปรับปรุงด้วย htmx คุณสามารถเรียกใช้ฟังก์ชัน cloud code ของคุณโดยใช้ javascript fetch และอัปเดตส่วนต่าง ๆ ของหน้า html ของคุณตามนั้น ตัวอย่างเช่น async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } คุณสามารถรวมการเรียกที่คล้ายกันภายในทริกเกอร์ htmx และแอตทริบิวต์ html ของคุณเพื่อสร้างพฤติกรรมที่ตอบสนองและมีพลศาสตร์บนฝั่งลูกค้า ซึ่งจะช่วยปรับปรุงประสบการณ์ผู้ใช้โดยรวม step 5 – configuring user authentication user authentication in back4app back4app ใช้ประโยชน์จาก parse user คลาสเป็นพื้นฐานสำหรับการตรวจสอบสิทธิ์ โดยค่าเริ่มต้น parse จะจัดการการแฮชรหัสผ่าน โทเค็นเซสชัน และการจัดเก็บข้อมูลอย่างปลอดภัย ในบริบทของแอปพลิเคชัน htmx การตรวจสอบสิทธิ์ผู้ใช้สามารถจัดการได้ผ่านการเรียก rest ที่เริ่มต้นโดยการส่งฟอร์ม html หรือคำขอ fetch ของ javascript setting up user authentication ตัวอย่างเช่น เพื่อสร้างผู้ใช้ใหม่ async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } เช่นเดียวกัน สำหรับการเข้าสู่ระบบของผู้ใช้ async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } session management หลังจากการเข้าสู่ระบบที่สำเร็จ parse จะสร้างโทเค็นเซสชันที่คุณสามารถเก็บและจัดการในแอปพลิเคชัน htmx ของคุณสำหรับคำขอที่ได้รับการตรวจสอบสิทธิ์ในภายหลัง social login integration ในขณะที่ htmx มุ่งเน้นไปที่แอตทริบิวต์ html และการโต้ตอบด้านเซิร์ฟเวอร์ การรวมการเข้าสู่ระบบด้วยโซเชียล เช่น google หรือ facebook ก็ยังสามารถทำได้โดยการเริ่มต้น oauth flows และจัดการ callbacks บนเซิร์ฟเวอร์ ดูที่ เอกสารการเข้าสู่ระบบด้วยโซเชียล https //www back4app com/docs/platform/sign in with apple สำหรับคำแนะนำโดยละเอียด email verification and password reset เพื่อเปิดใช้งานการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน ไปที่การตั้งค่าอีเมล ในแดชบอร์ด back4app ของคุณ เปิดใช้งานการตรวจสอบอีเมล และกำหนดค่าเทมเพลตที่จำเป็น ใช้ fetch ในการไหลของ htmx ของคุณเพื่อกระตุ้นคำขอรีเซ็ตรหัสผ่านตามที่ต้องการ step 6 – handling file storage uploading and retrieving files parse รวมถึงความสามารถในการจัดเก็บไฟล์ที่คุณสามารถใช้ผ่านการเรียก rest api จากแอปพลิเคชัน htmx ของคุณ ตัวอย่างเช่น การอัปโหลดภาพ async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } file security ควบคุมว่าใครสามารถอัปโหลดและเข้าถึงไฟล์ได้โดยการกำหนดการตั้งค่าความปลอดภัยใน back4app และตั้งค่า acl บนวัตถุไฟล์ตามที่จำเป็น step 7 – scheduling tasks with cloud jobs cloud jobs งานคลาวด์ใน back4app ช่วยให้คุณสามารถกำหนดตารางงานประจำบนแบ็กเอนด์ของคุณ เช่น การทำความสะอาดข้อมูลเก่าหรือการส่งอีเมลตามระยะเวลา งานเหล่านี้ทำงานด้านเซิร์ฟเวอร์และสามารถรวมเข้ากับกระบวนการทำงาน htmx ของคุณเมื่อจำเป็น // 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); } }); กำหนดตารางงานนี้ผ่านแดชบอร์ด back4app ที่ การตั้งค่าแอป > การตั้งค่าเซิร์ฟเวอร์ > งานเบื้องหลัง step 8 – integrating webhooks webhooks ช่วยให้แอป back4app ของคุณสามารถส่งคำขอ http ไปยังบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่าง นี่เป็นเครื่องมือที่ทรงพลังสำหรับการรวมเข้ากับระบบของบุคคลที่สาม เช่น เกตเวย์การชำระเงิน เครื่องมือการตลาดทางอีเมล หรือแพลตฟอร์มการวิเคราะห์ ไปที่การตั้งค่า webhooks ในแดชบอร์ด back4app ของคุณ > เพิ่มเติม > webhooks และคลิกที่ เพิ่ม webhook ตั้งค่าจุดสิ้นสุด (เช่น, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) กำหนดทริกเกอร์ เพื่อระบุว่าเหตุการณ์ใดในคลาส back4app หรือฟังก์ชัน cloud code ของคุณจะทำให้เว็บฮุคทำงาน ตัวอย่างเช่น เพื่อแจ้งช่อง slack ทุกครั้งที่มี todo ใหม่ถูกสร้างขึ้น สร้างแอป slack ที่รับเว็บฮุคเข้ามา คัดลอก url เว็บฮุคของ slack ในแดชบอร์ด back4app ของคุณ ให้ตั้งค่า endpoint เป็น url ของ slack สำหรับเหตุการณ์ “บันทึกใหม่ในคลาส todo” สามารถเพิ่ม http headers หรือ payloads ที่กำหนดเองได้ตามต้องการ คุณยังสามารถกำหนด webhooks ใน cloud code โดยการทำคำขอ http แบบกำหนดเองในทริกเกอร์ได้ step 9 – exploring the back4app admin panel การ back4app admin app เป็นอินเทอร์เฟซการจัดการที่ใช้เว็บซึ่งออกแบบมาสำหรับผู้ใช้ที่ไม่ใช่เทคนิคเพื่อทำการดำเนินการ crud และจัดการงานข้อมูลประจำวันโดยไม่ต้องเขียนโค้ดใดๆ มันให้การจัดการที่มุ่งเน้นโมเดลและอินเทอร์เฟซที่ใช้งานง่ายซึ่งช่วยให้การบริหารฐานข้อมูล การจัดการข้อมูลที่กำหนดเอง และการดำเนินงานในระดับองค์กรเป็นไปอย่างราบรื่น enabling the admin app เปิดใช้งาน โดยไปที่ แดชบอร์ดแอป > เพิ่มเติม > แอปผู้ดูแล และคลิกที่ปุ่ม “เปิดใช้งานแอปผู้ดูแล” สร้างผู้ใช้แอดมินคนแรก (ชื่อผู้ใช้/รหัสผ่าน) ซึ่งจะสร้างบทบาทใหม่ (b4aadminuser) และคลาส (b4asetting, b4amenuitem, และ b4acustomfield) ในสคีมาของแอปของคุณโดยอัตโนมัติ เลือกซับโดเมน เพื่อเข้าถึงส่วนติดต่อผู้ดูแลระบบและทำการตั้งค่าให้เสร็จสิ้น เข้าสู่ระบบ โดยใช้ข้อมูลประจำตัวผู้ดูแลระบบที่คุณสร้างขึ้นเพื่อเข้าถึงแดชบอร์ดแอปผู้ดูแลระบบใหม่ของคุณ เมื่อเปิดใช้งานแล้ว แอปผู้ดูแล back4app จะทำให้การดู แก้ไข หรือ ลบระเบียนจากฐานข้อมูลของคุณเป็นเรื่องง่าย โดยไม่ต้องใช้ parse dashboard หรือโค้ดด้านหลังโดยตรง conclusion โดยการติดตามบทแนะนำที่ครอบคลุมนี้เกี่ยวกับวิธีการสร้างแบ็กเอนด์สำหรับ htmx โดยใช้ back4app คุณได้ สร้างแบ็กเอนด์ที่ปลอดภัยซึ่งออกแบบมาสำหรับแอปเว็บ htmx กำหนดค่าฐานข้อมูลด้วยสคีมาของคลาส ประเภทข้อมูล และความสัมพันธ์ การสอบถามแบบเรียลไทม์แบบบูรณาการและพิจารณาว่า live queries สามารถปรับปรุงประสบการณ์ของผู้ใช้ในด้านลูกค้าได้อย่างไร ใช้มาตรการรักษาความปลอดภัยโดยใช้ acls และ clps เพื่อปกป้องและจัดการการเข้าถึงข้อมูล ได้ดำเนินการฟังก์ชัน cloud code เพื่อรันตรรกะทางธุรกิจที่กำหนดเองบนฝั่งเซิร์ฟเวอร์ ตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ การจัดเก็บไฟล์ งานคลาวด์ที่กำหนดเวลา และ webhooks ที่รวมเข้าด้วยกัน สำรวจแผงผู้ดูแลระบบ back4app สำหรับการจัดการข้อมูลอย่างมีประสิทธิภาพ ด้วยแบ็กเอนด์ที่แข็งแกร่งนี้ คุณสามารถใช้ความสามารถของ htmx เพื่อสร้างแอปพลิเคชันเว็บที่ทันสมัยและมีพลศาสตร์ ซึ่งรวมการปรับปรุงด้านไคลเอนต์เข้ากับเฟรมเวิร์กด้านเซิร์ฟเวอร์ที่ทรงพลัง วิธีการแบบฟูลสแต็กนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยรวม โดยให้การอัปเดตหน้า html ที่ราบรื่น การเรนเดอร์ด้านเซิร์ฟเวอร์ที่มีประสิทธิภาพ และการรวมเข้ากันได้อย่างไร้รอยต่อทั่วทั้งเทคสแต็กของคุณ next steps ขยายแบ็กเอนด์นี้ เพื่อรวมโมเดลข้อมูลที่ซับซ้อนมากขึ้น, เอนจินเทมเพลตขั้นสูง, และตรรกะฝั่งเซิร์ฟเวอร์ที่กำหนดเอง สำรวจการรวมเข้ากับเฟรมเวิร์กด้านเซิร์ฟเวอร์ เพื่อสร้างประสบการณ์ด้านไคลเอนต์ที่มีพลศาสตร์และตอบสนองได้มากขึ้น ตรวจสอบเอกสารทางการของ back4app เพื่อการศึกษาเชิงลึกเกี่ยวกับความปลอดภัยขั้นสูง การปรับแต่งประสิทธิภาพ และการวิเคราะห์ เรียนรู้ต่อเกี่ยวกับ htmx และการพัฒนาเว็บสมัยใหม่ เพื่อสร้างแอปเว็บที่ใช้งานง่ายและตอบสนองได้ดี ซึ่งรวมเทคโนโลยีที่ดีที่สุดจากฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์ เมื่อโครงการถูกสร้างขึ้น คุณจะเห็นมันถูกแสดงในแดชบอร์ด back4app ของคุณ โครงการนี้จะเป็นพื้นฐานสำหรับการตั้งค่าด้านหลังทั้งหมดที่กล่าวถึงในบทแนะนำนี้ เชื่อมต่อผ่าน rest api back4app ใช้ parse platform ในการจัดการข้อมูลของคุณ, ให้ฟีเจอร์เรียลไทม์, จัดการการตรวจสอบผู้ใช้, และอื่น ๆ ในขณะที่ htmx เองเป็นไลบรารีฝั่งไคลเอนต์, การเชื่อมต่อส่วนหน้าของ htmx กับ back4app เกี่ยวข้องกับการทำ rest api calls โดยตรงจาก html และ javascript ของคุณ ดึงคีย์ parse ของคุณ ในแดชบอร์ด back4app ของคุณ, ไปที่ “การตั้งค่าแอป” หรือ “ความปลอดภัย & คีย์” เพื่อค้นหา application id , rest api key , และ parse server url (มักอยู่ในรูปแบบ https //parseapi back4app com ) ด้วยคีย์เหล่านี้, คุณสามารถใช้ htmx เพื่อเรียกใช้ endpoints ของ backend และปรับแต่งเทมเพลต html ของคุณตามนั้น ตัวอย่างเช่น, คุณอาจใช้คำขอ fetch ของ javascript ร่วมกับแอตทริบิวต์ htmx เพื่อโต้ตอบกับข้อมูลของคุณผ่านการเรียก rest ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การบันทึกและการค้นหาข้อมูล เมื่อคุณตั้งค่าโครงการ back4app ของคุณแล้ว, คุณสามารถเริ่มบันทึกและดึงข้อมูลโดยใช้ rest api calls, ซึ่งคุณสามารถเรียกใช้จากคำขอ htmx หรือ javascript ธรรมดา วิธีที่ง่ายที่สุดในการสร้างบันทึกคือการทำ post request ไปยังเซิร์ฟเวอร์ parse 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 ในทำนองเดียวกัน, คุณสามารถค้นหาข้อมูล curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo คุณยังสามารถใช้ graphql queries ตามที่จำเป็นเพื่อโต้ตอบกับฐานข้อมูลของคุณจากฝั่งไคลเอนต์ การออกแบบสคีมาและประเภทข้อมูล โดยค่าเริ่มต้น, parse อนุญาตให้ สร้างสคีมาแบบทันที , แต่คุณยังสามารถกำหนดคลาสและประเภทข้อมูลของคุณในแดชบอร์ด back4app เพื่อควบคุมมากขึ้น ไปที่ “ฐานข้อมูล” ในแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์ที่เกี่ยวข้อง, เช่น title (string) และ iscompleted (boolean) back4app รองรับประเภทข้อมูลต่างๆ เช่น string , number , boolean , object , date , file , pointer, array, relation , geopoint , และ polygon ใช้สิ่งเหล่านี้ในการออกแบบสคีมาที่แข็งแกร่งสำหรับแอปพลิเคชันที่ขับเคลื่อนด้วย htmx ของคุณ back4app มี ai agent ที่สามารถช่วยคุณออกแบบโมเดลข้อมูลของคุณ เปิด ai agent จากแดชบอร์ดแอปของคุณหรือในเมนู อธิบายโมเดลข้อมูลของคุณ ด้วยภาษาที่ง่าย (เช่น “กรุณาสร้าง todo app ใหม่ที่ back4app พร้อมสคีมาคลาสที่สมบูรณ์ ”) ให้ ai agent สร้างสคีมาสำหรับคุณ การใช้ ai agent สามารถช่วยประหยัดเวลาเมื่อคุณตั้งค่าโครงสร้างข้อมูลของคุณและรับประกันความสอดคล้องในแอปพลิเคชันของคุณ ข้อมูลเชิงสัมพันธ์ หากคุณมีข้อมูลเชิงสัมพันธ์ เช่น การเชื่อมโยงงานกับหมวดหมู่ คุณสามารถใช้ pointers หรือ relations ใน parse ผ่านการเรียก rest api ตัวอย่างเช่น การเพิ่มพอยเตอร์ // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } เมื่อคุณทำการค้นหา ให้รวมข้อมูลพอยเตอร์ตามที่จำเป็น // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } การค้นหาสด สำหรับการอัปเดตแบบเรียลไทม์ back4app มี การค้นหาสด ขณะที่ htmx มุ่งเน้นไปที่การเรนเดอร์ด้านเซิร์ฟเวอร์และแอตทริบิวต์ html การรวมการอัปเดตสดสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก เปิดใช้งานการค้นหาสด ในแดชบอร์ด back4app ของคุณภายใต้ การตั้งค่าเซิร์ฟเวอร์ ตรวจสอบให้แน่ใจว่า “การค้นหาสด” ถูกเปิดใช้งาน เริ่มต้นการสมัครสมาชิกการค้นหาสด โดยใช้ javascript พร้อมกับทริกเกอร์ htmx หากจำเป็น (หมายเหตุ การค้นหาสดมักต้องการ parse sdk; อย่างไรก็ตาม พวกมันยังสามารถทำงานร่วมกับ htmx โดยการอัปเดตส่วนต่าง ๆ ของหน้าเมื่อข้อมูลเปลี่ยนแปลง ตัวอย่างนี้แสดงให้เห็นถึงแนวคิด ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } การสมัครสมาชิกนี้สามารถกระตุ้นคำขอ htmx หรืออัปเดตเทมเพลต html แบบไดนามิกเพื่อสะท้อนการเปลี่ยนแปลงในฝั่งลูกค้า ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps กลไกความปลอดภัยของ back4app back4app ให้ความสำคัญกับความปลอดภัยโดยการจัดเตรียม access control lists (acls) และ class level permissions (clps) ฟีเจอร์เหล่านี้ช่วยให้คุณจำกัดว่าใครสามารถอ่านหรือเขียนข้อมูลได้ตามวัตถุหรือคลาส ทำให้มั่นใจได้ว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูลของคุณได้ access control lists (acls) an acl ถูกนำไปใช้กับวัตถุแต่ละรายการเพื่อตัดสินใจว่าผู้ใช้ บทบาท หรือสาธารณะสามารถดำเนินการอ่าน/เขียนได้หรือไม่ ตัวอย่างเช่น async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } เมื่อคุณบันทึกวัตถุ มันจะมี acl ที่ป้องกันไม่ให้ใครอ่านหรือแก้ไขนอกจากผู้ใช้ที่ระบุไว้ การอนุญาตระดับคลาส (clps) clps กำหนดการอนุญาตเริ่มต้นของคลาสทั้งหมด เช่น ว่าคลาสนั้นสามารถอ่านหรือเขียนได้สาธารณะหรือไม่ หรือเฉพาะบทบาทบางอย่างเท่านั้นที่สามารถเข้าถึงได้ ไปที่แดชบอร์ด back4app ของคุณ , เลือกแอปของคุณ และเปิด ฐานข้อมูล ส่วน เลือกคลาส (เช่น “todo”) เปิดการอนุญาตระดับคลาส แท็บ กำหนดค่าเริ่มต้นของคุณ เช่น “ต้องการการตรวจสอบสิทธิ์” สำหรับการอ่านหรือเขียน หรือ “ไม่มีการเข้าถึง” สำหรับสาธารณะ การอนุญาตเหล่านี้ตั้งค่าพื้นฐาน ในขณะที่ acls ปรับแต่งการอนุญาตสำหรับวัตถุแต่ละรายการ โมเดลความปลอดภัยที่แข็งแกร่งมักจะรวมทั้ง clps (ข้อจำกัดกว้าง) และ acls (ข้อจำกัดที่ละเอียดต่อวัตถุ) สำหรับข้อมูลเพิ่มเติมไปที่ แนวทางความปลอดภัยของแอป https //www back4app com/docs/security/parse security ขั้นตอนที่ 4 – การเขียนและการปรับใช้ฟังก์ชันคลาวด์ cloud code เป็นฟีเจอร์ของสภาพแวดล้อม parse server ที่อนุญาตให้คุณรันโค้ด javascript ที่กำหนดเองบนฝั่งเซิร์ฟเวอร์ โดยการเขียน cloud code คุณสามารถขยาย backend ของ back4app ด้วยตรรกะทางธุรกิจเพิ่มเติม การตรวจสอบความถูกต้อง ทริกเกอร์ และการรวมระบบที่ทำงานอย่างปลอดภัยและมีประสิทธิภาพบน parse server มันทำงานอย่างไร เมื่อคุณเขียน cloud code โดยทั่วไปคุณจะวางฟังก์ชัน javascript ของคุณ ทริกเกอร์ และโมดูล npm ที่จำเป็นใน main js ไฟล์นี้จะถูกนำไปใช้งานในโปรเจกต์ back4app ของคุณ ซึ่งจะถูกดำเนินการภายในสภาพแวดล้อมของ parse server // 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'); } }); นำ cloud code ของคุณไปใช้งานโดยใช้ back4app cli หรือผ่าน dashboard เรียกใช้ฟังก์ชันของคุณ จากอินเทอร์เฟซที่ปรับปรุงด้วย htmx คุณสามารถเรียกใช้ฟังก์ชัน cloud code ของคุณโดยใช้ javascript fetch และอัปเดตส่วนต่าง ๆ ของหน้า html ของคุณตามนั้น ตัวอย่างเช่น async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } คุณสามารถรวมการเรียกใช้ที่คล้ายกันภายในทริกเกอร์ htmx และแอตทริบิวต์ html ของคุณเพื่อสร้างพฤติกรรมที่ตอบสนองและมีพลศาสตร์บนฝั่งลูกค้า ซึ่งจะช่วยปรับปรุงประสบการณ์ผู้ใช้โดยรวม ขั้นตอนที่ 5 – การกำหนดค่าการตรวจสอบสิทธิ์ผู้ใช้ การตรวจสอบสิทธิ์ผู้ใช้ใน back4app back4app ใช้ parse user คลาสเป็นพื้นฐานสำหรับการตรวจสอบสิทธิ์ โดยค่าเริ่มต้น parse จะจัดการการเข้ารหัสรหัสผ่าน โทเค็นเซสชัน และการจัดเก็บข้อมูลอย่างปลอดภัย ในบริบทของแอปพลิเคชัน htmx การตรวจสอบสิทธิ์ผู้ใช้สามารถจัดการได้ผ่านการเรียก rest ที่เริ่มต้นโดยการส่งฟอร์ม html หรือคำขอ fetch ของ javascript การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ ตัวอย่างเช่น เพื่อสร้างผู้ใช้ใหม่ async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } ในทำนองเดียวกัน สำหรับการเข้าสู่ระบบของผู้ใช้ async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } การจัดการเซสชัน หลังจากการเข้าสู่ระบบที่สำเร็จ parse จะสร้างโทเค็นเซสชันที่คุณสามารถจัดเก็บและจัดการในแอปพลิเคชัน htmx ของคุณสำหรับคำขอที่ได้รับการตรวจสอบสิทธิ์ในภายหลัง การรวมการเข้าสู่ระบบด้วยโซเชียล ในขณะที่ htmx มุ่งเน้นไปที่แอตทริบิวต์ html และการโต้ตอบด้านเซิร์ฟเวอร์ การรวมการเข้าสู่ระบบด้วยโซเชียล เช่น google หรือ facebook ก็ยังสามารถทำได้โดยการเริ่มต้น oauth flows และจัดการ callbacks บนเซิร์ฟเวอร์ อ้างอิงถึง เอกสารการเข้าสู่ระบบด้วยโซเชียล https //www back4app com/docs/platform/sign in with apple สำหรับคำแนะนำโดยละเอียด การตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน เพื่อเปิดใช้งานการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน ไปที่การตั้งค่าอีเมล ในแดชบอร์ด back4app ของคุณ เปิดใช้งานการตรวจสอบอีเมล และกำหนดค่าเทมเพลตที่จำเป็น ใช้ fetch ในการไหลของ htmx ของคุณเพื่อกระตุ้นคำขอรีเซ็ตรหัสผ่านตามต้องการ ขั้นตอนที่ 6 – การจัดการการจัดเก็บไฟล์ การอัปโหลดและการดึงไฟล์ parse มีความสามารถในการจัดเก็บไฟล์ที่คุณสามารถใช้ผ่านการเรียก rest api จากแอปพลิเคชัน htmx ของคุณ ตัวอย่างเช่น การอัปโหลดภาพ async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } ความปลอดภัยของไฟล์ ควบคุมว่าใครสามารถอัปโหลดและเข้าถึงไฟล์ได้โดยการกำหนดการตั้งค่าความปลอดภัยใน back4app และตั้งค่า acl บนวัตถุไฟล์ตามที่จำเป็น ขั้นตอนที่ 7 – การกำหนดตารางงานด้วย cloud jobs cloud jobs cloud jobs ใน back4app ช่วยให้คุณกำหนดตารางงานประจำในแบ็กเอนด์ของคุณ เช่น การทำความสะอาดข้อมูลเก่าหรือการส่งอีเมลตามระยะเวลา งานเหล่านี้ทำงานด้านเซิร์ฟเวอร์และสามารถรวมเข้ากับเวิร์กโฟลว์ htmx ของคุณเมื่อจำเป็น // 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); } }); กำหนดตารางงานนี้ผ่านแดชบอร์ด back4app ภายใต้ การตั้งค่าแอป > การตั้งค่าเซิร์ฟเวอร์ > งานเบื้องหลัง ขั้นตอนที่ 8 – การรวม webhooks webhooks ช่วยให้แอป back4app ของคุณสามารถส่งคำขอ http ไปยังบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่าง นี่เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการรวมเข้ากับระบบของบุคคลที่สาม เช่น เกตเวย์การชำระเงิน เครื่องมือการตลาดทางอีเมล หรือแพลตฟอร์มการวิเคราะห์ ไปที่การตั้งค่า webhooks ในแดชบอร์ด back4app ของคุณ > เพิ่มเติม > webhooks และคลิกที่ เพิ่ม webhook ตั้งค่าจุดสิ้นสุด (เช่น, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) กำหนดทริกเกอร์ เพื่อระบุว่าเหตุการณ์ใดในคลาส back4app หรือฟังก์ชัน cloud code ของคุณจะทำให้เกิด webhook ตัวอย่างเช่น เพื่อแจ้งเตือนช่อง slack ทุกครั้งที่มีการสร้าง todo ใหม่ สร้างแอป slack ที่รับ webhook ขาเข้า คัดลอก url webhook ของ slack ในแดชบอร์ด back4app ของคุณ ตั้งค่าจุดสิ้นสุดเป็น url slack สำหรับเหตุการณ์ “บันทึกใหม่ในคลาส todo ” ถ้าต้องการ สามารถเพิ่ม http headers หรือ payloads ที่กำหนดเองตามต้องการ คุณยังสามารถกำหนด webhooks ใน cloud code โดยการทำคำขอ http ที่กำหนดเองในทริกเกอร์ ขั้นตอนที่ 9 – สำรวจแผงผู้ดูแล back4app แอป back4app admin app เป็นอินเทอร์เฟซการจัดการที่ใช้เว็บซึ่งออกแบบมาสำหรับผู้ใช้ที่ไม่ใช่เทคนิคเพื่อทำการดำเนินการ crud และจัดการงานข้อมูลประจำวันโดยไม่ต้องเขียนโค้ด มันให้โมเดลที่มุ่งเน้นผู้ใช้และใช้งานง่ายซึ่งช่วยให้การจัดการฐานข้อมูล การจัดการข้อมูลที่กำหนดเอง และการดำเนินงานในระดับองค์กรเป็นไปอย่างราบรื่น การเปิดใช้งานแอปผู้ดูแลระบบ เปิดใช้งาน โดยไปที่ app dashboard > more > admin app และคลิกที่ปุ่ม “enable admin app” สร้างผู้ใช้ผู้ดูแลระบบคนแรก (ชื่อผู้ใช้/รหัสผ่าน) ซึ่งจะสร้างบทบาทใหม่ (b4aadminuser) และคลาส (b4asetting, b4amenuitem, และ b4acustomfield) ในสคีมาของแอปของคุณโดยอัตโนมัติ เลือกซับโดเมน สำหรับการเข้าถึงอินเทอร์เฟซผู้ดูแลระบบและทำการตั้งค่าให้เสร็จสมบูรณ์ เข้าสู่ระบบ โดยใช้ข้อมูลประจำตัวผู้ดูแลระบบที่คุณสร้างขึ้นเพื่อเข้าถึงแดชบอร์ดแอปผู้ดูแลระบบใหม่ของคุณ เมื่อเปิดใช้งานแล้ว แอปผู้ดูแลระบบ back4app ทำให้การดู แก้ไข หรือลบระเบียนจากฐานข้อมูลของคุณเป็นเรื่องง่าย โดยไม่ต้องใช้ parse dashboard หรือโค้ดแบ็กเอนด์โดยตรง บทสรุป โดยการติดตามบทแนะนำที่ครอบคลุมนี้เกี่ยวกับวิธีการสร้างแบ็กเอนด์สำหรับ htmx โดยใช้ back4app คุณได้ สร้างแบ็กเอนด์ที่ปลอดภัยซึ่งออกแบบมาสำหรับแอปเว็บ htmx กำหนดค่าฐานข้อมูลด้วยสคีมาของคลาส ประเภทข้อมูล และความสัมพันธ์ รวมการค้นหาแบบเรียลไทม์และพิจารณาว่า live queries สามารถปรับปรุงประสบการณ์ผู้ใช้ในฝั่งไคลเอนต์ได้อย่างไร ใช้มาตรการด้านความปลอดภัยโดยใช้ acls และ clps เพื่อปกป้องและจัดการการเข้าถึงข้อมูล นำฟังก์ชัน cloud code มาใช้เพื่อเรียกใช้ตรรกะทางธุรกิจที่กำหนดเองในฝั่งเซิร์ฟเวอร์ ตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ การจัดเก็บไฟล์ งาน cloud ที่กำหนดเวลา และรวม webhooks สำรวจ back4app admin panel สำหรับการจัดการข้อมูลที่มีประสิทธิภาพ ด้วยแบ็กเอนด์ที่แข็งแกร่งนี้ คุณสามารถใช้ความสามารถของ htmx เพื่อสร้างแอปเว็บที่ทันสมัยและมีพลศาสตร์ซึ่งรวมการปรับปรุงฝั่งไคลเอนต์เข้ากับเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ที่ทรงพลัง แนวทางแบบฟูลสแต็กนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยรวม โดยให้การอัปเดตหน้า html ที่ราบรื่น การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่มีประสิทธิภาพ และการรวมเข้าด้วยกันอย่างราบรื่นทั่วทั้งเทคสแต็กของคุณ ขั้นตอนถัดไป ขยายแบ็กเอนด์นี้ เพื่อรวมโมเดลข้อมูลที่ซับซ้อนมากขึ้น เครื่องมือเทมเพลตขั้นสูง และตรรกะฝั่งเซิร์ฟเวอร์ที่กำหนดเอง สำรวจการรวมเข้ากับเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ เพื่อสร้างประสบการณ์ฝั่งไคลเอนต์ที่มีพลศาสตร์และตอบสนองมากขึ้น ตรวจสอบเอกสารทางการของ back4app สำหรับการเจาะลึกในด้านความปลอดภัยขั้นสูง การปรับแต่งประสิทธิภาพ และการวิเคราะห์ เรียนรู้ต่อเกี่ยวกับ htmx และการพัฒนาเว็บสมัยใหม่ เพื่อสร้างแอปเว็บที่ใช้งานง่ายและตอบสนองได้ซึ่งรวมเทคโนโลยีฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์ที่ดีที่สุด