Quickstarters
Cara Membangun Backend untuk Astro?

21min
Pendahuluan
Dalam panduan ini tentang cara membangun backend untuk astro, Anda akan belajar bagaimana cara membuat backend lengkap menggunakan Back4App untuk proyek Astro Anda. 
Kami akan membahas integrasi fitur penting Back4App, termasuk manajemen database, fungsi cloud, otentikasi, penyimpanan file, kueri waktu nyata, dan lainnya—menunjukkan pendekatan praktis untuk membangun aplikasi cepat dengan alat modern.
Dengan memanfaatkan lingkungan Back4App, Anda melewatkan banyak pekerjaan berat, seperti mengonfigurasi server atau menulis lapisan keamanan dari awal. 
Pengaturan ini menghemat waktu dan usaha Anda, sambil tetap memungkinkan Anda untuk mendefinisikan endpoint untuk logika sisi server yang kuat. 
Anda juga akan melihat bagaimana cara menggabungkan variabel lingkungan dalam proyek astro Anda, sehingga lebih mudah untuk menyimpan kredensial atau data sensitif lainnya dengan aman.
Setelah Anda selesai, Anda akan memiliki struktur backend yang dapat diskalakan untuk Astro dan tahu bagaimana menangani data dengan REST, GraphQL, otentikasi pengguna, peristiwa waktu nyata, dan lainnya. 
Anda akan siap untuk menambahkan logika Anda sendiri untuk kebutuhan dunia nyata sambil mempertahankan fondasi keamanan yang kuat.
Prasyarat
Akun Back4App dan proyek Back4App baru
Memulai dengan Back4app.﻿
Proyek Astro
Menyiapkan Astro - Pastikan Anda memiliki lingkungan pengembangan Astro dasar dan Node.js terinstal.
Node.js (versi 14 atau lebih tinggi) terinstal
Menginstal Node.js﻿
Pemahaman tentang konsep front-end dan server-side
Anda harus tahu cara membuat atau mengedit .astro file, menangani variabel lingkungan, dan melakukan permintaan post sederhana dengan fetch atau pustaka serupa.
Pastikan prasyarat ini sudah terpenuhi sebelum Anda mulai. Memiliki akun Back4App, lingkungan Astro, dan pengetahuan dasar JavaScript akan membantu Anda mengikuti tutorial ini dengan lebih lancar.
Langkah 1 – Membuat Proyek Baru di Back4App dan menghubungkan
Buat Proyek Baru:
Masuk ke akun Back4App Anda.
Klik Aplikasi Baru di dasbor Back4App Anda dan beri nama (misalnya, “Astro-Backend-Tutorial”).
Ambil Kredensial Back4App:
Di dasbor Back4App Anda, di bawah Pengaturan Aplikasi atau Keamanan & Kunci, catat ID Aplikasi, Kunci API REST, dan URL server (https://parseapi.back4app.com secara default). Variabel lingkungan ini akan digunakan dalam integrasi Astro Anda.
Menghubungkan Astro ke Back4App melalui API:
Karena kita tidak menggunakan Parse SDK secara langsung, kita akan membuat permintaan menggunakan fetch atau pustaka lain dari file Astro kita. Simpan kredensial Anda dalam variabel lingkungan untuk keamanan. Misalnya, dalam file .env :
Langkah 2 – Menyiapkan Database
Membuat Model Data
Buat Model Data Secara Manual:
Pergi ke dasbor Back4App Anda dan klik pada Database.
Buat kelas baru (misalnya, “Todo”), dan tambahkan field seperti title (String) dan isCompleted (Boolean).
Gunakan AI Agent untuk Membuat Model Data:
Buka AI Agent dari dasbor aplikasi Anda.
Deskripsikan skema Anda dalam bahasa yang sederhana (misalnya, “Buat aplikasi ToDo baru dengan kelas yang memiliki field title dan isCompleted.”).
Agen akan menghasilkan kelas dan field untuk Anda.
Membaca dan Menulis Data menggunakan REST API
Dengan model data Anda siap, mari kita definisikan sebuah endpoint di dalam komponen Astro atau file sisi server untuk menangani permintaan post dan permintaan baca. Misalnya, Anda mungkin membuat file seperti src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
Contoh ini menggunakan variabel lingkungan (import.meta.env.*) untuk menyimpan kredensial Back4App Anda. Kami mendefinisikan dua metode dalam satu file: export const post untuk membuat Todo, dan export const get untuk mengambil semua Todos. Anda dapat menyesuaikannya agar sesuai dengan struktur komponen tata letak Anda dan halaman situs lainnya.
Membaca dan Menulis Data menggunakan API GraphQL
Demikian pula, Anda dapat melakukan permintaan GraphQL dari halaman Astro Anda:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
Bekerja dengan Live Queries (opsional)
Live Queries memungkinkan pembaruan data secara real-time. Untuk menggunakannya, aktifkan Live Queries di dasbor Back4App dan konfigurasikan koneksi WebSocket. Namun, jika Anda membangun situs Astro statis, Anda mungkin mengintegrasikan pembaruan real-time melalui skrip sisi klien yang mengarah ke wss://YOUR_SUBDOMAIN.b4a.io. Live Queries dapat mendorong perubahan ke klien yang terhubung setiap kali catatan dibuat, diperbarui, atau dihapus.
Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP
ACLs (Daftar Kontrol Akses) dan CLPs (Izin Tingkat Kelas) adalah dasar untuk mengontrol akses data. Anda dapat mengonfigurasinya di bagian Database dari dasbor Back4App Anda. Sebagai contoh:
Batasi baca/tulis hanya untuk pengguna yang terautentikasi
Gunakan ACL untuk keamanan per-objek
Gunakan Pedoman Keamanan Back4App untuk memastikan data Anda tetap terlindungi. Anda juga dapat menetapkan aturan ini dari dasbor, memastikan bahwa bahkan jika panggilan REST Anda terbuka, hanya kredensial yang benar yang dapat memodifikasi atau melihat data.
Langkah 4 – Menulis Fungsi Cloud Code
Mengapa Cloud Code: Anda dapat memindahkan logika bisnis kunci ke sisi server, menghindari paparan rahasia atau kebutuhan untuk memelihara server terpisah. Cloud Code dapat mendengarkan pemicu (beforeSave, afterSave) atau menangani endpoint kustom.
Contoh
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Terapkan ini melalui Back4App CLI atau langsung di bagian Cloud Code dari dasbor Back4App Anda.
Memanggil Fungsi
Dari Astro, Anda dapat mendefinisikan titik akhir yang menggunakan fetch untuk mengakses Cloud Function Anda:
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
Langkah 5 – Mengonfigurasi Autentikasi
Back4App menggunakan kelas _User untuk menangani akun pengguna. Dengan REST, Anda dapat mengelola pendaftaran, login, atau logout. Misalnya, mendaftar pengguna baru:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
Anda dapat mereplikasi logika ini dari Astro dengan fetch dengan cara yang serupa, menggunakan variabel lingkungan. Setelah masuk, pengguna menerima token sesi untuk permintaan berikutnya.
Login Sosial
Untuk penyedia sosial (seperti Google atau Apple), gunakan titik akhir tertentu atau atur aliran OAuth. Lihat Dokumentasi Masuk dengan Apple atau panduan login sosial lainnya untuk mengintegrasikan autentikasi yang lebih canggih. Ini sangat berguna jika Anda ingin membiarkan orang masuk dari proyek astro Anda dengan sedikit gesekan.
Langkah 6 – Menangani Penyimpanan File
Untuk menyimpan file di Back4App, Anda mengirimkannya dengan REST API. Misalnya:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
Responsnya berisi URL file. Anda dapat menghubungkan URL tersebut ke sebuah catatan, seperti objek kelas Foto, memastikan Anda melacak referensi ke file di database Anda. Anda juga dapat mengontrol siapa yang dapat mengunggah dengan menyesuaikan pengaturan keamanan file dalam konfigurasi aplikasi Anda.
Langkah 7 – Verifikasi Email dan Reset Kata Sandi
Aktifkan Verifikasi Email: Di bawah Pengaturan Aplikasi di dasbor Back4App, aktifkan verifikasi email dan sesuaikan template email verifikasi Anda.
Atur Reset Kata Sandi: Demikian pula, konfigurasikan email reset kata sandi Anda dan pastikan kelas _User memiliki alamat email yang valid.
Alur: Ketika seorang pengguna meminta reset dari proyek astro Anda (melalui panggilan API), Back4App secara otomatis mengirimkan email dengan tautan aman untuk mengubah kata sandi mereka.
Langkah 8 – Penjadwalan Tugas dengan Pekerjaan Cloud
Gunakan Pekerjaan Cloud untuk menjadwalkan pemeliharaan berulang atau tugas lainnya:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Deploy kode Anda, lalu jadwalkan pekerjaan dari Pengaturan Server > Pekerjaan Latar Belakang di konsol Back4App. Ini mengotomatiskan tugas seperti membersihkan data, mengirim email, atau fungsi rutin lainnya yang ingin Anda jalankan pada interval tertentu.
Langkah 9 – Mengintegrasikan Webhooks
Webhooks memungkinkan Anda memberi tahu layanan eksternal ketika peristiwa tertentu terjadi di aplikasi Back4App Anda. Misalnya, Anda dapat mengirim data ke Slack setiap kali Todo baru dibuat:
Pergi ke More > WebHooks di dasbor Back4App Anda.
Tambahkan Webhook yang mengarah ke URL Slack.
Pilih peristiwa (misalnya, objek dibuat di kelas Todo).
Ini memungkinkan aliran permintaan/respons untuk menjaga sistem eksternal Anda tetap sinkron dengan data aplikasi berbasis Astro Anda.
Langkah 10 – Menjelajahi Panel Admin Back4App
Aplikasi Admin Back4App adalah panel manajemen yang ramah pengguna untuk pengeditan data. Ini sangat berguna bagi anggota tim non-teknis yang memerlukan akses langsung ke database Anda.
Aktifkan Aplikasi Admin di Lainnya > Aplikasi Admin.
Buat pengguna admin untuk akses yang aman.
Gunakan panel ini untuk dengan cepat melakukan operasi CRUD, memeriksa log, atau mengonfigurasi pengaturan yang lebih lanjut.
Kesimpulan
Anda telah berhasil membuat backend yang aman dan efisien untuk proyek Astro menggunakan Back4App. Sepanjang tutorial ini, Anda:
Menentukan dan mengonfigurasi skema basis data
Menggunakan API REST dan GraphQL untuk membaca dan menulis data
Mengamankan data dengan ACL, CLP, dan otentikasi pengguna
Memperluas logika melalui Cloud Code dan pekerjaan terjadwal
Menangani penyimpanan file untuk gambar atau dokumen
Mengintegrasikan Webhook untuk notifikasi eksternal
Menjelajahi panel admin untuk manajemen data yang disederhanakan
Pendekatan ini menekankan bagaimana membangun backend untuk Astro yang dapat diandalkan, skalabel, dan mudah untuk dipelihara. Dengan memanfaatkan variabel lingkungan, Anda menjaga kredensial Anda tetap aman sambil memastikan kode Anda tetap fleksibel untuk pertumbuhan di masa depan.
Langkah Selanjutnya
Terapkan proyek Astro Anda dengan platform hosting yang mendukung rendering sisi server atau lingkungan berbasis Node.
Tambahkan fitur canggih, seperti kontrol akses berbasis peran atau integrasi pembayaran khusus, menggunakan Cloud Code atau API eksternal.
Optimalkan kinerja dengan menerapkan strategi caching dan menyesuaikan pengaturan konten viewport Anda untuk pengalaman pengguna yang lebih baik.
Tinjau dokumen Back4App untuk mempelajari tentang log, analitik, dan langkah-langkah keamanan yang lebih canggih.
Terus eksplorasi fitur real-time dengan Live Queries dan bangun aplikasi yang benar-benar dinamis dan kolaboratif.
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Backend untuk Python?
BERIKUTNYA
Cara Membangun Backend untuk Deno?