Quickstarters
Cara Membuat Aplikasi CRUD dengan Astro?

38min
Ikhtisar
Dalam panduan ini, Anda akan belajar cara membuat aplikasi web CRUD (buat, baca, perbarui, dan hapus) menggunakan Astro.
Tutorial ini memandu Anda melalui pengaturan proyek Back4app—backend kami yang kuat—dan merancang struktur data yang mendukung operasi dasar.
Kami kemudian akan membangun frontend Astro yang berkomunikasi dengan Back4app melalui API REST/GraphQL, memastikan manajemen data yang aman dan efisien.
Pada akhir panduan ini, Anda akan memiliki aplikasi web siap produksi lengkap dengan otentikasi pengguna dan penanganan data yang aman.
Apa yang Akan Anda Pelajari
Cara menyusun aplikasi CRUD dengan Astro dan Back4app.
Merancang backend yang dapat diskalakan dengan koleksi kustom.
Menggunakan antarmuka admin drag-and-drop untuk manajemen data yang mudah.
Mengintegrasikan frontend Astro Anda dengan Back4app menggunakan REST atau GraphQL.
Menyebarkan proyek Astro Anda dan mengkontainerisasinya dengan Docker jika diperlukan.
﻿
Prasyarat
Sebelum Anda mulai, harap konfirmasi bahwa Anda memiliki:
Akun Back4app dengan proyek baru yang siap.
Lihat Memulai dengan Back4app untuk panduan.
Lingkungan pengembangan Astro yang sudah disiapkan.
Gunakan dokumentasi Astro resmi untuk memulai. Pastikan Node.js (versi 14+) terinstal.
Pemahaman dasar tentang JavaScript, Astro, dan REST API.
Kunjungi dokumentasi Astro jika Anda perlu penyegaran.
﻿
Langkah 1 – Menginisialisasi Proyek Anda
Memulai Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Astro dan ikuti instruksi untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah dibuat, proyek Anda akan muncul di dasbor Back4app Anda—fondasi Anda untuk konfigurasi backend.
﻿
Langkah 2 – Membuat Skema Database Anda
Menyusun Model Data Anda
Untuk aplikasi CRUD kami, Anda akan mendefinisikan beberapa koleksi. Di bawah ini adalah contoh koleksi dengan bidang dan tipe untuk membantu Anda mengonfigurasi skema database Anda secara efektif. Struktur ini mendukung operasi CRUD yang efisien.
1. Koleksi Barang
Bidang
Tipe
Tujuan
_id
ObjectId
Kunci utama yang dihasilkan secara otomatis.
judul
String
Nama atau judul item.
deskripsi
String
Gambaran singkat tentang item tersebut.
dibuat_pada
Tanggal
Stempel waktu pembuatan.
diperbarui_pada
Tanggal
Timestamp untuk modifikasi terakhir.
2. Koleksi Pengguna
Bidang
Tipe
Tujuan
_id
ObjectId
Kunci utama yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email pengguna.
hash_kata_sandi
String
Kata sandi terenkripsi untuk otentikasi.
dibuat_pada
Tanggal
Ketika akun dibuat.
diperbarui_pada
Tanggal
Waktu pembaruan terakhir untuk akun.
Anda dapat mengonfigurasi koleksi ini secara manual di dasbor Back4app Anda dengan membuat kelas baru dan menambahkan kolom yang sesuai.
Buat Kelas Baru
﻿
Untuk menambahkan sebuah field, pilih tipe data, berikan nama field, tentukan default jika diperlukan, dan tandai apakah field tersebut wajib.
Buat Kolom
﻿
Memanfaatkan Agen AI Back4app untuk Pengaturan Skema
Agen AI terintegrasi di Back4app dapat menghasilkan skema Anda secara otomatis. Deskripsikan koleksi dan field yang Anda inginkan di antarmuka Agen AI, tinjau rekomendasinya, dan terapkan pada proyek Anda.
Contoh Prompt
Text
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-created)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-created)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Alat ini mempercepat pengaturan sambil memastikan skema Anda memenuhi persyaratan aplikasi.
﻿
Langkah 3 – Mengaktifkan Antarmuka Admin & Tindakan CRUD
Menjelajahi Antarmuka Admin
Aplikasi Admin Back4app adalah alat tanpa kode yang menyediakan antarmuka visual untuk mengelola data backend Anda. Desain drag-and-drop-nya memungkinkan Anda melakukan operasi CRUD dengan mudah.
Mengaktifkan Antarmuka Admin
Buka menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik “Aktifkan Aplikasi Admin.”
Atur kredensial admin Anda dengan membuat pengguna admin awal. Ini juga akan mengonfigurasi peran default (misalnya, B4aAdminUser) dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah aktivasi, masuk ke Aplikasi Admin untuk mengelola koleksi Anda.
Dasbor Aplikasi Admin
﻿
Mengelola Data dengan Antarmuka Admin
Di dalam Aplikasi Admin Anda dapat:
Menambahkan Rekaman: Klik “Tambahkan Rekaman” di koleksi (seperti Item) untuk membuat entri baru.
Melihat/Mengedit Rekaman: Klik pada sebuah rekaman untuk memeriksa atau memodifikasi bidangnya.
Menghapus Rekaman: Hapus entri yang tidak lagi diperlukan dengan mudah.
Alat ini menyederhanakan operasi CRUD dengan antarmuka yang intuitif.
﻿
Langkah 4 – Menghubungkan Astro dengan Back4app
Dengan backend Anda yang sudah dikonfigurasi, saatnya untuk mengintegrasikan frontend Astro Anda.
Memanfaatkan REST/GraphQL APIs
Karena Astro adalah generator situs statis yang dioptimalkan untuk kinerja, kita akan berinteraksi dengan Back4app menggunakan REST atau GraphQL APIs. Pendekatan ini menghindari kebutuhan akan Parse SDK.
Contoh: Mengambil Item melalui REST
Berikut adalah contoh panggilan API REST dalam komponen Astro:
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const fetchItems = async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const fetchItems = async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
Integrasikan panggilan API serupa untuk membuat, memperbarui, dan menghapus catatan dalam komponen Astro Anda.
﻿
Langkah 5 – Melindungi Backend Anda
Menerapkan Daftar Kontrol Akses (ACL)
Lindungi data Anda dengan mengatur ACL pada objek. Misalnya, untuk membuat item yang hanya dapat dimodifikasi oleh pemiliknya:
JS
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
﻿
Mengonfigurasi Izin Tingkat Kelas (CLP)
Di dalam dasbor Back4app, sesuaikan CLP untuk setiap koleksi untuk mendefinisikan siapa yang dapat mengakses dan memodifikasi data Anda.
﻿
Langkah 6 – Menambahkan Autentikasi Pengguna
Mengatur Pendaftaran dan Masuk Pengguna
Back4app menggunakan kelas Pengguna Parse untuk otentikasi. Dalam proyek Astro Anda, buat komponen untuk pendaftaran dan masuk pengguna dengan memanfaatkan panggilan REST API.
Contoh: Pendaftaran Pengguna
Text
// src/components/SignUp.astro
---
import { useState } from 'react';

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
// src/components/SignUp.astro
---
import { useState } from 'react';

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
﻿
Anda dapat membangun komponen serupa untuk masuk pengguna dan manajemen sesi.
﻿
Langkah 7 – Menerapkan Frontend Astro Anda
Fitur Web Deployment Back4app memungkinkan Anda untuk menghosting proyek Astro Anda dengan mulus dengan menghubungkan repositori GitHub Anda.
7.1 Membangun Versi Produksi Anda
Buka terminal di direktori proyek Anda.
Jalankan perintah build:
Bash
npm run build
npm run build
﻿
Ini menghasilkan folder dist yang dioptimalkan dengan aset statis Anda.
Periksa Build:
Pastikan bahwa folder dist berisi sebuah index.html bersama dengan direktori aset lainnya.
﻿
7.2 Mengorganisir Repositori Proyek Anda
Repositori Anda harus mencakup kode sumber Astro yang lengkap. Struktur contoh mungkin adalah:
Text
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
﻿
Contoh File: src/components/ItemsList.astro
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
7.3 Mengkomit dan Mendorong Kode Anda ke GitHub
Inisialisasi repositori Git (jika belum dilakukan):
Bash
git init
git init
﻿
Tambahkan semua file:
Bash
git add .
git add .
﻿
Komit perubahan Anda:
Bash
git commit -m "Komit awal untuk frontend Astro"
git commit -m "Komit awal untuk frontend Astro"
﻿
Buat repositori di GitHub (misalnya, Basic-CRUD-App-Astro) dan dorong:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
﻿
﻿
7.4 Menghubungkan GitHub dengan Penyebaran Web Back4app
Akses Web Deployment:
Masuk ke dasbor Back4app Anda, navigasikan ke proyek Anda (Basic-CRUD-App-Astro), dan pilih opsi Web Deployment.
Hubungkan Akun GitHub Anda:
Ikuti petunjuk untuk mengizinkan Back4app mengakses repositori Anda.
Pilih Repositori dan Cabang Anda:
Pilih repositori (misalnya, Basic-CRUD-App-Astro) dan cabang (biasanya main).
﻿
7.5 Mengonfigurasi Pengaturan Deployment
Perintah Build:
Tentukan perintah build (misalnya, npm run build) jika repositori Anda tidak memiliki output yang sudah dibangun.
Direktori Output:
Atur ke dist sehingga Back4app tahu di mana menemukan file statis Anda.
Variabel Lingkungan:
Tambahkan variabel yang diperlukan, seperti kunci API.
﻿
7.6 Dockerizing Aplikasi Astro Anda (Opsional)
Jika Anda lebih suka penyebaran terkontainer, sertakan sebuah Dockerfile seperti:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build the project
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build the project
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Integrasikan pengaturan Docker dalam konfigurasi Penyebaran Web Anda jika diinginkan.
﻿
7.7 Meluncurkan Aplikasi Anda
Tekan tombol Deploy di bagian Penyebaran Web.
Pantau proses pembangunan:
Back4app akan mengambil kode Anda, membangunnya, dan menyebarkan aplikasi Anda.
Terima URL Anda:
Setelah disebarkan, Back4app akan menyediakan URL di mana situs Anda aktif.
﻿
Langkah 8 – Menyelesaikan dan Peningkatan Masa Depan
Kerja bagus! Anda sekarang telah membuat aplikasi CRUD lengkap dengan Astro dan Back4app. Proyek Anda mencakup backend dengan koleksi terperinci untuk Item dan Pengguna, serta frontend yang melakukan semua operasi CRUD melalui REST/GraphQL API.
Langkah Selanjutnya:
Tingkatkan Frontend:
Tambahkan fitur seperti tampilan terperinci, kemampuan pencarian, dan notifikasi waktu nyata.
Perluas Fungsionalitas Backend:
Pertimbangkan untuk mengintegrasikan fungsi cloud atau endpoint API tambahan untuk logika yang lebih kompleks.
Selami Lebih Dalam:
Jelajahi sumber daya lebih lanjut di dokumentasi Back4app dan dokumentasi Astro untuk topik lanjutan.
Dengan mengikuti tutorial ini, Anda sekarang memiliki pengetahuan untuk membangun aplikasi CRUD yang kuat dan dapat diskalakan menggunakan Astro dan Back4app. Selamat berkoding dan menjelajahi kemungkinan baru!
Bidang	Tipe	Tujuan
_id	ObjectId	Kunci utama yang dihasilkan secara otomatis.
judul	String	Nama atau judul item.
deskripsi	String	Gambaran singkat tentang item tersebut.
dibuat_pada	Tanggal	Stempel waktu pembuatan.
diperbarui_pada	Tanggal	Timestamp untuk modifikasi terakhir.
Bidang	Tipe	Tujuan
_id	ObjectId	Kunci utama yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email pengguna.
hash_kata_sandi	String	Kata sandi terenkripsi untuk otentikasi.
dibuat_pada	Tanggal	Ketika akun dibuat.
diperbarui_pada	Tanggal	Waktu pembaruan terakhir untuk akun.
Diperbarui 20 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Tutorial Back4app
BERIKUTNYA
Cara Membuat Aplikasi CRUD dengan Kotlin?