Quickstarters
Cara Membangun Backend untuk BackboneJS?

50min
Pendahuluan
Dalam tutorial ini, Anda akan belajar bagaimana membangun backend lengkap untuk aplikasi BackboneJS menggunakan Back4app.
Kami akan membahas integrasi fitur-fitur penting Back4app – seperti manajemen database, Fungsi Cloud Code, API REST dan GraphQL, otentikasi pengguna, dan kueri waktu nyata (Kueri Langsung) – untuk membuat backend yang aman, dapat diskalakan, dan kuat yang berkomunikasi dengan mulus dengan frontend BackboneJS Anda.
Anda juga akan melihat bagaimana pengaturan cepat Back4app dan lingkungan yang intuitif dapat secara drastis mengurangi waktu dan usaha dibandingkan dengan mengonfigurasi server dan database secara manual.
Sepanjang jalan, Anda akan mendapatkan pengalaman langsung dengan fungsionalitas kunci, termasuk fitur keamanan canggih, penjadwalan tugas dengan Pekerjaan Cloud, dan pengaturan webhook untuk integrasi eksternal.
Pada akhir tutorial ini, Anda akan siap untuk meningkatkan pengaturan dasar ini menjadi aplikasi siap produksi, atau dengan mudah menggabungkan logika kustom dan API pihak ketiga sesuai kebutuhan.
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 pengembangan BackboneJS dasar
Anda dapat menyiapkannya dengan menyertakan BackboneJS dalam proyek Anda. Pastikan Anda telah menginstal Node.js di mesin Anda jika Anda berencana untuk menyajikan atau mengemas aplikasi Backbone Anda secara lokal.
Node.js (versi 14 atau lebih tinggi) terinstal
Anda akan membutuhkan Node.js untuk menginstal paket npm dan menjalankan server pengembangan lokal. Menginstal Node.js﻿
Keterampilan dalam JavaScript dan konsep dasar BackboneJS
Dokumentasi Resmi BackboneJS.
Jika Anda baru mengenal Backbone, tinjau dokumen resmi atau tutorial pemula sebelum memulai.
Pastikan Anda memiliki semua prasyarat ini sebelum Anda mulai. Memiliki proyek Back4app Anda yang disiapkan dan lingkungan BackboneJS lokal Anda siap akan membantu Anda mengikuti dengan lebih mudah.
Langkah 1 – Menyiapkan Proyek Back4app
Buat Proyek Baru
Langkah pertama dalam membangun backend BackboneJS Anda di Back4app adalah membuat proyek baru. Jika Anda belum membuatnya, ikuti langkah-langkah berikut:
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Back4app Anda.
Beri nama aplikasi Anda (misalnya, “BackboneJS-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.
Sambungkan Parse SDK
Back4app bergantung pada Parse Platform untuk mengelola data Anda, menyediakan fitur waktu nyata, menangani otentikasi pengguna, dan lainnya. Menghubungkan aplikasi BackboneJS Anda ke Back4app melibatkan pemasangan paket npm parse (atau menyertakan skrip Parse SDK) dan menginisialisasinya dengan kredensial dari dasbor Back4app Anda.
Ambil Kunci Parse Anda:
Di dasbor Back4app Anda, navigasikan ke bagian “Pengaturan Aplikasi” atau “Keamanan & Kunci” aplikasi Anda untuk menemukan ID Aplikasi dan Kunci JavaScript. Anda juga akan menemukan URL Server Parse (sering dalam format https://parseapi.back4app.com).
﻿
Pasang Parse SDK di proyek Anda:
Bash
npm install parse
npm install parse
﻿
Jika Anda menggunakan Yarn, Anda dapat menginstalnya dengan:
Bash
yarn add parse
yarn add parse
﻿
Inisialisasi Parse di aplikasi BackboneJS Anda. Biasanya, Anda akan membuat file (misalnya, parseConfig.js) di direktori aplikasi Anda:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
File ini memastikan bahwa setiap kali Anda mengimpor atau merujuk Parse di tempat lain dalam aplikasi BackboneJS Anda, itu sudah dikonfigurasi sebelumnya untuk terhubung ke instance Back4app spesifik Anda.
Dengan menyelesaikan langkah ini, Anda telah membangun koneksi yang aman antara front-end BackboneJS Anda dan backend Back4app. Semua permintaan dan transaksi data dialirkan dengan aman melalui SDK ini, mengurangi kompleksitas panggilan REST atau GraphQL manual (meskipun Anda masih dapat menggunakannya jika diperlukan).
Langkah 2 – Menyiapkan Database
Menyimpan dan Mengambil Data
Dengan proyek Back4app Anda yang sudah disiapkan dan SDK Parse terintegrasi ke dalam aplikasi BackboneJS Anda, Anda sekarang dapat mulai menyimpan dan mengambil data. Di bawah ini adalah contoh sederhana menggunakan objek Parse dari struktur yang ramah Backbone.
Mendefinisikan Model:
JS
import Parse from './parseConfig';

// Define a Parse-powered Backbone Model
const TodoModel = Parse.Object.extend('Todo');

export default TodoModel;
import Parse from './parseConfig';

// Define a Parse-powered Backbone Model
const TodoModel = Parse.Object.extend('Todo');

export default TodoModel;
﻿
Membuat dan Menyimpan Data:
JS
import TodoModel from './TodoModel';

async function createTodoItem(title, isCompleted) {
  const todo = new TodoModel();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const TodoQuery = new Parse.Query(TodoModel);
  try {
    const results = await TodoQuery.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import TodoModel from './TodoModel';

async function createTodoItem(title, isCompleted) {
  const todo = new TodoModel();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const TodoQuery = new Parse.Query(TodoModel);
  try {
    const results = await TodoQuery.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Sebagai alternatif, Anda dapat menggunakan endpoint REST API Back4app:
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
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
﻿
Back4app juga menyediakan antarmuka GraphQL:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Berbagai opsi ini memungkinkan Anda untuk mengintegrasikan operasi data dengan cara yang paling sesuai dengan proses pengembangan Anda – apakah itu melalui Parse SDK, REST, atau GraphQL.
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 yang lebih.
Navigasikan ke bagian “Database” di dasbor Back4app Anda.
Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom yang relevan, seperti title (String) dan isCompleted (Boolean). 
Buat Kelas Baru
﻿
Back4app juga mendukung berbagai jenis data: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, dan Polygon. Anda dapat memilih jenis yang sesuai untuk setiap kolom. Jika Anda mau, Anda juga dapat membiarkan Parse secara otomatis membuat kolom-kolom ini saat Anda pertama kali menyimpan objek dari aplikasi BackboneJS Anda.
Buat Kolom
﻿
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 – katakanlah, sebuah Kategori objek yang menunjuk ke beberapa Todo item – Anda dapat menggunakan Penunjuk atau Relasi di Parse. Misalnya:
JS
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const TodoModel = Parse.Object.extend('Todo');
  const todo = new TodoModel();

  // Construct a pointer to the Category
  const Category = Parse.Object.extend('Category');
  const categoryPointer = new Category();
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}

async function fetchTodosWithCategory() {
  const TodoModel = Parse.Object.extend('Todo');
  const query = new Parse.Query(TodoModel);
  // Include pointer data
  query.include('category');

  try {
    return await query.find();
  } catch (err) {
    console.error('Error fetching Todos with category:', err);
  }
}
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const TodoModel = Parse.Object.extend('Todo');
  const todo = new TodoModel();

  // Construct a pointer to the Category
  const Category = Parse.Object.extend('Category');
  const categoryPointer = new Category();
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}

async function fetchTodosWithCategory() {
  const TodoModel = Parse.Object.extend('Todo');
  const query = new Parse.Query(TodoModel);
  // Include pointer data
  query.include('category');

  try {
    return await query.find();
  } catch (err) {
    console.error('Error fetching Todos with category:', err);
  }
}
﻿
Ketika Anda memanggil include('category'), Anda mengambil detail kategori bersamaan dengan setiap Todo, membuat data relasional Anda dapat diakses dengan mudah.
Kueri Langsung
Untuk pembaruan waktu nyata, Back4app menyediakan Live Queries. Dalam aplikasi BackboneJS, Anda dapat berlangganan untuk perubahan dalam kelas tertentu:
Aktifkan Live Queries di dasbor Back4app Anda di bawah Pengaturan Server. Pastikan “Live Queries” diaktifkan.
Inisialisasi Langganan Live Query dalam kode Anda:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
﻿
JS
import Parse from './parseConfig';

async function subscribeToTodos(callback) {
  const TodoQuery = new Parse.Query('Todo');
  const subscription = await TodoQuery.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;
}
import Parse from './parseConfig';

async function subscribeToTodos(callback) {
  const TodoQuery = new Parse.Query('Todo');
  const subscription = await TodoQuery.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;
}
﻿
Dengan berlangganan, Anda menerima notifikasi waktu nyata setiap kali Todo baru dibuat, diperbarui, atau dihapus. Fitur ini sangat berharga untuk aplikasi kolaboratif atau dinamis di mana banyak pengguna perlu melihat data terbaru tanpa menyegarkan halaman.
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:
JS
async function createPrivateTodo(title, ownerUser) {
  const TodoModel = Parse.Object.extend('Todo');
  const todo = new TodoModel();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const TodoModel = Parse.Object.extend('Todo');
  const todo = new TodoModel();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
Ketika Anda menyimpan objek, ia memiliki ACL yang mencegah siapa pun kecuali pengguna yang ditentukan untuk membaca atau memodifikasinya.
Edit ACL
﻿
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 memperhalus izin untuk objek individu. Model keamanan yang kuat biasanya menggabungkan baik CLP (pembatasan luas) dan ACL (pembatasan per objek yang lebih halus). Untuk informasi lebih lanjut, kunjungi Pedoman Keamanan Aplikasi.﻿
Langkah 4 – Menulis dan Menerapkan Fungsi Cloud
Cloud Code adalah fitur dari lingkungan Parse Server yang memungkinkan Anda menjalankan kode JavaScript kustom di sisi server – tanpa perlu mengelola server atau infrastruktur Anda. 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 di dalam sebuah main.js (atau app.js) file. File ini kemudian diterapkan ke proyek Back4app Anda, yang dieksekusi dalam lingkungan Parse Server.
Karena fungsi dan pemicu ini berjalan di server, Anda dapat mempercayainya untuk menangani logika rahasia, memproses data sensitif, atau melakukan panggilan API yang hanya untuk backend – proses yang mungkin tidak ingin Anda ekspos langsung ke klien.
Semua Cloud Code untuk aplikasi Back4app Anda berjalan di dalam Parse Server yang dikelola oleh Back4app, jadi Anda tidak perlu khawatir tentang pemeliharaan server, penskalaan, atau penyediaan. Setiap kali Anda memperbarui dan menerapkan file main.js Anda, Parse Server yang sedang berjalan akan diperbarui dengan kode terbaru Anda.
JS
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
Dengan kemampuan untuk menginstal dan menggunakan modul NPM, Cloud Code menjadi sangat fleksibel, memungkinkan Anda untuk mengintegrasikan dengan API eksternal, melakukan transformasi data, atau mengeksekusi logika sisi server yang kompleks.
Kasus Penggunaan Umum
Logika Bisnis: Misalnya, Anda dapat menghitung skor pengguna dalam permainan dengan mengagregasi beberapa properti objek, dan kemudian menyimpan data tersebut secara otomatis.
Validasi Data: Pastikan bahwa bidang tertentu ada atau bahwa pengguna memiliki izin yang benar sebelum menyimpan atau menghapus catatan.
Pemicu: Lakukan tindakan ketika data berubah (misalnya, kirim notifikasi ketika pengguna memperbarui profil mereka).
Integrasi: Terhubung dengan API atau layanan pihak ketiga. Misalnya, Anda dapat mengintegrasikan dengan gerbang pembayaran, notifikasi Slack, atau platform pemasaran email langsung dari Cloud Code.
Penegakan Keamanan: Tambahkan lapisan keamanan tambahan dengan memvalidasi dan membersihkan parameter input dalam fungsi Cloud Code Anda.
Terapkan Fungsi Anda
Berikut adalah fungsi Cloud Code sederhana yang menghitung panjang string teks yang dikirim dari klien:
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Mengdeploy melalui Back4app CLI:
1 - Instal CLI:
Untuk Linux/MacOS:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Untuk Windows:
Unduh file b4a.exe dari halaman rilis.
2 - Konfigurasi kunci akun Anda:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Deploy kode cloud Anda:
Bash
b4a deploy
b4a deploy
﻿
Mengdeploy melalui Dashboard:
Di dasbor aplikasi Anda, pergi ke Cloud Code > Functions.
Salin/tempel fungsi ke dalam editor main.js.
Klik Deploy.
﻿
Memanggil Fungsi Anda
Dari BackboneJS menggunakan Parse SDK:
JS
import Parse from './parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from './parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
Anda juga dapat memanggilnya melalui REST:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
﻿
Atau melalui GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Fleksibilitas ini memungkinkan Anda untuk mengintegrasikan logika kustom Anda ke dalam frontend BackboneJS Anda atau klien lain yang mendukung REST atau GraphQL.
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. Ini berarti Anda tidak perlu mengatur alur keamanan yang kompleks secara manual.
Mengatur Autentikasi Pengguna
Dalam aplikasi BackboneJS, Anda dapat membuat pengguna baru dengan:
JS
import Parse from './parseConfig';

async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
import Parse from './parseConfig';

async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
Melalui REST, login mungkin terlihat seperti:
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -G \
  --data-urlencode 'username=alice' \
  --data-urlencode 'password=secret123' \
  https://parseapi.back4app.com/login
﻿
Manajemen Sesi
Setelah login berhasil, Parse membuat sebuah token sesi yang disimpan dalam objek pengguna. Di aplikasi Anda, Anda dapat mengakses pengguna yang saat ini masuk:
JS
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
﻿
Parse secara otomatis menangani sesi berbasis token di latar belakang, tetapi Anda juga dapat mengelola atau mencabutnya secara manual. Ini berguna ketika Anda perlu keluar:
JS
await Parse.User.logOut();
await Parse.User.logOut();
﻿
Integrasi Login Sosial
Back4app dan Parse dapat terintegrasi dengan penyedia OAuth populer, seperti Google atau Facebook, dengan menginstal paket tambahan atau menggunakan adaptor yang ada. Instruksi rinci bervariasi, jadi silakan merujuk ke Dokumentasi Login Sosial.﻿
JS
// Example: Facebook login (conceptual example)
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
// Example: Facebook login (conceptual example)
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
﻿
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 untuk memastikan pengguna baru memverifikasi kepemilikan alamat email mereka.
Konfigurasikan alamat Dari, template email, dan domain kustom Anda jika diinginkan.
Fitur-fitur ini meningkatkan keamanan akun dan pengalaman pengguna dengan memvalidasi kepemilikan email pengguna dan menyediakan metode pemulihan kata sandi yang aman.
Langkah 6 – Menangani Penyimpanan File
Mengunggah dan Mengambil File
Parse mencakup kelas Parse.File untuk menangani unggahan file, yang disimpan dengan aman oleh Back4app:
JS
import Parse from './parseConfig';

async function uploadImage(file) {
  // file is typically from an <input type="file" ... /> in a webpage
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}

async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
import Parse from './parseConfig';

async function uploadImage(file) {
  // file is typically from an <input type="file" ... /> in a webpage
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}

async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
﻿
Mengambil URL file sangatlah sederhana:
JS
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
// Use imageUrl in your Backbone View or HTML element
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
// Use imageUrl in your Backbone View or HTML element
﻿
Keamanan File
Parse Server menyediakan konfigurasi fleksibel untuk mengelola keamanan unggahan file. Misalnya:
JSON
{
    "fileUpload": {
        "enableForPublic": true,
        "enableForAnonymousUser": true,
        "enableForAuthenticatedUser": true
    }
}
{
    "fileUpload": {
        "enableForPublic": true,
        "enableForAnonymousUser": true,
        "enableForAuthenticatedUser": true
    }
}
﻿
enableForPublic: Ketika diatur ke true, memungkinkan siapa saja, terlepas dari status otentikasi, untuk mengunggah file.
enableForAnonymousUser: Mengontrol apakah pengguna anonim (tamu) dapat mengunggah file.
enableForAuthenticatedUser: Menentukan apakah hanya pengguna yang terautentikasi yang dapat mengunggah file.
Langkah 7 – Menjadwalkan Tugas dengan Cloud Jobs
Cloud Jobs
Cloud Jobs di Back4app memungkinkan Anda untuk menjadwalkan dan menjalankan tugas rutin di backend Anda – seperti membersihkan data lama atau mengirim email ringkasan harian. Sebuah Cloud Job yang khas mungkin terlihat seperti ini:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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);
  }
});
﻿
Terapkan Cloud Code Anda dengan pekerjaan baru (melalui CLI atau dasbor).
Pergi ke Dasbor Back4app > Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang.
Jadwalkan pekerjaan untuk dijalankan setiap hari atau pada interval yang sesuai dengan kebutuhan Anda.
Jadwal Pekerjaan Cloud
﻿
Pekerjaan Cloud memungkinkan Anda untuk mengotomatiskan pemeliharaan latar belakang atau proses berkala lainnya – tanpa memerlukan intervensi manual.
Langkah 8 – Mengintegrasikan Webhook
Webhooks memungkinkan aplikasi Back4app Anda untuk mengirim permintaan HTTP ke layanan eksternal setiap kali peristiwa tertentu terjadi. Ini sangat berguna untuk mengintegrasikan dengan sistem pihak ketiga seperti gerbang pembayaran (misalnya, Stripe), alat pemasaran email, atau platform analitik.
Navigasikan ke konfigurasi Webhooks di dasbor Back4app Anda > Lainnya > WebHooks dan kemudian klik pada Tambah Webhook.
Siapkan endpoint (misalnya, https://your-external-service.com/webhook-endpoint).
Konfigurasikan pemicu untuk menentukan peristiwa mana di kelas Back4app Anda atau fungsi Cloud Code yang akan memicu webhook.
Menambahkan Webhook
﻿
Sebagai contoh, jika Anda ingin 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.”
Anda juga dapat menambahkan header HTTP atau payload kustom jika diperlukan.
Anda juga dapat mendefinisikan Webhook di Cloud Code dengan membuat permintaan HTTP kustom dalam pemicu seperti beforeSave, afterSave:
BeforeSave WebHook
﻿
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 berbasis model, ramah pengguna yang menyederhanakan administrasi database, manajemen data kustom, dan operasi tingkat perusahaan.
Mengaktifkan Aplikasi Admin
Aktifkan dengan pergi ke App Dashboard > More > Admin App dan mengklik tombol “Aktifkan Aplikasi Admin”.
Aktifkan Aplikasi Admin
﻿
Buat Pengguna Admin Pertama (username/password), 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 database Anda – tanpa memerlukan penggunaan langsung dari Dasbor Parse atau kode backend. Dengan kontrol akses yang dapat dikonfigurasi, Anda dapat dengan aman membagikan antarmuka ini dengan anggota tim atau klien yang membutuhkan cara yang jelas dan mudah untuk mengelola data.
Kesimpulan
Dengan mengikuti tutorial komprehensif ini, Anda telah:
Membuat backend yang aman untuk aplikasi BackboneJS di Back4app.
Mengonfigurasi database dengan skema kelas, tipe data, dan hubungan.
Mengintegrasikan kueri waktu nyata (Kueri Langsung) untuk pembaruan data segera.
Menerapkan langkah-langkah keamanan menggunakan ACL dan CLP untuk melindungi dan mengelola akses data.
Menerapkan Cloud Code fungsi untuk menjalankan logika bisnis kustom di sisi server.
Mengatur otentikasi pengguna dengan dukungan untuk verifikasi email dan pengaturan ulang kata sandi.
Mengelola unggahan file dan pengambilan, dengan kontrol keamanan file opsional.
Menjadwalkan Cloud Jobs untuk tugas latar belakang otomatis.
Menggunakan Webhooks untuk mengintegrasikan dengan layanan eksternal.
Menjelajahi Panel Admin Back4app untuk manajemen data.
Dengan frontend BackboneJS yang solid dan backend Back4app yang kuat, Anda sekarang siap untuk mengembangkan aplikasi yang kaya fitur, dapat diskalakan, dan aman. Teruslah menjelajahi fungsionalitas yang lebih canggih, integrasikan logika bisnis Anda, dan manfaatkan kekuatan Back4app untuk menghemat waktu Anda dalam administrasi server dan database. Selamat coding!
Langkah Selanjutnya
Bangun aplikasi BackboneJS yang siap produksi dengan memperluas backend ini untuk menangani model data yang lebih kompleks, strategi caching, dan optimasi kinerja.
Integrasikan fitur-fitur canggih seperti alur autentikasi khusus, kontrol akses berbasis peran, atau API eksternal (seperti gerbang pembayaran).
Periksa dokumentasi resmi Back4app untuk penjelasan lebih dalam tentang keamanan canggih, penyetelan kinerja, dan analisis log.
Jelajahi tutorial lainnya tentang aplikasi obrolan waktu nyata, dasbor IoT, atau layanan berbasis lokasi. Anda dapat menggabungkan teknik yang dipelajari di sini dengan
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Backend untuk MeteorJS?
BERIKUTNYA
Bagaimana Membangun Backend untuk EmberJS?