Quickstarters
Cara Membuat Aplikasi CRUD dengan Gatsby?

34min
Pendahuluan
Dalam panduan ini, Anda akan menemukan cara membangun aplikasi web CRUD (buat, baca, perbarui, hapus) menggunakan Gatsby. 
Kami akan menggunakan Back4app sebagai backend cloud Anda untuk mengelola data dengan mudah. Panduan ini akan memandu Anda melalui konfigurasi proyek Back4app, mendefinisikan skema yang fleksibel, dan menghubungkan aplikasi Gatsby Anda dengan panggilan API REST atau GraphQL untuk melakukan operasi CRUD.
Pertama, Anda akan mengatur proyek Back4app yang bernama Basic-CRUD-App-Gatsby. Proyek ini memberi Anda akses ke database non-relasional yang kuat. Anda akan merancang skema data Anda dengan membuat kelas dan bidang secara manual di dasbor Back4app atau dengan memanfaatkan AI Agent Back4app.
Selanjutnya, Anda akan menggunakan Aplikasi Admin Back4app—antarmuka seret dan lepas—untuk menangani tugas manajemen data dengan mudah. 
Akhirnya, Anda akan mengintegrasikan aplikasi Gatsby Anda dengan API Back4app (melalui REST atau GraphQL) untuk menjalankan operasi CRUD yang aman.
Pada akhir tutorial ini, Anda akan mengembangkan aplikasi Gatsby yang siap produksi yang melakukan operasi CRUD dasar dengan penanganan data yang aman dan otentikasi pengguna.
Poin Penting
Pelajari cara membuat aplikasi CRUD dengan Gatsby yang didukung oleh backend low-code.
Pahami cara menyusun backend Anda dan menghubungkannya dengan situs Gatsby modern.
Manfaatkan Aplikasi Admin Back4app yang intuitif untuk mengelola pembuatan, pembacaan, pembaruan, dan penghapusan data.
Temukan opsi penyebaran termasuk strategi kontainerisasi untuk aplikasi Gatsby Anda.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek aktif.
Butuh bantuan? Lihat Memulai dengan Back4app.
Lingkungan Node.js dengan Gatsby CLI terinstal.
Gunakan Node.js dan instal Gatsby melalui npm install -g gatsby-cli.
Pemahaman tentang React, GraphQL, dan REST API.
Tinjau dokumentasi React jika diperlukan.
﻿
Langkah 1 – Menyiapkan Proyek Anda
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik pada “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Gatsby dan selesaikan langkah-langkah pengaturan.
Buat Proyek Baru
﻿
Setelah dibuat, proyek Anda akan muncul di dasbor, siap untuk konfigurasi backend.
﻿
Langkah 2 – Mendefinisikan Model Data Anda
Mengonfigurasi Skema Anda
Untuk aplikasi CRUD ini, Anda perlu menyiapkan beberapa kelas di Back4app. Di bawah ini adalah contoh kelas dan bidang yang penting.
1. Kelas Item
Kelas ini menyimpan rincian tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama barang.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Timestamp ketika item dibuat.
diperbaruiPada
Tanggal
Timestamp ketika item terakhir diperbarui.
2. Kelas Pengguna
Kelas ini menangani kredensial pengguna dan otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
ID unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email unik pengguna.
hashKataSandi
String
Kata sandi terenkripsi untuk masuk.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Stempel waktu pembaruan akun terbaru.
Anda dapat menambahkan kelas dan bidang ini langsung di dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat mendefinisikan bidang dengan memilih tipe data, memberi nama bidang, mengatur default, dan menandai bidang yang diperlukan.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Generasi Skema
Agen AI Back4app dapat secara otomatis membangun skema Anda berdasarkan spesifikasi Anda. Ini mempercepat pengaturan dan memastikan model data Anda mendukung semua operasi CRUD.
Cara Menggunakan Agen AI:
Buka Agen AI:
Masuk ke dasbor Back4app Anda dan temukan Agen AI di bawah pengaturan proyek Anda.
Masukkan Kebutuhan Anda:
Jelaskan kelas dan bidang yang Anda butuhkan.
Tinjau dan Terapkan:
Agen akan menyarankan skema. Tinjau dan konfirmasi untuk menerapkannya.
Contoh Prompt
Text
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Pendekatan yang dibantu AI ini memastikan skema data yang konsisten dan efisien.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Mengelola Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode untuk manajemen data backend. Fitur drag and drop yang ramah pengguna menyederhanakan operasi CRUD seperti menambahkan, melihat, memperbarui, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik “Aktifkan Aplikasi Admin.”
Konfigurasikan kredensial admin Anda dengan mengatur akun admin pertama. Langkah ini juga membuat peran (misalnya, B4aAdminUser) dan kelas sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data backend Anda.
Dasbor Aplikasi Admin
﻿
Menggunakan Aplikasi Admin untuk Tugas CRUD
Di dalam Aplikasi Admin, Anda dapat:
Menyisipkan Catatan: Gunakan fitur “Tambahkan Catatan” di sebuah kelas (seperti Item) untuk membuat entri baru.
Memeriksa/Memperbarui Catatan: Klik pada entri mana pun untuk melihat detail atau mengubah informasi.
Menghapus Catatan: Hapus catatan yang sudah usang atau tidak diperlukan.
Antarmuka yang disederhanakan ini membuat manajemen data cepat dan intuitif.
﻿
Langkah 4 – Menghubungkan Aplikasi Gatsby Anda dengan Back4app
Dengan backend Anda yang sudah disiapkan, fase berikutnya adalah menghubungkan aplikasi Gatsby Anda ke Back4app.
Menggunakan Panggilan API di Gatsby
Kita akan memanfaatkan panggilan REST atau GraphQL untuk berkomunikasi dengan Back4app. Opsi kedua adalah menggunakan SDK. 
Mengambil Data Menggunakan REST
Anda dapat menggunakan fetch API JavaScript untuk mengambil data. Misalnya, untuk memuat item dari Back4app:
JS
// src/services/api.js
export 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();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    return [];
  }
};
// src/services/api.js
export 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();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    return [];
  }
};
﻿
Mengirim Data melalui REST
Untuk menambahkan item baru, gunakan permintaan POST:
JS
// src/services/api.js
export const createItem = async (title, description) => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, description }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating item:', error);
  }
};
// src/services/api.js
export const createItem = async (title, description) => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, description }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating item:', error);
  }
};
﻿
Anda juga dapat menerapkan fungsi pembaruan dan penghapusan dengan menggunakan metode PUT/POST dan DELETE.
Integrasikan panggilan API ini ke dalam halaman atau komponen Gatsby Anda untuk mengelola data secara dinamis.
﻿
Langkah 5 – Mengamankan Backend Anda
Menerapkan Kontrol Akses
Lindungi data Anda dengan mengatur Daftar Kontrol Akses (ACL) di Back4app. Misalnya, untuk membuat item yang hanya terlihat oleh pemiliknya:
JS
// Example payload for a private item
const privateItem = {
  title: 'Private Title',
  description: 'This item is private',
  ACL: {
    "*": { "read": false, "write": false },
    "USER_OBJECT_ID": { "read": true, "write": true }
  }
};
// Example payload for a private item
const privateItem = {
  title: 'Private Title',
  description: 'This item is private',
  ACL: {
    "*": { "read": false, "write": false },
    "USER_OBJECT_ID": { "read": true, "write": true }
  }
};
﻿
Izin Tingkat Kelas (CLP)
Atur CLP di dasbor Back4app Anda untuk menegakkan aturan akses default, memastikan hanya pengguna yang terautentikasi yang dapat mengakses kelas tertentu.
﻿
Langkah 6 – Menambahkan Autentikasi Pengguna
Mengonfigurasi Akun Pengguna di Gatsby
Back4app memanfaatkan kelas Pengguna bawaan Parse untuk autentikasi. Di aplikasi Gatsby Anda, kelola pendaftaran dan login pengguna melalui panggilan API.
Contoh: Pendaftaran Pengguna
JS
// src/services/auth.js
export const signUp = async (username, password, email) => {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password, email }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error during sign up:', error);
  }
};
// src/services/auth.js
export const signUp = async (username, password, email) => {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password, email }),
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error during sign up:', error);
  }
};
﻿
Contoh: Masuk Pengguna
JS
// src/services/auth.js
export const logIn = async (username, password) => {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      },
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Login error:', error);
  }
};
// src/services/auth.js
export const logIn = async (username, password) => {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      },
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Login error:', error);
  }
};
﻿
Pendekatan ini dapat diperluas untuk mengelola sesi, pengaturan ulang kata sandi, dan lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi Gatsby Anda
Back4app mendukung proses penyebaran yang lancar. Anda dapat menyebarkan aplikasi Gatsby Anda menggunakan beberapa metode, termasuk kontainerisasi.
7.1 Membangun Situs Gatsby Anda
Instal Dependensi:
Jalankan:
Bash
npm install
npm install
﻿
Bangun Situs:
Gunakan perintah build Gatsby:
Bash
gatsby build
gatsby build
﻿
Uji Secara Lokal:
Layani build produksi Anda untuk memverifikasi fungsionalitas:
Bash
gatsby serve
gatsby serve
﻿
7.2 Ikhtisar Struktur Proyek
Struktur proyek Gatsby yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-Gatsby/
|-- node_modules/
|-- src/
|   |-- components/
|   |   |-- ItemForm.js
|   |   |-- ItemList.js
|   |-- pages/
|       |-- index.js
|       |-- login.js
|-- static/
|-- gatsby-config.js
|-- package.json
|-- README.md
Basic-CRUD-App-Gatsby/
|-- node_modules/
|-- src/
|   |-- components/
|   |   |-- ItemForm.js
|   |   |-- ItemList.js
|   |-- pages/
|       |-- index.js
|       |-- login.js
|-- static/
|-- gatsby-config.js
|-- package.json
|-- README.md
﻿
7.3 Menggunakan Docker untuk Aplikasi Gatsby Anda
Jika Anda lebih suka penyebaran terkontainer, tambahkan Dockerfile:
Dockerfile
# Use an official Node.js image as the base
FROM node:14-alpine

