Cara Membangun Backend untuk jQuery?
Dalam tutorial ini, Anda akan belajar cara membangun backend untuk jQuery menggunakan Back4app.
Kami akan mengintegrasikan fitur-fitur penting Back4app—manajemen database, Cloud Code, REST dan GraphQL API, otentikasi pengguna, dan kueri waktu nyata—untuk membuat backend yang aman dan dapat diskalakan.
Backend ini akan berkomunikasi dengan frontend berbasis jQuery Anda melalui panggilan AJAX dan metode jQuery umum lainnya.
Lingkungan intuitif Back4app mengurangi waktu yang dibutuhkan untuk mengatur server atau database.
Dengan mengikuti beberapa langkah sederhana, Anda akan mendapatkan pengalaman langsung dengan ACL, izin tingkat kelas, pemodelan data, unggahan file, dan banyak lagi.
Pada akhir tutorial ini, Anda akan memiliki dasar yang kuat untuk aplikasi berbasis jQuery yang sepenuhnya fungsional yang terhubung ke backend Back4app.
Anda akan siap untuk menambahkan logika kustom, mengintegrasikan API eksternal, dan mengamankan data Anda dengan kontrol yang lebih rinci.
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
- Akun Back4app dan proyek Back4app baru Memulai dengan Back4app. Jika Anda tidak memiliki akun, Anda dapat membuatnya secara gratis. Ikuti panduan di atas untuk menyiapkan proyek Anda.
- Node.js (versi 14 atau lebih tinggi) terinstal (Opsional) Meskipun Node.js tidak secara ketat diperlukan untuk jQuery di browser, Anda mungkin membutuhkannya untuk menjalankan server uji lokal atau menginstal paket npm jika Anda ingin melakukan pengujian lokal. Menginstal Node.js
Pastikan Anda memiliki semua prasyarat ini sebelum memulai, sehingga Anda dapat mengikuti dengan lancar saat membangun antarmuka depan berbasis jQuery dan menghubungkannya ke Back4app.
Untuk memulai proyek backend jQuery Anda, buat proyek Back4app baru:
- Masuk ke akun Back4app Anda.
- Klik tombol “Aplikasi Baru” di dasbor Back4app Anda.
- Beri nama aplikasi Anda (misalnya, “jQuery-Backend-Tutorial”).

