Quickstarters
Cara Membangun Aplikasi CRUD dengan ReactJS?

42min
Pendahuluan
Dalam tutorial ini, Anda akan membangun aplikasi CRUD (buat, baca, perbarui, dan hapus) yang komprehensif menggunakan ReactJS. 
Panduan ini dirancang untuk melakukan operasi dasar dari sebuah aplikasi perangkat lunak dengan menunjukkan cara membangun aplikasi CRUD yang secara efektif mengelola dan memperbarui data. 
Anda akan mulai dengan membuat dan mengonfigurasi proyek Back4app yang bernama Basic-CRUD-App-ReactJS, yang berfungsi sebagai sistem backend yang kuat untuk aplikasi web Anda.
Selanjutnya, Anda akan merancang skema basis data yang dapat diskalakan dengan mendefinisikan koleksi dan bidang yang terperinci—baik secara manual atau dengan bantuan Agen AI Back4app. 
Kemudian, Anda akan memanfaatkan Aplikasi Admin Back4app—alat manajemen yang ramah pengguna dengan antarmuka seret dan lepas—untuk dengan mudah mengelola data koleksi Anda. 
Antarmuka admin ini meningkatkan pengalaman pengguna dan menyederhanakan antarmuka pengguna, memungkinkan pengguna untuk dengan cepat melakukan operasi CRUD.
Akhirnya, Anda akan menerapkan frontend ReactJS Anda dan mengintegrasikannya dengan Back4app menggunakan REST/GraphQL (atau SDK Parse, jika tersedia), sambil mengamankan backend Anda dengan kontrol akses yang canggih.
Pada akhir panduan ini, Anda akan membangun aplikasi web yang siap produksi yang tidak hanya mendukung operasi CRUD dasar tetapi juga mencakup otentikasi pengguna dan kemampuan pembaruan data yang kuat.
Poin Penting
Pelajari cara membangun aplikasi CRUD yang secara efisien mengelola data menggunakan sistem manajemen basis data yang andal.
Dapatkan wawasan praktis tentang merancang backend yang dapat diskalakan dan mengintegrasikannya dengan frontend ReactJS untuk meningkatkan pengalaman pengguna.
Temukan cara menggunakan alat manajemen drag and drop (Aplikasi Admin Back4app) untuk menyederhanakan operasi buat, baca, perbarui, dan hapus.
Pahami teknik penyebaran, termasuk kontainerisasi Docker, untuk meluncurkan aplikasi web Anda dengan cepat.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki hal-hal berikut:
Akun Back4app dan proyek baru yang sudah disiapkan.
Jika Anda memerlukan bantuan, lihat Memulai dengan Back4app.
Lingkungan pengembangan ReactJS.
Gunakan Create React App atau alat serupa. Pastikan Node.js (versi 14 atau lebih tinggi) terinstal.
Pemahaman dasar tentang JavaScript, ReactJS, dan REST API.
Tinjau dokumentasi ReactJS jika perlu.
﻿
Langkah 1 – Pengaturan Proyek
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Masukkan nama proyek: Basic-CRUD-App-ReactJS dan ikuti petunjuk untuk membuat proyek Anda.
Buat Proyek Baru
﻿
Setelah dibuat, proyek baru Anda akan muncul di dasbor Back4app Anda, memberikan dasar yang solid untuk konfigurasi backend dan manajemen proyek Anda.
﻿
Langkah 2 – Desain Skema Database
Merancang Model Data Anda
Untuk aplikasi CRUD dasar, Anda akan membuat beberapa koleksi. 
Di bawah ini adalah beberapa contoh koleksi yang Anda perlukan, yang menguraikan bidang dan tipe data yang diperlukan untuk membantu Anda mengatur skema basis data Anda dengan efektif.
Koleksi ini dirancang untuk melakukan operasi CRUD dasar yang memungkinkan pengguna untuk membuat, membaca, memperbarui, dan menghapus data.
1. Koleksi Item
Koleksi ini menyimpan informasi tentang setiap item.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Kunci utama yang dihasilkan secara otomatis.
judul
String
Judul item tersebut.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuat_pada
Tanggal
Timestamp ketika item dibuat.
diperbarui_pada
Tanggal
Timestamp ketika item terakhir diperbarui.
2. Koleksi Pengguna
Koleksi ini menyimpan informasi pengguna dan detail otentikasi.
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Kunci utama yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email yang unik.
hash_kata_sandi
String
Kata sandi yang di-hash untuk otentikasi.
dibuat_pada
Tanggal
Timestamp ketika akun pengguna dibuat.
diperbarui_pada
Tanggal
Stempel waktu ketika akun pengguna diperbarui.
Anda dapat mengatur koleksi ini secara manual di dasbor Back4app dengan membuat kelas baru untuk setiap koleksi dan menambahkan kolom untuk mendefinisikan bidang.
Buat Kelas Baru
﻿
Anda dapat dengan mudah membuat kolom untuk basis data Anda dengan memilih jenis data, memberi nama kolom, menetapkan nilai default, dan menentukan apakah itu diperlukan.
Buat Kolom
﻿
﻿
Menggunakan Agen AI Back4app untuk Generasi Skema
Agen AI Back4app adalah alat yang kuat yang tersedia langsung dari dasbor Back4app Anda. 
Ini memungkinkan Anda untuk secara otomatis menghasilkan skema basis data Anda berdasarkan prompt yang menggambarkan koleksi dan bidang yang Anda inginkan.
Fungsi ini merupakan penghemat waktu yang signifikan untuk manajemen proyek dan membantu memastikan bahwa sistem manajemen basis data Anda diatur untuk melakukan operasi dasar yang diperlukan oleh aplikasi web Anda.
Cara Menggunakan AI Agent:
Buka AI Agent:
Masuk ke dasbor Back4app Anda dan temukan AI Agent di menu atau dalam pengaturan proyek Anda.
Deskripsikan Model Data Anda:
Di antarmuka AI Agent, tempelkan prompt rinci yang menjelaskan koleksi dan bidang yang Anda butuhkan.
Tinjau dan Terapkan:
Setelah dikirim, AI Agent akan menghasilkan koleksi dan definisi bidang. Tinjau saran ini dan terapkan pada proyek Anda.
Contoh Prompt
Text
Create the following collections in my Back4app application:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Menggunakan AI Agent dengan cara ini menghemat waktu dan memastikan bahwa skema Anda konsisten dan dioptimalkan untuk kebutuhan aplikasi Anda.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app adalah antarmuka tanpa kode yang kuat yang memungkinkan Anda mengelola data backend Anda. 
Alat manajemen ini menyediakan antarmuka pengguna seret dan lepas yang memungkinkan pengguna untuk dengan mudah melakukan operasi CRUD seperti membuat, membaca, memperbarui, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Navigasikan ke menu “Lainnya” di dasbor Back4app Anda.
Klik pada “Aplikasi Admin” dan kemudian pada “Aktifkan Aplikasi Admin.”
Konfigurasikan kredensial admin Anda dengan membuat pengguna admin pertama Anda. Proses ini juga mengatur peran (misalnya, B4aAdminUser) dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah mengaktifkan, masuk ke Aplikasi Admin untuk mengelola data Anda.
Dasbor Aplikasi Admin
﻿
Menggunakan Aplikasi Admin untuk Operasi CRUD
Di dalam Aplikasi Admin, Anda dapat:
Membuat Rekaman: Klik tombol “Tambah Rekaman” di dalam koleksi (misalnya, Item) untuk membuat entri baru.
Membaca/Memperbarui Rekaman: Pilih rekaman mana pun untuk melihat detailnya atau mengedit bidang, memastikan pembaruan data yang lancar.
Menghapus Rekaman: Gunakan opsi hapus untuk menghapus rekaman yang tidak lagi diperlukan.
Alat manajemen yang mudah digunakan ini meningkatkan pengalaman pengguna secara keseluruhan dengan menyediakan antarmuka seret dan lepas yang sederhana untuk fungsi CRUD.
﻿
Langkah 4 – Mengintegrasikan ReactJS dengan Back4app
Sekarang setelah backend Anda diatur dan dikelola melalui Aplikasi Admin, saatnya untuk menghubungkan frontend ReactJS Anda ke Back4app.
Opsi A: Menggunakan Parse SDK
Instal Parse SDK:
Bash
npm install parse
npm install parse
﻿
Inisialisasi Parse di Aplikasi React Anda:
Buat file (misalnya, src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Ganti dengan kredensial Back4app Anda yang sebenarnya
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Ganti dengan kredensial Back4app Anda yang sebenarnya
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Gunakan Parse dalam Komponen React:
Sebagai contoh, buat komponen untuk mengambil dan menampilkan item:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Item</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Item</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Opsi B: Menggunakan REST atau GraphQL
Jika lingkungan Anda tidak mendukung Parse SDK, Anda dapat melakukan operasi CRUD menggunakan REST atau GraphQL. Sebagai contoh, untuk mengambil item menggunakan REST:
JS
// Example REST call to fetch items
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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integrasikan panggilan API ini ke dalam komponen React Anda sesuai kebutuhan.
﻿
Langkah 5 – Mengamankan Backend Anda
Daftar Kontrol Akses (ACL)
Amankan data Anda dengan menetapkan ACL ke objek. Misalnya, untuk membuat item pribadi:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Izin Tingkat Kelas (CLP)
Di dasbor Back4app, konfigurasikan CLP untuk setiap koleksi untuk menetapkan aturan akses default. Ini memastikan bahwa hanya pengguna yang terautentikasi atau berwenang yang dapat mengakses data sensitif.
﻿
Langkah 6 – Autentikasi Pengguna
Menyiapkan Akun Pengguna
Back4app memanfaatkan kelas Pengguna Parse untuk otentikasi. Dalam aplikasi React Anda, tangani pendaftaran dan login pengguna sebagai berikut:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

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

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

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

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
Pendekatan serupa dapat digunakan untuk login dan manajemen sesi. Fitur tambahan seperti login sosial, verifikasi email, dan pengaturan ulang kata sandi dapat dikonfigurasi di dasbor Back4app.
﻿
Langkah 7 – Menerapkan Frontend ReactJS Anda dengan Penerapan Web
Fitur Penerapan Web Back4app memungkinkan Anda untuk menghosting frontend ReactJS Anda dengan mulus dengan menerapkan kode Anda dari repositori GitHub.
Dalam bagian ini, Anda akan belajar bagaimana menyiapkan build produksi Anda, mengkomit kode sumber Anda ke GitHub, mengintegrasikan repositori Anda dengan Penerapan Web, dan menerapkan situs Anda.
7.1 Siapkan Build Produksi Anda
Buka folder proyek Anda di terminal.
Jalankan perintah build:
Bash
npm run build
npm run build
﻿
Perintah ini membuat sebuah build folder yang berisi semua file statis yang dioptimalkan (termasuk index.html, JavaScript, CSS, dan gambar).
Verifikasi Build:
Pastikan bahwa build folder berisi sebuah index.html file beserta subdirektori aset yang diperlukan.
﻿
7.2 Atur dan Unggah Kode Sumber Anda
Repositori Anda harus mencakup seluruh kode sumber untuk frontend ReactJS Anda. Struktur file yang tipikal mungkin terlihat seperti ini:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Contoh File Kode Sumber
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual 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 with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
Tambahkan file sumber Anda:
Bash
git add .
git add .
﻿
Kirim perubahan Anda:
Bash
git commit -m "Komit awal dari kode sumber frontend ReactJS"
git commit -m "Komit awal dari kode sumber frontend ReactJS"
﻿
Buat repositori GitHub:
Misalnya, buat repositori bernama Basic-CRUD-App-ReactJS-Frontend di GitHub.
Dorong kode Anda ke GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integrasikan Repositori GitHub Anda dengan Web Deployment
Akses Web Deployment:
Masuk ke dasbor Back4app Anda, navigasikan ke proyek Anda (Basic-CRUD-App-ReactJS), dan klik pada fitur Web Deployment.
Hubungkan ke GitHub:
Jika Anda belum melakukannya, integrasikan akun GitHub Anda dengan mengikuti petunjuk di layar. Koneksi ini memungkinkan Back4app mengakses repositori Anda.
Pilih Repositori dan Cabang Anda:
Pilih repositori yang Anda buat (misalnya, Basic-CRUD-App-ReactJS-Frontend) dan pilih cabang (misalnya, main) yang berisi kode ReactJS Anda.
﻿
7.4 Konfigurasi Penyebaran Anda
Berikan detail konfigurasi tambahan:
Perintah Build:
Jika repositori Anda tidak menyertakan folder build yang sudah dibangun, tentukan perintah build (misalnya, npm run build). Back4app akan menjalankan perintah ini selama penyebaran.
Direktori Output:
Atur direktori output ke build sehingga Back4app tahu folder mana yang berisi file situs statis Anda.
Variabel Lingkungan:
Jika aplikasi Anda bergantung pada variabel lingkungan (misalnya, kunci API), tambahkan mereka dalam pengaturan konfigurasi.
﻿
7.5 Dockerisasi Proyek Aplikasi ReactJS Anda
Jika Anda lebih suka menggunakan Docker untuk penyebaran, Anda dapat mengcontainerisasi aplikasi ReactJS Anda. Sertakan sebuah Dockerfile di repositori Anda dengan konten yang mirip dengan berikut:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Sertakan Dockerfile ini di repositori Anda. Kemudian, dalam konfigurasi Penyebaran Web Anda, pilih opsi penyebaran Docker untuk membangun dan menyebarkan aplikasi terkontainer Anda.
﻿
7.6 Sebarkan Aplikasi Anda
Klik Tombol Sebarkan:
Setelah Anda mengonfigurasi pengaturan penyebaran, klik tombol Sebarkan.
Pantau Proses Pembangunan:
Back4app akan menarik kode Anda dari GitHub, menjalankan perintah build (jika dikonfigurasi), dan menyebarkan aplikasi Anda dalam sebuah kontainer.
Dapatkan URL Anda:
Setelah penyebaran selesai, Back4app akan memberikan URL di mana aplikasi ReactJS Anda dihosting.
﻿
7.7 Verifikasi Penyebaran Anda
Kunjungi URL yang Diberikan:
Buka URL di browser web Anda untuk melihat situs yang telah disebarkan.
Uji Aplikasi:
Verifikasi bahwa aplikasi Anda dimuat dengan benar, semua rute berfungsi seperti yang diharapkan, dan semua aset (CSS, JavaScript, gambar) disajikan dengan baik.
Perbaiki jika Diperlukan:
Gunakan alat pengembang di browser Anda untuk memeriksa kesalahan. Jika masalah muncul, tinjau log penyebaran di Back4app dan verifikasi integrasi GitHub serta pengaturan build Anda.
﻿
Langkah 8 – Kesimpulan dan Langkah Selanjutnya
Selamat! Anda telah membangun aplikasi CRUD dasar yang lengkap menggunakan ReactJS dan Back4app. 
Anda telah mengonfigurasi proyek bernama Basic-CRUD-App-ReactJS, merancang koleksi database yang terperinci untuk Item dan Pengguna, dan mengelola data Anda melalui Admin App yang kuat. 
Anda juga mengintegrasikan frontend ReactJS Anda dengan backend Anda dan mengamankan data Anda dengan kontrol akses yang kuat.
Langkah Selanjutnya:
Tingkatkan Frontend Anda:
Perluas aplikasi ReactJS Anda dengan fitur-fitur seperti tampilan item yang terperinci, fungsionalitas pencarian, dan notifikasi waktu nyata.
Integrasikan Fitur Tambahan:
Pertimbangkan untuk menambahkan logika backend yang lebih canggih (misalnya, Cloud Functions), integrasi API pihak ketiga, atau kontrol akses berbasis peran.
Jelajahi Sumber Daya Lain:
Tinjau dokumentasi Back4app dan tutorial tambahan untuk pendalaman lebih dalam tentang optimasi kinerja dan integrasi kustom.
Dengan mengikuti tutorial ini, Anda sekarang memiliki keterampilan untuk membuat backend CRUD yang kuat dan dapat diskalakan untuk aplikasi ReactJS Anda menggunakan Back4app. Selamat coding!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Kunci utama yang dihasilkan secara otomatis.
judul	String	Judul item tersebut.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuat_pada	Tanggal	Timestamp ketika item dibuat.
diperbarui_pada	Tanggal	Timestamp ketika item terakhir diperbarui.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Kunci utama yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email yang unik.
hash_kata_sandi	String	Kata sandi yang di-hash untuk otentikasi.
dibuat_pada	Tanggal	Timestamp ketika akun pengguna dibuat.
diperbarui_pada	Tanggal	Stempel waktu ketika akun pengguna diperbarui.
Diperbarui 17 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Membangun Aplikasi CRUD Dasar dengan Angular?
BERIKUTNYA
Cara Membangun Backend untuk Blazor?