# Set the working directory
WORKDIR /app

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

# Copy the remaining source code
COPY . .

# Build the Gatsby site
RUN npm run build

# Expose port (adjust if needed)
EXPOSE 8000

# Serve the built site
CMD ["npx", "gatsby", "serve", "-H", "0.0.0.0"]
# Use an official Node.js image as the base
FROM node:14-alpine

# Set the working directory
WORKDIR /app

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

# Copy the remaining source code
COPY . .

# Build the Gatsby site
RUN npm run build

# Expose port (adjust if needed)
EXPOSE 8000

# Serve the built site
CMD ["npx", "gatsby", "serve", "-H", "0.0.0.0"]
﻿
7.4 Penyebaran melalui Penyebaran Web Back4app
Tautkan Repositori Anda:
Host kode sumber Gatsby Anda di GitHub.
Konfigurasi Penyebaran:
Di dasbor Back4app, pilih Penyebaran Web, sambungkan repositori Anda (misalnya, Basic-CRUD-App-Gatsby), dan pilih cabang.
Atur Perintah Bangun:
Tentukan perintah bangun (misalnya, npm run build) dan direktori keluaran.
Sebarkan:
Klik Sebarkan dan pantau log hingga situs Anda aktif.
﻿
Langkah 8 – Kesimpulan dan Langkah Selanjutnya
Kerja bagus! Anda telah membangun aplikasi CRUD berbasis Gatsby yang terintegrasi dengan Back4app. 
Anda telah menyiapkan proyek bernama Basic-CRUD-App-Gatsby, mendefinisikan model data Anda, mengelola data dengan Admin App, dan menghubungkan front end Gatsby Anda ke Back4app menggunakan panggilan API REST/GraphQL.
Langkah Selanjutnya:
Tingkatkan Aplikasi Anda:
Pertimbangkan untuk menambahkan pencarian lanjutan, tampilan rinci, atau pembaruan waktu nyata.
Perluas Kemampuan Backend:
Jelajahi fungsi cloud, integrasi API pihak ketiga, atau kontrol akses berbasis peran yang lebih baik.
Pelajari Lebih Lanjut:
Kunjungi dokumentasi Back4app untuk wawasan dan tutorial tambahan.
Selamat coding dan nikmati membangun aplikasi CRUD Gatsby Anda!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama barang.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Timestamp ketika item dibuat.
diperbaruiPada	Tanggal	Timestamp ketika item terakhir diperbarui.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	ID unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email unik pengguna.
hashKataSandi	String	Kata sandi terenkripsi untuk masuk.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Stempel waktu pembaruan akun terbaru.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Aplikasi CRUD dengan Remix?
BERIKUTNYA
Cara Mengembangkan Aplikasi CRUD dengan Nuxt.js?