Ketika proyek dibuat, Anda akan melihatnya di dasbor Back4app Anda. Ini akan menjadi dasar konfigurasi backend Anda untuk jQuery.
Back4app menggunakan Parse Platform untuk data dan fitur real-time. Jika Anda ingin menggunakan Parse SDK langsung dengan jQuery, Anda dapat memuatnya sebagai skrip di HTML Anda.
Ambil Kunci Parse Anda: Di dasbor Back4app, buka “Pengaturan Aplikasi” atau “Keamanan & Kunci” aplikasi Anda untuk menemukan:
- ID Aplikasi
- Kunci JavaScript
- URL Server Parse (biasanya https://parseapi.back4app.com)

Sertakan Parse SDK di file HTML Anda:
Dalam lingkungan jQuery, Anda dapat memuat jQuery terlebih dahulu, kemudian Parse, dan berinteraksi dengan objek Parse dalam skrip Anda. Koneksi ini memastikan bahwa semua panggilan data ke backend Back4app Anda melalui Parse Platform.
Setelah mengintegrasikan Parse SDK, Anda dapat menyimpan dan mengambil data dari database Back4app. Berikut adalah contoh sederhana untuk membuat dan mengambil objek “Todo” menggunakan jQuery dan Parse:
Anda juga dapat memanggil REST API menggunakan cURL:
Atau gunakan GraphQL:
Di dasbor Back4app:
- Pergi ke “Database.”
- Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom seperti judul (String) dan isCompleted (Boolean).

Anda juga dapat membiarkan Parse secara otomatis membuat kolom saat pertama kali Anda menyimpan objek.

Back4app memiliki AI Agent untuk pemodelan data:
- Buka AI Agent di dasbor atau menu aplikasi Anda.
- Deskripsikan model data Anda (misalnya, “Buat Aplikasi ToDo dengan skema kelas.”).
- Biarkan AI Agent menghasilkan skema.

Jika Anda memiliki sebuah Kategori yang terhubung dengan banyak Todo item, Anda dapat menggunakan Pointers atau Relations:
Untuk pembaruan waktu nyata di aplikasi jQuery Anda:
- Aktifkan Kueri Langsung di dasbor Back4app Anda di bawah Pengaturan Server.
- Inisialisasi langganan Kueri Langsung:
Langganan ini memberi tahu Anda secara real-time setiap kali objek “Todo” dibuat, diperbarui, atau dihapus.
ACL (Daftar Kontrol Akses) dan CLP (Izin Tingkat Kelas) memungkinkan Anda mengontrol siapa yang dapat membaca dan menulis data pada tingkat objek atau kelas.

Sebuah ACL ditetapkan pada objek individu untuk membatasi akses:

CLP mengontrol izin default untuk seluruh kelas:
- Di Dasbor Back4app Anda, buka Database bagian.
- Pilih kelas Anda (misalnya, “Todo”).
- Pergi ke Izin Tingkat Kelas tab untuk mengonfigurasi akses publik, terautentikasi, atau berbasis peran.

Gabungkan ACL untuk keamanan tingkat objek dengan CLP untuk pembatasan yang lebih luas. Untuk lebih jelasnya, lihat Pedoman Keamanan Aplikasi.
Kode Cloud menjalankan JavaScript kustom di sisi server, memungkinkan Anda menambahkan logika bisnis, validasi data, atau panggilan API eksternal.
Anda menempatkan kode Anda di main.js (atau file serupa), menyebarkannya ke Back4app, dan membiarkan Parse Server menangani eksekusi. Anda juga dapat menggunakan modul NPM untuk logika yang lebih kompleks.
- Melalui Back4app CLI:
- Melalui Dashboard:
- Di dashboard aplikasi Anda, pergi ke Cloud Code > Functions.
- Salin/tempel fungsi ke main.js.
- Klik Deploy.

Dari jQuery, Anda dapat memanggil Fungsi Cloud seperti ini:
Back4app menggunakan Parse.User kelas untuk autentikasi. Pengacakan kata sandi, token sesi, dan penyimpanan aman ditangani secara otomatis.
Anda dapat mengambil pengguna saat ini:
Keluar:
Back4app mendukung Google, Facebook, Apple, dan penyedia OAuth lainnya. Untuk lebih jelasnya, lihat Dokumentasi Login Sosial.
Gunakan Parse.File untuk menangani unggahan:
Anda dapat menyimpan file dalam kelas dengan menetapkannya ke sebuah field:
Mengambil URL file:
Anda dapat mengelola siapa yang dapat mengunggah file dengan memodifikasi pengaturan unggah file di Parse Server:
Anda dapat menjalankan tugas rutin, seperti menghapus data lama:
Di dasbor, pergi ke Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang untuk menjadwalkannya.

Webhooks memungkinkan aplikasi Anda mengirim permintaan HTTP ke layanan eksternal setiap kali peristiwa tertentu terjadi:
- Pergi ke More > WebHooks di dasbor Back4app Anda.
- Tambahkan Webhook baru dengan endpoint eksternal Anda.
- Konfigurasi pemicu untuk peristiwa seperti “rekaman baru di kelas Todo.”

Anda mungkin mengintegrasikan Slack atau gateway pembayaran seperti Stripe dengan mengirimkan data peristiwa melalui webhook.

Aplikasi Back4app Admin App menawarkan antarmuka berbasis web yang tidak teknis untuk operasi CRUD.
Pergi ke App Dashboard > More > Admin App dan klik “Enable Admin App”:

Buat Pengguna Admin Pertama, yang secara otomatis membuat peran baru (B4aAdminUser) dan kelas dalam skema Anda:

Pilih Subdomain untuk mengakses aplikasi admin:

Masuk menggunakan kredensial admin baru Anda:

Setelah diaktifkan, Aplikasi Admin ini memungkinkan Anda mengelola data atau memberikan akses kepada anggota tim tanpa perlu coding.
Dalam panduan ini, Anda telah belajar bagaimana membangun backend untuk jQuery dengan Back4app. Anda:
- Membuat proyek Back4app baru sebagai fondasi backend Anda.
- Mengatur database, termasuk desain skema dan hubungan data.
- Menggunakan ACL dan CLP untuk keamanan yang lebih terperinci.
- Menerapkan Cloud Code untuk logika sisi server yang kustom.
- Mengonfigurasi otentikasi pengguna, penyimpanan file, dan pembaruan waktu nyata.
- Menjadwalkan pekerjaan latar belakang dan mengintegrasikan webhook untuk layanan eksternal.
- Menjelajahi Panel Admin Back4app untuk manajemen data yang lebih sederhana.
Anda sekarang dilengkapi untuk memperluas pengaturan dasar jQuery + Back4app ini menjadi solusi produksi penuh. Lanjutkan mengintegrasikan fitur-fitur canggih seperti login sosial atau aturan keamanan yang lebih rinci. Selamat membangun aplikasi Anda yang dapat diskalakan dan berbasis data!
- Siap untuk produksi: Tambahkan izin berbasis peran yang canggih, strategi caching, dan penyetelan kinerja.
- Integrasikan API pihak ketiga: Untuk pembayaran, pesan, atau analitik.
- Jelajahi dokumen Back4app: Selami lebih dalam ke keamanan canggih, log, atau analitik.
- Buat aplikasi dunia nyata: Gunakan kesederhanaan jQuery yang dipadukan dengan layanan backend Back4app yang kuat.
