Quickstarters

Cara Membangun Backend untuk jQuery?

39min

Pendahuluan

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.

Prasyarat

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.
  • Lingkungan jQuery dasar Anda dapat mengunduh jQuery dari situs resmi .
  • 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
  • Keterampilan dasar JavaScript dan jQuery Dokumentasi Resmi jQuery.

Pastikan Anda memiliki semua prasyarat ini sebelum memulai, sehingga Anda dapat mengikuti dengan lancar saat membangun antarmuka depan berbasis jQuery dan menghubungkannya ke Back4app.

Langkah 1 – Menyiapkan Proyek Back4app

Buat Proyek Baru

Untuk memulai proyek backend jQuery Anda, buat proyek Back4app baru:

  1. Masuk ke akun Back4app Anda.
  2. Klik tombol “Aplikasi Baru” di dasbor Back4app Anda.
  3. Beri nama aplikasi Anda (misalnya, “jQuery-Backend-Tutorial”).
Document image


Ketika proyek dibuat, Anda akan melihatnya di dasbor Back4app Anda. Ini akan menjadi dasar konfigurasi backend Anda untuk jQuery.

Hubungkan SDK Parse

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)
Document image


Sertakan Parse SDK di file HTML Anda:

HTML


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.

Langkah 2 – Menyiapkan Database

Menyimpan dan Mengambil Data

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:

HTML


Anda juga dapat memanggil REST API menggunakan cURL:

Bash


Atau gunakan GraphQL:

GraphQL


Desain Skema dan Tipe Data

Di dasbor Back4app:

  1. Pergi ke “Database.”
  2. Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom seperti judul (String) dan isCompleted (Boolean).
Buat Kelas Baru
Buat Kelas Baru


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

Buat Kolom
Buat Kolom


Menggunakan AI Agent

Back4app memiliki AI Agent untuk pemodelan data:

  1. Buka AI Agent di dasbor atau menu aplikasi Anda.
  2. Deskripsikan model data Anda (misalnya, “Buat Aplikasi ToDo dengan skema kelas.”).
  3. Biarkan AI Agent menghasilkan skema.
Document image


Data Relasional

Jika Anda memiliki sebuah Kategori yang terhubung dengan banyak Todo item, Anda dapat menggunakan Pointers atau Relations:

HTML


Kueri Langsung

Untuk pembaruan waktu nyata di aplikasi jQuery Anda:

  1. Aktifkan Kueri Langsung di dasbor Back4app Anda di bawah Pengaturan Server.
  2. Inisialisasi langganan Kueri Langsung:
HTML


Langganan ini memberi tahu Anda secara real-time setiap kali objek “Todo” dibuat, diperbarui, atau dihapus.

Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP

Mekanisme Keamanan Back4app

ACL (Daftar Kontrol Akses) dan CLP (Izin Tingkat Kelas) memungkinkan Anda mengontrol siapa yang dapat membaca dan menulis data pada tingkat objek atau kelas.

Document image


Daftar Kontrol Akses (ACL)

Sebuah ACL ditetapkan pada objek individu untuk membatasi akses:

HTML

Edit ACL
Edit ACL


Izin Tingkat Kelas (CLP)

CLP mengontrol izin default untuk seluruh kelas:

  1. Di Dasbor Back4app Anda, buka Database bagian.
  2. Pilih kelas Anda (misalnya, “Todo”).
  3. Pergi ke Izin Tingkat Kelas tab untuk mengonfigurasi akses publik, terautentikasi, atau berbasis peran.
Document image


Gabungkan ACL untuk keamanan tingkat objek dengan CLP untuk pembatasan yang lebih luas. Untuk lebih jelasnya, lihat Pedoman Keamanan Aplikasi.

Langkah 4 – Menulis dan Menerapkan Fungsi Cloud

Kode Cloud menjalankan JavaScript kustom di sisi server, memungkinkan Anda menambahkan logika bisnis, validasi data, atau panggilan API eksternal.

Cara Kerjanya

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.

JS


Sebarkan Fungsi Anda

  • Melalui Back4app CLI:
Bash

  • Melalui Dashboard:
    1. Di dashboard aplikasi Anda, pergi ke Cloud Code > Functions.
    2. Salin/tempel fungsi ke main.js.
    3. Klik Deploy.
Document image


Memanggil Fungsi Anda

Dari jQuery, Anda dapat memanggil Fungsi Cloud seperti ini:

HTML


Langkah 5 – Mengonfigurasi Autentikasi Pengguna

Autentikasi Pengguna di Back4app

Back4app menggunakan Parse.User kelas untuk autentikasi. Pengacakan kata sandi, token sesi, dan penyimpanan aman ditangani secara otomatis.

Mengatur Autentikasi Pengguna

HTML


Manajemen Sesi

Anda dapat mengambil pengguna saat ini:

Text


Keluar:

Text


Integrasi Login Sosial

Back4app mendukung Google, Facebook, Apple, dan penyedia OAuth lainnya. Untuk lebih jelasnya, lihat Dokumentasi Login Sosial.

Langkah 6 – Menangani Penyimpanan File

Mengunggah dan Mengambil File

Gunakan Parse.File untuk menangani unggahan:

HTML


Anda dapat menyimpan file dalam kelas dengan menetapkannya ke sebuah field:

Text


Mengambil URL file:

Text


Keamanan File

Anda dapat mengelola siapa yang dapat mengunggah file dengan memodifikasi pengaturan unggah file di Parse Server:

JSON


Langkah 7 – Penjadwalan Tugas dengan Cloud Jobs

Cloud Jobs

Anda dapat menjalankan tugas rutin, seperti menghapus data lama:

JS


Di dasbor, pergi ke Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang untuk menjadwalkannya.

Menjadwalkan Pekerjaan Cloud
Menjadwalkan Pekerjaan Cloud


Langkah 8 – Mengintegrasikan Webhooks

Webhooks memungkinkan aplikasi Anda mengirim permintaan HTTP ke layanan eksternal setiap kali peristiwa tertentu terjadi:

  1. Pergi ke More > WebHooks di dasbor Back4app Anda.
  2. Tambahkan Webhook baru dengan endpoint eksternal Anda.
  3. Konfigurasi pemicu untuk peristiwa seperti “rekaman baru di kelas Todo.”
Menambahkan Webhook
Menambahkan Webhook


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

WebHook Sebelum Disimpan
WebHook Sebelum Disimpan


Langkah 9 – Menjelajahi Panel Admin Back4app

Aplikasi Back4app Admin App menawarkan antarmuka berbasis web yang tidak teknis untuk operasi CRUD.

Mengaktifkan Aplikasi Admin

Pergi ke App Dashboard > More > Admin App dan klik “Enable Admin App”:

Aktifkan Admin App
Aktifkan Admin App


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

Document image


Pilih Subdomain untuk mengakses aplikasi admin:

Document image


Masuk menggunakan kredensial admin baru Anda:

Document image


Setelah diaktifkan, Aplikasi Admin ini memungkinkan Anda mengelola data atau memberikan akses kepada anggota tim tanpa perlu coding.

Kesimpulan

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!

Langkah Selanjutnya

  • 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.