Quickstarters
Cara Membangun Backend untuk Gatsby?

36min
Pendahuluan
Dalam tutorial ini, Anda akan belajar cara membangun backend untuk Gatsby menggunakan Back4App. 
Kami akan menunjukkan kepada Anda cara mengintegrasikan fitur-fitur Back4App—seperti manajemen database, Cloud Code Functions, REST API dan kemampuan kueri GraphQL, otentikasi pengguna, dan kueri waktu nyata (Live Queries)—untuk membuat backend yang aman, dapat diskalakan, dan kuat yang dapat diakses dari situs Gatsby Anda.
Anda juga akan melihat bagaimana pengaturan cepat Back4App dan lingkungan yang intuitif dapat secara drastis mengurangi waktu dan usaha yang diperlukan untuk menangani tugas backend. 
Pada akhir tutorial, Anda akan tahu persis cara membangun backend untuk Gatsby yang menyimpan dan mengambil data, menangani otentikasi, mengintegrasikan fungsi cloud, dan banyak lagi. 
Ini mempersiapkan Anda untuk dengan mudah menggabungkan logika kustom, menambahkan API pihak ketiga, atau memperluas model data Anda tanpa harus khawatir tentang pemeliharaan server tradisional.
Apa yang Akan Anda Bangun dan Mengapa Ini Berharga
Integrasi Backend Lengkap: Anda akan membuat struktur backend yang dapat diskalakan untuk situs Gatsby Anda, menggabungkan Parse SDK, yang sempurna untuk kebutuhan data dinamis.
Penghematan Waktu: Back4App menyediakan alat seperti AI Agent, kueri waktu nyata, dan pekerjaan cloud yang mempercepat pembuatan backend.
Keterampilan yang Dapat Diperluas: Setelah selesai, Anda akan dapat menyesuaikan konsep-konsep ini untuk fitur Gatsby yang lebih canggih, seperti membuat halaman pada waktu build atau menghubungkan ke fungsi tanpa server untuk operasi dinamis.
Prasyarat
Akun Back4App dan proyek Back4App baru
Memulai dengan Back4app.
Jika Anda belum memiliki akun, Anda dapat membuatnya secara gratis. Ikuti panduan di atas untuk menyiapkan proyek Anda.
Lingkungan pengembangan Gatsby dasar
Anda dapat menyiapkannya dengan menginstal Gatsby CLI dan menjalankan:
Node.js (versi 14 atau lebih tinggi) terinstal
Menginstal Node.js﻿
Keterampilan dalam JavaScript dan konsep Gatsby
Dokumentasi Resmi Gatsby.
Baca dokumen atau tutorial pemula jika Anda baru mengenal Gatsby.
Pastikan Anda telah menyiapkan persyaratan ini. Ini memastikan pengalaman yang lancar saat Anda membuat file baru untuk konfigurasi atau menjalankan kueri GraphQL di lingkungan Gatsby Anda.
Langkah 1 – Menyiapkan Proyek Back4App
Buat Proyek Baru
Langkah pertama dalam cara membangun backend untuk Gatsby di Back4App adalah membuat proyek baru. Jika Anda belum melakukannya:
Masuk ke akun Back4App Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Beri nama aplikasi Anda (misalnya, “Gatsby-Backend-Tutorial”).
﻿
Setelah Anda membuat proyek, itu akan muncul di dasbor Back4App Anda. Kami akan menggunakan proyek ini sebagai inti dari backend kami.
Sambungkan Parse SDK
Back4App menggunakan Parse Platform untuk mengelola data Anda, menawarkan fitur waktu nyata, menangani otentikasi pengguna, dan banyak lagi. Untuk Gatsby, Anda masih bisa npm install parse dan kemudian mengintegrasikannya ke dalam file sumber Anda:
Ambil Kunci Parse Anda:
Di dasbor Back4App Anda, temukan Application ID dan JavaScript Key, biasanya di bawah “Pengaturan Aplikasi” atau “Keamanan & Kunci.” Anda juga akan menemukan Parse Server URL (sering kali sesuatu seperti https://parseapi.back4app.com).
﻿
Instal Parse SDK di situs Gatsby Anda:
Bash
npm install parse
npm install parse
﻿
Buat parseConfig.js di direktori root proyek Gatsby Anda atau di dalam src/:
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;
﻿
Setiap kali Anda mengimpor Parse dari parseConfig.js di file Gatsby Anda (misalnya, di gatsby-node.js, gatsby-browser.js, atau halaman/komponen), Anda akan memiliki instance yang sudah dikonfigurasi untuk melakukan kueri ke backend Back4App Anda.
Langkah 2 – Menyiapkan Database
Membuat Model Data
Di Back4App, data dikelola sebagai “kelas” (mirip dengan tabel) dengan bidang untuk data Anda. Mari kita buat kelas “Todo” untuk demonstrasi. Kami akan menunjukkan beberapa cara Anda dapat menyimpan dan mengambil data di Gatsby dengan Parse.
Navigasikan ke bagian “Database” di dasbor Back4app.
Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom seperti judul (String) dan isCompleted (Boolean).
Buat Kelas Baru
﻿
Atau Anda dapat membiarkan Parse secara otomatis membuat kolom saat objek pertama kali disimpan dari kode Anda.
Membuat Model Data dengan Agen AI
Back4App menyediakan Agen AI untuk membantu mendefinisikan struktur data Anda.
Buka Agen AI dari Dasbor Aplikasi Anda atau menu.
Deskripsikan model data Anda (misalnya, “Tolong buat skema aplikasi Todo baru dengan judul dan status penyelesaian.”).
Biarkan Agen AI menghasilkan skema untuk Anda.
﻿
Membaca dan Menulis Data Menggunakan SDK
Cuplikan contoh di Gatsby bisa terlihat seperti ini (misalnya, di halaman berbasis React atau di gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  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 Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  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 Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Membaca dan Menulis Data Menggunakan REST API
Sebagai alternatif, Anda dapat berinteraksi dengan database melalui REST API:
Bash
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
﻿
Membaca dan Menulis Data Menggunakan GraphQL API
Back4App juga mendukung GraphQL API, jadi Anda bisa menjalankan kueri atau mutasi seperti:
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
    }
  }
}
﻿
Ini sangat nyaman jika Anda ingin situs Gatsby Anda menarik data melalui kueri GraphQL saat waktu build.
Bekerja dengan Kueri Langsung
Gatsby adalah generator situs statis, tetapi Anda masih dapat mengatur koneksi real-time dinamis menggunakan Parse Kueri Langsung. Ini bisa berguna dalam kode yang dijalankan di browser atau dalam hook serverless Anda sendiri.
Aktifkan Kueri Langsung di dasbor Back4app Anda (di bawah Pengaturan Server).
Tambahkan URL Server Kueri Langsung ke parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
Berlangganan ke kelas untuk notifikasi real-time:
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Ini akan mendorong pembaruan data real-time ke front-end proyek Gatsby Anda.
Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP
Apa itu ACL dan CLP?
ACL (Daftar Kontrol Akses) memungkinkan Anda mendefinisikan izin pada objek individu, sementara CLP (Izin Tingkat Kelas) berlaku untuk seluruh kelas di database Back4App Anda.
﻿
Mengatur Izin Tingkat Kelas
Pergi ke Database di Dasbor Back4App Anda.
Pilih kelas (misalnya, Todo).
Klik tab Class-Level Permissions.
Konfigurasikan apakah kelas dapat dibaca publik, memerlukan autentikasi, atau dibatasi untuk peran tertentu.
Menggunakan ACL di Kode
Dalam kode Gatsby Anda, Anda dapat mendefinisikan ACL untuk setiap objek baru:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  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 Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  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);
  }
}
﻿
Langkah 4 – Menulis Fungsi Cloud Code
Mengapa Cloud Code?
Dengan Cloud Code, Anda dapat menambahkan logika sisi server kustom ke backend Back4App Anda. Ini sangat baik untuk aturan bisnis, transformasi REST API, pemicu, atau validasi data yang mungkin ingin Anda jaga tetap aman dan tidak di sisi klien.
Contoh Fungsi Cloud
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 };
});
﻿
Menyebarkan Kode Cloud
Melalui Back4App CLI: Instal dan konfigurasikan CLI, lalu jalankan b4a deploy.
Melalui Dashboard: Pergi ke Cloud Code > Functions di dashboard Anda, tempelkan kode Anda ke main.js, dan klik Deploy.
﻿
Memanggil Fungsi Anda
Dari Gatsby/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);
  }
}
﻿
Langkah 5 – Mengonfigurasi Autentikasi
Kelas Pengguna Parse
Back4App menggunakan kelas Parse.User untuk autentikasi. Secara default, ia menangani hashing kata sandi, sesi, dan penyimpanan yang aman.
Daftar dan Masuk di Gatsby
JS
import Parse from '../parseConfig';

