How to Build a Backend for htmx?

pendahuluan dalam tutorial ini, anda akan belajar bagaimana membangun backend lengkap untuk aplikasi web htmx menggunakan back4app kami akan membahas integrasi fitur fitur penting back4app seperti manajemen database, cloud code functions, rest dan graphql apis, otentikasi pengguna, penyimpanan file, dan kueri waktu nyata (live queries) untuk membuat backend yang aman, dapat diskalakan, dan kuat yang berkomunikasi dengan mulus dengan frontend htmx anda menggunakan htmx, sebuah pustaka javascript modern yang memanfaatkan atribut html untuk menangani interaksi sisi klien, dapat secara drastis meningkatkan pengalaman pengguna sambil fokus pada rendering sisi server dengan menggabungkan htmx dengan kerangka kerja sisi server dan mesin template yang kuat dari back4app, pengembang dapat dengan mudah dan efisien membuat aplikasi web full stack pada akhir tutorial ini, anda akan membangun backend yang disesuaikan untuk integrasi htmx, memungkinkan operasi data yang lancar dan meningkatkan pengalaman sisi klien dengan pembaruan halaman html dinamis tanpa memuat ulang halaman secara penuh prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app dan proyek back4app baru memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda tidak memiliki akun, anda dapat membuat satu secara gratis ikuti panduan di atas untuk menyiapkan proyek anda pengaturan htmx dasar sertakan pustaka htmx https //htmx org/ di halaman html anda menggunakan lingkungan pengembangan web pastikan anda memiliki pengaturan server lokal atau menggunakan kerangka kerja sisi server untuk menyajikan template html anda keterampilan dalam html, css, dan javascript dokumentasi htmx https //htmx org/docs/ untuk informasi lebih lanjut tentang atribut html dan pengembangan aplikasi web pastikan anda memiliki semua prasyarat ini sebelum anda mulai memiliki proyek back4app anda yang disiapkan dan lingkungan htmx lokal anda siap akan membantu anda mengikuti dengan lebih mudah langkah 1 – menyiapkan proyek back4app buat proyek baru langkah pertama dalam membangun backend htmx anda di back4app adalah membuat proyek baru jika anda belum membuat satu, ikuti langkah langkah ini masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor back4app anda beri nama aplikasi anda (misalnya, “htmx backend tutorial”) setelah proyek dibuat, anda akan melihatnya terdaftar di dasbor back4app anda proyek ini akan menjadi dasar untuk semua konfigurasi backend yang dibahas dalam tutorial ini connect via rest api back4app mengandalkan parse platform untuk mengelola data anda, menyediakan fitur waktu nyata, menangani otentikasi pengguna, dan lainnya sementara htmx sendiri adalah pustaka sisi klien, menghubungkan antarmuka depan htmx anda ke back4app melibatkan membuat panggilan rest api langsung dari html dan javascript anda ambil kunci parse anda di dasbor back4app anda, navigasikan ke bagian “pengaturan aplikasi” atau “keamanan & kunci” untuk menemukan id aplikasi , kunci api rest , dan url server parse , (sering dalam format https //parseapi back4app com ) dengan kunci ini, anda dapat menggunakan htmx untuk memanggil titik akhir backend anda dan memanipulasi template html anda sesuai kebutuhan misalnya, anda mungkin menggunakan permintaan fetch javascript yang digabungkan dengan atribut htmx untuk berinteraksi dengan data anda melalui panggilan rest step 2 – setting up the database saving and querying data dengan proyek back4app anda yang sudah disiapkan, anda sekarang dapat mulai menyimpan dan mengambil data menggunakan panggilan rest api, yang dapat anda picu dari permintaan htmx atau javascript biasa cara termudah untuk membuat catatan adalah dengan melakukan permintaan post ke server 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 demikian pula, anda dapat mengquery data 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 anda juga dapat menggunakan kueri graphql sesuai kebutuhan untuk berinteraksi dengan basis data anda dari sisi klien schema design and data types secara default, parse mengizinkan pembuatan skema secara langsung , tetapi anda juga dapat mendefinisikan kelas dan tipe data anda di dasbor back4app untuk kontrol yang lebih navigasikan ke bagian “database” di dasbor back4app anda buat kelas baru (misalnya, “todo”) dan tambahkan kolom yang relevan, seperti judul (string) dan iscompleted (boolean) back4app mendukung berbagai tipe data seperti string , number , boolean , object , date , file , pointer, array, relation , geopoint , dan polygon gunakan ini untuk merancang skema yang kuat untuk aplikasi yang didorong oleh htmx back4app menawarkan agen ai yang dapat membantu anda merancang model data anda buka agen ai dari dasbor aplikasi anda atau di menu jelaskan model data anda dalam bahasa yang sederhana (misalnya, “tolong, buat aplikasi todo baru di back4app dengan skema kelas yang lengkap ”) biarkan agen ai membuat skema untuk anda menggunakan agen ai dapat menghemat waktu anda saat mengatur arsitektur data anda dan memastikan konsistensi di seluruh aplikasi anda relational data jika anda memiliki data relasional, seperti menghubungkan tugas ke kategori, anda dapat menggunakan pointers atau relations di parse melalui panggilan rest api misalnya, menambahkan sebuah pointer // 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(); } saat anda melakukan kueri, sertakan data pointer sesuai kebutuhan // 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 untuk pembaruan waktu nyata, back4app menyediakan live queries sementara htmx fokus pada rendering sisi server dan atribut html, mengintegrasikan pembaruan langsung dapat meningkatkan pengalaman pengguna secara signifikan aktifkan kuery langsung di dasbor back4app anda di bawah pengaturan server pastikan “kuery langsung” diaktifkan inisialisasi langganan kuery langsung menggunakan javascript bersama dengan pemicu htmx jika perlu (catatan kuery langsung biasanya memerlukan parse sdk; namun, mereka masih dapat bekerja bersama htmx dengan memperbarui bagian halaman ketika data berubah contoh ini menunjukkan konsep tersebut ) 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; } langganan ini kemudian dapat memicu permintaan htmx atau memperbarui template html secara dinamis untuk mencerminkan perubahan di sisi klien step 3 – applying security with acls and clps back4app security mechanism back4app menganggap keamanan dengan serius dengan menyediakan daftar kontrol akses (acl) dan izin tingkat kelas (clp) fitur fitur ini memungkinkan anda membatasi siapa yang dapat membaca atau menulis data berdasarkan objek atau kelas, memastikan hanya pengguna yang berwenang yang dapat memodifikasi data anda access control lists (acls) sebuah acl diterapkan pada objek individu untuk menentukan pengguna, peran, atau publik mana yang dapat melakukan operasi baca/tulis sebagai contoh 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(); } ketika anda menyimpan objek, ia memiliki acl yang mencegah siapa pun kecuali pengguna yang ditentukan untuk membaca atau memodifikasinya class level permissions (clps) clps mengatur izin default seluruh kelas, seperti apakah kelas tersebut dapat dibaca atau ditulis secara publik, atau jika hanya peran tertentu yang dapat mengaksesnya pergi ke dasbor back4app anda , pilih aplikasi anda, dan buka bagian database pilih kelas (misalnya, “todo”) buka izin tingkat kelas tab konfigurasikan default anda, seperti “memerlukan autentikasi” untuk baca atau tulis, atau “tidak ada akses” untuk publik izin ini menetapkan dasar, sementara acl menyempurnakan izin untuk objek individu model keamanan yang kuat biasanya menggabungkan baik clp (pembatasan luas) dan acl (pembatasan per objek yang lebih rinci) untuk informasi lebih lanjut, kunjungi pedoman keamanan aplikasi https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions cloud code adalah fitur dari lingkungan parse server yang memungkinkan anda menjalankan kode javascript kustom di sisi server dengan menulis cloud code, anda dapat memperluas backend back4app anda dengan logika bisnis tambahan, validasi, pemicu, dan integrasi yang berjalan dengan aman dan efisien di parse server how it works ketika anda menulis cloud code, anda biasanya menempatkan fungsi javascript, pemicu, dan modul npm yang diperlukan di dalam main js file file ini kemudian diterapkan ke proyek back4app anda, yang dijalankan dalam lingkungan 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'); } }); terapkan cloud code anda menggunakan back4app cli atau melalui dashboard calling your function dari antarmuka yang ditingkatkan htmx, anda dapat memanggil fungsi cloud code anda menggunakan fetch javascript dan memperbarui bagian bagian halaman html anda sesuai kebutuhan misalnya 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); } anda dapat mengintegrasikan panggilan serupa dalam pemicu htmx dan atribut html anda untuk menciptakan perilaku dinamis dan responsif di sisi klien, meningkatkan pengalaman pengguna secara keseluruhan step 5 – configuring user authentication user authentication in back4app back4app memanfaatkan parse user kelas sebagai dasar untuk otentikasi secara default, parse menangani hashing kata sandi, token sesi, dan penyimpanan yang aman dalam konteks aplikasi htmx, otentikasi pengguna dapat dikelola melalui panggilan rest yang dimulai oleh pengiriman formulir html atau permintaan fetch javascript setting up user authentication misalnya, untuk membuat pengguna baru 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(); } demikian pula, untuk login pengguna 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 setelah login yang berhasil, parse membuat token sesi yang dapat anda simpan dan kelola dalam aplikasi htmx anda untuk permintaan terautentikasi berikutnya social login integration sementara htmx fokus pada atribut html dan interaksi sisi server, mengintegrasikan login sosial seperti google atau facebook masih dapat dicapai dengan memulai alur oauth dan menangani callback di sisi server lihat dokumentasi login sosial https //www back4app com/docs/platform/sign in with apple untuk panduan rinci email verification and password reset untuk mengaktifkan verifikasi email dan reset kata sandi navigasikan ke pengaturan email di dasbor back4app anda aktifkan verifikasi email dan konfigurasikan template yang diperlukan gunakan fetch dalam alur htmx anda untuk memicu permintaan reset kata sandi sesuai kebutuhan step 6 – handling file storage uploading and retrieving files parse mencakup kemampuan penyimpanan file yang dapat anda manfaatkan melalui panggilan rest api dari aplikasi htmx anda misalnya, untuk mengunggah gambar 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 kontrol siapa yang dapat mengunggah dan mengakses file dengan mengonfigurasi pengaturan keamanan di back4app dan mengatur acl pada objek file sesuai kebutuhan step 7 – scheduling tasks with cloud jobs cloud jobs pekerjaan cloud di back4app memungkinkan anda untuk menjadwalkan tugas rutin di backend anda, seperti membersihkan data lama atau mengirim email berkala pekerjaan ini dijalankan di sisi server dan dapat diintegrasikan dengan alur kerja htmx anda saat diperlukan // 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); } }); jadwalkan pekerjaan ini melalui dasbor back4app di bawah pengaturan aplikasi > pengaturan server > pekerjaan latar belakang step 8 – integrating webhooks webhooks memungkinkan aplikasi back4app anda untuk mengirim permintaan http ke layanan eksternal setiap kali peristiwa tertentu terjadi ini sangat berguna untuk integrasi dengan sistem pihak ketiga seperti gerbang pembayaran, alat pemasaran email, atau platform analitik navigasikan ke konfigurasi webhooks di dasbor back4app anda > lainnya > webhooks dan klik pada tambah webhook siapkan titik akhir (misalnya, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) konfigurasi pemicu untuk menentukan peristiwa mana di kelas back4app anda atau fungsi cloud code yang akan memicu webhook misalnya, untuk memberi tahu saluran slack setiap kali todo baru dibuat buat aplikasi slack yang menerima webhook masuk salin url webhook slack di dasbor back4app anda, atur endpoint ke url slack tersebut untuk acara “rekaman baru di kelas todo ” opsional, tambahkan header http atau payload kustom sesuai kebutuhan anda juga dapat mendefinisikan webhook di cloud code dengan membuat permintaan http kustom dalam pemicu step 9 – exploring the back4app admin panel the back4app admin app adalah antarmuka manajemen berbasis web yang dirancang untuk pengguna non teknis untuk melakukan operasi crud dan menangani tugas data rutin tanpa menulis kode ini menyediakan antarmuka yang berfokus pada model, ramah pengguna yang menyederhanakan administrasi basis data, manajemen data kustom, dan operasi tingkat perusahaan enabling the admin app aktifkan dengan pergi ke dasbor aplikasi > lainnya > aplikasi admin dan mengklik tombol “aktifkan aplikasi admin” buat pengguna admin pertama (nama pengguna/kata sandi), yang secara otomatis menghasilkan peran baru (b4aadminuser) dan kelas (b4asetting, b4amenuitem, dan b4acustomfield) dalam skema aplikasi anda pilih subdomain untuk mengakses antarmuka admin dan menyelesaikan pengaturan masuk menggunakan kredensial admin yang anda buat untuk mengakses dasbor aplikasi admin baru anda setelah diaktifkan, aplikasi admin back4app memudahkan untuk melihat, mengedit, atau menghapus catatan dari database anda tanpa memerlukan penggunaan langsung dari dasbor parse atau kode backend conclusion dengan mengikuti tutorial komprehensif ini tentang cara membangun backend untuk htmx menggunakan back4app, anda telah membuat backend yang aman yang disesuaikan untuk aplikasi web htmx mengonfigurasi basis data dengan skema kelas, tipe data, dan hubungan kueri waktu nyata terintegrasi dan mempertimbangkan bagaimana kueri langsung dapat meningkatkan pengalaman pengguna di sisi klien menggunakan langkah langkah keamanan dengan acl dan clp untuk melindungi dan mengelola akses data mengimplementasikan fungsi cloud code untuk menjalankan logika bisnis kustom di sisi server atur otentikasi pengguna, penyimpanan file, pekerjaan cloud terjadwal, dan webhook terintegrasi menjelajahi panel admin back4app untuk manajemen data yang efisien dengan backend yang kuat ini, anda sekarang dapat memanfaatkan kemampuan htmx untuk membuat aplikasi web dinamis dan modern yang menggabungkan peningkatan sisi klien dengan kerangka kerja sisi server yang kuat pendekatan full stack ini meningkatkan pengalaman pengguna secara keseluruhan, menyediakan pembaruan halaman html yang mulus, rendering sisi server yang efisien, dan integrasi yang mulus di seluruh tumpukan teknologi anda next steps perluas backend ini untuk menggabungkan model data yang lebih kompleks, mesin template yang canggih, dan logika sisi server kustom jelajahi integrasi dengan kerangka sisi server untuk menciptakan pengalaman sisi klien yang lebih dinamis dan responsif lihat dokumentasi resmi back4app untuk penjelasan lebih dalam tentang keamanan tingkat lanjut, penyetelan kinerja, dan analitik lanjutkan belajar tentang htmx dan pengembangan web modern untuk membangun aplikasi web yang ramah pengguna dan responsif yang menggabungkan yang terbaik dari teknologi sisi klien dan sisi server setelah proyek dibuat, anda akan melihatnya terdaftar di dasbor back4app anda proyek ini akan menjadi dasar untuk semua konfigurasi backend yang dibahas dalam tutorial ini koneksi melalui rest api back4app bergantung pada parse platform untuk mengelola data anda, menyediakan fitur real time, menangani otentikasi pengguna, dan lainnya sementara htmx sendiri adalah pustaka sisi klien, menghubungkan frontend htmx anda ke back4app melibatkan membuat panggilan rest api langsung dari html dan javascript anda ambil kunci parse anda di dasbor back4app anda, navigasikan ke bagian “pengaturan aplikasi” atau “keamanan & kunci” untuk menemukan id aplikasi , kunci rest api , dan url server parse (sering dalam format https //parseapi back4app com ) dengan kunci ini, anda dapat menggunakan htmx untuk memanggil endpoint backend anda dan memanipulasi template html anda sesuai kebutuhan misalnya, anda mungkin menggunakan permintaan fetch javascript yang dikombinasikan dengan atribut htmx untuk berinteraksi dengan data anda melalui panggilan rest langkah 2 – menyiapkan database menyimpan dan mengquery data dengan proyek back4app anda yang sudah disiapkan, anda sekarang dapat mulai menyimpan dan mengambil data menggunakan panggilan rest api, yang dapat anda picu dari permintaan htmx atau javascript biasa cara termudah untuk membuat catatan adalah dengan membuat permintaan post ke server 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 demikian pula, anda dapat mengquery data 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 anda juga dapat menggunakan query graphql sesuai kebutuhan untuk berinteraksi dengan database anda dari sisi klien desain skema dan tipe data secara default, parse memungkinkan pembuatan skema secara langsung , tetapi anda juga dapat mendefinisikan kelas dan tipe data anda di dasbor back4app untuk kontrol lebih navigasikan ke bagian “database” di dasbor back4app anda buat kelas baru (misalnya, “todo”) dan tambahkan kolom yang relevan, seperti judul (string) dan iscompleted (boolean) back4app mendukung berbagai jenis data seperti string , number , boolean , object , date , file , pointer, array, relation , geopoint , dan polygon gunakan ini untuk merancang skema yang kuat untuk aplikasi yang didorong oleh htmx anda back4app menawarkan ai agent yang dapat membantu anda merancang model data anda buka ai agent dari dasbor aplikasi anda atau di menu deskripsikan model data anda dalam bahasa sederhana (misalnya, “tolong, buat aplikasi todo baru di back4app dengan skema kelas yang lengkap ”) biarkan ai agent membuat skema untuk anda menggunakan ai agent dapat menghemat waktu anda saat mengatur arsitektur data anda dan memastikan konsistensi di seluruh aplikasi anda data relasional jika anda memiliki data relasional, seperti menghubungkan tugas ke kategori, anda dapat menggunakan pointers atau relations di parse melalui panggilan rest api misalnya, menambahkan pointer // 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(); } saat anda melakukan kueri, sertakan data pointer sesuai kebutuhan // 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(); } kueri langsung untuk pembaruan waktu nyata, back4app menyediakan kueri langsung sementara htmx fokus pada rendering sisi server dan atribut html, mengintegrasikan pembaruan langsung dapat meningkatkan pengalaman pengguna secara signifikan aktifkan kueri langsung di dasbor back4app anda di bawah pengaturan server pastikan “kueri langsung” diaktifkan inisialisasi langganan kueri langsung menggunakan javascript bersama dengan pemicu htmx jika perlu (catatan kueri langsung biasanya memerlukan parse sdk; namun, mereka masih dapat bekerja bersama htmx dengan memperbarui bagian halaman saat data berubah contoh ini menunjukkan konsep tersebut ) 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; } langganan ini kemudian dapat memicu permintaan htmx atau memperbarui template html secara dinamis untuk mencerminkan perubahan di sisi klien langkah 3 – menerapkan keamanan dengan acl dan clp mekanisme keamanan back4app back4app menganggap keamanan dengan serius dengan menyediakan daftar kontrol akses (acl) dan izin tingkat kelas (clp) fitur fitur ini memungkinkan anda membatasi siapa yang dapat membaca atau menulis data berdasarkan objek atau kelas, memastikan hanya pengguna yang berwenang yang dapat memodifikasi data anda daftar kontrol akses (acl) sebuah acl diterapkan pada objek individu untuk menentukan pengguna, peran, atau publik mana yang dapat melakukan operasi baca/tulis misalnya 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(); } ketika anda menyimpan objek, ia memiliki acl yang mencegah siapa pun kecuali pengguna yang ditentukan untuk membacanya atau memodifikasinya izin tingkat kelas (clp) clp mengatur izin default seluruh kelas, seperti apakah kelas tersebut dapat dibaca atau ditulis secara publik, atau jika hanya peran tertentu yang dapat mengaksesnya pergi ke dasbor back4app anda , pilih aplikasi anda, dan buka database bagian pilih kelas (misalnya, “todo”) buka izin tingkat kelas tab konfigurasikan default anda, seperti “memerlukan autentikasi” untuk baca atau tulis, atau “tidak ada akses” untuk publik izin ini menetapkan dasar, sementara acl menyempurnakan izin untuk objek individu model keamanan yang kuat biasanya menggabungkan baik clp (pembatasan luas) dan acl (pembatasan halus per objek) untuk informasi lebih lanjut, kunjungi pedoman keamanan aplikasi https //www back4app com/docs/security/parse security langkah 4 – menulis dan mengdeploy fungsi cloud cloud code adalah fitur dari lingkungan parse server yang memungkinkan anda menjalankan kode javascript kustom di sisi server dengan menulis cloud code, anda dapat memperluas backend back4app anda dengan logika bisnis tambahan, validasi, pemicu, dan integrasi yang berjalan dengan aman dan efisien di parse server cara kerjanya ketika anda menulis cloud code, anda biasanya menempatkan fungsi javascript, pemicu, dan modul npm yang diperlukan dalam sebuah main js file file ini kemudian diterapkan ke proyek back4app anda, yang dieksekusi dalam lingkungan 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'); } }); terapkan cloud code anda menggunakan back4app cli atau melalui dashboard memanggil fungsi anda dari antarmuka yang ditingkatkan htmx, anda dapat memanggil fungsi cloud code anda menggunakan fetch javascript dan memperbarui bagian dari halaman html anda sesuai kebutuhan misalnya 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); } anda dapat mengintegrasikan panggilan serupa dalam pemicu htmx dan atribut html anda untuk menciptakan perilaku dinamis dan responsif di sisi klien, meningkatkan pengalaman pengguna secara keseluruhan langkah 5 – mengonfigurasi autentikasi pengguna autentikasi pengguna di back4app back4app memanfaatkan kelas parse user sebagai dasar untuk autentikasi secara default, parse menangani hashing kata sandi, token sesi, dan penyimpanan yang aman dalam konteks aplikasi htmx, autentikasi pengguna dapat dikelola melalui panggilan rest yang dimulai oleh pengiriman formulir html atau permintaan fetch javascript mengatur autentikasi pengguna misalnya, untuk membuat pengguna baru 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(); } demikian pula, untuk login pengguna 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(); } manajemen sesi setelah login berhasil, parse membuat token sesi yang dapat anda simpan dan kelola dalam aplikasi htmx anda untuk permintaan terautentikasi selanjutnya integrasi login sosial sementara htmx berfokus pada atribut html dan interaksi sisi server, mengintegrasikan login sosial seperti google atau facebook masih dapat dicapai dengan memulai alur oauth dan menangani callback di sisi server lihat dokumentasi login sosial https //www back4app com/docs/platform/sign in with apple untuk panduan rinci verifikasi email dan reset kata sandi untuk mengaktifkan verifikasi email dan reset kata sandi navigasikan ke pengaturan email di dasbor back4app anda aktifkan verifikasi email dan konfigurasikan template yang diperlukan gunakan fetch dalam alur htmx anda untuk memicu permintaan reset kata sandi sesuai kebutuhan langkah 6 – menangani penyimpanan file mengunggah dan mengambil file parse mencakup kemampuan penyimpanan file yang dapat anda manfaatkan melalui panggilan rest api dari aplikasi htmx anda sebagai contoh, untuk mengunggah gambar 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(); } keamanan file kontrol siapa yang dapat mengunggah dan mengakses file dengan mengonfigurasi pengaturan keamanan di back4app dan mengatur acl pada objek file sesuai kebutuhan langkah 7 – menjadwalkan tugas dengan cloud jobs cloud jobs cloud jobs di back4app memungkinkan anda untuk menjadwalkan tugas rutin di backend anda, seperti membersihkan data lama atau mengirim email berkala tugas tugas ini dijalankan di sisi server dan dapat diintegrasikan dengan alur kerja htmx anda jika diperlukan // 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); } }); jadwalkan pekerjaan ini melalui dasbor back4app di bawah pengaturan aplikasi > pengaturan server > pekerjaan latar belakang langkah 8 – mengintegrasikan webhooks webhooks memungkinkan aplikasi back4app anda untuk mengirim permintaan http ke layanan eksternal setiap kali peristiwa tertentu terjadi ini sangat kuat untuk mengintegrasikan dengan sistem pihak ketiga seperti gateway pembayaran, alat pemasaran email, atau platform analitik navigasikan ke konfigurasi webhooks di dasbor back4app anda > lainnya > webhooks dan klik pada tambah webhook siapkan endpoint (misalnya, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) konfigurasi pemicu untuk menentukan peristiwa mana di kelas back4app anda atau fungsi cloud code yang akan memicu webhook misalnya, untuk memberi tahu saluran slack setiap kali todo baru dibuat buat aplikasi slack yang menerima webhook masuk salin url webhook slack di dasbor back4app anda, atur endpoint ke url slack tersebut untuk peristiwa “rekaman baru di kelas todo ” opsional, tambahkan header http atau payload kustom sesuai kebutuhan anda juga dapat mendefinisikan webhooks di cloud code dengan membuat permintaan http kustom dalam pemicu langkah 9 – menjelajahi panel admin back4app aplikasi back4app admin app adalah antarmuka manajemen berbasis web yang dirancang untuk pengguna non teknis untuk melakukan operasi crud dan menangani tugas data rutin tanpa menulis kode ini menyediakan antarmuka yang berfokus pada model dan ramah pengguna yang menyederhanakan administrasi basis data, manajemen data kustom, dan operasi tingkat perusahaan mengaktifkan aplikasi admin aktifkan dengan pergi ke dasbor aplikasi > lainnya > aplikasi admin dan mengklik tombol “aktifkan aplikasi admin” buat pengguna admin pertama (username/kata sandi), yang secara otomatis menghasilkan peran baru (b4aadminuser) dan kelas (b4asetting, b4amenuitem, dan b4acustomfield) dalam skema aplikasi anda pilih subdomain untuk mengakses antarmuka admin dan selesaikan pengaturannya masuk menggunakan kredensial admin yang anda buat untuk mengakses dasbor aplikasi admin baru anda setelah diaktifkan, aplikasi admin back4app memudahkan untuk melihat, mengedit, atau menghapus catatan dari basis data anda tanpa memerlukan penggunaan langsung dari dasbor parse atau kode backend kesimpulan dengan mengikuti tutorial komprehensif ini tentang cara membangun backend untuk htmx menggunakan back4app, anda telah membuat backend yang aman yang dirancang untuk aplikasi web htmx mengonfigurasi database dengan skema kelas, tipe data, dan hubungan mengintegrasikan kueri waktu nyata dan mempertimbangkan bagaimana kueri langsung dapat meningkatkan pengalaman pengguna di sisi klien menerapkan langkah langkah keamanan menggunakan acl dan clp untuk melindungi dan mengelola akses data mengimplementasikan fungsi cloud code untuk menjalankan logika bisnis kustom di sisi server mengatur otentikasi pengguna, penyimpanan file, pekerjaan cloud terjadwal, dan mengintegrasikan webhook menjelajahi panel admin back4app untuk manajemen data yang efisien dengan backend yang kuat ini, anda sekarang dapat memanfaatkan kemampuan htmx untuk membuat aplikasi web dinamis dan modern yang menggabungkan peningkatan sisi klien dengan kerangka kerja sisi server yang kuat pendekatan full stack ini meningkatkan pengalaman pengguna secara keseluruhan, memberikan pembaruan halaman html yang mulus, rendering sisi server yang efisien, dan integrasi yang mulus di seluruh tumpukan teknologi anda langkah selanjutnya perluas backend ini untuk menggabungkan model data yang lebih kompleks, mesin template yang lebih canggih, dan logika sisi server kustom jelajahi integrasi dengan kerangka kerja sisi server untuk menciptakan pengalaman sisi klien yang lebih dinamis dan responsif periksa dokumentasi resmi back4app untuk pendalaman lebih dalam tentang keamanan lanjutan, penyetelan kinerja, dan analitik terus belajar tentang htmx dan pengembangan web modern untuk membangun aplikasi web yang ramah pengguna dan responsif yang menggabungkan yang terbaik dari teknologi sisi klien dan sisi server