// SignUp
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);
  }
}

// Login
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';

// SignUp
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);
  }
}

// Login
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);
  }
}
﻿
Setelah masuk, Anda dapat memanggil Parse.User.current() untuk memeriksa apakah seorang pengguna sudah masuk.
Masuk Sosial
Anda dapat mengintegrasikan Google, Facebook, Apple, dan penyedia lainnya dengan pengaturan tambahan. Baca lebih lanjut di Dokumentasi Masuk Sosial.﻿
Langkah 6 – Menangani Penyimpanan File
Mengunggah File
Gunakan Parse.File untuk mengunggah gambar atau file lainnya. Misalnya, dalam komponen Gatsby:
JS
async function uploadImage(file) {
  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 uploadImage(file) {
  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);
  }
}
﻿
Anda kemudian dapat melampirkan file ini ke Objek Parse, menyimpannya, dan kemudian mengambil URL file untuk ditampilkan di situs Gatsby Anda.
Langkah 7 – Verifikasi Email dan Reset Kata Sandi
Mengapa Ini Penting
Verifikasi email mengonfirmasi alamat email pengguna, dan alur reset kata sandi meningkatkan pengalaman pengguna. Keduanya mudah dikonfigurasi di Back4App.
Navigasikan ke Pengaturan Email aplikasi Anda di dasbor.
Aktifkan verifikasi email dan atur template email reset kata sandi.
Gunakan metode SDK Parse (misalnya, Parse.User.requestPasswordReset(email)) untuk memicu email reset.
Langkah 8 – Penjadwalan Tugas dengan Pekerjaan Cloud
Ikhtisar Pekerjaan Cloud
Gunakan Pekerjaan Cloud untuk mengotomatiskan tugas berulang, seperti menghapus data yang tidak terpakai atau mengirim ringkasan harian. Misalnya:
JS
// 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);
  }
});
// 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);
  }
});
﻿
Kemudian jadwalkan di bawah Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang.
Jadwal Pekerjaan Cloud
﻿
Langkah 9 – Mengintegrasikan Webhook
Webhook memungkinkan aplikasi Back4App Anda mengirim permintaan HTTP ke layanan eksternal ketika peristiwa tertentu terjadi—seperti pembuatan catatan baru.
Pergi ke dasbor Back4App Anda > Lainnya > WebHooks.
Tambahkan Webhook baru, dengan menentukan URL endpoint untuk layanan eksternal.
Pilih apa yang memicu Webhook (misalnya, afterSave pada kelas Todo).
Menambahkan Webhook
﻿
Anda juga dapat mengintegrasikan dengan Slack atau gateway pembayaran dengan menambahkan endpoint yang tepat.
Langkah 10 – Menjelajahi Panel Admin Back4App
Aplikasi Admin App Back4App adalah antarmuka yang berfokus pada model untuk manajemen data. Anda dapat memberikan akses aman kepada pengguna non-teknis untuk melakukan operasi CRUD pada kelas Anda.
Mengaktifkan Aplikasi Admin
Pergi ke Dasbor Aplikasi > Lainnya > Aplikasi Admin dan klik “Aktifkan Aplikasi Admin.”
Aktifkan Aplikasi Admin
﻿
Kemudian buat Pengguna Admin dan pilih subdomain untuk antarmuka admin.
﻿
Anda sekarang dapat masuk ke Aplikasi Admin Anda untuk melihat dan memodifikasi data tanpa menulis kode.
﻿
Kesimpulan
Dalam tutorial ini, Anda menemukan cara membangun backend untuk Gatsby menggunakan Back4App. Anda telah belajar untuk:
Mengonfigurasi database yang aman dengan kelas, bidang kustom, dan hubungan.
Menggunakan Parse SDK, bersama dengan REST API dan query GraphQL untuk transaksi data.
Mengatur ACL dan CLP untuk keamanan data.
Menulis dan menerapkan Cloud Code untuk memperluas logika bisnis dan pemicu.
Mengelola otentikasi pengguna dengan pendaftaran, login, reset kata sandi, dan verifikasi email.
Menangani penyimpanan file untuk gambar dan dokumen.
Menjadwalkan tugas otomatis dengan Cloud Jobs.
Mengintegrasikan layanan eksternal melalui Webhooks.
Memanfaatkan Admin App untuk administrasi data yang mudah.
Dengan keterampilan ini, situs Gatsby Anda dapat memanfaatkan fitur dinamis yang kuat sambil tetap memanfaatkan rendering statis Gatsby. Dari sini, Anda dapat:
Memperluas model data Anda dan menambahkan logika bisnis yang canggih.
Mengintegrasikan lebih banyak API eksternal untuk platform yang benar-benar komprehensif.
Mengikuti dokumen resmi Back4App untuk penjelasan lebih dalam tentang keamanan, kinerja, dan analitik.
Bereksperimen dengan fitur waktu build Gatsby—misalnya, “membuat halaman” dari data dinamis atau mengatur plugin “gatsby source” untuk backend Back4App Anda.
Sekarang Anda memiliki fondasi yang kuat untuk membangun aplikasi yang tahan masa depan dan berbasis data dengan Gatsby dan Back4App.
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Backend untuk Flutter?
BERIKUTNYA
Cara Membangun Backend untuk jQuery?